@aurodesignsystem/auro-dialog 3.1.2 → 3.1.4

package/dist/buttonVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "9.4.0";
+declare const _default: "11.3.0";
 export default _default;
 //# sourceMappingURL=buttonVersion.d.ts.map

package/dist/buttonVersion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVersion.d.ts","sourceRoot":"","sources":["../src/buttonVersion.js"],"names":[],"mappings":"wBAAe,OAAO"}
+{"version":3,"file":"buttonVersion.d.ts","sourceRoot":"","sources":["../src/buttonVersion.js"],"names":[],"mappings":"wBAAe,QAAQ"}

package/dist/componentBase.d.ts

@@ -67,21 +67,22 @@ export default class ComponentBase extends LitElement {
      */
     private openDialog;
     defaultTrigger: Element;
+    focusTrap: any;
     /**
+     * set the focus on the first element after opening transition effect is complete.
      * @private
-     * @returns {void}
      */
-    private closeDialog;
+    private onDialogTransitionEnd;
     /**
      * @private
      * @returns {void}
      */
-    private dispatchToggleEvent;
+    private closeDialog;
     /**
      * @private
-     * @returns {void} Determines if dropdown bib should be closed on focus change.
+     * @returns {void}
      */
-    private handleFocusLoss;
+    private dispatchToggleEvent;
     /**
      * @private
      * @returns {void}

package/dist/componentBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IA0BE;;;;;;;;;;;;;;;MAeC;IAoJD,+CAOC;IAhMC,eAAkB;IAClB,qBAAwB;IAIxB;;OAEG;IACH,kBAAiF;IAEjF;;OAEG;IACH,gBAAyE;IAGzE;;OAEG;IACH,qBAAiD;IAoBnD,qBAYC;IALC,oBAAsD;IAOxD;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAUhB;IAIC,yBAAwD;IAS1D;;;OAGG;IACH,mBAQC;IAPC,wBAA4C;IAS9C;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,wBAiBC;IAED;;;OAGG;IACH,2BAaC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IAWD;;;OAGG;IACH,uBASC;IAED,4CAuCC;CACF;2BA3S0B,KAAK"}
+{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IA0BE;;;;;;;;;;;;;;;MAeC;IA8ID,+CAOC;IA1LC,eAAkB;IAClB,qBAAwB;IAIxB;;OAEG;IACH,kBAAiF;IAEjF;;OAEG;IACH,gBAAyE;IAGzE;;OAEG;IACH,qBAAiD;IAoBnD,qBAYC;IALC,oBAAsD;IAOxD;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAUhB;IAIC,yBAAwD;IAS1D;;;OAGG;IACH,mBAIC;IAHC,wBAA4C;IAE5C,eAA2C;IAG7C;;;OAGG;IACH,8BAIC;IAED;;;OAGG;IACH,oBAaC;IAED;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,2BAaC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IAWD;;;OAGG;IACH,uBAQC;IAED,4CA8CC;CACF;2BA5S0B,KAAK"}

package/dist/iconVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "8.0.3";
+declare const _default: "8.1.0";
 export default _default;
 //# sourceMappingURL=iconVersion.d.ts.map

package/dist/{color-css.d.ts.map → styles/color-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"color-css.d.ts","sourceRoot":"","sources":["../src/color-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"color-css.d.ts","sourceRoot":"","sources":["../../src/styles/color-css.js"],"names":[],"mappings":""}

package/dist/{style-css.d.ts.map → styles/style-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"style-css.d.ts","sourceRoot":"","sources":["../src/style-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"style-css.d.ts","sourceRoot":"","sources":["../../src/styles/style-css.js"],"names":[],"mappings":""}

package/dist/styles/style-unformatted-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-unformatted-css.d.ts","sourceRoot":"","sources":["../../src/styles/style-unformatted-css.js"],"names":[],"mappings":""}

package/dist/{tokens-css.d.ts.map → styles/tokens-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"tokens-css.d.ts","sourceRoot":"","sources":["../src/tokens-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"tokens-css.d.ts","sourceRoot":"","sources":["../../src/styles/tokens-css.js"],"names":[],"mappings":""}

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-dialog",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -20,52 +20,52 @@
     "node": "^20.x || ^22.x "
   },
   "dependencies": {
-    "@alaskaairux/icons": "^5.4.0",
-    "@aurodesignsystem/auro-button": "^9.4.0",
-    "@aurodesignsystem/auro-icon": "^8.0.3",
-    "@aurodesignsystem/auro-library": "^4.4.1",
-    "@aurodesignsystem/design-tokens": "^5.14.0",
-    "@aurodesignsystem/webcorestylesheets": "6.2.0",
+    "@alaskaairux/icons": "^5.6.0",
+    "@aurodesignsystem/auro-button": "^11.3.0",
+    "@aurodesignsystem/auro-icon": "^8.1.0",
+    "@aurodesignsystem/auro-library": "^5.3.2",
+    "@aurodesignsystem/design-tokens": "^8.2.1",
+    "@aurodesignsystem/webcorestylesheets": "10.0.1",
     "chalk": "^5.4.1",
-    "lit": "^3.3.0"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@aurodesignsystem/eslint-config": "1.3.4",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@aurodesignsystem/eslint-config": "1.3.5",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
-    "@web/dev-server": "^0.4.5",
-    "@web/test-runner": "^0.20.1",
+    "@semantic-release/npm": "^12.0.2",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.20.2",
     "autoprefixer": "^10.4.21",
-    "compression": "^1.7.5",
+    "compression": "^1.8.0",
     "concat": "^1.0.3",
-    "concurrently": "^9.1.1",
+    "concurrently": "^9.2.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.41.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
+    "core-js": "^3.44.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-jsdoc": "^51.4.1",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
-    "markdown-magic": "^3.4.2",
-    "nodemon": "^3.1.9",
+    "markdown-magic": "^3.7.0",
+    "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
-    "postcss-discard-comments": "^7.0.3",
+    "postcss": "^8.5.6",
+    "postcss-discard-comments": "^7.0.4",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.40.0",
+    "rollup": "^4.45.1",
     "rollup-plugin-serve": "^3.0.0",
-    "sass": "^1.86.3",
-    "semantic-release": "^24.2.0",
-    "stylelint": "^16.18.0",
+    "sass": "^1.89.2",
+    "semantic-release": "^24.2.7",
+    "stylelint": "^16.21.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.10.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.1",
     "typescript": "^5.8.3",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",
@@ -147,7 +147,7 @@
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
-    "build:sass:component": "sass --no-source-map src:src",
+    "build:sass:component": "sass --load-path=node_modules --no-source-map src:src",
     "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
     "bundler": "rollup -c",
@@ -160,13 +160,13 @@
     "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
     "postCss:component": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "postinstall": "node packageScripts/postinstall.mjs",
-    "sass:render": "sass-render src/*.css -t ./node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
-    "serve": "web-dev-server --open demo/ --node-resolve --watch",
-    "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js",
+    "sass:render": "sass-render src/styles/*.css -t ./node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
+    "serve": "web-dev-server --open --node-resolve --watch",
+    "sweep": "rm -rf ./demo/css ./dist | rm ./src/styles/*.css ./src/styles/*-css.js",
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "types": "tsc",
-    "prepare": "husky install",
+    "prepare": "husky",
     "postversion": "npm-run-all build:api build:docs"
   }
 }

package/src/buttonVersion.js

@@ -1 +1 @@
-export default '9.4.0'
+export default '11.3.0'

package/src/componentBase.js

@@ -9,23 +9,24 @@ import { LitElement } from "lit";
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import styleCss from "./style-css.js";
-import styleUnformattedCss from './style-unformatted-css.js';
-import colorCss from "./color-css.js";
-import tokensCss from "./tokens-css.js";
+import styleCss from "./styles/style-css.js";
+import styleUnformattedCss from './styles/style-unformatted-css.js';
+import colorCss from "./styles/color-css.js";
+import tokensCss from "./styles/tokens-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
+import { FocusTrap } from "@aurodesignsystem/auro-library/scripts/runtime/FocusTrap/index.mjs";
+
 import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
 import buttonVersion from './buttonVersion.js';
 
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 
-const ESCAPE_KEYCODE = 27,
-  FOCUS_TIMEOUT = 50;
+const ESCAPE_KEYCODE = 27;
+
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -141,11 +142,17 @@ export default class ComponentBase extends LitElement {
   openDialog() {
     this.defaultTrigger = document.activeElement;
 
-    setTimeout(() => {
-      this.focus();
+    this.focusTrap = new FocusTrap(this.dialog);
+  }
 
-      this.handleFocusLoss();
-    }, FOCUS_TIMEOUT);
+  /**
+   * set the focus on the first element after opening transition effect is complete.
+   * @private
+   */
+  onDialogTransitionEnd() {
+    if (this.open && this.focusTrap) {
+      this.focusTrap.focusFirstElement();
+    }
   }
 
   /**
@@ -153,6 +160,17 @@ export default class ComponentBase extends LitElement {
    * @returns {void}
    */
   closeDialog() {
+    if (this.focusTrap) {
+      // If the dropdown is not open, disconnect the focus trap if it exists
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
+    }
+
+    if (this.defaultTrigger) {
+      this.defaultTrigger.focus();
+      this.defaultTrigger = undefined;
+    }
+
     this.dispatchToggleEvent();
   }
 
@@ -168,29 +186,6 @@ export default class ComponentBase extends LitElement {
     this.dispatchEvent(toggleEvent);
   }
 
-  /**
-   * @private
-   * @returns {void} Determines if dropdown bib should be closed on focus change.
-   */
-  handleFocusLoss() {
-    const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
-
-    const firstFocusableElement = focusable[0];
-    const lastFocusableElement = focusable[focusable.length - 1];
-
-    const closeButton = this.shadowRoot.getElementById('dialog-close');
-
-    if (lastFocusableElement) {
-      lastFocusableElement.addEventListener('focusout', () => {
-        if (closeButton !== null) {
-          closeButton.focus();
-        } else {
-          firstFocusableElement.focus();
-        }
-      });
-    }
-  }
-
   /**
    * @private
    * @returns {void}
@@ -257,9 +252,8 @@ export default class ComponentBase extends LitElement {
     return this.modal
       ? html``
       : html`
-        <${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
+        <${this.buttonTag} variant="ghost" shape="circle" size="sm" aria-label="Close" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
           <${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
-          <span class="util_displayHiddenVisually">Close</span>
         </${this.buttonTag}>
       `;
   }
@@ -280,7 +274,14 @@ export default class ComponentBase extends LitElement {
     return html`
       <div class="${classMap(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
 
-      <div role="dialog" id="dialog" class="${classMap(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
+      <div 
+        role="dialog" 
+        id="dialog" 
+        class="${classMap(contentClasses)}"
+        part="dialog"
+        aria-labelledby="dialog-header"
+        aria-describedby="dialog-content"
+        @transitionend="${this.onDialogTransitionEnd}">
         ${this.unformatted
         ? html`
           <slot name="content"></slot>
@@ -288,12 +289,12 @@ export default class ComponentBase extends LitElement {
         `
         : html`
           <div class="dialog-header" part="dialog-header">
-            <h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
-              <slot name="header">Default header ...</slot>
+            <h1 class="heading heading-lg util_stackMarginNone--top" id="dialog-header">
+              <slot name="header">Default header...</slot>
             </h1>
             ${this.getCloseButton()}
           </div>
-          <div class="dialog-content" part="dialog-content">
+          <div class="dialog-content body-default" part="dialog-content">
             <slot name="content"></slot>
           </div>
           <div class="dialog-footer" id="footerWrapper" part="dialog-footer">

package/src/iconVersion.js

@@ -1 +1 @@
-export default '8.0.3'
+export default '8.1.0'

package/src/styles/style-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;

package/src/styles/tokens-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;

package/dist/style-unformatted-css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-unformatted-css.d.ts","sourceRoot":"","sources":["../src/style-unformatted-css.js"],"names":[],"mappings":""}

package/src/style-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl:0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl:0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl:0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;

package/src/tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-dialog-container-color:var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color:var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color:var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;