@aurodesignsystem-dev/auro-formkit 0.0.0-pr1398.2 → 0.0.0-pr1398.3

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 (61) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/api.min.js +129 -166
  7. package/components/combobox/demo/index.min.js +129 -166
  8. package/components/combobox/demo/keyboardBehavior.html +81 -0
  9. package/components/combobox/demo/keyboardBehavior.md +308 -0
  10. package/components/combobox/dist/index.js +87 -134
  11. package/components/combobox/dist/registered.js +87 -134
  12. package/components/counter/demo/api.min.js +157 -160
  13. package/components/counter/demo/index.min.js +157 -160
  14. package/components/counter/demo/keyboardBehavior.html +81 -0
  15. package/components/counter/demo/keyboardBehavior.md +127 -0
  16. package/components/counter/dist/auro-counter.d.ts +0 -7
  17. package/components/counter/dist/index.js +157 -160
  18. package/components/counter/dist/keyboardStrategy.d.ts +4 -0
  19. package/components/counter/dist/registered.js +157 -160
  20. package/components/datepicker/demo/api.min.js +89 -137
  21. package/components/datepicker/demo/index.min.js +89 -137
  22. package/components/datepicker/demo/keyboardBehavior.html +81 -0
  23. package/components/datepicker/demo/keyboardBehavior.md +24 -0
  24. package/components/datepicker/dist/index.js +84 -132
  25. package/components/datepicker/dist/registered.js +84 -132
  26. package/components/dropdown/demo/api.md +0 -1
  27. package/components/dropdown/demo/api.min.js +99 -140
  28. package/components/dropdown/demo/index.md +2 -2
  29. package/components/dropdown/demo/index.min.js +99 -140
  30. package/components/dropdown/demo/keyboardBehavior.html +81 -0
  31. package/components/dropdown/demo/keyboardBehavior.md +77 -0
  32. package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
  33. package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -50
  34. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
  35. package/components/dropdown/dist/index.js +83 -128
  36. package/components/dropdown/dist/registered.js +83 -128
  37. package/components/form/demo/api.min.js +466 -599
  38. package/components/form/demo/index.min.js +466 -599
  39. package/components/form/demo/keyboardBehavior.md +0 -0
  40. package/components/input/demo/api.min.js +1 -1
  41. package/components/input/demo/index.min.js +1 -1
  42. package/components/input/demo/keyboardBehavior.md +0 -0
  43. package/components/input/dist/index.js +1 -1
  44. package/components/input/dist/registered.js +1 -1
  45. package/components/menu/demo/api.min.js +42 -32
  46. package/components/menu/demo/index.min.js +42 -32
  47. package/components/menu/dist/auro-menu.d.ts +3 -11
  48. package/components/menu/dist/index.js +42 -32
  49. package/components/menu/dist/registered.js +42 -32
  50. package/components/radio/demo/api.min.js +1 -1
  51. package/components/radio/demo/index.min.js +1 -1
  52. package/components/radio/dist/index.js +1 -1
  53. package/components/radio/dist/registered.js +1 -1
  54. package/components/select/demo/api.min.js +132 -167
  55. package/components/select/demo/index.min.js +132 -167
  56. package/components/select/demo/keyboardBehavior.html +81 -0
  57. package/components/select/demo/keyboardBehavior.md +246 -0
  58. package/components/select/dist/index.js +90 -135
  59. package/components/select/dist/registered.js +90 -135
  60. package/custom-elements.json +61 -89
  61. package/package.json +2 -2
@@ -1305,7 +1305,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
1305
1305
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
1306
1306
  * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
1307
1307
  */
