@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.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 (109) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +2 -2
  3. package/components/bibtemplate/dist/registered.js +2 -2
  4. package/components/checkbox/README.md +1 -1
  5. package/components/checkbox/demo/api.min.js +14 -3
  6. package/components/checkbox/demo/index.min.js +14 -3
  7. package/components/checkbox/demo/readme.md +1 -1
  8. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  9. package/components/checkbox/dist/auro-checkbox.d.ts +5 -1
  10. package/components/checkbox/dist/index.js +14 -3
  11. package/components/checkbox/dist/registered.js +14 -3
  12. package/components/combobox/README.md +1 -1
  13. package/components/combobox/demo/api.md +3 -0
  14. package/components/combobox/demo/api.min.js +1479 -395
  15. package/components/combobox/demo/index.html +2 -0
  16. package/components/combobox/demo/index.md +75 -0
  17. package/components/combobox/demo/index.min.js +1479 -395
  18. package/components/combobox/demo/readme.md +1 -1
  19. package/components/combobox/dist/auro-combobox.d.ts +19 -9
  20. package/components/combobox/dist/index.js +1471 -387
  21. package/components/combobox/dist/registered.js +1471 -387
  22. package/components/counter/README.md +1 -1
  23. package/components/counter/demo/api.min.js +433 -104
  24. package/components/counter/demo/index.min.js +433 -104
  25. package/components/counter/demo/readme.md +1 -1
  26. package/components/counter/dist/iconVersion.d.ts +1 -1
  27. package/components/counter/dist/index.js +433 -104
  28. package/components/counter/dist/registered.js +433 -104
  29. package/components/datepicker/README.md +1 -1
  30. package/components/datepicker/demo/api.min.js +1157 -376
  31. package/components/datepicker/demo/index.min.js +1157 -376
  32. package/components/datepicker/demo/readme.md +1 -1
  33. package/components/datepicker/dist/index.js +1156 -375
  34. package/components/datepicker/dist/registered.js +1156 -375
  35. package/components/dropdown/README.md +1 -1
  36. package/components/dropdown/demo/api.md +59 -35
  37. package/components/dropdown/demo/api.min.js +361 -88
  38. package/components/dropdown/demo/index.md +52 -0
  39. package/components/dropdown/demo/index.min.js +361 -88
  40. package/components/dropdown/demo/readme.md +1 -1
  41. package/components/dropdown/dist/auro-dropdown.d.ts +70 -21
  42. package/components/dropdown/dist/index.js +331 -58
  43. package/components/dropdown/dist/registered.js +331 -58
  44. package/components/dropdown/dist/styles/default/style-css.d.ts +2 -0
  45. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  46. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  47. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  48. package/components/form/README.md +1 -1
  49. package/components/form/demo/readme.md +1 -1
  50. package/components/input/README.md +2 -2
  51. package/components/input/demo/api.md +76 -64
  52. package/components/input/demo/api.min.js +747 -295
  53. package/components/input/demo/index.html +1 -1
  54. package/components/input/demo/index.md +49 -4
  55. package/components/input/demo/index.min.js +747 -295
  56. package/components/input/demo/readme.md +2 -2
  57. package/components/input/dist/auro-input.d.ts +97 -3
  58. package/components/input/dist/base-input.d.ts +36 -18
  59. package/components/input/dist/index.js +681 -229
  60. package/components/input/dist/registered.js +681 -229
  61. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  62. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  63. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  64. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  65. package/components/input/dist/styles/default/input-css.d.ts +2 -0
  66. package/components/input/dist/styles/default/label-css.d.ts +2 -0
  67. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  68. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  69. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  70. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  71. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  75. package/components/layoutElement/dist/index.d.ts +1 -0
  76. package/components/layoutElement/dist/index.js +1 -0
  77. package/components/layoutElement/dist/registered.js +1 -0
  78. package/components/menu/README.md +1 -1
  79. package/components/menu/demo/api.min.js +2 -2
  80. package/components/menu/demo/index.min.js +2 -2
  81. package/components/menu/demo/readme.md +1 -1
  82. package/components/menu/dist/iconVersion.d.ts +1 -1
  83. package/components/menu/dist/index.js +2 -2
  84. package/components/menu/dist/registered.js +2 -2
  85. package/components/radio/README.md +1 -1
  86. package/components/radio/demo/api.md +8 -0
  87. package/components/radio/demo/api.min.js +13 -5
  88. package/components/radio/demo/index.min.js +13 -5
  89. package/components/radio/demo/readme.md +1 -1
  90. package/components/radio/dist/auro-radio.d.ts +4 -0
  91. package/components/radio/dist/index.js +13 -5
  92. package/components/radio/dist/registered.js +13 -5
  93. package/components/select/README.md +1 -1
  94. package/components/select/demo/api.html +15 -0
  95. package/components/select/demo/api.md +178 -0
  96. package/components/select/demo/api.min.js +403 -62
  97. package/components/select/demo/index.html +15 -0
  98. package/components/select/demo/index.md +177 -0
  99. package/components/select/demo/index.min.js +403 -62
  100. package/components/select/demo/readme.md +1 -1
  101. package/components/select/dist/auro-select.d.ts +27 -0
  102. package/components/select/dist/index.js +400 -58
  103. package/components/select/dist/registered.js +400 -58
  104. package/package.json +2 -2
  105. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  106. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  107. /package/components/{input/dist/styles/borders-css.d.ts → dropdown/dist/styles/default/bibColors-css.d.ts} +0 -0
  108. /package/components/{input/dist/styles/label-css.d.ts → dropdown/dist/styles/default/bibStyles-css.d.ts} +0 -0
  109. /package/components/{input/dist/styles/notificationIcons-css.d.ts → dropdown/dist/styles/default/color-css.d.ts} +0 -0
