@aurodesignsystem-dev/auro-formkit 0.0.0-pr1304.0 → 0.0.0-pr1309.0

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 (63) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +10 -0
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +23 -13
  5. package/components/bibtemplate/dist/registered.js +23 -13
  6. package/components/checkbox/demo/api.md +7 -0
  7. package/components/checkbox/demo/api.min.js +16 -13
  8. package/components/checkbox/demo/index.min.js +16 -13
  9. package/components/checkbox/dist/auro-checkbox-group.d.ts +4 -3
  10. package/components/checkbox/dist/auro-checkbox.d.ts +2 -0
  11. package/components/checkbox/dist/index.js +7 -4
  12. package/components/checkbox/dist/registered.js +7 -4
  13. package/components/combobox/demo/api.min.js +449 -279
  14. package/components/combobox/demo/index.min.js +445 -275
  15. package/components/combobox/dist/index.js +331 -162
  16. package/components/combobox/dist/registered.js +331 -162
  17. package/components/counter/demo/api.min.js +356 -185
  18. package/components/counter/demo/index.min.js +356 -185
  19. package/components/counter/dist/auro-counter-button.d.ts +11 -2
  20. package/components/counter/dist/index.js +312 -145
  21. package/components/counter/dist/registered.js +312 -145
  22. package/components/datepicker/demo/api.min.js +491 -322
  23. package/components/datepicker/demo/index.min.js +491 -322
  24. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  25. package/components/datepicker/dist/iconVersion.d.ts +1 -1
  26. package/components/datepicker/dist/index.js +349 -180
  27. package/components/datepicker/dist/registered.js +349 -180
  28. package/components/dropdown/demo/api.md +1 -1
  29. package/components/dropdown/demo/api.min.js +287 -132
  30. package/components/dropdown/demo/index.min.js +287 -132
  31. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  32. package/components/dropdown/dist/index.js +274 -119
  33. package/components/dropdown/dist/registered.js +274 -119
  34. package/components/form/demo/api.min.js +13 -11
  35. package/components/form/demo/index.min.js +13 -11
  36. package/components/form/dist/auro-form.d.ts +8 -0
  37. package/components/form/dist/index.js +8 -6
  38. package/components/form/dist/registered.js +8 -6
  39. package/components/input/demo/api.md +2 -0
  40. package/components/input/demo/api.min.js +83 -79
  41. package/components/input/demo/index.min.js +83 -79
  42. package/components/input/dist/auro-input.d.ts +22 -0
  43. package/components/input/dist/base-input.d.ts +1 -18
  44. package/components/input/dist/buttonVersion.d.ts +1 -1
  45. package/components/input/dist/iconVersion.d.ts +1 -1
  46. package/components/input/dist/index.js +38 -34
  47. package/components/input/dist/registered.js +38 -34
  48. package/components/menu/demo/api.md +3 -3
  49. package/components/menu/demo/api.min.js +18 -17
  50. package/components/menu/demo/index.min.js +18 -17
  51. package/components/menu/dist/auro-menuoption.d.ts +2 -1
  52. package/components/menu/dist/index.js +7 -6
  53. package/components/menu/dist/registered.js +7 -6
  54. package/components/radio/demo/api.min.js +10 -10
  55. package/components/radio/demo/index.min.js +10 -10
  56. package/components/radio/dist/index.js +1 -1
  57. package/components/radio/dist/registered.js +1 -1
  58. package/components/select/demo/api.min.js +327 -161
  59. package/components/select/demo/index.min.js +327 -161
  60. package/components/select/dist/index.js +298 -133
  61. package/components/select/dist/registered.js +298 -133
  62. package/custom-elements.json +18143 -0
  63. package/package.json +38 -14
