@aurodesignsystem-dev/auro-formkit 0.0.0-pr1346.2 → 0.0.0-pr1346.4
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/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +252 -65
- package/components/combobox/demo/index.min.js +252 -65
- package/components/combobox/dist/auro-combobox.d.ts +2 -1
- package/components/combobox/dist/index.js +245 -62
- package/components/combobox/dist/registered.js +245 -62
- package/components/counter/demo/api.min.js +124 -12
- package/components/counter/demo/index.min.js +124 -12
- package/components/counter/dist/index.js +124 -12
- package/components/counter/dist/registered.js +124 -12
- package/components/datepicker/demo/api.min.js +161 -40
- package/components/datepicker/demo/index.min.js +161 -40
- package/components/datepicker/dist/index.js +161 -40
- package/components/datepicker/dist/registered.js +161 -40
- package/components/dropdown/demo/api.min.js +122 -10
- package/components/dropdown/demo/index.min.js +122 -10
- package/components/dropdown/dist/auro-dropdownBib.d.ts +18 -2
- package/components/dropdown/dist/index.js +122 -10
- package/components/dropdown/dist/registered.js +122 -10
- package/components/input/demo/api.min.js +38 -29
- package/components/input/demo/index.min.js +38 -29
- package/components/input/dist/index.js +38 -29
- package/components/input/dist/registered.js +38 -29
- package/components/menu/demo/api.min.js +7 -3
- package/components/menu/demo/index.min.js +7 -3
- package/components/menu/dist/index.js +7 -3
- package/components/menu/dist/registered.js +7 -3
- 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 +159 -17
- package/components/select/demo/index.min.js +159 -17
- package/components/select/dist/index.js +152 -14
- package/components/select/dist/registered.js +152 -14
- package/custom-elements.json +35 -10
- package/package.json +1 -1
|
@@ -3981,7 +3981,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3981
3981
|
|
|
3982
3982
|
var iconVersion$2 = '9.1.2';
|
|
3983
3983
|
|
|
3984
|
-
var styleCss$2$1 = i$6`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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}`;
|
|
3984
|
+
var styleCss$2$1 = i$6`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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}`;
|
|
3985
3985
|
|
|
3986
3986
|
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)}`;
|
|
3987
3987
|
|
|
@@ -3989,6 +3989,8 @@ var tokensCss$1$1 = i$6`:host(:not([ondark])),:host(:not([appearance=inverse])){
|
|
|
3989
3989
|
|
|
3990
3990
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3991
3991
|
// See LICENSE in the project root for license information.
|
|
3992
|
+
/* eslint-disable max-lines */
|
|
3993
|
+
// ---------------------------------------------------------------------
|
|
3992
3994
|
|
|
3993
3995
|
|
|
3994
3996
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -4164,22 +4166,63 @@ class AuroDropdownBib extends i$3 {
|
|
|
4164
4166
|
// Handle ESC key via dialog's cancel event
|
|
4165
4167
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4166
4168
|
dialog.addEventListener('cancel', (event) => {
|
|
4167
|
-
|
|
4169
|
+
// Let parent handle closing
|
|
4170
|
+
event.preventDefault();
|
|
4168
4171
|
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4169
4172
|
bubbles: true,
|
|
4170
4173
|
composed: true
|
|
4171
4174
|
}));
|
|
4172
4175
|
});
|
|
4173
4176
|
|
|
4174
|
-
//
|
|
4175
|
-
//
|
|
4176
|
-
//
|
|
4177
|
-
//
|
|
4178
|
-
|
|
4177
|
+
// showModal() creates a closed focus scope — keyboard events inside
|
|
4178
|
+
// the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4179
|
+
// keydown handlers in the parent shadow DOM. This handler bridges
|
|
4180
|
+
// that gap by re-dispatching navigation keys so they cross the
|
|
4181
|
+
// shadow boundary and reach the menu navigation logic in the parent
|
|
4182
|
+
// component.
|
|
4183
|
+
//
|
|
4184
|
+
// The trade-off: intercepting these keys means native keyboard
|
|
4185
|
+
// behaviors that would normally "just work" must be manually
|
|
4186
|
+
// re-implemented here:
|
|
4187
|
+
//
|
|
4188
|
+
// - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4189
|
+
// native Enter→click that <button> provides, so we call .click()
|
|
4190
|
+
// directly when Enter is pressed on a button-like element.
|
|
4191
|
+
//
|
|
4192
|
+
// - Tab: NOT intercepted — left to the browser's native focus trap
|
|
4193
|
+
// provided by showModal(), which cycles Tab between focusable
|
|
4194
|
+
// elements inside the dialog (e.g. the input and close button).
|
|
4195
|
+
// Intercepting Tab would kill the native focus trap and break
|
|
4196
|
+
// focus management inside the dialog.
|
|
4197
|
+
//
|
|
4198
|
+
// - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4199
|
+
// (handled above), so the re-dispatched Escape is a secondary
|
|
4200
|
+
// path for parent components that also listen for Escape keydown.
|
|
4201
|
+
const navKeys = new Set([
|
|
4202
|
+
'ArrowUp',
|
|
4203
|
+
'ArrowDown',
|
|
4204
|
+
'Enter',
|
|
4205
|
+
'Escape'
|
|
4206
|
+
]);
|
|
4179
4207
|
dialog.addEventListener('keydown', (event) => {
|
|
4180
4208
|
if (!navKeys.has(event.key)) {
|
|
4181
4209
|
return;
|
|
4182
4210
|
}
|
|
4211
|
+
|
|
4212
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4213
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4214
|
+
// and click it directly.
|
|
4215
|
+
if (event.key === 'Enter') {
|
|
4216
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4217
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4218
|
+
if (btn) {
|
|
4219
|
+
event.preventDefault();
|
|
4220
|
+
event.stopPropagation();
|
|
4221
|
+
btn.click();
|
|
4222
|
+
return;
|
|
4223
|
+
}
|
|
4224
|
+
}
|
|
4225
|
+
|
|
4183
4226
|
event.preventDefault();
|
|
4184
4227
|
event.stopPropagation();
|
|
4185
4228
|
const newEvent = new KeyboardEvent('keydown', {
|
|
@@ -4203,9 +4246,55 @@ class AuroDropdownBib extends i$3 {
|
|
|
4203
4246
|
}
|
|
4204
4247
|
|
|
4205
4248
|
/**
|
|
4206
|
-
*
|
|
4207
|
-
*
|
|
4249
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4250
|
+
*
|
|
4251
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4252
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4253
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4254
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4255
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4256
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4257
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4258
|
+
*
|
|
4259
|
+
* @private
|
|
4208
4260
|
*/
|
|
4261
|
+
_lockTouchScroll() {
|
|
4262
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4263
|
+
|
|
4264
|
+
this._touchMoveHandler = (event) => {
|
|
4265
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4266
|
+
// check whether the touch started inside a scrollable element that
|
|
4267
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4268
|
+
for (const el of event.composedPath()) {
|
|
4269
|
+
if (el === dialog) {
|
|
4270
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4271
|
+
break;
|
|
4272
|
+
}
|
|
4273
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4274
|
+
const { overflowY } = getComputedStyle(el);
|
|
4275
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4276
|
+
return;
|
|
4277
|
+
}
|
|
4278
|
+
}
|
|
4279
|
+
}
|
|
4280
|
+
|
|
4281
|
+
event.preventDefault();
|
|
4282
|
+
};
|
|
4283
|
+
|
|
4284
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4285
|
+
}
|
|
4286
|
+
|
|
4287
|
+
/**
|
|
4288
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4289
|
+
* @private
|
|
4290
|
+
*/
|
|
4291
|
+
_unlockTouchScroll() {
|
|
4292
|
+
if (this._touchMoveHandler) {
|
|
4293
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4294
|
+
this._touchMoveHandler = undefined;
|
|
4295
|
+
}
|
|
4296
|
+
}
|
|
4297
|
+
|
|
4209
4298
|
open(modal = true) {
|
|
4210
4299
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4211
4300
|
if (dialog && !dialog.open) {
|
|
@@ -4222,6 +4311,8 @@ class AuroDropdownBib extends i$3 {
|
|
|
4222
4311
|
|
|
4223
4312
|
documentElement.style.overflow = prevOverflow;
|
|
4224
4313
|
|
|
4314
|
+
this._lockTouchScroll();
|
|
4315
|
+
|
|
4225
4316
|
} else {
|
|
4226
4317
|
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4227
4318
|
// focusing steps which steal focus from the trigger and cause
|
|
@@ -4237,6 +4328,7 @@ class AuroDropdownBib extends i$3 {
|
|
|
4237
4328
|
close() {
|
|
4238
4329
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4239
4330
|
if (dialog && dialog.open) {
|
|
4331
|
+
this._unlockTouchScroll();
|
|
4240
4332
|
dialog.close();
|
|
4241
4333
|
}
|
|
4242
4334
|
}
|
|
@@ -4502,7 +4594,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
4502
4594
|
}
|
|
4503
4595
|
};
|
|
4504
4596
|
|
|
4505
|
-
var formkitVersion$1 = '
|
|
4597
|
+
var formkitVersion$1 = '202602260152';
|
|
4506
4598
|
|
|
4507
4599
|
class AuroElement extends i$3 {
|
|
4508
4600
|
static get properties() {
|
|
@@ -4775,6 +4867,18 @@ class AuroDropdown extends AuroElement {
|
|
|
4775
4867
|
*/
|
|
4776
4868
|
show() {
|
|
4777
4869
|
this.floater.showBib();
|
|
4870
|
+
|
|
4871
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
4872
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
4873
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
4874
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
4875
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
4876
|
+
// falls outside the user activation window and causes iOS to
|
|
4877
|
+
// dismiss the keyboard.
|
|
4878
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
4879
|
+
const useModal = !this.disableFocusTrap;
|
|
4880
|
+
this.bibElement.value.open(useModal);
|
|
4881
|
+
}
|
|
4778
4882
|
}
|
|
4779
4883
|
|
|
4780
4884
|
/**
|
|
@@ -5161,6 +5265,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5161
5265
|
this.bibElement.value.close();
|
|
5162
5266
|
}
|
|
5163
5267
|
}
|
|
5268
|
+
|
|
5269
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5270
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5271
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5272
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5273
|
+
this.bibElement.value.close();
|
|
5274
|
+
this.bibElement.value.open(useModal);
|
|
5275
|
+
}
|
|
5164
5276
|
}
|
|
5165
5277
|
|
|
5166
5278
|
/**
|
|
@@ -6201,7 +6313,7 @@ class AuroHelpText extends i$3 {
|
|
|
6201
6313
|
}
|
|
6202
6314
|
}
|
|
6203
6315
|
|
|
6204
|
-
var formkitVersion = '
|
|
6316
|
+
var formkitVersion = '202602260152';
|
|
6205
6317
|
|
|
6206
6318
|
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}`;
|
|
6207
6319
|
|
|
@@ -6738,6 +6850,18 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6738
6850
|
|
|
6739
6851
|
// Restore trigger accessibility when closing fullscreen
|
|
6740
6852
|
this.dropdown.trigger.inert = false;
|
|
6853
|
+
|
|
6854
|
+
// Restore focus to the trigger after closing the fullscreen dialog.
|
|
6855
|
+
// The browser's native dialog focus restoration fails because the
|
|
6856
|
+
// trigger was set to inert before showModal().
|
|
6857
|
+
// Use rAF to run after Lit's microtask update cycle calls dialog.close().
|
|
6858
|
+
if (this.dropdown.isBibFullscreen) {
|
|
6859
|
+
requestAnimationFrame(() => {
|
|
6860
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
6861
|
+
this.dropdown.trigger.focus();
|
|
6862
|
+
}
|
|
6863
|
+
});
|
|
6864
|
+
}
|
|
6741
6865
|
}
|
|
6742
6866
|
|
|
6743
6867
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7004,9 +7128,10 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7004
7128
|
// Announce the selection after the dropdown closes so it isn't
|
|
7005
7129
|
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7006
7130
|
const selectedValue = event.detail.stringValue;
|
|
7131
|
+
const announcementDelay = 300;
|
|
7007
7132
|
setTimeout(() => {
|
|
7008
7133
|
this.announceToScreenReader(`${selectedValue}, selected`);
|
|
7009
|
-
},
|
|
7134
|
+
}, announcementDelay);
|
|
7010
7135
|
});
|
|
7011
7136
|
}
|
|
7012
7137
|
|
|
@@ -7052,10 +7177,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7052
7177
|
}
|
|
7053
7178
|
|
|
7054
7179
|
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
7180
|
+
// Non-fullscreen (select-only combobox pattern per WAI-ARIA APG):
|
|
7181
|
+
// Tab selects the focused option and closes the popup, moving focus
|
|
7182
|
+
// to the next focusable element on the page.
|
|
7183
|
+
// https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
|
|
7184
|
+
//
|
|
7185
|
+
// Fullscreen (dialog / modal pattern): Tab navigates between
|
|
7186
|
+
// focusable elements inside the modal (e.g. the close button) via
|
|
7187
|
+
// the native focus trap provided by showModal(). The dropdown is
|
|
7188
|
+
// closed by the close button or Escape instead.
|
|
7055
7189
|
if (!this.dropdown.isBibFullscreen) {
|
|
7190
|
+
if (this.optionActive && !this.multiSelect) {
|
|
7191
|
+
this.menu.makeSelection();
|
|
7192
|
+
}
|
|
7056
7193
|
this.dropdown.hide();
|
|
7057
7194
|
}
|
|
7058
|
-
// Fullscreen: let native dialog handle Tab focus trapping
|
|
7059
7195
|
return;
|
|
7060
7196
|
}
|
|
7061
7197
|
|
|
@@ -7268,7 +7404,9 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7268
7404
|
this._updateNativeSelect();
|
|
7269
7405
|
this.validate();
|
|
7270
7406
|
this.hideBib();
|
|
7271
|
-
this.
|
|
7407
|
+
if (this.dropdown && this.dropdown.trigger) {
|
|
7408
|
+
this.dropdown.trigger.focus();
|
|
7409
|
+
}
|
|
7272
7410
|
|
|
7273
7411
|
// LEGACY EVENT
|
|
7274
7412
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8001,7 +8139,11 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8001
8139
|
|
|
8002
8140
|
// Generate unique ID if not already set (required for aria-activedescendant)
|
|
8003
8141
|
if (!this.id) {
|
|
8004
|
-
|
|
8142
|
+
const idBase = 36;
|
|
8143
|
+
const sliceStart = 2;
|
|
8144
|
+
const sliceEnd = 8;
|
|
8145
|
+
this.id = `menuoption-${Math.random().toString(idBase).
|
|
8146
|
+
slice(sliceStart, sliceEnd)}`;
|
|
8005
8147
|
}
|
|
8006
8148
|
|
|
8007
8149
|
this.setAttribute('role', 'option');
|
|
@@ -8908,7 +9050,7 @@ class MenuService {
|
|
|
8908
9050
|
|
|
8909
9051
|
const MenuContext = n('menu-context');
|
|
8910
9052
|
|
|
8911
|
-
/* eslint-disable no-underscore-dangle
|
|
9053
|
+
/* eslint-disable no-underscore-dangle */
|
|
8912
9054
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8913
9055
|
// See LICENSE in the project root for license information.
|
|
8914
9056
|
|
|
@@ -8929,7 +9071,7 @@ const MenuContext = n('menu-context');
|
|
|
8929
9071
|
* @slot - Slot for insertion of menu options.
|
|
8930
9072
|
*/
|
|
8931
9073
|
|
|
8932
|
-
/* eslint-disable
|
|
9074
|
+
/* eslint-disable max-lines */
|
|
8933
9075
|
|
|
8934
9076
|
class AuroMenu extends AuroElement$1 {
|
|
8935
9077
|
|
|
@@ -3918,7 +3918,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3918
3918
|
|
|
3919
3919
|
var iconVersion$1 = '9.1.2';
|
|
3920
3920
|
|
|
3921
|
-
var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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}`;
|
|
3921
|
+
var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;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([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}`;
|
|
3922
3922
|
|
|
3923
3923
|
var colorCss$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3924
3924
|
|
|
@@ -3926,6 +3926,8 @@ var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--
|
|
|
3926
3926
|
|
|
3927
3927
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3928
3928
|
// See LICENSE in the project root for license information.
|
|
3929
|
+
/* eslint-disable max-lines */
|
|
3930
|
+
// ---------------------------------------------------------------------
|
|
3929
3931
|
|
|
3930
3932
|
|
|
3931
3933
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -4101,22 +4103,63 @@ class AuroDropdownBib extends LitElement {
|
|
|
4101
4103
|
// Handle ESC key via dialog's cancel event
|
|
4102
4104
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4103
4105
|
dialog.addEventListener('cancel', (event) => {
|
|
4104
|
-
|
|
4106
|
+
// Let parent handle closing
|
|
4107
|
+
event.preventDefault();
|
|
4105
4108
|
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4106
4109
|
bubbles: true,
|
|
4107
4110
|
composed: true
|
|
4108
4111
|
}));
|
|
4109
4112
|
});
|
|
4110
4113
|
|
|
4111
|
-
//
|
|
4112
|
-
//
|
|
4113
|
-
//
|
|
4114
|
-
//
|
|
4115
|
-
|
|
4114
|
+
// showModal() creates a closed focus scope — keyboard events inside
|
|
4115
|
+
// the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4116
|
+
// keydown handlers in the parent shadow DOM. This handler bridges
|
|
4117
|
+
// that gap by re-dispatching navigation keys so they cross the
|
|
4118
|
+
// shadow boundary and reach the menu navigation logic in the parent
|
|
4119
|
+
// component.
|
|
4120
|
+
//
|
|
4121
|
+
// The trade-off: intercepting these keys means native keyboard
|
|
4122
|
+
// behaviors that would normally "just work" must be manually
|
|
4123
|
+
// re-implemented here:
|
|
4124
|
+
//
|
|
4125
|
+
// - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4126
|
+
// native Enter→click that <button> provides, so we call .click()
|
|
4127
|
+
// directly when Enter is pressed on a button-like element.
|
|
4128
|
+
//
|
|
4129
|
+
// - Tab: NOT intercepted — left to the browser's native focus trap
|
|
4130
|
+
// provided by showModal(), which cycles Tab between focusable
|
|
4131
|
+
// elements inside the dialog (e.g. the input and close button).
|
|
4132
|
+
// Intercepting Tab would kill the native focus trap and break
|
|
4133
|
+
// focus management inside the dialog.
|
|
4134
|
+
//
|
|
4135
|
+
// - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4136
|
+
// (handled above), so the re-dispatched Escape is a secondary
|
|
4137
|
+
// path for parent components that also listen for Escape keydown.
|
|
4138
|
+
const navKeys = new Set([
|
|
4139
|
+
'ArrowUp',
|
|
4140
|
+
'ArrowDown',
|
|
4141
|
+
'Enter',
|
|
4142
|
+
'Escape'
|
|
4143
|
+
]);
|
|
4116
4144
|
dialog.addEventListener('keydown', (event) => {
|
|
4117
4145
|
if (!navKeys.has(event.key)) {
|
|
4118
4146
|
return;
|
|
4119
4147
|
}
|
|
4148
|
+
|
|
4149
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4150
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4151
|
+
// and click it directly.
|
|
4152
|
+
if (event.key === 'Enter') {
|
|
4153
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4154
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4155
|
+
if (btn) {
|
|
4156
|
+
event.preventDefault();
|
|
4157
|
+
event.stopPropagation();
|
|
4158
|
+
btn.click();
|
|
4159
|
+
return;
|
|
4160
|
+
}
|
|
4161
|
+
}
|
|
4162
|
+
|
|
4120
4163
|
event.preventDefault();
|
|
4121
4164
|
event.stopPropagation();
|
|
4122
4165
|
const newEvent = new KeyboardEvent('keydown', {
|
|
@@ -4140,9 +4183,55 @@ class AuroDropdownBib extends LitElement {
|
|
|
4140
4183
|
}
|
|
4141
4184
|
|
|
4142
4185
|
/**
|
|
4143
|
-
*
|
|
4144
|
-
*
|
|
4186
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4187
|
+
*
|
|
4188
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4189
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4190
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4191
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4192
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4193
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4194
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4195
|
+
*
|
|
4196
|
+
* @private
|
|
4145
4197
|
*/
|
|
4198
|
+
_lockTouchScroll() {
|
|
4199
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4200
|
+
|
|
4201
|
+
this._touchMoveHandler = (event) => {
|
|
4202
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4203
|
+
// check whether the touch started inside a scrollable element that
|
|
4204
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4205
|
+
for (const el of event.composedPath()) {
|
|
4206
|
+
if (el === dialog) {
|
|
4207
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4208
|
+
break;
|
|
4209
|
+
}
|
|
4210
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4211
|
+
const { overflowY } = getComputedStyle(el);
|
|
4212
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4213
|
+
return;
|
|
4214
|
+
}
|
|
4215
|
+
}
|
|
4216
|
+
}
|
|
4217
|
+
|
|
4218
|
+
event.preventDefault();
|
|
4219
|
+
};
|
|
4220
|
+
|
|
4221
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4222
|
+
}
|
|
4223
|
+
|
|
4224
|
+
/**
|
|
4225
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4226
|
+
* @private
|
|
4227
|
+
*/
|
|
4228
|
+
_unlockTouchScroll() {
|
|
4229
|
+
if (this._touchMoveHandler) {
|
|
4230
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4231
|
+
this._touchMoveHandler = undefined;
|
|
4232
|
+
}
|
|
4233
|
+
}
|
|
4234
|
+
|
|
4146
4235
|
open(modal = true) {
|
|
4147
4236
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4148
4237
|
if (dialog && !dialog.open) {
|
|
@@ -4159,6 +4248,8 @@ class AuroDropdownBib extends LitElement {
|
|
|
4159
4248
|
|
|
4160
4249
|
documentElement.style.overflow = prevOverflow;
|
|
4161
4250
|
|
|
4251
|
+
this._lockTouchScroll();
|
|
4252
|
+
|
|
4162
4253
|
} else {
|
|
4163
4254
|
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4164
4255
|
// focusing steps which steal focus from the trigger and cause
|
|
@@ -4174,6 +4265,7 @@ class AuroDropdownBib extends LitElement {
|
|
|
4174
4265
|
close() {
|
|
4175
4266
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4176
4267
|
if (dialog && dialog.open) {
|
|
4268
|
+
this._unlockTouchScroll();
|
|
4177
4269
|
dialog.close();
|
|
4178
4270
|
}
|
|
4179
4271
|
}
|
|
@@ -4439,7 +4531,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4439
4531
|
}
|
|
4440
4532
|
};
|
|
4441
4533
|
|
|
4442
|
-
var formkitVersion$1 = '
|
|
4534
|
+
var formkitVersion$1 = '202602260152';
|
|
4443
4535
|
|
|
4444
4536
|
class AuroElement extends LitElement {
|
|
4445
4537
|
static get properties() {
|
|
@@ -4712,6 +4804,18 @@ class AuroDropdown extends AuroElement {
|
|
|
4712
4804
|
*/
|
|
4713
4805
|
show() {
|
|
4714
4806
|
this.floater.showBib();
|
|
4807
|
+
|
|
4808
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
4809
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
4810
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
4811
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
4812
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
4813
|
+
// falls outside the user activation window and causes iOS to
|
|
4814
|
+
// dismiss the keyboard.
|
|
4815
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
4816
|
+
const useModal = !this.disableFocusTrap;
|
|
4817
|
+
this.bibElement.value.open(useModal);
|
|
4818
|
+
}
|
|
4715
4819
|
}
|
|
4716
4820
|
|
|
4717
4821
|
/**
|
|
@@ -5098,6 +5202,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5098
5202
|
this.bibElement.value.close();
|
|
5099
5203
|
}
|
|
5100
5204
|
}
|
|
5205
|
+
|
|
5206
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5207
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5208
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5209
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5210
|
+
this.bibElement.value.close();
|
|
5211
|
+
this.bibElement.value.open(useModal);
|
|
5212
|
+
}
|
|
5101
5213
|
}
|
|
5102
5214
|
|
|
5103
5215
|
/**
|
|
@@ -6138,7 +6250,7 @@ class AuroHelpText extends LitElement {
|
|
|
6138
6250
|
}
|
|
6139
6251
|
}
|
|
6140
6252
|
|
|
6141
|
-
var formkitVersion = '
|
|
6253
|
+
var formkitVersion = '202602260152';
|
|
6142
6254
|
|
|
6143
6255
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);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}`;
|
|
6144
6256
|
|
|
@@ -6675,6 +6787,18 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6675
6787
|
|
|
6676
6788
|
// Restore trigger accessibility when closing fullscreen
|
|
6677
6789
|
this.dropdown.trigger.inert = false;
|
|
6790
|
+
|
|
6791
|
+
// Restore focus to the trigger after closing the fullscreen dialog.
|
|
6792
|
+
// The browser's native dialog focus restoration fails because the
|
|
6793
|
+
// trigger was set to inert before showModal().
|
|
6794
|
+
// Use rAF to run after Lit's microtask update cycle calls dialog.close().
|
|
6795
|
+
if (this.dropdown.isBibFullscreen) {
|
|
6796
|
+
requestAnimationFrame(() => {
|
|
6797
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
6798
|
+
this.dropdown.trigger.focus();
|
|
6799
|
+
}
|
|
6800
|
+
});
|
|
6801
|
+
}
|
|
6678
6802
|
}
|
|
6679
6803
|
|
|
6680
6804
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -6941,9 +7065,10 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6941
7065
|
// Announce the selection after the dropdown closes so it isn't
|
|
6942
7066
|
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
6943
7067
|
const selectedValue = event.detail.stringValue;
|
|
7068
|
+
const announcementDelay = 300;
|
|
6944
7069
|
setTimeout(() => {
|
|
6945
7070
|
this.announceToScreenReader(`${selectedValue}, selected`);
|
|
6946
|
-
},
|
|
7071
|
+
}, announcementDelay);
|
|
6947
7072
|
});
|
|
6948
7073
|
}
|
|
6949
7074
|
|
|
@@ -6989,10 +7114,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6989
7114
|
}
|
|
6990
7115
|
|
|
6991
7116
|
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
7117
|
+
// Non-fullscreen (select-only combobox pattern per WAI-ARIA APG):
|
|
7118
|
+
// Tab selects the focused option and closes the popup, moving focus
|
|
7119
|
+
// to the next focusable element on the page.
|
|
7120
|
+
// https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
|
|
7121
|
+
//
|
|
7122
|
+
// Fullscreen (dialog / modal pattern): Tab navigates between
|
|
7123
|
+
// focusable elements inside the modal (e.g. the close button) via
|
|
7124
|
+
// the native focus trap provided by showModal(). The dropdown is
|
|
7125
|
+
// closed by the close button or Escape instead.
|
|
6992
7126
|
if (!this.dropdown.isBibFullscreen) {
|
|
7127
|
+
if (this.optionActive && !this.multiSelect) {
|
|
7128
|
+
this.menu.makeSelection();
|
|
7129
|
+
}
|
|
6993
7130
|
this.dropdown.hide();
|
|
6994
7131
|
}
|
|
6995
|
-
// Fullscreen: let native dialog handle Tab focus trapping
|
|
6996
7132
|
return;
|
|
6997
7133
|
}
|
|
6998
7134
|
|
|
@@ -7205,7 +7341,9 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7205
7341
|
this._updateNativeSelect();
|
|
7206
7342
|
this.validate();
|
|
7207
7343
|
this.hideBib();
|
|
7208
|
-
this.
|
|
7344
|
+
if (this.dropdown && this.dropdown.trigger) {
|
|
7345
|
+
this.dropdown.trigger.focus();
|
|
7346
|
+
}
|
|
7209
7347
|
|
|
7210
7348
|
// LEGACY EVENT
|
|
7211
7349
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|