package/components/select/dist/index.js CHANGED
@@ -2,6 +2,7 @@ import { css, LitElement, html as html$1 } from 'lit';
2
2
  import { classMap } from 'lit/directives/class-map.js';
3
3
  import { unsafeStatic, literal, html } from 'lit/static-html.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
+ import { ifDefined as ifDefined$1 } from 'lit-html/directives/if-defined.js';
5
6
 
6
7
  class DateFormatter {
7
8
 
@@ -1477,16 +1478,21 @@ const flip$1 = function (options) {
1477
1478
  const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
1478
1479
  const nextPlacement = placements[nextIndex];
1479
1480
  if (nextPlacement) {
1480
- // Try next placement and re-run the lifecycle.
1481
- return {
1482
- data: {
1483
- index: nextIndex,
1484
- overflows: overflowsData
1485
- },
1486
- reset: {
1487
- placement: nextPlacement
1488
- }
1489
- };
1481
+ var _overflowsData$;
1482
+ const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
1483
+ const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
1484
+ if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
1485
+ // Try next placement and re-run the lifecycle.
1486
+ return {
1487
+ data: {
1488
+ index: nextIndex,
1489
+ overflows: overflowsData
1490
+ },
1491
+ reset: {
1492
+ placement: nextPlacement
1493
+ }
1494
+ };
1495
+ }
1490
1496
  }
1491
1497
 
1492
1498
  // First, find the candidates that fit on the mainAxis side of overflow,
@@ -2138,6 +2144,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
2138
2144
  scrollTop: 0
2139
2145
  };
2140
2146
  const offsets = createCoords(0);
2147
+
2148
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
2149
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
2150
+ function setLeftRTLScrollbarOffset() {
2151
+ offsets.x = getWindowScrollBarX(documentElement);
2152
+ }
2141
2153
  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
2142
2154
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
2143
2155
  scroll = getNodeScroll(offsetParent);
@@ -2147,11 +2159,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
2147
2159
  offsets.x = offsetRect.x + offsetParent.clientLeft;
2148
2160
  offsets.y = offsetRect.y + offsetParent.clientTop;
2149
2161
  } else if (documentElement) {
2150
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
2151
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
2152
- offsets.x = getWindowScrollBarX(documentElement);
2162
+ setLeftRTLScrollbarOffset();
2153
2163
  }
