@aurodesignsystem-dev/auro-formkit 0.0.0-pr1541.4 → 0.0.0-pr1542.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.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.md +2 -2
- package/components/combobox/demo/customize.md +1 -1
- package/components/combobox/demo/customize.min.js +40 -90
- package/components/combobox/demo/getting-started.min.js +40 -90
- package/components/combobox/demo/index.md +0 -1
- package/components/combobox/demo/index.min.js +40 -90
- package/components/combobox/demo/keyboard-behavior.md +1 -4
- package/components/combobox/dist/auro-combobox.d.ts +3 -1
- package/components/combobox/dist/index.js +23 -4
- package/components/combobox/dist/registered.js +23 -4
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +51 -105
- package/components/form/demo/getting-started.min.js +51 -105
- package/components/form/demo/index.min.js +51 -105
- package/components/form/demo/registerDemoDeps.min.js +51 -105
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/accessibility.md +4 -4
- package/components/menu/demo/api.md +19 -26
- package/components/menu/demo/css-only.md +19 -26
- package/components/menu/demo/customize.md +47 -307
- package/components/menu/demo/design.md +1 -1
- package/components/menu/demo/getting-started.md +7 -144
- package/components/menu/demo/index.min.js +18 -213
- package/components/menu/demo/keyboard-behavior.md +4 -83
- package/components/menu/demo/voiceover.md +3 -3
- package/components/menu/demo/why-menu.md +9 -8
- package/components/menu/dist/auro-menu-utils.d.ts +0 -19
- package/components/menu/dist/auro-menu.d.ts +7 -3
- package/components/menu/dist/auro-menuoption.d.ts +0 -12
- package/components/menu/dist/index.js +17 -86
- package/components/menu/dist/registered.js +17 -86
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.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.md +2 -2
- package/components/select/demo/customize.md +2 -5
- package/components/select/demo/customize.min.js +20 -93
- package/components/select/demo/design.md +10 -10
- package/components/select/demo/getting-started.md +1 -1
- package/components/select/demo/getting-started.min.js +20 -93
- package/components/select/demo/index.md +2 -2
- package/components/select/demo/index.min.js +20 -93
- package/components/select/demo/keyboard-behavior.md +18 -49
- package/components/select/dist/auro-select.d.ts +2 -6
- package/components/select/dist/index.js +3 -7
- package/components/select/dist/registered.js +3 -7
- package/custom-elements.json +1514 -1599
- package/package.json +1 -1
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082142';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082142';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082142';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607082142';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607082142';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -38,11 +38,11 @@ The `auro-combobox` element provides users with a way to select an option from a
|
|
|
38
38
|
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
39
39
|
| `setCustomValidityValueMissingFilter` | `setCustomValidityValueMissingFilter` | | `string` | | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
|
|
40
40
|
| `shift` | `shift` | | `boolean` | | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
41
|
-
| `triggerIcon` | `triggerIcon` | | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
41
|
+
| `triggerIcon` | `triggerIcon` | | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
|
|
42
42
|
| `type` | `type` | | `string` | | Applies the defined value as the type attribute on `auro-input`. |
|
|
43
43
|
| `typedValue` | `typedValue` | | `string` | | Specifies the value of the input element within the combobox. |
|
|
44
44
|
| `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
45
|
-
| `value` | `value` | | `string` | | Value selected for the dropdown menu.
|
|
45
|
+
| `value` | `value` | | `string` | | Value selected for the dropdown menu. |
|
|
46
46
|
|
|
47
47
|
## Methods
|
|
48
48
|
|
|
@@ -669,7 +669,7 @@
|
|
|
669
669
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
670
670
|
</auro-accordion>
|
|
671
671
|
<auro-header level="3" id="inputType">Input Type</auro-header>
|
|
672
|
-
<p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type.</p>
|
|
672
|
+
<p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type. Icon rendering is currently limited to <code>type="credit-card"</code>; <code>triggerIcon</code> without a supported type propagates the attribute but does not render a visible icon.</p>
|
|
673
673
|
<div class="exampleWrapper">
|
|
674
674
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type_credit-card.html) -->
|
|
675
675
|
<!-- The below content is automatically added from ./../apiExamples/type_credit-card.html -->
|
|
@@ -968,6 +968,23 @@ const comboboxKeyboardStrategy = {
|
|
|
968
968
|
},
|
|
969
969
|
|
|
970
970
|
Tab(component, evt, ctx) {
|
|
971
|
+
// Runs for both Tab and Shift+Tab.
|
|
972
|
+
//
|
|
973
|
+
// Current behavior:
|
|
974
|
+
// Tab — select the active option, close the bib, and (in fullscreen
|
|
975
|
+
// modal mode only) explicitly move focus to the trigger's
|
|
976
|
+
// clear button. In desktop popover mode the browser's native
|
|
977
|
+
// tab traversal takes focus forward from the input.
|
|
978
|
+
// Shift+Tab — select the active option and close the bib. Focus then
|
|
979
|
+
// lands on the trigger's clear button as a byproduct of the
|
|
980
|
+
// shadow-DOM tab order, so keyboard users must press
|
|
981
|
+
// Shift+Tab three times to exit the component (clear button
|
|
982
|
+
// → input → previous element on the page).
|
|
983
|
+
//
|
|
984
|
+
// Intended behavior for Shift+Tab (per team decision, tracked in
|
|
985
|
+
// AB#1590650): a single Shift+Tab should select the active option, close
|
|
986
|
+
// the bib, and move focus directly to the previous focusable element on
|
|
987
|
+
// the page — symmetric with Tab.
|
|
971
988
|
if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
|
|
972
989
|
// When the clear button is focused, Tab events do not bubble out of
|
|
973
990
|
// its shadow DOM, so this handler only fires when the clear button
|
|
@@ -4879,7 +4896,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4896
|
}
|
|
4880
4897
|
};
|
|
4881
4898
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4899
|
+
var formkitVersion$2 = '202607082142';
|
|
4883
4900
|
|
|
4884
4901
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4902
|
static get properties() {
|
|
@@ -18504,7 +18521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18504
18521
|
}
|
|
18505
18522
|
};
|
|
18506
18523
|
|
|
18507
|
-
var formkitVersion$1 = '
|
|
18524
|
+
var formkitVersion$1 = '202607082142';
|
|
18508
18525
|
|
|
18509
18526
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18510
18527
|
// See LICENSE in the project root for license information.
|
|
@@ -19625,7 +19642,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19625
19642
|
}
|
|
19626
19643
|
}
|
|
19627
19644
|
|
|
19628
|
-
var formkitVersion = '
|
|
19645
|
+
var formkitVersion = '202607082142';
|
|
19629
19646
|
|
|
19630
19647
|
var styleCss$3 = 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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19631
19648
|
|
|
@@ -20408,6 +20425,8 @@ class AuroCombobox extends AuroElement {
|
|
|
20408
20425
|
|
|
20409
20426
|
/**
|
|
20410
20427
|
* If set, the `icon` attribute will be applied to the trigger `auro-input` element.
|
|
20428
|
+
* Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`
|
|
20429
|
+
* without a supported `type` propagates the attribute but does not render a visible icon.
|
|
20411
20430
|
*/
|
|
20412
20431
|
triggerIcon: {
|
|
20413
20432
|
type: Boolean,
|
|
@@ -20439,7 +20458,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20439
20458
|
},
|
|
20440
20459
|
|
|
20441
20460
|
/**
|
|
20442
|
-
* Value selected for the dropdown menu.
|
|
20461
|
+
* Value selected for the dropdown menu.
|
|
20443
20462
|
*/
|
|
20444
20463
|
value: {
|
|
20445
20464
|
type: String
|
|
@@ -21957,18 +21976,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
21957
21976
|
// See LICENSE in the project root for license information.
|
|
21958
21977
|
|
|
21959
21978
|
|
|
21960
|
-
/**
|
|
21961
|
-
* Serializes a multi-select value array back into the String `value` property.
|
|
21962
|
-
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
21963
|
-
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
21964
|
-
* @private
|
|
21965
|
-
* @param {Array<string>|undefined} values - The selected values.
|
|
21966
|
-
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
21967
|
-
*/
|
|
21968
|
-
function serializeMultiSelectValue(values) {
|
|
21969
|
-
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
21970
|
-
}
|
|
21971
|
-
|
|
21972
21979
|
/**
|
|
21973
21980
|
* Validates if an option can be interacted with.
|
|
21974
21981
|
* @private
|
|
@@ -21981,20 +21988,6 @@ function isOptionInteractive(option) {
|
|
|
21981
21988
|
!option.hasAttribute('static');
|
|
21982
21989
|
}
|
|
21983
21990
|
|
|
21984
|
-
/**
|
|
21985
|
-
* Validates if an option may be selected by matching a programmatic value.
|
|
21986
|
-
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
21987
|
-
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
21988
|
-
* valid programmatic selection. Only disabled and static options — which are
|
|
21989
|
-
* never selectable — are rejected.
|
|
21990
|
-
* @param {HTMLElement} option - The option to check.
|
|
21991
|
-
* @returns {boolean} True if option can be selected by value.
|
|
21992
|
-
*/
|
|
21993
|
-
function isSelectableByValue(option) {
|
|
21994
|
-
return !option.hasAttribute('disabled') &&
|
|
21995
|
-
!option.hasAttribute('static');
|
|
21996
|
-
}
|
|
21997
|
-
|
|
21998
21991
|
/**
|
|
21999
21992
|
* Helper method to dispatch custom events.
|
|
22000
21993
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -22164,7 +22157,6 @@ class AuroMenu extends AuroElement {
|
|
|
22164
22157
|
|
|
22165
22158
|
/**
|
|
22166
22159
|
* Specifies the current active menuOption.
|
|
22167
|
-
* @readonly
|
|
22168
22160
|
*/
|
|
22169
22161
|
optionActive: {
|
|
22170
22162
|
type: Object,
|
|
@@ -22172,18 +22164,15 @@ class AuroMenu extends AuroElement {
|
|
|
22172
22164
|
},
|
|
22173
22165
|
|
|
22174
22166
|
/**
|
|
22175
|
-
*
|
|
22176
|
-
* @readonly
|
|
22167
|
+
* An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
|
|
22177
22168
|
*/
|
|
22178
22169
|
optionSelected: {
|
|
22179
22170
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
22180
|
-
type: Object
|
|
22181
|
-
attribute: false
|
|
22171
|
+
type: Object
|
|
22182
22172
|
},
|
|
22183
22173
|
|
|
22184
22174
|
/**
|
|
22185
22175
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
22186
|
-
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
22187
22176
|
*/
|
|
22188
22177
|
value: {
|
|
22189
22178
|
type: String,
|
|
@@ -22307,7 +22296,7 @@ class AuroMenu extends AuroElement {
|
|
|
22307
22296
|
}
|
|
22308
22297
|
|
|
22309
22298
|
/**
|
|
22310
|
-
* Selects options by value.
|
|
22299
|
+
* Selects options by value.
|
|
22311
22300
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
22312
22301
|
* @public
|
|
22313
22302
|
*/
|
|
@@ -22392,11 +22381,6 @@ class AuroMenu extends AuroElement {
|
|
|
22392
22381
|
this.initItems();
|
|
22393
22382
|
}
|
|
22394
22383
|
|
|
22395
|
-
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
22396
|
-
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
22397
|
-
// cycle to avoid firing option custom events twice on the same selection.
|
|
22398
|
-
let valueReconciled = false;
|
|
22399
|
-
|
|
22400
22384
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
22401
22385
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
22402
22386
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -22409,31 +22393,11 @@ class AuroMenu extends AuroElement {
|
|
|
22409
22393
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
22410
22394
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
22411
22395
|
const valueArray = this.formattedValue || [];
|
|
22412
|
-
const matchingOptions = this.items ? this.items.filter((item) =>
|
|
22396
|
+
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
22413
22397
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
22414
|
-
|
|
22415
|
-
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
22416
|
-
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
22417
|
-
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
22418
|
-
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
22419
|
-
// matching item yet are preserved so async preselection still works once options render.
|
|
22420
|
-
const rejectedValues = this.items
|
|
22421
|
-
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
22422
|
-
: [];
|
|
22423
|
-
if (rejectedValues.length > 0) {
|
|
22424
|
-
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
22425
|
-
this.value = serializeMultiSelectValue(reconciled);
|
|
22426
|
-
valueReconciled = true;
|
|
22427
|
-
}
|
|
22428
22398
|
} else {
|
|
22429
|
-
// In single-select mode, this.value should be a string
|
|
22430
|
-
|
|
22431
|
-
// non-selectable option falls through to the no-match path below
|
|
22432
|
-
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
22433
|
-
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
22434
|
-
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
22435
|
-
// still a valid programmatic selection.
|
|
22436
|
-
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
22399
|
+
// In single-select mode, this.value should be a string
|
|
22400
|
+
const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
|
|
22437
22401
|
|
|
22438
22402
|
if (matchingOption) {
|
|
22439
22403
|
newSelected = matchingOption;
|
|
@@ -22475,9 +22439,8 @@ class AuroMenu extends AuroElement {
|
|
|
22475
22439
|
]
|
|
22476
22440
|
]));
|
|
22477
22441
|
|
|
22478
|
-
// Notify of changes
|
|
22479
|
-
|
|
22480
|
-
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
22442
|
+
// Notify of changes
|
|
22443
|
+
if (this.optionSelected !== undefined) {
|
|
22481
22444
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
22482
22445
|
selected.forEach((opt) => {
|
|
22483
22446
|
if (opt.hasAttribute('event')) {
|
|
@@ -22690,7 +22653,7 @@ class AuroMenu extends AuroElement {
|
|
|
22690
22653
|
const currentSelected = this.optionSelected || [];
|
|
22691
22654
|
|
|
22692
22655
|
if (!currentValue.includes(option.value)) {
|
|
22693
|
-
this.value =
|
|
22656
|
+
this.value = JSON.stringify([
|
|
22694
22657
|
...currentValue,
|
|
22695
22658
|
option.value
|
|
22696
22659
|
]);
|
|
@@ -22716,9 +22679,15 @@ class AuroMenu extends AuroElement {
|
|
|
22716
22679
|
*/
|
|
22717
22680
|
handleDeselectState(option) {
|
|
22718
22681
|
if (this.multiSelect) {
|
|
22719
|
-
// Remove this option from array
|
|
22682
|
+
// Remove this option from array
|
|
22720
22683
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
22721
|
-
|
|
22684
|
+
|
|
22685
|
+
// If array is empty after removal, set back to undefined
|
|
22686
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
22687
|
+
this.value = undefined;
|
|
22688
|
+
} else {
|
|
22689
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
22690
|
+
}
|
|
22722
22691
|
|
|
22723
22692
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
22724
22693
|
if (this.optionSelected.length === 0) {
|
|
@@ -22765,11 +22734,6 @@ class AuroMenu extends AuroElement {
|
|
|
22765
22734
|
this.optionSelected = undefined;
|
|
22766
22735
|
this._index = -1;
|
|
22767
22736
|
|
|
22768
|
-
// Clear active option state so a follow-up open/navigation starts fresh
|
|
22769
|
-
// rather than reusing a stale reference from before the reset.
|
|
22770
|
-
this.items?.forEach((item) => item.classList.remove('active'));
|
|
22771
|
-
this.optionActive = undefined;
|
|
22772
|
-
|
|
22773
22737
|
// Reset UI state
|
|
22774
22738
|
this.updateItemsState(new Map([
|
|
22775
22739
|
[
|
|
@@ -23179,7 +23143,6 @@ let menuOptionIdCounter = 0;
|
|
|
23179
23143
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
23180
23144
|
* @customElement auro-menuoption
|
|
23181
23145
|
*
|
|
23182
|
-
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
23183
23146
|
* @slot default - The default slot for the menu option text.
|
|
23184
23147
|
*
|
|
23185
23148
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -23209,7 +23172,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23209
23172
|
this.noCheckmark = false;
|
|
23210
23173
|
this.disabled = false;
|
|
23211
23174
|
this.noMatch = false;
|
|
23212
|
-
this.persistent = false;
|
|
23213
23175
|
|
|
23214
23176
|
/**
|
|
23215
23177
|
* @private
|
|
@@ -23231,12 +23193,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23231
23193
|
type: Boolean,
|
|
23232
23194
|
reflect: true
|
|
23233
23195
|
},
|
|
23234
|
-
|
|
23235
|
-
/**
|
|
23236
|
-
* **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
|
|
23237
|
-
*
|
|
23238
|
-
* @deprecated Use the `value` attribute on `auro-menu` instead.
|
|
23239
|
-
*/
|
|
23240
23196
|
selected: {
|
|
23241
23197
|
type: Boolean,
|
|
23242
23198
|
reflect: true
|
|
@@ -23271,12 +23227,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23271
23227
|
reflect: true,
|
|
23272
23228
|
attribute: 'nomatch'
|
|
23273
23229
|
},
|
|
23274
|
-
|
|
23275
|
-
/** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
|
|
23276
|
-
persistent: {
|
|
23277
|
-
type: Boolean,
|
|
23278
|
-
reflect: true
|
|
23279
|
-
},
|
|
23280
23230
|
};
|
|
23281
23231
|
}
|
|
23282
23232
|
|
|
@@ -968,6 +968,23 @@ const comboboxKeyboardStrategy = {
|
|
|
968
968
|
},
|
|
969
969
|
|
|
970
970
|
Tab(component, evt, ctx) {
|
|
971
|
+
// Runs for both Tab and Shift+Tab.
|
|
972
|
+
//
|
|
973
|
+
// Current behavior:
|
|
974
|
+
// Tab — select the active option, close the bib, and (in fullscreen
|
|
975
|
+
// modal mode only) explicitly move focus to the trigger's
|
|
976
|
+
// clear button. In desktop popover mode the browser's native
|
|
977
|
+
// tab traversal takes focus forward from the input.
|
|
978
|
+
// Shift+Tab — select the active option and close the bib. Focus then
|
|
979
|
+
// lands on the trigger's clear button as a byproduct of the
|
|
980
|
+
// shadow-DOM tab order, so keyboard users must press
|
|
981
|
+
// Shift+Tab three times to exit the component (clear button
|
|
982
|
+
// → input → previous element on the page).
|
|
983
|
+
//
|
|
984
|
+
// Intended behavior for Shift+Tab (per team decision, tracked in
|
|
985
|
+
// AB#1590650): a single Shift+Tab should select the active option, close
|
|
986
|
+
// the bib, and move focus directly to the previous focusable element on
|
|
987
|
+
// the page — symmetric with Tab.
|
|
971
988
|
if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
|
|
972
989
|
// When the clear button is focused, Tab events do not bubble out of
|
|
973
990
|
// its shadow DOM, so this handler only fires when the clear button
|
|
@@ -4879,7 +4896,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4896
|
}
|
|
4880
4897
|
};
|
|
4881
4898
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4899
|
+
var formkitVersion$2 = '202607082142';
|
|
4883
4900
|
|
|
4884
4901
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4902
|
static get properties() {
|
|
@@ -18504,7 +18521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18504
18521
|
}
|
|
18505
18522
|
};
|
|
18506
18523
|
|
|
18507
|
-
var formkitVersion$1 = '
|
|
18524
|
+
var formkitVersion$1 = '202607082142';
|
|
18508
18525
|
|
|
18509
18526
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18510
18527
|
// See LICENSE in the project root for license information.
|
|
@@ -19625,7 +19642,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19625
19642
|
}
|
|
19626
19643
|
}
|
|
19627
19644
|
|
|
19628
|
-
var formkitVersion = '
|
|
19645
|
+
var formkitVersion = '202607082142';
|
|
19629
19646
|
|
|
19630
19647
|
var styleCss$3 = 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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19631
19648
|
|
|
@@ -20408,6 +20425,8 @@ class AuroCombobox extends AuroElement {
|
|
|
20408
20425
|
|
|
20409
20426
|
/**
|
|
20410
20427
|
* If set, the `icon` attribute will be applied to the trigger `auro-input` element.
|
|
20428
|
+
* Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`
|
|
20429
|
+
* without a supported `type` propagates the attribute but does not render a visible icon.
|
|
20411
20430
|
*/
|
|
20412
20431
|
triggerIcon: {
|
|
20413
20432
|
type: Boolean,
|
|
@@ -20439,7 +20458,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20439
20458
|
},
|
|
20440
20459
|
|
|
20441
20460
|
/**
|
|
20442
|
-
* Value selected for the dropdown menu.
|
|
20461
|
+
* Value selected for the dropdown menu.
|
|
20443
20462
|
*/
|
|
20444
20463
|
value: {
|
|
20445
20464
|
type: String
|
|
@@ -21957,18 +21976,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
21957
21976
|
// See LICENSE in the project root for license information.
|
|
21958
21977
|
|
|
21959
21978
|
|
|
21960
|
-
/**
|
|
21961
|
-
* Serializes a multi-select value array back into the String `value` property.
|
|
21962
|
-
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
21963
|
-
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
21964
|
-
* @private
|
|
21965
|
-
* @param {Array<string>|undefined} values - The selected values.
|
|
21966
|
-
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
21967
|
-
*/
|
|
21968
|
-
function serializeMultiSelectValue(values) {
|
|
21969
|
-
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
21970
|
-
}
|
|
21971
|
-
|
|
21972
21979
|
/**
|
|
21973
21980
|
* Validates if an option can be interacted with.
|
|
21974
21981
|
* @private
|
|
@@ -21981,20 +21988,6 @@ function isOptionInteractive(option) {
|
|
|
21981
21988
|
!option.hasAttribute('static');
|
|
21982
21989
|
}
|
|
21983
21990
|
|
|
21984
|
-
/**
|
|
21985
|
-
* Validates if an option may be selected by matching a programmatic value.
|
|
21986
|
-
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
21987
|
-
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
21988
|
-
* valid programmatic selection. Only disabled and static options — which are
|
|
21989
|
-
* never selectable — are rejected.
|
|
21990
|
-
* @param {HTMLElement} option - The option to check.
|
|
21991
|
-
* @returns {boolean} True if option can be selected by value.
|
|
21992
|
-
*/
|
|
21993
|
-
function isSelectableByValue(option) {
|
|
21994
|
-
return !option.hasAttribute('disabled') &&
|
|
21995
|
-
!option.hasAttribute('static');
|
|
21996
|
-
}
|
|
21997
|
-
|
|
21998
21991
|
/**
|
|
21999
21992
|
* Helper method to dispatch custom events.
|
|
22000
21993
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -22164,7 +22157,6 @@ class AuroMenu extends AuroElement {
|
|
|
22164
22157
|
|
|
22165
22158
|
/**
|
|
22166
22159
|
* Specifies the current active menuOption.
|
|
22167
|
-
* @readonly
|
|
22168
22160
|
*/
|
|
22169
22161
|
optionActive: {
|
|
22170
22162
|
type: Object,
|
|
@@ -22172,18 +22164,15 @@ class AuroMenu extends AuroElement {
|
|
|
22172
22164
|
},
|
|
22173
22165
|
|
|
22174
22166
|
/**
|
|
22175
|
-
*
|
|
22176
|
-
* @readonly
|
|
22167
|
+
* An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
|
|
22177
22168
|
*/
|
|
22178
22169
|
optionSelected: {
|
|
22179
22170
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
22180
|
-
type: Object
|
|
22181
|
-
attribute: false
|
|
22171
|
+
type: Object
|
|
22182
22172
|
},
|
|
22183
22173
|
|
|
22184
22174
|
/**
|
|
22185
22175
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
22186
|
-
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
22187
22176
|
*/
|
|
22188
22177
|
value: {
|
|
22189
22178
|
type: String,
|
|
@@ -22307,7 +22296,7 @@ class AuroMenu extends AuroElement {
|
|
|
22307
22296
|
}
|
|
22308
22297
|
|
|
22309
22298
|
/**
|
|
22310
|
-
* Selects options by value.
|
|
22299
|
+
* Selects options by value.
|
|
22311
22300
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
22312
22301
|
* @public
|
|
22313
22302
|
*/
|
|
@@ -22392,11 +22381,6 @@ class AuroMenu extends AuroElement {
|
|
|
22392
22381
|
this.initItems();
|
|
22393
22382
|
}
|
|
22394
22383
|
|
|
22395
|
-
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
22396
|
-
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
22397
|
-
// cycle to avoid firing option custom events twice on the same selection.
|
|
22398
|
-
let valueReconciled = false;
|
|
22399
|
-
|
|
22400
22384
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
22401
22385
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
22402
22386
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -22409,31 +22393,11 @@ class AuroMenu extends AuroElement {
|
|
|
22409
22393
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
22410
22394
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
22411
22395
|
const valueArray = this.formattedValue || [];
|
|
22412
|
-
const matchingOptions = this.items ? this.items.filter((item) =>
|
|
22396
|
+
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
22413
22397
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
22414
|
-
|
|
22415
|
-
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
22416
|
-
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
22417
|
-
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
22418
|
-
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
22419
|
-
// matching item yet are preserved so async preselection still works once options render.
|
|
22420
|
-
const rejectedValues = this.items
|
|
22421
|
-
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
22422
|
-
: [];
|
|
22423
|
-
if (rejectedValues.length > 0) {
|
|
22424
|
-
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
22425
|
-
this.value = serializeMultiSelectValue(reconciled);
|
|
22426
|
-
valueReconciled = true;
|
|
22427
|
-
}
|
|
22428
22398
|
} else {
|
|
22429
|
-
// In single-select mode, this.value should be a string
|
|
22430
|
-
|
|
22431
|
-
// non-selectable option falls through to the no-match path below
|
|
22432
|
-
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
22433
|
-
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
22434
|
-
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
22435
|
-
// still a valid programmatic selection.
|
|
22436
|
-
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
22399
|
+
// In single-select mode, this.value should be a string
|
|
22400
|
+
const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
|
|
22437
22401
|
|
|
22438
22402
|
if (matchingOption) {
|
|
22439
22403
|
newSelected = matchingOption;
|
|
@@ -22475,9 +22439,8 @@ class AuroMenu extends AuroElement {
|
|
|
22475
22439
|
]
|
|
22476
22440
|
]));
|
|
22477
22441
|
|
|
22478
|
-
// Notify of changes
|
|
22479
|
-
|
|
22480
|
-
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
22442
|
+
// Notify of changes
|
|
22443
|
+
if (this.optionSelected !== undefined) {
|
|
22481
22444
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
22482
22445
|
selected.forEach((opt) => {
|
|
22483
22446
|
if (opt.hasAttribute('event')) {
|
|
@@ -22690,7 +22653,7 @@ class AuroMenu extends AuroElement {
|
|
|
22690
22653
|
const currentSelected = this.optionSelected || [];
|
|
22691
22654
|
|
|
22692
22655
|
if (!currentValue.includes(option.value)) {
|
|
22693
|
-
this.value =
|
|
22656
|
+
this.value = JSON.stringify([
|
|
22694
22657
|
...currentValue,
|
|
22695
22658
|
option.value
|
|
22696
22659
|
]);
|
|
@@ -22716,9 +22679,15 @@ class AuroMenu extends AuroElement {
|
|
|
22716
22679
|
*/
|
|
22717
22680
|
handleDeselectState(option) {
|
|
22718
22681
|
if (this.multiSelect) {
|
|
22719
|
-
// Remove this option from array
|
|
22682
|
+
// Remove this option from array
|
|
22720
22683
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
22721
|
-
|
|
22684
|
+
|
|
22685
|
+
// If array is empty after removal, set back to undefined
|
|
22686
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
22687
|
+
this.value = undefined;
|
|
22688
|
+
} else {
|
|
22689
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
22690
|
+
}
|
|
22722
22691
|
|
|
22723
22692
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
22724
22693
|
if (this.optionSelected.length === 0) {
|
|
@@ -22765,11 +22734,6 @@ class AuroMenu extends AuroElement {
|
|
|
22765
22734
|
this.optionSelected = undefined;
|
|
22766
22735
|
this._index = -1;
|
|
22767
22736
|
|
|
22768
|
-
// Clear active option state so a follow-up open/navigation starts fresh
|
|
22769
|
-
// rather than reusing a stale reference from before the reset.
|
|
22770
|
-
this.items?.forEach((item) => item.classList.remove('active'));
|
|
22771
|
-
this.optionActive = undefined;
|
|
22772
|
-
|
|
22773
22737
|
// Reset UI state
|
|
22774
22738
|
this.updateItemsState(new Map([
|
|
22775
22739
|
[
|
|
@@ -23179,7 +23143,6 @@ let menuOptionIdCounter = 0;
|
|
|
23179
23143
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
23180
23144
|
* @customElement auro-menuoption
|
|
23181
23145
|
*
|
|
23182
|
-
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
23183
23146
|
* @slot default - The default slot for the menu option text.
|
|
23184
23147
|
*
|
|
23185
23148
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -23209,7 +23172,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23209
23172
|
this.noCheckmark = false;
|
|
23210
23173
|
this.disabled = false;
|
|
23211
23174
|
this.noMatch = false;
|
|
23212
|
-
this.persistent = false;
|
|
23213
23175
|
|
|
23214
23176
|
/**
|
|
23215
23177
|
* @private
|
|
@@ -23231,12 +23193,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23231
23193
|
type: Boolean,
|
|
23232
23194
|
reflect: true
|
|
23233
23195
|
},
|
|
23234
|
-
|
|
23235
|
-
/**
|
|
23236
|
-
* **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
|
|
23237
|
-
*
|
|
23238
|
-
* @deprecated Use the `value` attribute on `auro-menu` instead.
|
|
23239
|
-
*/
|
|
23240
23196
|
selected: {
|
|
23241
23197
|
type: Boolean,
|
|
23242
23198
|
reflect: true
|
|
@@ -23271,12 +23227,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23271
23227
|
reflect: true,
|
|
23272
23228
|
attribute: 'nomatch'
|
|
23273
23229
|
},
|
|
23274
|
-
|
|
23275
|
-
/** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
|
|
23276
|
-
persistent: {
|
|
23277
|
-
type: Boolean,
|
|
23278
|
-
reflect: true
|
|
23279
|
-
},
|
|
23280
23230
|
};
|
|
23281
23231
|
}
|
|
23282
23232
|
|
|
@@ -136,7 +136,6 @@
|
|
|
136
136
|
<auro-header level="3" id="presetValue">Preset the value</auro-header>
|
|
137
137
|
<p>In some cases it is necessary to preset the value of the component as part of the initial render.</p>
|
|
138
138
|
<p>When a value is preset, the matching option in the menu will be marked as both <code>active</code> and <code>selected</code>, and the input will display the corresponding text.</p>
|
|
139
|
-
<p>If a preset value matches an option marked <code>disabled</code> or <code>static</code>, the selection is rejected: <code>value</code> and <code>optionSelected</code> are cleared to <code>undefined</code>. A value that matches a <code>hidden</code> option is still applied.</p>
|
|
140
139
|
<p>If a preset value does not match any option, the component value is preserved and displayed in the input, but no menu option will be marked as selected. In suggestion mode, this value is treated as valid freeform input. In filter mode, the value will fail validation if the component is <code>required</code>.</p>
|
|
141
140
|
<auro-header level="3" id="autocomplete">Autocomplete</auro-header>
|
|
142
141
|
<p>The component supports the use of <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">autocomplete</auro-hyperlink> configuration through HTML attributes.</p>
|