@aurodesignsystem/auro-dialog 1.0.9 → 1.1.0-beta.2

package/dist/buttonVersion.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "7.3.0-beta.6";
+export default _default;
+//# sourceMappingURL=buttonVersion.d.ts.map

package/dist/buttonVersion.d.ts.map

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

package/dist/color-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=color-css.d.ts.map

package/dist/color-css.d.ts.map

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

package/dist/componentBase.d.ts

@@ -38,16 +38,16 @@ export default class ComponentBase extends LitElement {
         };
     };
     static get styles(): import("lit").CSSResult[];
+    modal: boolean;
+    unformatted: boolean;
     /**
      * @private
      */
-    private dom;
+    private buttonTag;
     /**
      * @private
      */
-    private svg;
-    modal: boolean;
-    unformatted: boolean;
+    private iconTag;
     firstUpdated(): void;
     dialog: HTMLElement;
     /**
@@ -106,7 +106,7 @@ export default class ComponentBase extends LitElement {
      * @returns {TemplateResult} - The close button template.
      */
     private getCloseButton;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
 //# sourceMappingURL=componentBase.d.ts.map

package/dist/componentBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IAkBE;;;;;;;;;;;;;;;MAeC;IAwID,+CAKC;IA1KC;;OAEG;IACH,YAAsE;IAEtE;;OAEG;IACH,YAAmC;IAEnC,eAAkB;IAClB,qBAAwB;IAoB1B,qBASC;IALC,oBAAsD;IAOxD;;;;OAIG;IACH,2BAHW,IAAI,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,2BAIC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IASD;;;OAGG;IACH,uBASC;IAED,+CAuCC;CACF;2BA3QgC,KAAK"}
+{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IAoBE;;;;;;;;;;;;;;;MAeC;IAwID,+CAOC;IA9KC,eAAkB;IAClB,qBAAwB;IAIxB;;OAEG;IACH,kBAAiF;IAEjF;;OAEG;IACH,gBAAyE;IAoB3E,qBASC;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,2BAIC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IAWD;;;OAGG;IACH,uBASC;IAED,4CAuCC;CACF;2BAvR0B,KAAK"}

package/dist/iconVersion.d.ts

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

package/dist/iconVersion.d.ts.map

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

package/dist/tokens-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=tokens-css.d.ts.map

package/dist/tokens-css.d.ts.map

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

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-dialog",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -20,8 +20,10 @@
     "node": "^18.x || ^20.x"
   },
   "dependencies": {
+    "@aurodesignsystem/auro-button": "^7.3.0-beta.6",
+    "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
     "chalk": "^5.3.0",
-    "lit": "^3.1.2"
+    "lit": "^3.1.4"
   },
   "peerDependencies": {
     "@alaskaairux/icons": "^4.36.1",
@@ -29,47 +31,47 @@
     "@aurodesignsystem/webcorestylesheets": "^5.0.8"
   },
   "devDependencies": {
-    "@alaskaairux/icons": "^4.39.0",
-    "@aurodesignsystem/auro-library": "^2.5.1",
-    "@aurodesignsystem/design-tokens": "^4.3.0",
+    "@alaskaairux/icons": "^4.41.1",
+    "@aurodesignsystem/auro-library": "^2.6.0",
+    "@aurodesignsystem/design-tokens": "^4.9.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.0",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.1",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.0",
-    "@web/dev-server": "^0.4.4",
-    "@web/test-runner": "^0.18.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@web/dev-server": "^0.4.5",
+    "@web/test-runner": "^0.18.2",
     "autoprefixer": "^10.4.19",
     "compression": "^1.7.4",
     "concat": "^1.0.3",
     "concurrently": "^8.2.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.36.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.3",
+    "core-js": "^3.37.1",
+    "eslint": "^9.5.0",
+    "eslint-plugin-jsdoc": "^48.5.2",
     "husky": "^9.0.11",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.0",
+    "nodemon": "^3.1.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
-    "postcss-discard-comments": "^6.0.2",
+    "postcss-discard-comments": "^7.0.1",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.14.0",
+    "rollup": "^4.18.1",
     "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.74.1",
-    "semantic-release": "^23.0.7",
-    "stylelint": "^16.3.1",
+    "sass": "^1.77.6",
+    "semantic-release": "^24.0.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.2.1",
-    "typescript": "^5.4.4",
+    "stylelint-scss": "^6.3.2",
+    "typescript": "^5.4.5",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",
     "whatwg-fetch": "^3.6.20",
@@ -95,7 +97,13 @@
   },
   "release": {
     "branches": [
-      "main"
+      {
+        "name": "main"
+      },
+      {
+        "name": "beta",
+        "prerelease": true
+      }
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",
@@ -134,20 +142,23 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler build:api build:docs postinstall types",
-    "build:ci": "npm-run-all sweep build",
+    "build": "npm-run-all build:version build:sass sass:render types",
+    "build:test": "npm-run-all test linters",
+    "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
+    "build:ci": "npm-run-all sweep build:release",
     "build:api": "wca analyze 'src/auro-dialog.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node scripts/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --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",
     "bundler:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
     "dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' './apiExamples/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
     "postCss:component": "node scripts/postCss.mjs",

package/src/buttonVersion.js

@@ -0,0 +1 @@
+export default '7.3.0-beta.6'

package/src/color-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-background-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:0 10px 20px 0 var(--ds-auro-dialog-boxshadow-color-one),0 1px 10px 0 var(--ds-auro-dialog-boxshadow-color-two)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;

package/src/componentBase.js

@@ -3,16 +3,24 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence */
+/* eslint-disable jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence, lit/binding-positions, lit/no-invalid-html, prefer-destructuring */
 
-import { LitElement, html } from "lit";
+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 closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs';
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
 
-/* eslint-disable one-var, prefer-destructuring */
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
+import buttonVersion from './buttonVersion';
+
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion';
 
 const ESCAPE_KEYCODE = 27,
   FOCUS_TIMEOUT = 50;
@@ -45,18 +53,20 @@ export default class ComponentBase extends LitElement {
   constructor() {
     super();
 
+    this.modal = false;
+    this.unformatted = false;
+
+    const versioning = new AuroDependencyVersioning();
+
     /**
      * @private
      */
-    this.dom = new DOMParser().parseFromString(closeIcon.svg, 'text/html');
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
 
     /**
      * @private
      */
-    this.svg = this.dom.body.firstChild;
-
-    this.modal = false;
-    this.unformatted = false;
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
   }
 
   static get properties() {
@@ -161,7 +171,7 @@ export default class ComponentBase extends LitElement {
 
     if (lastFocusableElement) {
       lastFocusableElement.addEventListener('focusout', () => {
-        if (closeButton !== null) { // eslint-disable-line no-negated-condition
+        if (closeButton !== null) {
           closeButton.focus();
         } else {
           firstFocusableElement.focus();
@@ -213,7 +223,9 @@ export default class ComponentBase extends LitElement {
   static get styles() {
     return [
       styleCss,
-      styleUnformattedCss
+      styleUnformattedCss,
+      colorCss,
+      tokensCss
     ];
   }
 
@@ -225,10 +237,10 @@ export default class ComponentBase extends LitElement {
     return this.modal
       ? html``
       : html`
-        <button class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
-          <span>${this.svg}</span>
+        <${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
+          <${this.iconTag} customSize customColor category="interface" name="x-lg"></${this.iconTag}>
           <span class="util_displayHiddenVisually">Close</span>
-        </button>
+        </${this.buttonTag}>
       `;
   }
 

package/src/iconVersion.js

@@ -0,0 +1 @@
+export default '5.0.0-beta.1'

package/src/style-css.js

@@ -1,2 +1,2 @@
 import {css} from 'lit-element';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}.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);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(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 svg{fill:var(--ds-color-text-secondary-default, #626b79)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}.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([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}: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}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}[auro-icon]{height:var(--ds-size-300, 1.5rem);width: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:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(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

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`:host{--ds-auro-dialog-background-color:var(--ds-color-background-primary-100-default, #ffffff);--ds-auro-dialog-boxshadow-color-one:rgb(0 0 0 / 0.12);--ds-auro-dialog-boxshadow-color-two:rgb(0 0 0 / 0.1);--ds-auro-dialog-overlay-modal-background-color:rgb(0 0 0 / 0.5);--ds-auro-dialog-overlay-open-background-color:rgb(0 0 0 / 0.2);--ds-auro-dialog-text-color:var(--ds-color-text-primary-default, #2a2a2a)}`;

package/dist/accessibility.js

@@ -1,12 +0,0 @@
-export function initAccessibilityExample() {
-  const button = document.querySelector('#openAccessibility');
-  const dialog = document.querySelector('#unformattedMdDialog');
-
-  button.addEventListener('click', () => {
-    if (dialog.hasAttribute('open')) {
-      dialog.removeAttribute('open');
-    } else {
-      dialog.setAttribute('open', true);
-    }
-  });
-}

package/dist/basic.js

@@ -1,14 +0,0 @@
-export function initBasicExample() {
-  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
-  const dialog = document.querySelector('#defaultDialog');
-
-  buttons.forEach((button) => {
-    button.addEventListener('click', () => {
-      if (dialog.hasAttribute('open')) {
-        dialog.removeAttribute('open');
-      } else {
-        dialog.setAttribute('open', true);
-      }
-    });
-  });
-}