2154
2164
  }
2165
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
2166
+ setLeftRTLScrollbarOffset();
2167
+ }
2155
2168
  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
2156
2169
  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
2157
2170
  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -2328,7 +2341,7 @@ function observeMove(element, onMove) {
2328
2341
  // Handle <iframe>s
2329
2342
  root: root.ownerDocument
2330
2343
  });
2331
- } catch (e) {
2344
+ } catch (_e) {
2332
2345
  io = new IntersectionObserver(handleObserve, options);
2333
2346
  }
2334
2347
  io.observe(element);
@@ -3283,7 +3296,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
3283
3296
 
3284
3297
  var tokensCss$2 = css`: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)}`;
3285
3298
 
3286
- var colorCss$3 = css`: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)}`;
3299
+ var colorCss$3 = css`: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)}`;
3287
3300
 
3288
3301
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3289
3302
  // See LICENSE in the project root for license information.
@@ -3458,7 +3471,7 @@ var styleCss$2$1 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400)
3458
3471
 
3459
3472
  var colorCss$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
3460
3473
 
3461
- var tokensCss$1 = css`: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)}`;
3474
+ var tokensCss$1 = css`: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: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdown-helptext-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: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdown-helptext-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)}`;
3462
3475
 
3463
3476
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3464
3477
  // See LICENSE in the project root for license information.
@@ -3581,9 +3594,15 @@ class AuroDropdownBib extends LitElement {
3581
3594
 
3582
3595
  var dropdownVersion$1 = '3.0.0';
3583
3596
 
3584
- var styleCss$1$1 = css`: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)}`;
3597
+ var shapeSizeCss = css`.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:0;min-height:60px;max-height:60px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}`;
3598
+
3599
+ var styleCss$1$1 = css`:host([layout*=classic]){position:relative;display:inline-block;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .trigger{position:relative;display:flex;align-items:center}:host([layout*=classic]) .trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){:host([layout*=classic]) .trigger:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic][fluid]){display:block}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}:host([layout*=classic][inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
3600
+
3601
+ var colorCss$1$1 = css`:host .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,:host(:not([ondark])) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus,:host([ondark]) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([error]:not([ondark])){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error][ondark]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helpText{color:var(--ds-auro-dropdown-helptext-text-color)}`;
3585
3602
 
3586
- var colorCss$1$1 = css`.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))}`;
3603
+ var styleEmphasizedCss = css`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
3604
+
3605
+ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
3587
3606
 
3588
3607
  var colorCss$4 = css`: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)}`;
3589
3608
 
@@ -3793,6 +3812,98 @@ class AuroHelpText extends LitElement {
3793
3812
 
3794
3813
  var helpTextVersion = '1.0.0';
3795
3814
 
3815
+ let AuroElement$2 = class AuroElement extends LitElement {
3816
+ static get properties() {
3817
+ return {
3818
+
3819
+ /**
3820
+ * Defines the language of an element.
3821
+ * @default {'default'}
3822
+ */
3823
+ layout: {
3824
+ type: String,
3825
+ attribute: "layout",
3826
+ reflect: true
3827
+ },
3828
+
3829
+ shape: {
3830
+ type: String,
3831
+ attribute: "shape",
3832
+ reflect: true
3833
+ },
3834
+
3835
+ size: {
3836
+ type: String,
3837
+ attribute: "size",
3838
+ reflect: true
3839
+ },
3840
+
3841
+ onDark: {
3842
+ type: Boolean,
3843
+ attribute: "ondark",
3844
+ reflect: true
3845
+ }
3846
+ };
3847
+ }
3848
+
3849
+ resetShapeClasses() {
3850
+ if (this.shape && this.size) {
3851
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3852
+
3853
+ if (wrapper) {
3854
+ wrapper.classList.forEach((className) => {
3855
+ if (className.startsWith('shape-')) {
3856
+ wrapper.classList.remove(className);
3857
+ }
3858
+ });
3859
+
3860
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
3861
+ }
3862
+ }
3863
+ }
3864
+
3865
+ resetLayoutClasses() {
3866
+ if (this.layout) {
3867
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
3868
+
3869
+ if (wrapper) {
3870
+ wrapper.classList.forEach((className) => {
3871
+ if (className.startsWith('layout-')) {
3872
+ wrapper.classList.remove(className);
3873
+ }
3874
+ });
3875
+
3876
+ wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
3877
+ }
3878
+ }
3879
+ }
3880
+
3881
+ updateComponentArchitecture() {
3882
+ this.resetLayoutClasses();
3883
+ this.resetShapeClasses();
3884
+ }
3885
+
3886
+ updated(changedProperties) {
3887
+ if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
3888
+ this.updateComponentArchitecture();
3889
+ }
3890
+ }
3891
+
3892
+ // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
3893
+ // This will catch if an invalid layout value is passed in and render the default layout if so.
3894
+ render() {
3895
+ try {
3896
+ return this.renderLayout();
3897
+ } catch (error) {
3898
+ // failed to get the defined layout
3899
+ console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
3900
+
3901
+ // fallback to the default layout
3902
+ return this.getLayout('default');
3903
+ }
3904
+ }
3905
+ };
3906
+
3796
3907
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3797
3908
  // See LICENSE in the project root for license information.
