@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
@@ -37,24 +37,37 @@ const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{c
37
37
  */
38
38
  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);
39
39
 
40
+ /**
41
+ * @license
42
+ * Copyright 2017 Google LLC
43
+ * SPDX-License-Identifier: BSD-3-Clause
44
+ */
45
+ 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)}};
46
+
47
+ /**
48
+ * @license
49
+ * Copyright 2018 Google LLC
50
+ * SPDX-License-Identifier: BSD-3-Clause
51
+ */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}});
52
+
40
53
  /**
41
54
  * @license
42
55
  * Copyright 2019 Google LLC
43
56
  * SPDX-License-Identifier: BSD-3-Clause
44
57
  */
45
- 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;
58
+ 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;
46
59
 
47
60
  /**
48
61
  * @license
49
62
  * Copyright 2017 Google LLC
50
63
  * SPDX-License-Identifier: BSD-3-Clause
51
- */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");
64
+ */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");
52
65
 
53
66
  /**
54
67
  * @license
55
68
  * Copyright 2017 Google LLC
56
69
  * SPDX-License-Identifier: BSD-3-Clause
57
- */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");
70
+ */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");
58
71
 
59
72
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
60
73
  // See LICENSE in the project root for license information.
@@ -646,16 +659,22 @@ const flip$1 = function (options) {
646
659
  const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
647
660
  const nextPlacement = placements[nextIndex];
648
661
  if (nextPlacement) {
649
- // Try next placement and re-run the lifecycle.
650
- return {
651
- data: {
652
- index: nextIndex,
653
- overflows: overflowsData
654
- },
655
- reset: {
656
- placement: nextPlacement
657
- }
658
- };
662
+ const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
663
+ if (!ignoreCrossAxisOverflow ||
664
+ // We leave the current main axis only if every placement on that axis
665
+ // overflows the main axis.
666
+ overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
667
+ // Try next placement and re-run the lifecycle.
668
+ return {
669
+ data: {
670
+ index: nextIndex,
671
+ overflows: overflowsData
672
+ },
673
+ reset: {
674
+ placement: nextPlacement
675
+ }
676
+ };
677
+ }
659
678
  }
660
679
 
661
680
  // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1307,6 +1326,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1307
1326
  scrollTop: 0
1308
1327
  };
1309
1328
  const offsets = createCoords(0);
1329
+
1330
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1331
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1332
+ function setLeftRTLScrollbarOffset() {
1333
+ offsets.x = getWindowScrollBarX(documentElement);
1334
+ }
1310
1335
  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1311
1336
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1312
1337
  scroll = getNodeScroll(offsetParent);
@@ -1316,11 +1341,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1316
1341
  offsets.x = offsetRect.x + offsetParent.clientLeft;
1317
1342
  offsets.y = offsetRect.y + offsetParent.clientTop;
1318
1343
  } else if (documentElement) {
1319
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1320
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1321
- offsets.x = getWindowScrollBarX(documentElement);
1344
+ setLeftRTLScrollbarOffset();
1322
1345
  }
1323
1346
  }
1347
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
1348
+ setLeftRTLScrollbarOffset();
1349
+ }
1324
1350
  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1325
1351
  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1326
1352
  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1497,7 +1523,7 @@ function observeMove(element, onMove) {
1497
1523
  // Handle <iframe>s
1498
1524
  root: root.ownerDocument
1499
1525
  });
1500
- } catch (e) {
1526
+ } catch (_e) {
1501
1527
  io = new IntersectionObserver(handleObserve, options);
1502
1528
  }
1503
1529
  io.observe(element);
