@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.4 → 0.0.0-pr1477.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 (73) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -7
  2. package/components/bibtemplate/dist/index.js +1 -9
  3. package/components/bibtemplate/dist/registered.js +1 -9
  4. package/components/checkbox/demo/customize.min.js +1 -1
  5. package/components/checkbox/demo/getting-started.min.js +1 -1
  6. package/components/checkbox/demo/index.min.js +1 -1
  7. package/components/checkbox/dist/index.js +1 -1
  8. package/components/checkbox/dist/registered.js +1 -1
  9. package/components/combobox/demo/customize.min.js +18 -234
  10. package/components/combobox/demo/getting-started.min.js +18 -234
  11. package/components/combobox/demo/index.min.js +18 -234
  12. package/components/combobox/demo/keyboard-behavior.md +68 -8
  13. package/components/combobox/dist/index.js +18 -234
  14. package/components/combobox/dist/registered.js +18 -234
  15. package/components/counter/demo/customize.min.js +15 -231
  16. package/components/counter/demo/index.min.js +15 -231
  17. package/components/counter/demo/keyboard-behavior.md +0 -1
  18. package/components/counter/dist/index.js +433 -45
  19. package/components/counter/dist/registered.js +2 -10
  20. package/components/datepicker/demo/accessibility.md +3 -51
  21. package/components/datepicker/demo/api.md +0 -9
  22. package/components/datepicker/demo/customize.html +0 -2
  23. package/components/datepicker/demo/customize.md +8 -72
  24. package/components/datepicker/demo/design.md +1 -3
  25. package/components/datepicker/demo/index.js +1 -5
  26. package/components/datepicker/demo/index.md +1 -81
  27. package/components/datepicker/demo/index.min.js +101 -1350
  28. package/components/datepicker/demo/keyboard-behavior.md +2 -201
  29. package/components/datepicker/demo/voiceover.md +12 -19
  30. package/components/datepicker/dist/index.js +111 -1284
  31. package/components/datepicker/dist/registered.js +111 -1284
  32. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +1 -64
  33. package/components/datepicker/dist/src/auro-calendar-month.d.ts +0 -28
  34. package/components/datepicker/dist/src/auro-calendar.d.ts +0 -84
  35. package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -80
  36. package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +3 -5
  37. package/components/dropdown/demo/accessibility.md +0 -11
  38. package/components/dropdown/demo/api.md +0 -1
  39. package/components/dropdown/demo/customize.md +0 -3
  40. package/components/dropdown/demo/customize.min.js +13 -221
  41. package/components/dropdown/demo/getting-started.min.js +13 -221
  42. package/components/dropdown/demo/index.min.js +13 -221
  43. package/components/dropdown/demo/keyboard-behavior.md +0 -1
  44. package/components/dropdown/dist/auro-dropdown.d.ts +1 -31
  45. package/components/dropdown/dist/index.js +13 -221
  46. package/components/dropdown/dist/registered.js +13 -221
  47. package/components/form/demo/customize.min.js +987 -2806
  48. package/components/form/demo/getting-started.min.js +987 -2806
  49. package/components/form/demo/index.min.js +987 -2806
  50. package/components/form/demo/registerDemoDeps.min.js +982 -2801
  51. package/components/input/demo/customize.min.js +1 -1
  52. package/components/input/demo/getting-started.min.js +1 -1
  53. package/components/input/demo/index.min.js +1 -1
  54. package/components/input/dist/index.js +1 -1
  55. package/components/input/dist/registered.js +1 -1
  56. package/components/radio/demo/getting-started.js +1 -1
  57. package/components/radio/demo/getting-started.md +1 -1
  58. package/components/radio/demo/index.min.js +1 -1
  59. package/components/radio/dist/index.js +1 -1
  60. package/components/radio/dist/registered.js +1 -1
  61. package/components/select/demo/customize.min.js +33 -247
  62. package/components/select/demo/getting-started.min.js +33 -247
  63. package/components/select/demo/index.min.js +33 -247
  64. package/components/select/demo/keyboard-behavior.md +54 -9
  65. package/components/select/dist/index.js +33 -247
  66. package/components/select/dist/registered.js +33 -247
  67. package/custom-elements.json +1491 -2163
  68. package/package.json +2 -2
  69. package/components/datepicker/demo/customize.js +0 -19
  70. package/components/datepicker/demo/customize.min.js +0 -25810
  71. package/components/radio/demo/customize.min.js +0 -2186
  72. package/components/radio/demo/demo-support.min.js +0 -55807
  73. package/components/radio/demo/getting-started.min.js +0 -2205
