@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/dropdown/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
2
- import { LitElement, css, html } from 'lit';
3
2
  import { classMap } from 'lit/directives/class-map.js';
3
+ import { LitElement, css, html } from 'lit';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
 
6
6
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
@@ -593,16 +593,21 @@ const flip$1 = function (options) {
593
593
  const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
594
594
  const nextPlacement = placements[nextIndex];
595
595
  if (nextPlacement) {
596
- // Try next placement and re-run the lifecycle.
597
- return {
598
- data: {
599
- index: nextIndex,
600
- overflows: overflowsData
601
- },
602
- reset: {
603
- placement: nextPlacement
604
- }
605
- };
596
+ var _overflowsData$;
597
+ const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
598
+ const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
599
+ if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
600
+ // Try next placement and re-run the lifecycle.
601
+ return {
602
+ data: {
603
+ index: nextIndex,
604
+ overflows: overflowsData
605
+ },
606
+ reset: {
607
+ placement: nextPlacement
608
+ }
609
+ };
610
+ }
606
611
  }
607
612
 
608
613
  // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1254,6 +1259,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1254
1259
  scrollTop: 0
1255
1260
  };
1256
1261
  const offsets = createCoords(0);
1262
+
1263
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1264
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1265
+ function setLeftRTLScrollbarOffset() {
1266
+ offsets.x = getWindowScrollBarX(documentElement);
1267
+ }
1257
1268
  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1258
1269
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1259
1270
  scroll = getNodeScroll(offsetParent);
@@ -1263,11 +1274,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1263
1274
  offsets.x = offsetRect.x + offsetParent.clientLeft;
1264
1275
  offsets.y = offsetRect.y + offsetParent.clientTop;
1265
1276
  } else if (documentElement) {
1266
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1267
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1268
- offsets.x = getWindowScrollBarX(documentElement);
1277
+ setLeftRTLScrollbarOffset();
1269
1278
  }
1270
1279
  }
1280
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
1281
+ setLeftRTLScrollbarOffset();
1282
+ }
1271
1283
  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1272
1284
  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1273
1285
  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1444,7 +1456,7 @@ function observeMove(element, onMove) {
1444
1456
  // Handle <iframe>s
1445
1457
  root: root.ownerDocument
1446
1458
  });
1447
- } catch (e) {
1459
+ } catch (_e) {
1448
1460
  io = new IntersectionObserver(handleObserve, options);
1449
1461
  }
1450
1462
  io.observe(element);
@@ -2257,7 +2269,7 @@ class AuroDependencyVersioning {
2257
2269
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
2258
2270
  */
2259
2271
 
2260
- class AuroElement extends LitElement {
2272
+ let AuroElement$1 = class AuroElement extends LitElement {
2261
2273
 
2262
2274
  // function to define props used within the scope of this component
2263
2275
  static get properties() {
@@ -2281,7 +2293,7 @@ class AuroElement extends LitElement {
2281
2293
 
2282
2294
  return 'false'
2283
2295
  }
2284
- }
2296
+ };
2285
2297
 
2286
2298
  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>"};
2287
2299
 
@@ -2325,7 +2337,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
2325
2337
  */
2326
2338
 
2327
2339
  // build the component class
2328
- class BaseIcon extends AuroElement {
2340
+ class BaseIcon extends AuroElement$1 {
2329
2341
  constructor() {
2330
2342
  super();
2331
2343
  this.onDark = false;
@@ -2399,7 +2411,7 @@ class BaseIcon extends AuroElement {
2399
2411
 
2400
2412
  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)}`;
2401
2413
 
2402
- 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)}`;
2414
+ 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)}`;
2403
2415
 
2404
2416
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2405
2417
  // See LICENSE in the project root for license information.
@@ -2574,7 +2586,7 @@ var styleCss$2 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400);d
2574
2586
 
2575
2587
  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)}`;
2576
2588
 
2577
- 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)}`;
2589
+ 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)}`;
2578
2590
 
2579
2591
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2580
2592
  // See LICENSE in the project root for license information.
