@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.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +129 -166
- package/components/combobox/demo/index.min.js +129 -166
- package/components/combobox/demo/keyboardBehavior.html +81 -0
- package/components/combobox/demo/keyboardBehavior.md +308 -0
- package/components/combobox/dist/index.js +87 -134
- package/components/combobox/dist/registered.js +87 -134
- package/components/counter/demo/api.min.js +157 -160
- package/components/counter/demo/index.min.js +157 -160
- package/components/counter/demo/keyboardBehavior.html +81 -0
- package/components/counter/demo/keyboardBehavior.md +127 -0
- package/components/counter/dist/auro-counter.d.ts +0 -7
- package/components/counter/dist/index.js +157 -160
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +157 -160
- package/components/datepicker/demo/api.min.js +89 -137
- package/components/datepicker/demo/index.min.js +89 -137
- package/components/datepicker/demo/keyboardBehavior.html +81 -0
- package/components/datepicker/demo/keyboardBehavior.md +24 -0
- package/components/datepicker/dist/index.js +84 -132
- package/components/datepicker/dist/registered.js +84 -132
- package/components/dropdown/demo/api.md +0 -1
- package/components/dropdown/demo/api.min.js +99 -140
- package/components/dropdown/demo/index.md +2 -2
- package/components/dropdown/demo/index.min.js +99 -140
- package/components/dropdown/demo/keyboardBehavior.html +81 -0
- package/components/dropdown/demo/keyboardBehavior.md +77 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -50
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
- package/components/dropdown/dist/index.js +83 -128
- package/components/dropdown/dist/registered.js +83 -128
- package/components/form/demo/api.min.js +466 -599
- package/components/form/demo/index.min.js +466 -599
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.min.js +42 -32
- package/components/menu/demo/index.min.js +42 -32
- package/components/menu/dist/auro-menu.d.ts +3 -11
- package/components/menu/dist/index.js +42 -32
- package/components/menu/dist/registered.js +42 -32
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +132 -167
- package/components/select/demo/index.min.js +132 -167
- package/components/select/demo/keyboardBehavior.html +81 -0
- package/components/select/demo/keyboardBehavior.md +246 -0
- package/components/select/dist/index.js +90 -135
- package/components/select/dist/registered.js +90 -135
- package/custom-elements.json +61 -89
- package/package.json +2 -2
|
@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
|
|
|
1687
1687
|
}
|
|
1688
1688
|
}
|
|
1689
1689
|
|
|
1690
|
-
var formkitVersion = '
|
|
1690
|
+
var formkitVersion = '202604012043';
|
|
1691
1691
|
|
|
1692
1692
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1693
1693
|
// See LICENSE in the project root for license information.
|
|
@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
|
|
|
1679
1679
|
}
|
|
1680
1680
|
}
|
|
1681
1681
|
|
|
1682
|
-
var formkitVersion = '
|
|
1682
|
+
var formkitVersion = '202604012043';
|
|
1683
1683
|
|
|
1684
1684
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1685
1685
|
// See LICENSE in the project root for license information.
|
|
File without changes
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202604012043';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202604012043';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1242,7 +1242,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
|
1242
1242
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
1243
1243
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
1244
1244
|
*/
|
|
1245
|
-
function createDisplayContext(component, options = {}) {
|
|
1245
|
+
function createDisplayContext$1(component, options = {}) {
|
|
1246
1246
|
const dd = options.dropdown || component.dropdown;
|
|
1247
1247
|
// isPopoverVisible reflects as the `open` attribute.
|
|
1248
1248
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -1272,11 +1272,11 @@ function createDisplayContext(component, options = {}) {
|
|
|
1272
1272
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
1273
1273
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
1274
1274
|
*/
|
|
1275
|
-
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
1275
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
1276
1276
|
component.addEventListener('keydown', async (evt) => {
|
|
1277
1277
|
const handler = strategy[evt.key] || strategy.default;
|
|
1278
1278
|
if (typeof handler === 'function') {
|
|
1279
|
-
const ctx = createDisplayContext(component, options);
|
|
1279
|
+
const ctx = createDisplayContext$1(component, options);
|
|
1280
1280
|
await handler(component, evt, ctx);
|
|
1281
1281
|
}
|
|
1282
1282
|
});
|
|
@@ -3532,11 +3532,10 @@ class AuroFloatingUI {
|
|
|
3532
3532
|
return;
|
|
3533
3533
|
}
|
|
3534
3534
|
|
|
3535
|
-
const { activeElement } = document;
|
|
3536
3535
|
// if focus is still inside of trigger or bib, do not close
|
|
3537
3536
|
if (
|
|
3538
|
-
this.element.
|
|
3539
|
-
this.element.
|
|
3537
|
+
this.element.matches(":focus") ||
|
|
3538
|
+
this.element.matches(":focus-within")
|
|
3540
3539
|
) {
|
|
3541
3540
|
return;
|
|
3542
3541
|
}
|
|
@@ -4375,12 +4374,83 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4375
4374
|
|
|
4376
4375
|
var iconVersion$3 = '9.1.2';
|
|
4377
4376
|
|
|
4377
|
+
/**
|
|
4378
|
+
* Computes display state once per keydown event.
|
|
4379
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
4380
|
+
*
|
|
4381
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
4382
|
+
* @param {Object} [options] - Optional config.
|
|
4383
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
4384
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
4385
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
4386
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
4387
|
+
*/
|
|
4388
|
+
function createDisplayContext(component, options = {}) {
|
|
4389
|
+
const dd = options.dropdown || component.dropdown;
|
|
4390
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
4391
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
4392
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
4393
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
4394
|
+
|
|
4395
|
+
const ctx = {
|
|
4396
|
+
isExpanded,
|
|
4397
|
+
isModal: isFullscreen,
|
|
4398
|
+
isPopover: !isFullscreen,
|
|
4399
|
+
activeInput: null,
|
|
4400
|
+
};
|
|
4401
|
+
|
|
4402
|
+
if (options.inputResolver) {
|
|
4403
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
4404
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
4405
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
4406
|
+
}
|
|
4407
|
+
|
|
4408
|
+
return ctx;
|
|
4409
|
+
}
|
|
4410
|
+
|
|
4411
|
+
/**
|
|
4412
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
4413
|
+
* Handles both sync and async handlers.
|
|
4414
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
4415
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
4416
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
4417
|
+
*/
|
|
4418
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
4419
|
+
component.addEventListener('keydown', async (evt) => {
|
|
4420
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
4421
|
+
if (typeof handler === 'function') {
|
|
4422
|
+
const ctx = createDisplayContext(component, options);
|
|
4423
|
+
await handler(component, evt, ctx);
|
|
4424
|
+
}
|
|
4425
|
+
});
|
|
4426
|
+
}
|
|
4427
|
+
|
|
4378
4428
|
var styleCss$2$1 = i$7`: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}`;
|
|
4379
4429
|
|
|
4380
4430
|
var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
4381
4431
|
|
|
4382
4432
|
var tokensCss$1$2 = i$7`: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)}`;
|
|
4383
4433
|
|
|
4434
|
+
/**
|
|
4435
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
4436
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
4437
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
4438
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
4439
|
+
*/
|
|
4440
|
+
// eslint-disable-next-line no-unused-vars
|
|
4441
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
4442
|
+
return {
|
|
4443
|
+
// eslint-disable-next-line no-unused-vars
|
|
4444
|
+
Enter(_dialog, event) {
|
|
4445
|
+
// Floating UI handles Enter key to open the dropdown
|
|
4446
|
+
},
|
|
4447
|
+
// eslint-disable-next-line no-unused-vars
|
|
4448
|
+
Escape(_dialog, event) {
|
|
4449
|
+
// Floating UI handles Escape key to close the dropdown
|
|
4450
|
+
}
|
|
4451
|
+
};
|
|
4452
|
+
}
|
|
4453
|
+
|
|
4384
4454
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4385
4455
|
// See LICENSE in the project root for license information.
|
|
4386
4456
|
/* eslint-disable max-lines */
|
|
@@ -4505,26 +4575,11 @@ class AuroDropdownBib extends i$4 {
|
|
|
4505
4575
|
},
|
|
4506
4576
|
|
|
4507
4577
|
/**
|
|
4508
|
-
*
|
|
4509
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
4510
|
-
* flag so that Enter selects the highlighted option instead of
|
|
4511
|
-
* activating the focused interactive element (e.g. the trigger
|
|
4512
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
4578
|
+
* Tracks whether a menu option is currently highlighted.
|
|
4513
4579
|
* @private
|
|
4514
4580
|
*/
|
|
4515
4581
|
hasActiveDescendant: {
|
|
4516
4582
|
type: Boolean
|
|
4517
|
-
},
|
|
4518
|
-
|
|
4519
|
-
/**
|
|
4520
|
-
* When true, the keyboard bridge allows native Tab behavior
|
|
4521
|
-
* instead of intercepting it. Set this for bib consumers
|
|
4522
|
-
* (e.g. counter) whose content contains real focusable elements
|
|
4523
|
-
* that need native Tab navigation.
|
|
4524
|
-
* @private
|
|
4525
|
-
*/
|
|
4526
|
-
nativeFocusableContent: {
|
|
4527
|
-
type: Boolean
|
|
4528
4583
|
}
|
|
4529
4584
|
};
|
|
4530
4585
|
}
|
|
@@ -4594,7 +4649,7 @@ class AuroDropdownBib extends i$4 {
|
|
|
4594
4649
|
|
|
4595
4650
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4596
4651
|
this._setupCancelHandler(dialog);
|
|
4597
|
-
|
|
4652
|
+
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
4598
4653
|
|
|
4599
4654
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
4600
4655
|
bubbles: true,
|
|
@@ -4621,98 +4676,6 @@ class AuroDropdownBib extends i$4 {
|
|
|
4621
4676
|
});
|
|
4622
4677
|
}
|
|
4623
4678
|
|
|
4624
|
-
/**
|
|
4625
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
4626
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4627
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
4628
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
4629
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
4630
|
-
* component.
|
|
4631
|
-
*
|
|
4632
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
4633
|
-
* behaviors that would normally "just work" must be manually
|
|
4634
|
-
* re-implemented here:
|
|
4635
|
-
*
|
|
4636
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4637
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
4638
|
-
* directly when Enter is pressed on a button-like element.
|
|
4639
|
-
*
|
|
4640
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
4641
|
-
* (select/combobox) can select the active option and close the
|
|
4642
|
-
* dialog. The <dialog> provides containment and isolation
|
|
4643
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
4644
|
-
* the content inside is a role="listbox" navigated via
|
|
4645
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
4646
|
-
* behavior follows listbox conventions (select + close) because
|
|
4647
|
-
* the dialog's native Tab trap only cycles between the close
|
|
4648
|
-
* button and browser chrome.
|
|
4649
|
-
*
|
|
4650
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4651
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
4652
|
-
* is a secondary path for parent components that also listen for
|
|
4653
|
-
* Escape keydown.
|
|
4654
|
-
*
|
|
4655
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
4656
|
-
* @private
|
|
4657
|
-
*/
|
|
4658
|
-
_setupKeyboardBridge(dialog) {
|
|
4659
|
-
const navKeys = new Set([
|
|
4660
|
-
'ArrowUp',
|
|
4661
|
-
'ArrowDown',
|
|
4662
|
-
'Enter',
|
|
4663
|
-
'Escape',
|
|
4664
|
-
'Tab'
|
|
4665
|
-
]);
|
|
4666
|
-
|
|
4667
|
-
dialog.addEventListener('keydown', (event) => {
|
|
4668
|
-
if (!navKeys.has(event.key)) {
|
|
4669
|
-
return;
|
|
4670
|
-
}
|
|
4671
|
-
|
|
4672
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
4673
|
-
// behavior that <button> has. Find the button in the composed path
|
|
4674
|
-
// and click it directly — but only when no menu option is
|
|
4675
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
4676
|
-
// while arrow keys move the active-descendant highlight through
|
|
4677
|
-
// the listbox. If the user presses Enter with an option
|
|
4678
|
-
// highlighted, the intent is to select that option, not to click
|
|
4679
|
-
// the close button. In that case we fall through and bridge the
|
|
4680
|
-
// Enter key to the parent component's keyboard strategy.
|
|
4681
|
-
if (event.key === 'Enter') {
|
|
4682
|
-
if (!this.hasActiveDescendant) {
|
|
4683
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4684
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4685
|
-
if (btn) {
|
|
4686
|
-
event.preventDefault();
|
|
4687
|
-
event.stopPropagation();
|
|
4688
|
-
btn.click();
|
|
4689
|
-
return;
|
|
4690
|
-
}
|
|
4691
|
-
}
|
|
4692
|
-
}
|
|
4693
|
-
|
|
4694
|
-
// Allow native Tab when the bib contains focusable content
|
|
4695
|
-
// (e.g. counter buttons) that needs normal Tab navigation.
|
|
4696
|
-
if (event.key === 'Tab' && this.nativeFocusableContent) {
|
|
4697
|
-
return;
|
|
4698
|
-
}
|
|
4699
|
-
|
|
4700
|
-
event.preventDefault();
|
|
4701
|
-
event.stopPropagation();
|
|
4702
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
4703
|
-
key: event.key,
|
|
4704
|
-
code: event.code,
|
|
4705
|
-
shiftKey: event.shiftKey,
|
|
4706
|
-
altKey: event.altKey,
|
|
4707
|
-
ctrlKey: event.ctrlKey,
|
|
4708
|
-
metaKey: event.metaKey,
|
|
4709
|
-
bubbles: true,
|
|
4710
|
-
composed: true,
|
|
4711
|
-
cancelable: true
|
|
4712
|
-
});
|
|
4713
|
-
this.dispatchEvent(newEvent);
|
|
4714
|
-
});
|
|
4715
|
-
}
|
|
4716
4679
|
|
|
4717
4680
|
/**
|
|
4718
4681
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -5087,7 +5050,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5087
5050
|
}
|
|
5088
5051
|
};
|
|
5089
5052
|
|
|
5090
|
-
var formkitVersion$2 = '
|
|
5053
|
+
var formkitVersion$2 = '202604012043';
|
|
5091
5054
|
|
|
5092
5055
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5093
5056
|
static get properties() {
|
|
@@ -5268,7 +5231,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5268
5231
|
this.appearance = 'default';
|
|
5269
5232
|
this.chevron = false;
|
|
5270
5233
|
this.disabled = false;
|
|
5271
|
-
this.disableFocusTrap = false;
|
|
5272
5234
|
this.error = false;
|
|
5273
5235
|
this.tabIndex = 0;
|
|
5274
5236
|
this.noToggle = false;
|
|
@@ -5366,9 +5328,8 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5366
5328
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
5367
5329
|
// falls outside the user activation window and causes iOS to
|
|
5368
5330
|
// dismiss the keyboard.
|
|
5369
|
-
if (this.
|
|
5370
|
-
|
|
5371
|
-
this.bibElement.value.open(useModal);
|
|
5331
|
+
if (this.bibElement && this.bibElement.value) {
|
|
5332
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
5372
5333
|
}
|
|
5373
5334
|
}
|
|
5374
5335
|
|
|
@@ -5481,14 +5442,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5481
5442
|
reflect: true
|
|
5482
5443
|
},
|
|
5483
5444
|
|
|
5484
|
-
/**
|
|
5485
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
5486
|
-
*/
|
|
5487
|
-
disableFocusTrap: {
|
|
5488
|
-
type: Boolean,
|
|
5489
|
-
reflect: true
|
|
5490
|
-
},
|
|
5491
|
-
|
|
5492
5445
|
/**
|
|
5493
5446
|
* @private
|
|
5494
5447
|
*/
|
|
@@ -5762,7 +5715,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5762
5715
|
if (this.isPopoverVisible) {
|
|
5763
5716
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5764
5717
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5765
|
-
const useModal = this.isBibFullscreen
|
|
5718
|
+
const useModal = this.isBibFullscreen;
|
|
5766
5719
|
this.bibElement.value.open(useModal);
|
|
5767
5720
|
} else {
|
|
5768
5721
|
this.bibElement.value.close();
|
|
@@ -5772,7 +5725,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5772
5725
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5773
5726
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5774
5727
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5775
|
-
const useModal = this.isBibFullscreen
|
|
5728
|
+
const useModal = this.isBibFullscreen;
|
|
5776
5729
|
this.bibElement.value.close();
|
|
5777
5730
|
this.bibElement.value.open(useModal);
|
|
5778
5731
|
}
|
|
@@ -5884,7 +5837,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5884
5837
|
* @private
|
|
5885
5838
|
*/
|
|
5886
5839
|
updateFocusTrap() {
|
|
5887
|
-
if (this.isPopoverVisible
|
|
5840
|
+
if (this.isPopoverVisible) {
|
|
5888
5841
|
if (!this.isBibFullscreen) {
|
|
5889
5842
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
5890
5843
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -12851,7 +12804,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12851
12804
|
}
|
|
12852
12805
|
};
|
|
12853
12806
|
|
|
12854
|
-
var formkitVersion$1 = '
|
|
12807
|
+
var formkitVersion$1 = '202604012043';
|
|
12855
12808
|
|
|
12856
12809
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12857
12810
|
// See LICENSE in the project root for license information.
|
|
@@ -13890,7 +13843,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13890
13843
|
}
|
|
13891
13844
|
}
|
|
13892
13845
|
|
|
13893
|
-
var formkitVersion = '
|
|
13846
|
+
var formkitVersion = '202604012043';
|
|
13894
13847
|
|
|
13895
13848
|
var styleCss$3 = i$7`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13896
13849
|
|
|
@@ -15384,7 +15337,7 @@ class AuroCombobox extends AuroElement {
|
|
|
15384
15337
|
* @returns {void}
|
|
15385
15338
|
*/
|
|
15386
15339
|
configureCombobox() {
|
|
15387
|
-
applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
|
|
15340
|
+
applyKeyboardStrategy$1(this, comboboxKeyboardStrategy, {
|
|
15388
15341
|
// In modal mode the input moves into the bib; route keyboard events to that element instead.
|
|
15389
15342
|
inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
|
|
15390
15343
|
});
|
|
@@ -17164,10 +17117,10 @@ class AuroMenu extends AuroElement {
|
|
|
17164
17117
|
|
|
17165
17118
|
// Event Bindings
|
|
17166
17119
|
|
|
17167
|
-
/**
|
|
17168
|
-
|
|
17169
|
-
|
|
17170
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
17120
|
+
// /**
|
|
17121
|
+
// * @private
|
|
17122
|
+
// */
|
|
17123
|
+
// this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
17171
17124
|
|
|
17172
17125
|
|
|
17173
17126
|
/**
|
|
@@ -17416,6 +17369,13 @@ class AuroMenu extends AuroElement {
|
|
|
17416
17369
|
* @protected
|
|
17417
17370
|
*/
|
|
17418
17371
|
provideContext() {
|
|
17372
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
17373
|
+
this.rootMenu = false;
|
|
17374
|
+
this.menuService = this.parentElement.menuService;
|
|
17375
|
+
this._contextProvider = this.parentElement._contextProvider;
|
|
17376
|
+
return;
|
|
17377
|
+
}
|
|
17378
|
+
|
|
17419
17379
|
this.menuService = new MenuService({host: this});
|
|
17420
17380
|
this.menuService.setProperties(this.propertyValues);
|
|
17421
17381
|
this.menuService.subscribe(this.handleMenuChange.bind(this));
|
|
@@ -17509,7 +17469,7 @@ class AuroMenu extends AuroElement {
|
|
|
17509
17469
|
|
|
17510
17470
|
this.provideContext();
|
|
17511
17471
|
|
|
17512
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
17472
|
+
// this.addEventListener('keydown', this.handleKeyDown);
|
|
17513
17473
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
17514
17474
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
17515
17475
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -17517,7 +17477,7 @@ class AuroMenu extends AuroElement {
|
|
|
17517
17477
|
}
|
|
17518
17478
|
|
|
17519
17479
|
disconnectedCallback() {
|
|
17520
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
17480
|
+
// this.removeEventListener('keydown', this.handleKeyDown);
|
|
17521
17481
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
17522
17482
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
17523
17483
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -17598,9 +17558,9 @@ class AuroMenu extends AuroElement {
|
|
|
17598
17558
|
if (this.multiSelect) {
|
|
17599
17559
|
this.setAttribute('aria-multiselectable', 'true');
|
|
17600
17560
|
}
|
|
17601
|
-
|
|
17602
|
-
this.handleNestedMenus(this);
|
|
17603
17561
|
}
|
|
17562
|
+
|
|
17563
|
+
this.handleNestedMenus(this);
|
|
17604
17564
|
}
|
|
17605
17565
|
|
|
17606
17566
|
/**
|
|
@@ -17658,26 +17618,33 @@ class AuroMenu extends AuroElement {
|
|
|
17658
17618
|
|
|
17659
17619
|
// Event Handlers
|
|
17660
17620
|
|
|
17661
|
-
/**
|
|
17662
|
-
|
|
17663
|
-
|
|
17664
|
-
|
|
17665
|
-
|
|
17666
|
-
handleKeyDown(event) {
|
|
17667
|
-
|
|
17668
|
-
|
|
17669
|
-
|
|
17670
|
-
|
|
17671
|
-
|
|
17672
|
-
|
|
17673
|
-
|
|
17674
|
-
|
|
17675
|
-
|
|
17676
|
-
|
|
17677
|
-
|
|
17678
|
-
|
|
17679
|
-
|
|
17680
|
-
|
|
17621
|
+
// /**
|
|
17622
|
+
// * Handles keyboard navigation.
|
|
17623
|
+
// * @private
|
|
17624
|
+
// * @param {KeyboardEvent} event - Event object from the browser.
|
|
17625
|
+
// */
|
|
17626
|
+
// handleKeyDown(event) {
|
|
17627
|
+
// // Update to Chris keyboard handler
|
|
17628
|
+
// // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
|
|
17629
|
+
// event.preventDefault();
|
|
17630
|
+
// switch (event.key) {
|
|
17631
|
+
// case "ArrowDown":
|
|
17632
|
+
// console.warn("ArrowDown key is pressed and heard from menu");
|
|
17633
|
+
// this.menuService.highlightNext();
|
|
17634
|
+
// break;
|
|
17635
|
+
// case "ArrowUp":
|
|
17636
|
+
// console.warn("ArrowUp key is pressed and heard from menu");
|
|
17637
|
+
// this.menuService.highlightPrevious();
|
|
17638
|
+
// break;
|
|
17639
|
+
// case "Tab":
|
|
17640
|
+
// case "Enter":
|
|
17641
|
+
// this.menuService.selectHighlightedOption();
|
|
17642
|
+
// // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
|
|
17643
|
+
// break;
|
|
17644
|
+
// default:
|
|
17645
|
+
// break;
|
|
17646
|
+
// }
|
|
17647
|
+
// }
|
|
17681
17648
|
|
|
17682
17649
|
/**
|
|
17683
17650
|
* Navigates the menu options in the specified direction.
|
|
@@ -17697,10 +17664,6 @@ class AuroMenu extends AuroElement {
|
|
|
17697
17664
|
* @private
|
|
17698
17665
|
*/
|
|
17699
17666
|
handleSlotChange() {
|
|
17700
|
-
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
17701
|
-
this.rootMenu = false;
|
|
17702
|
-
}
|
|
17703
|
-
|
|
17704
17667
|
if (this.rootMenu) {
|
|
17705
17668
|
this.initializeMenu();
|
|
17706
17669
|
}
|