@aurodesignsystem/auro-formkit 4.0.0-rc-676.1 → 4.0.0-rc-1002.1

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.
Files changed (172) hide show
  1. package/CHANGELOG.md +180 -1
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
@@ -12,24 +12,37 @@ const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{c
12
12
  */
13
13
  const a$1=Symbol.for(""),o$4=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$4(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$1=n$2(x);
14
14
 
15
+ /**
16
+ * @license
17
+ * Copyright 2017 Google LLC
18
+ * SPDX-License-Identifier: BSD-3-Clause
19
+ */
20
+ const t$1={ATTRIBUTE:1},e$3=t=>(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
21
+
22
+ /**
23
+ * @license
24
+ * Copyright 2018 Google LLC
25
+ * SPDX-License-Identifier: BSD-3-Clause
26
+ */const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.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}});
27
+
15
28
  /**
16
29
  * @license
17
30
  * Copyright 2019 Google LLC
18
31
  * SPDX-License-Identifier: BSD-3-Clause
19
32
  */
20
- const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
33
+ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
21
34
 
22
35
  /**
23
36
  * @license
24
37
  * Copyright 2017 Google LLC
25
38
  * SPDX-License-Identifier: BSD-3-Clause
26
- */const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$2(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.0");
39
+ */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
27
40
 
28
41
  /**
29
42
  * @license
30
43
  * Copyright 2017 Google LLC
31
44
  * SPDX-License-Identifier: BSD-3-Clause
32
- */const s=globalThis;let i$1 = class i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.0");
45
+ */const s=globalThis;class i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
33
46
 
34
47
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
35
48
  // See LICENSE in the project root for license information.
@@ -621,16 +634,22 @@ const flip$1 = function (options) {
621
634
  const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
622
635
  const nextPlacement = placements[nextIndex];
623
636
  if (nextPlacement) {
624
- // Try next placement and re-run the lifecycle.
625
- return {
626
- data: {
627
- index: nextIndex,
628
- overflows: overflowsData
629
- },
630
- reset: {
631
- placement: nextPlacement
632
- }
633
- };
637
+ const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
638
+ if (!ignoreCrossAxisOverflow ||
639
+ // We leave the current main axis only if every placement on that axis
640
+ // overflows the main axis.
641
+ overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
642
+ // Try next placement and re-run the lifecycle.
643
+ return {
644
+ data: {
645
+ index: nextIndex,
646
+ overflows: overflowsData
647
+ },
648
+ reset: {
649
+ placement: nextPlacement
650
+ }
651
+ };
652
+ }
634
653
  }
635
654
 
636
655
  // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1282,6 +1301,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1282
1301
  scrollTop: 0
1283
1302
  };
1284
1303
  const offsets = createCoords(0);
1304
+
1305
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1306
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1307
+ function setLeftRTLScrollbarOffset() {
1308
+ offsets.x = getWindowScrollBarX(documentElement);
1309
+ }
1285
1310
  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1286
1311
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1287
1312
  scroll = getNodeScroll(offsetParent);
@@ -1291,11 +1316,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1291
1316
  offsets.x = offsetRect.x + offsetParent.clientLeft;
1292
1317
  offsets.y = offsetRect.y + offsetParent.clientTop;
1293
1318
  } else if (documentElement) {
1294
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1295
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1296
- offsets.x = getWindowScrollBarX(documentElement);
1319
+ setLeftRTLScrollbarOffset();
1297
1320
  }
1298
1321
  }
1322
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
1323
+ setLeftRTLScrollbarOffset();
1324
+ }
1299
1325
  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1300
1326
  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1301
1327
  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1472,7 +1498,7 @@ function observeMove(element, onMove) {
1472
1498
  // Handle <iframe>s
1473
1499
  root: root.ownerDocument
1474
1500
  });
1475
- } catch (e) {
1501
+ } catch (_e) {
1476
1502
  io = new IntersectionObserver(handleObserve, options);
1477
1503
  }
1478
1504
  io.observe(element);