@@ -1729,7 +1755,7 @@ class AuroFloatingUI {
1729
1755
  */
1730
1756
  mirrorSize() {
1731
1757
  // mirror the boxsize from bibSizer
1732
- if (this.element.bibSizer) {
1758
+ if (this.element.bibSizer && this.element.matchWidth) {
1733
1759
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1734
1760
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
1735
1761
  if (sizerStyle.width !== '0px') {
@@ -1865,6 +1891,7 @@ class AuroFloatingUI {
1865
1891
  this.element.bib.style.left = "0px";
1866
1892
  this.element.bib.style.width = '';
1867
1893
  this.element.bib.style.height = '';
1894
+ this.element.style.contain = '';
1868
1895
 
1869
1896
  // reset the size that was mirroring `size` css-part
1870
1897
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -1889,6 +1916,7 @@ class AuroFloatingUI {
1889
1916
  this.element.bib.style.position = '';
1890
1917
  this.element.bib.removeAttribute('isfullscreen');
1891
1918
  this.element.isBibFullscreen = false;
1919
+ this.element.style.contain = 'layout';
1892
1920
  }
1893
1921
 
1894
1922
  const isChanged = this.strategy && this.strategy !== value;
@@ -1941,22 +1969,16 @@ class AuroFloatingUI {
1941
1969
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
1942
1970
  return;
1943
1971
  }
1944
-
1972
+
1945
1973
  // if fullscreen bib is in fullscreen mode, do not close
1946
1974
  if (this.element.bib.hasAttribute('isfullscreen')) {
1947
1975
  return;
1948
1976
  }
1949
1977
 
1950
- this.hideBib();
1978
+ this.hideBib("keydown");
1951
1979
  }
1952
1980
 
1953
1981
  setupHideHandlers() {
1954
- this.preventFocusLoseOnBibClick = (event) => {
1955
- event.preventDefault();
1956
- event.stopPropagation();
1957
- };
1958
- this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
1959
-
1960
1982
  // Define handlers & store references
1961
1983
  this.focusHandler = () => this.handleFocusLoss();
1962
1984
 
@@ -1972,7 +1994,7 @@ class AuroFloatingUI {
1972
1994
  document.expandedAuroFormkitDropdown = null;
1973
1995
  document.expandedAuroFloater = this;
1974
1996
  } else {
1975
- this.hideBib();
1997
+ this.hideBib("click");
1976
1998
  }
1977
1999
  }
1978
2000
  };
@@ -1985,7 +2007,7 @@ class AuroFloatingUI {
1985
2007
  // if something else is open, let it handle itself
1986
2008
  return;
1987
2009
  }
1988
- this.hideBib();
2010
+ this.hideBib("keydown");
1989
2011
  }
1990
2012
  };
1991
2013
 
@@ -2006,11 +2028,6 @@ class AuroFloatingUI {
2006
2028
  cleanupHideHandlers() {
2007
2029
  // Remove event listeners if they exist
2008
2030
 
2009
- if (this.preventFocusLoseOnBibClick) {
2010
- this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
2011
- delete this.preventFocusLoseOnBibClick;
2012
- }
2013
-
2014
2031
  if (this.focusHandler) {
2015
2032
  document.removeEventListener('focusin', this.focusHandler);
2016
2033
  this.focusHandler = null;
@@ -2068,7 +2085,11 @@ class AuroFloatingUI {
2068
2085
  }
2069
2086
  }
2070
2087
 
2071
- hideBib() {
2088
+ /**
2089
+ * Hides the floating UI element.
2090
+ * @param {String} eventType - The event type that triggered the hiding action.
2091
+ */
2092
+ hideBib(eventType = "unknown") {
2072
2093
  if (!this.element.disabled && !this.element.noToggle) {
2073
2094
  this.lockScroll(false);
2074
2095
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2079,7 +2100,7 @@ class AuroFloatingUI {
2079
2100
  if (this.showing) {
2080
2101
  this.cleanupHideHandlers();
2081
2102
  this.showing = false;
2082
- this.dispatchEventDropdownToggle();
2103
+ this.dispatchEventDropdownToggle(eventType);
2083
2104
  }
2084
2105
  }
2085
2106
  document.expandedAuroFloater = null;
@@ -2088,11 +2109,13 @@ class AuroFloatingUI {
2088
2109
  /**
2089
2110
  * @private
2090
2111
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2112
+ * @param {String} eventType - The event type that triggered the toggle action.
2091
2113
  */
2092
- dispatchEventDropdownToggle() {
2114
+ dispatchEventDropdownToggle(eventType) {
2093
2115
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2094
2116
  detail: {
2095
2117
  expanded: this.showing,
2118
+ eventType: eventType || "unknown",
2096
2119
  },
2097
2120
  composed: true
2098
2121
  });
@@ -2102,7 +2125,7 @@ class AuroFloatingUI {
2102
2125
 
2103
2126
  handleClick() {
2104
2127
  if (this.element.isPopoverVisible) {
2105
- this.hideBib();
2128
+ this.hideBib("click");
2106
2129
  } else {
2107
2130
  this.showBib();
2108
2131
  }
@@ -2125,8 +2148,9 @@ class AuroFloatingUI {
2125
2148
  // Space is included as it's expected behavior for interactive elements
2126
2149
 
2127
2150
  const origin = event.composedPath()[0];
2128
- if (event.key === 'Enter' || ((!origin || origin.tagName !== "INPUT") && event.key === ' ')) {
2129
- event.preventDefault(); // Prevent page scroll on space
2151
+ if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
2152
+
2153
+ event.preventDefault();
2130
2154
  this.handleClick();
2131
2155
  }
2132
2156
  break;
@@ -2137,7 +2161,7 @@ class AuroFloatingUI {
2137
2161
  break;
2138
2162
  case 'mouseleave':
2139
2163
  if (this.element.hoverToggle) {
2140
- this.hideBib();
2164
+ this.hideBib("mouseleave");
2141
2165
  }
2142
2166
  break;
2143
2167
  case 'focus':
@@ -2280,6 +2304,267 @@ class AuroFloatingUI {
2280
2304
  }
2281
2305
  }
2282
2306
 
2307
+ // Selectors for focusable elements
2308
+ const FOCUSABLE_SELECTORS = [
2309
+ 'a[href]',
2310
+ 'button:not([disabled])',
2311
+ 'textarea:not([disabled])',
2312
+ 'input:not([disabled])',
2313
+ 'select:not([disabled])',
2314
+ '[role="tab"]:not([disabled])',
2315
+ '[role="link"]:not([disabled])',
2316
+ '[role="button"]:not([disabled])',
2317
+ '[tabindex]:not([tabindex="-1"])',
2318
+ '[contenteditable]:not([contenteditable="false"])'
2319
+ ];
2320
+
2321
+ // List of custom components that are known to be focusable
2322
+ const FOCUSABLE_COMPONENTS = [
2323
+ 'auro-checkbox',
2324
+ 'auro-radio',
2325
+ 'auro-dropdown',
2326
+ 'auro-button',
2327
+ 'auro-combobox',
2328
+ 'auro-input',
2329
+ 'auro-counter',
2330
+ 'auro-menu',
2331
+ 'auro-select',
2332
+ 'auro-datepicker',
2333
+ 'auro-hyperlink',
2334
+ 'auro-accordion',
2335
+ ];
2336
+
2337
+ /**
2338
+ * Determines if a given element is a custom focusable component.
2339
+ * Returns true if the element matches a known focusable component and is not disabled.
2340
+ *
2341
+ * @param {HTMLElement} element The element to check for focusability.
2342
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
2343
+ */
2344
+ function isFocusableComponent(element) {
2345
+ const componentName = element.tagName.toLowerCase();
2346
+
2347
+ // Guard Clause: Element is a focusable component
2348
+ if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
2349
+
2350
+ // Guard Clause: Element is not disabled
2351
+ if (element.hasAttribute('disabled')) return false;
2352
+
2353
+ // Guard Clause: The element is a hyperlink and has no href attribute
2354
+ if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
2355
+
2356
+ // If all guard clauses pass, the element is a focusable component
2357
+ return true;
2358
+ }
2359
+
2360
+ /**
2361
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2362
+ * Returns a unique, ordered array of elements that can receive focus.
2363
+ *
2364
+ * @param {HTMLElement} container The container to search within
2365
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2366
+ */
2367
+ function getFocusableElements(container) {
2368
+ // Get elements in DOM order by walking the tree
2369
+ const orderedFocusableElements = [];
2370
+
2371
+ // Define a recursive function to collect focusable elements in DOM order
2372
+ const collectFocusableElements = (root) => {
2373
+ // Check if current element is focusable
2374
+ if (root.nodeType === Node.ELEMENT_NODE) {
2375
+ // Check if this is a custom component that is focusable
2376
+ const isComponentFocusable = isFocusableComponent(root);
2377
+
2378
+ if (isComponentFocusable) {
2379
+ // Add the component itself as a focusable element and don't traverse its shadow DOM
2380
+ orderedFocusableElements.push(root);
2381
+ return; // Skip traversing inside this component
2382
+ }
2383
+
2384
+ // Check if the element itself matches any selector
2385
+ for (const selector of FOCUSABLE_SELECTORS) {
2386
+ if (root.matches?.(selector)) {
2387
+ orderedFocusableElements.push(root);
2388
+ break; // Once we know it's focusable, no need to check other selectors
2389
+ }
2390
+ }
2391
+
2392
+ // Process shadow DOM only for non-Auro components
2393
+ if (root.shadowRoot) {
2394
+ // Process shadow DOM children in order
2395
+ if (root.shadowRoot.children) {
2396
+ Array.from(root.shadowRoot.children).forEach(child => {
2397
+ collectFocusableElements(child);
2398
+ });
2399
+ }
2400
+ }
2401
+
2402
+ // Process slots and their assigned nodes in order
2403
+ if (root.tagName === 'SLOT') {
2404
+ const assignedNodes = root.assignedNodes({ flatten: true });
2405
+ for (const node of assignedNodes) {
2406
+ collectFocusableElements(node);
2407
+ }
2408
+ } else {
2409
+ // Process light DOM children in order
2410
+ if (root.children) {
2411
+ Array.from(root.children).forEach(child => {
2412
+ collectFocusableElements(child);
2413
+ });
2414
+ }
2415
+ }
2416
+ }
2417
+ };
2418
+
2419
+ // Start the traversal from the container
2420
+ collectFocusableElements(container);
2421
+
2422
+ // Remove duplicates that might have been collected through different paths
2423
+ // while preserving order
2424
+ const uniqueElements = [];
2425
+ const seen = new Set();
2426
+
2427
+ for (const element of orderedFocusableElements) {
2428
+ if (!seen.has(element)) {
2429
+ seen.add(element);
2430
+ uniqueElements.push(element);
2431
+ }
2432
+ }
2433
+
2434
+ return uniqueElements;
2435
+ }
2436
+
2437
+ /**
2438
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
2439
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
2440
+ */
2441
+ class FocusTrap {
2442
+ /**
2443
+ * Creates a new FocusTrap instance for the given container element.
2444
+ * Initializes event listeners and prepares the container for focus management.
2445
+ *
2446
+ * @param {HTMLElement} container The DOM element to trap focus within.
2447
+ * @throws {Error} If the provided container is not a valid HTMLElement.
2448
+ */
2449
+ constructor(container) {
2450
+ if (!container || !(container instanceof HTMLElement)) {
2451
+ throw new Error("FocusTrap requires a valid HTMLElement.");
2452
+ }
2453
+
2454
+ this.container = container;
2455
+ this.tabDirection = 'forward'; // or 'backward'
2456
+
2457
+ this._init();
2458
+ }
2459
+
2460
+ /**
2461
+ * Initializes the focus trap by setting up event listeners and attributes on the container.
2462
+ * Prepares the container for focus management, including support for shadow DOM and inert attributes.
2463
+ *
2464
+ * @private
2465
+ */
2466
+ _init() {
2467
+
2468
+ // Add inert attribute to prevent focusing programmatically as well (if supported)
2469
+ if ('inert' in HTMLElement.prototype) {
2470
+ this.container.inert = false; // Ensure the container isn't inert
2471
+ this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
2472
+ }
2473
+
2474
+ // Track tab direction
2475
+ this.container.addEventListener('keydown', this._onKeydown);
2476
+ }
2477
+
2478
+ /**
2479
+ * Handles keydown events to manage tab navigation within the container.
2480
+ * Ensures that focus wraps around when reaching the first or last focusable element.
2481
+ *
2482
+ * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
2483
+ * @private
2484
+ */
2485
+ _onKeydown = (e) => {
2486
+
2487
+ if (e.key === 'Tab') {
2488
+
2489
+ // Set the tab direction based on the key pressed
2490
+ this.tabDirection = e.shiftKey ? 'backward' : 'forward';
2491
+
2492
+ // Get the active element(s) in the document and shadow root
2493
+ // This will include the active element in the shadow DOM if it exists
2494
+ // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
2495
+ let activeElement = document.activeElement;
2496
+ const actives = [activeElement];
2497
+ while (activeElement?.shadowRoot?.activeElement) {
2498
+ actives.push(activeElement.shadowRoot.activeElement);
2499
+ activeElement = activeElement.shadowRoot.activeElement;
2500
+ }
2501
+
2502
+ // Update the focusable elements
2503
+ const focusables = this._getFocusableElements();
2504
+
2505
+ // If we're at either end of the focusable elements, wrap around to the other end
2506
+ const focusIndex =
2507
+ (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
2508
+ ? focusables.length - 1
2509
+ : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
2510
+ ? 0
2511
+ : null;
2512
+
2513
+ if (focusIndex !== null) {
2514
+ focusables[focusIndex].focus();
2515
+ e.preventDefault(); // Prevent default tab behavior
2516
+ e.stopPropagation(); // Stop the event from bubbling up
2517
+ }
2518
+ }
2519
+ };
2520
+
2521
+ /**
2522
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2523
+ * Returns a unique, ordered array of elements that can receive focus.
2524
+ *
2525
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2526
+ * @private
2527
+ */
2528
+ _getFocusableElements() {
2529
+ // Use the imported utility function to get focusable elements
2530
+ const elements = getFocusableElements(this.container);
2531
+
2532
+ // Filter out any elements with the 'focus-bookend' class
2533
+ return elements;
2534
+ }
2535
+
2536
+ /**
2537
+ * Moves focus to the first focusable element within the container.
2538
+ * Useful for setting initial focus when activating the focus trap.
2539
+ */
2540
+ focusFirstElement() {
2541
+ const focusables = this._getFocusableElements();
2542
+ if (focusables.length) focusables[0].focus();
2543
+ }
2544
+
2545
+ /**
2546
+ * Moves focus to the last focusable element within the container.
2547
+ * Useful for setting focus when deactivating or cycling focus in reverse.
2548
+ */
2549
+ focusLastElement() {
2550
+ const focusables = this._getFocusableElements();
2551
+ if (focusables.length) focusables[focusables.length - 1].focus();
2552
+ }
2553
+
2554
+ /**
2555
+ * Removes event listeners and attributes added by the focus trap.
2556
+ * Call this method to clean up when the focus trap is no longer needed.
2557
+ */
2558
+ disconnect() {
2559
+
2560
+ if (this.container.hasAttribute('data-focus-trap-container')) {
2561
+ this.container.removeAttribute('data-focus-trap-container');
2562
+ }
2563
+
2564
+ this.container.removeEventListener('keydown', this._onKeydown);
2565
+ }
2566
+ }
2567
+
2283
2568
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2284
2569
  // See LICENSE in the project root for license information.
2285
2570
 
@@ -2320,19 +2605,6 @@ class AuroDependencyVersioning {
2320
2605
  }
2321
2606
  }
2322
2607
 
2323
- /**
2324
- * @license
2325
- * Copyright 2017 Google LLC
2326
- * SPDX-License-Identifier: BSD-3-Clause
2327
- */
2328
- 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)}}
2329
-
2330
- /**
2331
- * @license
2332
- * Copyright 2018 Google LLC
2333
- * SPDX-License-Identifier: BSD-3-Clause
2334
- */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}});
2335
-
2336
2608
  /**
2337
2609
  * @license
2338
2610
  * Copyright 2018 Google LLC
@@ -2349,7 +2621,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
2349
2621
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
2350
2622
  */
2351
2623
 
2352
- class AuroElement extends i$1 {
2624
+ let AuroElement$1 = class AuroElement extends i {
2353
2625
 
2354
2626
  // function to define props used within the scope of this component
2355
2627
  static get properties() {
@@ -2373,7 +2645,7 @@ class AuroElement extends i$1 {
2373
2645
 
2374
2646
  return 'false'
2375
2647
  }
2376
- }
2648
+ };
2377
2649
 
2378
2650
  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>"};
2379
2651
 
@@ -2405,7 +2677,7 @@ const cacheFetch = (uri, options = {}) => {
2405
2677
  return _fetchMap.get(uri);
2406
2678
  };
2407
2679
 
2408
- 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}`;
2680
+ 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}`;
2409
2681
 
2410
2682
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2411
2683
  // See LICENSE in the project root for license information.
@@ -2417,7 +2689,7 @@ var styleCss$3 = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.u
2417
2689
  */
2418
2690
 
2419
2691
  // build the component class
2420
- class BaseIcon extends AuroElement {
2692
+ class BaseIcon extends AuroElement$1 {
2421
2693
  constructor() {
2422
2694
  super();
2423
2695
  this.onDark = false;
@@ -2447,7 +2719,7 @@ class BaseIcon extends AuroElement {
2447
2719
  }
2448
2720
 
2449
2721
  static get styles() {
2450
- return i$3`
2722
+ return i$2`
2451
2723
  ${styleCss$3}
2452
2724
  `;
2453
2725
  }
@@ -2489,9 +2761,9 @@ class BaseIcon extends AuroElement {
2489
2761
  }
2490
2762
  }
2491
2763
 
2492
- 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)}`;
2764
+ 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)}`;
2493
2765
 
2494
- 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)}`;
2766
+ 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)}`;
2495
2767
 
2496
2768
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2497
2769
  // See LICENSE in the project root for license information.
@@ -2610,7 +2882,8 @@ class AuroIcon extends BaseIcon {
2610
2882
  * Allows custom color to be set.
2611
2883
  */
2612
2884
  customColor: {
2613
- type: Boolean
2885
+ type: Boolean,
2886
+ reflect: true
2614
2887
  },
2615
2888
 
2616
2889
  /**
@@ -2649,9 +2922,9 @@ class AuroIcon extends BaseIcon {
2649
2922
  static get styles() {
2650
2923
  return [
2651
2924
  super.styles,
2652
- i$3`${tokensCss$2}`,
2653
- i$3`${styleCss$3}`,
2654
- i$3`${colorCss$3}`
2925
+ i$2`${tokensCss$2}`,
2926
+ i$2`${styleCss$3}`,
2927
+ i$2`${colorCss$3}`
2655
2928
  ];
2656
2929
  }
2657
2930
 
@@ -2685,8 +2958,12 @@ class AuroIcon extends BaseIcon {
2685
2958
  async firstUpdated() {
2686
2959
  await super.firstUpdated();
2687
2960
 
2688
- // Removes the SVG description for screenreader if ariaHidden is set to true
2689
- if (!this.hasAttribute('ariaHidden') && this.svg) {
2961
+ /**
2962
+ * icons provide a description for screen readers. Icon only instances Auro-button
2963
+ * depend on this description to provide context for the user using a screen reader.
2964
+ * Removes the SVG description for screen reader if ariaHidden is set to true.
2965
+ */
2966
+ if (this.hasAttribute('ariaHidden') && this.svg) {
2690
2967
  const svgDesc = this.svg.querySelector('desc');
2691
2968
 
2692
2969
  if (svgDesc) {
@@ -2710,7 +2987,7 @@ class AuroIcon extends BaseIcon {
2710
2987
  return x`
2711
2988
  <div class="componentWrapper">
2712
2989
  <div
2713
- class="${e(svgClasses)}"
2990
+ class="${e$2(svgClasses)}"
2714
2991
  title="${o(this.title || undefined)}">
2715
2992
  <span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
2716
2993
  ${this.customSvg ? x`
@@ -2722,7 +2999,7 @@ class AuroIcon extends BaseIcon {
2722
2999
  </span>
2723
3000
  </div>
2724
3001
 
2725
- <div class="${e(labelClasses)}">
3002
+ <div class="${e$2(labelClasses)}">
2726
3003
  <slot></slot>
2727
3004
  </div>
2728
3005
  </div>
@@ -2732,11 +3009,11 @@ class AuroIcon extends BaseIcon {
2732
3009
 
2733
3010
  var iconVersion = '6.1.2';
2734
3011
 
2735
- 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}`;
3012
+ 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}`;
2736
3013
 
2737
- 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)}`;
3014
+ 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)}`;
2738
3015
 
2739
- 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)}`;
3016
+ 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)}`;
2740
3017
 
2741
3018
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2742
3019
  // See LICENSE in the project root for license information.
@@ -2756,8 +3033,8 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
2756
3033
  * @csspart bibContainer - Apply css to the bib container.
2757
3034
  */
2758
3035
 
2759
- class AuroDropdownBib extends i$1 {
2760
-
3036
+ class AuroDropdownBib extends i {
3037
+ // not extending AuroElement because Bib needs only `shape` prop
2761
3038
  constructor() {
2762
3039
  super();
2763
3040
 
@@ -2767,6 +3044,9 @@ class AuroDropdownBib extends i$1 {
2767
3044
  this._mobileBreakpointValue = undefined;
2768
3045
 
2769
3046
  AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
3047
+
3048
+ this.shape = "rounded";
3049
+ this.matchWidth = false;
2770
3050
  }
2771
3051
 
2772
3052
  static get styles() {
@@ -2804,6 +3084,15 @@ class AuroDropdownBib extends i$1 {
2804
3084
  reflect: true
2805
3085
  },
2806
3086
 
3087
+ /**
3088
+ * If declared, the bib width will match the trigger width.
3089
+ * @private
3090
+ */
3091
+ matchWidth: {
3092
+ type: Boolean,
3093
+ reflect: true
3094
+ },
3095
+
2807
3096
  /**
2808
3097
  * If declared, will apply border-radius to the bib.
2809
3098
  */
@@ -2817,6 +3106,11 @@ class AuroDropdownBib extends i$1 {
2817
3106
  */
2818
3107
  bibTemplate: {
2819
3108
  type: Object
3109
+ },
3110
+
3111
+ shape: {
3112
+ type: String,
3113
+ reflect: true
2820
3114
  }
2821
3115
  };
2822
3116
  }
@@ -2896,8 +3190,16 @@ class AuroDropdownBib extends i$1 {
2896
3190
 
2897
3191
  // function that renders the HTML and CSS into the scope of the component
2898
3192
  render() {
3193
+ const classes = {
3194
+ container: true
3195
+ };
3196
+
3197
+ // Since this class does not inherit from AuroElement, we apply the shape-related class within the `render` function,
3198
+ // mimicking the class naming convention used in AuroElement.resetShapeClasses.
3199
+ classes[`shape-${this.shape}`] = true;
3200
+
2899
3201
  return u$1`
2900
- <div class="container" part="bibContainer">
3202
+ <div class="${e$2(classes)}" part="bibContainer">
2901
3203
  <slot></slot>
2902
3204
  </div>
2903
3205
  `;
@@ -2906,15 +3208,25 @@ class AuroDropdownBib extends i$1 {
2906
3208
 
2907
3209
  var dropdownVersion = '3.0.0';
2908
3210
 
2909
- 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)}`;
3211
+ 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}`;
3212
+
3213
+ 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)}`;
3214
+
3215
+ 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%}`;
2910
3216
 
2911
- 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))}`;
3217
+ var classicColorCss = i$2``;
2912
3218
 
