@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
|
@@ -4042,7 +4042,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4042
4042
|
|
|
4043
4043
|
var iconVersion$2 = '9.1.2';
|
|
4044
4044
|
|
|
4045
|
-
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}`;
|
|
4045
|
+
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}`;
|
|
4046
4046
|
|
|
4047
4047
|
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)}`;
|
|
4048
4048
|
|
|
@@ -4050,6 +4050,8 @@ var tokensCss$1$1 = i$6`:host(:not([ondark])),:host(:not([appearance=inverse])){
|
|
|
4050
4050
|
|
|
4051
4051
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4052
4052
|
// See LICENSE in the project root for license information.
|
|
4053
|
+
/* eslint-disable max-lines */
|
|
4054
|
+
// ---------------------------------------------------------------------
|
|
4053
4055
|
|
|
4054
4056
|
|
|
4055
4057
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -4225,22 +4227,63 @@ class AuroDropdownBib extends i$3 {
|
|
|
4225
4227
|
// Handle ESC key via dialog's cancel event
|
|
4226
4228
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4227
4229
|
dialog.addEventListener('cancel', (event) => {
|
|
4228
|
-
|
|
4230
|
+
// Let parent handle closing
|
|
4231
|
+
event.preventDefault();
|
|
4229
4232
|
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4230
4233
|
bubbles: true,
|
|
4231
4234
|
composed: true
|
|
4232
4235
|
}));
|
|
4233
4236
|
});
|
|
4234
4237
|
|
|
4235
|
-
//
|
|
4236
|
-
//
|
|
4237
|
-
//
|
|
4238
|
-
//
|
|
4239
|
-
|
|
4238
|
+
// showModal() creates a closed focus scope — keyboard events inside
|
|
4239
|
+
// the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4240
|
+
// keydown handlers in the parent shadow DOM. This handler bridges
|
|
4241
|
+
// that gap by re-dispatching navigation keys so they cross the
|
|
4242
|
+
// shadow boundary and reach the menu navigation logic in the parent
|
|
4243
|
+
// component.
|
|
4244
|
+
//
|
|
4245
|
+
// The trade-off: intercepting these keys means native keyboard
|
|
4246
|
+
// behaviors that would normally "just work" must be manually
|
|
4247
|
+
// re-implemented here:
|
|
4248
|
+
//
|
|
4249
|
+
// - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4250
|
+
// native Enter→click that <button> provides, so we call .click()
|
|
4251
|
+
// directly when Enter is pressed on a button-like element.
|
|
4252
|
+
//
|
|
4253
|
+
// - Tab: NOT intercepted — left to the browser's native focus trap
|
|
4254
|
+
// provided by showModal(), which cycles Tab between focusable
|
|
4255
|
+
// elements inside the dialog (e.g. the input and close button).
|
|
4256
|
+
// Intercepting Tab would kill the native focus trap and break
|
|
4257
|
+
// focus management inside the dialog.
|
|
4258
|
+
//
|
|
4259
|
+
// - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4260
|
+
// (handled above), so the re-dispatched Escape is a secondary
|
|
4261
|
+
// path for parent components that also listen for Escape keydown.
|
|
4262
|
+
const navKeys = new Set([
|
|
4263
|
+
'ArrowUp',
|
|
4264
|
+
'ArrowDown',
|
|
4265
|
+
'Enter',
|
|
4266
|
+
'Escape'
|
|
4267
|
+
]);
|
|
4240
4268
|
dialog.addEventListener('keydown', (event) => {
|
|
4241
4269
|
if (!navKeys.has(event.key)) {
|
|
4242
4270
|
return;
|
|
4243
4271
|
}
|
|
4272
|
+
|
|
4273
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4274
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4275
|
+
// and click it directly.
|
|
4276
|
+
if (event.key === 'Enter') {
|
|
4277
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4278
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4279
|
+
if (btn) {
|
|
4280
|
+
event.preventDefault();
|
|
4281
|
+
event.stopPropagation();
|
|
4282
|
+
btn.click();
|
|
4283
|
+
return;
|
|
4284
|
+
}
|
|
4285
|
+
}
|
|
4286
|
+
|
|
4244
4287
|
event.preventDefault();
|
|
4245
4288
|
event.stopPropagation();
|
|
4246
4289
|
const newEvent = new KeyboardEvent('keydown', {
|
|
@@ -4264,9 +4307,55 @@ class AuroDropdownBib extends i$3 {
|
|
|
4264
4307
|
}
|
|
4265
4308
|
|
|
4266
4309
|
/**
|
|
4267
|
-
*
|
|
4268
|
-
*
|
|
4310
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4311
|
+
*
|
|
4312
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4313
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4314
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4315
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4316
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4317
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4318
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4319
|
+
*
|
|
4320
|
+
* @private
|
|
4269
4321
|
*/
|
|
4322
|
+
_lockTouchScroll() {
|
|
4323
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4324
|
+
|
|
4325
|
+
this._touchMoveHandler = (event) => {
|
|
4326
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4327
|
+
// check whether the touch started inside a scrollable element that
|
|
4328
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4329
|
+
for (const el of event.composedPath()) {
|
|
4330
|
+
if (el === dialog) {
|
|
4331
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4332
|
+
break;
|
|
4333
|
+
}
|
|
4334
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4335
|
+
const { overflowY } = getComputedStyle(el);
|
|
4336
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4337
|
+
return;
|
|
4338
|
+
}
|
|
4339
|
+
}
|
|
4340
|
+
}
|
|
4341
|
+
|
|
4342
|
+
event.preventDefault();
|
|
4343
|
+
};
|
|
4344
|
+
|
|
4345
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4346
|
+
}
|
|
4347
|
+
|
|
4348
|
+
/**
|
|
4349
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4350
|
+
* @private
|
|
4351
|
+
*/
|
|
4352
|
+
_unlockTouchScroll() {
|
|
4353
|
+
if (this._touchMoveHandler) {
|
|
4354
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4355
|
+
this._touchMoveHandler = undefined;
|
|
4356
|
+
}
|
|
4357
|
+
}
|
|
4358
|
+
|
|
4270
4359
|
open(modal = true) {
|
|
4271
4360
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4272
4361
|
if (dialog && !dialog.open) {
|
|
@@ -4283,6 +4372,8 @@ class AuroDropdownBib extends i$3 {
|
|
|
4283
4372
|
|
|
4284
4373
|
documentElement.style.overflow = prevOverflow;
|
|
4285
4374
|
|
|
4375
|
+
this._lockTouchScroll();
|
|
4376
|
+
|
|
4286
4377
|
} else {
|
|
4287
4378
|
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4288
4379
|
// focusing steps which steal focus from the trigger and cause
|
|
@@ -4298,6 +4389,7 @@ class AuroDropdownBib extends i$3 {
|
|
|
4298
4389
|
close() {
|
|
4299
4390
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4300
4391
|
if (dialog && dialog.open) {
|
|
4392
|
+
this._unlockTouchScroll();
|
|
4301
4393
|
dialog.close();
|
|
4302
4394
|
}
|
|
4303
4395
|
}
|
|
@@ -4563,7 +4655,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
4563
4655
|
}
|
|
4564
4656
|
};
|
|
4565
4657
|
|
|
4566
|
-
var formkitVersion$1 = '
|
|
4658
|
+
var formkitVersion$1 = '202602260152';
|
|
4567
4659
|
|
|
4568
4660
|
class AuroElement extends i$3 {
|
|
4569
4661
|
static get properties() {
|
|
@@ -4836,6 +4928,18 @@ class AuroDropdown extends AuroElement {
|
|
|
4836
4928
|
*/
|
|
4837
4929
|
show() {
|
|
4838
4930
|
this.floater.showBib();
|
|
4931
|
+
|
|
4932
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
4933
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
4934
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
4935
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
4936
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
4937
|
+
// falls outside the user activation window and causes iOS to
|
|
4938
|
+
// dismiss the keyboard.
|
|
4939
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
4940
|
+
const useModal = !this.disableFocusTrap;
|
|
4941
|
+
this.bibElement.value.open(useModal);
|
|
4942
|
+
}
|
|
4839
4943
|
}
|
|
4840
4944
|
|
|
4841
4945
|
/**
|
|
@@ -5222,6 +5326,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5222
5326
|
this.bibElement.value.close();
|
|
5223
5327
|
}
|
|
5224
5328
|
}
|
|
5329
|
+
|
|
5330
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5331
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5332
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5333
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5334
|
+
this.bibElement.value.close();
|
|
5335
|
+
this.bibElement.value.open(useModal);
|
|
5336
|
+
}
|
|
5225
5337
|
}
|
|
5226
5338
|
|
|
5227
5339
|
/**
|
|
@@ -6262,7 +6374,7 @@ class AuroHelpText extends i$3 {
|
|
|
6262
6374
|
}
|
|
6263
6375
|
}
|
|
6264
6376
|
|
|
6265
|
-
var formkitVersion = '
|
|
6377
|
+
var formkitVersion = '202602260152';
|
|
6266
6378
|
|
|
6267
6379
|
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}`;
|
|
6268
6380
|
|
|
@@ -6799,6 +6911,18 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6799
6911
|
|
|
6800
6912
|
// Restore trigger accessibility when closing fullscreen
|
|
6801
6913
|
this.dropdown.trigger.inert = false;
|
|
6914
|
+
|
|
6915
|
+
// Restore focus to the trigger after closing the fullscreen dialog.
|
|
6916
|
+
// The browser's native dialog focus restoration fails because the
|
|
6917
|
+
// trigger was set to inert before showModal().
|
|
6918
|
+
// Use rAF to run after Lit's microtask update cycle calls dialog.close().
|
|
6919
|
+
if (this.dropdown.isBibFullscreen) {
|
|
6920
|
+
requestAnimationFrame(() => {
|
|
6921
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
6922
|
+
this.dropdown.trigger.focus();
|
|
6923
|
+
}
|
|
6924
|
+
});
|
|
6925
|
+
}
|
|
6802
6926
|
}
|
|
6803
6927
|
|
|
6804
6928
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7065,9 +7189,10 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7065
7189
|
// Announce the selection after the dropdown closes so it isn't
|
|
7066
7190
|
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7067
7191
|
const selectedValue = event.detail.stringValue;
|
|
7192
|
+
const announcementDelay = 300;
|
|
7068
7193
|
setTimeout(() => {
|
|
7069
7194
|
this.announceToScreenReader(`${selectedValue}, selected`);
|
|
7070
|
-
},
|
|
7195
|
+
}, announcementDelay);
|
|
7071
7196
|
});
|
|
7072
7197
|
}
|
|
7073
7198
|
|
|
@@ -7113,10 +7238,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7113
7238
|
}
|
|
7114
7239
|
|
|
7115
7240
|
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
7241
|
+
// Non-fullscreen (select-only combobox pattern per WAI-ARIA APG):
|
|
7242
|
+
// Tab selects the focused option and closes the popup, moving focus
|
|
7243
|
+
// to the next focusable element on the page.
|
|
7244
|
+
// https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
|
|
7245
|
+
//
|
|
7246
|
+
// Fullscreen (dialog / modal pattern): Tab navigates between
|
|
7247
|
+
// focusable elements inside the modal (e.g. the close button) via
|
|
7248
|
+
// the native focus trap provided by showModal(). The dropdown is
|
|
7249
|
+
// closed by the close button or Escape instead.
|
|
7116
7250
|
if (!this.dropdown.isBibFullscreen) {
|
|
7251
|
+
if (this.optionActive && !this.multiSelect) {
|
|
7252
|
+
this.menu.makeSelection();
|
|
7253
|
+
}
|
|
7117
7254
|
this.dropdown.hide();
|
|
7118
7255
|
}
|
|
7119
|
-
// Fullscreen: let native dialog handle Tab focus trapping
|
|
7120
7256
|
return;
|
|
7121
7257
|
}
|
|
7122
7258
|
|
|
@@ -7329,7 +7465,9 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7329
7465
|
this._updateNativeSelect();
|
|
7330
7466
|
this.validate();
|
|
7331
7467
|
this.hideBib();
|
|
7332
|
-
this.
|
|
7468
|
+
if (this.dropdown && this.dropdown.trigger) {
|
|
7469
|
+
this.dropdown.trigger.focus();
|
|
7470
|
+
}
|
|
7333
7471
|
|
|
7334
7472
|
// LEGACY EVENT
|
|
7335
7473
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8062,7 +8200,11 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8062
8200
|
|
|
8063
8201
|
// Generate unique ID if not already set (required for aria-activedescendant)
|
|
8064
8202
|
if (!this.id) {
|
|
8065
|
-
|
|
8203
|
+
const idBase = 36;
|
|
8204
|
+
const sliceStart = 2;
|
|
8205
|
+
const sliceEnd = 8;
|
|
8206
|
+
this.id = `menuoption-${Math.random().toString(idBase).
|
|
8207
|
+
slice(sliceStart, sliceEnd)}`;
|
|
8066
8208
|
}
|
|
8067
8209
|
|
|
8068
8210
|
this.setAttribute('role', 'option');
|
|
@@ -8969,7 +9111,7 @@ class MenuService {
|
|
|
8969
9111
|
|
|
8970
9112
|
const MenuContext = n('menu-context');
|
|
8971
9113
|
|
|
8972
|
-
/* eslint-disable no-underscore-dangle
|
|
9114
|
+
/* eslint-disable no-underscore-dangle */
|
|
8973
9115
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8974
9116
|
// See LICENSE in the project root for license information.
|
|
8975
9117
|
|
|
@@ -8990,7 +9132,7 @@ const MenuContext = n('menu-context');
|
|
|
8990
9132
|
* @slot - Slot for insertion of menu options.
|
|
8991
9133
|
*/
|
|
8992
9134
|
|
|
8993
|
-
/* eslint-disable
|
|
9135
|
+
/* eslint-disable max-lines */
|
|
8994
9136
|
|
|
8995
9137
|
class AuroMenu extends AuroElement$1 {
|
|
8996
9138
|
|