@@ -1704,7 +1730,7 @@ class AuroFloatingUI {
1704
1730
  */
1705
1731
  mirrorSize() {
1706
1732
  // mirror the boxsize from bibSizer
1707
- if (this.element.bibSizer) {
1733
+ if (this.element.bibSizer && this.element.matchWidth) {
1708
1734
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1709
1735
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
1710
1736
  if (sizerStyle.width !== '0px') {
@@ -1840,6 +1866,7 @@ class AuroFloatingUI {
1840
1866
  this.element.bib.style.left = "0px";
1841
1867
  this.element.bib.style.width = '';
1842
1868
  this.element.bib.style.height = '';
1869
+ this.element.style.contain = '';
1843
1870
 
1844
1871
  // reset the size that was mirroring `size` css-part
1845
1872
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -1864,6 +1891,7 @@ class AuroFloatingUI {
1864
1891
  this.element.bib.style.position = '';
1865
1892
  this.element.bib.removeAttribute('isfullscreen');
1866
1893
  this.element.isBibFullscreen = false;
1894
+ this.element.style.contain = 'layout';
1867
1895
  }
1868
1896
 
1869
1897
  const isChanged = this.strategy && this.strategy !== value;
@@ -1916,22 +1944,16 @@ class AuroFloatingUI {
1916
1944
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
1917
1945
  return;
1918
1946
  }
1919
-
1947
+
1920
1948
  // if fullscreen bib is in fullscreen mode, do not close
1921
1949
  if (this.element.bib.hasAttribute('isfullscreen')) {
1922
1950
  return;
1923
1951
  }
1924
1952
 
1925
- this.hideBib();
1953
+ this.hideBib("keydown");
1926
1954
  }
1927
1955
 
1928
1956
  setupHideHandlers() {
1929
- this.preventFocusLoseOnBibClick = (event) => {
1930
- event.preventDefault();
1931
- event.stopPropagation();
1932
- };
1933
- this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
1934
-
1935
1957
  // Define handlers & store references
1936
1958
  this.focusHandler = () => this.handleFocusLoss();
1937
1959
 
@@ -1947,7 +1969,7 @@ class AuroFloatingUI {
1947
1969
  document.expandedAuroFormkitDropdown = null;
1948
1970
  document.expandedAuroFloater = this;
1949
1971
  } else {
1950
- this.hideBib();
1972
+ this.hideBib("click");
1951
1973
  }
1952
1974
  }
1953
1975
  };
@@ -1960,7 +1982,7 @@ class AuroFloatingUI {
1960
1982
  // if something else is open, let it handle itself
1961
1983
  return;
1962
1984
  }
1963
- this.hideBib();
1985
+ this.hideBib("keydown");
1964
1986
  }
1965
1987
  };
1966
1988
 
@@ -1981,11 +2003,6 @@ class AuroFloatingUI {
1981
2003
  cleanupHideHandlers() {
1982
2004
  // Remove event listeners if they exist
1983
2005
 
1984
- if (this.preventFocusLoseOnBibClick) {
1985
- this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
1986
- delete this.preventFocusLoseOnBibClick;
1987
- }
1988
-
1989
2006
  if (this.focusHandler) {
1990
2007
  document.removeEventListener('focusin', this.focusHandler);
1991
2008
  this.focusHandler = null;
@@ -2043,7 +2060,11 @@ class AuroFloatingUI {
2043
2060
  }
2044
2061
  }
2045
2062
 
2046
- hideBib() {
2063
+ /**
2064
+ * Hides the floating UI element.
2065
+ * @param {String} eventType - The event type that triggered the hiding action.
2066
+ */
2067
+ hideBib(eventType = "unknown") {
2047
2068
  if (!this.element.disabled && !this.element.noToggle) {
2048
2069
  this.lockScroll(false);
2049
2070
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2054,7 +2075,7 @@ class AuroFloatingUI {
2054
2075
  if (this.showing) {
2055
2076
  this.cleanupHideHandlers();
2056
2077
  this.showing = false;
2057
- this.dispatchEventDropdownToggle();
2078
+ this.dispatchEventDropdownToggle(eventType);
2058
2079
  }
2059
2080
  }
2060
2081
  document.expandedAuroFloater = null;
@@ -2063,11 +2084,13 @@ class AuroFloatingUI {
2063
2084
  /**
2064
2085
  * @private
2065
2086
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2087
+ * @param {String} eventType - The event type that triggered the toggle action.
2066
2088
  */
2067
- dispatchEventDropdownToggle() {
2089
+ dispatchEventDropdownToggle(eventType) {
2068
2090
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2069
2091
  detail: {
2070
2092
  expanded: this.showing,
2093
+ eventType: eventType || "unknown",
2071
2094
  },
2072
2095
  composed: true
2073
2096
  });
@@ -2077,7 +2100,7 @@ class AuroFloatingUI {
2077
2100
 
2078
2101
  handleClick() {
2079
2102
  if (this.element.isPopoverVisible) {
2080
- this.hideBib();
2103
+ this.hideBib("click");
2081
2104
  } else {
2082
2105
  this.showBib();
2083
2106
  }
@@ -2100,8 +2123,9 @@ class AuroFloatingUI {
2100
2123
  // Space is included as it's expected behavior for interactive elements
2101
2124
 
2102
2125
  const origin = event.composedPath()[0];
2103
- if (event.key === 'Enter' || ((!origin || origin.tagName !== "INPUT") && event.key === ' ')) {
2104
- event.preventDefault(); // Prevent page scroll on space
2126
+ if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
2127
+
2128
+ event.preventDefault();
2105
2129
  this.handleClick();
2106
2130
  }
2107
2131
  break;
@@ -2112,7 +2136,7 @@ class AuroFloatingUI {
2112
2136
  break;
2113
2137
  case 'mouseleave':
2114
2138
  if (this.element.hoverToggle) {
2115
- this.hideBib();
2139
+ this.hideBib("mouseleave");
2116
2140
  }
2117
2141
  break;
2118
2142
  case 'focus':
@@ -2255,6 +2279,267 @@ class AuroFloatingUI {
2255
2279
  }
2256
2280
  }
2257
2281
 
2282
+ // Selectors for focusable elements
2283
+ const FOCUSABLE_SELECTORS = [
2284
+ 'a[href]',
2285
+ 'button:not([disabled])',
2286
+ 'textarea:not([disabled])',
2287
+ 'input:not([disabled])',
2288
+ 'select:not([disabled])',
2289
+ '[role="tab"]:not([disabled])',
2290
+ '[role="link"]:not([disabled])',
2291
+ '[role="button"]:not([disabled])',
2292
+ '[tabindex]:not([tabindex="-1"])',
2293
+ '[contenteditable]:not([contenteditable="false"])'
2294
+ ];
2295
+
2296
+ // List of custom components that are known to be focusable
2297
+ const FOCUSABLE_COMPONENTS = [
2298
+ 'auro-checkbox',
2299
+ 'auro-radio',
2300
+ 'auro-dropdown',
2301
+ 'auro-button',
2302
+ 'auro-combobox',
2303
+ 'auro-input',
2304
+ 'auro-counter',
2305
+ 'auro-menu',
2306
+ 'auro-select',
2307
+ 'auro-datepicker',
2308
+ 'auro-hyperlink',
2309
+ 'auro-accordion',
2310
+ ];
2311
+
2312
+ /**
2313
+ * Determines if a given element is a custom focusable component.
2314
+ * Returns true if the element matches a known focusable component and is not disabled.
2315
+ *
2316
+ * @param {HTMLElement} element The element to check for focusability.
2317
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
2318
+ */
2319
+ function isFocusableComponent(element) {
2320
+ const componentName = element.tagName.toLowerCase();
2321
+
2322
+ // Guard Clause: Element is a focusable component
2323
+ if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
2324
+
2325
+ // Guard Clause: Element is not disabled
2326
+ if (element.hasAttribute('disabled')) return false;
2327
+
2328
+ // Guard Clause: The element is a hyperlink and has no href attribute
2329
+ if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
2330
+
2331
+ // If all guard clauses pass, the element is a focusable component
2332
+ return true;
2333
+ }
2334
+
2335
+ /**
2336
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2337
+ * Returns a unique, ordered array of elements that can receive focus.
2338
+ *
2339
+ * @param {HTMLElement} container The container to search within
2340
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2341
+ */
2342
+ function getFocusableElements(container) {
2343
+ // Get elements in DOM order by walking the tree
2344
+ const orderedFocusableElements = [];
2345
+
2346
+ // Define a recursive function to collect focusable elements in DOM order
2347
+ const collectFocusableElements = (root) => {
2348
+ // Check if current element is focusable
2349
+ if (root.nodeType === Node.ELEMENT_NODE) {
2350
+ // Check if this is a custom component that is focusable
2351
+ const isComponentFocusable = isFocusableComponent(root);
2352
+
2353
+ if (isComponentFocusable) {
2354
+ // Add the component itself as a focusable element and don't traverse its shadow DOM
2355
+ orderedFocusableElements.push(root);
2356
+ return; // Skip traversing inside this component
2357
+ }
2358
+
2359
+ // Check if the element itself matches any selector
2360
+ for (const selector of FOCUSABLE_SELECTORS) {
2361
+ if (root.matches?.(selector)) {
2362
+ orderedFocusableElements.push(root);
2363
+ break; // Once we know it's focusable, no need to check other selectors
2364
+ }
2365
+ }
2366
+
2367
+ // Process shadow DOM only for non-Auro components
2368
+ if (root.shadowRoot) {
2369
+ // Process shadow DOM children in order
2370
+ if (root.shadowRoot.children) {
2371
+ Array.from(root.shadowRoot.children).forEach(child => {
2372
+ collectFocusableElements(child);
2373
+ });
2374
+ }
2375
+ }
2376
+
2377
+ // Process slots and their assigned nodes in order
2378
+ if (root.tagName === 'SLOT') {
2379
+ const assignedNodes = root.assignedNodes({ flatten: true });
2380
+ for (const node of assignedNodes) {
2381
+ collectFocusableElements(node);
2382
+ }
2383
+ } else {
2384
+ // Process light DOM children in order
2385
+ if (root.children) {
2386
+ Array.from(root.children).forEach(child => {
2387
+ collectFocusableElements(child);
2388
+ });
2389
+ }
2390
+ }
2391
+ }
2392
+ };
2393
+
2394
+ // Start the traversal from the container
2395
+ collectFocusableElements(container);
2396
+
2397
+ // Remove duplicates that might have been collected through different paths
2398
+ // while preserving order
2399
+ const uniqueElements = [];
2400
+ const seen = new Set();
2401
+
2402
+ for (const element of orderedFocusableElements) {
2403
+ if (!seen.has(element)) {
2404
+ seen.add(element);
2405
+ uniqueElements.push(element);
2406
+ }
2407
+ }
2408
+
2409
+ return uniqueElements;
2410
+ }
2411
+
2412
+ /**
2413
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
2414
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
2415
+ */
2416
+ class FocusTrap {
2417
+ /**
2418
+ * Creates a new FocusTrap instance for the given container element.
2419
+ * Initializes event listeners and prepares the container for focus management.
2420
+ *
2421
+ * @param {HTMLElement} container The DOM element to trap focus within.
2422
+ * @throws {Error} If the provided container is not a valid HTMLElement.
2423
+ */
2424
+ constructor(container) {
2425
+ if (!container || !(container instanceof HTMLElement)) {
2426
+ throw new Error("FocusTrap requires a valid HTMLElement.");
2427
+ }
2428
+
2429
+ this.container = container;
2430
+ this.tabDirection = 'forward'; // or 'backward'
2431
+
2432
+ this._init();
2433
+ }
2434
+
2435
+ /**
2436
+ * Initializes the focus trap by setting up event listeners and attributes on the container.
2437
+ * Prepares the container for focus management, including support for shadow DOM and inert attributes.
2438
+ *
2439
+ * @private
2440
+ */
2441
+ _init() {
2442
+
2443
+ // Add inert attribute to prevent focusing programmatically as well (if supported)
2444
+ if ('inert' in HTMLElement.prototype) {
2445
+ this.container.inert = false; // Ensure the container isn't inert
2446
+ this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
2447
+ }
2448
+
2449
+ // Track tab direction
2450
+ this.container.addEventListener('keydown', this._onKeydown);
2451
+ }
2452
+
2453
+ /**
2454
+ * Handles keydown events to manage tab navigation within the container.
2455
+ * Ensures that focus wraps around when reaching the first or last focusable element.
2456
+ *
2457
+ * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
2458
+ * @private
2459
+ */
2460
+ _onKeydown = (e) => {
2461
+
2462
+ if (e.key === 'Tab') {
2463
+
2464
+ // Set the tab direction based on the key pressed
2465
+ this.tabDirection = e.shiftKey ? 'backward' : 'forward';
2466
+
2467
+ // Get the active element(s) in the document and shadow root
2468
+ // This will include the active element in the shadow DOM if it exists
2469
+ // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
2470
+ let activeElement = document.activeElement;
2471
+ const actives = [activeElement];
2472
+ while (activeElement?.shadowRoot?.activeElement) {
2473
+ actives.push(activeElement.shadowRoot.activeElement);
2474
+ activeElement = activeElement.shadowRoot.activeElement;
2475
+ }
2476
+
2477
+ // Update the focusable elements
2478
+ const focusables = this._getFocusableElements();
2479
+
2480
+ // If we're at either end of the focusable elements, wrap around to the other end
2481
+ const focusIndex =
2482
+ (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
2483
+ ? focusables.length - 1
2484
+ : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
2485
+ ? 0
2486
+ : null;
2487
+
2488
+ if (focusIndex !== null) {
2489
+ focusables[focusIndex].focus();
2490
+ e.preventDefault(); // Prevent default tab behavior
2491
+ e.stopPropagation(); // Stop the event from bubbling up
2492
+ }
2493
+ }
2494
+ };
2495
+
2496
+ /**
2497
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2498
+ * Returns a unique, ordered array of elements that can receive focus.
2499
+ *
2500
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2501
+ * @private
2502
+ */
2503
+ _getFocusableElements() {
2504
+ // Use the imported utility function to get focusable elements
2505
+ const elements = getFocusableElements(this.container);
2506
+
2507
+ // Filter out any elements with the 'focus-bookend' class
2508
+ return elements;
2509
+ }
2510
+
2511
+ /**
2512
+ * Moves focus to the first focusable element within the container.
2513
+ * Useful for setting initial focus when activating the focus trap.
2514
+ */
2515
+ focusFirstElement() {
2516
+ const focusables = this._getFocusableElements();
2517
+ if (focusables.length) focusables[0].focus();
2518
+ }
2519
+
2520
+ /**
2521
+ * Moves focus to the last focusable element within the container.
2522
+ * Useful for setting focus when deactivating or cycling focus in reverse.
2523
+ */
2524
+ focusLastElement() {
2525
+ const focusables = this._getFocusableElements();
2526
+ if (focusables.length) focusables[focusables.length - 1].focus();
2527
+ }
2528
+
2529
+ /**
2530
+ * Removes event listeners and attributes added by the focus trap.
2531
+ * Call this method to clean up when the focus trap is no longer needed.
2532
+ */
2533
+ disconnect() {
2534
+
2535
+ if (this.container.hasAttribute('data-focus-trap-container')) {
2536
+ this.container.removeAttribute('data-focus-trap-container');
2537
+ }
2538
+
2539
+ this.container.removeEventListener('keydown', this._onKeydown);
2540
+ }
2541
+ }
2542
+
2258
2543
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2259
2544
  // See LICENSE in the project root for license information.
2260
2545
 
@@ -2295,19 +2580,6 @@ class AuroDependencyVersioning {
2295
2580
  }
2296
2581
  }
2297
2582
 
2298
- /**
2299
- * @license
2300
- * Copyright 2017 Google LLC
2301
- * SPDX-License-Identifier: BSD-3-Clause
2302
- */
2303
- const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
2304
-
2305
- /**
2306
- * @license
2307
- * Copyright 2018 Google LLC
2308
- * SPDX-License-Identifier: BSD-3-Clause
2309
- */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}});
2310
-
2311
2583
  /**
2312
2584
  * @license
2313
2585
  * Copyright 2018 Google LLC
@@ -2324,7 +2596,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
2324
2596
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
2325
2597
  */
2326
2598
 
2327
- class AuroElement extends i$1 {
2599
+ let AuroElement$1 = class AuroElement extends i {
2328
2600
 
2329
2601
  // function to define props used within the scope of this component
2330
2602
  static get properties() {
@@ -2348,7 +2620,7 @@ class AuroElement extends i$1 {
2348
2620
 
2349
2621
  return 'false'
2350
2622
  }
2351
- }
2623
+ };
2352
2624
 
2353
2625
  var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
2354
2626
 
@@ -2380,7 +2652,7 @@ const cacheFetch = (uri, options = {}) => {
2380
2652
  return _fetchMap.get(uri);
2381
2653
  };
2382
2654
 
2383
- var styleCss$3 = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
2655
+ var styleCss$3 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
2384
2656
 
2385
2657
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2386
2658
  // See LICENSE in the project root for license information.
@@ -2392,7 +2664,7 @@ var styleCss$3 = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.u
2392
2664
  */
2393
2665
 
2394
2666
  // build the component class
2395
- class BaseIcon extends AuroElement {
2667
+ class BaseIcon extends AuroElement$1 {
2396
2668
  constructor() {
2397
2669
  super();
2398
2670
  this.onDark = false;
@@ -2422,7 +2694,7 @@ class BaseIcon extends AuroElement {
2422
2694
  }
2423
2695
 
2424
2696
  static get styles() {
2425
- return i$3`
2697
+ return i$2`
2426
2698
  ${styleCss$3}
2427
2699
  `;
2428
2700
  }
@@ -2464,9 +2736,9 @@ class BaseIcon extends AuroElement {
2464
2736
  }
2465
2737
  }
2466
2738
 
2467
- var tokensCss$2 = i$3`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
2739
+ var tokensCss$2 = i$2`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
2468
2740
 
2469
- var colorCss$3 = i$3`: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)}`;
2741
+ var colorCss$3 = i$2`: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)}`;
2470
2742
 
2471
2743
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2472
2744
  // See LICENSE in the project root for license information.
@@ -2585,7 +2857,8 @@ class AuroIcon extends BaseIcon {
2585
2857
  * Allows custom color to be set.
2586
2858
  */
2587
2859
  customColor: {
2588
- type: Boolean
2860
+ type: Boolean,
2861
+ reflect: true
2589
2862
  },
2590
2863
 
2591
2864
  /**
@@ -2624,9 +2897,9 @@ class AuroIcon extends BaseIcon {
2624
2897
  static get styles() {
2625
2898
  return [
2626
2899
  super.styles,
2627
- i$3`${tokensCss$2}`,
2628
- i$3`${styleCss$3}`,
2629
- i$3`${colorCss$3}`
2900
+ i$2`${tokensCss$2}`,
2901
+ i$2`${styleCss$3}`,
2902
+ i$2`${colorCss$3}`
2630
2903
  ];
2631
2904
  }
2632
2905
 
@@ -2660,8 +2933,12 @@ class AuroIcon extends BaseIcon {
2660
2933
  async firstUpdated() {
2661
2934
  await super.firstUpdated();
2662
2935
 
2663
- // Removes the SVG description for screenreader if ariaHidden is set to true
2664
- if (!this.hasAttribute('ariaHidden') && this.svg) {
2936
+ /**
2937
+ * icons provide a description for screen readers. Icon only instances Auro-button
2938
+ * depend on this description to provide context for the user using a screen reader.
2939
+ * Removes the SVG description for screen reader if ariaHidden is set to true.
2940
+ */
2941
+ if (this.hasAttribute('ariaHidden') && this.svg) {
2665
2942
  const svgDesc = this.svg.querySelector('desc');
2666
2943
 
2667
2944
  if (svgDesc) {
@@ -2685,7 +2962,7 @@ class AuroIcon extends BaseIcon {
2685
2962
  return x`
2686
2963
  <div class="componentWrapper">
2687
2964
  <div
2688
- class="${e(svgClasses)}"
2965
+ class="${e$2(svgClasses)}"
2689
2966
  title="${o(this.title || undefined)}">
2690
2967
  <span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
2691
2968
  ${this.customSvg ? x`
@@ -2697,7 +2974,7 @@ class AuroIcon extends BaseIcon {
2697
2974
  </span>
2698
2975
  </div>
2699
2976
 
2700
- <div class="${e(labelClasses)}">
2977
+ <div class="${e$2(labelClasses)}">
2701
2978
  <slot></slot>
2702
2979
  </div>
2703
2980
  </div>
@@ -2707,11 +2984,11 @@ class AuroIcon extends BaseIcon {
2707
2984
 
2708
2985
  var iconVersion = '6.1.2';
2709
2986
 
2710
- var styleCss$2 = i$3`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
2987
+ var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
2711
2988
 
2712
- var colorCss$2 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
2989
+ var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
2713
2990
 
2714
- var tokensCss$1 = i$3`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
2991
+ var tokensCss$1 = i$2`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
2715
2992
 
2716
2993
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2717
2994
  // See LICENSE in the project root for license information.
@@ -2731,8 +3008,8 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
2731
3008
  * @csspart bibContainer - Apply css to the bib container.
2732
3009
  */
2733
3010
 
2734
- class AuroDropdownBib extends i$1 {
2735
-
3011
+ class AuroDropdownBib extends i {
3012
+ // not extending AuroElement because Bib needs only `shape` prop
2736
3013
  constructor() {
2737
3014
  super();
2738
3015
 
@@ -2742,6 +3019,9 @@ class AuroDropdownBib extends i$1 {
2742
3019
  this._mobileBreakpointValue = undefined;
2743
3020
 
2744
3021
  AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
3022
+
3023
+ this.shape = "rounded";
3024
+ this.matchWidth = false;
2745
3025
  }
2746
3026
 
2747
3027
  static get styles() {
@@ -2779,6 +3059,15 @@ class AuroDropdownBib extends i$1 {
2779
3059
  reflect: true
2780
3060
  },
2781
3061
 
3062
+ /**
3063
+ * If declared, the bib width will match the trigger width.
3064
+ * @private
3065
+ */
3066
+ matchWidth: {
3067
+ type: Boolean,
3068
+ reflect: true
3069
+ },
3070
+
2782
3071
  /**
2783
3072
  * If declared, will apply border-radius to the bib.
2784
3073
  */
@@ -2792,6 +3081,11 @@ class AuroDropdownBib extends i$1 {
2792
3081
  */
2793
3082
  bibTemplate: {
2794
3083
  type: Object
3084
+ },
3085
+
3086
+ shape: {
3087
+ type: String,
3088
+ reflect: true
2795
3089
  }
2796
3090
  };
2797
3091
  }
@@ -2871,8 +3165,16 @@ class AuroDropdownBib extends i$1 {
2871
3165
 
2872
3166
  // function that renders the HTML and CSS into the scope of the component
2873
3167
  render() {
3168
+ const classes = {
3169
+ container: true
3170
+ };
3171
+
3172
+ // Since this class does not inherit from AuroElement, we apply the shape-related class within the `render` function,
3173
+ // mimicking the class naming convention used in AuroElement.resetShapeClasses.
3174
+ classes[`shape-${this.shape}`] = true;
3175
+
2874
3176
  return u$1`
2875
- <div class="container" part="bibContainer">
3177
+ <div class="${e$2(classes)}" part="bibContainer">
2876
3178
  <slot></slot>
2877
3179
  </div>
2878
3180
  `;
@@ -2881,15 +3183,25 @@ class AuroDropdownBib extends i$1 {
2881
3183
 
2882
3184
  var dropdownVersion = '3.0.0';
2883
3185
 
2884
- var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
3186
+ var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;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-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;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;border-width:2px;border-color:transparent;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;border-width:2px;border-color:transparent;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-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.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;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.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;border-width:2px;border-color:transparent;border-radius:0 36px 36px 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}`;
3187
+
3188
+ var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label,:host([onDark]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
3189
+
3190
+ var styleCss$1 = i$2`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
2885
3191
 
2886
- var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host([onDark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark]):focus-within,:host([onDark]):active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][common]),:host([onDark][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][common]) .trigger:focus-within,:host([onDark][common]) .trigger:active,:host([onDark][bordered]) .trigger:focus-within,:host([onDark][bordered]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([onDark][error]) .trigger:focus-within,:host([onDark][error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled][common]),:host([onDark][disabled][bordered]){--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
3192
+ var classicColorCss = i$2``;
2887
3193
 
2888
- var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
3194
+ var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
2889
3195
 
2890
- var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3196
+ var styleEmphasizedCss = i$2`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
2891
3197
 
2892
- var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
3198
+ var styleSnowflakeCss = i$2`:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .trigger,:host([layout*=snowflake]) .helpText{text-align:center}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
3199
+
3200
+ var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
3201
+
3202
+ var styleCss = i$2`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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, 1rem)}.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.875rem)}.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{position:relative;display:block}.helptext-wrapper{display:none}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3203
+
3204
+ var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
2893
3205
 
2894
3206
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2895
3207
  // See LICENSE in the project root for license information.
@@ -2967,10 +3279,8 @@ class AuroLibraryRuntimeUtils {
2967
3279
 
2968
3280
  /**
2969
3281
  * Displays help text or error messages within form elements - Internal Use Only.
2970
- *
2971
- * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
2972
3282
  */
2973
- class AuroHelpText extends i$1 {
3283
+ class AuroHelpText extends i {
2974
3284
 
2975
3285
  constructor() {
2976
3286
  super();
@@ -3084,7 +3394,7 @@ class AuroHelpText extends i$1 {
3084
3394
  // function that renders the HTML and CSS into the scope of the component
3085
3395
  render() {
3086
3396
  return x`
3087
- <div class="helptext-wrapper" ?visible="${this.hasTextContent}">
3397
+ <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
3088
3398
  <slot @slotchange=${this.handleSlotChange}></slot>
3089
3399
  </div>
3090
3400
  `;
@@ -3093,24 +3403,119 @@ class AuroHelpText extends i$1 {
3093
3403
 
3094
3404
  var helpTextVersion = '1.0.0';
3095
3405
 
3406
+ class AuroElement extends i {
3407
+ static get properties() {
3408
+ return {
3409
+
3410
+ /**
3411
+ * Defines the language of an element.
3412
+ * @default {'default'}
3413
+ */
3414
+ layout: {
3415
+ type: String,
3416
+ attribute: "layout",
3417
+ reflect: true
3418
+ },
3419
+
3420
+ shape: {
3421
+ type: String,
3422
+ attribute: "shape",
3423
+ reflect: true
3424
+ },
3425
+
3426
+ size: {
3427
+ type: String,
3428
+ attribute: "size",
3429
+ reflect: true
3430
+ },
3431
+
3432
+ onDark: {
3433
+ type: Boolean,
3434
+ attribute: "ondark",
3435
+ reflect: true
3436
+ }
3437
+ };
3438
+ }
3439
+
3440
+ resetShapeClasses() {
3441
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3442
+
3443
+ if (wrapper) {
3444
+ wrapper.classList.forEach((className) => {
3445
+ if (className.startsWith('shape-')) {
3446
+ wrapper.classList.remove(className);
3447
+ }
3448
+ });
3449
+
3450
+ if (this.shape && this.size) {
3451
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
3452
+ } else {
3453
+ wrapper.classList.add('shape-none');
3454
+ }
3455
+ }
3456
+
3457
+ }
3458
+
3459
+ resetLayoutClasses() {
3460
+ if (this.layout) {
3461
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3462
+
3463
+ if (wrapper) {
3464
+ wrapper.classList.forEach((className) => {
3465
+ if (className.startsWith('layout-')) {
3466
+ wrapper.classList.remove(className);
3467
+ }
3468
+ });
3469
+
3470
+ wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
3471
+ }
3472
+ }
3473
+ }
3474
+
3475
+ updateComponentArchitecture() {
3476
+ this.resetLayoutClasses();
3477
+ this.resetShapeClasses();
3478
+ }
3479
+
3480
+ updated(changedProperties) {
3481
+ if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
3482
+ this.updateComponentArchitecture();
3483
+ }
3484
+ }
3485
+
3486
+ // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
3487
+ // This will catch if an invalid layout value is passed in and render the default layout if so.
3488
+ render() {
3489
+ try {
3490
+ return this.renderLayout();
3491
+ } catch (error) {
3492
+ // failed to get the defined layout
3493
+ console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
3494
+
3495
+ // fallback to the default layout
3496
+ return this.getLayout('default');
3497
+ }
3498
+ }
3499
+ }
3500
+
3096
3501
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3097
3502
  // See LICENSE in the project root for license information.
3098
3503
 
3099
3504
 
3100
- /**
3101
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3505
+
3506
+ /*
3102
3507
  * @slot - Default slot for the popover content.
3103
- * @slot label - Defines the content of the label.
3104
3508
  * @slot helpText - Defines the content of the helpText.
3105
3509
  * @slot trigger - Defines the content of the trigger.
3106
3510
  * @csspart trigger - The trigger content container.
3107
3511
  * @csspart chevron - The collapsed/expanded state icon container.
3512
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
3108
3513
  * @csspart helpText - The helpText content container.
3109
3514
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
3110
3515
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
3111
3516
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
3112
3517
  */
3113
- class AuroDropdown extends i$1 {
3518
+ class AuroDropdown extends AuroElement {
3114
3519
  constructor() {
3115
3520
  super();
3116
3521
 
@@ -3119,26 +3524,33 @@ class AuroDropdown extends i$1 {
3119
3524
  this.matchWidth = false;
3120
3525
  this.noHideOnThisFocusLoss = false;
3121
3526
 
3122
- this.privateDefaults();
3527
+ this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3123
3528
 
3124
- /**
3125
- * @private
3126
- * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3127
- */
3128
- this.constructor.shadowRootOptions = {
3129
- ...i$1.shadowRootOptions,
3130
- delegatesFocus: true,
3131
- };
3529
+ // Layout Config
3530
+ this.layout = undefined;
3531
+ this.shape = undefined;
3532
+ this.size = undefined;
3132
3533
 
3133
- /**
3134
- * @private
3135
- */
3136
- this.triggerContentFocusable = false;
3534
+ this.parentBorder = false;
3137
3535
 
3138
- /**
3139
- * @private
3140
- */
3141
- this.showTriggerBorders = true;
3536
+ /** @private */
3537
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3538
+
3539
+ this.privateDefaults();
3540
+ }
3541
+
3542
+ /**
3543
+ * @private
3544
+ * @returns {object} Class definition for the wrapper element.
3545
+ */
3546
+ get commonWrapperClasses() {
3547
+ return {
3548
+ 'trigger': true,
3549
+ 'wrapper': true,
3550
+ 'hasFocus': this.hasFocus,
3551
+ 'simple': this.simple,
3552
+ 'parentBorder': this.parentBorder
3553
+ };
3142
3554
  }
3143
3555
 
3144
3556
  /**
@@ -3146,18 +3558,17 @@ class AuroDropdown extends i$1 {
3146
3558
  * @returns {void} Internal defaults.
3147
3559
  */
3148
3560
  privateDefaults() {
3149
- this.bordered = false;
3150
3561
  this.chevron = false;
3151
3562
  this.disabled = false;
3563
+ this.disableFocusTrap = false;
3152
3564
  this.error = false;
3153
- this.inset = false;
3154
- this.rounded = false;
3155
3565
  this.tabIndex = 0;
3156
3566
  this.noToggle = false;
3157
- this.a11yAutocomplete = 'none';
3158
- this.labeled = true;
3159
- this.a11yRole = 'combobox';
3567
+ this.a11yRole = 'button';
3160
3568
  this.onDark = false;
3569
+ this.showTriggerBorders = true;
3570
+ this.triggerContentFocusable = false;
3571
+ this.simple = false;
3161
3572
 
3162
3573
  // floaterConfig
3163
3574
  this.placement = 'bottom-start';
@@ -3165,6 +3576,15 @@ class AuroDropdown extends i$1 {
3165
3576
  this.noFlip = false;
3166
3577
  this.autoPlacement = false;
3167
3578
 
3579
+ /**
3580
+ * @private
3581
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3582
+ */
3583
+ this.constructor.shadowRootOptions = {
3584
+ ...i.shadowRootOptions,
3585
+ delegatesFocus: true,
3586
+ };
3587
+
3168
3588
  /**
3169
3589
  * @private
3170
3590
  */
@@ -3239,6 +3659,18 @@ class AuroDropdown extends i$1 {
3239
3659
  this.floater.showBib();
3240
3660
  }
3241
3661
 
3662
+ /**
3663
+ * When bib is open, focus on the first element inside of bib.
3664
+ * If not, trigger element will get focus.
3665
+ */
3666
+ focus() {
3667
+ if (this.isPopoverVisible && this.focusTrap) {
3668
+ this.focusTrap.focusFirstElement();
3669
+ } else {
3670
+ this.trigger.focus();
3671
+ }
3672
+ }
3673
+
3242
3674
  // function to define props used within the scope of this component
3243
3675
  static get properties() {
3244
3676
  return {
@@ -3252,10 +3684,19 @@ class AuroDropdown extends i$1 {
3252
3684
  reflect: true
3253
3685
  },
3254
3686
 
3687
+ /**
3688
+ * If declared, the dropdown will only show by calling the API .show() public method.
3689
+ * @default false
3690
+ */
3691
+ disableEventShow: {
3692
+ type: Boolean,
3693
+ reflect: true
3694
+ },
3695
+
3255
3696
  /**
3256
3697
  * If declared, applies a border around the trigger slot.
3257
3698
  */
3258
- bordered: {
3699
+ simple: {
3259
3700
  type: Boolean,
3260
3701
  reflect: true
3261
3702
  },
@@ -3270,17 +3711,17 @@ class AuroDropdown extends i$1 {
3270
3711
  },
3271
3712
 
3272
3713
  /**
3273
- * If declared, the dropdown will be styled with the common theme.
3714
+ * If declared, the dropdown is not interactive.
3274
3715
  */
3275
- common: {
3716
+ disabled: {
3276
3717
  type: Boolean,
3277
3718
  reflect: true
3278
3719
  },
3279
3720
 
3280
3721
  /**
3281
- * If declared, the dropdown is not interactive.
3722
+ * If declared, the focus trap inside of bib will be turned off.
3282
3723
  */
3283
- disabled: {
3724
+ disableFocusTrap: {
3284
3725
  type: Boolean,
3285
3726
  reflect: true
3286
3727
  },
@@ -3303,7 +3744,7 @@ class AuroDropdown extends i$1 {
3303
3744
  },
3304
3745
 
3305
3746
  /**
3306
- * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
3747
+ * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
3307
3748
  */
3308
3749
  error: {
3309
3750
  type: Boolean,
@@ -3311,25 +3752,16 @@ class AuroDropdown extends i$1 {
3311
3752
  },
3312
3753
 
3313
3754
  /**
3314
- * If declared, the bib will display when focus is applied to the trigger.
3755
+ * Contains the help text message for the current validity error.
3315
3756
  */
3316
- focusShow: {
3317
- type: Boolean,
3318
- reflect: true
3757
+ errorMessage: {
3758
+ type: String
3319
3759
  },
3320
3760
 
3321
3761
  /**
3322
- * Makes the trigger to be full width of its parent container.
3323
- */
3324
- fluid: {
3325
- type: Boolean,
3326
- reflect: true
3327
- },
3328
-
3329
- /**
3330
- * If declared, will apply padding around trigger slot content.
3762
+ * If declared, the bib will display when focus is applied to the trigger.
3331
3763
  */
3332
- inset: {
3764
+ focusShow: {
3333
3765
  type: Boolean,
3334
3766
  reflect: true
3335
3767
  },
@@ -3338,7 +3770,9 @@ class AuroDropdown extends i$1 {
3338
3770
  * If true, the dropdown bib is displayed.
3339
3771
  */
3340
3772
  isPopoverVisible: {
3341
- type: Boolean
3773
+ type: Boolean,
3774
+ reflect: true,
3775
+ attribute: 'open'
3342
3776
  },
3343
3777
 
3344
3778
  /**
@@ -3378,10 +3812,10 @@ class AuroDropdown extends i$1 {
3378
3812
  },
3379
3813
 
3380
3814
  /**
3381
- * Defines if there is a label preset.
3815
+ * Defines if the trigger should size based on the parent element providing the border UI.
3382
3816
  * @private
3383
3817
  */
3384
- labeled: {
3818
+ parentBorder: {
3385
3819
  type: Boolean,
3386
3820
  reflect: true
3387
3821
  },
@@ -3437,6 +3871,9 @@ class AuroDropdown extends i$1 {
3437
3871
  reflect: true
3438
3872
  },
3439
3873
 
3874
+ /**
3875
+ * If declared, and a function is set, that function will execute when the slot content is updated.
3876
+ */
3440
3877
  onSlotChange: {
3441
3878
  type: Function,
3442
3879
  reflect: false
@@ -3444,11 +3881,6 @@ class AuroDropdown extends i$1 {
3444
3881
 
3445
3882
  /**
3446
3883
  * Position where the bib should appear relative to the trigger.
3447
- * Accepted values:
3448
- * "top" | "right" | "bottom" | "left" |
3449
- * "bottom-start" | "top-start" | "top-end" |
3450
- * "right-start" | "right-end" | "bottom-end" |
3451
- * "left-start" | "left-end"
3452
3884
  * @default bottom-start
3453
3885
  */
3454
3886
  placement: {
@@ -3456,14 +3888,6 @@ class AuroDropdown extends i$1 {
3456
3888
  reflect: true
3457
3889
  },
3458
3890
 
3459
- /**
3460
- * If declared, will apply border-radius to trigger and default slots.
3461
- */
3462
- rounded: {
3463
- type: Boolean,
3464
- reflect: true
3465
- },
3466
-
3467
3891
  /**
3468
3892
  * @private
3469
3893
  */
@@ -3478,23 +3902,27 @@ class AuroDropdown extends i$1 {
3478
3902
  type: String || undefined,
3479
3903
  attribute: false,
3480
3904
  reflect: false
3481
- },
3482
-
3483
- /**
3484
- * The value for the aria-autocomplete attribute of the trigger element.
3485
- */
3486
- a11yAutocomplete: {
3487
- type: String,
3488
- attribute: false,
3489
3905
  }
3490
3906
  };
3491
3907
  }
3492
3908
 
3493
3909
  static get styles() {
3494
3910
  return [
3495
- colorCss$1,
3496
3911
  styleCss$1,
3497
- tokensCss$1
3912
+ tokensCss$1,
3913
+ colorCss$1,
3914
+
3915
+ // default layout
3916
+ classicColorCss,
3917
+ classicLayoutCss,
3918
+
3919
+ // emphasized layout
3920
+ styleEmphasizedCss,
3921
+
3922
+ // snowflake layout
3923
+ styleSnowflakeCss,
3924
+
3925
+ shapeSizeCss
3498
3926
  ];
3499
3927
  }
3500
3928
 
@@ -3530,6 +3958,7 @@ class AuroDropdown extends i$1 {
3530
3958
  }
3531
3959
 
3532
3960
  updated(changedProperties) {
3961
+ super.updated(changedProperties);
3533
3962
  this.floater.handleUpdate(changedProperties);
3534
3963
 
3535
3964
  // Note: `disabled` is not a breakpoint (it is not a screen size),
@@ -3539,17 +3968,31 @@ class AuroDropdown extends i$1 {
3539
3968
  }
3540
3969
 
3541
3970
  // when trigger's content is changed without any attribute or node change,
3542
- // `requestUpdate` needs to be called to update hasTriggerContnet
3971
+ // `requestUpdate` needs to be called to update hasTriggerContent
3543
3972
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3544
3973
  this.handleTriggerContentSlotChange();
3545
3974
  }
3975
+ }
3546
3976
 
3977
+ /**
3978
+ * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
3979
+ * @private
3980
+ * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
3981
+ */
3982
+ handleDropdownToggle(event) {
3983
+ this.updateFocusTrap();
3984
+ this.isPopoverVisible = event.detail.expanded;
3985
+ const eventType = event.detail.eventType || "unknown";
3986
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3987
+ this.trigger.focus();
3988
+ }
3547
3989
  }
3548
3990
 
3549
3991
  firstUpdated() {
3550
3992
 
3551
3993
  // Configure the floater to, this will generate the ID for the bib
3552
3994
  this.floater.configure(this, 'auroDropdown');
3995
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3553
3996
 
3554
3997
  /**
3555
3998
  * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -3567,6 +4010,13 @@ class AuroDropdown extends i$1 {
3567
4010
 
3568
4011
  // Add the tag name as an attribute if it is different than the component name
3569
4012
  this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
4013
+
4014
+ this.trigger.addEventListener('click', () => {
4015
+ this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
4016
+ bubbles: true,
4017
+ composed: true
4018
+ }));
4019
+ });
3570
4020
  }
3571
4021
 
3572
4022
  /**
@@ -3601,66 +4051,47 @@ class AuroDropdown extends i$1 {
3601
4051
  }
3602
4052
 
3603
4053
  /**
3604
- * Determines if the element or any children are focusable.
4054
+ * Function to support @focusin event.
3605
4055
  * @private
3606
- * @param {HTMLElement} element - Element to check.
3607
- * @returns {Boolean} - True if the element or any children are focusable.
4056
+ * @return {void}
3608
4057
  */
3609
- containsFocusableElement(element) {
3610
- this.showTriggerBorders = true;
3611
-
3612
- const nodes = [
3613
- element,
3614
- ...element.children
3615
- ];
3616
-
3617
- const focusableElements = [
3618
- 'a',
3619
- 'auro-hyperlink',
3620
- 'button',
3621
- 'auro-button',
3622
- 'input',
3623
- 'auro-input',
3624
- ];
3625
-
3626
- const focusableElementsThatNeedBorders = ['auro-input'];
3627
-
3628
- const result = nodes.some((node) => {
3629
- const tagName = node.tagName.toLowerCase();
3630
-
3631
- if (node.tabIndex > -1) {
3632
- return true;
3633
- }
3634
-
3635
- if (focusableElements.includes(tagName)) {
3636
- if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
3637
- return true;
3638
- }
3639
- if (!node.hasAttribute('disabled')) {
3640
- return true;
3641
- }
3642
- }
3643
-
3644
- if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
3645
- return true;
3646
- }
4058
+ handleFocusin() {
4059
+ this.hasFocus = true;
4060
+ }
3647
4061
 
3648
- return false;
3649
- });
4062
+ /**
4063
+ * @private
4064
+ */
4065
+ updateFocusTrap() {
4066
+ // If the dropdown is open, create a focus trap and focus the first element
4067
+ if (this.isPopoverVisible && !this.disableFocusTrap) {
4068
+ this.focusTrap = new FocusTrap(this.bibContent);
4069
+ this.focusTrap.focusFirstElement();
4070
+ return;
4071
+ }
3650
4072
 
3651
- if (result) {
3652
- this.showTriggerBorders = !nodes.some((node) => {
3653
- const tagName = node.tagName.toLowerCase();
3654
- return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
3655
- });
4073
+ // Guard Clause: Ensure there is a focus trap currently active before continuing
4074
+ if (!this.focusTrap) {
4075
+ return;
3656
4076
  }
3657
4077
 
3658
- return result;
4078
+ // If the dropdown is not open, disconnect the focus trap if it exists
4079
+ this.focusTrap.disconnect();
4080
+ this.focusTrap = undefined;
3659
4081
  }
3660
4082
 
3661
4083
  /**
4084
+ * Function to support @focusout event.
3662
4085
  * @private
4086
+ * @return {void}
4087
+ */
4088
+ handleFocusout() {
4089
+ this.hasFocus = false;
4090
+ }
4091
+
4092
+ /**
3663
4093
  * Creates and dispatches a duplicate focus event on the trigger element.
4094
+ * @private
3664
4095
  * @param {Event} event - The original focus event.
3665
4096
  */
3666
4097
  bindFocusEventToTrigger(event) {
@@ -3673,9 +4104,9 @@ class AuroDropdown extends i$1 {
3673
4104
  }
3674
4105
 
3675
4106
  /**
3676
- * @private
3677
4107
  * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
3678
4108
  * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
4109
+ * @private
3679
4110
  */
3680
4111
  setupTriggerFocusEventBinding() {
3681
4112
  if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
@@ -3751,14 +4182,13 @@ class AuroDropdown extends i$1 {
3751
4182
  * @returns {void}
3752
4183
  */
3753
4184
  handleTriggerContentSlotChange(event) {
3754
-
3755
4185
  this.floater.handleTriggerTabIndex();
3756
4186
 
3757
4187
  // Get the trigger
3758
4188
  const trigger = this.shadowRoot.querySelector('#trigger');
3759
4189
 
3760
4190
  // Get the trigger slot
3761
- const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
4191
+ const triggerSlot = this.shadowRoot.querySelector('.triggerContentWrapper slot');
3762
4192
 
3763
4193
  // If there's a trigger slot
3764
4194
  if (triggerSlot) {
@@ -3769,8 +4199,8 @@ class AuroDropdown extends i$1 {
3769
4199
  // If there are children
3770
4200
  if (triggerContentNodes) {
3771
4201
 
3772
- // See if any of them are focusable elemeents
3773
- this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
4202
+ // See if any of them are focusable elements
4203
+ this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
3774
4204
 
3775
4205
  // If any of them are focusable elements
3776
4206
  if (this.triggerContentFocusable) {
@@ -3821,7 +4251,6 @@ class AuroDropdown extends i$1 {
3821
4251
  *
3822
4252
  * @private
3823
4253
  * @method handleDefaultSlot
3824
- * @param {Event} event - The event object representing the slot change.
3825
4254
  * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
3826
4255
  */
3827
4256
  handleDefaultSlot() {
@@ -3832,56 +4261,33 @@ class AuroDropdown extends i$1 {
3832
4261
  }
3833
4262
 
3834
4263
  /**
4264
+ * Returns HTML for the common portion of the layouts.
3835
4265
  * @private
3836
- * @method handleLabelSlotChange
3837
- * @param {event} event - The event object representing the slot change.
3838
- * @description Handles the slot change event for the label slot.
4266
+ * @param {Object} helpTextClasses - Classes to apply to the help text container.
4267
+ * @returns {html} - Returns HTML.
3839
4268
  */
3840
- handleLabelSlotChange (event) {
3841
-
3842
- // Get the nodes from the event
3843
- const nodes = event.target.assignedNodes();
3844
-
3845
- // Guard clause for no nodes
3846
- if (!nodes) {
3847
- return;
3848
- }
3849
-
3850
- // Convert the nodes to a measurable array so we can get the length
3851
- const nodesArr = Array.from(nodes);
3852
-
3853
- // If the nodes array has a length, the dropdown is labeled
3854
- this.labeled = nodesArr.length > 0;
3855
- }
3856
-
3857
- // function that renders the HTML and CSS into the scope of the component
3858
- render() {
4269
+ renderBasicHtml(helpTextClasses) {
3859
4270
  return u$1`
3860
4271
  <div>
3861
4272
  <div
3862
4273
  id="trigger"
3863
- class="trigger"
3864
- part="trigger"
3865
- tabindex="${this.tabIndex}"
3866
- ?showBorder="${this.showTriggerBorders}"
4274
+ class="${e$2(this.commonWrapperClasses)}" part="wrapper"
4275
+ tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
3867
4276
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
3868
- aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
3869
- aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
4277
+ aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4278
+ aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
3870
4279
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
3871
- >
3872
- <div class="triggerContentWrapper">
3873
- <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
3874
- <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
3875
- </label>
3876
- <div class="triggerContent">
3877
- <slot
3878
- name="trigger"
3879
- @slotchange="${this.handleTriggerContentSlotChange}"></slot>
3880
- </div>
4280
+ @focusin="${this.handleFocusin}"
4281
+ @blur="${this.handleFocusOut}">
4282
+ <div class="triggerContentWrapper" id="triggerLabel">
4283
+ <slot
4284
+ name="trigger"
4285
+ @slotchange="${this.handleTriggerContentSlotChange}"></slot>
3881
4286
  </div>
3882
- ${this.chevron || this.common ? u$1`
4287
+ ${this.chevron ? u$1`
3883
4288
  <div
3884
4289
  id="showStateIcon"
4290
+ class="chevron"
3885
4291
  part="chevron">
3886
4292
  <${this.iconTag}
3887
4293
  category="interface"
@@ -3893,19 +4299,15 @@ class AuroDropdown extends i$1 {
3893
4299
  </div>
3894
4300
  ` : undefined }
3895
4301
  </div>
3896
- <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
4302
+ <div class="${e$2(helpTextClasses)}">
3897
4303
  <slot name="helpText"></slot>
3898
- </${this.helpTextTag}>
3899
-
4304
+ </div>
3900
4305
  <div id="bibSizer" part="size"></div>
3901
4306
  <${this.dropdownBibTag}
3902
4307
  id="bib"
4308
+ shape="${this.shape}"
3903
4309
  ?data-show="${this.isPopoverVisible}"
3904
- ?isfullscreen="${this.isBibFullscreen}"
3905
- ?common="${this.common}"
3906
- ?rounded="${this.common || this.rounded}"
3907
- ?inset="${this.common || this.inset}"
3908
- >
4310
+ ?isfullscreen="${this.isBibFullscreen}">
3909
4311
  <div class="slotContent">
3910
4312
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
3911
4313
  </div>
@@ -3913,6 +4315,83 @@ class AuroDropdown extends i$1 {
3913
4315
  </div>
3914
4316
  `;
3915
4317
  }
4318
+
4319
+ /**
4320
+ * Returns HTML for the classic layout. Does not support type="*".
4321
+ * @private
4322
+ * @returns {html} - Returns HTML for the classic layout.
4323
+ */
4324
+ renderLayoutClassic() {
4325
+ // TODO: check with Doug why this was never used?
4326
+ const helpTextClasses = {
4327
+ 'helpText': true
4328
+ };
4329
+
4330
+ return u$1`
4331
+ ${this.renderBasicHtml(helpTextClasses)}
4332
+ `;
4333
+ }
4334
+
4335
+ /**
4336
+ * Returns HTML for the snowflake layout. Does not support type="*".
4337
+ * @private
4338
+ * @returns {html} - Returns HTML for the snowflake layout.
4339
+ */
4340
+ renderLayoutSnowflake() {
4341
+ const helpTextClasses = {
4342
+ 'helpText': true,
4343
+ 'leftIndent': true,
4344
+ 'rightIndent': true
4345
+ };
4346
+
4347
+ return u$1`
4348
+ ${this.renderBasicHtml(helpTextClasses)}
4349
+ `;
4350
+ }
4351
+
4352
+ /**
4353
+ * Returns HTML for the emphasized layout. Does not support type="*".
4354
+ * @private
4355
+ * @returns {html} - Returns HTML for the emphasized layout.
4356
+ */
4357
+ renderLayoutEmphasized() {
4358
+ const helpTextClasses = {
4359
+ 'helpText': true,
4360
+ 'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
4361
+ 'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
4362
+ };
4363
+
4364
+ return u$1`
4365
+ ${this.renderBasicHtml(helpTextClasses)}
4366
+ `;
4367
+ }
4368
+
4369
+ /**
4370
+ * Logic to determine the layout of the component.
4371
+ * @private
4372
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
4373
+ * @returns {HTMLCollection} - Returns the HTML for the layout.
4374
+ */
4375
+ renderLayout(ForcedLayout) {
4376
+ const layout = ForcedLayout || this.layout;
4377
+
4378
+ switch (layout) {
4379
+ case 'emphasized':
4380
+ return this.renderLayoutEmphasized();
4381
+ case 'emphasized-left':
4382
+ return this.renderLayoutEmphasized();
4383
+ case 'emphasized-right':
4384
+ return this.renderLayoutEmphasized();
4385
+ case 'snowflake':
4386
+ return this.renderLayoutSnowflake();
4387
+ case 'snowflake-left':
4388
+ return this.renderLayoutSnowflake();
4389
+ case 'snowflake-right':
4390
+ return this.renderLayoutSnowflake();
4391
+ default:
4392
+ return this.renderLayoutClassic();
4393
+ }
4394
+ }
3916
4395
  }
3917
4396
 
3918
4397
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */