@aurodesignsystem/auro-dialog 3.1.3 → 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 +8 -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
package/demo/api.min.js
CHANGED
|
@@ -171,7 +171,7 @@ function initSizeOptionsExample() {
|
|
|
171
171
|
|
|
172
172
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
173
173
|
|
|
174
|
-
class AuroLibraryRuntimeUtils {
|
|
174
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
175
175
|
|
|
176
176
|
/* eslint-disable jsdoc/require-param */
|
|
177
177
|
|
|
@@ -232,7 +232,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
232
232
|
|
|
233
233
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
234
234
|
}
|
|
235
|
-
}
|
|
235
|
+
};
|
|
236
236
|
|
|
237
237
|
/**
|
|
238
238
|
* @license
|
|
@@ -280,13 +280,13 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
280
280
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
281
281
|
*/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}});
|
|
282
282
|
|
|
283
|
-
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;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}`;
|
|
283
|
+
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}`;
|
|
284
284
|
|
|
285
285
|
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)}}`;
|
|
286
286
|
|
|
287
287
|
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}`;
|
|
288
288
|
|
|
289
|
-
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)}`;
|
|
289
|
+
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)}`;
|
|
290
290
|
|
|
291
291
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
292
292
|
// See LICENSE in the project root for license information.
|
|
@@ -311,36 +311,834 @@ class AuroDependencyVersioning {
|
|
|
311
311
|
}
|
|
312
312
|
|
|
313
313
|
/**
|
|
314
|
-
* Generates a unique string to be used for child auro element naming.
|
|
315
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
316
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
317
|
-
* @returns {string} - Unique string to be used for naming.
|
|
314
|
+
* Generates a unique string to be used for child auro element naming.
|
|
315
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
316
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
317
|
+
* @returns {string} - Unique string to be used for naming.
|
|
318
|
+
*/
|
|
319
|
+
generateTag(baseName, version, tagClass) {
|
|
320
|
+
const elementName = this.generateElementName(baseName, version);
|
|
321
|
+
const tag = i$1`${s(elementName)}`;
|
|
322
|
+
|
|
323
|
+
if (!customElements.get(elementName)) {
|
|
324
|
+
customElements.define(elementName, class extends tagClass {});
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
return tag;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// Selectors for focusable elements
|
|
332
|
+
const FOCUSABLE_SELECTORS = [
|
|
333
|
+
'a[href]',
|
|
334
|
+
'button:not([disabled])',
|
|
335
|
+
'textarea:not([disabled])',
|
|
336
|
+
'input:not([disabled])',
|
|
337
|
+
'select:not([disabled])',
|
|
338
|
+
'[role="tab"]:not([disabled])',
|
|
339
|
+
'[role="link"]:not([disabled])',
|
|
340
|
+
'[role="button"]:not([disabled])',
|
|
341
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
342
|
+
'[contenteditable]:not([contenteditable="false"])'
|
|
343
|
+
];
|
|
344
|
+
|
|
345
|
+
// List of custom components that are known to be focusable
|
|
346
|
+
const FOCUSABLE_COMPONENTS = [
|
|
347
|
+
'auro-checkbox',
|
|
348
|
+
'auro-radio',
|
|
349
|
+
'auro-dropdown',
|
|
350
|
+
'auro-button',
|
|
351
|
+
'auro-combobox',
|
|
352
|
+
'auro-input',
|
|
353
|
+
'auro-counter',
|
|
354
|
+
'auro-menu',
|
|
355
|
+
'auro-select',
|
|
356
|
+
'auro-datepicker',
|
|
357
|
+
'auro-hyperlink',
|
|
358
|
+
'auro-accordion',
|
|
359
|
+
];
|
|
360
|
+
|
|
361
|
+
/**
|
|
362
|
+
* Determines if a given element is a custom focusable component.
|
|
363
|
+
* Returns true if the element matches a known focusable component and is not disabled.
|
|
364
|
+
*
|
|
365
|
+
* @param {HTMLElement} element The element to check for focusability.
|
|
366
|
+
* @returns {boolean} True if the element is a focusable custom component, false otherwise.
|
|
367
|
+
*/
|
|
368
|
+
function isFocusableComponent(element) {
|
|
369
|
+
const componentName = element.tagName.toLowerCase();
|
|
370
|
+
|
|
371
|
+
// Guard Clause: Element is a focusable component
|
|
372
|
+
if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
|
|
373
|
+
|
|
374
|
+
// Guard Clause: Element is not disabled
|
|
375
|
+
if (element.hasAttribute('disabled')) return false;
|
|
376
|
+
|
|
377
|
+
// Guard Clause: The element is a hyperlink and has no href attribute
|
|
378
|
+
if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
|
|
379
|
+
|
|
380
|
+
// If all guard clauses pass, the element is a focusable component
|
|
381
|
+
return true;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
386
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
387
|
+
*
|
|
388
|
+
* @param {HTMLElement} container The container to search within
|
|
389
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
390
|
+
*/
|
|
391
|
+
function getFocusableElements(container) {
|
|
392
|
+
// Get elements in DOM order by walking the tree
|
|
393
|
+
const orderedFocusableElements = [];
|
|
394
|
+
|
|
395
|
+
// Define a recursive function to collect focusable elements in DOM order
|
|
396
|
+
const collectFocusableElements = (root) => {
|
|
397
|
+
// Check if current element is focusable
|
|
398
|
+
if (root.nodeType === Node.ELEMENT_NODE) {
|
|
399
|
+
// Check if this is a custom component that is focusable
|
|
400
|
+
const isComponentFocusable = isFocusableComponent(root);
|
|
401
|
+
|
|
402
|
+
if (isComponentFocusable) {
|
|
403
|
+
// Add the component itself as a focusable element and don't traverse its shadow DOM
|
|
404
|
+
orderedFocusableElements.push(root);
|
|
405
|
+
return; // Skip traversing inside this component
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
// Check if the element itself matches any selector
|
|
409
|
+
for (const selector of FOCUSABLE_SELECTORS) {
|
|
410
|
+
if (root.matches?.(selector)) {
|
|
411
|
+
orderedFocusableElements.push(root);
|
|
412
|
+
break; // Once we know it's focusable, no need to check other selectors
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// Process shadow DOM only for non-Auro components
|
|
417
|
+
if (root.shadowRoot) {
|
|
418
|
+
// Process shadow DOM children in order
|
|
419
|
+
if (root.shadowRoot.children) {
|
|
420
|
+
Array.from(root.shadowRoot.children).forEach(child => {
|
|
421
|
+
collectFocusableElements(child);
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
// Process slots and their assigned nodes in order
|
|
427
|
+
if (root.tagName === 'SLOT') {
|
|
428
|
+
const assignedNodes = root.assignedNodes({ flatten: true });
|
|
429
|
+
for (const node of assignedNodes) {
|
|
430
|
+
collectFocusableElements(node);
|
|
431
|
+
}
|
|
432
|
+
} else {
|
|
433
|
+
// Process light DOM children in order
|
|
434
|
+
if (root.children) {
|
|
435
|
+
Array.from(root.children).forEach(child => {
|
|
436
|
+
collectFocusableElements(child);
|
|
437
|
+
});
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
};
|
|
442
|
+
|
|
443
|
+
// Start the traversal from the container
|
|
444
|
+
collectFocusableElements(container);
|
|
445
|
+
|
|
446
|
+
// Remove duplicates that might have been collected through different paths
|
|
447
|
+
// while preserving order
|
|
448
|
+
const uniqueElements = [];
|
|
449
|
+
const seen = new Set();
|
|
450
|
+
|
|
451
|
+
for (const element of orderedFocusableElements) {
|
|
452
|
+
if (!seen.has(element)) {
|
|
453
|
+
seen.add(element);
|
|
454
|
+
uniqueElements.push(element);
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
return uniqueElements;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
/**
|
|
462
|
+
* FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
|
|
463
|
+
* It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
|
|
464
|
+
*/
|
|
465
|
+
class FocusTrap {
|
|
466
|
+
/**
|
|
467
|
+
* Creates a new FocusTrap instance for the given container element.
|
|
468
|
+
* Initializes event listeners and prepares the container for focus management.
|
|
469
|
+
*
|
|
470
|
+
* @param {HTMLElement} container The DOM element to trap focus within.
|
|
471
|
+
* @throws {Error} If the provided container is not a valid HTMLElement.
|
|
472
|
+
*/
|
|
473
|
+
constructor(container) {
|
|
474
|
+
if (!container || !(container instanceof HTMLElement)) {
|
|
475
|
+
throw new Error("FocusTrap requires a valid HTMLElement.");
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
this.container = container;
|
|
479
|
+
this.tabDirection = 'forward'; // or 'backward'
|
|
480
|
+
|
|
481
|
+
this._init();
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
/**
|
|
485
|
+
* Initializes the focus trap by setting up event listeners and attributes on the container.
|
|
486
|
+
* Prepares the container for focus management, including support for shadow DOM and inert attributes.
|
|
487
|
+
*
|
|
488
|
+
* @private
|
|
489
|
+
*/
|
|
490
|
+
_init() {
|
|
491
|
+
|
|
492
|
+
// Add inert attribute to prevent focusing programmatically as well (if supported)
|
|
493
|
+
if ('inert' in HTMLElement.prototype) {
|
|
494
|
+
this.container.inert = false; // Ensure the container isn't inert
|
|
495
|
+
this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
// Track tab direction
|
|
499
|
+
this.container.addEventListener('keydown', this._onKeydown);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
/**
|
|
503
|
+
* Handles keydown events to manage tab navigation within the container.
|
|
504
|
+
* Ensures that focus wraps around when reaching the first or last focusable element.
|
|
505
|
+
*
|
|
506
|
+
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
507
|
+
* @private
|
|
508
|
+
*/
|
|
509
|
+
_onKeydown = (e) => {
|
|
510
|
+
|
|
511
|
+
if (e.key === 'Tab') {
|
|
512
|
+
|
|
513
|
+
// Set the tab direction based on the key pressed
|
|
514
|
+
this.tabDirection = e.shiftKey ? 'backward' : 'forward';
|
|
515
|
+
|
|
516
|
+
// Get the active element(s) in the document and shadow root
|
|
517
|
+
// This will include the active element in the shadow DOM if it exists
|
|
518
|
+
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
519
|
+
let activeElement = document.activeElement;
|
|
520
|
+
const actives = [activeElement];
|
|
521
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
522
|
+
actives.push(activeElement.shadowRoot.activeElement);
|
|
523
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
// Update the focusable elements
|
|
527
|
+
const focusables = this._getFocusableElements();
|
|
528
|
+
|
|
529
|
+
// If we're at either end of the focusable elements, wrap around to the other end
|
|
530
|
+
const focusIndex =
|
|
531
|
+
(actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
|
|
532
|
+
? focusables.length - 1
|
|
533
|
+
: actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
|
|
534
|
+
? 0
|
|
535
|
+
: null;
|
|
536
|
+
|
|
537
|
+
if (focusIndex !== null) {
|
|
538
|
+
focusables[focusIndex].focus();
|
|
539
|
+
e.preventDefault(); // Prevent default tab behavior
|
|
540
|
+
e.stopPropagation(); // Stop the event from bubbling up
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
};
|
|
544
|
+
|
|
545
|
+
/**
|
|
546
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
547
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
548
|
+
*
|
|
549
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
550
|
+
* @private
|
|
551
|
+
*/
|
|
552
|
+
_getFocusableElements() {
|
|
553
|
+
// Use the imported utility function to get focusable elements
|
|
554
|
+
const elements = getFocusableElements(this.container);
|
|
555
|
+
|
|
556
|
+
// Filter out any elements with the 'focus-bookend' class
|
|
557
|
+
return elements;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/**
|
|
561
|
+
* Moves focus to the first focusable element within the container.
|
|
562
|
+
* Useful for setting initial focus when activating the focus trap.
|
|
563
|
+
*/
|
|
564
|
+
focusFirstElement() {
|
|
565
|
+
const focusables = this._getFocusableElements();
|
|
566
|
+
if (focusables.length) focusables[0].focus();
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
/**
|
|
570
|
+
* Moves focus to the last focusable element within the container.
|
|
571
|
+
* Useful for setting focus when deactivating or cycling focus in reverse.
|
|
572
|
+
*/
|
|
573
|
+
focusLastElement() {
|
|
574
|
+
const focusables = this._getFocusableElements();
|
|
575
|
+
if (focusables.length) focusables[focusables.length - 1].focus();
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* Removes event listeners and attributes added by the focus trap.
|
|
580
|
+
* Call this method to clean up when the focus trap is no longer needed.
|
|
581
|
+
*/
|
|
582
|
+
disconnect() {
|
|
583
|
+
|
|
584
|
+
if (this.container.hasAttribute('data-focus-trap-container')) {
|
|
585
|
+
this.container.removeAttribute('data-focus-trap-container');
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
this.container.removeEventListener('keydown', this._onKeydown);
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
/**
|
|
593
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
594
|
+
*/
|
|
595
|
+
const _observers = new WeakMap();
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
599
|
+
* Structure: {
|
|
600
|
+
* host: {
|
|
601
|
+
* matchers: Set<Function>,
|
|
602
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
603
|
+
* }
|
|
604
|
+
* }
|
|
605
|
+
*/
|
|
606
|
+
const _transportConfig = new WeakMap();
|
|
607
|
+
|
|
608
|
+
/**
|
|
609
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
610
|
+
*
|
|
611
|
+
* @param {Object} params - The parameters for the function.
|
|
612
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
613
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
614
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
615
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
616
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
617
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
618
|
+
*/
|
|
619
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
620
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
621
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
622
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
626
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
627
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
// Guard Clause: Ensure match is a function
|
|
631
|
+
if (typeof match !== 'function') {
|
|
632
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
636
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
637
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
// Register this transport and get cleanup function
|
|
641
|
+
return _registerTransport({
|
|
642
|
+
host,
|
|
643
|
+
target,
|
|
644
|
+
matcher: match,
|
|
645
|
+
removeOriginal
|
|
646
|
+
});
|
|
647
|
+
};
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
651
|
+
*
|
|
652
|
+
* @param {Object} params - The parameters object.
|
|
653
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
654
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
655
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
656
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
657
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
658
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
659
|
+
* @private
|
|
660
|
+
*/
|
|
661
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
662
|
+
// Initialize config for this host if it doesn't exist
|
|
663
|
+
if (!_transportConfig.has(host)) {
|
|
664
|
+
_transportConfig.set(host, {
|
|
665
|
+
matchers: new Set(),
|
|
666
|
+
targets: new Map()
|
|
667
|
+
});
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
const config = _transportConfig.get(host);
|
|
671
|
+
|
|
672
|
+
// Add the matcher to the set of matchers for this host
|
|
673
|
+
config.matchers.add(matcher);
|
|
674
|
+
|
|
675
|
+
// Initialize target entry if it doesn't exist
|
|
676
|
+
if (!config.targets.has(target)) {
|
|
677
|
+
config.targets.set(target, new Map());
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
681
|
+
config.targets.get(target).set(matcher, {
|
|
682
|
+
removeOriginal,
|
|
683
|
+
currentAttributes: new Map()
|
|
684
|
+
});
|
|
685
|
+
|
|
686
|
+
// Perform initial attribute transport
|
|
687
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
688
|
+
|
|
689
|
+
// Attach observer
|
|
690
|
+
_attachObserver(host);
|
|
691
|
+
|
|
692
|
+
// Return cleanup function and utility functions
|
|
693
|
+
return {
|
|
694
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
695
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
696
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
697
|
+
}
|
|
698
|
+
};
|
|
699
|
+
|
|
700
|
+
/**
|
|
701
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
702
|
+
*
|
|
703
|
+
* @param {HTMLElement} host - The host element
|
|
704
|
+
* @param {HTMLElement} target - The target element
|
|
705
|
+
* @param {Function} matcher - The matcher function
|
|
706
|
+
* @private
|
|
707
|
+
*/
|
|
708
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
709
|
+
const config = _transportConfig.get(host);
|
|
710
|
+
if (!config) return;
|
|
711
|
+
|
|
712
|
+
// Remove this matcher from this target
|
|
713
|
+
const targetMatchers = config.targets.get(target);
|
|
714
|
+
if (targetMatchers) {
|
|
715
|
+
targetMatchers.delete(matcher);
|
|
716
|
+
|
|
717
|
+
// If this target has no more matchers, remove it
|
|
718
|
+
if (targetMatchers.size === 0) {
|
|
719
|
+
config.targets.delete(target);
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
// Check if this matcher is still used by any target
|
|
724
|
+
let matcherStillUsed = false;
|
|
725
|
+
for (const matcherMap of config.targets.values()) {
|
|
726
|
+
if (matcherMap.has(matcher)) {
|
|
727
|
+
matcherStillUsed = true;
|
|
728
|
+
break;
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
// If not used anymore, remove from matchers set
|
|
733
|
+
if (!matcherStillUsed) {
|
|
734
|
+
config.matchers.delete(matcher);
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
// If no more targets or matchers, detach observer
|
|
738
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
739
|
+
_detachObserver(host);
|
|
740
|
+
}
|
|
741
|
+
};
|
|
742
|
+
|
|
743
|
+
/**
|
|
744
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
745
|
+
*
|
|
746
|
+
* @param {Object} params - The parameters object.
|
|
747
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
748
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
749
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
750
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
751
|
+
* @returns {void}
|
|
752
|
+
* @private
|
|
753
|
+
*/
|
|
754
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
755
|
+
// Get a list of all matching attributes on the host element and their values
|
|
756
|
+
const matchingAttributes = host.getAttributeNames()
|
|
757
|
+
.filter(attr => matcher(attr))
|
|
758
|
+
.reduce((acc, attr) => {
|
|
759
|
+
acc[attr] = host.getAttribute(attr);
|
|
760
|
+
return acc;
|
|
761
|
+
}, {});
|
|
762
|
+
|
|
763
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
764
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
765
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
766
|
+
target.setAttribute(key, value);
|
|
767
|
+
if (removeOriginal) {
|
|
768
|
+
host.removeAttribute(key);
|
|
769
|
+
}
|
|
770
|
+
});
|
|
771
|
+
};
|
|
772
|
+
|
|
773
|
+
/**
|
|
774
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
775
|
+
*
|
|
776
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
777
|
+
* @returns {MutationObserver} The observer instance.
|
|
778
|
+
* @private
|
|
779
|
+
*/
|
|
780
|
+
const _attachObserver = (host) => {
|
|
781
|
+
// If an observer for this host already exists, return it
|
|
782
|
+
if (_observers.has(host)) {
|
|
783
|
+
return _observers.get(host);
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
// Create a new MutationObserver
|
|
787
|
+
const observer = new MutationObserver((mutations) => {
|
|
788
|
+
const config = _transportConfig.get(host);
|
|
789
|
+
if (!config) return;
|
|
790
|
+
|
|
791
|
+
// For each mutation affecting attributes
|
|
792
|
+
mutations
|
|
793
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
794
|
+
.forEach(mutation => {
|
|
795
|
+
const attributeName = mutation.attributeName;
|
|
796
|
+
|
|
797
|
+
// Find matchers that care about this attribute
|
|
798
|
+
for (const matcher of config.matchers) {
|
|
799
|
+
if (matcher(attributeName)) {
|
|
800
|
+
// For each target that uses this matcher
|
|
801
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
802
|
+
if (matcherConfigs.has(matcher)) {
|
|
803
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
804
|
+
_transportAttributes({
|
|
805
|
+
host,
|
|
806
|
+
target,
|
|
807
|
+
matcher,
|
|
808
|
+
removeOriginal
|
|
809
|
+
});
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
});
|
|
815
|
+
});
|
|
816
|
+
|
|
817
|
+
// Start observing attribute changes
|
|
818
|
+
observer.observe(host, { attributes: true });
|
|
819
|
+
|
|
820
|
+
// Store the observer
|
|
821
|
+
_observers.set(host, observer);
|
|
822
|
+
|
|
823
|
+
return observer;
|
|
824
|
+
};
|
|
825
|
+
|
|
826
|
+
/**
|
|
827
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
828
|
+
*
|
|
829
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
830
|
+
* @private
|
|
831
|
+
*/
|
|
832
|
+
const _detachObserver = (host) => {
|
|
833
|
+
if (_observers.has(host)) {
|
|
834
|
+
const observer = _observers.get(host);
|
|
835
|
+
observer.disconnect();
|
|
836
|
+
_observers.delete(host);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
// Clean up the transport config as well
|
|
840
|
+
if (_transportConfig.has(host)) {
|
|
841
|
+
_transportConfig.delete(host);
|
|
842
|
+
}
|
|
843
|
+
};
|
|
844
|
+
|
|
845
|
+
/**
|
|
846
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
847
|
+
* @param {HTMLElement} host - The host element
|
|
848
|
+
* @param {HTMLElement} target - The target element
|
|
849
|
+
* @param {Function} matcher - The matcher function
|
|
850
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
851
|
+
* @private
|
|
852
|
+
*/
|
|
853
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
854
|
+
const config = _transportConfig.get(host);
|
|
855
|
+
if (!config) return undefined;
|
|
856
|
+
|
|
857
|
+
const targetMatchers = config.targets.get(target);
|
|
858
|
+
if (!targetMatchers) return undefined;
|
|
859
|
+
|
|
860
|
+
return targetMatchers.get(matcher);
|
|
861
|
+
};
|
|
862
|
+
|
|
863
|
+
/**
|
|
864
|
+
* Sets an observed attribute value
|
|
865
|
+
* @param {HTMLElement} host - The host element
|
|
866
|
+
* @param {HTMLElement} target - The target element
|
|
867
|
+
* @param {Function} matcher - The matcher function
|
|
868
|
+
* @param {string} key - The attribute name
|
|
869
|
+
* @param {string} value - The attribute value
|
|
870
|
+
* @private
|
|
871
|
+
*/
|
|
872
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
873
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
874
|
+
if (matcherConfig) {
|
|
875
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
876
|
+
}
|
|
877
|
+
};
|
|
878
|
+
|
|
879
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
880
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
881
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
882
|
+
return undefined;
|
|
883
|
+
};
|
|
884
|
+
|
|
885
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
886
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
887
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
888
|
+
return [];
|
|
889
|
+
};
|
|
890
|
+
|
|
891
|
+
const _matchers = {
|
|
892
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
893
|
+
'role': attr => attr.match(/^role$/)
|
|
894
|
+
};
|
|
895
|
+
|
|
896
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
897
|
+
return transportAttributes({
|
|
898
|
+
host,
|
|
899
|
+
target,
|
|
900
|
+
match: attr => {
|
|
901
|
+
for (const key in _matchers) {
|
|
902
|
+
if (_matchers[key](attr)) return true;
|
|
903
|
+
}
|
|
904
|
+
return false;
|
|
905
|
+
},
|
|
906
|
+
removeOriginal
|
|
907
|
+
});
|
|
908
|
+
};
|
|
909
|
+
|
|
910
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
911
|
+
|
|
912
|
+
/**
|
|
913
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
914
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
915
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
916
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
917
|
+
* @private
|
|
918
|
+
*/
|
|
919
|
+
attributeWatcher;
|
|
920
|
+
|
|
921
|
+
static get properties() {
|
|
922
|
+
return {
|
|
923
|
+
|
|
924
|
+
/**
|
|
925
|
+
* Defines the layout of an element.
|
|
926
|
+
* @default {'default'}
|
|
927
|
+
*/
|
|
928
|
+
layout: {
|
|
929
|
+
type: String,
|
|
930
|
+
attribute: "layout",
|
|
931
|
+
reflect: true
|
|
932
|
+
},
|
|
933
|
+
|
|
934
|
+
/**
|
|
935
|
+
* Defines the shape of an element.
|
|
936
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
937
|
+
* @default {'default'}
|
|
938
|
+
*/
|
|
939
|
+
shape: {
|
|
940
|
+
type: String,
|
|
941
|
+
attribute: "shape",
|
|
942
|
+
reflect: true
|
|
943
|
+
},
|
|
944
|
+
|
|
945
|
+
/**
|
|
946
|
+
* Defines the size of an element.
|
|
947
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
948
|
+
* @default {'md'}
|
|
949
|
+
*/
|
|
950
|
+
size: {
|
|
951
|
+
type: String,
|
|
952
|
+
attribute: "size",
|
|
953
|
+
reflect: true
|
|
954
|
+
},
|
|
955
|
+
|
|
956
|
+
/**
|
|
957
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
958
|
+
* @default {false}
|
|
959
|
+
*/
|
|
960
|
+
onDark: {
|
|
961
|
+
type: Boolean,
|
|
962
|
+
attribute: "ondark",
|
|
963
|
+
reflect: true
|
|
964
|
+
},
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
968
|
+
* This is used to apply layout and shape classes dynamically.
|
|
969
|
+
* @type {HTMLElement|null}
|
|
970
|
+
* @default {null}
|
|
971
|
+
* @private
|
|
972
|
+
*/
|
|
973
|
+
wrapper: {
|
|
974
|
+
attribute: false,
|
|
975
|
+
reflect: false
|
|
976
|
+
}
|
|
977
|
+
};
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
|
|
981
|
+
|
|
982
|
+
resetShapeClasses() {
|
|
983
|
+
if (this.shape && this.size) {
|
|
984
|
+
|
|
985
|
+
if (this.wrapper) {
|
|
986
|
+
this.wrapper.classList.forEach((className) => {
|
|
987
|
+
if (className.startsWith('shape-')) {
|
|
988
|
+
this.wrapper.classList.remove(className);
|
|
989
|
+
}
|
|
990
|
+
});
|
|
991
|
+
|
|
992
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
993
|
+
}
|
|
994
|
+
}
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
resetLayoutClasses() {
|
|
998
|
+
if (this.layout) {
|
|
999
|
+
if (this.wrapper) {
|
|
1000
|
+
this.wrapper.classList.forEach((className) => {
|
|
1001
|
+
if (className.startsWith('layout-')) {
|
|
1002
|
+
this.wrapper.classList.remove(className);
|
|
1003
|
+
}
|
|
1004
|
+
});
|
|
1005
|
+
|
|
1006
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
updateComponentArchitecture() {
|
|
1012
|
+
this.resetLayoutClasses();
|
|
1013
|
+
this.resetShapeClasses();
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
updated(changedProperties) {
|
|
1017
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
1018
|
+
this.updateComponentArchitecture();
|
|
1019
|
+
}
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
firstUpdated() {
|
|
1023
|
+
super.firstUpdated();
|
|
1024
|
+
|
|
1025
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
1026
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
1027
|
+
|
|
1028
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
1029
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
disconnectedCallback() {
|
|
1033
|
+
super.disconnectedCallback();
|
|
1034
|
+
|
|
1035
|
+
// Cleanup the ARIA observer if it exists
|
|
1036
|
+
if (this.attributeWatcher) {
|
|
1037
|
+
this.attributeWatcher.cleanup();
|
|
1038
|
+
this.attributeWatcher = null;
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
1043
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
1044
|
+
render() {
|
|
1045
|
+
try {
|
|
1046
|
+
return this.renderLayout();
|
|
1047
|
+
} catch (error) {
|
|
1048
|
+
// failed to get the defined layout
|
|
1049
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
1050
|
+
|
|
1051
|
+
// fallback to the default layout
|
|
1052
|
+
return this.getLayout('default');
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
};
|
|
1056
|
+
|
|
1057
|
+
/**
|
|
1058
|
+
* @license
|
|
1059
|
+
* Copyright 2018 Google LLC
|
|
1060
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1061
|
+
*/const o=o=>o??E;
|
|
1062
|
+
|
|
1063
|
+
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}`;
|
|
1064
|
+
|
|
1065
|
+
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)}`;
|
|
1066
|
+
|
|
1067
|
+
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}`;
|
|
1068
|
+
|
|
1069
|
+
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}`;
|
|
1070
|
+
|
|
1071
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1072
|
+
// See LICENSE in the project root for license information.
|
|
1073
|
+
|
|
1074
|
+
// ---------------------------------------------------------------------
|
|
1075
|
+
|
|
1076
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1077
|
+
|
|
1078
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
1079
|
+
|
|
1080
|
+
/* eslint-disable jsdoc/require-param */
|
|
1081
|
+
|
|
1082
|
+
/**
|
|
1083
|
+
* This will register a new custom element with the browser.
|
|
1084
|
+
* @param {String} name - The name of the custom element.
|
|
1085
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1086
|
+
* @returns {void}
|
|
1087
|
+
*/
|
|
1088
|
+
registerComponent(name, componentClass) {
|
|
1089
|
+
if (!customElements.get(name)) {
|
|
1090
|
+
customElements.define(name, class extends componentClass {});
|
|
1091
|
+
}
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
/**
|
|
1095
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1096
|
+
* @returns {void}
|
|
1097
|
+
*/
|
|
1098
|
+
closestElement(
|
|
1099
|
+
selector, // selector like in .closest()
|
|
1100
|
+
base = this, // extra functionality to skip a parent
|
|
1101
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1102
|
+
!el || el === document || el === window
|
|
1103
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1104
|
+
: found
|
|
1105
|
+
? found // found a selector INside this element
|
|
1106
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1107
|
+
) {
|
|
1108
|
+
return __Closest(base);
|
|
1109
|
+
}
|
|
1110
|
+
/* eslint-enable jsdoc/require-param */
|
|
1111
|
+
|
|
1112
|
+
/**
|
|
1113
|
+
* 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.
|
|
1114
|
+
* @param {Object} elem - The element to check.
|
|
1115
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1116
|
+
* @returns {void}
|
|
318
1117
|
*/
|
|
319
|
-
|
|
320
|
-
const
|
|
321
|
-
const
|
|
1118
|
+
handleComponentTagRename(elem, tagName) {
|
|
1119
|
+
const tag = tagName.toLowerCase();
|
|
1120
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
322
1121
|
|
|
323
|
-
if (
|
|
324
|
-
|
|
1122
|
+
if (elemTag !== tag) {
|
|
1123
|
+
elem.setAttribute(tag, true);
|
|
325
1124
|
}
|
|
326
|
-
|
|
327
|
-
return tag;
|
|
328
1125
|
}
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* @license
|
|
333
|
-
* Copyright 2018 Google LLC
|
|
334
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
335
|
-
*/const o=o=>o??E;
|
|
336
|
-
|
|
337
|
-
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}`;
|
|
338
1126
|
|
|
339
|
-
|
|
1127
|
+
/**
|
|
1128
|
+
* Validates if an element is a specific Auro component.
|
|
1129
|
+
* @param {Object} elem - The element to validate.
|
|
1130
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1131
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1132
|
+
*/
|
|
1133
|
+
elementMatch(elem, tagName) {
|
|
1134
|
+
const tag = tagName.toLowerCase();
|
|
1135
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
340
1136
|
|
|
341
|
-
|
|
1137
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1138
|
+
}
|
|
1139
|
+
};
|
|
342
1140
|
|
|
343
|
-
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}}`;
|
|
1141
|
+
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}}`;
|
|
344
1142
|
|
|
345
1143
|
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}`;
|
|
346
1144
|
|
|
@@ -372,7 +1170,7 @@ class AuroLoader extends i$2 {
|
|
|
372
1170
|
/**
|
|
373
1171
|
* @private
|
|
374
1172
|
*/
|
|
375
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1173
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
376
1174
|
|
|
377
1175
|
this.orbit = false;
|
|
378
1176
|
this.ringworm = false;
|
|
@@ -435,7 +1233,7 @@ class AuroLoader extends i$2 {
|
|
|
435
1233
|
*
|
|
436
1234
|
*/
|
|
437
1235
|
static register(name = "auro-loader") {
|
|
438
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
1236
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
439
1237
|
}
|
|
440
1238
|
|
|
441
1239
|
firstUpdated() {
|
|
@@ -473,7 +1271,7 @@ class AuroLoader extends i$2 {
|
|
|
473
1271
|
<span part="element" class="loader node-${idx}"></span>
|
|
474
1272
|
`)}
|
|
475
1273
|
|
|
476
|
-
<div class="no-animation">Loading...</div>
|
|
1274
|
+
<div class="no-animation body-default">Loading...</div>
|
|
477
1275
|
|
|
478
1276
|
${this.ringworm ? x`
|
|
479
1277
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -485,25 +1283,32 @@ class AuroLoader extends i$2 {
|
|
|
485
1283
|
}
|
|
486
1284
|
}
|
|
487
1285
|
|
|
488
|
-
var loaderVersion = '5.
|
|
1286
|
+
var loaderVersion = '5.1.0';
|
|
489
1287
|
|
|
490
|
-
/* eslint-disable max-lines */
|
|
491
1288
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
492
1289
|
// See LICENSE in the project root for license information.
|
|
493
1290
|
|
|
494
1291
|
|
|
495
1292
|
/**
|
|
496
1293
|
* @slot - Default slot for the text of the button.
|
|
497
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
498
1294
|
* @csspart button - Apply CSS to HTML5 button.
|
|
499
1295
|
* @csspart loader - Apply CSS to auro-loader.
|
|
500
1296
|
* @csspart text - Apply CSS to text slot.
|
|
501
1297
|
* @csspart icon - Apply CSS to icon slot.
|
|
502
1298
|
*/
|
|
503
1299
|
|
|
504
|
-
|
|
1300
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
505
1301
|
|
|
506
|
-
|
|
1302
|
+
/**
|
|
1303
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
1304
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
1305
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
1306
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
1307
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
1308
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
1309
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
1310
|
+
*/
|
|
1311
|
+
class AuroButton extends AuroElement$1 {
|
|
507
1312
|
|
|
508
1313
|
/**
|
|
509
1314
|
* Enables form association for this element.
|
|
@@ -518,15 +1323,13 @@ class AuroButton extends i$2 {
|
|
|
518
1323
|
super();
|
|
519
1324
|
this.autofocus = false;
|
|
520
1325
|
this.disabled = false;
|
|
521
|
-
this.iconOnly = false;
|
|
522
1326
|
this.loading = false;
|
|
1327
|
+
this.size = "md";
|
|
1328
|
+
this.shape = "rounded";
|
|
523
1329
|
this.onDark = false;
|
|
524
|
-
this.secondary = false;
|
|
525
|
-
this.tertiary = false;
|
|
526
|
-
this.rounded = false;
|
|
527
|
-
this.slim = false;
|
|
528
1330
|
this.fluid = false;
|
|
529
1331
|
this.loadingText = this.loadingText || 'Loading...';
|
|
1332
|
+
this.variant = 'primary';
|
|
530
1333
|
|
|
531
1334
|
// Support for HTML5 forms
|
|
532
1335
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -547,49 +1350,59 @@ class AuroButton extends i$2 {
|
|
|
547
1350
|
* @private
|
|
548
1351
|
*/
|
|
549
1352
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
1353
|
+
|
|
1354
|
+
/**
|
|
1355
|
+
* @private
|
|
1356
|
+
*/
|
|
1357
|
+
this.buttonHref = undefined;
|
|
1358
|
+
|
|
1359
|
+
/**
|
|
1360
|
+
* @private
|
|
1361
|
+
*/
|
|
1362
|
+
this.buttonTarget = undefined;
|
|
1363
|
+
|
|
1364
|
+
/**
|
|
1365
|
+
* @private
|
|
1366
|
+
*/
|
|
1367
|
+
this.buttonRel = undefined;
|
|
550
1368
|
}
|
|
551
1369
|
|
|
552
1370
|
static get styles() {
|
|
553
1371
|
return [
|
|
554
1372
|
tokensCss$2,
|
|
555
1373
|
styleCss$2,
|
|
556
|
-
colorCss$2
|
|
1374
|
+
colorCss$2,
|
|
1375
|
+
shapeSize
|
|
557
1376
|
];
|
|
558
1377
|
}
|
|
559
1378
|
|
|
560
1379
|
static get properties() {
|
|
561
1380
|
return {
|
|
562
1381
|
|
|
563
|
-
|
|
564
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
565
|
-
*/
|
|
566
|
-
autofocus: {
|
|
567
|
-
type: Boolean,
|
|
568
|
-
reflect: true
|
|
569
|
-
},
|
|
1382
|
+
...super.properties,
|
|
570
1383
|
|
|
571
1384
|
/**
|
|
572
|
-
*
|
|
1385
|
+
* Override layout since it isn't used in this component.
|
|
1386
|
+
* @private
|
|
573
1387
|
*/
|
|
574
|
-
|
|
1388
|
+
layout: {
|
|
575
1389
|
type: Boolean,
|
|
576
|
-
|
|
1390
|
+
attribute: false,
|
|
1391
|
+
reflect: false
|
|
577
1392
|
},
|
|
578
1393
|
|
|
579
1394
|
/**
|
|
580
|
-
*
|
|
581
|
-
* @deprecated
|
|
1395
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
582
1396
|
*/
|
|
583
|
-
|
|
1397
|
+
autofocus: {
|
|
584
1398
|
type: Boolean,
|
|
585
1399
|
reflect: true
|
|
586
1400
|
},
|
|
587
1401
|
|
|
588
1402
|
/**
|
|
589
|
-
*
|
|
590
|
-
* @deprecated
|
|
1403
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
591
1404
|
*/
|
|
592
|
-
|
|
1405
|
+
disabled: {
|
|
593
1406
|
type: Boolean,
|
|
594
1407
|
reflect: true
|
|
595
1408
|
},
|
|
@@ -597,15 +1410,7 @@ class AuroButton extends i$2 {
|
|
|
597
1410
|
/**
|
|
598
1411
|
* Alters the shape of the button to be full width of its parent container.
|
|
599
1412
|
*/
|
|
600
|
-
fluid:
|
|
601
|
-
type: Boolean,
|
|
602
|
-
reflect: true
|
|
603
|
-
},
|
|
604
|
-
|
|
605
|
-
/**
|
|
606
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
607
|
-
*/
|
|
608
|
-
iconOnly: {
|
|
1413
|
+
fluid: {
|
|
609
1414
|
type: Boolean,
|
|
610
1415
|
reflect: true
|
|
611
1416
|
},
|
|
@@ -613,7 +1418,7 @@ class AuroButton extends i$2 {
|
|
|
613
1418
|
/**
|
|
614
1419
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
615
1420
|
*/
|
|
616
|
-
loading:
|
|
1421
|
+
loading: {
|
|
617
1422
|
type: Boolean,
|
|
618
1423
|
reflect: true
|
|
619
1424
|
},
|
|
@@ -621,36 +1426,12 @@ class AuroButton extends i$2 {
|
|
|
621
1426
|
/**
|
|
622
1427
|
* 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.
|
|
623
1428
|
*/
|
|
624
|
-
loadingText:
|
|
1429
|
+
loadingText: {
|
|
625
1430
|
type: String
|
|
626
1431
|
},
|
|
627
1432
|
|
|
628
1433
|
/**
|
|
629
|
-
*
|
|
630
|
-
*/
|
|
631
|
-
onDark: {
|
|
632
|
-
type: Boolean,
|
|
633
|
-
reflect: true
|
|
634
|
-
},
|
|
635
|
-
|
|
636
|
-
/**
|
|
637
|
-
* If set to true, the button will have a rounded shape.
|
|
638
|
-
*/
|
|
639
|
-
rounded: {
|
|
640
|
-
type: Boolean,
|
|
641
|
-
reflect: true
|
|
642
|
-
},
|
|
643
|
-
|
|
644
|
-
/**
|
|
645
|
-
* Set value for slim version of auro-button.
|
|
646
|
-
*/
|
|
647
|
-
slim: {
|
|
648
|
-
type: Boolean,
|
|
649
|
-
reflect: true
|
|
650
|
-
},
|
|
651
|
-
|
|
652
|
-
/**
|
|
653
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
1434
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
654
1435
|
*/
|
|
655
1436
|
tIndex: {
|
|
656
1437
|
type: String,
|
|
@@ -658,75 +1439,68 @@ class AuroButton extends i$2 {
|
|
|
658
1439
|
},
|
|
659
1440
|
|
|
660
1441
|
/**
|
|
661
|
-
* Populates
|
|
1442
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
1443
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
1444
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
662
1445
|
*/
|
|
663
|
-
|
|
1446
|
+
tabindex: {
|
|
664
1447
|
type: String,
|
|
665
|
-
reflect:
|
|
1448
|
+
reflect: false
|
|
666
1449
|
},
|
|
667
1450
|
|
|
668
1451
|
/**
|
|
669
|
-
*
|
|
670
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
671
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
1452
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
672
1453
|
*/
|
|
673
|
-
|
|
1454
|
+
title: {
|
|
674
1455
|
type: String,
|
|
675
1456
|
reflect: true
|
|
676
1457
|
},
|
|
677
1458
|
|
|
678
1459
|
/**
|
|
679
|
-
*
|
|
680
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
681
|
-
* List multiple element IDs in a space delimited fashion.
|
|
1460
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
682
1461
|
*/
|
|
683
|
-
|
|
1462
|
+
type: {
|
|
684
1463
|
type: String,
|
|
685
1464
|
reflect: true
|
|
686
1465
|
},
|
|
687
1466
|
|
|
688
1467
|
/**
|
|
689
|
-
*
|
|
690
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
691
|
-
* This is an optional attribute for buttons.
|
|
1468
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
692
1469
|
*/
|
|
693
|
-
|
|
694
|
-
type:
|
|
1470
|
+
value: {
|
|
1471
|
+
type: String,
|
|
695
1472
|
reflect: true
|
|
696
1473
|
},
|
|
697
1474
|
|
|
698
1475
|
/**
|
|
699
|
-
* Sets
|
|
1476
|
+
* Sets button variant option.
|
|
1477
|
+
* @default primary
|
|
700
1478
|
*/
|
|
701
|
-
|
|
1479
|
+
variant: {
|
|
702
1480
|
type: String,
|
|
703
1481
|
reflect: true
|
|
704
1482
|
},
|
|
705
1483
|
|
|
706
1484
|
/**
|
|
707
|
-
*
|
|
1485
|
+
* @private
|
|
708
1486
|
*/
|
|
709
|
-
|
|
1487
|
+
buttonHref: {
|
|
710
1488
|
type: String,
|
|
711
|
-
reflect: true
|
|
712
1489
|
},
|
|
713
1490
|
|
|
714
1491
|
/**
|
|
715
|
-
*
|
|
1492
|
+
* @private
|
|
716
1493
|
*/
|
|
717
|
-
|
|
1494
|
+
buttonTarget: {
|
|
718
1495
|
type: String,
|
|
719
|
-
reflect: true
|
|
720
1496
|
},
|
|
721
1497
|
|
|
722
1498
|
/**
|
|
723
|
-
*
|
|
1499
|
+
* @private
|
|
724
1500
|
*/
|
|
725
|
-
|
|
1501
|
+
buttonRel: {
|
|
726
1502
|
type: String,
|
|
727
|
-
reflect: true
|
|
728
1503
|
},
|
|
729
|
-
ready: { type: Boolean },
|
|
730
1504
|
};
|
|
731
1505
|
}
|
|
732
1506
|
|
|
@@ -739,7 +1513,7 @@ class AuroButton extends i$2 {
|
|
|
739
1513
|
*
|
|
740
1514
|
*/
|
|
741
1515
|
static register(name = "auro-button") {
|
|
742
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
1516
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
|
|
743
1517
|
}
|
|
744
1518
|
|
|
745
1519
|
/**
|
|
@@ -751,17 +1525,6 @@ class AuroButton extends i$2 {
|
|
|
751
1525
|
this.renderRoot.querySelector('button').focus();
|
|
752
1526
|
}
|
|
753
1527
|
|
|
754
|
-
updated() {
|
|
755
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
756
|
-
if (this.secondary) {
|
|
757
|
-
this.setAttribute('variant', 'secondary');
|
|
758
|
-
}
|
|
759
|
-
|
|
760
|
-
if (this.tertiary) {
|
|
761
|
-
this.setAttribute('variant', 'tertiary');
|
|
762
|
-
}
|
|
763
|
-
}
|
|
764
|
-
|
|
765
1528
|
/**
|
|
766
1529
|
* Submits the form that this button is associated with.
|
|
767
1530
|
* @private
|
|
@@ -782,28 +1545,115 @@ class AuroButton extends i$2 {
|
|
|
782
1545
|
return this.internals ? this.internals.form : null;
|
|
783
1546
|
}
|
|
784
1547
|
|
|
785
|
-
|
|
1548
|
+
/**
|
|
1549
|
+
* @private
|
|
1550
|
+
* @returns {Boolean}
|
|
1551
|
+
*/
|
|
1552
|
+
get showText() {
|
|
1553
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
/**
|
|
1557
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
1558
|
+
* @returns {string | undefined}
|
|
1559
|
+
* @private
|
|
1560
|
+
*/
|
|
1561
|
+
get currentAriaLabel() {
|
|
1562
|
+
if (!this.attributeWatcher) return undefined;
|
|
1563
|
+
|
|
1564
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
1565
|
+
return ariaLabel || undefined;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
/**
|
|
1569
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
1570
|
+
* @returns {string | undefined}
|
|
1571
|
+
* @private
|
|
1572
|
+
*/
|
|
1573
|
+
get currentAriaLabelledBy() {
|
|
1574
|
+
if (!this.attributeWatcher) return undefined;
|
|
1575
|
+
|
|
1576
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
1577
|
+
return ariaLabelledBy || undefined;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
/**
|
|
1581
|
+
* Whether or not the button is set to an icon-only shape.
|
|
1582
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
1583
|
+
* @private
|
|
1584
|
+
*/
|
|
1585
|
+
get iconOnly() {
|
|
1586
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
/**
|
|
1590
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
1591
|
+
* @returns {string} - The font size class name.
|
|
1592
|
+
* @private
|
|
1593
|
+
*/
|
|
1594
|
+
getFontSize() {
|
|
1595
|
+
|
|
1596
|
+
// Size map for standard buttons
|
|
1597
|
+
const standardButtonSizeMap = {
|
|
1598
|
+
xs: 'body-xs',
|
|
1599
|
+
sm: 'body-sm',
|
|
1600
|
+
md: 'body-default',
|
|
1601
|
+
lg: 'body-lg',
|
|
1602
|
+
xl: 'body-lg'
|
|
1603
|
+
};
|
|
1604
|
+
|
|
1605
|
+
// Size map for icon-only buttons
|
|
1606
|
+
const iconOnlyButtonSizeMap = {
|
|
1607
|
+
xs: 'heading-xs',
|
|
1608
|
+
sm: 'heading-sm',
|
|
1609
|
+
md: 'heading-sm',
|
|
1610
|
+
lg: 'heading-md',
|
|
1611
|
+
xl: 'heading-lg'
|
|
1612
|
+
};
|
|
1613
|
+
|
|
1614
|
+
// Determine which map to use based on the shape
|
|
1615
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
1616
|
+
|
|
1617
|
+
// Return the font size based on the button size and shape
|
|
1618
|
+
return sizeMap[this.size] || 'body-default';
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
/**
|
|
1622
|
+
* Renders the default layout for the button.
|
|
1623
|
+
* @returns {TemplateResult}
|
|
1624
|
+
* @private
|
|
1625
|
+
*/
|
|
1626
|
+
renderLayoutDefault() {
|
|
1627
|
+
|
|
1628
|
+
const fontSize = this.getFontSize();
|
|
1629
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
1630
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
1631
|
+
|
|
786
1632
|
const classes = {
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
'
|
|
1633
|
+
"auro-button": true,
|
|
1634
|
+
"inset": this.showText,
|
|
1635
|
+
wrapper: true,
|
|
1636
|
+
loading: this.loading,
|
|
1637
|
+
[`${fontSize}`]: true,
|
|
1638
|
+
|
|
1639
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
1640
|
+
'simple': !['secondary'].includes(this.variant),
|
|
1641
|
+
'thin': ['secondary'].includes(this.variant),
|
|
1642
|
+
};
|
|
1643
|
+
|
|
1644
|
+
const contentClasses = {
|
|
1645
|
+
"contentWrapper": true,
|
|
1646
|
+
"util_displayHiddenVisually": this.loading
|
|
795
1647
|
};
|
|
796
1648
|
|
|
797
1649
|
return u`
|
|
798
|
-
|
|
799
|
-
part="
|
|
800
|
-
aria-
|
|
801
|
-
aria-
|
|
802
|
-
|
|
803
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
804
|
-
tabIndex="${o(this.tIndex)}"
|
|
1650
|
+
<${tag}
|
|
1651
|
+
part="${part}"
|
|
1652
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
1653
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
1654
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
805
1655
|
?autofocus="${this.autofocus}"
|
|
806
|
-
class
|
|
1656
|
+
class=${e(classes)}
|
|
807
1657
|
?disabled="${this.disabled || this.loading}"
|
|
808
1658
|
?onDark="${this.onDark}"
|
|
809
1659
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -812,24 +1662,32 @@ class AuroButton extends i$2 {
|
|
|
812
1662
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
813
1663
|
.value="${o(this.value ? this.value : undefined)}"
|
|
814
1664
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
1665
|
+
href="${o(this.buttonHref || undefined)}"
|
|
1666
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
1667
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
815
1668
|
>
|
|
816
1669
|
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
817
1670
|
|
|
818
|
-
<span class="
|
|
1671
|
+
<span class="${e(contentClasses)}">
|
|
819
1672
|
<span class="textSlot" part="text">
|
|
820
|
-
|
|
821
|
-
</span>
|
|
822
|
-
|
|
823
|
-
<span part="icon">
|
|
824
|
-
<slot name="icon"></slot>
|
|
1673
|
+
<slot></slot>
|
|
825
1674
|
</span>
|
|
826
1675
|
</span>
|
|
827
|
-
|
|
1676
|
+
</${tag}>
|
|
828
1677
|
`;
|
|
829
1678
|
}
|
|
1679
|
+
|
|
1680
|
+
/**
|
|
1681
|
+
* Renders the layout of the button.
|
|
1682
|
+
* @returns {TemplateResult}
|
|
1683
|
+
* @private
|
|
1684
|
+
*/
|
|
1685
|
+
renderLayout() {
|
|
1686
|
+
return this.renderLayoutDefault();
|
|
1687
|
+
}
|
|
830
1688
|
}
|
|
831
1689
|
|
|
832
|
-
var buttonVersion = '
|
|
1690
|
+
var buttonVersion = '11.3.0';
|
|
833
1691
|
|
|
834
1692
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
835
1693
|
// See LICENSE in the project root for license information.
|
|
@@ -985,6 +1843,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
|
|
|
985
1843
|
|
|
986
1844
|
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)}`;
|
|
987
1845
|
|
|
1846
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1847
|
+
// See LICENSE in the project root for license information.
|
|
1848
|
+
|
|
1849
|
+
// ---------------------------------------------------------------------
|
|
1850
|
+
|
|
1851
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1852
|
+
|
|
1853
|
+
class AuroLibraryRuntimeUtils {
|
|
1854
|
+
|
|
1855
|
+
/* eslint-disable jsdoc/require-param */
|
|
1856
|
+
|
|
1857
|
+
/**
|
|
1858
|
+
* This will register a new custom element with the browser.
|
|
1859
|
+
* @param {String} name - The name of the custom element.
|
|
1860
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1861
|
+
* @returns {void}
|
|
1862
|
+
*/
|
|
1863
|
+
registerComponent(name, componentClass) {
|
|
1864
|
+
if (!customElements.get(name)) {
|
|
1865
|
+
customElements.define(name, class extends componentClass {});
|
|
1866
|
+
}
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
/**
|
|
1870
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1871
|
+
* @returns {void}
|
|
1872
|
+
*/
|
|
1873
|
+
closestElement(
|
|
1874
|
+
selector, // selector like in .closest()
|
|
1875
|
+
base = this, // extra functionality to skip a parent
|
|
1876
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1877
|
+
!el || el === document || el === window
|
|
1878
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1879
|
+
: found
|
|
1880
|
+
? found // found a selector INside this element
|
|
1881
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1882
|
+
) {
|
|
1883
|
+
return __Closest(base);
|
|
1884
|
+
}
|
|
1885
|
+
/* eslint-enable jsdoc/require-param */
|
|
1886
|
+
|
|
1887
|
+
/**
|
|
1888
|
+
* 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.
|
|
1889
|
+
* @param {Object} elem - The element to check.
|
|
1890
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1891
|
+
* @returns {void}
|
|
1892
|
+
*/
|
|
1893
|
+
handleComponentTagRename(elem, tagName) {
|
|
1894
|
+
const tag = tagName.toLowerCase();
|
|
1895
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1896
|
+
|
|
1897
|
+
if (elemTag !== tag) {
|
|
1898
|
+
elem.setAttribute(tag, true);
|
|
1899
|
+
}
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
/**
|
|
1903
|
+
* Validates if an element is a specific Auro component.
|
|
1904
|
+
* @param {Object} elem - The element to validate.
|
|
1905
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1906
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1907
|
+
*/
|
|
1908
|
+
elementMatch(elem, tagName) {
|
|
1909
|
+
const tag = tagName.toLowerCase();
|
|
1910
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1911
|
+
|
|
1912
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1913
|
+
}
|
|
1914
|
+
}
|
|
1915
|
+
|
|
988
1916
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
989
1917
|
// See LICENSE in the project root for license information.
|
|
990
1918
|
|
|
@@ -1107,8 +2035,12 @@ class AuroIcon extends BaseIcon {
|
|
|
1107
2035
|
async firstUpdated() {
|
|
1108
2036
|
await super.firstUpdated();
|
|
1109
2037
|
|
|
1110
|
-
|
|
1111
|
-
|
|
2038
|
+
/**
|
|
2039
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
2040
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
2041
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
2042
|
+
*/
|
|
2043
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
1112
2044
|
const svgDesc = this.svg.querySelector('desc');
|
|
1113
2045
|
|
|
1114
2046
|
if (svgDesc) {
|
|
@@ -1152,14 +2084,14 @@ class AuroIcon extends BaseIcon {
|
|
|
1152
2084
|
}
|
|
1153
2085
|
}
|
|
1154
2086
|
|
|
1155
|
-
var iconVersion = '8.0
|
|
2087
|
+
var iconVersion = '8.1.0';
|
|
1156
2088
|
|
|
1157
2089
|
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1158
2090
|
// See LICENSE in the project root for license information.
|
|
1159
2091
|
|
|
1160
2092
|
|
|
1161
|
-
const ESCAPE_KEYCODE = 27
|
|
1162
|
-
|
|
2093
|
+
const ESCAPE_KEYCODE = 27;
|
|
2094
|
+
|
|
1163
2095
|
|
|
1164
2096
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
1165
2097
|
/**
|
|
@@ -1208,7 +2140,7 @@ class ComponentBase extends i$2 {
|
|
|
1208
2140
|
/**
|
|
1209
2141
|
* @private
|
|
1210
2142
|
*/
|
|
1211
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
2143
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
1212
2144
|
}
|
|
1213
2145
|
|
|
1214
2146
|
static get properties() {
|
|
@@ -1275,11 +2207,17 @@ class ComponentBase extends i$2 {
|
|
|
1275
2207
|
openDialog() {
|
|
1276
2208
|
this.defaultTrigger = document.activeElement;
|
|
1277
2209
|
|
|
1278
|
-
|
|
1279
|
-
|
|
2210
|
+
this.focusTrap = new FocusTrap(this.dialog);
|
|
2211
|
+
}
|
|
1280
2212
|
|
|
1281
|
-
|
|
1282
|
-
|
|
2213
|
+
/**
|
|
2214
|
+
* set the focus on the first element after opening transition effect is complete.
|
|
2215
|
+
* @private
|
|
2216
|
+
*/
|
|
2217
|
+
onDialogTransitionEnd() {
|
|
2218
|
+
if (this.open && this.focusTrap) {
|
|
2219
|
+
this.focusTrap.focusFirstElement();
|
|
2220
|
+
}
|
|
1283
2221
|
}
|
|
1284
2222
|
|
|
1285
2223
|
/**
|
|
@@ -1287,6 +2225,17 @@ class ComponentBase extends i$2 {
|
|
|
1287
2225
|
* @returns {void}
|
|
1288
2226
|
*/
|
|
1289
2227
|
closeDialog() {
|
|
2228
|
+
if (this.focusTrap) {
|
|
2229
|
+
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
2230
|
+
this.focusTrap.disconnect();
|
|
2231
|
+
this.focusTrap = undefined;
|
|
2232
|
+
}
|
|
2233
|
+
|
|
2234
|
+
if (this.defaultTrigger) {
|
|
2235
|
+
this.defaultTrigger.focus();
|
|
2236
|
+
this.defaultTrigger = undefined;
|
|
2237
|
+
}
|
|
2238
|
+
|
|
1290
2239
|
this.dispatchToggleEvent();
|
|
1291
2240
|
}
|
|
1292
2241
|
|
|
@@ -1302,29 +2251,6 @@ class ComponentBase extends i$2 {
|
|
|
1302
2251
|
this.dispatchEvent(toggleEvent);
|
|
1303
2252
|
}
|
|
1304
2253
|
|
|
1305
|
-
/**
|
|
1306
|
-
* @private
|
|
1307
|
-
* @returns {void} Determines if dropdown bib should be closed on focus change.
|
|
1308
|
-
*/
|
|
1309
|
-
handleFocusLoss() {
|
|
1310
|
-
const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
|
|
1311
|
-
|
|
1312
|
-
const firstFocusableElement = focusable[0];
|
|
1313
|
-
const lastFocusableElement = focusable[focusable.length - 1];
|
|
1314
|
-
|
|
1315
|
-
const closeButton = this.shadowRoot.getElementById('dialog-close');
|
|
1316
|
-
|
|
1317
|
-
if (lastFocusableElement) {
|
|
1318
|
-
lastFocusableElement.addEventListener('focusout', () => {
|
|
1319
|
-
if (closeButton !== null) {
|
|
1320
|
-
closeButton.focus();
|
|
1321
|
-
} else {
|
|
1322
|
-
firstFocusableElement.focus();
|
|
1323
|
-
}
|
|
1324
|
-
});
|
|
1325
|
-
}
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
2254
|
/**
|
|
1329
2255
|
* @private
|
|
1330
2256
|
* @returns {void}
|
|
@@ -1391,9 +2317,8 @@ class ComponentBase extends i$2 {
|
|
|
1391
2317
|
return this.modal
|
|
1392
2318
|
? u``
|
|
1393
2319
|
: u`
|
|
1394
|
-
<${this.buttonTag} variant="
|
|
2320
|
+
<${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">
|
|
1395
2321
|
<${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
|
|
1396
|
-
<span class="util_displayHiddenVisually">Close</span>
|
|
1397
2322
|
</${this.buttonTag}>
|
|
1398
2323
|
`;
|
|
1399
2324
|
}
|
|
@@ -1414,7 +2339,14 @@ class ComponentBase extends i$2 {
|
|
|
1414
2339
|
return u`
|
|
1415
2340
|
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
|
|
1416
2341
|
|
|
1417
|
-
<div
|
|
2342
|
+
<div
|
|
2343
|
+
role="dialog"
|
|
2344
|
+
id="dialog"
|
|
2345
|
+
class="${e(contentClasses)}"
|
|
2346
|
+
part="dialog"
|
|
2347
|
+
aria-labelledby="dialog-header"
|
|
2348
|
+
aria-describedby="dialog-content"
|
|
2349
|
+
@transitionend="${this.onDialogTransitionEnd}">
|
|
1418
2350
|
${this.unformatted
|
|
1419
2351
|
? u`
|
|
1420
2352
|
<slot name="content"></slot>
|
|
@@ -1422,12 +2354,12 @@ class ComponentBase extends i$2 {
|
|
|
1422
2354
|
`
|
|
1423
2355
|
: u`
|
|
1424
2356
|
<div class="dialog-header" part="dialog-header">
|
|
1425
|
-
<h1 class="heading heading
|
|
1426
|
-
<slot name="header">Default header
|
|
2357
|
+
<h1 class="heading heading-lg util_stackMarginNone--top" id="dialog-header">
|
|
2358
|
+
<slot name="header">Default header...</slot>
|
|
1427
2359
|
</h1>
|
|
1428
2360
|
${this.getCloseButton()}
|
|
1429
2361
|
</div>
|
|
1430
|
-
<div class="dialog-content" part="dialog-content">
|
|
2362
|
+
<div class="dialog-content body-default" part="dialog-content">
|
|
1431
2363
|
<slot name="content"></slot>
|
|
1432
2364
|
</div>
|
|
1433
2365
|
<div class="dialog-footer" id="footerWrapper" part="dialog-footer">
|
|
@@ -1479,7 +2411,7 @@ class AuroDialog extends ComponentBase {
|
|
|
1479
2411
|
*
|
|
1480
2412
|
*/
|
|
1481
2413
|
static register(name = "auro-dialog") {
|
|
1482
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
|
|
2414
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDialog);
|
|
1483
2415
|
}
|
|
1484
2416
|
}
|
|
1485
2417
|
|