@@ -2697,9 +2709,15 @@ class AuroDropdownBib extends LitElement {
2697
2709
 
2698
2710
  var dropdownVersion = '3.0.0';
2699
2711
 
2700
- var styleCss$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)}`;
2712
+ 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}`;
2713
+
2714
+ var styleCss$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)}`;
2715
+
2716
+ var colorCss$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)}`;
2717
+
2718
+ 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)}`;
2701
2719
 
2702
- var colorCss$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))}`;
2720
+ 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)}`;
2703
2721
 
2704
2722
  var colorCss = 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)}`;
2705
2723
 
@@ -2909,6 +2927,98 @@ class AuroHelpText extends LitElement {
2909
2927
 
2910
2928
  var helpTextVersion = '1.0.0';
2911
2929
 
2930
+ class AuroElement extends LitElement {
2931
+ static get properties() {
2932
+ return {
2933
+
2934
+ /**
2935
+ * Defines the language of an element.
2936
+ * @default {'default'}
2937
+ */
2938
+ layout: {
2939
+ type: String,
2940
+ attribute: "layout",
2941
+ reflect: true
2942
+ },
2943
+
2944
+ shape: {
2945
+ type: String,
2946
+ attribute: "shape",
2947
+ reflect: true
2948
+ },
2949
+
2950
+ size: {
2951
+ type: String,
2952
+ attribute: "size",
2953
+ reflect: true
2954
+ },
2955
+
2956
+ onDark: {
2957
+ type: Boolean,
2958
+ attribute: "ondark",
2959
+ reflect: true
2960
+ }
2961
+ };
2962
+ }
2963
+
2964
+ resetShapeClasses() {
2965
+ if (this.shape && this.size) {
2966
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
2967
+
2968
+ if (wrapper) {
2969
+ wrapper.classList.forEach((className) => {
2970
+ if (className.startsWith('shape-')) {
2971
+ wrapper.classList.remove(className);
2972
+ }
2973
+ });
2974
+
2975
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
2976
+ }
2977
+ }
2978
+ }
2979
+
2980
+ resetLayoutClasses() {
2981
+ if (this.layout) {
2982
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
2983
+
2984
+ if (wrapper) {
2985
+ wrapper.classList.forEach((className) => {
2986
+ if (className.startsWith('layout-')) {
2987
+ wrapper.classList.remove(className);
2988
+ }
2989
+ });
2990
+
2991
+ wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
2992
+ }
2993
+ }
2994
+ }
2995
+
2996
+ updateComponentArchitecture() {
2997
+ this.resetLayoutClasses();
2998
+ this.resetShapeClasses();
2999
+ }
3000
+
3001
+ updated(changedProperties) {
3002
+ if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
3003
+ this.updateComponentArchitecture();
3004
+ }
3005
+ }
3006
+
3007
+ // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
3008
+ // This will catch if an invalid layout value is passed in and render the default layout if so.
3009
+ render() {
3010
+ try {
3011
+ return this.renderLayout();
3012
+ } catch (error) {
3013
+ // failed to get the defined layout
3014
+ console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
3015
+
3016
+ // fallback to the default layout
3017
+ return this.getLayout('default');
3018
+ }
3019
+ }
3020
+ }
3021
+
2912
3022
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2913
3023
  // See LICENSE in the project root for license information.
2914
3024
 
@@ -2926,7 +3036,7 @@ var helpTextVersion = '1.0.0';
2926
3036
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
2927
3037
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
2928
3038
  */
