@aurodesignsystem/auro-dialog 3.1.2 → 3.1.4
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/CHANGELOG.md +15 -0
- package/README.md +1 -1
- package/demo/api.md +13 -13
- package/demo/api.min.js +1130 -198
- package/demo/index.min.js +1130 -198
- package/dist/auro-dialog__bundled.js +1130 -198
- package/dist/buttonVersion.d.ts +1 -1
- package/dist/buttonVersion.d.ts.map +1 -1
- package/dist/componentBase.d.ts +6 -5
- package/dist/componentBase.d.ts.map +1 -1
- package/dist/iconVersion.d.ts +1 -1
- package/dist/{color-css.d.ts.map → styles/color-css.d.ts.map} +1 -1
- package/dist/{style-css.d.ts.map → styles/style-css.d.ts.map} +1 -1
- package/dist/styles/style-unformatted-css.d.ts.map +1 -0
- package/dist/{tokens-css.d.ts.map → styles/tokens-css.d.ts.map} +1 -1
- package/package.json +35 -35
- package/src/buttonVersion.js +1 -1
- package/src/componentBase.js +41 -40
- package/src/iconVersion.js +1 -1
- package/src/styles/style-css.js +2 -0
- package/src/styles/tokens-css.js +2 -0
- package/dist/style-unformatted-css.d.ts.map +0 -1
- package/src/style-css.js +0 -2
- package/src/tokens-css.js +0 -2
- /package/dist/{color-css.d.ts → styles/color-css.d.ts} +0 -0
- /package/dist/{style-css.d.ts → styles/style-css.d.ts} +0 -0
- /package/dist/{style-unformatted-css.d.ts → styles/style-unformatted-css.d.ts} +0 -0
- /package/dist/{tokens-css.d.ts → styles/tokens-css.d.ts} +0 -0
- /package/src/{color-css.js → styles/color-css.js} +0 -0
- /package/src/{style-unformatted-css.js → styles/style-unformatted-css.js} +0 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7
7
|
|
|
8
|
-
class AuroLibraryRuntimeUtils {
|
|
8
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
9
9
|
|
|
10
10
|
/* eslint-disable jsdoc/require-param */
|
|
11
11
|
|
|
@@ -66,7 +66,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
66
66
|
|
|
67
67
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
68
68
|
}
|
|
69
|
-
}
|
|
69
|
+
};
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
* @license
|
|
@@ -114,13 +114,13 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
114
114
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
115
115
|
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
|
|
116
116
|
|
|
117
|
-
var styleCss$3 = i$5`: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}`;
|
|
117
|
+
var styleCss$3 = i$5`.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}`;
|
|
118
118
|
|
|
119
119
|
var styleUnformattedCss = i$5`[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)}}`;
|
|
120
120
|
|
|
121
121
|
var colorCss$3 = i$5`.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}`;
|
|
122
122
|
|
|
123
|
-
var tokensCss$3 = i$5`: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)}`;
|
|
123
|
+
var tokensCss$3 = i$5`: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)}`;
|
|
124
124
|
|
|
125
125
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
126
126
|
// See LICENSE in the project root for license information.
|
|
@@ -145,36 +145,834 @@ class AuroDependencyVersioning {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
/**
|
|
148
|
-
* Generates a unique string to be used for child auro element naming.
|
|
149
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
150
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
151
|
-
* @returns {string} - Unique string to be used for naming.
|
|
148
|
+
* Generates a unique string to be used for child auro element naming.
|
|
149
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
150
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
151
|
+
* @returns {string} - Unique string to be used for naming.
|
|
152
|
+
*/
|
|
153
|
+
generateTag(baseName, version, tagClass) {
|
|
154
|
+
const elementName = this.generateElementName(baseName, version);
|
|
155
|
+
const tag = i$1`${s(elementName)}`;
|
|
156
|
+
|
|
157
|
+
if (!customElements.get(elementName)) {
|
|
158
|
+
customElements.define(elementName, class extends tagClass {});
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
return tag;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Selectors for focusable elements
|
|
166
|
+
const FOCUSABLE_SELECTORS = [
|
|
167
|
+
'a[href]',
|
|
168
|
+
'button:not([disabled])',
|
|
169
|
+
'textarea:not([disabled])',
|
|
170
|
+
'input:not([disabled])',
|
|
171
|
+
'select:not([disabled])',
|
|
172
|
+
'[role="tab"]:not([disabled])',
|
|
173
|
+
'[role="link"]:not([disabled])',
|
|
174
|
+
'[role="button"]:not([disabled])',
|
|
175
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
176
|
+
'[contenteditable]:not([contenteditable="false"])'
|
|
177
|
+
];
|
|
178
|
+
|
|
179
|
+
// List of custom components that are known to be focusable
|
|
180
|
+
const FOCUSABLE_COMPONENTS = [
|
|
181
|
+
'auro-checkbox',
|
|
182
|
+
'auro-radio',
|
|
183
|
+
'auro-dropdown',
|
|
184
|
+
'auro-button',
|
|
185
|
+
'auro-combobox',
|
|
186
|
+
'auro-input',
|
|
187
|
+
'auro-counter',
|
|
188
|
+
'auro-menu',
|
|
189
|
+
'auro-select',
|
|
190
|
+
'auro-datepicker',
|
|
191
|
+
'auro-hyperlink',
|
|
192
|
+
'auro-accordion',
|
|
193
|
+
];
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* Determines if a given element is a custom focusable component.
|
|
197
|
+
* Returns true if the element matches a known focusable component and is not disabled.
|
|
198
|
+
*
|
|
199
|
+
* @param {HTMLElement} element The element to check for focusability.
|
|
200
|
+
* @returns {boolean} True if the element is a focusable custom component, false otherwise.
|
|
201
|
+
*/
|
|
202
|
+
function isFocusableComponent(element) {
|
|
203
|
+
const componentName = element.tagName.toLowerCase();
|
|
204
|
+
|
|
205
|
+
// Guard Clause: Element is a focusable component
|
|
206
|
+
if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
|
|
207
|
+
|
|
208
|
+
// Guard Clause: Element is not disabled
|
|
209
|
+
if (element.hasAttribute('disabled')) return false;
|
|
210
|
+
|
|
211
|
+
// Guard Clause: The element is a hyperlink and has no href attribute
|
|
212
|
+
if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
|
|
213
|
+
|
|
214
|
+
// If all guard clauses pass, the element is a focusable component
|
|
215
|
+
return true;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
220
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
221
|
+
*
|
|
222
|
+
* @param {HTMLElement} container The container to search within
|
|
223
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
224
|
+
*/
|
|
225
|
+
function getFocusableElements(container) {
|
|
226
|
+
// Get elements in DOM order by walking the tree
|
|
227
|
+
const orderedFocusableElements = [];
|
|
228
|
+
|
|
229
|
+
// Define a recursive function to collect focusable elements in DOM order
|
|
230
|
+
const collectFocusableElements = (root) => {
|
|
231
|
+
// Check if current element is focusable
|
|
232
|
+
if (root.nodeType === Node.ELEMENT_NODE) {
|
|
233
|
+
// Check if this is a custom component that is focusable
|
|
234
|
+
const isComponentFocusable = isFocusableComponent(root);
|
|
235
|
+
|
|
236
|
+
if (isComponentFocusable) {
|
|
237
|
+
// Add the component itself as a focusable element and don't traverse its shadow DOM
|
|
238
|
+
orderedFocusableElements.push(root);
|
|
239
|
+
return; // Skip traversing inside this component
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// Check if the element itself matches any selector
|
|
243
|
+
for (const selector of FOCUSABLE_SELECTORS) {
|
|
244
|
+
if (root.matches?.(selector)) {
|
|
245
|
+
orderedFocusableElements.push(root);
|
|
246
|
+
break; // Once we know it's focusable, no need to check other selectors
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
// Process shadow DOM only for non-Auro components
|
|
251
|
+
if (root.shadowRoot) {
|
|
252
|
+
// Process shadow DOM children in order
|
|
253
|
+
if (root.shadowRoot.children) {
|
|
254
|
+
Array.from(root.shadowRoot.children).forEach(child => {
|
|
255
|
+
collectFocusableElements(child);
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// Process slots and their assigned nodes in order
|
|
261
|
+
if (root.tagName === 'SLOT') {
|
|
262
|
+
const assignedNodes = root.assignedNodes({ flatten: true });
|
|
263
|
+
for (const node of assignedNodes) {
|
|
264
|
+
collectFocusableElements(node);
|
|
265
|
+
}
|
|
266
|
+
} else {
|
|
267
|
+
// Process light DOM children in order
|
|
268
|
+
if (root.children) {
|
|
269
|
+
Array.from(root.children).forEach(child => {
|
|
270
|
+
collectFocusableElements(child);
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
// Start the traversal from the container
|
|
278
|
+
collectFocusableElements(container);
|
|
279
|
+
|
|
280
|
+
// Remove duplicates that might have been collected through different paths
|
|
281
|
+
// while preserving order
|
|
282
|
+
const uniqueElements = [];
|
|
283
|
+
const seen = new Set();
|
|
284
|
+
|
|
285
|
+
for (const element of orderedFocusableElements) {
|
|
286
|
+
if (!seen.has(element)) {
|
|
287
|
+
seen.add(element);
|
|
288
|
+
uniqueElements.push(element);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
return uniqueElements;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
|
|
297
|
+
* It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
|
|
298
|
+
*/
|
|
299
|
+
class FocusTrap {
|
|
300
|
+
/**
|
|
301
|
+
* Creates a new FocusTrap instance for the given container element.
|
|
302
|
+
* Initializes event listeners and prepares the container for focus management.
|
|
303
|
+
*
|
|
304
|
+
* @param {HTMLElement} container The DOM element to trap focus within.
|
|
305
|
+
* @throws {Error} If the provided container is not a valid HTMLElement.
|
|
306
|
+
*/
|
|
307
|
+
constructor(container) {
|
|
308
|
+
if (!container || !(container instanceof HTMLElement)) {
|
|
309
|
+
throw new Error("FocusTrap requires a valid HTMLElement.");
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
this.container = container;
|
|
313
|
+
this.tabDirection = 'forward'; // or 'backward'
|
|
314
|
+
|
|
315
|
+
this._init();
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/**
|
|
319
|
+
* Initializes the focus trap by setting up event listeners and attributes on the container.
|
|
320
|
+
* Prepares the container for focus management, including support for shadow DOM and inert attributes.
|
|
321
|
+
*
|
|
322
|
+
* @private
|
|
323
|
+
*/
|
|
324
|
+
_init() {
|
|
325
|
+
|
|
326
|
+
// Add inert attribute to prevent focusing programmatically as well (if supported)
|
|
327
|
+
if ('inert' in HTMLElement.prototype) {
|
|
328
|
+
this.container.inert = false; // Ensure the container isn't inert
|
|
329
|
+
this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
// Track tab direction
|
|
333
|
+
this.container.addEventListener('keydown', this._onKeydown);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
* Handles keydown events to manage tab navigation within the container.
|
|
338
|
+
* Ensures that focus wraps around when reaching the first or last focusable element.
|
|
339
|
+
*
|
|
340
|
+
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
341
|
+
* @private
|
|
342
|
+
*/
|
|
343
|
+
_onKeydown = (e) => {
|
|
344
|
+
|
|
345
|
+
if (e.key === 'Tab') {
|
|
346
|
+
|
|
347
|
+
// Set the tab direction based on the key pressed
|
|
348
|
+
this.tabDirection = e.shiftKey ? 'backward' : 'forward';
|
|
349
|
+
|
|
350
|
+
// Get the active element(s) in the document and shadow root
|
|
351
|
+
// This will include the active element in the shadow DOM if it exists
|
|
352
|
+
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
353
|
+
let activeElement = document.activeElement;
|
|
354
|
+
const actives = [activeElement];
|
|
355
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
356
|
+
actives.push(activeElement.shadowRoot.activeElement);
|
|
357
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
// Update the focusable elements
|
|
361
|
+
const focusables = this._getFocusableElements();
|
|
362
|
+
|
|
363
|
+
// If we're at either end of the focusable elements, wrap around to the other end
|
|
364
|
+
const focusIndex =
|
|
365
|
+
(actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
|
|
366
|
+
? focusables.length - 1
|
|
367
|
+
: actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
|
|
368
|
+
? 0
|
|
369
|
+
: null;
|
|
370
|
+
|
|
371
|
+
if (focusIndex !== null) {
|
|
372
|
+
focusables[focusIndex].focus();
|
|
373
|
+
e.preventDefault(); // Prevent default tab behavior
|
|
374
|
+
e.stopPropagation(); // Stop the event from bubbling up
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
};
|
|
378
|
+
|
|
379
|
+
/**
|
|
380
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
381
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
382
|
+
*
|
|
383
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
384
|
+
* @private
|
|
385
|
+
*/
|
|
386
|
+
_getFocusableElements() {
|
|
387
|
+
// Use the imported utility function to get focusable elements
|
|
388
|
+
const elements = getFocusableElements(this.container);
|
|
389
|
+
|
|
390
|
+
// Filter out any elements with the 'focus-bookend' class
|
|
391
|
+
return elements;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/**
|
|
395
|
+
* Moves focus to the first focusable element within the container.
|
|
396
|
+
* Useful for setting initial focus when activating the focus trap.
|
|
397
|
+
*/
|
|
398
|
+
focusFirstElement() {
|
|
399
|
+
const focusables = this._getFocusableElements();
|
|
400
|
+
if (focusables.length) focusables[0].focus();
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/**
|
|
404
|
+
* Moves focus to the last focusable element within the container.
|
|
405
|
+
* Useful for setting focus when deactivating or cycling focus in reverse.
|
|
406
|
+
*/
|
|
407
|
+
focusLastElement() {
|
|
408
|
+
const focusables = this._getFocusableElements();
|
|
409
|
+
if (focusables.length) focusables[focusables.length - 1].focus();
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/**
|
|
413
|
+
* Removes event listeners and attributes added by the focus trap.
|
|
414
|
+
* Call this method to clean up when the focus trap is no longer needed.
|
|
415
|
+
*/
|
|
416
|
+
disconnect() {
|
|
417
|
+
|
|
418
|
+
if (this.container.hasAttribute('data-focus-trap-container')) {
|
|
419
|
+
this.container.removeAttribute('data-focus-trap-container');
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
this.container.removeEventListener('keydown', this._onKeydown);
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/**
|
|
427
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
428
|
+
*/
|
|
429
|
+
const _observers = new WeakMap();
|
|
430
|
+
|
|
431
|
+
/**
|
|
432
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
433
|
+
* Structure: {
|
|
434
|
+
* host: {
|
|
435
|
+
* matchers: Set<Function>,
|
|
436
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
437
|
+
* }
|
|
438
|
+
* }
|
|
439
|
+
*/
|
|
440
|
+
const _transportConfig = new WeakMap();
|
|
441
|
+
|
|
442
|
+
/**
|
|
443
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
444
|
+
*
|
|
445
|
+
* @param {Object} params - The parameters for the function.
|
|
446
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
447
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
448
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
449
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
450
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
451
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
452
|
+
*/
|
|
453
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
454
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
455
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
456
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
460
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
461
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
// Guard Clause: Ensure match is a function
|
|
465
|
+
if (typeof match !== 'function') {
|
|
466
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
470
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
471
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
// Register this transport and get cleanup function
|
|
475
|
+
return _registerTransport({
|
|
476
|
+
host,
|
|
477
|
+
target,
|
|
478
|
+
matcher: match,
|
|
479
|
+
removeOriginal
|
|
480
|
+
});
|
|
481
|
+
};
|
|
482
|
+
|
|
483
|
+
/**
|
|
484
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
485
|
+
*
|
|
486
|
+
* @param {Object} params - The parameters object.
|
|
487
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
488
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
489
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
490
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
491
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
492
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
493
|
+
* @private
|
|
494
|
+
*/
|
|
495
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
496
|
+
// Initialize config for this host if it doesn't exist
|
|
497
|
+
if (!_transportConfig.has(host)) {
|
|
498
|
+
_transportConfig.set(host, {
|
|
499
|
+
matchers: new Set(),
|
|
500
|
+
targets: new Map()
|
|
501
|
+
});
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
const config = _transportConfig.get(host);
|
|
505
|
+
|
|
506
|
+
// Add the matcher to the set of matchers for this host
|
|
507
|
+
config.matchers.add(matcher);
|
|
508
|
+
|
|
509
|
+
// Initialize target entry if it doesn't exist
|
|
510
|
+
if (!config.targets.has(target)) {
|
|
511
|
+
config.targets.set(target, new Map());
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
515
|
+
config.targets.get(target).set(matcher, {
|
|
516
|
+
removeOriginal,
|
|
517
|
+
currentAttributes: new Map()
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
// Perform initial attribute transport
|
|
521
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
522
|
+
|
|
523
|
+
// Attach observer
|
|
524
|
+
_attachObserver(host);
|
|
525
|
+
|
|
526
|
+
// Return cleanup function and utility functions
|
|
527
|
+
return {
|
|
528
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
529
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
530
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
531
|
+
}
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
/**
|
|
535
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
536
|
+
*
|
|
537
|
+
* @param {HTMLElement} host - The host element
|
|
538
|
+
* @param {HTMLElement} target - The target element
|
|
539
|
+
* @param {Function} matcher - The matcher function
|
|
540
|
+
* @private
|
|
541
|
+
*/
|
|
542
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
543
|
+
const config = _transportConfig.get(host);
|
|
544
|
+
if (!config) return;
|
|
545
|
+
|
|
546
|
+
// Remove this matcher from this target
|
|
547
|
+
const targetMatchers = config.targets.get(target);
|
|
548
|
+
if (targetMatchers) {
|
|
549
|
+
targetMatchers.delete(matcher);
|
|
550
|
+
|
|
551
|
+
// If this target has no more matchers, remove it
|
|
552
|
+
if (targetMatchers.size === 0) {
|
|
553
|
+
config.targets.delete(target);
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
// Check if this matcher is still used by any target
|
|
558
|
+
let matcherStillUsed = false;
|
|
559
|
+
for (const matcherMap of config.targets.values()) {
|
|
560
|
+
if (matcherMap.has(matcher)) {
|
|
561
|
+
matcherStillUsed = true;
|
|
562
|
+
break;
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
// If not used anymore, remove from matchers set
|
|
567
|
+
if (!matcherStillUsed) {
|
|
568
|
+
config.matchers.delete(matcher);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
// If no more targets or matchers, detach observer
|
|
572
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
573
|
+
_detachObserver(host);
|
|
574
|
+
}
|
|
575
|
+
};
|
|
576
|
+
|
|
577
|
+
/**
|
|
578
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
579
|
+
*
|
|
580
|
+
* @param {Object} params - The parameters object.
|
|
581
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
582
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
583
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
584
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
585
|
+
* @returns {void}
|
|
586
|
+
* @private
|
|
587
|
+
*/
|
|
588
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
589
|
+
// Get a list of all matching attributes on the host element and their values
|
|
590
|
+
const matchingAttributes = host.getAttributeNames()
|
|
591
|
+
.filter(attr => matcher(attr))
|
|
592
|
+
.reduce((acc, attr) => {
|
|
593
|
+
acc[attr] = host.getAttribute(attr);
|
|
594
|
+
return acc;
|
|
595
|
+
}, {});
|
|
596
|
+
|
|
597
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
598
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
599
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
600
|
+
target.setAttribute(key, value);
|
|
601
|
+
if (removeOriginal) {
|
|
602
|
+
host.removeAttribute(key);
|
|
603
|
+
}
|
|
604
|
+
});
|
|
605
|
+
};
|
|
606
|
+
|
|
607
|
+
/**
|
|
608
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
609
|
+
*
|
|
610
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
611
|
+
* @returns {MutationObserver} The observer instance.
|
|
612
|
+
* @private
|
|
613
|
+
*/
|
|
614
|
+
const _attachObserver = (host) => {
|
|
615
|
+
// If an observer for this host already exists, return it
|
|
616
|
+
if (_observers.has(host)) {
|
|
617
|
+
return _observers.get(host);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
// Create a new MutationObserver
|
|
621
|
+
const observer = new MutationObserver((mutations) => {
|
|
622
|
+
const config = _transportConfig.get(host);
|
|
623
|
+
if (!config) return;
|
|
624
|
+
|
|
625
|
+
// For each mutation affecting attributes
|
|
626
|
+
mutations
|
|
627
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
628
|
+
.forEach(mutation => {
|
|
629
|
+
const attributeName = mutation.attributeName;
|
|
630
|
+
|
|
631
|
+
// Find matchers that care about this attribute
|
|
632
|
+
for (const matcher of config.matchers) {
|
|
633
|
+
if (matcher(attributeName)) {
|
|
634
|
+
// For each target that uses this matcher
|
|
635
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
636
|
+
if (matcherConfigs.has(matcher)) {
|
|
637
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
638
|
+
_transportAttributes({
|
|
639
|
+
host,
|
|
640
|
+
target,
|
|
641
|
+
matcher,
|
|
642
|
+
removeOriginal
|
|
643
|
+
});
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
});
|
|
649
|
+
});
|
|
650
|
+
|
|
651
|
+
// Start observing attribute changes
|
|
652
|
+
observer.observe(host, { attributes: true });
|
|
653
|
+
|
|
654
|
+
// Store the observer
|
|
655
|
+
_observers.set(host, observer);
|
|
656
|
+
|
|
657
|
+
return observer;
|
|
658
|
+
};
|
|
659
|
+
|
|
660
|
+
/**
|
|
661
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
662
|
+
*
|
|
663
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
664
|
+
* @private
|
|
665
|
+
*/
|
|
666
|
+
const _detachObserver = (host) => {
|
|
667
|
+
if (_observers.has(host)) {
|
|
668
|
+
const observer = _observers.get(host);
|
|
669
|
+
observer.disconnect();
|
|
670
|
+
_observers.delete(host);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// Clean up the transport config as well
|
|
674
|
+
if (_transportConfig.has(host)) {
|
|
675
|
+
_transportConfig.delete(host);
|
|
676
|
+
}
|
|
677
|
+
};
|
|
678
|
+
|
|
679
|
+
/**
|
|
680
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
681
|
+
* @param {HTMLElement} host - The host element
|
|
682
|
+
* @param {HTMLElement} target - The target element
|
|
683
|
+
* @param {Function} matcher - The matcher function
|
|
684
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
685
|
+
* @private
|
|
686
|
+
*/
|
|
687
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
688
|
+
const config = _transportConfig.get(host);
|
|
689
|
+
if (!config) return undefined;
|
|
690
|
+
|
|
691
|
+
const targetMatchers = config.targets.get(target);
|
|
692
|
+
if (!targetMatchers) return undefined;
|
|
693
|
+
|
|
694
|
+
return targetMatchers.get(matcher);
|
|
695
|
+
};
|
|
696
|
+
|
|
697
|
+
/**
|
|
698
|
+
* Sets an observed attribute value
|
|
699
|
+
* @param {HTMLElement} host - The host element
|
|
700
|
+
* @param {HTMLElement} target - The target element
|
|
701
|
+
* @param {Function} matcher - The matcher function
|
|
702
|
+
* @param {string} key - The attribute name
|
|
703
|
+
* @param {string} value - The attribute value
|
|
704
|
+
* @private
|
|
705
|
+
*/
|
|
706
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
707
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
708
|
+
if (matcherConfig) {
|
|
709
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
710
|
+
}
|
|
711
|
+
};
|
|
712
|
+
|
|
713
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
714
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
715
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
716
|
+
return undefined;
|
|
717
|
+
};
|
|
718
|
+
|
|
719
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
720
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
721
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
722
|
+
return [];
|
|
723
|
+
};
|
|
724
|
+
|
|
725
|
+
const _matchers = {
|
|
726
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
727
|
+
'role': attr => attr.match(/^role$/)
|
|
728
|
+
};
|
|
729
|
+
|
|
730
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
731
|
+
return transportAttributes({
|
|
732
|
+
host,
|
|
733
|
+
target,
|
|
734
|
+
match: attr => {
|
|
735
|
+
for (const key in _matchers) {
|
|
736
|
+
if (_matchers[key](attr)) return true;
|
|
737
|
+
}
|
|
738
|
+
return false;
|
|
739
|
+
},
|
|
740
|
+
removeOriginal
|
|
741
|
+
});
|
|
742
|
+
};
|
|
743
|
+
|
|
744
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
745
|
+
|
|
746
|
+
/**
|
|
747
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
748
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
749
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
750
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
751
|
+
* @private
|
|
752
|
+
*/
|
|
753
|
+
attributeWatcher;
|
|
754
|
+
|
|
755
|
+
static get properties() {
|
|
756
|
+
return {
|
|
757
|
+
|
|
758
|
+
/**
|
|
759
|
+
* Defines the layout of an element.
|
|
760
|
+
* @default {'default'}
|
|
761
|
+
*/
|
|
762
|
+
layout: {
|
|
763
|
+
type: String,
|
|
764
|
+
attribute: "layout",
|
|
765
|
+
reflect: true
|
|
766
|
+
},
|
|
767
|
+
|
|
768
|
+
/**
|
|
769
|
+
* Defines the shape of an element.
|
|
770
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
771
|
+
* @default {'default'}
|
|
772
|
+
*/
|
|
773
|
+
shape: {
|
|
774
|
+
type: String,
|
|
775
|
+
attribute: "shape",
|
|
776
|
+
reflect: true
|
|
777
|
+
},
|
|
778
|
+
|
|
779
|
+
/**
|
|
780
|
+
* Defines the size of an element.
|
|
781
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
782
|
+
* @default {'md'}
|
|
783
|
+
*/
|
|
784
|
+
size: {
|
|
785
|
+
type: String,
|
|
786
|
+
attribute: "size",
|
|
787
|
+
reflect: true
|
|
788
|
+
},
|
|
789
|
+
|
|
790
|
+
/**
|
|
791
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
792
|
+
* @default {false}
|
|
793
|
+
*/
|
|
794
|
+
onDark: {
|
|
795
|
+
type: Boolean,
|
|
796
|
+
attribute: "ondark",
|
|
797
|
+
reflect: true
|
|
798
|
+
},
|
|
799
|
+
|
|
800
|
+
/**
|
|
801
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
802
|
+
* This is used to apply layout and shape classes dynamically.
|
|
803
|
+
* @type {HTMLElement|null}
|
|
804
|
+
* @default {null}
|
|
805
|
+
* @private
|
|
806
|
+
*/
|
|
807
|
+
wrapper: {
|
|
808
|
+
attribute: false,
|
|
809
|
+
reflect: false
|
|
810
|
+
}
|
|
811
|
+
};
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
|
|
816
|
+
resetShapeClasses() {
|
|
817
|
+
if (this.shape && this.size) {
|
|
818
|
+
|
|
819
|
+
if (this.wrapper) {
|
|
820
|
+
this.wrapper.classList.forEach((className) => {
|
|
821
|
+
if (className.startsWith('shape-')) {
|
|
822
|
+
this.wrapper.classList.remove(className);
|
|
823
|
+
}
|
|
824
|
+
});
|
|
825
|
+
|
|
826
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
resetLayoutClasses() {
|
|
832
|
+
if (this.layout) {
|
|
833
|
+
if (this.wrapper) {
|
|
834
|
+
this.wrapper.classList.forEach((className) => {
|
|
835
|
+
if (className.startsWith('layout-')) {
|
|
836
|
+
this.wrapper.classList.remove(className);
|
|
837
|
+
}
|
|
838
|
+
});
|
|
839
|
+
|
|
840
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
updateComponentArchitecture() {
|
|
846
|
+
this.resetLayoutClasses();
|
|
847
|
+
this.resetShapeClasses();
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
updated(changedProperties) {
|
|
851
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
852
|
+
this.updateComponentArchitecture();
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
firstUpdated() {
|
|
857
|
+
super.firstUpdated();
|
|
858
|
+
|
|
859
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
860
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
861
|
+
|
|
862
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
863
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
disconnectedCallback() {
|
|
867
|
+
super.disconnectedCallback();
|
|
868
|
+
|
|
869
|
+
// Cleanup the ARIA observer if it exists
|
|
870
|
+
if (this.attributeWatcher) {
|
|
871
|
+
this.attributeWatcher.cleanup();
|
|
872
|
+
this.attributeWatcher = null;
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
877
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
878
|
+
render() {
|
|
879
|
+
try {
|
|
880
|
+
return this.renderLayout();
|
|
881
|
+
} catch (error) {
|
|
882
|
+
// failed to get the defined layout
|
|
883
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
884
|
+
|
|
885
|
+
// fallback to the default layout
|
|
886
|
+
return this.getLayout('default');
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
};
|
|
890
|
+
|
|
891
|
+
/**
|
|
892
|
+
* @license
|
|
893
|
+
* Copyright 2018 Google LLC
|
|
894
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
895
|
+
*/const o=o=>o??E;
|
|
896
|
+
|
|
897
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.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-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-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-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)}.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}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset{padding-inline:var(--ds-size-150, 0.75rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-150, 0.75rem)*2)}:host([size=sm]) .inset{padding-inline:var(--ds-size-200, 1rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-200, 1rem)*2)}:host([size=md]) .inset{padding-inline:var(--ds-size-300, 1.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-300, 1.5rem)*2)}:host([size=lg]) .inset{padding-inline:var(--ds-size-400, 2rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-400, 2rem)*2)}:host([size=xl]) .inset{padding-inline:var(--ds-size-500, 2.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-500, 2.5rem)*2)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}`;
|
|
898
|
+
|
|
899
|
+
var colorCss$2 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus,.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=tertiary]:focus,.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=ghost]:focus,.auro-button:not([ondark])[variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus,.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus,.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus,.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus,.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent}.auro-button[ondark][variant=ghost]:focus,.auro-button[ondark][variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus,.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
900
|
+
|
|
901
|
+
var tokensCss$2 = i$5`:host(:not([onDark])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color: transparent}:host([onDark]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color: transparent}`;
|
|
902
|
+
|
|
903
|
+
var shapeSize = i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}`;
|
|
904
|
+
|
|
905
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
906
|
+
// See LICENSE in the project root for license information.
|
|
907
|
+
|
|
908
|
+
// ---------------------------------------------------------------------
|
|
909
|
+
|
|
910
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
911
|
+
|
|
912
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
913
|
+
|
|
914
|
+
/* eslint-disable jsdoc/require-param */
|
|
915
|
+
|
|
916
|
+
/**
|
|
917
|
+
* This will register a new custom element with the browser.
|
|
918
|
+
* @param {String} name - The name of the custom element.
|
|
919
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
920
|
+
* @returns {void}
|
|
921
|
+
*/
|
|
922
|
+
registerComponent(name, componentClass) {
|
|
923
|
+
if (!customElements.get(name)) {
|
|
924
|
+
customElements.define(name, class extends componentClass {});
|
|
925
|
+
}
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
/**
|
|
929
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
930
|
+
* @returns {void}
|
|
931
|
+
*/
|
|
932
|
+
closestElement(
|
|
933
|
+
selector, // selector like in .closest()
|
|
934
|
+
base = this, // extra functionality to skip a parent
|
|
935
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
936
|
+
!el || el === document || el === window
|
|
937
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
938
|
+
: found
|
|
939
|
+
? found // found a selector INside this element
|
|
940
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
941
|
+
) {
|
|
942
|
+
return __Closest(base);
|
|
943
|
+
}
|
|
944
|
+
/* eslint-enable jsdoc/require-param */
|
|
945
|
+
|
|
946
|
+
/**
|
|
947
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
948
|
+
* @param {Object} elem - The element to check.
|
|
949
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
950
|
+
* @returns {void}
|
|
152
951
|
*/
|
|
153
|
-
|
|
154
|
-
const
|
|
155
|
-
const
|
|
952
|
+
handleComponentTagRename(elem, tagName) {
|
|
953
|
+
const tag = tagName.toLowerCase();
|
|
954
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
156
955
|
|
|
157
|
-
if (
|
|
158
|
-
|
|
956
|
+
if (elemTag !== tag) {
|
|
957
|
+
elem.setAttribute(tag, true);
|
|
159
958
|
}
|
|
160
|
-
|
|
161
|
-
return tag;
|
|
162
959
|
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* @license
|
|
167
|
-
* Copyright 2018 Google LLC
|
|
168
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
169
|
-
*/const o=o=>o??E;
|
|
170
|
-
|
|
171
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);line-height:var(--ds-basic-text-body-default-line-height, 24px);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-family:var(--ds-basic-text-body-sm-font-family, "AS Circular");font-size:var(--ds-basic-text-body-sm-font-size, 14px);font-weight:var(--ds-basic-text-body-sm-font-weight, 450);line-height:var(--ds-basic-text-body-sm-line-height, 20px);letter-spacing:var(--ds-basic-text-body-sm-letter-spacing, 0);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
172
960
|
|
|
173
|
-
|
|
961
|
+
/**
|
|
962
|
+
* Validates if an element is a specific Auro component.
|
|
963
|
+
* @param {Object} elem - The element to validate.
|
|
964
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
965
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
966
|
+
*/
|
|
967
|
+
elementMatch(elem, tagName) {
|
|
968
|
+
const tag = tagName.toLowerCase();
|
|
969
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
174
970
|
|
|
175
|
-
|
|
971
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
972
|
+
}
|
|
973
|
+
};
|
|
176
974
|
|
|
177
|
-
var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
975
|
+
var styleCss$1 = i$5`.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-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-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-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)}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}`;
|
|
178
976
|
|
|
179
977
|
var colorCss$1 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
180
978
|
|
|
@@ -206,7 +1004,7 @@ class AuroLoader extends i$2 {
|
|
|
206
1004
|
/**
|
|
207
1005
|
* @private
|
|
208
1006
|
*/
|
|
209
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1007
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
210
1008
|
|
|
211
1009
|
this.orbit = false;
|
|
212
1010
|
this.ringworm = false;
|
|
@@ -269,7 +1067,7 @@ class AuroLoader extends i$2 {
|
|
|
269
1067
|
*
|
|
270
1068
|
*/
|
|
271
1069
|
static register(name = "auro-loader") {
|
|
272
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
1070
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
273
1071
|
}
|
|
274
1072
|
|
|
275
1073
|
firstUpdated() {
|
|
@@ -307,7 +1105,7 @@ class AuroLoader extends i$2 {
|
|
|
307
1105
|
<span part="element" class="loader node-${idx}"></span>
|
|
308
1106
|
`)}
|
|
309
1107
|
|
|
310
|
-
<div class="no-animation">Loading...</div>
|
|
1108
|
+
<div class="no-animation body-default">Loading...</div>
|
|
311
1109
|
|
|
312
1110
|
${this.ringworm ? x`
|
|
313
1111
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -319,25 +1117,32 @@ class AuroLoader extends i$2 {
|
|
|
319
1117
|
}
|
|
320
1118
|
}
|
|
321
1119
|
|
|
322
|
-
var loaderVersion = '5.
|
|
1120
|
+
var loaderVersion = '5.1.0';
|
|
323
1121
|
|
|
324
|
-
/* eslint-disable max-lines */
|
|
325
1122
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
326
1123
|
// See LICENSE in the project root for license information.
|
|
327
1124
|
|
|
328
1125
|
|
|
329
1126
|
/**
|
|
330
1127
|
* @slot - Default slot for the text of the button.
|
|
331
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
332
1128
|
* @csspart button - Apply CSS to HTML5 button.
|
|
333
1129
|
* @csspart loader - Apply CSS to auro-loader.
|
|
334
1130
|
* @csspart text - Apply CSS to text slot.
|
|
335
1131
|
* @csspart icon - Apply CSS to icon slot.
|
|
336
1132
|
*/
|
|
337
1133
|
|
|
338
|
-
|
|
1134
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
339
1135
|
|
|
340
|
-
|
|
1136
|
+
/**
|
|
1137
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
1138
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
1139
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
1140
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
1141
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
1142
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
1143
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
1144
|
+
*/
|
|
1145
|
+
class AuroButton extends AuroElement$1 {
|
|
341
1146
|
|
|
342
1147
|
/**
|
|
343
1148
|
* Enables form association for this element.
|
|
@@ -352,15 +1157,13 @@ class AuroButton extends i$2 {
|
|
|
352
1157
|
super();
|
|
353
1158
|
this.autofocus = false;
|
|
354
1159
|
this.disabled = false;
|
|
355
|
-
this.iconOnly = false;
|
|
356
1160
|
this.loading = false;
|
|
1161
|
+
this.size = "md";
|
|
1162
|
+
this.shape = "rounded";
|
|
357
1163
|
this.onDark = false;
|
|
358
|
-
this.secondary = false;
|
|
359
|
-
this.tertiary = false;
|
|
360
|
-
this.rounded = false;
|
|
361
|
-
this.slim = false;
|
|
362
1164
|
this.fluid = false;
|
|
363
1165
|
this.loadingText = this.loadingText || 'Loading...';
|
|
1166
|
+
this.variant = 'primary';
|
|
364
1167
|
|
|
365
1168
|
// Support for HTML5 forms
|
|
366
1169
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -381,49 +1184,59 @@ class AuroButton extends i$2 {
|
|
|
381
1184
|
* @private
|
|
382
1185
|
*/
|
|
383
1186
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
1187
|
+
|
|
1188
|
+
/**
|
|
1189
|
+
* @private
|
|
1190
|
+
*/
|
|
1191
|
+
this.buttonHref = undefined;
|
|
1192
|
+
|
|
1193
|
+
/**
|
|
1194
|
+
* @private
|
|
1195
|
+
*/
|
|
1196
|
+
this.buttonTarget = undefined;
|
|
1197
|
+
|
|
1198
|
+
/**
|
|
1199
|
+
* @private
|
|
1200
|
+
*/
|
|
1201
|
+
this.buttonRel = undefined;
|
|
384
1202
|
}
|
|
385
1203
|
|
|
386
1204
|
static get styles() {
|
|
387
1205
|
return [
|
|
388
1206
|
tokensCss$2,
|
|
389
1207
|
styleCss$2,
|
|
390
|
-
colorCss$2
|
|
1208
|
+
colorCss$2,
|
|
1209
|
+
shapeSize
|
|
391
1210
|
];
|
|
392
1211
|
}
|
|
393
1212
|
|
|
394
1213
|
static get properties() {
|
|
395
1214
|
return {
|
|
396
1215
|
|
|
397
|
-
|
|
398
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
399
|
-
*/
|
|
400
|
-
autofocus: {
|
|
401
|
-
type: Boolean,
|
|
402
|
-
reflect: true
|
|
403
|
-
},
|
|
1216
|
+
...super.properties,
|
|
404
1217
|
|
|
405
1218
|
/**
|
|
406
|
-
*
|
|
1219
|
+
* Override layout since it isn't used in this component.
|
|
1220
|
+
* @private
|
|
407
1221
|
*/
|
|
408
|
-
|
|
1222
|
+
layout: {
|
|
409
1223
|
type: Boolean,
|
|
410
|
-
|
|
1224
|
+
attribute: false,
|
|
1225
|
+
reflect: false
|
|
411
1226
|
},
|
|
412
1227
|
|
|
413
1228
|
/**
|
|
414
|
-
*
|
|
415
|
-
* @deprecated
|
|
1229
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
416
1230
|
*/
|
|
417
|
-
|
|
1231
|
+
autofocus: {
|
|
418
1232
|
type: Boolean,
|
|
419
1233
|
reflect: true
|
|
420
1234
|
},
|
|
421
1235
|
|
|
422
1236
|
/**
|
|
423
|
-
*
|
|
424
|
-
* @deprecated
|
|
1237
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
425
1238
|
*/
|
|
426
|
-
|
|
1239
|
+
disabled: {
|
|
427
1240
|
type: Boolean,
|
|
428
1241
|
reflect: true
|
|
429
1242
|
},
|
|
@@ -431,15 +1244,7 @@ class AuroButton extends i$2 {
|
|
|
431
1244
|
/**
|
|
432
1245
|
* Alters the shape of the button to be full width of its parent container.
|
|
433
1246
|
*/
|
|
434
|
-
fluid:
|
|
435
|
-
type: Boolean,
|
|
436
|
-
reflect: true
|
|
437
|
-
},
|
|
438
|
-
|
|
439
|
-
/**
|
|
440
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
441
|
-
*/
|
|
442
|
-
iconOnly: {
|
|
1247
|
+
fluid: {
|
|
443
1248
|
type: Boolean,
|
|
444
1249
|
reflect: true
|
|
445
1250
|
},
|
|
@@ -447,7 +1252,7 @@ class AuroButton extends i$2 {
|
|
|
447
1252
|
/**
|
|
448
1253
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
449
1254
|
*/
|
|
450
|
-
loading:
|
|
1255
|
+
loading: {
|
|
451
1256
|
type: Boolean,
|
|
452
1257
|
reflect: true
|
|
453
1258
|
},
|
|
@@ -455,36 +1260,12 @@ class AuroButton extends i$2 {
|
|
|
455
1260
|
/**
|
|
456
1261
|
* Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
|
|
457
1262
|
*/
|
|
458
|
-
loadingText:
|
|
1263
|
+
loadingText: {
|
|
459
1264
|
type: String
|
|
460
1265
|
},
|
|
461
1266
|
|
|
462
1267
|
/**
|
|
463
|
-
*
|
|
464
|
-
*/
|
|
465
|
-
onDark: {
|
|
466
|
-
type: Boolean,
|
|
467
|
-
reflect: true
|
|
468
|
-
},
|
|
469
|
-
|
|
470
|
-
/**
|
|
471
|
-
* If set to true, the button will have a rounded shape.
|
|
472
|
-
*/
|
|
473
|
-
rounded: {
|
|
474
|
-
type: Boolean,
|
|
475
|
-
reflect: true
|
|
476
|
-
},
|
|
477
|
-
|
|
478
|
-
/**
|
|
479
|
-
* Set value for slim version of auro-button.
|
|
480
|
-
*/
|
|
481
|
-
slim: {
|
|
482
|
-
type: Boolean,
|
|
483
|
-
reflect: true
|
|
484
|
-
},
|
|
485
|
-
|
|
486
|
-
/**
|
|
487
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
1268
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
488
1269
|
*/
|
|
489
1270
|
tIndex: {
|
|
490
1271
|
type: String,
|
|
@@ -492,75 +1273,68 @@ class AuroButton extends i$2 {
|
|
|
492
1273
|
},
|
|
493
1274
|
|
|
494
1275
|
/**
|
|
495
|
-
* Populates
|
|
1276
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
1277
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
1278
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
496
1279
|
*/
|
|
497
|
-
|
|
1280
|
+
tabindex: {
|
|
498
1281
|
type: String,
|
|
499
|
-
reflect:
|
|
1282
|
+
reflect: false
|
|
500
1283
|
},
|
|
501
1284
|
|
|
502
1285
|
/**
|
|
503
|
-
*
|
|
504
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
505
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
1286
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
506
1287
|
*/
|
|
507
|
-
|
|
1288
|
+
title: {
|
|
508
1289
|
type: String,
|
|
509
1290
|
reflect: true
|
|
510
1291
|
},
|
|
511
1292
|
|
|
512
1293
|
/**
|
|
513
|
-
*
|
|
514
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
515
|
-
* List multiple element IDs in a space delimited fashion.
|
|
1294
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
516
1295
|
*/
|
|
517
|
-
|
|
1296
|
+
type: {
|
|
518
1297
|
type: String,
|
|
519
1298
|
reflect: true
|
|
520
1299
|
},
|
|
521
1300
|
|
|
522
1301
|
/**
|
|
523
|
-
*
|
|
524
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
525
|
-
* This is an optional attribute for buttons.
|
|
1302
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
526
1303
|
*/
|
|
527
|
-
|
|
528
|
-
type:
|
|
1304
|
+
value: {
|
|
1305
|
+
type: String,
|
|
529
1306
|
reflect: true
|
|
530
1307
|
},
|
|
531
1308
|
|
|
532
1309
|
/**
|
|
533
|
-
* Sets
|
|
1310
|
+
* Sets button variant option.
|
|
1311
|
+
* @default primary
|
|
534
1312
|
*/
|
|
535
|
-
|
|
1313
|
+
variant: {
|
|
536
1314
|
type: String,
|
|
537
1315
|
reflect: true
|
|
538
1316
|
},
|
|
539
1317
|
|
|
540
1318
|
/**
|
|
541
|
-
*
|
|
1319
|
+
* @private
|
|
542
1320
|
*/
|
|
543
|
-
|
|
1321
|
+
buttonHref: {
|
|
544
1322
|
type: String,
|
|
545
|
-
reflect: true
|
|
546
1323
|
},
|
|
547
1324
|
|
|
548
1325
|
/**
|
|
549
|
-
*
|
|
1326
|
+
* @private
|
|
550
1327
|
*/
|
|
551
|
-
|
|
1328
|
+
buttonTarget: {
|
|
552
1329
|
type: String,
|
|
553
|
-
reflect: true
|
|
554
1330
|
},
|
|
555
1331
|
|
|
556
1332
|
/**
|
|
557
|
-
*
|
|
1333
|
+
* @private
|
|
558
1334
|
*/
|
|
559
|
-
|
|
1335
|
+
buttonRel: {
|
|
560
1336
|
type: String,
|
|
561
|
-
reflect: true
|
|
562
1337
|
},
|
|
563
|
-
ready: { type: Boolean },
|
|
564
1338
|
};
|
|
565
1339
|
}
|
|
566
1340
|
|
|
@@ -573,7 +1347,7 @@ class AuroButton extends i$2 {
|
|
|
573
1347
|
*
|
|
574
1348
|
*/
|
|
575
1349
|
static register(name = "auro-button") {
|
|
576
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
1350
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
|
|
577
1351
|
}
|
|
578
1352
|
|
|
579
1353
|
/**
|
|
@@ -585,17 +1359,6 @@ class AuroButton extends i$2 {
|
|
|
585
1359
|
this.renderRoot.querySelector('button').focus();
|
|
586
1360
|
}
|
|
587
1361
|
|
|
588
|
-
updated() {
|
|
589
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
590
|
-
if (this.secondary) {
|
|
591
|
-
this.setAttribute('variant', 'secondary');
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
if (this.tertiary) {
|
|
595
|
-
this.setAttribute('variant', 'tertiary');
|
|
596
|
-
}
|
|
597
|
-
}
|
|
598
|
-
|
|
599
1362
|
/**
|
|
600
1363
|
* Submits the form that this button is associated with.
|
|
601
1364
|
* @private
|
|
@@ -616,28 +1379,115 @@ class AuroButton extends i$2 {
|
|
|
616
1379
|
return this.internals ? this.internals.form : null;
|
|
617
1380
|
}
|
|
618
1381
|
|
|
619
|
-
|
|
1382
|
+
/**
|
|
1383
|
+
* @private
|
|
1384
|
+
* @returns {Boolean}
|
|
1385
|
+
*/
|
|
1386
|
+
get showText() {
|
|
1387
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
1388
|
+
}
|
|
1389
|
+
|
|
1390
|
+
/**
|
|
1391
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
1392
|
+
* @returns {string | undefined}
|
|
1393
|
+
* @private
|
|
1394
|
+
*/
|
|
1395
|
+
get currentAriaLabel() {
|
|
1396
|
+
if (!this.attributeWatcher) return undefined;
|
|
1397
|
+
|
|
1398
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
1399
|
+
return ariaLabel || undefined;
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
/**
|
|
1403
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
1404
|
+
* @returns {string | undefined}
|
|
1405
|
+
* @private
|
|
1406
|
+
*/
|
|
1407
|
+
get currentAriaLabelledBy() {
|
|
1408
|
+
if (!this.attributeWatcher) return undefined;
|
|
1409
|
+
|
|
1410
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
1411
|
+
return ariaLabelledBy || undefined;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
/**
|
|
1415
|
+
* Whether or not the button is set to an icon-only shape.
|
|
1416
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
1417
|
+
* @private
|
|
1418
|
+
*/
|
|
1419
|
+
get iconOnly() {
|
|
1420
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
/**
|
|
1424
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
1425
|
+
* @returns {string} - The font size class name.
|
|
1426
|
+
* @private
|
|
1427
|
+
*/
|
|
1428
|
+
getFontSize() {
|
|
1429
|
+
|
|
1430
|
+
// Size map for standard buttons
|
|
1431
|
+
const standardButtonSizeMap = {
|
|
1432
|
+
xs: 'body-xs',
|
|
1433
|
+
sm: 'body-sm',
|
|
1434
|
+
md: 'body-default',
|
|
1435
|
+
lg: 'body-lg',
|
|
1436
|
+
xl: 'body-lg'
|
|
1437
|
+
};
|
|
1438
|
+
|
|
1439
|
+
// Size map for icon-only buttons
|
|
1440
|
+
const iconOnlyButtonSizeMap = {
|
|
1441
|
+
xs: 'heading-xs',
|
|
1442
|
+
sm: 'heading-sm',
|
|
1443
|
+
md: 'heading-sm',
|
|
1444
|
+
lg: 'heading-md',
|
|
1445
|
+
xl: 'heading-lg'
|
|
1446
|
+
};
|
|
1447
|
+
|
|
1448
|
+
// Determine which map to use based on the shape
|
|
1449
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
1450
|
+
|
|
1451
|
+
// Return the font size based on the button size and shape
|
|
1452
|
+
return sizeMap[this.size] || 'body-default';
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
/**
|
|
1456
|
+
* Renders the default layout for the button.
|
|
1457
|
+
* @returns {TemplateResult}
|
|
1458
|
+
* @private
|
|
1459
|
+
*/
|
|
1460
|
+
renderLayoutDefault() {
|
|
1461
|
+
|
|
1462
|
+
const fontSize = this.getFontSize();
|
|
1463
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
1464
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
1465
|
+
|
|
620
1466
|
const classes = {
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
'
|
|
1467
|
+
"auro-button": true,
|
|
1468
|
+
"inset": this.showText,
|
|
1469
|
+
wrapper: true,
|
|
1470
|
+
loading: this.loading,
|
|
1471
|
+
[`${fontSize}`]: true,
|
|
1472
|
+
|
|
1473
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
1474
|
+
'simple': !['secondary'].includes(this.variant),
|
|
1475
|
+
'thin': ['secondary'].includes(this.variant),
|
|
1476
|
+
};
|
|
1477
|
+
|
|
1478
|
+
const contentClasses = {
|
|
1479
|
+
"contentWrapper": true,
|
|
1480
|
+
"util_displayHiddenVisually": this.loading
|
|
629
1481
|
};
|
|
630
1482
|
|
|
631
1483
|
return u`
|
|
632
|
-
|
|
633
|
-
part="
|
|
634
|
-
aria-
|
|
635
|
-
aria-
|
|
636
|
-
|
|
637
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
638
|
-
tabIndex="${o(this.tIndex)}"
|
|
1484
|
+
<${tag}
|
|
1485
|
+
part="${part}"
|
|
1486
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
1487
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
1488
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
639
1489
|
?autofocus="${this.autofocus}"
|
|
640
|
-
class
|
|
1490
|
+
class=${e(classes)}
|
|
641
1491
|
?disabled="${this.disabled || this.loading}"
|
|
642
1492
|
?onDark="${this.onDark}"
|
|
643
1493
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -646,24 +1496,32 @@ class AuroButton extends i$2 {
|
|
|
646
1496
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
647
1497
|
.value="${o(this.value ? this.value : undefined)}"
|
|
648
1498
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
1499
|
+
href="${o(this.buttonHref || undefined)}"
|
|
1500
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
1501
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
649
1502
|
>
|
|
650
1503
|
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
651
1504
|
|
|
652
|
-
<span class="
|
|
1505
|
+
<span class="${e(contentClasses)}">
|
|
653
1506
|
<span class="textSlot" part="text">
|
|
654
|
-
|
|
655
|
-
</span>
|
|
656
|
-
|
|
657
|
-
<span part="icon">
|
|
658
|
-
<slot name="icon"></slot>
|
|
1507
|
+
<slot></slot>
|
|
659
1508
|
</span>
|
|
660
1509
|
</span>
|
|
661
|
-
|
|
1510
|
+
</${tag}>
|
|
662
1511
|
`;
|
|
663
1512
|
}
|
|
1513
|
+
|
|
1514
|
+
/**
|
|
1515
|
+
* Renders the layout of the button.
|
|
1516
|
+
* @returns {TemplateResult}
|
|
1517
|
+
* @private
|
|
1518
|
+
*/
|
|
1519
|
+
renderLayout() {
|
|
1520
|
+
return this.renderLayoutDefault();
|
|
1521
|
+
}
|
|
664
1522
|
}
|
|
665
1523
|
|
|
666
|
-
var buttonVersion = '
|
|
1524
|
+
var buttonVersion = '11.3.0';
|
|
667
1525
|
|
|
668
1526
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
669
1527
|
// See LICENSE in the project root for license information.
|
|
@@ -819,6 +1677,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
|
|
|
819
1677
|
|
|
820
1678
|
var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
821
1679
|
|
|
1680
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1681
|
+
// See LICENSE in the project root for license information.
|
|
1682
|
+
|
|
1683
|
+
// ---------------------------------------------------------------------
|
|
1684
|
+
|
|
1685
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1686
|
+
|
|
1687
|
+
class AuroLibraryRuntimeUtils {
|
|
1688
|
+
|
|
1689
|
+
/* eslint-disable jsdoc/require-param */
|
|
1690
|
+
|
|
1691
|
+
/**
|
|
1692
|
+
* This will register a new custom element with the browser.
|
|
1693
|
+
* @param {String} name - The name of the custom element.
|
|
1694
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1695
|
+
* @returns {void}
|
|
1696
|
+
*/
|
|
1697
|
+
registerComponent(name, componentClass) {
|
|
1698
|
+
if (!customElements.get(name)) {
|
|
1699
|
+
customElements.define(name, class extends componentClass {});
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
/**
|
|
1704
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1705
|
+
* @returns {void}
|
|
1706
|
+
*/
|
|
1707
|
+
closestElement(
|
|
1708
|
+
selector, // selector like in .closest()
|
|
1709
|
+
base = this, // extra functionality to skip a parent
|
|
1710
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1711
|
+
!el || el === document || el === window
|
|
1712
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1713
|
+
: found
|
|
1714
|
+
? found // found a selector INside this element
|
|
1715
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1716
|
+
) {
|
|
1717
|
+
return __Closest(base);
|
|
1718
|
+
}
|
|
1719
|
+
/* eslint-enable jsdoc/require-param */
|
|
1720
|
+
|
|
1721
|
+
/**
|
|
1722
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
1723
|
+
* @param {Object} elem - The element to check.
|
|
1724
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1725
|
+
* @returns {void}
|
|
1726
|
+
*/
|
|
1727
|
+
handleComponentTagRename(elem, tagName) {
|
|
1728
|
+
const tag = tagName.toLowerCase();
|
|
1729
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1730
|
+
|
|
1731
|
+
if (elemTag !== tag) {
|
|
1732
|
+
elem.setAttribute(tag, true);
|
|
1733
|
+
}
|
|
1734
|
+
}
|
|
1735
|
+
|
|
1736
|
+
/**
|
|
1737
|
+
* Validates if an element is a specific Auro component.
|
|
1738
|
+
* @param {Object} elem - The element to validate.
|
|
1739
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1740
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1741
|
+
*/
|
|
1742
|
+
elementMatch(elem, tagName) {
|
|
1743
|
+
const tag = tagName.toLowerCase();
|
|
1744
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1745
|
+
|
|
1746
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1747
|
+
}
|
|
1748
|
+
}
|
|
1749
|
+
|
|
822
1750
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
823
1751
|
// See LICENSE in the project root for license information.
|
|
824
1752
|
|
|
@@ -941,8 +1869,12 @@ class AuroIcon extends BaseIcon {
|
|
|
941
1869
|
async firstUpdated() {
|
|
942
1870
|
await super.firstUpdated();
|
|
943
1871
|
|
|
944
|
-
|
|
945
|
-
|
|
1872
|
+
/**
|
|
1873
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
1874
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
1875
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
1876
|
+
*/
|
|
1877
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
946
1878
|
const svgDesc = this.svg.querySelector('desc');
|
|
947
1879
|
|
|
948
1880
|
if (svgDesc) {
|
|
@@ -986,14 +1918,14 @@ class AuroIcon extends BaseIcon {
|
|
|
986
1918
|
}
|
|
987
1919
|
}
|
|
988
1920
|
|
|
989
|
-
var iconVersion = '8.0
|
|
1921
|
+
var iconVersion = '8.1.0';
|
|
990
1922
|
|
|
991
1923
|
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
992
1924
|
// See LICENSE in the project root for license information.
|
|
993
1925
|
|
|
994
1926
|
|
|
995
|
-
const ESCAPE_KEYCODE = 27
|
|
996
|
-
|
|
1927
|
+
const ESCAPE_KEYCODE = 27;
|
|
1928
|
+
|
|
997
1929
|
|
|
998
1930
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
999
1931
|
/**
|
|
@@ -1042,7 +1974,7 @@ class ComponentBase extends i$2 {
|
|
|
1042
1974
|
/**
|
|
1043
1975
|
* @private
|
|
1044
1976
|
*/
|
|
1045
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1977
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
1046
1978
|
}
|
|
1047
1979
|
|
|
1048
1980
|
static get properties() {
|
|
@@ -1109,11 +2041,17 @@ class ComponentBase extends i$2 {
|
|
|
1109
2041
|
openDialog() {
|
|
1110
2042
|
this.defaultTrigger = document.activeElement;
|
|
1111
2043
|
|
|
1112
|
-
|
|
1113
|
-
|
|
2044
|
+
this.focusTrap = new FocusTrap(this.dialog);
|
|
2045
|
+
}
|
|
1114
2046
|
|
|
1115
|
-
|
|
1116
|
-
|
|
2047
|
+
/**
|
|
2048
|
+
* set the focus on the first element after opening transition effect is complete.
|
|
2049
|
+
* @private
|
|
2050
|
+
*/
|
|
2051
|
+
onDialogTransitionEnd() {
|
|
2052
|
+
if (this.open && this.focusTrap) {
|
|
2053
|
+
this.focusTrap.focusFirstElement();
|
|
2054
|
+
}
|
|
1117
2055
|
}
|
|
1118
2056
|
|
|
1119
2057
|
/**
|
|
@@ -1121,6 +2059,17 @@ class ComponentBase extends i$2 {
|
|
|
1121
2059
|
* @returns {void}
|
|
1122
2060
|
*/
|
|
1123
2061
|
closeDialog() {
|
|
2062
|
+
if (this.focusTrap) {
|
|
2063
|
+
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
2064
|
+
this.focusTrap.disconnect();
|
|
2065
|
+
this.focusTrap = undefined;
|
|
2066
|
+
}
|
|
2067
|
+
|
|
2068
|
+
if (this.defaultTrigger) {
|
|
2069
|
+
this.defaultTrigger.focus();
|
|
2070
|
+
this.defaultTrigger = undefined;
|
|
2071
|
+
}
|
|
2072
|
+
|
|
1124
2073
|
this.dispatchToggleEvent();
|
|
1125
2074
|
}
|
|
1126
2075
|
|
|
@@ -1136,29 +2085,6 @@ class ComponentBase extends i$2 {
|
|
|
1136
2085
|
this.dispatchEvent(toggleEvent);
|
|
1137
2086
|
}
|
|
1138
2087
|
|
|
1139
|
-
/**
|
|
1140
|
-
* @private
|
|
1141
|
-
* @returns {void} Determines if dropdown bib should be closed on focus change.
|
|
1142
|
-
*/
|
|
1143
|
-
handleFocusLoss() {
|
|
1144
|
-
const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
|
|
1145
|
-
|
|
1146
|
-
const firstFocusableElement = focusable[0];
|
|
1147
|
-
const lastFocusableElement = focusable[focusable.length - 1];
|
|
1148
|
-
|
|
1149
|
-
const closeButton = this.shadowRoot.getElementById('dialog-close');
|
|
1150
|
-
|
|
1151
|
-
if (lastFocusableElement) {
|
|
1152
|
-
lastFocusableElement.addEventListener('focusout', () => {
|
|
1153
|
-
if (closeButton !== null) {
|
|
1154
|
-
closeButton.focus();
|
|
1155
|
-
} else {
|
|
1156
|
-
firstFocusableElement.focus();
|
|
1157
|
-
}
|
|
1158
|
-
});
|
|
1159
|
-
}
|
|
1160
|
-
}
|
|
1161
|
-
|
|
1162
2088
|
/**
|
|
1163
2089
|
* @private
|
|
1164
2090
|
* @returns {void}
|
|
@@ -1225,9 +2151,8 @@ class ComponentBase extends i$2 {
|
|
|
1225
2151
|
return this.modal
|
|
1226
2152
|
? u``
|
|
1227
2153
|
: u`
|
|
1228
|
-
<${this.buttonTag} variant="
|
|
2154
|
+
<${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">
|
|
1229
2155
|
<${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
|
|
1230
|
-
<span class="util_displayHiddenVisually">Close</span>
|
|
1231
2156
|
</${this.buttonTag}>
|
|
1232
2157
|
`;
|
|
1233
2158
|
}
|
|
@@ -1248,7 +2173,14 @@ class ComponentBase extends i$2 {
|
|
|
1248
2173
|
return u`
|
|
1249
2174
|
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
|
|
1250
2175
|
|
|
1251
|
-
<div
|
|
2176
|
+
<div
|
|
2177
|
+
role="dialog"
|
|
2178
|
+
id="dialog"
|
|
2179
|
+
class="${e(contentClasses)}"
|
|
2180
|
+
part="dialog"
|
|
2181
|
+
aria-labelledby="dialog-header"
|
|
2182
|
+
aria-describedby="dialog-content"
|
|
2183
|
+
@transitionend="${this.onDialogTransitionEnd}">
|
|
1252
2184
|
${this.unformatted
|
|
1253
2185
|
? u`
|
|
1254
2186
|
<slot name="content"></slot>
|
|
@@ -1256,12 +2188,12 @@ class ComponentBase extends i$2 {
|
|
|
1256
2188
|
`
|
|
1257
2189
|
: u`
|
|
1258
2190
|
<div class="dialog-header" part="dialog-header">
|
|
1259
|
-
<h1 class="heading heading
|
|
1260
|
-
<slot name="header">Default header
|
|
2191
|
+
<h1 class="heading heading-lg util_stackMarginNone--top" id="dialog-header">
|
|
2192
|
+
<slot name="header">Default header...</slot>
|
|
1261
2193
|
</h1>
|
|
1262
2194
|
${this.getCloseButton()}
|
|
1263
2195
|
</div>
|
|
1264
|
-
<div class="dialog-content" part="dialog-content">
|
|
2196
|
+
<div class="dialog-content body-default" part="dialog-content">
|
|
1265
2197
|
<slot name="content"></slot>
|
|
1266
2198
|
</div>
|
|
1267
2199
|
<div class="dialog-footer" id="footerWrapper" part="dialog-footer">
|
|
@@ -1313,7 +2245,7 @@ class AuroDialog extends ComponentBase {
|
|
|
1313
2245
|
*
|
|
1314
2246
|
*/
|
|
1315
2247
|
static register(name = "auro-dialog") {
|
|
1316
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
|
|
2248
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDialog);
|
|
1317
2249
|
}
|
|
1318
2250
|
}
|
|
1319
2251
|
|