2913
- 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)}`;
3219
+ 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)}`;
2914
3220
 
2915
- 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}`;
3221
+ 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)}`;
2916
3222
 
2917
- var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
3223
+ 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)}`;
3224
+
3225
+ 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)}`;
3226
+
3227
+ 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}`;
3228
+
3229
+ var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
2918
3230
 
2919
3231
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2920
3232
  // See LICENSE in the project root for license information.
@@ -2992,10 +3304,8 @@ class AuroLibraryRuntimeUtils {
2992
3304
 
2993
3305
  /**
2994
3306
  * Displays help text or error messages within form elements - Internal Use Only.
2995
- *
2996
- * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
2997
3307
  */
2998
- class AuroHelpText extends i$1 {
3308
+ class AuroHelpText extends i {
2999
3309
 
3000
3310
  constructor() {
3001
3311
  super();
@@ -3109,7 +3419,7 @@ class AuroHelpText extends i$1 {
3109
3419
  // function that renders the HTML and CSS into the scope of the component
3110
3420
  render() {
3111
3421
  return x`
3112
- <div class="helptext-wrapper" ?visible="${this.hasTextContent}">
3422
+ <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
3113
3423
  <slot @slotchange=${this.handleSlotChange}></slot>
3114
3424
  </div>
3115
3425
  `;
@@ -3118,24 +3428,119 @@ class AuroHelpText extends i$1 {
3118
3428
 
3119
3429
  var helpTextVersion = '1.0.0';
3120
3430
 
3431
+ class AuroElement extends i {
3432
+ static get properties() {
3433
+ return {
3434
+
3435
+ /**
3436
+ * Defines the language of an element.
3437
+ * @default {'default'}
3438
+ */
3439
+ layout: {
3440
+ type: String,
3441
+ attribute: "layout",
3442
+ reflect: true
3443
+ },
3444
+
3445
+ shape: {
3446
+ type: String,
3447
+ attribute: "shape",
3448
+ reflect: true
3449
+ },
3450
+
3451
+ size: {
3452
+ type: String,
3453
+ attribute: "size",
3454
+ reflect: true
3455
+ },
3456
+
3457
+ onDark: {
3458
+ type: Boolean,
3459
+ attribute: "ondark",
3460
+ reflect: true
3461
+ }
3462
+ };
3463
+ }
3464
+
3465
+ resetShapeClasses() {
3466
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3467
+
3468
+ if (wrapper) {
3469
+ wrapper.classList.forEach((className) => {
3470
+ if (className.startsWith('shape-')) {
3471
+ wrapper.classList.remove(className);
3472
+ }
3473
+ });
3474
+
3475
+ if (this.shape && this.size) {
3476
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
3477
+ } else {
3478
+ wrapper.classList.add('shape-none');
3479
+ }
3480
+ }
3481
+
3482
+ }
3483
+
3484
+ resetLayoutClasses() {
3485
+ if (this.layout) {
3486
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3487
+
3488
+ if (wrapper) {
3489
+ wrapper.classList.forEach((className) => {
3490
+ if (className.startsWith('layout-')) {
3491
+ wrapper.classList.remove(className);
3492
+ }
3493
+ });
3494
+
3495
+ wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
3496
+ }
3497
+ }
3498
+ }
3499
+
3500
+ updateComponentArchitecture() {
3501
+ this.resetLayoutClasses();
3502
+ this.resetShapeClasses();
3503
+ }
3504
+
3505
+ updated(changedProperties) {
3506
+ if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
3507
+ this.updateComponentArchitecture();
3508
+ }
3509
+ }
3510
+
3511
+ // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
3512
+ // This will catch if an invalid layout value is passed in and render the default layout if so.
3513
+ render() {
3514
+ try {
3515
+ return this.renderLayout();
3516
+ } catch (error) {
3517
+ // failed to get the defined layout
3518
+ console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
3519
+
3520
+ // fallback to the default layout
3521
+ return this.getLayout('default');
3522
+ }
3523
+ }
3524
+ }
3525
+
3121
3526
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3122
3527
  // See LICENSE in the project root for license information.
3123
3528
 
3124
3529
 
3125
- /**
3126
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3530
+
3531
+ /*
3127
3532
  * @slot - Default slot for the popover content.
3128
- * @slot label - Defines the content of the label.
3129
3533
  * @slot helpText - Defines the content of the helpText.
3130
3534
  * @slot trigger - Defines the content of the trigger.
3131
3535
  * @csspart trigger - The trigger content container.
3132
3536
  * @csspart chevron - The collapsed/expanded state icon container.
3537
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
3133
3538
  * @csspart helpText - The helpText content container.
3134
3539
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
3135
3540
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
3136
3541
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
3137
3542
  */
3138
- class AuroDropdown extends i$1 {
3543
+ class AuroDropdown extends AuroElement {
3139
3544
  constructor() {
3140
3545
  super();
3141
3546
 
@@ -3144,26 +3549,33 @@ class AuroDropdown extends i$1 {
3144
3549
  this.matchWidth = false;
3145
3550
  this.noHideOnThisFocusLoss = false;
3146
3551
 
3147
- this.privateDefaults();
3552
+ this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3148
3553
 
3149
- /**
3150
- * @private
3151
- * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3152
- */
3153
- this.constructor.shadowRootOptions = {
3154
- ...i$1.shadowRootOptions,
3155
- delegatesFocus: true,
3156
- };
3554
+ // Layout Config
3555
+ this.layout = undefined;
3556
+ this.shape = undefined;
3557
+ this.size = undefined;
3157
3558
 
3158
- /**
3159
- * @private
3160
- */
3161
- this.triggerContentFocusable = false;
3559
+ this.parentBorder = false;
3162
3560
 
3163
- /**
3164
- * @private
3165
- */
3166
- this.showTriggerBorders = true;
3561
+ /** @private */
3562
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3563
+
3564
+ this.privateDefaults();
3565
+ }
3566
+
3567
+ /**
3568
+ * @private
3569
+ * @returns {object} Class definition for the wrapper element.
3570
+ */
3571
+ get commonWrapperClasses() {
3572
+ return {
3573
+ 'trigger': true,
3574
+ 'wrapper': true,
3575
+ 'hasFocus': this.hasFocus,
3576
+ 'simple': this.simple,
3577
+ 'parentBorder': this.parentBorder
3578
+ };
3167
3579
  }
3168
3580
 
3169
3581
  /**
@@ -3171,18 +3583,17 @@ class AuroDropdown extends i$1 {
3171
3583
  * @returns {void} Internal defaults.
3172
3584
  */
3173
3585
  privateDefaults() {
3174
- this.bordered = false;
3175
3586
  this.chevron = false;
3176
3587
  this.disabled = false;
3588
+ this.disableFocusTrap = false;
3177
3589
  this.error = false;
3178
- this.inset = false;
3179
- this.rounded = false;
3180
3590
  this.tabIndex = 0;
3181
3591
  this.noToggle = false;
3182
- this.a11yAutocomplete = 'none';
3183
- this.labeled = true;
3184
- this.a11yRole = 'combobox';
3592
+ this.a11yRole = 'button';
3185
3593
  this.onDark = false;
3594
+ this.showTriggerBorders = true;
3595
+ this.triggerContentFocusable = false;
3596
+ this.simple = false;
3186
3597
 
3187
3598
  // floaterConfig
3188
3599
  this.placement = 'bottom-start';
@@ -3190,6 +3601,15 @@ class AuroDropdown extends i$1 {
3190
3601
  this.noFlip = false;
3191
3602
  this.autoPlacement = false;
3192
3603
 
3604
+ /**
3605
+ * @private
3606
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3607
+ */
3608
+ this.constructor.shadowRootOptions = {
3609
+ ...i.shadowRootOptions,
3610
+ delegatesFocus: true,
3611
+ };
3612
+
3193
3613
  /**
3194
3614
  * @private
3195
3615
  */
@@ -3264,6 +3684,18 @@ class AuroDropdown extends i$1 {
3264
3684
  this.floater.showBib();
3265
3685
  }
3266
3686
 
3687
+ /**
3688
+ * When bib is open, focus on the first element inside of bib.
3689
+ * If not, trigger element will get focus.
3690
+ */
3691
+ focus() {
3692
+ if (this.isPopoverVisible && this.focusTrap) {
3693
+ this.focusTrap.focusFirstElement();
3694
+ } else {
3695
+ this.trigger.focus();
3696
+ }
3697
+ }
3698
+
3267
3699
  // function to define props used within the scope of this component
3268
3700
  static get properties() {
3269
3701
  return {
@@ -3277,10 +3709,19 @@ class AuroDropdown extends i$1 {
3277
3709
  reflect: true
3278
3710
  },
3279
3711
 
3712
+ /**
3713
+ * If declared, the dropdown will only show by calling the API .show() public method.
3714
+ * @default false
3715
+ */
3716
+ disableEventShow: {
3717
+ type: Boolean,
3718
+ reflect: true
3719
+ },
3720
+
3280
3721
  /**
3281
3722
  * If declared, applies a border around the trigger slot.
3282
3723
  */
3283
- bordered: {
3724
+ simple: {
3284
3725
  type: Boolean,
3285
3726
  reflect: true
3286
3727
  },
@@ -3295,17 +3736,17 @@ class AuroDropdown extends i$1 {
3295
3736
  },
3296
3737
 
3297
3738
  /**
3298
- * If declared, the dropdown will be styled with the common theme.
3739
+ * If declared, the dropdown is not interactive.
3299
3740
  */
3300
- common: {
3741
+ disabled: {
3301
3742
  type: Boolean,
3302
3743
  reflect: true
3303
3744
  },
3304
3745
 
3305
3746
  /**
3306
- * If declared, the dropdown is not interactive.
3747
+ * If declared, the focus trap inside of bib will be turned off.
3307
3748
  */
3308
- disabled: {
3749
+ disableFocusTrap: {
3309
3750
  type: Boolean,
3310
3751
  reflect: true
3311
3752
  },
@@ -3328,7 +3769,7 @@ class AuroDropdown extends i$1 {
3328
3769
  },
3329
3770
 
3330
3771
  /**
3331
- * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
3772
+ * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
3332
3773
  */
3333
3774
  error: {
3334
3775
  type: Boolean,
@@ -3336,25 +3777,16 @@ class AuroDropdown extends i$1 {
3336
3777
  },
3337
3778
 
3338
3779
  /**
3339
- * If declared, the bib will display when focus is applied to the trigger.
3780
+ * Contains the help text message for the current validity error.
3340
3781
  */
3341
- focusShow: {
3342
- type: Boolean,
3343
- reflect: true
3782
+ errorMessage: {
3783
+ type: String
3344
3784
  },
3345
3785
 
3346
3786
  /**
3347
- * Makes the trigger to be full width of its parent container.
3348
- */
3349
- fluid: {
3350
- type: Boolean,
3351
- reflect: true
3352
- },
3353
-
3354
- /**
3355
- * If declared, will apply padding around trigger slot content.
3787
+ * If declared, the bib will display when focus is applied to the trigger.
3356
3788
  */
3357
- inset: {
3789
+ focusShow: {
3358
3790
  type: Boolean,
3359
3791
  reflect: true
3360
3792
  },
@@ -3363,7 +3795,9 @@ class AuroDropdown extends i$1 {
3363
3795
  * If true, the dropdown bib is displayed.
3364
3796
  */
3365
3797
  isPopoverVisible: {
3366
- type: Boolean
3798
+ type: Boolean,
3799
+ reflect: true,
3800
+ attribute: 'open'
3367
3801
  },
3368
3802
 
3369
3803
  /**
@@ -3403,10 +3837,10 @@ class AuroDropdown extends i$1 {
3403
3837
  },
3404
3838
 
3405
3839
  /**
3406
- * Defines if there is a label preset.
3840
+ * Defines if the trigger should size based on the parent element providing the border UI.
3407
3841
  * @private
3408
3842
  */
3409
- labeled: {
3843
+ parentBorder: {
3410
3844
  type: Boolean,
3411
3845
  reflect: true
3412
3846
  },
@@ -3462,6 +3896,9 @@ class AuroDropdown extends i$1 {
3462
3896
  reflect: true
3463
3897
  },
3464
3898
 
3899
+ /**
3900
+ * If declared, and a function is set, that function will execute when the slot content is updated.
3901
+ */
3465
3902
  onSlotChange: {
3466
3903
  type: Function,
3467
3904
  reflect: false
@@ -3469,11 +3906,6 @@ class AuroDropdown extends i$1 {
3469
3906
 
3470
3907
  /**
3471
3908
  * Position where the bib should appear relative to the trigger.
3472
- * Accepted values:
3473
- * "top" | "right" | "bottom" | "left" |
3474
- * "bottom-start" | "top-start" | "top-end" |
3475
- * "right-start" | "right-end" | "bottom-end" |
3476
- * "left-start" | "left-end"
3477
3909
  * @default bottom-start
3478
3910
  */
3479
3911
  placement: {
@@ -3481,14 +3913,6 @@ class AuroDropdown extends i$1 {
3481
3913
  reflect: true
3482
3914
  },
3483
3915
 
3484
- /**
3485
- * If declared, will apply border-radius to trigger and default slots.
3486
- */
3487
- rounded: {
3488
- type: Boolean,
3489
- reflect: true
3490
- },
3491
-
3492
3916
  /**
3493
3917
  * @private
3494
3918
  */
@@ -3503,23 +3927,27 @@ class AuroDropdown extends i$1 {
3503
3927
  type: String || undefined,
3504
3928
  attribute: false,
3505
3929
  reflect: false
3506
- },
3507
-
3508
- /**
3509
- * The value for the aria-autocomplete attribute of the trigger element.
3510
- */
3511
- a11yAutocomplete: {
3512
- type: String,
3513
- attribute: false,
3514
3930
  }
3515
3931
  };
3516
3932
  }
3517
3933
 
3518
3934
  static get styles() {
3519
3935
  return [
3520
- colorCss$1,
3521
3936
  styleCss$1,
3522
- tokensCss$1
3937
+ tokensCss$1,
3938
+ colorCss$1,
3939
+
3940
+ // default layout
3941
+ classicColorCss,
3942
+ classicLayoutCss,
3943
+
3944
+ // emphasized layout
3945
+ styleEmphasizedCss,
3946
+
3947
+ // snowflake layout
3948
+ styleSnowflakeCss,
3949
+
3950
+ shapeSizeCss
3523
3951
  ];
3524
3952
  }
3525
3953
 
@@ -3555,6 +3983,7 @@ class AuroDropdown extends i$1 {
3555
3983
  }
3556
3984
 
3557
3985
  updated(changedProperties) {
3986
+ super.updated(changedProperties);
3558
3987
  this.floater.handleUpdate(changedProperties);
3559
3988
 
3560
3989
  // Note: `disabled` is not a breakpoint (it is not a screen size),
@@ -3564,17 +3993,31 @@ class AuroDropdown extends i$1 {
3564
3993
  }
3565
3994
 
3566
3995
  // when trigger's content is changed without any attribute or node change,
3567
- // `requestUpdate` needs to be called to update hasTriggerContnet
3996
+ // `requestUpdate` needs to be called to update hasTriggerContent
3568
3997
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3569
3998
  this.handleTriggerContentSlotChange();
3570
3999
  }
4000
+ }
3571
4001
 
4002
+ /**
4003
+ * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4004
+ * @private
4005
+ * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4006
+ */
4007
+ handleDropdownToggle(event) {
4008
+ this.updateFocusTrap();
4009
+ this.isPopoverVisible = event.detail.expanded;
4010
+ const eventType = event.detail.eventType || "unknown";
4011
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4012
+ this.trigger.focus();
4013
+ }
3572
4014
  }
3573
4015
 
3574
4016
  firstUpdated() {
3575
4017
 
3576
4018
  // Configure the floater to, this will generate the ID for the bib
3577
4019
  this.floater.configure(this, 'auroDropdown');
4020
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3578
4021
 
3579
4022
  /**
3580
4023
  * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -3592,6 +4035,13 @@ class AuroDropdown extends i$1 {
3592
4035
 
3593
4036
  // Add the tag name as an attribute if it is different than the component name
3594
4037
  this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
4038
+
4039
+ this.trigger.addEventListener('click', () => {
4040
+ this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
4041
+ bubbles: true,
4042
+ composed: true
4043
+ }));
4044
+ });
3595
4045
  }
3596
4046
 
3597
4047
  /**
@@ -3626,66 +4076,47 @@ class AuroDropdown extends i$1 {
3626
4076
  }
3627
4077
 
3628
4078
  /**
3629
- * Determines if the element or any children are focusable.
4079
+ * Function to support @focusin event.
3630
4080
  * @private
3631
- * @param {HTMLElement} element - Element to check.
3632
- * @returns {Boolean} - True if the element or any children are focusable.
4081
+ * @return {void}
3633
4082
  */
3634
- containsFocusableElement(element) {
3635
- this.showTriggerBorders = true;
3636
-
3637
- const nodes = [
3638
- element,
3639
- ...element.children
3640
- ];
3641
-
3642
- const focusableElements = [
3643
- 'a',
3644
- 'auro-hyperlink',
3645
- 'button',
3646
- 'auro-button',
3647
- 'input',
3648
- 'auro-input',
3649
- ];
3650
-
3651
- const focusableElementsThatNeedBorders = ['auro-input'];
3652
-
3653
- const result = nodes.some((node) => {
3654
- const tagName = node.tagName.toLowerCase();
3655
-
3656
- if (node.tabIndex > -1) {
3657
- return true;
3658
- }
3659
-
3660
- if (focusableElements.includes(tagName)) {
3661
- if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
3662
- return true;
3663
- }
3664
- if (!node.hasAttribute('disabled')) {
3665
- return true;
3666
- }
3667
- }
3668
-
3669
- if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
3670
- return true;
3671
- }
4083
+ handleFocusin() {
4084
+ this.hasFocus = true;
4085
+ }
3672
4086
 
3673
- return false;
3674
- });
4087
+ /**
4088
+ * @private
4089
+ */
4090
+ updateFocusTrap() {
4091
+ // If the dropdown is open, create a focus trap and focus the first element
4092
+ if (this.isPopoverVisible && !this.disableFocusTrap) {
4093
+ this.focusTrap = new FocusTrap(this.bibContent);
4094
+ this.focusTrap.focusFirstElement();
4095
+ return;
4096
+ }
3675
4097
 
3676
- if (result) {
3677
- this.showTriggerBorders = !nodes.some((node) => {
3678
- const tagName = node.tagName.toLowerCase();
3679
- return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
3680
- });
4098
+ // Guard Clause: Ensure there is a focus trap currently active before continuing
4099
+ if (!this.focusTrap) {
4100
+ return;
3681
4101
  }
3682
4102
 
3683
- return result;
4103
+ // If the dropdown is not open, disconnect the focus trap if it exists
4104
+ this.focusTrap.disconnect();
4105
+ this.focusTrap = undefined;
3684
4106
  }
3685
4107
 
3686
4108
  /**
4109
+ * Function to support @focusout event.
3687
4110
  * @private
4111
+ * @return {void}
4112
+ */
4113
+ handleFocusout() {
4114
+ this.hasFocus = false;
4115
+ }
4116
+
4117
+ /**
3688
4118
  * Creates and dispatches a duplicate focus event on the trigger element.
4119
+ * @private
3689
4120
  * @param {Event} event - The original focus event.
3690
4121
  */
3691
4122
  bindFocusEventToTrigger(event) {
@@ -3698,9 +4129,9 @@ class AuroDropdown extends i$1 {
3698
4129
  }
3699
4130
 
3700
4131
  /**
3701
- * @private
3702
4132
  * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
3703
4133
  * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
4134
+ * @private
3704
4135
  */
3705
4136
  setupTriggerFocusEventBinding() {
3706
4137
  if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
@@ -3776,14 +4207,13 @@ class AuroDropdown extends i$1 {
3776
4207
  * @returns {void}
3777
4208
  */
3778
4209
  handleTriggerContentSlotChange(event) {
3779
-
3780
4210
  this.floater.handleTriggerTabIndex();
3781
4211
 
3782
4212
  // Get the trigger
3783
4213
  const trigger = this.shadowRoot.querySelector('#trigger');
3784
4214
 
3785
4215
  // Get the trigger slot
3786
- const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
4216
+ const triggerSlot = this.shadowRoot.querySelector('.triggerContentWrapper slot');
3787
4217
 
3788
4218
  // If there's a trigger slot
3789
4219
  if (triggerSlot) {
@@ -3794,8 +4224,8 @@ class AuroDropdown extends i$1 {
3794
4224
  // If there are children
3795
4225
  if (triggerContentNodes) {
3796
4226
 
3797
- // See if any of them are focusable elemeents
3798
- this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
4227
+ // See if any of them are focusable elements
4228
+ this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
3799
4229
 
3800
4230
  // If any of them are focusable elements
3801
4231
  if (this.triggerContentFocusable) {
@@ -3846,7 +4276,6 @@ class AuroDropdown extends i$1 {
3846
4276
  *
3847
4277
  * @private
3848
4278
  * @method handleDefaultSlot
3849
- * @param {Event} event - The event object representing the slot change.
3850
4279
  * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
3851
4280
  */
3852
4281
  handleDefaultSlot() {
@@ -3857,56 +4286,33 @@ class AuroDropdown extends i$1 {
3857
4286
  }
3858
4287
 
3859
4288
  /**
4289
+ * Returns HTML for the common portion of the layouts.
3860
4290
  * @private
3861
- * @method handleLabelSlotChange
3862
- * @param {event} event - The event object representing the slot change.
3863
- * @description Handles the slot change event for the label slot.
4291
+ * @param {Object} helpTextClasses - Classes to apply to the help text container.
4292
+ * @returns {html} - Returns HTML.
3864
4293
  */
3865
- handleLabelSlotChange (event) {
3866
-
3867
- // Get the nodes from the event
3868
- const nodes = event.target.assignedNodes();
3869
-
3870
- // Guard clause for no nodes
3871
- if (!nodes) {
3872
- return;
3873
- }
3874
-
3875
- // Convert the nodes to a measurable array so we can get the length
3876
- const nodesArr = Array.from(nodes);
3877
-
3878
- // If the nodes array has a length, the dropdown is labeled
3879
- this.labeled = nodesArr.length > 0;
3880
- }
3881
-
3882
- // function that renders the HTML and CSS into the scope of the component
3883
- render() {
4294
+ renderBasicHtml(helpTextClasses) {
3884
4295
  return u$1`