2929
- class AuroDropdown extends LitElement {
3039
+ class AuroDropdown extends AuroElement {
2930
3040
  constructor() {
2931
3041
  super();
2932
3042
 
@@ -2935,26 +3045,29 @@ class AuroDropdown extends LitElement {
2935
3045
  this.matchWidth = false;
2936
3046
  this.noHideOnThisFocusLoss = false;
2937
3047
 
3048
+ this.errorMessage = ''; // TODO!
3049
+
3050
+ // Layout Config
3051
+ this.layout = 'default';
3052
+ this.shape = 'rounded';
3053
+ this.size = 'xl';
3054
+
2938
3055
  this.privateDefaults();
3056
+ }
2939
3057
 
2940
- /**
2941
- * @private
2942
- * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
2943
- */
2944
- this.constructor.shadowRootOptions = {
2945
- ...LitElement.shadowRootOptions,
2946
- delegatesFocus: true,
3058
+ get commonLabelClasses() {
3059
+ return {
3060
+ // 'withValue': this.value && this.value.length > 0
2947
3061
  };
3062
+ }
2948
3063
 
2949
- /**
2950
- * @private
2951
- */
2952
- this.triggerContentFocusable = false;
2953
-
2954
- /**
2955
- * @private
2956
- */
2957
- this.showTriggerBorders = true;
3064
+ get commonWrapperClasses() {
3065
+ return {
3066
+ 'trigger': true,
3067
+ 'wrapper': true,
3068
+ 'hasFocus': this.hasFocus,
3069
+ 'simple': this.simple
3070
+ };
2958
3071
  }
2959
3072
 
2960
3073
  /**
@@ -2962,7 +3075,6 @@ class AuroDropdown extends LitElement {
2962
3075
  * @returns {void} Internal defaults.
2963
3076
  */
2964
3077
  privateDefaults() {
2965
- this.bordered = false;
2966
3078
  this.chevron = false;
2967
3079
  this.disabled = false;
2968
3080
  this.error = false;
@@ -2972,8 +3084,11 @@ class AuroDropdown extends LitElement {
2972
3084
  this.noToggle = false;
2973
3085
  this.a11yAutocomplete = 'none';
2974
3086
  this.labeled = true;
2975
- this.a11yRole = 'combobox';
3087
+ this.a11yRole = 'button';
2976
3088
  this.onDark = false;
3089
+ this.showTriggerBorders = true;
3090
+ this.triggerContentFocusable = false;
3091
+ this.simple = false;
2977
3092
 
2978
3093
  // floaterConfig
2979
3094
  this.placement = 'bottom-start';
@@ -2981,6 +3096,15 @@ class AuroDropdown extends LitElement {
2981
3096
  this.noFlip = false;
2982
3097
  this.autoPlacement = false;
2983
3098
 
3099
+ /**
3100
+ * @private
3101
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
3102
+ */
3103
+ this.constructor.shadowRootOptions = {
3104
+ ...LitElement.shadowRootOptions,
3105
+ delegatesFocus: true,
3106
+ };
3107
+
2984
3108
  /**
2985
3109
  * @private
2986
3110
  */
@@ -3071,7 +3195,7 @@ class AuroDropdown extends LitElement {
3071
3195
  /**
3072
3196
  * If declared, applies a border around the trigger slot.
3073
3197
  */
3074
- bordered: {
3198
+ simple: {
3075
3199
  type: Boolean,
3076
3200
  reflect: true
3077
3201
  },
@@ -3119,13 +3243,20 @@ class AuroDropdown extends LitElement {
3119
3243
  },
3120
3244
 
3121
3245
  /**
3122
- * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
3246
+ * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
3123
3247
  */
3124
3248
  error: {
3125
3249
  type: Boolean,
3126
3250
  reflect: true
3127
3251
  },
3128
3252
 
3253
+ /**
3254
+ * Contains the help text message for the current validity error.
3255
+ */
3256
+ errorMessage: {
3257
+ type: String
3258
+ },
3259
+
3129
3260
  /**
3130
3261
  * If declared, the bib will display when focus is applied to the trigger.
3131
3262
  */
@@ -3260,11 +3391,6 @@ class AuroDropdown extends LitElement {
3260
3391
 
3261
3392
  /**
3262
3393
  * Position where the bib should appear relative to the trigger.
3263
- * Accepted values:
3264
- * "top" | "right" | "bottom" | "left" |
3265
- * "bottom-start" | "top-start" | "top-end" |
3266
- * "right-start" | "right-end" | "bottom-end" |
3267
- * "left-start" | "left-end"
3268
3394
  * @default bottom-start
3269
3395
  */
3270
3396
  placement: {
@@ -3310,7 +3436,10 @@ class AuroDropdown extends LitElement {
3310
3436
  return [
3311
3437
  colorCss$1,
3312
3438
  styleCss$1,
3313
- tokensCss$1
3439
+ tokensCss$1,
3440
+ styleEmphasizedCss,
3441
+ styleSnowflakeCss,
3442
+ shapeSizeCss
3314
3443
  ];
3315
3444
  }
3316
3445
 
@@ -3346,6 +3475,7 @@ class AuroDropdown extends LitElement {
3346
3475
  }
3347
3476
 
3348
3477
  updated(changedProperties) {
3478
+ super.updated(changedProperties);
3349
3479
  this.floater.handleUpdate(changedProperties);
3350
3480
 
3351
3481
  // Note: `disabled` is not a breakpoint (it is not a screen size),
@@ -3355,7 +3485,7 @@ class AuroDropdown extends LitElement {
3355
3485
  }
3356
3486
 
3357
3487
  // when trigger's content is changed without any attribute or node change,
3358
- // `requestUpdate` needs to be called to update hasTriggerContnet
3488
+ // `requestUpdate` needs to be called to update hasTriggerContent
3359
3489
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3360
3490
  this.handleTriggerContentSlotChange();
3361
3491
  }
@@ -3416,6 +3546,24 @@ class AuroDropdown extends LitElement {
3416
3546
  return inCustomSlot;
3417
3547
  }
3418
3548
 
3549
+ /**
3550
+ * Function to support @focusin event.
3551
+ * @private
3552
+ * @return {void}
3553
+ */
3554
+ handleFocusin() {
3555
+ this.hasFocus = true;
3556
+ }
3557
+
3558
+ /**
3559
+ * Function to support @focusout event.
3560
+ * @private
3561
+ * @return {void}
3562
+ */
3563
+ handleFocusout() {
3564
+ this.hasFocus = false;
3565
+ }
3566
+
3419
3567
  /**
3420
3568
  * Determines if the element or any children are focusable.
3421
3569
  * @private
@@ -3475,8 +3623,8 @@ class AuroDropdown extends LitElement {
3475
3623
  }
3476
3624
 
3477
3625
  /**
3478
- * @private
3479
3626
  * Creates and dispatches a duplicate focus event on the trigger element.
3627
+ * @private
3480
3628
  * @param {Event} event - The original focus event.
3481
3629
  */
3482
3630
  bindFocusEventToTrigger(event) {
@@ -3489,9 +3637,9 @@ class AuroDropdown extends LitElement {
3489
3637
  }
3490
3638
 
3491
3639
  /**
3492
- * @private
3493
3640
  * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
3494
3641
  * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
3642
+ * @private
3495
3643
  */
3496
3644
  setupTriggerFocusEventBinding() {
3497
3645
  if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
@@ -3585,7 +3733,7 @@ class AuroDropdown extends LitElement {
3585
3733
  // If there are children
3586
3734
  if (triggerContentNodes) {
3587
3735
 
3588
- // See if any of them are focusable elemeents
3736
+ // See if any of them are focusable elements
3589
3737
  this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
3590
3738
 
3591
3739
  // If any of them are focusable elements
@@ -3671,8 +3819,75 @@ class AuroDropdown extends LitElement {
3671
3819
  this.labeled = nodesArr.length > 0;
3672
3820
  }
3673
3821
 
3674
- // function that renders the HTML and CSS into the scope of the component
3675
- render() {
3822
+ /**
3823
+ * Returns HTML for the common portion of the layouts.
3824
+ * @private
3825
+ * @param {Object} helpTextClasses - Classes to apply to the help text container.
3826
+ * @returns {html} - Returns HTML.
3827
+ */
3828
+ renderBasicHtml(helpTextClasses) {
3829
+ return html$1`
3830
+ <div>
3831
+ <div
3832
+ id="trigger"
3833
+ class="${classMap(this.commonWrapperClasses)}" part="wrapper"
3834
+ tabindex="${this.tabIndex}"
3835
+ ?showBorder="${this.showTriggerBorders}"
3836
+ role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
3837
+ aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
3838
+ aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
3839
+ aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
3840
+ @focusin="${this.handleFocusin}"
3841
+ @blur="${this.handleFocusOut}">
3842
+ <div class="triggerContentWrapper">
3843
+ <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
3844
+ <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
3845
+ </label>
3846
+ <div class="triggerContent">
3847
+ <slot
3848
+ name="trigger"
3849
+ @slotchange="${this.handleTriggerContentSlotChange}"></slot>
3850
+ </div>
3851
+ </div>
3852
+ ${this.chevron || this.common ? html$1`
3853
+ <div
3854
+ id="showStateIcon"
3855
+ part="chevron">
3856
+ <${this.iconTag}
3857
+ category="interface"
3858
+ name="chevron-down"
3859
+ ?onDark="${this.onDark}"
3860
+ variant="${this.disabled ? 'disabled' : 'muted'}">
3861
+ >
3862
+ </${this.iconTag}>
3863
+ </div>
3864
+ ` : undefined }
3865
+ </div>
3866
+ <div class="${classMap(helpTextClasses)}">
3867
+ <slot name="helpText"></slot>
3868
+ </div>
3869
+ <div class="slotContent">
3870
+ <slot @slotchange="${this.handleDefaultSlot}"></slot>
3871
+ </div>
3872
+ <div id="bibSizer" part="size"></div>
3873
+ <${this.dropdownBibTag}
3874
+ id="bib"
3875
+ ?data-show="${this.isPopoverVisible}"
3876
+ ?isfullscreen="${this.isBibFullscreen}"
3877
+ ?common="${this.common}"
3878
+ ?rounded="${this.common || this.rounded}"
3879
+ ?inset="${this.common || this.inset}">
3880
+ </${this.dropdownBibTag}>
3881
+ </div>
3882
+ `;
3883
+ }
3884
+
3885
+ /**
3886
+ * Returns HTML for the classic layout. Does not support type="*".
3887
+ * @private
3888
+ * @returns {html} - Returns HTML for the classic layout.
3889
+ */
3890
+ renderLayoutClassic() {
3676
3891
  return html$1`
3677
3892
  <div>
3678
3893
  <div
@@ -3710,9 +3925,6 @@ class AuroDropdown extends LitElement {
3710
3925
  </div>
3711
3926
  ` : undefined }
3712
3927
  </div>
3713
- <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
3714
- <slot name="helpText"></slot>
3715
- </${this.helpTextTag}>
3716
3928
  <div class="slotContent">
3717
3929
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
3718
3930
  </div>
@@ -3729,6 +3941,67 @@ class AuroDropdown extends LitElement {
3729
3941
  </div>
3730
3942
  `;
3731
3943
  }
3944
+
3945
+ /**
3946
+ * Returns HTML for the snowflake layout. Does not support type="*".
3947
+ * @private
3948
+ * @returns {html} - Returns HTML for the snowflake layout.
3949
+ */
3950
+ renderLayoutSnowflake() {
3951
+ const helpTextClasses = {
3952
+ 'helpText': true,
3953
+ 'leftIndent': true,
3954
+ 'rightIndent': true
3955
+ };
3956
+
3957
+ return html$1`
3958
+ ${this.renderBasicHtml(helpTextClasses)}
3959
+ `;
3960
+ }
3961
+
3962
+ /**
3963
+ * Returns HTML for the emphasized layout. Does not support type="*".
3964
+ * @private
3965
+ * @returns {html} - Returns HTML for the emphasized layout.
3966
+ */
3967
+ renderLayoutEmphasized() {
3968
+ const helpTextClasses = {
3969
+ 'helpText': true,
3970
+ 'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
3971
+ 'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
3972
+ };
3973
+
3974
+ return html$1`
3975
+ ${this.renderBasicHtml(helpTextClasses)}
3976
+ `;
3977
+ }
3978
+
3979
+ /**
3980
+ * Logic to determine the layout of the component.
3981
+ * @private
3982
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
3983
+ * @returns {HTMLCollection} - Returns the HTML for the layout.
3984
+ */
3985
+ renderLayout(ForcedLayout) {
3986
+ const layout = ForcedLayout || this.layout;
3987
+
3988
+ switch (layout) {
3989
+ case 'emphasized':
3990
+ return this.renderLayoutEmphasized();
3991
+ case 'emphasized-left':
3992
+ return this.renderLayoutEmphasized();
3993
+ case 'emphasized-right':
3994
+ return this.renderLayoutEmphasized();
3995
+ case 'snowflake':
3996
+ return this.renderLayoutSnowflake();
3997
+ case 'snowflake-left':
3998
+ return this.renderLayoutSnowflake();
3999
+ case 'snowflake-right':
4000
+ return this.renderLayoutSnowflake();
4001
+ default:
4002
+ return this.renderLayoutClassic();
4003
+ }
4004
+ }
3732
4005
  }
3733
4006
 
3734
4007
  export { AuroDropdown };