@@ -1262,28 +1262,30 @@ function navigateArrow(component, direction, options = {}) {
1262
1262
  const selectKeyboardStrategy = {
1263
1263
  ArrowDown(component, evt, ctx) {
1264
1264
  evt.preventDefault();
1265
- if (evt.altKey || evt.metaKey) {
1266
- // navigate to last enabled option
1267
- selectKeyboardStrategy.End(component, evt, ctx);
1268
- return;
1265
+ if (ctx.isExpanded) {
1266
+ if (evt.altKey || evt.ctrlKey || evt.metaKey) {
1267
+ // navigate to last enabled option
1268
+ selectKeyboardStrategy.End(component, evt, ctx);
1269
+ } else {
1270
+ navigateArrow(component, 'down', { ctx });
1271
+ }
1272
+ } else {
1273
+ component.dropdown.show();
1269
1274
  }
1270
- navigateArrow(component, 'down', {
1271
- ctx,
1272
- showFn: () => component.dropdown.show(),
1273
- });
1274
1275
  },
1275
1276
 
1276
1277
  ArrowUp(component, evt, ctx) {
1277
1278
  evt.preventDefault();
1278
- if (evt.altKey || evt.metaKey) {
1279
- // navigate to first enabled option
1280
- selectKeyboardStrategy.Home(component, evt, ctx);
1281
- return;
1279
+ if (ctx.isExpanded) {
1280
+ if (evt.altKey || evt.ctrlKey || evt.metaKey) {
1281
+ // navigate to first enabled option
1282
+ selectKeyboardStrategy.Home(component, evt, ctx);
1283
+ } else {
1284
+ navigateArrow(component, 'up', { ctx });
1285
+ }
1286
+ } else {
1287
+ component.dropdown.show();
1282
1288
  }
1283
- navigateArrow(component, 'up', {
1284
- ctx,
1285
- showFn: () => component.dropdown.show(),
1286
- });
1287
1289
  },
1288
1290
 
1289
1291
  Escape(component, evt, ctx) {
@@ -4635,7 +4637,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
4635
4637
  });
4636
4638
  }
4637
4639
 
4638
- var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset: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}:host([desktopmodal]:popover-open)::backdrop{background:transparent}: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([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}: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}.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}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
4640
+ var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset: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}: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([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}: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}.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}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
4639
4641
 
