@aurodesignsystem-dev/auro-formkit 0.0.0-pr1603.5 → 0.0.0-pr1604.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/customize.min.js +4 -110
- package/components/combobox/demo/getting-started.md +49 -0
- package/components/combobox/demo/getting-started.min.js +23 -110
- package/components/combobox/demo/index.min.js +4 -110
- package/components/combobox/dist/auro-combobox.d.ts +0 -22
- package/components/combobox/dist/index.js +4 -94
- package/components/combobox/dist/registered.js +4 -94
- package/components/counter/demo/api.md +2 -0
- package/components/counter/demo/customize.min.js +26 -2
- package/components/counter/demo/getting-started.html +3 -1
- package/components/counter/demo/getting-started.md +49 -0
- package/components/counter/demo/getting-started.min.js +8492 -0
- package/components/counter/demo/index.min.js +26 -2
- package/components/counter/dist/auro-counter-group.d.ts +6 -0
- package/components/counter/dist/auro-counter.d.ts +6 -0
- package/components/counter/dist/index.js +26 -2
- package/components/counter/dist/registered.js +26 -2
- package/components/datepicker/demo/customize.min.js +3 -3
- package/components/datepicker/demo/getting-started.html +3 -1
- package/components/datepicker/demo/getting-started.md +39 -0
- package/components/datepicker/demo/getting-started.min.js +37626 -0
- 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 +2 -2
- 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 +44 -121
- package/components/form/demo/getting-started.min.js +44 -121
- package/components/form/demo/index.min.js +44 -121
- package/components/form/demo/registerDemoDeps.min.js +38 -120
- package/components/form/dist/index.js +6 -1
- package/components/form/dist/registered.js +6 -1
- package/components/input/demo/customize.md +0 -37
- package/components/input/demo/customize.min.js +1 -10
- package/components/input/demo/getting-started.md +33 -0
- package/components/input/demo/getting-started.min.js +21 -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/index.min.js +0 -16
- package/components/menu/dist/index.js +0 -16
- package/components/menu/dist/registered.js +0 -16
- 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/customize.min.js +2 -18
- package/components/select/demo/getting-started.md +49 -0
- package/components/select/demo/getting-started.min.js +24 -19
- package/components/select/demo/index.min.js +2 -18
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1492 -1492
- package/package.json +1 -1
|
@@ -5081,7 +5081,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
5081
5081
|
}
|
|
5082
5082
|
};
|
|
5083
5083
|
|
|
5084
|
-
var formkitVersion$2 = '
|
|
5084
|
+
var formkitVersion$2 = '202609011830';
|
|
5085
5085
|
|
|
5086
5086
|
/**
|
|
5087
5087
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18950,7 +18950,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18950
18950
|
}
|
|
18951
18951
|
};
|
|
18952
18952
|
|
|
18953
|
-
var formkitVersion$1 = '
|
|
18953
|
+
var formkitVersion$1 = '202609011830';
|
|
18954
18954
|
|
|
18955
18955
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18956
18956
|
// See LICENSE in the project root for license information.
|
|
@@ -20142,7 +20142,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
20142
20142
|
}
|
|
20143
20143
|
}
|
|
20144
20144
|
|
|
20145
|
-
var formkitVersion = '
|
|
20145
|
+
var formkitVersion = '202609011830';
|
|
20146
20146
|
|
|
20147
20147
|
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}`;
|
|
20148
20148
|
|
|
@@ -20583,11 +20583,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20583
20583
|
this.behavior = "suggestion";
|
|
20584
20584
|
this.clearBtnFocused = false;
|
|
20585
20585
|
|
|
20586
|
-
// One-shot: set when the input's clear button is activated so the
|
|
20587
|
-
// SPA-preselect guard in handleInputValueChange doesn't swallow the
|
|
20588
|
-
// genuine clear (AB#1634257).
|
|
20589
|
-
this._clearBtnActivated = false;
|
|
20590
|
-
|
|
20591
20586
|
// Defaults that effect the overall layout of the combobox
|
|
20592
20587
|
this.checkmark = false;
|
|
20593
20588
|
this.dvInputOnly = false;
|
|
@@ -21545,13 +21540,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21545
21540
|
this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
|
|
21546
21541
|
this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
|
|
21547
21542
|
|
|
21548
|
-
// Mirror the trigger's clear-button tracking onto the fullscreen bib input
|
|
21549
|
-
// so clearing there also fully resets the combobox (AB#1634257). See
|
|
21550
|
-
// trackClearBtnActivation for why this must run in the capture phase.
|
|
21551
|
-
if (this.inputInBib && this.inputInBib !== this.input) {
|
|
21552
|
-
this.trackClearBtnActivation(this.inputInBib);
|
|
21553
|
-
}
|
|
21554
|
-
|
|
21555
21543
|
// Pass label text to the dropdown bib for accessible dialog naming
|
|
21556
21544
|
const labelElement = this.querySelector('[slot="label"]');
|
|
21557
21545
|
if (labelElement) {
|
|
@@ -21937,52 +21925,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21937
21925
|
this.clearBtnFocused = false;
|
|
21938
21926
|
}
|
|
21939
21927
|
});
|
|
21940
|
-
|
|
21941
|
-
this.trackClearBtnActivation(this.input);
|
|
21942
|
-
}
|
|
21943
|
-
|
|
21944
|
-
/**
|
|
21945
|
-
* Flags genuine clear-button activations on an auro-input so the SPA-preselect
|
|
21946
|
-
* guard in handleInputValueChange doesn't swallow them.
|
|
21947
|
-
*
|
|
21948
|
-
* The auro-input clear button fires an `isProgrammatic` input event (via
|
|
21949
|
-
* notifyValueChanged) that is indistinguishable in shape from the
|
|
21950
|
-
* SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
|
|
21951
|
-
* input). Without this one-shot flag, clicking clear would leave
|
|
21952
|
-
* this.value/optionSelected stale (AB#1634257).
|
|
21953
|
-
*
|
|
21954
|
-
* Delegated on the shadow root so it works regardless of when .clearBtn
|
|
21955
|
-
* renders (it only exists after a value is set), and covers both real clicks
|
|
21956
|
-
* and programmatic clearBtn.click() (which no focusin precedes). Registered in
|
|
21957
|
-
* the CAPTURE phase so the flag is set BEFORE the button's own @click
|
|
21958
|
-
* (handleClickClear) fires its synchronous input event — which is when
|
|
21959
|
-
* handleInputValueChange reads the flag.
|
|
21960
|
-
* @private
|
|
21961
|
-
* @param {Element} inputEl - The auro-input whose clear button to track.
|
|
21962
|
-
* @returns {void}
|
|
21963
|
-
*/
|
|
21964
|
-
trackClearBtnActivation(inputEl) {
|
|
21965
|
-
if (!inputEl || !inputEl.shadowRoot) {
|
|
21966
|
-
return;
|
|
21967
|
-
}
|
|
21968
|
-
inputEl.shadowRoot.addEventListener('click', (event) => {
|
|
21969
|
-
if (event.target.closest('.clearBtn')) {
|
|
21970
|
-
this._clearBtnActivated = true;
|
|
21971
|
-
|
|
21972
|
-
// Bound the flag's lifetime to this synchronous clear -> input window.
|
|
21973
|
-
// auro-input's handleClickClear fires its input event synchronously
|
|
21974
|
-
// (before any macrotask runs), so handleInputValueChange consumes the
|
|
21975
|
-
// flag first and this reset is a harmless no-op. It only does real work
|
|
21976
|
-
// if that input event never arrives (e.g. auro-input throws mid-clear),
|
|
21977
|
-
// guaranteeing the flag can't survive to be misread as a genuine clear
|
|
21978
|
-
// by a later unrelated event such as an SPA-preselect echo (AB#1634257).
|
|
21979
|
-
// Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
|
|
21980
|
-
// component tears down inside that window.
|
|
21981
|
-
this._scheduleTimer(() => {
|
|
21982
|
-
this._clearBtnActivated = false;
|
|
21983
|
-
}, 0);
|
|
21984
|
-
}
|
|
21985
|
-
}, true);
|
|
21986
21928
|
}
|
|
21987
21929
|
|
|
21988
21930
|
/**
|
|
@@ -22024,17 +21966,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22024
21966
|
* @returns {void}
|
|
22025
21967
|
*/
|
|
22026
21968
|
handleInputValueChange(event) {
|
|
22027
|
-
// Consume the one-shot clear-button flag on EVERY entry, before any branch
|
|
22028
|
-
// below can early-return. trackClearBtnActivation sets it in the capture
|
|
22029
|
-
// phase right before auro-input's clear button fires its synchronous input
|
|
22030
|
-
// event; reading and immediately clearing it here guarantees the flag never
|
|
22031
|
-
// survives a handleInputValueChange call to leak into a later event (e.g.
|
|
22032
|
-
// the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
|
|
22033
|
-
// where it would defeat the guard below. Held in a local so that guard can
|
|
22034
|
-
// still tell a genuine clear from the init-render echo (AB#1634257).
|
|
22035
|
-
const clearBtnActivated = this._clearBtnActivated;
|
|
22036
|
-
this._clearBtnActivated = false;
|
|
22037
|
-
|
|
22038
21969
|
// When the event comes from the fullscreen bib input, sync the value to
|
|
22039
21970
|
// the trigger input. Setting trigger.value triggers Lit's updated()
|
|
22040
21971
|
// (async, microtask) which fires notifyValueChanged() → another 'input'
|
|
@@ -22082,12 +22013,7 @@ class AuroCombobox extends AuroElement {
|
|
|
22082
22013
|
// to the exact shape of that echo (isProgrammatic + non-empty combobox
|
|
22083
22014
|
// value + empty input.value) so it doesn't affect the swap/typed paths
|
|
22084
22015
|
// where value/input already track each other through the sync helpers.
|
|
22085
|
-
|
|
22086
|
-
// empty input) but is a genuine user clear that MUST reset this.value and
|
|
22087
|
-
// optionSelected below. clearBtnActivated (consumed at the top of this
|
|
22088
|
-
// method) is true only for that genuine clear, so only the real
|
|
22089
|
-
// SPA-preselect echo bails (AB#1634257).
|
|
22090
|
-
if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
|
|
22016
|
+
if (event && event.isProgrammatic && this.value && !this.input.value) {
|
|
22091
22017
|
return;
|
|
22092
22018
|
}
|
|
22093
22019
|
|
|
@@ -22232,14 +22158,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22232
22158
|
// retry would otherwise keep rescheduling itself indefinitely.
|
|
22233
22159
|
this._pendingTimers.forEach((id) => clearTimeout(id));
|
|
22234
22160
|
this._pendingTimers.clear();
|
|
22235
|
-
|
|
22236
|
-
// Cancelling the timers above drops the macrotask that would have reset
|
|
22237
|
-
// _clearBtnActivated, so reset it here too. Otherwise a disconnect inside
|
|
22238
|
-
// the clear-click -> macrotask window strands the flag `true`; instance
|
|
22239
|
-
// state survives reconnect, and the first matching input event (including
|
|
22240
|
-
// an SPA-preselect echo) would then bypass the guard in
|
|
22241
|
-
// handleInputValueChange and silently clear value/optionSelected (AB#1634257).
|
|
22242
|
-
this._clearBtnActivated = false;
|
|
22243
22161
|
}
|
|
22244
22162
|
|
|
22245
22163
|
firstUpdated() {
|
|
@@ -22338,14 +22256,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22338
22256
|
}
|
|
22339
22257
|
if (this.menu.value || this.menu.optionSelected) {
|
|
22340
22258
|
this.menu.reset();
|
|
22341
|
-
} else {
|
|
22342
|
-
// The menu's selection properties are already cleared, but option
|
|
22343
|
-
// elements can still carry a stale `selected` attribute (e.g. the menu
|
|
22344
|
-
// options were rebuilt after the value was set, orphaning the DOM from
|
|
22345
|
-
// the now-null optionSelected). reset() is skipped above in that case,
|
|
22346
|
-
// so re-sync the option DOM directly to guarantee no option renders as
|
|
22347
|
-
// selected once the field is cleared (AB#1634259).
|
|
22348
|
-
this.menu.clearSelection();
|
|
22349
22259
|
}
|
|
22350
22260
|
} finally {
|
|
22351
22261
|
this._clearing = false;
|
|
@@ -23797,22 +23707,6 @@ class AuroMenu extends AuroElement {
|
|
|
23797
23707
|
this.value = undefined;
|
|
23798
23708
|
this._selectedKey = undefined;
|
|
23799
23709
|
this._index = -1;
|
|
23800
|
-
|
|
23801
|
-
// Eagerly sync the option DOM to the now-empty selection. Nulling the
|
|
23802
|
-
// reactive properties above normally schedules updated() → updateItemsState,
|
|
23803
|
-
// but that only runs when a property actually changes. If an option still
|
|
23804
|
-
// carries a stale `selected`/`aria-selected` attribute while these
|
|
23805
|
-
// properties are already undefined (e.g. options were rebuilt after a value
|
|
23806
|
-
// was set), no re-render fires and the option keeps rendering as selected.
|
|
23807
|
-
// Strip that state now so no option looks selected after a clear (AB#1634259).
|
|
23808
|
-
// Intentionally leaves `active`/`optionActive` untouched so a highlighted
|
|
23809
|
-
// option remains keyboard-re-selectable after emptying the value (AB#1606433).
|
|
23810
|
-
this.updateItemsState(new Map([
|
|
23811
|
-
[
|
|
23812
|
-
'optionSelected',
|
|
23813
|
-
true
|
|
23814
|
-
]
|
|
23815
|
-
]));
|
|
23816
23710
|
}
|
|
23817
23711
|
|
|
23818
23712
|
/**
|
|
@@ -351,7 +351,6 @@ export class AuroCombobox extends AuroElement {
|
|
|
351
351
|
/** @type {'filter' | 'suggestion'} */
|
|
352
352
|
behavior: "filter" | "suggestion" | undefined;
|
|
353
353
|
clearBtnFocused: boolean | undefined;
|
|
354
|
-
_clearBtnActivated: boolean | undefined;
|
|
355
354
|
checkmark: boolean | undefined;
|
|
356
355
|
dvInputOnly: boolean | undefined;
|
|
357
356
|
/** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
|
|
@@ -539,27 +538,6 @@ export class AuroCombobox extends AuroElement {
|
|
|
539
538
|
* @returns {void}
|
|
540
539
|
*/
|
|
541
540
|
private configureInput;
|
|
542
|
-
/**
|
|
543
|
-
* Flags genuine clear-button activations on an auro-input so the SPA-preselect
|
|
544
|
-
* guard in handleInputValueChange doesn't swallow them.
|
|
545
|
-
*
|
|
546
|
-
* The auro-input clear button fires an `isProgrammatic` input event (via
|
|
547
|
-
* notifyValueChanged) that is indistinguishable in shape from the
|
|
548
|
-
* SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
|
|
549
|
-
* input). Without this one-shot flag, clicking clear would leave
|
|
550
|
-
* this.value/optionSelected stale (AB#1634257).
|
|
551
|
-
*
|
|
552
|
-
* Delegated on the shadow root so it works regardless of when .clearBtn
|
|
553
|
-
* renders (it only exists after a value is set), and covers both real clicks
|
|
554
|
-
* and programmatic clearBtn.click() (which no focusin precedes). Registered in
|
|
555
|
-
* the CAPTURE phase so the flag is set BEFORE the button's own @click
|
|
556
|
-
* (handleClickClear) fires its synchronous input event — which is when
|
|
557
|
-
* handleInputValueChange reads the flag.
|
|
558
|
-
* @private
|
|
559
|
-
* @param {Element} inputEl - The auro-input whose clear button to track.
|
|
560
|
-
* @returns {void}
|
|
561
|
-
*/
|
|
562
|
-
private trackClearBtnActivation;
|
|
563
541
|
/**
|
|
564
542
|
* Manages the visibility of the dropdown based on loading state changes.
|
|
565
543
|
*
|
|
@@ -4999,7 +4999,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4999
4999
|
}
|
|
5000
5000
|
};
|
|
5001
5001
|
|
|
5002
|
-
var formkitVersion$2 = '
|
|
5002
|
+
var formkitVersion$2 = '202609011830';
|
|
5003
5003
|
|
|
5004
5004
|
/**
|
|
5005
5005
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18861,7 +18861,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18861
18861
|
}
|
|
18862
18862
|
};
|
|
18863
18863
|
|
|
18864
|
-
var formkitVersion$1 = '
|
|
18864
|
+
var formkitVersion$1 = '202609011830';
|
|
18865
18865
|
|
|
18866
18866
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18867
18867
|
// See LICENSE in the project root for license information.
|
|
@@ -20053,7 +20053,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
20053
20053
|
}
|
|
20054
20054
|
}
|
|
20055
20055
|
|
|
20056
|
-
var formkitVersion = '
|
|
20056
|
+
var formkitVersion = '202609011830';
|
|
20057
20057
|
|
|
20058
20058
|
var styleCss$1 = 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}: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}`;
|
|
20059
20059
|
|
|
@@ -20494,11 +20494,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20494
20494
|
this.behavior = "suggestion";
|
|
20495
20495
|
this.clearBtnFocused = false;
|
|
20496
20496
|
|
|
20497
|
-
// One-shot: set when the input's clear button is activated so the
|
|
20498
|
-
// SPA-preselect guard in handleInputValueChange doesn't swallow the
|
|
20499
|
-
// genuine clear (AB#1634257).
|
|
20500
|
-
this._clearBtnActivated = false;
|
|
20501
|
-
|
|
20502
20497
|
// Defaults that effect the overall layout of the combobox
|
|
20503
20498
|
this.checkmark = false;
|
|
20504
20499
|
this.dvInputOnly = false;
|
|
@@ -21456,13 +21451,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21456
21451
|
this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
|
|
21457
21452
|
this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
|
|
21458
21453
|
|
|
21459
|
-
// Mirror the trigger's clear-button tracking onto the fullscreen bib input
|
|
21460
|
-
// so clearing there also fully resets the combobox (AB#1634257). See
|
|
21461
|
-
// trackClearBtnActivation for why this must run in the capture phase.
|
|
21462
|
-
if (this.inputInBib && this.inputInBib !== this.input) {
|
|
21463
|
-
this.trackClearBtnActivation(this.inputInBib);
|
|
21464
|
-
}
|
|
21465
|
-
|
|
21466
21454
|
// Pass label text to the dropdown bib for accessible dialog naming
|
|
21467
21455
|
const labelElement = this.querySelector('[slot="label"]');
|
|
21468
21456
|
if (labelElement) {
|
|
@@ -21848,52 +21836,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21848
21836
|
this.clearBtnFocused = false;
|
|
21849
21837
|
}
|
|
21850
21838
|
});
|
|
21851
|
-
|
|
21852
|
-
this.trackClearBtnActivation(this.input);
|
|
21853
|
-
}
|
|
21854
|
-
|
|
21855
|
-
/**
|
|
21856
|
-
* Flags genuine clear-button activations on an auro-input so the SPA-preselect
|
|
21857
|
-
* guard in handleInputValueChange doesn't swallow them.
|
|
21858
|
-
*
|
|
21859
|
-
* The auro-input clear button fires an `isProgrammatic` input event (via
|
|
21860
|
-
* notifyValueChanged) that is indistinguishable in shape from the
|
|
21861
|
-
* SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
|
|
21862
|
-
* input). Without this one-shot flag, clicking clear would leave
|
|
21863
|
-
* this.value/optionSelected stale (AB#1634257).
|
|
21864
|
-
*
|
|
21865
|
-
* Delegated on the shadow root so it works regardless of when .clearBtn
|
|
21866
|
-
* renders (it only exists after a value is set), and covers both real clicks
|
|
21867
|
-
* and programmatic clearBtn.click() (which no focusin precedes). Registered in
|
|
21868
|
-
* the CAPTURE phase so the flag is set BEFORE the button's own @click
|
|
21869
|
-
* (handleClickClear) fires its synchronous input event — which is when
|
|
21870
|
-
* handleInputValueChange reads the flag.
|
|
21871
|
-
* @private
|
|
21872
|
-
* @param {Element} inputEl - The auro-input whose clear button to track.
|
|
21873
|
-
* @returns {void}
|
|
21874
|
-
*/
|
|
21875
|
-
trackClearBtnActivation(inputEl) {
|
|
21876
|
-
if (!inputEl || !inputEl.shadowRoot) {
|
|
21877
|
-
return;
|
|
21878
|
-
}
|
|
21879
|
-
inputEl.shadowRoot.addEventListener('click', (event) => {
|
|
21880
|
-
if (event.target.closest('.clearBtn')) {
|
|
21881
|
-
this._clearBtnActivated = true;
|
|
21882
|
-
|
|
21883
|
-
// Bound the flag's lifetime to this synchronous clear -> input window.
|
|
21884
|
-
// auro-input's handleClickClear fires its input event synchronously
|
|
21885
|
-
// (before any macrotask runs), so handleInputValueChange consumes the
|
|
21886
|
-
// flag first and this reset is a harmless no-op. It only does real work
|
|
21887
|
-
// if that input event never arrives (e.g. auro-input throws mid-clear),
|
|
21888
|
-
// guaranteeing the flag can't survive to be misread as a genuine clear
|
|
21889
|
-
// by a later unrelated event such as an SPA-preselect echo (AB#1634257).
|
|
21890
|
-
// Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
|
|
21891
|
-
// component tears down inside that window.
|
|
21892
|
-
this._scheduleTimer(() => {
|
|
21893
|
-
this._clearBtnActivated = false;
|
|
21894
|
-
}, 0);
|
|
21895
|
-
}
|
|
21896
|
-
}, true);
|
|
21897
21839
|
}
|
|
21898
21840
|
|
|
21899
21841
|
/**
|
|
@@ -21935,17 +21877,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21935
21877
|
* @returns {void}
|
|
21936
21878
|
*/
|
|
21937
21879
|
handleInputValueChange(event) {
|
|
21938
|
-
// Consume the one-shot clear-button flag on EVERY entry, before any branch
|
|
21939
|
-
// below can early-return. trackClearBtnActivation sets it in the capture
|
|
21940
|
-
// phase right before auro-input's clear button fires its synchronous input
|
|
21941
|
-
// event; reading and immediately clearing it here guarantees the flag never
|
|
21942
|
-
// survives a handleInputValueChange call to leak into a later event (e.g.
|
|
21943
|
-
// the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
|
|
21944
|
-
// where it would defeat the guard below. Held in a local so that guard can
|
|
21945
|
-
// still tell a genuine clear from the init-render echo (AB#1634257).
|
|
21946
|
-
const clearBtnActivated = this._clearBtnActivated;
|
|
21947
|
-
this._clearBtnActivated = false;
|
|
21948
|
-
|
|
21949
21880
|
// When the event comes from the fullscreen bib input, sync the value to
|
|
21950
21881
|
// the trigger input. Setting trigger.value triggers Lit's updated()
|
|
21951
21882
|
// (async, microtask) which fires notifyValueChanged() → another 'input'
|
|
@@ -21993,12 +21924,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21993
21924
|
// to the exact shape of that echo (isProgrammatic + non-empty combobox
|
|
21994
21925
|
// value + empty input.value) so it doesn't affect the swap/typed paths
|
|
21995
21926
|
// where value/input already track each other through the sync helpers.
|
|
21996
|
-
|
|
21997
|
-
// empty input) but is a genuine user clear that MUST reset this.value and
|
|
21998
|
-
// optionSelected below. clearBtnActivated (consumed at the top of this
|
|
21999
|
-
// method) is true only for that genuine clear, so only the real
|
|
22000
|
-
// SPA-preselect echo bails (AB#1634257).
|
|
22001
|
-
if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
|
|
21927
|
+
if (event && event.isProgrammatic && this.value && !this.input.value) {
|
|
22002
21928
|
return;
|
|
22003
21929
|
}
|
|
22004
21930
|
|
|
@@ -22143,14 +22069,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22143
22069
|
// retry would otherwise keep rescheduling itself indefinitely.
|
|
22144
22070
|
this._pendingTimers.forEach((id) => clearTimeout(id));
|
|
22145
22071
|
this._pendingTimers.clear();
|
|
22146
|
-
|
|
22147
|
-
// Cancelling the timers above drops the macrotask that would have reset
|
|
22148
|
-
// _clearBtnActivated, so reset it here too. Otherwise a disconnect inside
|
|
22149
|
-
// the clear-click -> macrotask window strands the flag `true`; instance
|
|
22150
|
-
// state survives reconnect, and the first matching input event (including
|
|
22151
|
-
// an SPA-preselect echo) would then bypass the guard in
|
|
22152
|
-
// handleInputValueChange and silently clear value/optionSelected (AB#1634257).
|
|
22153
|
-
this._clearBtnActivated = false;
|
|
22154
22072
|
}
|
|
22155
22073
|
|
|
22156
22074
|
firstUpdated() {
|
|
@@ -22249,14 +22167,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22249
22167
|
}
|
|
22250
22168
|
if (this.menu.value || this.menu.optionSelected) {
|
|
22251
22169
|
this.menu.reset();
|
|
22252
|
-
} else {
|
|
22253
|
-
// The menu's selection properties are already cleared, but option
|
|
22254
|
-
// elements can still carry a stale `selected` attribute (e.g. the menu
|
|
22255
|
-
// options were rebuilt after the value was set, orphaning the DOM from
|
|
22256
|
-
// the now-null optionSelected). reset() is skipped above in that case,
|
|
22257
|
-
// so re-sync the option DOM directly to guarantee no option renders as
|
|
22258
|
-
// selected once the field is cleared (AB#1634259).
|
|
22259
|
-
this.menu.clearSelection();
|
|
22260
22170
|
}
|
|
22261
22171
|
} finally {
|
|
22262
22172
|
this._clearing = false;
|
|
@@ -4999,7 +4999,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4999
4999
|
}
|
|
5000
5000
|
};
|
|
5001
5001
|
|
|
5002
|
-
var formkitVersion$2 = '
|
|
5002
|
+
var formkitVersion$2 = '202609011830';
|
|
5003
5003
|
|
|
5004
5004
|
/**
|
|
5005
5005
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18861,7 +18861,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18861
18861
|
}
|
|
18862
18862
|
};
|
|
18863
18863
|
|
|
18864
|
-
var formkitVersion$1 = '
|
|
18864
|
+
var formkitVersion$1 = '202609011830';
|
|
18865
18865
|
|
|
18866
18866
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18867
18867
|
// See LICENSE in the project root for license information.
|
|
@@ -20053,7 +20053,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
20053
20053
|
}
|
|
20054
20054
|
}
|
|
20055
20055
|
|
|
20056
|
-
var formkitVersion = '
|
|
20056
|
+
var formkitVersion = '202609011830';
|
|
20057
20057
|
|
|
20058
20058
|
var styleCss$1 = 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}: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}`;
|
|
20059
20059
|
|
|
@@ -20494,11 +20494,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20494
20494
|
this.behavior = "suggestion";
|
|
20495
20495
|
this.clearBtnFocused = false;
|
|
20496
20496
|
|
|
20497
|
-
// One-shot: set when the input's clear button is activated so the
|
|
20498
|
-
// SPA-preselect guard in handleInputValueChange doesn't swallow the
|
|
20499
|
-
// genuine clear (AB#1634257).
|
|
20500
|
-
this._clearBtnActivated = false;
|
|
20501
|
-
|
|
20502
20497
|
// Defaults that effect the overall layout of the combobox
|
|
20503
20498
|
this.checkmark = false;
|
|
20504
20499
|
this.dvInputOnly = false;
|
|
@@ -21456,13 +21451,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21456
21451
|
this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
|
|
21457
21452
|
this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
|
|
21458
21453
|
|
|
21459
|
-
// Mirror the trigger's clear-button tracking onto the fullscreen bib input
|
|
21460
|
-
// so clearing there also fully resets the combobox (AB#1634257). See
|
|
21461
|
-
// trackClearBtnActivation for why this must run in the capture phase.
|
|
21462
|
-
if (this.inputInBib && this.inputInBib !== this.input) {
|
|
21463
|
-
this.trackClearBtnActivation(this.inputInBib);
|
|
21464
|
-
}
|
|
21465
|
-
|
|
21466
21454
|
// Pass label text to the dropdown bib for accessible dialog naming
|
|
21467
21455
|
const labelElement = this.querySelector('[slot="label"]');
|
|
21468
21456
|
if (labelElement) {
|
|
@@ -21848,52 +21836,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21848
21836
|
this.clearBtnFocused = false;
|
|
21849
21837
|
}
|
|
21850
21838
|
});
|
|
21851
|
-
|
|
21852
|
-
this.trackClearBtnActivation(this.input);
|
|
21853
|
-
}
|
|
21854
|
-
|
|
21855
|
-
/**
|
|
21856
|
-
* Flags genuine clear-button activations on an auro-input so the SPA-preselect
|
|
21857
|
-
* guard in handleInputValueChange doesn't swallow them.
|
|
21858
|
-
*
|
|
21859
|
-
* The auro-input clear button fires an `isProgrammatic` input event (via
|
|
21860
|
-
* notifyValueChanged) that is indistinguishable in shape from the
|
|
21861
|
-
* SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
|
|
21862
|
-
* input). Without this one-shot flag, clicking clear would leave
|
|
21863
|
-
* this.value/optionSelected stale (AB#1634257).
|
|
21864
|
-
*
|
|
21865
|
-
* Delegated on the shadow root so it works regardless of when .clearBtn
|
|
21866
|
-
* renders (it only exists after a value is set), and covers both real clicks
|
|
21867
|
-
* and programmatic clearBtn.click() (which no focusin precedes). Registered in
|
|
21868
|
-
* the CAPTURE phase so the flag is set BEFORE the button's own @click
|
|
21869
|
-
* (handleClickClear) fires its synchronous input event — which is when
|
|
21870
|
-
* handleInputValueChange reads the flag.
|
|
21871
|
-
* @private
|
|
21872
|
-
* @param {Element} inputEl - The auro-input whose clear button to track.
|
|
21873
|
-
* @returns {void}
|
|
21874
|
-
*/
|
|
21875
|
-
trackClearBtnActivation(inputEl) {
|
|
21876
|
-
if (!inputEl || !inputEl.shadowRoot) {
|
|
21877
|
-
return;
|
|
21878
|
-
}
|
|
21879
|
-
inputEl.shadowRoot.addEventListener('click', (event) => {
|
|
21880
|
-
if (event.target.closest('.clearBtn')) {
|
|
21881
|
-
this._clearBtnActivated = true;
|
|
21882
|
-
|
|
21883
|
-
// Bound the flag's lifetime to this synchronous clear -> input window.
|
|
21884
|
-
// auro-input's handleClickClear fires its input event synchronously
|
|
21885
|
-
// (before any macrotask runs), so handleInputValueChange consumes the
|
|
21886
|
-
// flag first and this reset is a harmless no-op. It only does real work
|
|
21887
|
-
// if that input event never arrives (e.g. auro-input throws mid-clear),
|
|
21888
|
-
// guaranteeing the flag can't survive to be misread as a genuine clear
|
|
21889
|
-
// by a later unrelated event such as an SPA-preselect echo (AB#1634257).
|
|
21890
|
-
// Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
|
|
21891
|
-
// component tears down inside that window.
|
|
21892
|
-
this._scheduleTimer(() => {
|
|
21893
|
-
this._clearBtnActivated = false;
|
|
21894
|
-
}, 0);
|
|
21895
|
-
}
|
|
21896
|
-
}, true);
|
|
21897
21839
|
}
|
|
21898
21840
|
|
|
21899
21841
|
/**
|
|
@@ -21935,17 +21877,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21935
21877
|
* @returns {void}
|
|
21936
21878
|
*/
|
|
21937
21879
|
handleInputValueChange(event) {
|
|
21938
|
-
// Consume the one-shot clear-button flag on EVERY entry, before any branch
|
|
21939
|
-
// below can early-return. trackClearBtnActivation sets it in the capture
|
|
21940
|
-
// phase right before auro-input's clear button fires its synchronous input
|
|
21941
|
-
// event; reading and immediately clearing it here guarantees the flag never
|
|
21942
|
-
// survives a handleInputValueChange call to leak into a later event (e.g.
|
|
21943
|
-
// the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
|
|
21944
|
-
// where it would defeat the guard below. Held in a local so that guard can
|
|
21945
|
-
// still tell a genuine clear from the init-render echo (AB#1634257).
|
|
21946
|
-
const clearBtnActivated = this._clearBtnActivated;
|
|
21947
|
-
this._clearBtnActivated = false;
|
|
21948
|
-
|
|
21949
21880
|
// When the event comes from the fullscreen bib input, sync the value to
|
|
21950
21881
|
// the trigger input. Setting trigger.value triggers Lit's updated()
|
|
21951
21882
|
// (async, microtask) which fires notifyValueChanged() → another 'input'
|
|
@@ -21993,12 +21924,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21993
21924
|
// to the exact shape of that echo (isProgrammatic + non-empty combobox
|
|
21994
21925
|
// value + empty input.value) so it doesn't affect the swap/typed paths
|
|
21995
21926
|
// where value/input already track each other through the sync helpers.
|
|
21996
|
-
|
|
21997
|
-
// empty input) but is a genuine user clear that MUST reset this.value and
|
|
21998
|
-
// optionSelected below. clearBtnActivated (consumed at the top of this
|
|
21999
|
-
// method) is true only for that genuine clear, so only the real
|
|
22000
|
-
// SPA-preselect echo bails (AB#1634257).
|
|
22001
|
-
if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
|
|
21927
|
+
if (event && event.isProgrammatic && this.value && !this.input.value) {
|
|
22002
21928
|
return;
|
|
22003
21929
|
}
|
|
22004
21930
|
|
|
@@ -22143,14 +22069,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22143
22069
|
// retry would otherwise keep rescheduling itself indefinitely.
|
|
22144
22070
|
this._pendingTimers.forEach((id) => clearTimeout(id));
|
|
22145
22071
|
this._pendingTimers.clear();
|
|
22146
|
-
|
|
22147
|
-
// Cancelling the timers above drops the macrotask that would have reset
|
|
22148
|
-
// _clearBtnActivated, so reset it here too. Otherwise a disconnect inside
|
|
22149
|
-
// the clear-click -> macrotask window strands the flag `true`; instance
|
|
22150
|
-
// state survives reconnect, and the first matching input event (including
|
|
22151
|
-
// an SPA-preselect echo) would then bypass the guard in
|
|
22152
|
-
// handleInputValueChange and silently clear value/optionSelected (AB#1634257).
|
|
22153
|
-
this._clearBtnActivated = false;
|
|
22154
22072
|
}
|
|
22155
22073
|
|
|
22156
22074
|
firstUpdated() {
|
|
@@ -22249,14 +22167,6 @@ class AuroCombobox extends AuroElement {
|
|
|
22249
22167
|
}
|
|
22250
22168
|
if (this.menu.value || this.menu.optionSelected) {
|
|
22251
22169
|
this.menu.reset();
|
|
22252
|
-
} else {
|
|
22253
|
-
// The menu's selection properties are already cleared, but option
|
|
22254
|
-
// elements can still carry a stale `selected` attribute (e.g. the menu
|
|
22255
|
-
// options were rebuilt after the value was set, orphaning the DOM from
|
|
22256
|
-
// the now-null optionSelected). reset() is skipped above in that case,
|
|
22257
|
-
// so re-sync the option DOM directly to guarantee no option renders as
|
|
22258
|
-
// selected once the field is cleared (AB#1634259).
|
|
22259
|
-
this.menu.clearSelection();
|
|
22260
22170
|
}
|
|
22261
22171
|
} finally {
|
|
22262
22172
|
this._clearing = false;
|
|
@@ -35,6 +35,7 @@ The `auro-counter-group` element provides a flexible interface for grouping mult
|
|
|
35
35
|
| Method | Type | Description |
|
|
36
36
|
|------------|----------------------------------------|--------------------------------------------------|
|
|
37
37
|
| `hideBib` | `(): void` | Hides the dropdown bib if its open. |
|
|
38
|
+
| `reset` | `(): void` | Resets the counter group to its initial state by resetting each child counter and clearing validity.<br />Each child reset dispatches an `input` event, which triggers `updateValue()` to recompute `value`/`total`. |
|
|
38
39
|
| `showBib` | `(): void` | Shows the dropdown bib if there are options to show. |
|
|
39
40
|
| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
40
41
|
|
|
@@ -86,6 +87,7 @@ The `auro-counter` element provides a flexible counter interface with increment
|
|
|
86
87
|
|-------------|----------------------------------------|--------------------------------------------------|
|
|
87
88
|
| `decrement` | `(value?: number \| undefined): void` | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
|
|
88
89
|
| `increment` | `(value?: number \| undefined): void` | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
|
|
90
|
+
| `reset` | `(): void` | Resets the counter to its default state, clearing validity/touched state and returning<br />the value to `min` — matching the clear-on-reset behavior of the other Auro form elements. |
|
|
89
91
|
| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
90
92
|
|
|
91
93
|
## Events
|
|
@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1127
1127
|
}
|
|
1128
1128
|
};
|
|
1129
1129
|
|
|
1130
|
-
var formkitVersion$1 = '
|
|
1130
|
+
var formkitVersion$1 = '202609011830';
|
|
1131
1131
|
|
|
1132
1132
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1133
1133
|
// See LICENSE in the project root for license information.
|
|
@@ -1485,6 +1485,17 @@ class AuroCounter extends i$2 {
|
|
|
1485
1485
|
this.validation.validate(this, force);
|
|
1486
1486
|
}
|
|
1487
1487
|
|
|
1488
|
+
/**
|
|
1489
|
+
* Resets the counter to its default state, clearing validity/touched state and returning
|
|
1490
|
+
* the value to `min` — matching the clear-on-reset behavior of the other Auro form elements.
|
|
1491
|
+
* @returns {void}
|
|
1492
|
+
*/
|
|
1493
|
+
reset() {
|
|
1494
|
+
// validation.reset() clears validity/touched and sets value to undefined; initValue() then restores the min floor.
|
|
1495
|
+
this.validation.reset(this);
|
|
1496
|
+
this.initValue();
|
|
1497
|
+
}
|
|
1498
|
+
|
|
1488
1499
|
firstUpdated() {
|
|
1489
1500
|
this.initValue();
|
|
1490
1501
|
this.setTagAttribute("auro-counter");
|
|
@@ -5434,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5434
5445
|
}
|
|
5435
5446
|
}
|
|
5436
5447
|
|
|
5437
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202609011830';
|
|
5438
5449
|
|
|
5439
5450
|
/**
|
|
5440
5451
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -8162,6 +8173,19 @@ class AuroCounterGroup extends AuroElement {
|
|
|
8162
8173
|
this.validation.validate(this, force);
|
|
8163
8174
|
}
|
|
8164
8175
|
|
|
8176
|
+
/**
|
|
8177
|
+
* Resets the counter group to its initial state by resetting each child counter and clearing validity.
|
|
8178
|
+
* Each child reset dispatches an `input` event, which triggers `updateValue()` to recompute `value`/`total`.
|
|
8179
|
+
* @returns {void}
|
|
8180
|
+
*/
|
|
8181
|
+
reset() {
|
|
8182
|
+
if (this.counters) {
|
|
8183
|
+
this.counters.forEach((counter) => counter.reset());
|
|
8184
|
+
}
|
|
8185
|
+
|
|
8186
|
+
this.validation.reset(this);
|
|
8187
|
+
}
|
|
8188
|
+
|
|
8165
8189
|
updated(changedProperties) {
|
|
8166
8190
|
if (changedProperties.has("value")) {
|
|
8167
8191
|
this.validate();
|
|
@@ -39,6 +39,8 @@
|
|
|
39
39
|
<script type="module">
|
|
40
40
|
import { renderPage } from './demo-support.min.js';
|
|
41
41
|
await renderPage('./getting-started.md');
|
|
42
|
+
import { initExamples } from './getting-started.min.js';
|
|
43
|
+
initExamples();
|
|
42
44
|
</script>
|
|
43
45
|
|
|
44
46
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
@@ -49,6 +51,6 @@
|
|
|
49
51
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
50
52
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
51
53
|
|
|
52
|
-
<script src="./
|
|
54
|
+
<script src="./getting-started.min.js" data-demo-script="true" type="module"></script>
|
|
53
55
|
</body>
|
|
54
56
|
</html>
|