@aurodesignsystem/auro-dialog 1.1.0-beta.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.husky/commit-msg +0 -3
- package/.husky/pre-commit +0 -3
- package/CHANGELOG.md +18 -7
- package/README.md +3 -12
- package/demo/api.md +4 -5
- package/demo/index.md +4 -2
- package/dist/auro-dialog__bundled.js +180 -127
- package/dist/buttonVersion.d.ts +1 -1
- package/dist/color-css.d.ts +1 -1
- package/dist/componentBase.d.ts +4 -0
- package/dist/componentBase.d.ts.map +1 -1
- package/dist/iconVersion.d.ts +1 -1
- package/dist/style-css.d.ts +1 -1
- package/dist/style-unformatted-css.d.ts +1 -1
- package/dist/tokens-css.d.ts +1 -1
- package/index.js +2 -13
- package/package.json +34 -34
- package/src/buttonVersion.js +1 -1
- package/src/color-css.js +2 -2
- package/src/componentBase.js +13 -2
- package/src/iconVersion.js +1 -1
- package/src/style-css.js +2 -2
- package/src/style-unformatted-css.js +1 -1
- package/src/tokens-css.js +2 -2
package/dist/buttonVersion.d.ts
CHANGED
package/dist/color-css.d.ts
CHANGED
package/dist/componentBase.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IA0BE;;;;;;;;;;;;;;;MAeC;IA2ID,+CAOC;IAvLC,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,2BAIC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IAWD;;;OAGG;IACH,uBASC;IAED,4CAuCC;CACF;2BAlS0B,KAAK"}
|
package/dist/iconVersion.d.ts
CHANGED
package/dist/style-css.d.ts
CHANGED
package/dist/tokens-css.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
import { AuroDialog } from './src/auro-dialog.js';
|
|
2
|
+
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
* Register Custom Element.
|
|
5
|
-
* @param {Object} name - Name to use for custom element.
|
|
6
|
-
* @returns {void}
|
|
7
|
-
*/
|
|
8
|
-
const registerComponent = (name = 'custom-dialog') => {
|
|
9
|
-
// alias definition
|
|
10
|
-
if (!customElements.get(name)) {
|
|
11
|
-
customElements.define(name, class extends AuroDialog {});
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { registerComponent }
|
|
4
|
+
RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem/auro-dialog",
|
|
10
|
-
"version": "
|
|
10
|
+
"version": "2.0.0",
|
|
11
11
|
"description": "auro-dialog HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -20,58 +20,58 @@
|
|
|
20
20
|
"node": "^18.x || ^20.x"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@aurodesignsystem/auro-button": "^
|
|
24
|
-
"@aurodesignsystem/auro-icon": "^5.0.0
|
|
23
|
+
"@aurodesignsystem/auro-button": "^8.0.0",
|
|
24
|
+
"@aurodesignsystem/auro-icon": "^5.0.0",
|
|
25
25
|
"chalk": "^5.3.0",
|
|
26
|
-
"lit": "^3.
|
|
26
|
+
"lit": "^3.2.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@alaskaairux/icons": "^4.
|
|
30
|
-
"@aurodesignsystem/design-tokens": "^4.
|
|
31
|
-
"@aurodesignsystem/webcorestylesheets": "^5.
|
|
29
|
+
"@alaskaairux/icons": "^4.43.0",
|
|
30
|
+
"@aurodesignsystem/design-tokens": "^4.10.0",
|
|
31
|
+
"@aurodesignsystem/webcorestylesheets": "^5.1.1"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@alaskaairux/icons": "^4.
|
|
35
|
-
"@aurodesignsystem/auro-library": "^2.
|
|
36
|
-
"@aurodesignsystem/design-tokens": "^4.
|
|
37
|
-
"@aurodesignsystem/eslint-config": "^1.3.
|
|
34
|
+
"@alaskaairux/icons": "^4.43.0",
|
|
35
|
+
"@aurodesignsystem/auro-library": "^2.8.0",
|
|
36
|
+
"@aurodesignsystem/design-tokens": "^4.10.0",
|
|
37
|
+
"@aurodesignsystem/eslint-config": "^1.3.2",
|
|
38
38
|
"@aurodesignsystem/webcorestylesheets": "^5.1.1",
|
|
39
|
-
"@commitlint/cli": "^19.
|
|
40
|
-
"@commitlint/config-conventional": "^19.
|
|
39
|
+
"@commitlint/cli": "^19.5.0",
|
|
40
|
+
"@commitlint/config-conventional": "^19.5.0",
|
|
41
41
|
"@open-wc/testing": "^4.0.0",
|
|
42
|
-
"@rollup/plugin-node-resolve": "^15.
|
|
42
|
+
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
43
43
|
"@semantic-release/changelog": "^6.0.3",
|
|
44
44
|
"@semantic-release/git": "^10.0.1",
|
|
45
45
|
"@semantic-release/npm": "^12.0.1",
|
|
46
46
|
"@web/dev-server": "^0.4.5",
|
|
47
|
-
"@web/test-runner": "^0.
|
|
48
|
-
"autoprefixer": "^10.4.
|
|
47
|
+
"@web/test-runner": "^0.19.0",
|
|
48
|
+
"autoprefixer": "^10.4.20",
|
|
49
49
|
"compression": "^1.7.4",
|
|
50
50
|
"concat": "^1.0.3",
|
|
51
|
-
"concurrently": "^
|
|
51
|
+
"concurrently": "^9.0.1",
|
|
52
52
|
"copyfiles": "^2.4.1",
|
|
53
|
-
"core-js": "^3.
|
|
54
|
-
"eslint": "^9.
|
|
55
|
-
"eslint-plugin-jsdoc": "^
|
|
56
|
-
"husky": "^9.
|
|
53
|
+
"core-js": "^3.38.1",
|
|
54
|
+
"eslint": "^9.11.1",
|
|
55
|
+
"eslint-plugin-jsdoc": "^50.3.1",
|
|
56
|
+
"husky": "^9.1.6",
|
|
57
57
|
"lodash": "^4.17.21",
|
|
58
58
|
"markdown-magic": "^2.6.1",
|
|
59
|
-
"nodemon": "^3.1.
|
|
59
|
+
"nodemon": "^3.1.7",
|
|
60
60
|
"npm-run-all": "^4.1.5",
|
|
61
|
-
"postcss": "^8.4.
|
|
62
|
-
"postcss-discard-comments": "^7.0.
|
|
61
|
+
"postcss": "^8.4.47",
|
|
62
|
+
"postcss-discard-comments": "^7.0.3",
|
|
63
63
|
"postcss-selector-replace": "^1.0.2",
|
|
64
|
-
"rollup": "^4.
|
|
64
|
+
"rollup": "^4.24.0",
|
|
65
65
|
"rollup-plugin-serve": "^1.1.1",
|
|
66
|
-
"sass": "^1.
|
|
67
|
-
"semantic-release": "^24.
|
|
68
|
-
"stylelint": "^16.
|
|
66
|
+
"sass": "^1.79.4",
|
|
67
|
+
"semantic-release": "^24.1.2",
|
|
68
|
+
"stylelint": "^16.9.0",
|
|
69
69
|
"stylelint-config-idiomatic-order": "^10.0.0",
|
|
70
70
|
"stylelint-config-standard": "^36.0.0",
|
|
71
71
|
"stylelint-config-standard-scss": "^13.1.0",
|
|
72
72
|
"stylelint-order": "^6.0.4",
|
|
73
|
-
"stylelint-scss": "^6.
|
|
74
|
-
"typescript": "^5.
|
|
73
|
+
"stylelint-scss": "^6.7.0",
|
|
74
|
+
"typescript": "^5.6.2",
|
|
75
75
|
"wc-sass-render": "^1.4.0",
|
|
76
76
|
"web-component-analyzer": "^2.0.0",
|
|
77
77
|
"whatwg-fetch": "^3.6.20",
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
"build:ci": "npm-run-all sweep build:release",
|
|
149
149
|
"build:api": "wca analyze 'src/auro-dialog.js' --outFiles docs/api.md",
|
|
150
150
|
"build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
|
|
151
|
-
"build:docs": "node scripts/generateDocs.mjs",
|
|
151
|
+
"build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
|
|
152
152
|
"build:sass": "npm-run-all build:sass:component postCss:component sass:render",
|
|
153
153
|
"build:sass:component": "sass --no-source-map src:src",
|
|
154
154
|
"build:version": "node scripts/version.mjs",
|
|
@@ -160,10 +160,10 @@
|
|
|
160
160
|
"dist:js": "copyfiles -u 1 -V './src/**/*.js' './apiExamples/**/*.js' ./dist",
|
|
161
161
|
"esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
|
|
162
162
|
"linters": "npm-run-all scssLint esLint",
|
|
163
|
-
"preCommit": "node scripts/pre-commit.mjs",
|
|
164
|
-
"postCss:component": "node scripts/postCss.mjs",
|
|
163
|
+
"preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
|
|
164
|
+
"postCss:component": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
|
|
165
165
|
"postinstall": "node packageScripts/postinstall.mjs",
|
|
166
|
-
"sass:render": "sass-render src/*.css -t ./scripts/staticStyles-template.js",
|
|
166
|
+
"sass:render": "sass-render src/*.css -t ./node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
|
|
167
167
|
"serve": "web-dev-server --open demo/ --node-resolve --watch",
|
|
168
168
|
"sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js",
|
|
169
169
|
"test": "wtr --coverage",
|
package/src/buttonVersion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '
|
|
1
|
+
export default '8.0.0'
|
package/src/color-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {css} from 'lit
|
|
2
|
-
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-
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
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-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
|
package/src/componentBase.js
CHANGED
|
@@ -14,13 +14,15 @@ import styleUnformattedCss from './style-unformatted-css.js';
|
|
|
14
14
|
import colorCss from "./color-css.js";
|
|
15
15
|
import tokensCss from "./tokens-css.js";
|
|
16
16
|
|
|
17
|
+
import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
|
|
18
|
+
|
|
17
19
|
import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
|
|
18
20
|
|
|
19
21
|
import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
|
|
20
|
-
import buttonVersion from './buttonVersion';
|
|
22
|
+
import buttonVersion from './buttonVersion.js';
|
|
21
23
|
|
|
22
24
|
import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
|
|
23
|
-
import iconVersion from './iconVersion';
|
|
25
|
+
import iconVersion from './iconVersion.js';
|
|
24
26
|
|
|
25
27
|
const ESCAPE_KEYCODE = 27,
|
|
26
28
|
FOCUS_TIMEOUT = 50;
|
|
@@ -67,6 +69,12 @@ export default class ComponentBase extends LitElement {
|
|
|
67
69
|
* @private
|
|
68
70
|
*/
|
|
69
71
|
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* @private
|
|
76
|
+
*/
|
|
77
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
70
78
|
}
|
|
71
79
|
|
|
72
80
|
static get properties() {
|
|
@@ -87,6 +95,9 @@ export default class ComponentBase extends LitElement {
|
|
|
87
95
|
}
|
|
88
96
|
|
|
89
97
|
firstUpdated() {
|
|
98
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
99
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-dialog');
|
|
100
|
+
|
|
90
101
|
const slot = this.shadowRoot.querySelector("#footer"),
|
|
91
102
|
slotWrapper = this.shadowRoot.querySelector("#footerWrapper");
|
|
92
103
|
|
package/src/iconVersion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '5.0.0
|
|
1
|
+
export default '5.0.0'
|
package/src/style-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {css} from 'lit
|
|
2
|
-
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}`;
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {css} from 'lit
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export default css`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;
|
package/src/tokens-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {css} from 'lit
|
|
2
|
-
export default css`:host{--ds-auro-dialog-
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export default css`:host{--ds-auro-dialog-container-color: var(--ds-color-container-primary-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-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
|