4640
4642
  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)}`;
4641
4643
 
@@ -5266,7 +5268,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
5266
5268
  }
5267
5269
  };
5268
5270
 
5269
- var formkitVersion$1 = '202605190056';
5271
+ var formkitVersion$1 = '202605192014';
5270
5272
 
5271
5273
  class AuroElement extends LitElement {
5272
5274
  static get properties() {
@@ -5446,7 +5448,6 @@ class AuroDropdown extends AuroElement {
5446
5448
  _intializeDefaults() {
5447
5449
  this.appearance = 'default';
5448
5450
  this.chevron = false;
5449
- this.desktopModal = false;
5450
5451
  this.disabled = false;
5451
5452
  this.disableKeyboardHandling = false;
5452
5453
  this.error = false;
@@ -5627,14 +5628,6 @@ class AuroDropdown extends AuroElement {
5627
5628
  reflect: true
5628
5629
  },
5629
5630
 
5630
- /**
5631
- * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
5632
- */
5633
- desktopModal: {
5634
- type: Boolean,
5635
- reflect: true
5636
- },
5637
-
5638
5631
  /**
5639
5632
  * If declared, the dropdown will only show by calling the API .show() public method.
5640
5633
  */
@@ -5922,15 +5915,6 @@ class AuroDropdown extends AuroElement {
5922
5915
 
5923
5916
  disconnectedCallback() {
5924
5917
  super.disconnectedCallback();
5925
- this._clearPageInert();
5926
- if (this._bibTabHandler) {
5927
- this.removeEventListener('keydown', this._bibTabHandler);
5928
- this._bibTabHandler = undefined;
5929
- }
5930
- if (this.focusTrap) {
5931
- this.focusTrap.disconnect();
5932
- this.focusTrap = undefined;
5933
- }
5934
5918
  if (this.floater) {
5935
5919
  this.floater.hideBib('disconnect');
5936
5920
  this.floater.disconnect();
@@ -5958,45 +5942,19 @@ class AuroDropdown extends AuroElement {
5958
5942
  if (this.isPopoverVisible) {
5959
5943
  // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
5960
5944
  // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
5961
- this.bibElement.value.open(this.isBibFullscreen);
5962
- this.updateFocusTrap();
5963
-
5964
- // Desktop modal: make siblings inert so content outside is not interactive
5965
- if (this.desktopModal && !this.isBibFullscreen) {
5966
- this._setPageInert();
5967
- }
5945
+ const useModal = this.isBibFullscreen;
5946
+ this.bibElement.value.open(useModal);
5968
5947
  } else {
5969
5948
  this.bibElement.value.close();
5970
- this._clearPageInert();
5971
5949
  }
5972
5950
  }
5973
5951
 
5974
5952
  // When fullscreen strategy changes while open, re-open dialog with correct mode
5975
5953
  // (e.g. resizing from desktop → mobile while dropdown is open)
5976
5954
  if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
5955
+ const useModal = this.isBibFullscreen;
5977
5956
  this.bibElement.value.close();
5978
- this.bibElement.value.open(this.isBibFullscreen);
5979
-
5980
- // Re-initialize focus management for the new strategy
5981
- this.updateFocusTrap();
5982
-
5983
- // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
5984
- if (this.desktopModal && !this.isBibFullscreen) {
5985
- this._setPageInert();
5986
- } else {
5987
- this._clearPageInert();
5988
- }
5989
- }
5990
-
5991
- // Handle desktopModal toggled while the dropdown is already open.
5992
- // Re-initialize focus trapping and page inert state to match the new mode.
5993
- if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
5994
- this.updateFocusTrap();
5995
- if (this.desktopModal) {
5996
- this._setPageInert();
5997
- } else {
5998
- this._clearPageInert();
5999
- }
5957
+ this.bibElement.value.open(useModal);
6000
5958
  }
6001
5959
  }
6002
5960
 
@@ -6006,14 +5964,8 @@ class AuroDropdown extends AuroElement {
6006
5964
  * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
6007
5965
  */
6008
5966
  handleDropdownToggle(event) {
5967
+ this.updateFocusTrap();
6009
5968
  this.isPopoverVisible = event.detail.expanded;
6010
-
6011
- // Tear down FocusTrap when closing. Creation happens in updated()
6012
- // after the dialog is open so getFocusableElements can find content.
6013
- if (!this.isPopoverVisible) {
6014
- this.updateFocusTrap();
6015
- }
6016
-
6017
5969
  const eventType = event.detail.eventType || "unknown";
6018
5970
  if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
6019
5971
  this.trigger.focus();
@@ -6112,176 +6064,19 @@ class AuroDropdown extends AuroElement {
6112
6064
  * @private
6113
6065
  */
6114
6066
  updateFocusTrap() {
6115
- // Always clean up existing handlers/traps before setting up new ones
6116
- // to prevent duplicate listeners on repeated calls.
6117
- if (this._bibTabHandler) {
6118
- this.removeEventListener('keydown', this._bibTabHandler);
6119
- this._bibTabHandler = undefined;
6120
- }
6121
-
6122
- if (this.focusTrap) {
6123
- this.focusTrap.disconnect();
6124
- this.focusTrap = undefined;
6125
- }
6126
-
6127
6067
  if (this.isPopoverVisible) {
6128
6068
  if (!this.isBibFullscreen) {
6129
- if (this.desktopModal) {
6130
- // Desktop modal: trap focus only within the bib content.
6131
- // Can't use FocusTrap on the bib element because keydown events
6132
- // from slotted content bubble through the dropdown host (light DOM),
6133
- // not through the bib (shadow projection target). Using FocusTrap
6134
- // on the dropdown would include the trigger in the tab cycle.
6135
- // Instead, listen for Tab on the dropdown and manually wrap focus
6136
- // within the bib's focusable elements.
6137
- this._bibTabHandler = (event) => {
6138
- if (event.key !== 'Tab') {
6139
- return;
6140
- }
6141
-
6142
- // Collect focusable elements from the bib content.
6143
- const focusables = getFocusableElements(this.bibContent);
6144
-
6145
- // Fallback: try from slotted content directly
6146
- if (!focusables.length) {
6147
- const slot = this.shadowRoot.querySelector('.slotContent slot');
6148
- const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
6149
-
6150
- for (const node of assignedNodes) {
6151
- if (node.nodeType === Node.ELEMENT_NODE) {
6152
- focusables.push(...getFocusableElements(node));
6153
- }
6154
- }
6155
- }
6156
-
6157
- if (!focusables.length) {
6158
- return;
6159
- }
6160
-
6161
- event.preventDefault();
6162
-
6163
- const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
6164
-
6165
- // Walk the active element chain through shadow roots
6166
- const actives = this._getActiveElements();
6167
-
6168
- let idx = focusables.findIndex((el) => actives.includes(el));
6169
-
6170
- if (idx === -1) { // eslint-disable-line no-magic-numbers
6171
- // Focus is not on a known element — move to first/last
6172
- idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
6173
- }
6174
-
6175
- // Try each element in order, skipping any that can't receive focus
6176
- // (e.g. hidden elements, elements in collapsed sections)
6177
- for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
6178
- let nextIdx = idx + direction;
6179
-
6180
- // Wrap around
6181
- if (nextIdx < 0) {
6182
- nextIdx = focusables.length - 1;
6183
- } else if (nextIdx >= focusables.length) {
6184
- nextIdx = 0;
6185
- }
6186
-
6187
- focusables[nextIdx].focus();
6188
-
6189
- // Verify focus actually moved to the target
6190
- const newActives = this._getActiveElements();
6191
-
6192
- if (newActives.includes(focusables[nextIdx])) {
6193
- return;
6194
- }
6195
-
6196
- // Focus didn't stick — skip this element and try the next
6197
- idx = nextIdx;
6198
- }
6199
- };
6200
- this.addEventListener('keydown', this._bibTabHandler);
6201
-
6202
- // Move initial focus into the bib content, matching FocusTrap behavior
6203
- requestAnimationFrame(() => {
6204
- const focusables = getFocusableElements(this.bibContent);
6205
- if (focusables.length) {
6206
- focusables[0].focus();
6207
- }
6208
- });
6209
- } else {
6210
- // Normal desktop: use FocusTrap on the bib element
6211
- this.focusTrap = new FocusTrap(this.bibContent);
6212
- this.focusTrap.focusFirstElement();
6213
- }
6069
+ // Desktop: show() doesn't trap focus, so use FocusTrap
6070
+ this.focusTrap = new FocusTrap(this.bibContent);
6071
+ this.focusTrap.focusFirstElement();
6214
6072
  }
6215
6073
  // Fullscreen: showModal() provides native focus trapping
6216
- }
6217
- }
6218
-
6219
- /**
6220
- * Returns the chain of active (focused) elements through shadow roots.
6221
- * @private
6222
- * @returns {Array<HTMLElement>}
6223
- */
6224
- _getActiveElements() {
6225
- let { activeElement } = document;
6226
- const actives = [activeElement];
6227
-
6228
- while (activeElement?.shadowRoot?.activeElement) {
6229
- activeElement = activeElement.shadowRoot.activeElement;
6230
- actives.push(activeElement);
6231
- }
6232
-
6233
- return actives;
6234
- }
6235
-
6236
- /**
6237
- * Sets `inert` on sibling elements of the dropdown's top-level host
6238
- * so that content outside the dropdown is not interactive while the modal is open.
6239
- * Walks up through shadow DOM boundaries to find the outermost host element
6240
- * in the light DOM, then sets `inert` on siblings at each ancestor level
6241
- * to ensure all page content outside the host subtree is inert.
6242
- * @private
6243
- */
6244
- _setPageInert() {
6245
- if (this._inertSiblings) {
6246
6074
  return;
6247
6075
  }
6248
6076
 
6249
- this._inertSiblings = [];
6250
-
6251
- // Walk up through shadow DOM boundaries to find the topmost host
6252
- // element in the light DOM. For example, if this dropdown is inside
6253
- // auro-datepicker's shadow DOM, we walk up to the datepicker element
6254
- // so we set inert on its siblings — not on the datepicker itself.
6255
- let host = this;
6256
- while (host.getRootNode() instanceof ShadowRoot) {
6257
- host = host.getRootNode().host;
6258
- }
6259
-
6260
- // Walk up the ancestor chain, inerting siblings at each level
6261
- // to ensure the entire page outside the host subtree is inert.
6262
- let current = host;
6263
- while (current.parentElement) {
6264
- const parent = current.parentElement;
6265
- for (const sibling of parent.children) {
6266
- if (sibling !== current && !sibling.inert) {
6267
- sibling.inert = true;
6268
- this._inertSiblings.push(sibling);
6269
- }
6270
- }
6271
- current = parent;
6272
- }
6273
- }
6274
-
6275
- /**
6276
- * Restores `inert` state on siblings that were made inert by `_setPageInert`.
6277
- * @private
6278
- */
6279
- _clearPageInert() {
6280
- if (this._inertSiblings) {
6281
- for (const sibling of this._inertSiblings) {
6282
- sibling.inert = false;
6283
- }
6284
- this._inertSiblings = undefined;
6077
+ if (this.focusTrap) {
6078
+ this.focusTrap.disconnect();
6079
+ this.focusTrap = undefined;
6285
6080
  }
6286
6081
  }
6287
6082
 
@@ -6520,7 +6315,6 @@ class AuroDropdown extends AuroElement {
6520
6315
  shape="${this.shape}"
6521
6316
  ?data-show="${this.isPopoverVisible}"
6522
6317
  ?isfullscreen="${this.isBibFullscreen}"
6523
- ?desktopmodal="${this.desktopModal}"
6524
6318
  .dialogLabel="${this.bibDialogLabel}"
6525
6319
  ${ref(this.bibElement)}
6526
6320
  >
@@ -6888,14 +6682,6 @@ class AuroBibtemplate extends LitElement {
6888
6682
  large: {
6889
6683
  type: Boolean,
6890
6684
  reflect: true
6891
- },
6892
-
6893
- /**
6894
- * If declared, the footer slot will be rendered even when not in fullscreen mode.
6895
- */
6896
- showFooter: {
6897
- type: Boolean,
6898
- reflect: true
6899
6685
  }
6900
6686
  };
6901
6687
  }
@@ -6998,7 +6784,7 @@ class AuroBibtemplate extends LitElement {
6998
6784
  <slot></slot>
6999
6785
  </div>
7000
6786
 
7001
- ${this.isFullscreen || this.showFooter ? html`
6787
+ ${this.isFullscreen ? html`
7002
6788
  <div id="footerContainer">
7003
6789
  <slot name="footer"></slot>
7004
6790
  </div>` : null}
@@ -7235,7 +7021,7 @@ class AuroHelpText extends LitElement {
7235
7021
  }
7236
7022
  }
7237
7023
 
7238
- var formkitVersion = '202605190056';
7024
+ var formkitVersion = '202605192014';
7239
7025
 
7240
7026
  var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7241
7027