@@ -131,8 +131,9 @@ function getOppositeAxis(axis) {
131
131
  function getAxisLength(axis) {
132
132
  return axis === 'y' ? 'height' : 'width';
133
133
  }
134
+ const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
134
135
  function getSideAxis(placement) {
135
- return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
136
+ return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
136
137
  }
137
138
  function getAlignmentAxis(placement) {
138
139
  return getOppositeAxis(getSideAxis(placement));
@@ -157,19 +158,19 @@ function getExpandedPlacements(placement) {
157
158
  function getOppositeAlignmentPlacement(placement) {
158
159
  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
159
160
  }
161
+ const lrPlacement = ['left', 'right'];
162
+ const rlPlacement = ['right', 'left'];
163
+ const tbPlacement = ['top', 'bottom'];
164
+ const btPlacement = ['bottom', 'top'];
160
165
  function getSideList(side, isStart, rtl) {
161
- const lr = ['left', 'right'];
162
- const rl = ['right', 'left'];
163
- const tb = ['top', 'bottom'];
164
- const bt = ['bottom', 'top'];
165
166
  switch (side) {
166
167
  case 'top':
167
168
  case 'bottom':
168
- if (rtl) return isStart ? rl : lr;
169
- return isStart ? lr : rl;
169
+ if (rtl) return isStart ? rlPlacement : lrPlacement;
170
+ return isStart ? lrPlacement : rlPlacement;
170
171
  case 'left':
171
172
  case 'right':
172
- return isStart ? tb : bt;
173
+ return isStart ? tbPlacement : btPlacement;
173
174
  default:
174
175
  return [];
175
176
  }
@@ -610,16 +611,22 @@ const flip$1 = function (options) {
610
611
  const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
611
612
  const nextPlacement = placements[nextIndex];
612
613
  if (nextPlacement) {
613
- // Try next placement and re-run the lifecycle.
614
- return {
615
- data: {
616
- index: nextIndex,
617
- overflows: overflowsData
618
- },
619
- reset: {
620
- placement: nextPlacement
621
- }
622
- };
614
+ const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
615
+ if (!ignoreCrossAxisOverflow ||
616
+ // We leave the current main axis only if every placement on that axis
617
+ // overflows the main axis.
618
+ overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
619
+ // Try next placement and re-run the lifecycle.
620
+ return {
621
+ data: {
622
+ index: nextIndex,
623
+ overflows: overflowsData
624
+ },
625
+ reset: {
626
+ placement: nextPlacement
627
+ }
628
+ };
629
+ }
623
630
  }
624
631
 
625
632
  // First, find the candidates that fit on the mainAxis side of overflow,
@@ -665,6 +672,8 @@ const flip$1 = function (options) {
665
672
  };
666
673
  };
667
674
 
675
+ const originSides = /*#__PURE__*/new Set(['left', 'top']);
676
+
668
677
  // For type backwards-compatibility, the `OffsetOptions` type was also
669
678
  // Derivable.
670
679
 
@@ -678,7 +687,7 @@ async function convertValueToCoords(state, options) {
678
687
  const side = getSide(placement);
679
688
  const alignment = getAlignment(placement);
680
689
  const isVertical = getSideAxis(placement) === 'y';
681
- const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
690
+ const mainAxisMulti = originSides.has(side) ? -1 : 1;
682
691
  const crossAxisMulti = rtl && isVertical ? -1 : 1;
683
692
  const rawValue = evaluate(options, state);
684
693
 
@@ -871,6 +880,7 @@ function isShadowRoot(value) {
871
880
  }
872
881
  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
873
882
  }
883
+ const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
874
884
  function isOverflowElement(element) {
875
885
  const {
876
886
  overflow,
@@ -878,27 +888,32 @@ function isOverflowElement(element) {
878
888
  overflowY,
879
889
  display
880
890
  } = getComputedStyle$1(element);
881
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
891
+ return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
882
892
  }
893
+ const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
883
894
  function isTableElement(element) {
884
- return ['table', 'td', 'th'].includes(getNodeName(element));
895
+ return tableElements.has(getNodeName(element));
885
896
  }
897
+ const topLayerSelectors = [':popover-open', ':modal'];
886
898
  function isTopLayer(element) {
887
- return [':popover-open', ':modal'].some(selector => {
899
+ return topLayerSelectors.some(selector => {
888
900
  try {
889
901
  return element.matches(selector);
890
- } catch (e) {
902
+ } catch (_e) {
891
903
  return false;
892
904
  }
893
905
  });
894
906
  }
907
+ const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
908
+ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
909
+ const containValues = ['paint', 'layout', 'strict', 'content'];
895
910
  function isContainingBlock(elementOrCss) {
896
911
  const webkit = isWebKit();
897
912
  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
898
913
 
899
914
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
900
915
  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
901
- return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
916
+ return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
902
917
  }
903
918
  function getContainingBlock(element) {
904
919
  let currentNode = getParentNode(element);
@@ -916,8 +931,9 @@ function isWebKit() {
916
931
  if (typeof CSS === 'undefined' || !CSS.supports) return false;
917
932
  return CSS.supports('-webkit-backdrop-filter', 'none');
918
933
  }
934
+ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
919
935
  function isLastTraversableNode(node) {
920
- return ['html', 'body', '#document'].includes(getNodeName(node));
936
+ return lastTraversableNodeNames.has(getNodeName(node));
921
937
  }
922
938
  function getComputedStyle$1(element) {
923
939
  return getWindow(element).getComputedStyle(element);
@@ -1117,14 +1133,9 @@ function getWindowScrollBarX(element, rect) {
1117
1133
  return rect.left + leftScroll;
1118
1134
  }
1119
1135
 
1120
- function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
1121
- if (ignoreScrollbarX === void 0) {
1122
- ignoreScrollbarX = false;
1123
- }
1136
+ function getHTMLOffset(documentElement, scroll) {
1124
1137
  const htmlRect = documentElement.getBoundingClientRect();
1125
- const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
1126
- // RTL <body> scrollbar.
1127
- getWindowScrollBarX(documentElement, htmlRect));
1138
+ const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1128
1139
  const y = htmlRect.top + scroll.scrollTop;
1129
1140
  return {
1130
1141
  x,
@@ -1163,7 +1174,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1163
1174
  offsets.y = offsetRect.y + offsetParent.clientTop;
1164
1175
  }
1165
1176
  }
1166
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
1177
+ const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1167
1178
  return {
1168
1179
  width: rect.width * scale.x,
1169
1180
  height: rect.height * scale.y,
@@ -1197,6 +1208,10 @@ function getDocumentRect(element) {
1197
1208
  };
1198
1209
  }
1199
1210
 
1211
+ // Safety check: ensure the scrollbar space is reasonable in case this
1212
+ // calculation is affected by unusual styles.
1213
+ // Most scrollbars leave 15-18px of space.
1214
+ const SCROLLBAR_MAX = 25;
1200
1215
  function getViewportRect(element, strategy) {
1201
1216
  const win = getWindow(element);
1202
1217
  const html = getDocumentElement(element);
@@ -1214,6 +1229,24 @@ function getViewportRect(element, strategy) {
1214
1229
  y = visualViewport.offsetTop;
1215
1230
  }
1216
1231
  }
1232
+ const windowScrollbarX = getWindowScrollBarX(html);
1233
+ // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1234
+ // visual width of the <html> but this is not considered in the size
1235
+ // of `html.clientWidth`.
1236
+ if (windowScrollbarX <= 0) {
1237
+ const doc = html.ownerDocument;
1238
+ const body = doc.body;
1239
+ const bodyStyles = getComputedStyle(body);
1240
+ const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1241
+ const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1242
+ if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1243
+ width -= clippingStableScrollbarWidth;
1244
+ }
1245
+ } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1246
+ // If the <body> scrollbar is on the left, the width needs to be extended
1247
+ // by the scrollbar amount so there isn't extra space on the right.
1248
+ width += windowScrollbarX;
1249
+ }
1217
1250
  return {
1218
1251
  width,
1219
1252
  height,
@@ -1222,6 +1255,7 @@ function getViewportRect(element, strategy) {
1222
1255
  };
1223
1256
  }
1224
1257
 
1258
+ const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
1225
1259
  // Returns the inner client rect, subtracting scrollbars if present.
1226
1260
  function getInnerBoundingClientRect(element, strategy) {
1227
1261
  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1286,7 +1320,7 @@ function getClippingElementAncestors(element, cache) {
1286
1320
  if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1287
1321
  currentContainingBlockComputedStyle = null;
1288
1322
  }
1289
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1323
+ const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1290
1324
  if (shouldDropCurrentNode) {
1291
1325
  // Drop non-containing blocks.
1292
1326
  result = result.filter(ancestor => ancestor !== currentNode);
@@ -1349,6 +1383,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1349
1383
  scrollTop: 0
1350
1384
  };
1351
1385
  const offsets = createCoords(0);
1386
+
1387
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1388
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1389
+ function setLeftRTLScrollbarOffset() {
1390
+ offsets.x = getWindowScrollBarX(documentElement);
1391
+ }
1352
1392
  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1353
1393
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1354
1394
  scroll = getNodeScroll(offsetParent);
@@ -1358,11 +1398,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1358
1398
  offsets.x = offsetRect.x + offsetParent.clientLeft;
1359
1399
  offsets.y = offsetRect.y + offsetParent.clientTop;
1360
1400
  } else if (documentElement) {
1361
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1362
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1363
- offsets.x = getWindowScrollBarX(documentElement);
1401
+ setLeftRTLScrollbarOffset();
1364
1402
  }
1365
1403
  }
1404
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
1405
+ setLeftRTLScrollbarOffset();
1406
+ }
1366
1407
  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1367
1408
  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1368
1409
  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1539,7 +1580,7 @@ function observeMove(element, onMove) {
1539
1580
  // Handle <iframe>s
1540
1581
  root: root.ownerDocument
1541
1582
  });
1542
- } catch (e) {
1583
+ } catch (_e) {
1543
1584
  io = new IntersectionObserver(handleObserve, options);
1544
1585
  }
1545
1586
  io.observe(element);
@@ -2330,32 +2371,32 @@ class AuroFloatingUI {
2330
2371
 
2331
2372
  // Selectors for focusable elements
2332
2373
  const FOCUSABLE_SELECTORS = [
2333
- 'a[href]',
2334
- 'button:not([disabled])',
2335
- 'textarea:not([disabled])',
2336
- 'input:not([disabled])',
2337
- 'select:not([disabled])',
2374
+ "a[href]",
2375
+ "button:not([disabled])",
2376
+ "textarea:not([disabled])",
2377
+ "input:not([disabled])",
2378
+ "select:not([disabled])",
2338
2379
  '[role="tab"]:not([disabled])',
2339
2380
  '[role="link"]:not([disabled])',
2340
2381
  '[role="button"]:not([disabled])',
2341
2382
  '[tabindex]:not([tabindex="-1"])',
2342
- '[contenteditable]:not([contenteditable="false"])'
2383
+ '[contenteditable]:not([contenteditable="false"])',
2343
2384
  ];
2344
2385
 
2345
2386
  // List of custom components that are known to be focusable
2346
2387
  const FOCUSABLE_COMPONENTS = [
2347
- 'auro-checkbox',
2348
- 'auro-radio',
2349
- 'auro-dropdown',
2350
- 'auro-button',
2351
- 'auro-combobox',
2352
- 'auro-input',
2353
- 'auro-counter',
2354
- 'auro-menu',
2355
- 'auro-select',
2356
- 'auro-datepicker',
2357
- 'auro-hyperlink',
2358
- 'auro-accordion',
2388
+ "auro-checkbox",
2389
+ "auro-radio",
2390
+ "auro-dropdown",
2391
+ "auro-button",
2392
+ "auro-combobox",
2393
+ "auro-input",
2394
+ "auro-counter",
2395
+ // 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
2396
+ "auro-select",
2397
+ "auro-datepicker",
2398
+ "auro-hyperlink",
2399
+ "auro-accordion",
2359
2400
  ];
2360
2401
 
2361
2402
  /**
@@ -2369,21 +2410,43 @@ function isFocusableComponent(element) {
2369
2410
  const componentName = element.tagName.toLowerCase();
2370
2411
 
2371
2412
  // Guard Clause: Element is a focusable component
2372
- if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
2413
+ if (
2414
+ !FOCUSABLE_COMPONENTS.some(
2415
+ (name) => element.hasAttribute(name) || componentName === name,
2416
+ )
2417
+ )
2418
+ return false;
2373
2419
 
2374
2420
  // Guard Clause: Element is not disabled
2375
- if (element.hasAttribute('disabled')) return false;
2421
+ if (element.hasAttribute("disabled")) return false;
2376
2422
 
2377
2423
  // Guard Clause: The element is a hyperlink and has no href attribute
2378
- if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
2424
+ if (componentName.match("hyperlink") && !element.hasAttribute("href"))
2425
+ return false;
2379
2426
 
2380
2427
  // If all guard clauses pass, the element is a focusable component
2381
2428
  return true;
2382
2429
  }
2383
2430
 
2431
+ /**
2432
+ * Safely get a numeric tabindex for an element.
2433
+ * Returns a number if the tabindex is a valid integer, otherwise null.
2434
+ *
2435
+ * @param {HTMLElement} element The element whose tabindex to read.
2436
+ * @returns {?number} The numeric tabindex or null if missing/invalid.
2437
+ */
2438
+ function getNumericTabIndex(element) {
2439
+ const raw = element.getAttribute("tabindex");
2440
+ if (raw == null) return null;
2441
+
2442
+ const value = Number.parseInt(raw, 10);
2443
+ return Number.isNaN(value) ? null : value;
2444
+ }
2445
+
2384
2446
  /**
2385
2447
  * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2386
2448
  * Returns a unique, ordered array of elements that can receive focus.
2449
+ * Also sorts elements with tabindex first, preserving their order.
2387
2450
  *
2388
2451
  * @param {HTMLElement} container The container to search within
2389
2452
  * @returns {Array<HTMLElement>} An array of focusable elements within the container.
@@ -2417,14 +2480,14 @@ function getFocusableElements(container) {
2417
2480
  if (root.shadowRoot) {
2418
2481
  // Process shadow DOM children in order
2419
2482
  if (root.shadowRoot.children) {
2420
- Array.from(root.shadowRoot.children).forEach(child => {
2483
+ Array.from(root.shadowRoot.children).forEach((child) => {
2421
2484
  collectFocusableElements(child);
2422
2485
  });
2423
2486
  }
2424
2487
  }
2425
2488
 
2426
2489
  // Process slots and their assigned nodes in order
2427
- if (root.tagName === 'SLOT') {
2490
+ if (root.tagName === "SLOT") {
2428
2491
  const assignedNodes = root.assignedNodes({ flatten: true });
2429
2492
  for (const node of assignedNodes) {
2430
2493
  collectFocusableElements(node);
@@ -2432,7 +2495,7 @@ function getFocusableElements(container) {
2432
2495
  } else {
2433
2496
  // Process light DOM children in order
2434
2497
  if (root.children) {
2435
- Array.from(root.children).forEach(child => {
2498
+ Array.from(root.children).forEach((child) => {
2436
2499
  collectFocusableElements(child);
2437
2500
  });
2438
2501
  }
@@ -2455,7 +2518,37 @@ function getFocusableElements(container) {
2455
2518
  }
2456
2519
  }
2457
2520
 
2458
- return uniqueElements;
2521
+ // Move tab-indexed elements to the front while preserving their order
2522
+ // This ensures that elements with tabindex are prioritized in the focus order
2523
+
2524
+ // First extract elements with valid positive tabindex
2525
+ const elementsWithTabindex = uniqueElements.filter((el) => {
2526
+ const tabindex = getNumericTabIndex(el);
2527
+ return tabindex !== null && tabindex > 0;
2528
+ });
2529
+
2530
+ // Sort these elements by their tabindex value
2531
+ elementsWithTabindex.sort((a, b) => {
2532
+ const aIndex = getNumericTabIndex(a) ?? 0;
2533
+ const bIndex = getNumericTabIndex(b) ?? 0;
2534
+ return aIndex - bIndex;
2535
+ });
2536
+
2537
+ // Elements without tabindex (preserving their original order)
2538
+ const elementsWithoutTabindex = uniqueElements.filter((el) => {
2539
+ const tabindex = getNumericTabIndex(el);
2540
+
2541
+ // Elements without tabindex or with tabindex of 0 stay in DOM order
2542
+ return tabindex === null || tabindex === 0;
2543
+ });
2544
+
2545
+ // Combine both arrays with tabindex elements first
2546
+ const tabIndexedUniqueElements = [
2547
+ ...elementsWithTabindex,
2548
+ ...elementsWithoutTabindex,
2549
+ ];
2550
+
2551
+ return tabIndexedUniqueElements;
2459
2552
  }
2460
2553
 
2461
2554
  /**
@@ -2468,15 +2561,17 @@ class FocusTrap {
2468
2561
  * Initializes event listeners and prepares the container for focus management.
2469
2562
  *
2470
2563
  * @param {HTMLElement} container The DOM element to trap focus within.
2564
+ * @param {boolean} [controlTabOrder=false] If true enables manual control of the tab order by the FocusTrap.
2471
2565
  * @throws {Error} If the provided container is not a valid HTMLElement.
2472
2566
  */
2473
- constructor(container) {
2567
+ constructor(container, controlTabOrder = false) {
2474
2568
  if (!container || !(container instanceof HTMLElement)) {
2475
2569
  throw new Error("FocusTrap requires a valid HTMLElement.");
2476
2570
  }
2477
2571
 
2478
2572
  this.container = container;
2479
- this.tabDirection = 'forward'; // or 'backward'
2573
+ this.tabDirection = "forward"; // or 'backward';
2574
+ this.controlTabOrder = controlTabOrder;
2480
2575
 
2481
2576
  this._init();
2482
2577
  }
@@ -2488,58 +2583,119 @@ class FocusTrap {
2488
2583
  * @private
2489
2584
  */
2490
2585
  _init() {
2491
-
2492
2586
  // Add inert attribute to prevent focusing programmatically as well (if supported)
2493
- if ('inert' in HTMLElement.prototype) {
2587
+ if ("inert" in HTMLElement.prototype) {
2494
2588
  this.container.inert = false; // Ensure the container isn't inert
2495
- this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
2589
+ this.container.setAttribute("data-focus-trap-container", true); // Mark for identification
2496
2590
  }
2497
2591
 
2498
2592
  // Track tab direction
2499
- this.container.addEventListener('keydown', this._onKeydown);
2593
+ this.container.addEventListener("keydown", this._onKeydown);
2500
2594
  }
2501
2595
 
2502
2596
  /**
2503
- * Handles keydown events to manage tab navigation within the container.
2504
- * Ensures that focus wraps around when reaching the first or last focusable element.
2505
- *
2506
- * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
2597
+ * Gets an array of currently active (focused) elements in the document and shadow DOM.
2598
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2507
2599
  * @private
2508
2600
  */
2509
- _onKeydown = (e) => {
2510
-
2511
- if (e.key === 'Tab') {
2512
-
2513
- // Set the tab direction based on the key pressed
2514
- this.tabDirection = e.shiftKey ? 'backward' : 'forward';
2515
-
2516
- // Get the active element(s) in the document and shadow root
2517
- // This will include the active element in the shadow DOM if it exists
2518
- // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
2519
- let activeElement = document.activeElement;
2520
- const actives = [activeElement];
2521
- while (activeElement?.shadowRoot?.activeElement) {
2522
- actives.push(activeElement.shadowRoot.activeElement);
2523
- activeElement = activeElement.shadowRoot.activeElement;
2524
- }
2601
+ _getActiveElements() {
2602
+ // Get the active element(s) in the document and shadow root
2603
+ // This will include the active element in the shadow DOM if it exists
2604
+ // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
2605
+ let { activeElement } = document;
2606
+ const actives = [activeElement];
2607
+ while (activeElement?.shadowRoot?.activeElement) {
2608
+ actives.push(activeElement.shadowRoot.activeElement);
2609
+ activeElement = activeElement.shadowRoot.activeElement;
2610
+ }
2611
+ return actives;
2612
+ }
2525
2613
 
2526
- // Update the focusable elements
2527
- const focusables = this._getFocusableElements();
2528
-
2529
- // If we're at either end of the focusable elements, wrap around to the other end
2530
- const focusIndex =
2531
- (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
2532
- ? focusables.length - 1
2533
- : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
2534
- ? 0
2535
- : null;
2536
-
2537
- if (focusIndex !== null) {
2538
- focusables[focusIndex].focus();
2539
- e.preventDefault(); // Prevent default tab behavior
2540
- e.stopPropagation(); // Stop the event from bubbling up
2541
- }
2614
+ /**
2615
+ * Gets the next focus index based on the current index and focusable elements.
2616
+ * @param {number} currentIndex The current index of the focused element.
2617
+ * @param {Array<HTMLElement>} focusables The array of focusable elements.
2618
+ * @returns {number|null} The next focus index or null if not determined.
2619
+ */
2620
+ _getNextFocusIndex(currentIndex, focusables, actives) {
2621
+ if (this.controlTabOrder) {
2622
+ // Calculate the new index based on the current index and tab direction
2623
+ let newFocusIndex =
2624
+ currentIndex + (this.tabDirection === "forward" ? 1 : -1);
2625
+
2626
+ // Wrap-around logic
2627
+ if (newFocusIndex < 0) newFocusIndex = focusables.length - 1;
2628
+ if (newFocusIndex >= focusables.length) newFocusIndex = 0;
2629
+
2630
+ // Early return with the new index
2631
+ return newFocusIndex;
2542
2632
  }
2633
+
2634
+ // Determine if we need to wrap
2635
+ const atFirst =
2636
+ actives.includes(focusables[0]) || actives.includes(this.container);
2637
+ const atLast = actives.includes(focusables[focusables.length - 1]);
2638
+
2639
+ // Only wrap if at the ends
2640
+ if (this.tabDirection === "backward" && atFirst) {
2641
+ return focusables.length - 1;
2642
+ }
2643
+
2644
+ if (this.tabDirection === "forward" && atLast) {
2645
+ return 0;
2646
+ }
2647
+
2648
+ // No wrap, so don't change focus, return early
2649
+ return null;
2650
+ }
2651
+
2652
+ /**
2653
+ * Handles the Tab key press event to manage focus within the container.
2654
+ * @param {KeyboardEvent} e The keyboard event triggered by the user.
2655
+ * @returns {void}
2656
+ */
2657
+ _handleTabKey(e) {
2658
+ // Update the focusable elements
2659
+ const focusables = this._getFocusableElements();
2660
+
2661
+ // If there are no focusable elements, exit
2662
+ if (!focusables.length) return;
2663
+
2664
+ // Set the tab direction based on the key pressed
2665
+ this.tabDirection = e.shiftKey ? "backward" : "forward";
2666
+
2667
+ // Get the active elements that are currently focused
2668
+ const actives = this._getActiveElements();
2669
+
2670
+ // If we're at either end of the focusable elements, wrap around to the other end
2671
+ let focusIndex = focusables.findIndex((el) => actives.includes(el));
2672
+
2673
+ // Fallback if we have no focused element
2674
+ if (focusIndex === -1) focusIndex = 0;
2675
+
2676
+ // Get the next focus index based on the current focus index, tab direction, and controlTabOrder setting
2677
+ // Is null if no new focus index is determined
2678
+ const newFocusIndex = this._getNextFocusIndex(
2679
+ focusIndex,
2680
+ focusables,
2681
+ actives,
2682
+ );
2683
+
2684
+ // If we have a new focus index, set focus to that element
2685
+ if (newFocusIndex !== null) {
2686
+ e.preventDefault();
2687
+ focusables[newFocusIndex].focus();
2688
+ }
2689
+ }
2690
+
2691
+ /**
2692
+ * Catches the keydown event
2693
+ * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
2694
+ * @private
2695
+ */
2696
+ _onKeydown = (e) => {
2697
+ // Handle tab
2698
+ if (e.key === "Tab") this._handleTabKey(e);
2543
2699
  };
2544
2700
 
2545
2701
  /**
@@ -2552,8 +2708,8 @@ class FocusTrap {
2552
2708
  _getFocusableElements() {
2553
2709
  // Use the imported utility function to get focusable elements
2554
2710
  const elements = getFocusableElements(this.container);
2555
-
2556
- // Filter out any elements with the 'focus-bookend' class
2711
+
2712
+ // Return the elements found
2557
2713
  return elements;
2558
2714
  }
2559
2715
 
@@ -2580,12 +2736,11 @@ class FocusTrap {
2580
2736
  * Call this method to clean up when the focus trap is no longer needed.
2581
2737
  */
2582
2738
  disconnect() {
2583
-
2584
- if (this.container.hasAttribute('data-focus-trap-container')) {
2585
- this.container.removeAttribute('data-focus-trap-container');
2739
+ if (this.container.hasAttribute("data-focus-trap-container")) {
2740
+ this.container.removeAttribute("data-focus-trap-container");
2586
2741
  }
2587
2742
 
2588
- this.container.removeEventListener('keydown', this._onKeydown);
2743
+ this.container.removeEventListener("keydown", this._onKeydown);
2589
2744
  }
2590
2745
  }
2591
2746
 
@@ -2629,11 +2784,11 @@ class AuroDependencyVersioning {
2629
2784
  }
2630
2785
  }
2631
2786
 
2632
- class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<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>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
2633
- `;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
2787
+ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<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>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
2788
+ `;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
2634
2789
  `;var y=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)}
2635
- `;var k=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
2636
- `;class x extends z{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,k]}static register(t="auro-icon"){p.prototype.registerComponent(t,x);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html`
2790
+ `;var x=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
2791
+ `;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html`
2637
2792
  <div class="componentWrapper">
2638
2793
  <div
2639
2794
  class="${classMap({svgWrapper:true})}"
@@ -2653,7 +2808,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
2653
2808
  </div>
2654
2809
  `}}
2655
2810
 
2656
- var iconVersion = '9.1.1';
2811
+ var iconVersion = '9.1.2';
2657
2812
 
2658
2813
  var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
2659
2814
 
@@ -3094,7 +3249,7 @@ class AuroHelpText extends LitElement {
3094
3249
  }
3095
3250
  }
3096
3251
 
3097
- var formkitVersion = '202601262116';
3252
+ var formkitVersion = '202601270105';
3098
3253
 
3099
3254
  class AuroElement extends LitElement {
3100
3255
  static get properties() {
@@ -3322,7 +3477,7 @@ class AuroDropdown extends AuroElement {
3322
3477
  /**
3323
3478
  * @private
3324
3479
  */
3325
- this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion, x);
3480
+ this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion, _);
3326
3481
 
3327
3482
  /**
3328
3483
  * @private
@@ -3389,7 +3544,7 @@ class AuroDropdown extends AuroElement {
3389
3544
  * The value for the role attribute of the trigger element.
3390
3545
  */
3391
3546
  a11yRole: {
3392
- type: String || undefined,
3547
+ type: String,
3393
3548
  attribute: false,
3394
3549
  reflect: false
3395
3550
  },