@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.8 → 0.0.0-pr1411.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.
- 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 +121 -144
- package/components/combobox/demo/index.min.js +121 -144
- package/components/combobox/demo/keyboardBehavior.html +1 -0
- package/components/combobox/demo/keyboardBehavior.md +21 -22
- package/components/combobox/dist/index.js +87 -117
- package/components/combobox/dist/registered.js +87 -117
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +184 -148
- package/components/counter/demo/index.min.js +184 -148
- package/components/counter/demo/keyboardBehavior.html +1 -0
- package/components/counter/demo/keyboardBehavior.md +1 -1
- package/components/counter/dist/auro-counter.d.ts +11 -8
- package/components/counter/dist/index.js +184 -148
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +184 -148
- package/components/datepicker/demo/api.min.js +89 -120
- package/components/datepicker/demo/index.min.js +89 -120
- package/components/datepicker/demo/keyboardBehavior.html +1 -0
- package/components/datepicker/demo/keyboardBehavior.md +14 -13
- package/components/datepicker/dist/index.js +84 -115
- package/components/datepicker/dist/registered.js +84 -115
- package/components/dropdown/demo/api.md +0 -1
- package/components/dropdown/demo/api.min.js +99 -123
- package/components/dropdown/demo/index.md +2 -2
- package/components/dropdown/demo/index.min.js +99 -123
- package/components/dropdown/demo/keyboardBehavior.html +1 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -40
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
- package/components/dropdown/dist/index.js +83 -111
- package/components/dropdown/dist/registered.js +83 -111
- package/components/form/demo/api.min.js +542 -564
- package/components/form/demo/index.min.js +542 -564
- 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 +34 -27
- package/components/menu/demo/index.min.js +34 -27
- package/components/menu/dist/auro-menu.d.ts +0 -6
- package/components/menu/dist/index.js +34 -27
- package/components/menu/dist/registered.js +34 -27
- 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 +181 -178
- package/components/select/demo/index.min.js +181 -178
- package/components/select/demo/keyboardBehavior.html +1 -0
- package/components/select/demo/keyboardBehavior.md +240 -239
- package/components/select/dist/index.js +147 -151
- package/components/select/dist/registered.js +147 -151
- package/components/select/dist/selectKeyboardStrategy.d.ts +3 -1
- package/custom-elements.json +1521 -1503
- package/package.json +5 -3
|
@@ -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
|
});
|
|
@@ -1365,24 +1365,39 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1365
1365
|
|
|
1366
1366
|
const selectKeyboardStrategy = {
|
|
1367
1367
|
ArrowUp(component, evt, ctx) {
|
|
1368
|
+
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1368
1369
|
evt.preventDefault();
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1370
|
+
if (evt.altKey || evt.metaKey) ; else if (component.dropdown.isPopoverVisible) {
|
|
1371
|
+
navigateArrow(component, 'up', {
|
|
1372
|
+
ctx,
|
|
1373
|
+
showFn: () => component.dropdown.show(),
|
|
1374
|
+
});
|
|
1375
|
+
} else {
|
|
1376
|
+
component.dropdown.show();
|
|
1377
|
+
}
|
|
1373
1378
|
},
|
|
1374
1379
|
|
|
1375
1380
|
ArrowDown(component, evt, ctx) {
|
|
1381
|
+
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1376
1382
|
evt.preventDefault();
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1383
|
+
if (evt.altKey || evt.metaKey) ; else if (component.dropdown.isPopoverVisible) {
|
|
1384
|
+
navigateArrow(component, 'down', {
|
|
1385
|
+
ctx,
|
|
1386
|
+
showFn: () => component.dropdown.show(),
|
|
1387
|
+
});
|
|
1388
|
+
} else {
|
|
1389
|
+
component.dropdown.show();
|
|
1390
|
+
}
|
|
1381
1391
|
},
|
|
1382
1392
|
|
|
1383
|
-
Enter(component, evt) {
|
|
1384
|
-
|
|
1385
|
-
|
|
1393
|
+
Enter(component, evt, ctx) {
|
|
1394
|
+
if (!ctx.isExpanded && ctx.isPopover) {
|
|
1395
|
+
component.menu.makeSelection();
|
|
1396
|
+
} else if (ctx.isModal && !evt.defaultPrevented) {
|
|
1397
|
+
// for modal, isExpanded is always true
|
|
1398
|
+
// defaultPrevented will be true if Floating UI has already handled the event to open the dropdown
|
|
1399
|
+
component.menu.makeSelection();
|
|
1400
|
+
}
|
|
1386
1401
|
},
|
|
1387
1402
|
|
|
1388
1403
|
Tab(component, evt, ctx) {
|
|
@@ -1390,17 +1405,6 @@ const selectKeyboardStrategy = {
|
|
|
1390
1405
|
return;
|
|
1391
1406
|
}
|
|
1392
1407
|
|
|
1393
|
-
// Shift+Tab moves the highlight to the first non-disabled option
|
|
1394
|
-
// without making a selection or closing the bib.
|
|
1395
|
-
if (evt.shiftKey) {
|
|
1396
|
-
evt.preventDefault();
|
|
1397
|
-
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
1398
|
-
if (firstActive) {
|
|
1399
|
-
component.menu.updateActiveOption(firstActive);
|
|
1400
|
-
}
|
|
1401
|
-
return;
|
|
1402
|
-
}
|
|
1403
|
-
|
|
1404
1408
|
// Tab selects the focused option and closes the popup per the
|
|
1405
1409
|
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
1406
1410
|
if (component.optionActive && !component.multiSelect) {
|
|
@@ -1408,6 +1412,23 @@ const selectKeyboardStrategy = {
|
|
|
1408
1412
|
}
|
|
1409
1413
|
component.dropdown.hide();
|
|
1410
1414
|
},
|
|
1415
|
+
Home(component, evt) {
|
|
1416
|
+
evt.preventDefault();
|
|
1417
|
+
evt.stopPropagation();
|
|
1418
|
+
const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
1419
|
+
if (firstOption) {
|
|
1420
|
+
component.menu.updateActiveOption(firstOption);
|
|
1421
|
+
}
|
|
1422
|
+
},
|
|
1423
|
+
|
|
1424
|
+
End(component, evt) {
|
|
1425
|
+
evt.preventDefault();
|
|
1426
|
+
evt.stopPropagation();
|
|
1427
|
+
const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
|
|
1428
|
+
if (lastOption) {
|
|
1429
|
+
component.menu.updateActiveOption(lastOption);
|
|
1430
|
+
}
|
|
1431
|
+
},
|
|
1411
1432
|
|
|
1412
1433
|
default(component, evt) {
|
|
1413
1434
|
component.updateActiveOptionBasedOnKey(evt.key);
|
|
@@ -3527,11 +3548,10 @@ class AuroFloatingUI {
|
|
|
3527
3548
|
return;
|
|
3528
3549
|
}
|
|
3529
3550
|
|
|
3530
|
-
const { activeElement } = document;
|
|
3531
3551
|
// if focus is still inside of trigger or bib, do not close
|
|
3532
3552
|
if (
|
|
3533
|
-
this.element.
|
|
3534
|
-
this.element.
|
|
3553
|
+
this.element.matches(":focus") ||
|
|
3554
|
+
this.element.matches(":focus-within")
|
|
3535
3555
|
) {
|
|
3536
3556
|
return;
|
|
3537
3557
|
}
|
|
@@ -4370,12 +4390,83 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4370
4390
|
|
|
4371
4391
|
var iconVersion$2 = '9.1.2';
|
|
4372
4392
|
|
|
4393
|
+
/**
|
|
4394
|
+
* Computes display state once per keydown event.
|
|
4395
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
4396
|
+
*
|
|
4397
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
4398
|
+
* @param {Object} [options] - Optional config.
|
|
4399
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
4400
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
4401
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
4402
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
4403
|
+
*/
|
|
4404
|
+
function createDisplayContext(component, options = {}) {
|
|
4405
|
+
const dd = options.dropdown || component.dropdown;
|
|
4406
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
4407
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
4408
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
4409
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
4410
|
+
|
|
4411
|
+
const ctx = {
|
|
4412
|
+
isExpanded,
|
|
4413
|
+
isModal: isFullscreen,
|
|
4414
|
+
isPopover: !isFullscreen,
|
|
4415
|
+
activeInput: null,
|
|
4416
|
+
};
|
|
4417
|
+
|
|
4418
|
+
if (options.inputResolver) {
|
|
4419
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
4420
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
4421
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
4422
|
+
}
|
|
4423
|
+
|
|
4424
|
+
return ctx;
|
|
4425
|
+
}
|
|
4426
|
+
|
|
4427
|
+
/**
|
|
4428
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
4429
|
+
* Handles both sync and async handlers.
|
|
4430
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
4431
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
4432
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
4433
|
+
*/
|
|
4434
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
4435
|
+
component.addEventListener('keydown', async (evt) => {
|
|
4436
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
4437
|
+
if (typeof handler === 'function') {
|
|
4438
|
+
const ctx = createDisplayContext(component, options);
|
|
4439
|
+
await handler(component, evt, ctx);
|
|
4440
|
+
}
|
|
4441
|
+
});
|
|
4442
|
+
}
|
|
4443
|
+
|
|
4373
4444
|
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
4445
|
|
|
4375
4446
|
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
4447
|
|
|
4377
4448
|
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
4449
|
|
|
4450
|
+
/**
|
|
4451
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
4452
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
4453
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
4454
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
4455
|
+
*/
|
|
4456
|
+
// eslint-disable-next-line no-unused-vars
|
|
4457
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
4458
|
+
return {
|
|
4459
|
+
// eslint-disable-next-line no-unused-vars
|
|
4460
|
+
Enter(_dialog, event) {
|
|
4461
|
+
// Floating UI handles Enter key to open the dropdown
|
|
4462
|
+
},
|
|
4463
|
+
// eslint-disable-next-line no-unused-vars
|
|
4464
|
+
Escape(_dialog, event) {
|
|
4465
|
+
// Floating UI handles Escape key to close the dropdown
|
|
4466
|
+
}
|
|
4467
|
+
};
|
|
4468
|
+
}
|
|
4469
|
+
|
|
4379
4470
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4380
4471
|
// See LICENSE in the project root for license information.
|
|
4381
4472
|
/* eslint-disable max-lines */
|
|
@@ -4500,11 +4591,7 @@ class AuroDropdownBib extends i$3 {
|
|
|
4500
4591
|
},
|
|
4501
4592
|
|
|
4502
4593
|
/**
|
|
4503
|
-
*
|
|
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).
|
|
4594
|
+
* Tracks whether a menu option is currently highlighted.
|
|
4508
4595
|
* @private
|
|
4509
4596
|
*/
|
|
4510
4597
|
hasActiveDescendant: {
|
|
@@ -4578,7 +4665,7 @@ class AuroDropdownBib extends i$3 {
|
|
|
4578
4665
|
|
|
4579
4666
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4580
4667
|
this._setupCancelHandler(dialog);
|
|
4581
|
-
|
|
4668
|
+
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
4582
4669
|
|
|
4583
4670
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
4584
4671
|
bubbles: true,
|
|
@@ -4605,92 +4692,6 @@ class AuroDropdownBib extends i$3 {
|
|
|
4605
4692
|
});
|
|
4606
4693
|
}
|
|
4607
4694
|
|
|
4608
|
-
/**
|
|
4609
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
4610
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4611
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
4612
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
4613
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
4614
|
-
* component.
|
|
4615
|
-
*
|
|
4616
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
4617
|
-
* behaviors that would normally "just work" must be manually
|
|
4618
|
-
* re-implemented here:
|
|
4619
|
-
*
|
|
4620
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4621
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
4622
|
-
* directly when Enter is pressed on a button-like element.
|
|
4623
|
-
*
|
|
4624
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
4625
|
-
* (select/combobox) can select the active option and close the
|
|
4626
|
-
* dialog. The <dialog> provides containment and isolation
|
|
4627
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
4628
|
-
* the content inside is a role="listbox" navigated via
|
|
4629
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
4630
|
-
* behavior follows listbox conventions (select + close) because
|
|
4631
|
-
* the dialog's native Tab trap only cycles between the close
|
|
4632
|
-
* button and browser chrome.
|
|
4633
|
-
*
|
|
4634
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4635
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
4636
|
-
* is a secondary path for parent components that also listen for
|
|
4637
|
-
* Escape keydown.
|
|
4638
|
-
*
|
|
4639
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
4640
|
-
* @private
|
|
4641
|
-
*/
|
|
4642
|
-
_setupKeyboardBridge(dialog) {
|
|
4643
|
-
const navKeys = new Set([
|
|
4644
|
-
'ArrowUp',
|
|
4645
|
-
'ArrowDown',
|
|
4646
|
-
'Enter',
|
|
4647
|
-
'Escape',
|
|
4648
|
-
'Tab'
|
|
4649
|
-
]);
|
|
4650
|
-
|
|
4651
|
-
dialog.addEventListener('keydown', (event) => {
|
|
4652
|
-
if (!navKeys.has(event.key)) {
|
|
4653
|
-
return;
|
|
4654
|
-
}
|
|
4655
|
-
|
|
4656
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
4657
|
-
// behavior that <button> has. Find the button in the composed path
|
|
4658
|
-
// and click it directly — but only when no menu option is
|
|
4659
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
4660
|
-
// while arrow keys move the active-descendant highlight through
|
|
4661
|
-
// the listbox. If the user presses Enter with an option
|
|
4662
|
-
// highlighted, the intent is to select that option, not to click
|
|
4663
|
-
// the close button. In that case we fall through and bridge the
|
|
4664
|
-
// Enter key to the parent component's keyboard strategy.
|
|
4665
|
-
if (event.key === 'Enter') {
|
|
4666
|
-
if (!this.hasActiveDescendant) {
|
|
4667
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4668
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4669
|
-
if (btn) {
|
|
4670
|
-
event.preventDefault();
|
|
4671
|
-
event.stopPropagation();
|
|
4672
|
-
btn.click();
|
|
4673
|
-
return;
|
|
4674
|
-
}
|
|
4675
|
-
}
|
|
4676
|
-
}
|
|
4677
|
-
|
|
4678
|
-
event.preventDefault();
|
|
4679
|
-
event.stopPropagation();
|
|
4680
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
4681
|
-
key: event.key,
|
|
4682
|
-
code: event.code,
|
|
4683
|
-
shiftKey: event.shiftKey,
|
|
4684
|
-
altKey: event.altKey,
|
|
4685
|
-
ctrlKey: event.ctrlKey,
|
|
4686
|
-
metaKey: event.metaKey,
|
|
4687
|
-
bubbles: true,
|
|
4688
|
-
composed: true,
|
|
4689
|
-
cancelable: true
|
|
4690
|
-
});
|
|
4691
|
-
this.dispatchEvent(newEvent);
|
|
4692
|
-
});
|
|
4693
|
-
}
|
|
4694
4695
|
|
|
4695
4696
|
/**
|
|
4696
4697
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -5065,7 +5066,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
5065
5066
|
}
|
|
5066
5067
|
};
|
|
5067
5068
|
|
|
5068
|
-
var formkitVersion$1 = '
|
|
5069
|
+
var formkitVersion$1 = '202604021512';
|
|
5069
5070
|
|
|
5070
5071
|
class AuroElement extends i$3 {
|
|
5071
5072
|
static get properties() {
|
|
@@ -5246,7 +5247,6 @@ class AuroDropdown extends AuroElement {
|
|
|
5246
5247
|
this.appearance = 'default';
|
|
5247
5248
|
this.chevron = false;
|
|
5248
5249
|
this.disabled = false;
|
|
5249
|
-
this.disableFocusTrap = false;
|
|
5250
5250
|
this.error = false;
|
|
5251
5251
|
this.tabIndex = 0;
|
|
5252
5252
|
this.noToggle = false;
|
|
@@ -5344,9 +5344,8 @@ class AuroDropdown extends AuroElement {
|
|
|
5344
5344
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
5345
5345
|
// falls outside the user activation window and causes iOS to
|
|
5346
5346
|
// dismiss the keyboard.
|
|
5347
|
-
if (this.
|
|
5348
|
-
|
|
5349
|
-
this.bibElement.value.open(useModal);
|
|
5347
|
+
if (this.bibElement && this.bibElement.value) {
|
|
5348
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
5350
5349
|
}
|
|
5351
5350
|
}
|
|
5352
5351
|
|
|
@@ -5459,14 +5458,6 @@ class AuroDropdown extends AuroElement {
|
|
|
5459
5458
|
reflect: true
|
|
5460
5459
|
},
|
|
5461
5460
|
|
|
5462
|
-
/**
|
|
5463
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
5464
|
-
*/
|
|
5465
|
-
disableFocusTrap: {
|
|
5466
|
-
type: Boolean,
|
|
5467
|
-
reflect: true
|
|
5468
|
-
},
|
|
5469
|
-
|
|
5470
5461
|
/**
|
|
5471
5462
|
* @private
|
|
5472
5463
|
*/
|
|
@@ -5740,7 +5731,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5740
5731
|
if (this.isPopoverVisible) {
|
|
5741
5732
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5742
5733
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5743
|
-
const useModal = this.isBibFullscreen
|
|
5734
|
+
const useModal = this.isBibFullscreen;
|
|
5744
5735
|
this.bibElement.value.open(useModal);
|
|
5745
5736
|
} else {
|
|
5746
5737
|
this.bibElement.value.close();
|
|
@@ -5750,7 +5741,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5750
5741
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5751
5742
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5752
5743
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5753
|
-
const useModal = this.isBibFullscreen
|
|
5744
|
+
const useModal = this.isBibFullscreen;
|
|
5754
5745
|
this.bibElement.value.close();
|
|
5755
5746
|
this.bibElement.value.open(useModal);
|
|
5756
5747
|
}
|
|
@@ -5862,7 +5853,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5862
5853
|
* @private
|
|
5863
5854
|
*/
|
|
5864
5855
|
updateFocusTrap() {
|
|
5865
|
-
if (this.isPopoverVisible
|
|
5856
|
+
if (this.isPopoverVisible) {
|
|
5866
5857
|
if (!this.isBibFullscreen) {
|
|
5867
5858
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
5868
5859
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -6818,7 +6809,7 @@ class AuroHelpText extends i$3 {
|
|
|
6818
6809
|
}
|
|
6819
6810
|
}
|
|
6820
6811
|
|
|
6821
|
-
var formkitVersion = '
|
|
6812
|
+
var formkitVersion = '202604021512';
|
|
6822
6813
|
|
|
6823
6814
|
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}`;
|
|
6824
6815
|
|
|
@@ -7340,7 +7331,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7340
7331
|
|
|
7341
7332
|
// Prevent dropdown from closing on focus loss since menu content is slotted
|
|
7342
7333
|
// from select's light DOM and won't be detected by dropdown's contains() check.
|
|
7343
|
-
// Select handles Tab key closing explicitly,
|
|
7334
|
+
// Select handles Tab key closing explicitly, `Escape` key via dialog cancel, and
|
|
7344
7335
|
// click outside works correctly via composedPath().
|
|
7345
7336
|
this.dropdown.noHideOnThisFocusLoss = true;
|
|
7346
7337
|
|
|
@@ -7353,12 +7344,28 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7353
7344
|
this.dropdown.setActiveDescendant(null);
|
|
7354
7345
|
this.optionActive = null;
|
|
7355
7346
|
|
|
7356
|
-
|
|
7347
|
+
if (this.dropdown.isBibFullscreen) {
|
|
7348
|
+
restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
|
|
7349
|
+
}
|
|
7357
7350
|
}
|
|
7358
7351
|
|
|
7359
7352
|
if (this.dropdown.isPopoverVisible) {
|
|
7360
7353
|
this.updateMenuShapeSize();
|
|
7361
7354
|
|
|
7355
|
+
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
7356
|
+
// No selection → first enabled option gets highlighted
|
|
7357
|
+
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
7358
|
+
this.menu.updateActiveOption(this.optionSelected);
|
|
7359
|
+
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
7360
|
+
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
7361
|
+
} else if (!this.menu.optionActive) {
|
|
7362
|
+
// If no activeOption has yet to be set, then make the first enabled option active by default
|
|
7363
|
+
const firstActive = this.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
7364
|
+
this.menu.updateActiveOption(firstActive);
|
|
7365
|
+
}
|
|
7366
|
+
|
|
7367
|
+
// Scroll the selected option into view when dropdown opens
|
|
7368
|
+
this.scrollSelectedOptionIntoView();
|
|
7362
7369
|
if (this.dropdown.isBibFullscreen) {
|
|
7363
7370
|
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
7364
7371
|
// behind the fullscreen dialog
|
|
@@ -7370,17 +7377,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7370
7377
|
// multiple Lit update cycles before moving focus into the bib
|
|
7371
7378
|
doubleRaf(() => {
|
|
7372
7379
|
this.bibtemplate.focusCloseButton();
|
|
7373
|
-
|
|
7374
|
-
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
7375
|
-
// No selection → no highlight
|
|
7376
|
-
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
7377
|
-
this.menu.updateActiveOption(this.optionSelected);
|
|
7378
|
-
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
7379
|
-
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
7380
|
-
}
|
|
7381
|
-
|
|
7382
|
-
// Scroll the selected option into view when dropdown opens
|
|
7383
|
-
this.scrollSelectedOptionIntoView();
|
|
7384
7380
|
});
|
|
7385
7381
|
} else {
|
|
7386
7382
|
// wait til the bib gets fully rendered
|
|
@@ -7627,7 +7623,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7627
7623
|
configureSelect() {
|
|
7628
7624
|
this.nativeSelect = this.shadowRoot.querySelector('select');
|
|
7629
7625
|
|
|
7630
|
-
applyKeyboardStrategy(this, selectKeyboardStrategy);
|
|
7626
|
+
applyKeyboardStrategy$1(this, selectKeyboardStrategy);
|
|
7631
7627
|
|
|
7632
7628
|
this.addEventListener('focusin', this.handleFocusin);
|
|
7633
7629
|
|
|
@@ -8907,7 +8903,7 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8907
8903
|
});
|
|
8908
8904
|
|
|
8909
8905
|
return u$4`
|
|
8910
|
-
<div class="${classes}">
|
|
8906
|
+
<div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
|
|
8911
8907
|
${this.selected && !this.noCheckmark
|
|
8912
8908
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
8913
8909
|
: undefined}
|
|
@@ -9678,10 +9674,10 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9678
9674
|
|
|
9679
9675
|
// Event Bindings
|
|
9680
9676
|
|
|
9681
|
-
/**
|
|
9682
|
-
|
|
9683
|
-
|
|
9684
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
9677
|
+
// /**
|
|
9678
|
+
// * @private
|
|
9679
|
+
// */
|
|
9680
|
+
// this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
9685
9681
|
|
|
9686
9682
|
|
|
9687
9683
|
/**
|
|
@@ -10030,7 +10026,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
10030
10026
|
|
|
10031
10027
|
this.provideContext();
|
|
10032
10028
|
|
|
10033
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
10029
|
+
// this.addEventListener('keydown', this.handleKeyDown);
|
|
10034
10030
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
10035
10031
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
10036
10032
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -10038,7 +10034,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
10038
10034
|
}
|
|
10039
10035
|
|
|
10040
10036
|
disconnectedCallback() {
|
|
10041
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
10037
|
+
// this.removeEventListener('keydown', this.handleKeyDown);
|
|
10042
10038
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
10043
10039
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
10044
10040
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -10179,26 +10175,33 @@ class AuroMenu extends AuroElement$1 {
|
|
|
10179
10175
|
|
|
10180
10176
|
// Event Handlers
|
|
10181
10177
|
|
|
10182
|
-
/**
|
|
10183
|
-
|
|
10184
|
-
|
|
10185
|
-
|
|
10186
|
-
|
|
10187
|
-
handleKeyDown(event) {
|
|
10188
|
-
|
|
10189
|
-
|
|
10190
|
-
|
|
10191
|
-
|
|
10192
|
-
|
|
10193
|
-
|
|
10194
|
-
|
|
10195
|
-
|
|
10196
|
-
|
|
10197
|
-
|
|
10198
|
-
|
|
10199
|
-
|
|
10200
|
-
|
|
10201
|
-
|
|
10178
|
+
// /**
|
|
10179
|
+
// * Handles keyboard navigation.
|
|
10180
|
+
// * @private
|
|
10181
|
+
// * @param {KeyboardEvent} event - Event object from the browser.
|
|
10182
|
+
// */
|
|
10183
|
+
// handleKeyDown(event) {
|
|
10184
|
+
// // Update to Chris keyboard handler
|
|
10185
|
+
// // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
|
|
10186
|
+
// event.preventDefault();
|
|
10187
|
+
// switch (event.key) {
|
|
10188
|
+
// case "ArrowDown":
|
|
10189
|
+
// console.warn("ArrowDown key is pressed and heard from menu");
|
|
10190
|
+
// this.menuService.highlightNext();
|
|
10191
|
+
// break;
|
|
10192
|
+
// case "ArrowUp":
|
|
10193
|
+
// console.warn("ArrowUp key is pressed and heard from menu");
|
|
10194
|
+
// this.menuService.highlightPrevious();
|
|
10195
|
+
// break;
|
|
10196
|
+
// case "Tab":
|
|
10197
|
+
// case "Enter":
|
|
10198
|
+
// this.menuService.selectHighlightedOption();
|
|
10199
|
+
// // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
|
|
10200
|
+
// break;
|
|
10201
|
+
// default:
|
|
10202
|
+
// break;
|
|
10203
|
+
// }
|
|
10204
|
+
// }
|
|
10202
10205
|
|
|
10203
10206
|
/**
|
|
10204
10207
|
* Navigates the menu options in the specified direction.
|