3798
3909
 
@@ -3810,7 +3921,7 @@ var helpTextVersion = '1.0.0';
3810
3921
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
3811
3922
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
3812
3923
  */
3813
- class AuroDropdown extends LitElement {
3924
+ class AuroDropdown extends AuroElement$2 {
3814
3925
  constructor() {
3815
3926
  super();
3816
3927
 
@@ -3819,26 +3930,29 @@ class AuroDropdown extends LitElement {
3819
3930
  this.matchWidth = false;
3820
3931
  this.noHideOnThisFocusLoss = false;
3821
3932
 
3933
+ this.errorMessage = ''; // TODO!
3934
+
3935
+ // Layout Config
3936
+ this.layout = 'default';
3937
+ this.shape = 'rounded';
3938
+ this.size = 'xl';
3939
+
3822
3940
  this.privateDefaults();
3941
+ }
3823
3942
 
3824
- /**
3825
- * @private
3826
- * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3827
- */
3828
- this.constructor.shadowRootOptions = {
3829
- ...LitElement.shadowRootOptions,
3830
- delegatesFocus: true,
3943
+ get commonLabelClasses() {
3944
+ return {
3945
+ // 'withValue': this.value && this.value.length > 0
3831
3946
  };
3947
+ }
3832
3948
 
3833
- /**
3834
- * @private
3835
- */
3836
- this.triggerContentFocusable = false;
3837
-
3838
- /**
3839
- * @private
3840
- */
3841
- this.showTriggerBorders = true;
3949
+ get commonWrapperClasses() {
3950
+ return {
3951
+ 'trigger': true,
3952
+ 'wrapper': true,
3953
+ 'hasFocus': this.hasFocus,
3954
+ 'simple': this.simple
3955
+ };
3842
3956
  }
3843
3957
 
3844
3958
  /**
@@ -3846,7 +3960,6 @@ class AuroDropdown extends LitElement {
3846
3960
  * @returns {void} Internal defaults.
3847
3961
  */
3848
3962
  privateDefaults() {
3849
- this.bordered = false;
3850
3963
  this.chevron = false;
3851
3964
  this.disabled = false;
3852
3965
  this.error = false;
@@ -3856,8 +3969,11 @@ class AuroDropdown extends LitElement {
3856
3969
  this.noToggle = false;
3857
3970
  this.a11yAutocomplete = 'none';
3858
3971
  this.labeled = true;
3859
- this.a11yRole = 'combobox';
3972
+ this.a11yRole = 'button';
3860
3973
  this.onDark = false;
3974
+ this.showTriggerBorders = true;
3975
+ this.triggerContentFocusable = false;
3976
+ this.simple = false;
3861
3977
 
3862
3978
  // floaterConfig
3863
3979
  this.placement = 'bottom-start';
@@ -3865,6 +3981,15 @@ class AuroDropdown extends LitElement {
3865
3981
  this.noFlip = false;
3866
3982
  this.autoPlacement = false;
3867
3983
 
3984
+ /**
3985
+ * @private
3986
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3987
+ */
3988
+ this.constructor.shadowRootOptions = {
3989
+ ...LitElement.shadowRootOptions,
3990
+ delegatesFocus: true,
3991
+ };
3992
+
3868
3993
  /**
3869
3994
  * @private
3870
3995
  */
@@ -3955,7 +4080,7 @@ class AuroDropdown extends LitElement {
3955
4080
  /**
3956
4081
  * If declared, applies a border around the trigger slot.
3957
4082
  */
3958
- bordered: {
4083
+ simple: {
3959
4084
  type: Boolean,
3960
4085
  reflect: true
3961
4086
  },
@@ -4003,13 +4128,20 @@ class AuroDropdown extends LitElement {
4003
4128
  },
4004
4129
 
4005
4130
  /**
4006
- * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
4131
+ * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
4007
4132
  */
4008
4133
  error: {
4009
4134
  type: Boolean,
4010
4135
  reflect: true
4011
4136
  },
4012
4137
 
4138
+ /**
4139
+ * Contains the help text message for the current validity error.
4140
+ */
4141
+ errorMessage: {
4142
+ type: String
4143
+ },
4144
+
4013
4145
  /**
4014
4146
  * If declared, the bib will display when focus is applied to the trigger.
4015
4147
  */
@@ -4144,11 +4276,6 @@ class AuroDropdown extends LitElement {
4144
4276
 
4145
4277
  /**
4146
4278
  * Position where the bib should appear relative to the trigger.
4147
- * Accepted values:
4148
- * "top" | "right" | "bottom" | "left" |
4149
- * "bottom-start" | "top-start" | "top-end" |
4150
- * "right-start" | "right-end" | "bottom-end" |
4151
- * "left-start" | "left-end"
4152
4279
  * @default bottom-start
4153
4280
  */
4154
4281
  placement: {
@@ -4194,7 +4321,10 @@ class AuroDropdown extends LitElement {
4194
4321
  return [
4195
4322
  colorCss$1$1,
4196
4323
  styleCss$1$1,
4197
- tokensCss$1
4324
+ tokensCss$1,
4325
+ styleEmphasizedCss,
4326
+ styleSnowflakeCss,
4327
+ shapeSizeCss
4198
4328
  ];
4199
4329
  }
4200
4330
 
@@ -4230,6 +4360,7 @@ class AuroDropdown extends LitElement {
4230
4360
  }
4231
4361
 
4232
4362
  updated(changedProperties) {
4363
+ super.updated(changedProperties);
4233
4364
  this.floater.handleUpdate(changedProperties);
4234
4365
 
4235
4366
  // Note: `disabled` is not a breakpoint (it is not a screen size),
@@ -4239,7 +4370,7 @@ class AuroDropdown extends LitElement {
4239
4370
  }
4240
4371
 
4241
4372
  // when trigger's content is changed without any attribute or node change,
4242
- // `requestUpdate` needs to be called to update hasTriggerContnet
4373
+ // `requestUpdate` needs to be called to update hasTriggerContent
4243
4374
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4244
4375
  this.handleTriggerContentSlotChange();
4245
4376
  }
@@ -4300,6 +4431,24 @@ class AuroDropdown extends LitElement {
4300
4431
  return inCustomSlot;
4301
4432
  }
4302
4433
 
4434
+ /**
4435
+ * Function to support @focusin event.
4436
+ * @private
4437
+ * @return {void}
4438
+ */
4439
+ handleFocusin() {
4440
+ this.hasFocus = true;
4441
+ }
4442
+
4443
+ /**
4444
+ * Function to support @focusout event.
4445
+ * @private
4446
+ * @return {void}
4447
+ */
4448
+ handleFocusout() {
4449
+ this.hasFocus = false;
4450
+ }
4451
+
4303
4452
  /**
4304
4453
  * Determines if the element or any children are focusable.
4305
4454
  * @private
@@ -4359,8 +4508,8 @@ class AuroDropdown extends LitElement {
4359
4508
  }
4360
4509
 
4361
4510
  /**
4362
- * @private
4363
4511
  * Creates and dispatches a duplicate focus event on the trigger element.
4512
+ * @private
4364
4513
  * @param {Event} event - The original focus event.
4365
4514
  */
4366
4515
  bindFocusEventToTrigger(event) {
@@ -4373,9 +4522,9 @@ class AuroDropdown extends LitElement {
4373
4522
  }
4374
4523
 
4375
4524
  /**
4376
- * @private
4377
4525
  * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
4378
4526
  * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
4527
+ * @private
4379
4528
  */
4380
4529
  setupTriggerFocusEventBinding() {
4381
4530
  if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
@@ -4469,7 +4618,7 @@ class AuroDropdown extends LitElement {
4469
4618
  // If there are children
4470
4619
  if (triggerContentNodes) {
4471
4620
 
4472
- // See if any of them are focusable elemeents
4621
+ // See if any of them are focusable elements
4473
4622
  this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
4474
4623
 
4475
4624
  // If any of them are focusable elements
@@ -4555,8 +4704,75 @@ class AuroDropdown extends LitElement {
4555
4704
  this.labeled = nodesArr.length > 0;
4556
4705
  }
4557
4706
 
4558
- // function that renders the HTML and CSS into the scope of the component
4559
- render() {
4707
+ /**
4708
+ * Returns HTML for the common portion of the layouts.
4709
+ * @private
4710
+ * @param {Object} helpTextClasses - Classes to apply to the help text container.
4711
+ * @returns {html} - Returns HTML.
4712
+ */
4713
+ renderBasicHtml(helpTextClasses) {
4714
+ return html`
4715
+ <div>
4716
+ <div
4717
+ id="trigger"
4718
+ class="${classMap(this.commonWrapperClasses)}" part="wrapper"
4719
+ tabindex="${this.tabIndex}"
4720
+ ?showBorder="${this.showTriggerBorders}"
4721
+ role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
4722
+ aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4723
+ aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
4724
+ aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
4725
+ @focusin="${this.handleFocusin}"
4726
+ @blur="${this.handleFocusOut}">
4727
+ <div class="triggerContentWrapper">
4728
+ <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
4729
+ <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
4730
+ </label>
4731
+ <div class="triggerContent">
4732
+ <slot
4733
+ name="trigger"
4734
+ @slotchange="${this.handleTriggerContentSlotChange}"></slot>
4735
+ </div>
4736
+ </div>
4737
+ ${this.chevron || this.common ? html`
4738
+ <div
4739
+ id="showStateIcon"
4740
+ part="chevron">
4741
+ <${this.iconTag}
4742
+ category="interface"
4743
+ name="chevron-down"
4744
+ ?onDark="${this.onDark}"
4745
+ variant="${this.disabled ? 'disabled' : 'muted'}">
4746
+ >
4747
+ </${this.iconTag}>
4748
+ </div>
4749
+ ` : undefined }
4750
+ </div>
4751
+ <div class="${classMap(helpTextClasses)}">
4752
+ <slot name="helpText"></slot>
4753
+ </div>
4754
+ <div class="slotContent">
4755
+ <slot @slotchange="${this.handleDefaultSlot}"></slot>
4756
+ </div>
4757
+ <div id="bibSizer" part="size"></div>
4758
+ <${this.dropdownBibTag}
4759
+ id="bib"
4760
+ ?data-show="${this.isPopoverVisible}"
4761
+ ?isfullscreen="${this.isBibFullscreen}"
4762
+ ?common="${this.common}"
4763
+ ?rounded="${this.common || this.rounded}"
4764
+ ?inset="${this.common || this.inset}">
4765
+ </${this.dropdownBibTag}>
4766
+ </div>
4767
+ `;
4768
+ }
4769
+
4770
+ /**
4771
+ * Returns HTML for the classic layout. Does not support type="*".
4772
+ * @private
4773
+ * @returns {html} - Returns HTML for the classic layout.
4774
+ */
4775
+ renderLayoutClassic() {
4560
4776
  return html`
4561
4777
  <div>
4562
4778
  <div
@@ -4594,9 +4810,6 @@ class AuroDropdown extends LitElement {
4594
4810
  </div>
4595
4811
  ` : undefined }
4596
4812
  </div>
4597
- <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
4598
- <slot name="helpText"></slot>
4599
- </${this.helpTextTag}>
4600
4813
  <div class="slotContent">
4601
4814
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
4602
4815
  </div>
@@ -4613,6 +4826,67 @@ class AuroDropdown extends LitElement {
4613
4826
  </div>
4614
4827
  `;
4615
4828
  }
4829
+
4830
+ /**
4831
+ * Returns HTML for the snowflake layout. Does not support type="*".
4832
+ * @private
4833
+ * @returns {html} - Returns HTML for the snowflake layout.
4834
+ */
4835
+ renderLayoutSnowflake() {
4836
+ const helpTextClasses = {
4837
+ 'helpText': true,
4838
+ 'leftIndent': true,
4839
+ 'rightIndent': true
4840
+ };
4841
+
4842
+ return html`
4843
+ ${this.renderBasicHtml(helpTextClasses)}
4844
+ `;
4845
+ }
4846
+
4847
+ /**
4848
+ * Returns HTML for the emphasized layout. Does not support type="*".
4849
+ * @private
4850
+ * @returns {html} - Returns HTML for the emphasized layout.
4851
+ */
4852
+ renderLayoutEmphasized() {
4853
+ const helpTextClasses = {
4854
+ 'helpText': true,
4855
+ 'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
4856
+ 'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
4857
+ };
4858
+
4859
+ return html`
4860
+ ${this.renderBasicHtml(helpTextClasses)}
4861
+ `;
4862
+ }
4863
+
4864
+ /**
4865
+ * Logic to determine the layout of the component.
4866
+ * @private
4867
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
4868
+ * @returns {HTMLCollection} - Returns the HTML for the layout.
4869
+ */
4870
+ renderLayout(ForcedLayout) {
4871
+ const layout = ForcedLayout || this.layout;
4872
+
4873
+ switch (layout) {
4874
+ case 'emphasized':
4875
+ return this.renderLayoutEmphasized();
4876
+ case 'emphasized-left':
4877
+ return this.renderLayoutEmphasized();
4878
+ case 'emphasized-right':
4879
+ return this.renderLayoutEmphasized();
4880
+ case 'snowflake':
4881
+ return this.renderLayoutSnowflake();
4882
+ case 'snowflake-left':
4883
+ return this.renderLayoutSnowflake();
4884
+ case 'snowflake-right':
4885
+ return this.renderLayoutSnowflake();
4886
+ default:
4887
+ return this.renderLayoutClassic();
4888
+ }
4889
+ }
4616
4890
  }
4617
4891
 
4618
4892
  var dropdownVersion = '3.0.0';
@@ -4885,7 +5159,7 @@ class BaseIcon extends AuroElement {
4885
5159
 
4886
5160
  var tokensCss = css`: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)}`;
4887
5161
 
4888
- var colorCss = css`: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)}`;
5162
+ var colorCss = css`: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)}`;
4889
5163
 
4890
5164
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4891
5165
  // See LICENSE in the project root for license information.
@@ -5054,7 +5328,7 @@ class AuroIcon extends BaseIcon {
5054
5328
  }
5055
5329
  }
5056
5330
 
5057
- var iconVersion = '8.0.2';
5331
+ var iconVersion = '8.0.3';
5058
5332
 
5059
5333
  var styleCss$3 = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
5060
5334
 
@@ -5436,9 +5710,9 @@ css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline
5436
5710
 
5437
5711
  css`: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)}`;
5438
5712
 
5439
- css`: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)}`;
5713
+ css`: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)}`;
5440
5714
 
5441
- var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
5715
+ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host .nativeSelectWrapper{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0, 0, 0, 0);opacity:.01}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
5442
5716
 
5443
5717
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5444
5718
  // See LICENSE in the project root for license information.
@@ -5533,6 +5807,14 @@ class AuroSelect extends LitElement {
5533
5807
  static get properties() {
5534
5808
  return {
5535
5809
 
5810
+ /**
5811
+ * If declared, sets the autocomplete attribute for the select element.
5812
+ */
5813
+ autocomplete: {
5814
+ type: String,
5815
+ reflect: true
5816
+ },
5817
+
5536
5818
  /**
5537
5819
  * If declared, bib's position will be automatically calculated where to appear.
5538
5820
  * @default false
@@ -5550,6 +5832,14 @@ class AuroSelect extends LitElement {
5550
5832
  reflect: true
5551
5833
  },
5552
5834
 
5835
+ /**
5836
+ * The name for the select element.
5837
+ */
5838
+ name: {
5839
+ type: String,
5840
+ reflect: true
5841
+ },
5842
+
5553
5843
  /**
5554
5844
  * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
5555
5845
  */
@@ -6093,6 +6383,7 @@ class AuroSelect extends LitElement {
6093
6383
  this.menu.value = undefined;
6094
6384
  }
6095
6385
 
6386
+ this._updateNativeSelect();
6096
6387
  this.validation.validate(this);
6097
6388
 
6098
6389
  // LEGACY EVENT
@@ -6144,6 +6435,34 @@ class AuroSelect extends LitElement {
6144
6435
  this.validation.validate(this, force);
6145
6436
  }
6146
6437
 
6438
+ /**
6439
+ * Syncs the value from the native select element to the component's value.
6440
+ * @param {Event} event // The change event from the native select element.
6441
+ * @returns {void}
6442
+ * @private
6443
+ */
6444
+ _handleNativeSelectChange(event) {
6445
+ const selectedOption = event.target.options[event.target.selectedIndex];
6446
+ const selectedValue = selectedOption.value;
6447
+ const [currentValue] = this.value || [];
6448
+ this.value = !currentValue || currentValue !== selectedValue ? [selectedValue] : this.value;
6449
+ }
6450
+
6451
+ /**
6452
+ * Updates the native select element's value based on the component's value.
6453
+ * @returns {void}
6454
+ * @private
6455
+ */
6456
+ _updateNativeSelect() {
6457
+ const nativeSelect = this.shadowRoot.querySelector('select');
6458
+ if (!nativeSelect) {
6459
+ return;
6460
+ }
6461
+ const [value] = this.value || [];
6462
+ nativeSelect.value = value || '';
6463
+ }
6464
+
6465
+
6147
6466
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
6148
6467
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
6149
6468
 
@@ -6210,6 +6529,29 @@ class AuroSelect extends LitElement {
6210
6529
  }
6211
6530
  </p>
6212
6531
  </${this.dropdownTag}>
6532
+ <div class="nativeSelectWrapper">
6533
+ <select
6534
+ tabindex="-1"
6535
+ id="${`native-select-${this.id || this.uniqueId}`}"
6536
+ name="${this.name || ''}"
6537
+ ?disabled="${this.disabled}"
6538
+ ?required="${this.required}"
6539
+ aria-hidden="true"
6540
+ autocomplete="${ifDefined$1(this.autocomplete)}"
6541
+ @change="${this._handleNativeSelectChange}">
6542
+ <option value="" ?selected="${!this.value}"></option>
6543
+ ${this.options.map((option) => {
6544
+ const optionValue = option.value || option.textContent;
6545
+ return html`
6546
+ <option
6547
+ value="${optionValue}"
6548
+ ?selected="${this.value === optionValue}">
6549
+ ${option.textContent}
6550
+ </option>
6551
+ `;
6552
+ })}
6553
+ </select>
6554
+ </div>
6213
6555
  <!-- Help text and error message template -->
6214
6556
  </div>
6215
6557
  `;