3885
4296
  <div>
3886
4297
  <div
3887
4298
  id="trigger"
3888
- class="trigger"
3889
- part="trigger"
3890
- tabindex="${this.tabIndex}"
3891
- ?showBorder="${this.showTriggerBorders}"
4299
+ class="${e$2(this.commonWrapperClasses)}" part="wrapper"
4300
+ tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
3892
4301
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
3893
- aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
3894
- aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
4302
+ aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4303
+ aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
3895
4304
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
3896
- >
3897
- <div class="triggerContentWrapper">
3898
- <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
3899
- <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
3900
- </label>
3901
- <div class="triggerContent">
3902
- <slot
3903
- name="trigger"
3904
- @slotchange="${this.handleTriggerContentSlotChange}"></slot>
3905
- </div>
4305
+ @focusin="${this.handleFocusin}"
4306
+ @blur="${this.handleFocusOut}">
4307
+ <div class="triggerContentWrapper" id="triggerLabel">
4308
+ <slot
4309
+ name="trigger"
4310
+ @slotchange="${this.handleTriggerContentSlotChange}"></slot>
3906
4311
  </div>
3907
- ${this.chevron || this.common ? u$1`
4312
+ ${this.chevron ? u$1`
3908
4313
  <div
3909
4314
  id="showStateIcon"
4315
+ class="chevron"
3910
4316
  part="chevron">
3911
4317
  <${this.iconTag}
3912
4318
  category="interface"
@@ -3918,19 +4324,15 @@ class AuroDropdown extends i$1 {
3918
4324
  </div>
3919
4325
  ` : undefined }
3920
4326
  </div>
3921
- <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
4327
+ <div class="${e$2(helpTextClasses)}">
3922
4328
  <slot name="helpText"></slot>
3923
- </${this.helpTextTag}>
3924
-
4329
+ </div>
3925
4330
  <div id="bibSizer" part="size"></div>
3926
4331
  <${this.dropdownBibTag}
3927
4332
  id="bib"
4333
+ shape="${this.shape}"
3928
4334
  ?data-show="${this.isPopoverVisible}"
3929
- ?isfullscreen="${this.isBibFullscreen}"
3930
- ?common="${this.common}"
3931
- ?rounded="${this.common || this.rounded}"
3932
- ?inset="${this.common || this.inset}"
3933
- >
4335
+ ?isfullscreen="${this.isBibFullscreen}">
3934
4336
  <div class="slotContent">
3935
4337
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
3936
4338
  </div>
@@ -3938,6 +4340,83 @@ class AuroDropdown extends i$1 {
3938
4340
  </div>
3939
4341
  `;
3940
4342
  }
4343
+
4344
+ /**
4345
+ * Returns HTML for the classic layout. Does not support type="*".
4346
+ * @private
4347
+ * @returns {html} - Returns HTML for the classic layout.
4348
+ */
4349
+ renderLayoutClassic() {
4350
+ // TODO: check with Doug why this was never used?
4351
+ const helpTextClasses = {
4352
+ 'helpText': true
4353
+ };
4354
+
4355
+ return u$1`
4356
+ ${this.renderBasicHtml(helpTextClasses)}
4357
+ `;
4358
+ }
4359
+
4360
+ /**
4361
+ * Returns HTML for the snowflake layout. Does not support type="*".
4362
+ * @private
4363
+ * @returns {html} - Returns HTML for the snowflake layout.
4364
+ */
4365
+ renderLayoutSnowflake() {
4366
+ const helpTextClasses = {
4367
+ 'helpText': true,
4368
+ 'leftIndent': true,
4369
+ 'rightIndent': true
4370
+ };
4371
+
4372
+ return u$1`
4373
+ ${this.renderBasicHtml(helpTextClasses)}
4374
+ `;
4375
+ }
4376
+
4377
+ /**
4378
+ * Returns HTML for the emphasized layout. Does not support type="*".
4379
+ * @private
4380
+ * @returns {html} - Returns HTML for the emphasized layout.
4381
+ */
4382
+ renderLayoutEmphasized() {
4383
+ const helpTextClasses = {
4384
+ 'helpText': true,
4385
+ 'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
4386
+ 'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
4387
+ };
4388
+
4389
+ return u$1`
4390
+ ${this.renderBasicHtml(helpTextClasses)}
4391
+ `;
4392
+ }
4393
+
4394
+ /**
4395
+ * Logic to determine the layout of the component.
4396
+ * @private
4397
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
4398
+ * @returns {HTMLCollection} - Returns the HTML for the layout.
4399
+ */
4400
+ renderLayout(ForcedLayout) {
4401
+ const layout = ForcedLayout || this.layout;
4402
+
4403
+ switch (layout) {
4404
+ case 'emphasized':
4405
+ return this.renderLayoutEmphasized();
4406
+ case 'emphasized-left':
4407
+ return this.renderLayoutEmphasized();
4408
+ case 'emphasized-right':
4409
+ return this.renderLayoutEmphasized();
4410
+ case 'snowflake':
4411
+ return this.renderLayoutSnowflake();
4412
+ case 'snowflake-left':
4413
+ return this.renderLayoutSnowflake();
4414
+ case 'snowflake-right':
4415
+ return this.renderLayoutSnowflake();
4416
+ default:
4417
+ return this.renderLayoutClassic();
4418
+ }
4419
+ }
3941
4420
  }
3942
4421
 
3943
4422
  AuroDropdown.register();