perf: update for ESM support

Changes to be committed:
modified:   README.md
modified:   docs/api.md
modified:   package-lock.json
modified:   package.json
modified:   scripts/generateDocs.mjs
modified:   src/auro-dialog.js
modified:   src/componentBase.js

README.md

@@ -41,11 +41,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-dialog/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-dialog/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-dialog?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-dialog)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-dialog?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-
+![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+
 ```shell
 $ npm i @aurodesignsystem/auro-dialog
 ```
@@ -126,7 +127,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].5/dist/bundled/essentials.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].8/dist/bundled/essentials.css" />
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-dialog__bundled.js" type="module"></script>
 ```
 

docs/api.md

@@ -4,7 +4,6 @@
 
 | Attribute | Type      | Description                                      |
 |-----------|-----------|--------------------------------------------------|
-| `fixed`   | `Boolean` | Uses fixed pixel values for element shape        |
 | `md`      | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
 | `onDark`  | `Boolean` | Sets close icon to white for dark backgrounds    |
 | `sm`      | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |

package.json

@@ -24,15 +24,16 @@
     "lit": "^3.1.2"
   },
   "peerDependencies": {
+    "@alaskaairux/icons": "^4.36.1",
     "@aurodesignsystem/design-tokens": "^4.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^5.0.5"
+    "@aurodesignsystem/webcorestylesheets": "^5.0.8"
   },
   "devDependencies": {
-    "@alaskaairux/icons": "^4.32.0",
+    "@alaskaairux/icons": "^4.36.1",
     "@aurodesignsystem/auro-library": "^2.5.1",
     "@aurodesignsystem/design-tokens": "^4.3.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^5.0.5",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.8",
     "@commitlint/cli": "^18.5.0",
     "@commitlint/config-conventional": "^18.5.0",
     "@open-wc/testing": "^4.0.0",

scripts/generateDocs.mjs

@@ -5,7 +5,7 @@ import https from 'https';
 
 const __dirname = new URL('.', import.meta.url).pathname;
 
-const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md';
+const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_esm.md';
 const dirDocTemplates = './docTemplates';
 const readmeFilePath = dirDocTemplates + '/README.md';
 

src/auro-dialog.js

@@ -3,7 +3,7 @@
 
 // ---------------------------------------------------------------------
 
-import ComponentBase from './componentBase';
+import ComponentBase from './componentBase.js';
 
 // build the component class
 export class AuroDialog extends ComponentBase {

src/componentBase.js

@@ -12,7 +12,7 @@ import styleCss from "./style-css.js";
 import styleCssFixed from './style-fixed-css.js';
 import styleUnformattedCss from './style-unformatted-css.js';
 import styleUnformattedCssFixed from './style-unformatted-fixed-css.js';
-import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg_es6.js';
+import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs';
 
 /* eslint-disable one-var, prefer-destructuring */
 
@@ -24,7 +24,6 @@ const ESCAPE_KEYCODE = 27,
  * auro-dialog appear above the page and require the user's attention.
  *
  * @attr {Boolean} modal - Modal dialog restricts the user to take an action (no default close actions)
- * @attr {Boolean} fixed - Uses fixed pixel values for element shape
  * @attr {Boolean} unformatted - Unformatted dialog window, edge-to-edge fill for content
  * @attr {Boolean} sm - Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
  * @attr {Boolean} md - Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.