1308
- function createDisplayContext(component, options = {}) {
1308
+ function createDisplayContext$1(component, options = {}) {
1309
1309
  const dd = options.dropdown || component.dropdown;
1310
1310
  // isPopoverVisible reflects as the `open` attribute.
1311
1311
  // It reports whether the bib is open in any mode (popover or modal).
@@ -1335,11 +1335,11 @@ function createDisplayContext(component, options = {}) {
1335
1335
  * @param {Object} strategy - Map of key names to handler functions.
1336
1336
  * @param {Object} [options] - Optional config passed to createDisplayContext.
1337
1337
  */
1338
- function applyKeyboardStrategy(component, strategy, options = {}) {
1338
+ function applyKeyboardStrategy$1(component, strategy, options = {}) {
1339
1339
  component.addEventListener('keydown', async (evt) => {
1340
1340
  const handler = strategy[evt.key] || strategy.default;
1341
1341
  if (typeof handler === 'function') {
1342
- const ctx = createDisplayContext(component, options);
1342
+ const ctx = createDisplayContext$1(component, options);
1343
1343
  await handler(component, evt, ctx);
1344
1344
  }
1345
1345
  });
@@ -3527,11 +3527,10 @@ class AuroFloatingUI {
3527
3527
  return;
3528
3528
  }
3529
3529
 
3530
- const { activeElement } = document;
3531
3530
  // if focus is still inside of trigger or bib, do not close
3532
3531
  if (
3533
- this.element.contains(activeElement) ||
3534
- this.element.bib?.contains(activeElement)
3532
+ this.element.matches(":focus") ||
3533
+ this.element.matches(":focus-within")
3535
3534
  ) {
3536
3535
  return;
3537
3536
  }
@@ -4370,12 +4369,83 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
4370
4369
 
4371
4370
  var iconVersion$2 = '9.1.2';
4372
4371
 
4372
+ /**
4373
+ * Computes display state once per keydown event.
4374
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
4375
+ *
4376
+ * @param {HTMLElement} component - The component with a dropdown reference.
4377
+ * @param {Object} [options] - Optional config.
4378
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
4379
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
4380
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
4381
+ * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
4382
+ */
4383
+ function createDisplayContext(component, options = {}) {
4384
+ const dd = options.dropdown || component.dropdown;
4385
+ // isPopoverVisible reflects as the `open` attribute.
4386
+ // It reports whether the bib is open in any mode (popover or modal).
4387
+ const isExpanded = Boolean(dd && dd.isPopoverVisible);
4388
+ const isFullscreen = Boolean(dd && dd.isBibFullscreen);
4389
+
4390
+ const ctx = {
4391
+ isExpanded,
4392
+ isModal: isFullscreen,
4393
+ isPopover: !isFullscreen,
4394
+ activeInput: null,
4395
+ };
4396
+
4397
+ if (options.inputResolver) {
4398
+ const resolvedInput = options.inputResolver(component, ctx);
4399
+ // Guard against resolvers returning undefined or non-HTMLElement values.
4400
+ ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
4401
+ }
4402
+
4403
+ return ctx;
4404
+ }
4405
+
4406
+ /**
4407
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
4408
+ * Handles both sync and async handlers.
4409
+ * @param {HTMLElement} component - The component to attach the listener to.
4410
+ * @param {Object} strategy - Map of key names to handler functions.
4411
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
4412
+ */
4413
+ function applyKeyboardStrategy(component, strategy, options = {}) {
4414
+ component.addEventListener('keydown', async (evt) => {
4415
+ const handler = strategy[evt.key] || strategy.default;
4416
+ if (typeof handler === 'function') {
4417
+ const ctx = createDisplayContext(component, options);
4418
+ await handler(component, evt, ctx);
4419
+ }
4420
+ });
4421
+ }
4422
+
4373
4423
  var styleCss$2$1 = i$6`: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}`;
4374
4424
 
4375
4425
  var colorCss$2$1 = i$6`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
4376
4426
 
4377
4427
  var tokensCss$1$1 = i$6`:host(:not([ondark])),:host(:not([appearance=inverse])){--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-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--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-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
4378
4428
 
4429
+ /**
4430
+ * Creates a keyboard strategy for dialog-specific key handling.
4431
+ * All other keydown behavior is left to the browser's native bubbling path.
4432
+ * @param {HTMLElement} bib - The dropdown bib element.
4433
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
4434
+ */
4435
+ // eslint-disable-next-line no-unused-vars
4436
+ function createDropdownBibKeyboardStrategy(bib) {
4437
+ return {
4438
+ // eslint-disable-next-line no-unused-vars
4439
+ Enter(_dialog, event) {
4440
+ // Floating UI handles Enter key to open the dropdown
4441
+ },
4442
+ // eslint-disable-next-line no-unused-vars
4443
+ Escape(_dialog, event) {
4444
+ // Floating UI handles Escape key to close the dropdown
4445
+ }
4446
+ };
4447
+ }
4448
+
4379
4449
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4380
4450
  // See LICENSE in the project root for license information.
4381
4451
  /* eslint-disable max-lines */
@@ -4500,26 +4570,11 @@ class AuroDropdownBib extends i$3 {
4500
4570
  },
4501
4571
 
4502
4572
  /**
4503
- * Set by auro-dropdown when a menu option is highlighted via
4504
- * aria-activedescendant. The dialog keyboard bridge checks this
4505
- * flag so that Enter selects the highlighted option instead of
4506
- * activating the focused interactive element (e.g. the trigger
4507
- * button, or the bibtemplate close button in fullscreen).
4573
+ * Tracks whether a menu option is currently highlighted.
4508
4574
  * @private
4509
4575
  */
4510
4576
  hasActiveDescendant: {
4511
4577
  type: Boolean
4512
- },
4513
-
4514
- /**
4515
- * When true, the keyboard bridge allows native Tab behavior
4516
- * instead of intercepting it. Set this for bib consumers
4517
- * (e.g. counter) whose content contains real focusable elements
4518
- * that need native Tab navigation.
4519
- * @private
4520
- */
4521
- nativeFocusableContent: {
4522
- type: Boolean
4523
4578
  }
4524
4579
  };
4525
4580
  }
@@ -4589,7 +4644,7 @@ class AuroDropdownBib extends i$3 {
4589
4644
 
4590
4645
  const dialog = this.shadowRoot.querySelector('dialog');
4591
4646
  this._setupCancelHandler(dialog);
4592
- this._setupKeyboardBridge(dialog);
4647
+ applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
4593
4648
 
4594
4649
  this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
4595
4650
  bubbles: true,
@@ -4616,98 +4671,6 @@ class AuroDropdownBib extends i$3 {
4616
4671
  });
4617
4672
  }
4618
4673
 
4619
- /**
4620
- * showModal() creates a closed focus scope — keyboard events inside
4621
- * the dialog's shadow DOM do NOT bubble out to the combobox/select
4622
- * keydown handlers in the parent shadow DOM. This handler bridges
4623
- * that gap by re-dispatching navigation keys so they cross the
4624
- * shadow boundary and reach the menu navigation logic in the parent
4625
- * component.
4626
- *
4627
- * The trade-off: intercepting these keys means native keyboard
4628
- * behaviors that would normally "just work" must be manually
4629
- * re-implemented here:
4630
- *
4631
- * - Enter on buttons: Custom elements (auro-button) don't get the
4632
- * native Enter→click that <button> provides, so we call .click()
4633
- * directly when Enter is pressed on a button-like element.
4634
- *
4635
- * - Tab: Intercepted and re-dispatched so parent components
4636
- * (select/combobox) can select the active option and close the
4637
- * dialog. The <dialog> provides containment and isolation
4638
- * (inert background, VoiceOver focus trapping, top layer), while
4639
- * the content inside is a role="listbox" navigated via
4640
- * aria-activedescendant (options are not focusable). Tab keyboard
4641
- * behavior follows listbox conventions (select + close) because
4642
- * the dialog's native Tab trap only cycles between the close
4643
- * button and browser chrome.
4644
- *
4645
- * - Escape: The native <dialog> fires a `cancel` event on ESC
4646
- * (handled by _setupCancelHandler), so the re-dispatched Escape
4647
- * is a secondary path for parent components that also listen for
4648
- * Escape keydown.
4649
- *
4650
- * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
4651
- * @private
4652
- */
4653
- _setupKeyboardBridge(dialog) {
4654
- const navKeys = new Set([
4655
- 'ArrowUp',
4656
- 'ArrowDown',
4657
- 'Enter',
4658
- 'Escape',
4659
- 'Tab'
4660
- ]);
4661
-
4662
- dialog.addEventListener('keydown', (event) => {
4663
- if (!navKeys.has(event.key)) {
4664
- return;
4665
- }
4666
-
4667
- // Custom elements (auro-button) don't get the native Enter→click
4668
- // behavior that <button> has. Find the button in the composed path
4669
- // and click it directly — but only when no menu option is
4670
- // highlighted. In fullscreen mode focus stays on the close button
4671
- // while arrow keys move the active-descendant highlight through
4672
- // the listbox. If the user presses Enter with an option
4673
- // highlighted, the intent is to select that option, not to click
4674
- // the close button. In that case we fall through and bridge the
4675
- // Enter key to the parent component's keyboard strategy.
4676
- if (event.key === 'Enter') {
4677
- if (!this.hasActiveDescendant) {
4678
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
4679
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
4680
- if (btn) {
4681
- event.preventDefault();
4682
- event.stopPropagation();
4683
- btn.click();
4684
- return;
4685
- }
4686
- }
4687
- }
4688
-
4689
- // Allow native Tab when the bib contains focusable content
4690
- // (e.g. counter buttons) that needs normal Tab navigation.
4691
- if (event.key === 'Tab' && this.nativeFocusableContent) {
4692
- return;
4693
- }
4694
-
4695
- event.preventDefault();
4696
- event.stopPropagation();
4697
- const newEvent = new KeyboardEvent('keydown', {
4698
- key: event.key,
4699
- code: event.code,
4700
- shiftKey: event.shiftKey,
4701
- altKey: event.altKey,
4702
- ctrlKey: event.ctrlKey,
4703
- metaKey: event.metaKey,
4704
- bubbles: true,
4705
- composed: true,
4706
- cancelable: true
4707
- });
4708
- this.dispatchEvent(newEvent);
4709
- });
4710
- }
4711
4674
 
4712
4675
  /**
4713
4676
  * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
@@ -5082,7 +5045,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
5082
5045
  }
5083
5046
  };
5084
5047
 
5085
- var formkitVersion$1 = '202603271519';
5048
+ var formkitVersion$1 = '202604012043';
5086
5049
 
5087
5050
  class AuroElement extends i$3 {
5088
5051
  static get properties() {
@@ -5263,7 +5226,6 @@ class AuroDropdown extends AuroElement {
5263
5226
  this.appearance = 'default';
5264
5227
  this.chevron = false;
5265
5228
  this.disabled = false;
5266
- this.disableFocusTrap = false;
5267
5229
  this.error = false;
5268
5230
  this.tabIndex = 0;
5269
5231
  this.noToggle = false;
@@ -5361,9 +5323,8 @@ class AuroDropdown extends AuroElement {
5361
5323
  // showModal() fires asynchronously via Lit's update cycle, which
5362
5324
  // falls outside the user activation window and causes iOS to
5363
5325
  // dismiss the keyboard.
5364
- if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
5365
- const useModal = !this.disableFocusTrap;
5366
- this.bibElement.value.open(useModal);
5326
+ if (this.bibElement && this.bibElement.value) {
5327
+ this.bibElement.value.open(this.isBibFullscreen);
5367
5328
  }
5368
5329
  }
5369
5330
 
@@ -5476,14 +5437,6 @@ class AuroDropdown extends AuroElement {
5476
5437
  reflect: true
5477
5438
  },
5478
5439
 
5479
- /**
5480
- * If declared, the focus trap inside of bib will be turned off.
5481
- */
5482
- disableFocusTrap: {
5483
- type: Boolean,
5484
- reflect: true
5485
- },
5486
-
5487
5440
  /**
5488
5441
  * @private
5489
5442
  */
@@ -5757,7 +5710,7 @@ class AuroDropdown extends AuroElement {
5757
5710
  if (this.isPopoverVisible) {
5758
5711
  // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
5759
5712
  // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
5760
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
5713
+ const useModal = this.isBibFullscreen;
5761
5714
  this.bibElement.value.open(useModal);
5762
5715
  } else {
5763
5716
  this.bibElement.value.close();
@@ -5767,7 +5720,7 @@ class AuroDropdown extends AuroElement {
5767
5720
  // When fullscreen strategy changes while open, re-open dialog with correct mode
5768
5721
  // (e.g. resizing from desktop → mobile while dropdown is open)
5769
5722
  if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
5770
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
5723
+ const useModal = this.isBibFullscreen;
5771
5724
  this.bibElement.value.close();
5772
5725
  this.bibElement.value.open(useModal);
5773
5726
  }
@@ -5879,7 +5832,7 @@ class AuroDropdown extends AuroElement {
5879
5832
  * @private
5880
5833
  */
5881
5834
  updateFocusTrap() {
5882
- if (this.isPopoverVisible && !this.disableFocusTrap) {
5835
+ if (this.isPopoverVisible) {
5883
5836
  if (!this.isBibFullscreen) {
5884
5837
  // Desktop: show() doesn't trap focus, so use FocusTrap
5885
5838
  this.focusTrap = new FocusTrap(this.bibContent);
@@ -6835,7 +6788,7 @@ class AuroHelpText extends i$3 {
6835
6788
  }
6836
6789
  }
6837
6790
 
6838
- var formkitVersion = '202603271519';
6791
+ var formkitVersion = '202604012043';
6839
6792
 
6840
6793
  var styleCss$2 = i$6`.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);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),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, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),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, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),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}`;
6841
6794
 
@@ -7357,7 +7310,7 @@ class AuroSelect extends AuroElement$1 {
7357
7310
 
7358
7311
  // Prevent dropdown from closing on focus loss since menu content is slotted
7359
7312
  // from select's light DOM and won't be detected by dropdown's contains() check.
7360
- // Select handles Tab key closing explicitly, ESC via dialog cancel, and
7313
+ // Select handles Tab key closing explicitly, `Escape` key via dialog cancel, and
7361
7314
  // click outside works correctly via composedPath().
7362
7315
  this.dropdown.noHideOnThisFocusLoss = true;
7363
7316
 
@@ -7370,7 +7323,9 @@ class AuroSelect extends AuroElement$1 {
7370
7323
  this.dropdown.setActiveDescendant(null);
7371
7324
  this.optionActive = null;
7372
7325
 
7373
- restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
7326
+ if (this.dropdown.isBibFullscreen) {
7327
+ restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
7328
+ }
7374
7329
  }
7375
7330
 
7376
7331
  if (this.dropdown.isPopoverVisible) {
@@ -7644,7 +7599,7 @@ class AuroSelect extends AuroElement$1 {
7644
7599
  configureSelect() {
7645
7600
  this.nativeSelect = this.shadowRoot.querySelector('select');
7646
7601
 
7647
- applyKeyboardStrategy(this, selectKeyboardStrategy);
7602
+ applyKeyboardStrategy$1(this, selectKeyboardStrategy);
7648
7603
 
7649
7604
  this.addEventListener('focusin', this.handleFocusin);
7650
7605
 
@@ -9695,10 +9650,10 @@ class AuroMenu extends AuroElement$1 {
9695
9650
 
9696
9651
  // Event Bindings
9697
9652
 
9698
- /**
9699
- * @private
9700
- */
9701
- this.handleKeyDown = this.handleKeyDown.bind(this);
9653
+ // /**
9654
+ // * @private
9655
+ // */
9656
+ // this.handleKeyDown = this.handleKeyDown.bind(this);
9702
9657
 
9703
9658
 
9704
9659
  /**
@@ -9947,6 +9902,13 @@ class AuroMenu extends AuroElement$1 {
9947
9902
  * @protected
9948
9903
  */
9949
9904
  provideContext() {
9905
+ if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
9906
+ this.rootMenu = false;
9907
+ this.menuService = this.parentElement.menuService;
9908
+ this._contextProvider = this.parentElement._contextProvider;
9909
+ return;
9910
+ }
9911
+
9950
9912
  this.menuService = new MenuService({host: this});
9951
9913
  this.menuService.setProperties(this.propertyValues);
9952
9914
  this.menuService.subscribe(this.handleMenuChange.bind(this));
@@ -10040,7 +10002,7 @@ class AuroMenu extends AuroElement$1 {
10040
10002
 
10041
10003
  this.provideContext();
10042
10004
 
10043
- this.addEventListener('keydown', this.handleKeyDown);
10005
+ // this.addEventListener('keydown', this.handleKeyDown);
10044
10006
  this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
10045
10007
  this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
10046
10008
  this.addEventListener('slotchange', this.handleSlotChange);
@@ -10048,7 +10010,7 @@ class AuroMenu extends AuroElement$1 {
10048
10010
  }
10049
10011
 
10050
10012
  disconnectedCallback() {
10051
- this.removeEventListener('keydown', this.handleKeyDown);
10013
+ // this.removeEventListener('keydown', this.handleKeyDown);
10052
10014
  this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
10053
10015
  this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
10054
10016
  this.removeEventListener('slotchange', this.handleSlotChange);
@@ -10129,9 +10091,9 @@ class AuroMenu extends AuroElement$1 {
10129
10091
  if (this.multiSelect) {
10130
10092
  this.setAttribute('aria-multiselectable', 'true');
10131
10093
  }
10132
-
10133
- this.handleNestedMenus(this);
10134
10094
  }
10095
+
10096
+ this.handleNestedMenus(this);
10135
10097
  }
10136
10098
 
10137
10099
  /**
@@ -10189,26 +10151,33 @@ class AuroMenu extends AuroElement$1 {
10189
10151
 
10190
10152
  // Event Handlers
10191
10153
 
10192
- /**
10193
- * Handles keyboard navigation.
10194
- * @private
10195
- * @param {KeyboardEvent} event - Event object from the browser.
10196
- */
10197
- handleKeyDown(event) {
10198
- event.preventDefault();
10199
- switch (event.key) {
10200
- case "ArrowDown":
10201
- this.menuService.highlightNext();
10202
- break;
10203
- case "ArrowUp":
10204
- this.menuService.highlightPrevious();
10205
- break;
10206
- case "Tab":
10207
- case "Enter":
10208
- this.menuService.selectHighlightedOption();
10209
- break;
10210
- }
10211
- }
10154
+ // /**
10155
+ // * Handles keyboard navigation.
10156
+ // * @private
10157
+ // * @param {KeyboardEvent} event - Event object from the browser.
10158
+ // */
10159
+ // handleKeyDown(event) {
10160
+ // // Update to Chris keyboard handler
10161
+ // // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
10162
+ // event.preventDefault();
10163
+ // switch (event.key) {
10164
+ // case "ArrowDown":
10165
+ // console.warn("ArrowDown key is pressed and heard from menu");
10166
+ // this.menuService.highlightNext();
10167
+ // break;
10168
+ // case "ArrowUp":
10169
+ // console.warn("ArrowUp key is pressed and heard from menu");
10170
+ // this.menuService.highlightPrevious();
10171
+ // break;
10172
+ // case "Tab":
10173
+ // case "Enter":
10174
+ // this.menuService.selectHighlightedOption();
10175
+ // // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
10176
+ // break;
10177
+ // default:
10178
+ // break;
10179
+ // }
10180
+ // }
10212
10181
 
10213
10182
  /**
10214
10183
  * Navigates the menu options in the specified direction.
@@ -10228,10 +10197,6 @@ class AuroMenu extends AuroElement$1 {
10228
10197
  * @private
10229
10198
  */
10230
10199
  handleSlotChange() {
10231
- if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
10232
- this.rootMenu = false;
10233
- }
10234
-
10235
10200
  if (this.rootMenu) {
10236
10201
  this.initializeMenu();
10237
10202
  }