@aurodesignsystem-dev/auro-formkit 0.0.0-pr1489.12 → 0.0.0-pr1489.14
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/css-only.html +57 -0
- package/components/checkbox/demo/css-only.md +146 -0
- 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/demo/pages.json +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/css-only.html +57 -0
- package/components/combobox/demo/css-only.md +209 -0
- package/components/combobox/demo/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/demo/pages.json +1 -1
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/css-only.html +57 -0
- package/components/counter/demo/css-only.md +184 -0
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/pages.json +1 -1
- package/components/counter/dist/index.js +441 -45
- package/components/counter/dist/registered.js +1 -1
- package/components/datepicker/demo/css-only.html +57 -0
- package/components/datepicker/demo/css-only.md +151 -0
- package/components/datepicker/demo/customize.min.js +13 -7
- package/components/datepicker/demo/index.min.js +13 -7
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/dist/index.js +13 -7
- package/components/datepicker/dist/registered.js +13 -7
- package/components/datepicker/dist/src/auro-calendar.d.ts +5 -0
- package/components/dropdown/demo/css-only.html +57 -0
- package/components/dropdown/demo/css-only.md +219 -0
- 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/demo/pages.json +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/css-only.html +57 -0
- package/components/form/demo/css-only.md +156 -0
- package/components/form/demo/customize.min.js +864 -858
- package/components/form/demo/getting-started.min.js +864 -858
- package/components/form/demo/index.min.js +864 -858
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +859 -853
- package/components/input/demo/css-only.html +57 -0
- package/components/input/demo/css-only.md +199 -0
- 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/demo/pages.json +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/css-only.html +57 -0
- package/components/menu/demo/css-only.md +166 -0
- package/components/menu/demo/pages.json +1 -1
- package/components/radio/demo/css-only.html +57 -0
- package/components/radio/demo/css-only.md +151 -0
- 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/demo/pages.json +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/css-only.html +57 -0
- package/components/select/demo/css-only.md +203 -0
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/pages.json +1 -1
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1629 -1619
- package/package.json +1 -1
|
@@ -5335,7 +5335,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5335
5335
|
}
|
|
5336
5336
|
};
|
|
5337
5337
|
|
|
5338
|
-
var formkitVersion$2 = '
|
|
5338
|
+
var formkitVersion$2 = '202606051806';
|
|
5339
5339
|
|
|
5340
5340
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5341
5341
|
static get properties() {
|
|
@@ -13430,7 +13430,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
13430
13430
|
}
|
|
13431
13431
|
};
|
|
13432
13432
|
|
|
13433
|
-
var formkitVersion$1 = '
|
|
13433
|
+
var formkitVersion$1 = '202606051806';
|
|
13434
13434
|
|
|
13435
13435
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13436
13436
|
// See LICENSE in the project root for license information.
|
|
@@ -14503,7 +14503,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
14503
14503
|
}
|
|
14504
14504
|
}
|
|
14505
14505
|
|
|
14506
|
-
var formkitVersion = '
|
|
14506
|
+
var formkitVersion = '202606051806';
|
|
14507
14507
|
|
|
14508
14508
|
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}`;
|
|
14509
14509
|
|
|
@@ -5335,7 +5335,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5335
5335
|
}
|
|
5336
5336
|
};
|
|
5337
5337
|
|
|
5338
|
-
var formkitVersion$2 = '
|
|
5338
|
+
var formkitVersion$2 = '202606051806';
|
|
5339
5339
|
|
|
5340
5340
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5341
5341
|
static get properties() {
|
|
@@ -13430,7 +13430,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
13430
13430
|
}
|
|
13431
13431
|
};
|
|
13432
13432
|
|
|
13433
|
-
var formkitVersion$1 = '
|
|
13433
|
+
var formkitVersion$1 = '202606051806';
|
|
13434
13434
|
|
|
13435
13435
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13436
13436
|
// See LICENSE in the project root for license information.
|
|
@@ -14503,7 +14503,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
14503
14503
|
}
|
|
14504
14504
|
}
|
|
14505
14505
|
|
|
14506
|
-
var formkitVersion = '
|
|
14506
|
+
var formkitVersion = '202606051806';
|
|
14507
14507
|
|
|
14508
14508
|
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}`;
|
|
14509
14509
|
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/css-only.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-counter | CSS only</title>
|
|
20
|
+
|
|
21
|
+
<!-- highlight.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
35
|
+
<style>
|
|
36
|
+
table {
|
|
37
|
+
--ds-color-container-secondary-default: transparent;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
tr:not(:last-of-type) {
|
|
41
|
+
border-bottom: 1px solid var(--ds-color-border-tertiary-default);
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
</head>
|
|
45
|
+
<body class="auro-markdown">
|
|
46
|
+
<main></main>
|
|
47
|
+
|
|
48
|
+
<script type="module">
|
|
49
|
+
import { renderPage } from './demo-support.min.js';
|
|
50
|
+
await renderPage('./css-only.md');
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native number input</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-counter></code> web component cannot be used, a native HTML <code><input type="number"></code> element — optionally paired with <code><button></code> increment and decrement controls — can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-counter</code>. Unlike <auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink/css-only" target="_blank">auro-hyperlink</auro-hyperlink>, <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">Web Core Style Sheets</auro-hyperlink> does not provide a prebuilt <code>.counter</code> class, so the styling must be authored manually using Auro design tokens.</p>
|
|
3
|
+
<auro-header level="2">Styling a native number input</auro-header>
|
|
4
|
+
<p>The native number input and its associated increment/decrement buttons can be restyled with the Auro design tokens published by <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">@aurodesignsystem/design-tokens</auro-hyperlink>. The pattern below replicates the layout, button shape, and value typography used by <code>auro-counter</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.counter {
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: var(--ds-size-200, 1rem);
|
|
11
|
+
font-family: var(--ds-font-family-default, sans-serif);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.counter__button {
|
|
15
|
+
appearance: none;
|
|
16
|
+
-webkit-appearance: none;
|
|
17
|
+
width: var(--ds-size-400, 2rem);
|
|
18
|
+
height: var(--ds-size-400, 2rem);
|
|
19
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
22
|
+
color: var(--ds-color-text-primary-default, #00467f);
|
|
23
|
+
font-size: var(--ds-size-300, 1.5rem);
|
|
24
|
+
line-height: 1;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.counter__button:focus-visible {
|
|
32
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
33
|
+
outline-offset: 2px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.counter__button:disabled {
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
opacity: 0.5;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.counter__value {
|
|
42
|
+
appearance: textfield;
|
|
43
|
+
-moz-appearance: textfield;
|
|
44
|
+
width: var(--ds-size-500, 2.5rem);
|
|
45
|
+
border: none;
|
|
46
|
+
background: transparent;
|
|
47
|
+
text-align: center;
|
|
48
|
+
font-size: var(--ds-size-300, 1.5rem);
|
|
49
|
+
color: var(--ds-color-text-primary-default, #2a2a2a);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.counter__value::-webkit-outer-spin-button,
|
|
53
|
+
.counter__value::-webkit-inner-spin-button {
|
|
54
|
+
-webkit-appearance: none;
|
|
55
|
+
margin: 0;
|
|
56
|
+
}</code></pre>
|
|
57
|
+
<auro-header level="3">Basic counter</auro-header>
|
|
58
|
+
<p>Wrap a native <code><input type="number"></code> with two <code><button></code> elements and a <code><label></code> for an accessible name:</p>
|
|
59
|
+
<pre><code><div class="counter">
|
|
60
|
+
<label for="passengers">Passengers</label>
|
|
61
|
+
<button type="button" class="counter__button" aria-label="Decrease passengers">−</button>
|
|
62
|
+
<input id="passengers" class="counter__value" type="number" min="0" max="9" step="1" value="0" />
|
|
63
|
+
<button type="button" class="counter__button" aria-label="Increase passengers">+</button>
|
|
64
|
+
</div></code></pre>
|
|
65
|
+
<auro-header level="3">Group of counters</auro-header>
|
|
66
|
+
<p>Use a <code><fieldset></code> and <code><legend></code> to give the group an accessible name. The buttons require custom JavaScript to update each input's value:</p>
|
|
67
|
+
<pre><code><fieldset>
|
|
68
|
+
<legend>Travelers</legend>
|
|
69
|
+
<div class="counter">
|
|
70
|
+
<label for="adults">Adults</label>
|
|
71
|
+
<button type="button" class="counter__button" aria-label="Decrease adults">−</button>
|
|
72
|
+
<input id="adults" class="counter__value" type="number" min="1" max="9" step="1" value="1" />
|
|
73
|
+
<button type="button" class="counter__button" aria-label="Increase adults">+</button>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="counter">
|
|
76
|
+
<label for="children">Children</label>
|
|
77
|
+
<button type="button" class="counter__button" aria-label="Decrease children">−</button>
|
|
78
|
+
<input id="children" class="counter__value" type="number" min="0" max="8" step="1" value="0" />
|
|
79
|
+
<button type="button" class="counter__button" aria-label="Increase children">+</button>
|
|
80
|
+
</div>
|
|
81
|
+
</fieldset></code></pre>
|
|
82
|
+
<auro-header level="2">What you lose without auro-counter</auro-header>
|
|
83
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-counter</code>, the following functionality built into the <code>auro-counter</code> and <code>auro-counter-group</code> web components is <strong>not available</strong> when using plain HTML:</p>
|
|
84
|
+
<auro-header level="3">Increment and decrement button wiring</auro-header>
|
|
85
|
+
<p><code>auro-counter</code> exposes <code>increment()</code> and <code>decrement()</code> methods and handles all click wiring between its buttons and the displayed value. With native HTML, the <code><button></code> controls have no inherent relationship to the <code><input type="number"></code> — you must write JavaScript click handlers that read the input, apply the step, clamp to <code>min</code>/<code>max</code>, and write the new value back.</p>
|
|
86
|
+
<auro-header level="3">Automatic min/max button disabling</auro-header>
|
|
87
|
+
<p><code>auro-counter</code> automatically disables the decrement button when the value is at <code>min</code> and the increment button when the value is at <code>max</code>, providing a clear visual signal that further changes are not allowed. Native HTML <code>min</code> and <code>max</code> only constrain validation — the surrounding <code><button></code> controls will not disable themselves at the boundaries unless you wire that behavior yourself.</p>
|
|
88
|
+
<auro-header level="3">Group-level min/max coordination</auro-header>
|
|
89
|
+
<p><code>auro-counter-group</code> supports <code>min</code> and <code>max</code> properties that apply to the <em>total</em> of all child counters. When the aggregate total reaches the group maximum, every child counter's increment button is disabled; when it reaches the minimum, every decrement button is disabled. Native HTML has no equivalent — you must write JavaScript to sum each input, compare against a group total, and toggle every button accordingly.</p>
|
|
90
|
+
<auro-header level="3">Coordinated value object and total</auro-header>
|
|
91
|
+
<p><code>auro-counter-group</code> exposes a single <code>value</code> property as an object keyed by each counter's <code>name</code>, along with a separate <code>total</code> property for the aggregate sum. With native HTML, you must query each input individually, build the value object yourself, and recompute the total on every change.</p>
|
|
92
|
+
<auro-header level="3">Spinbutton ARIA semantics</auro-header>
|
|
93
|
+
<p><code>auro-counter</code> renders a <code>role="spinbutton"</code> element with <code>aria-valuemin</code>, <code>aria-valuemax</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, and <code>aria-labelledby</code> so assistive technology announces the value as a spinbutton — the role most screen readers expect for stepper controls. A native <code><input type="number"></code> is announced as an editable text field, not a spinbutton, and there is no built-in way to relabel the surrounding +/− buttons through ARIA slots.</p>
|
|
94
|
+
<auro-header level="3">Validation and error messaging</auro-header>
|
|
95
|
+
<p><code>auro-counter</code> integrates with <code>@aurodesignsystem/form-validation</code> to expose a <code>validity</code> property, an <code>error</code> attribute, and a help text region that switches to an alert with <code>role="alert"</code> and <code>aria-live="assertive"</code> when invalid. Native number inputs surface browser-controlled validation tooltips that are not announced inline and cannot be styled or customized beyond <code>setCustomValidity()</code>.</p>
|
|
96
|
+
<auro-header level="3">Keyboard strategy</auro-header>
|
|
97
|
+
<p><code>auro-counter</code> and <code>auro-counter-group</code> install dedicated keyboard strategies that handle Arrow keys, Home/End, and tab order across the +/− buttons and the spinbutton, including ordered traversal of every counter inside a group. Native HTML gives you only the default browser behavior — Arrow keys step the number input by one, but they will not move focus between counters or coordinate Home/End across a group without custom code.</p>
|
|
98
|
+
<auro-header level="3">Disabled state and propagation</auro-header>
|
|
99
|
+
<p><code>auro-counter</code> exposes a single <code>disabled</code> attribute that disables both buttons and removes the spinbutton from the tab order, and <code>auro-counter-group</code> propagates appearance and theming to all child counters. With native HTML, you must apply <code>disabled</code> to each <code><input></code> and each <code><button></code> individually, or wrap them in a <code><fieldset disabled></code> with the side effects that entails.</p>
|
|
100
|
+
<auro-header level="3">Dropdown layout</auro-header>
|
|
101
|
+
<p><code>auro-counter-group</code> supports an <code>isDropdown</code> mode that renders the group inside an Auro dropdown with a trigger, value text, fullscreen breakpoint behavior, and configurable placement. There is no native HTML equivalent — reproducing this requires building the popover, focus management, and fullscreen transitions yourself.</p>
|
|
102
|
+
<auro-header level="3">Form integration events</auro-header>
|
|
103
|
+
<p><code>auro-counter</code> dispatches <code>input</code> events with a structured <code>detail.value</code>, and <code>auro-counter-group</code> dispatches <code>input</code> events carrying both <code>detail.total</code> and <code>detail.value</code> plus <code>auroFormElement-validated</code> events so a parent <code>auro-form</code> can coordinate validation. Native inputs emit only the standard <code>input</code> and <code>change</code> events without the structured payloads the Auro form system expects.</p>
|
|
104
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
105
|
+
<p><code>auro-counter</code> consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only counter is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.</p>
|
|
106
|
+
<auro-header level="2">Summary</auro-header>
|
|
107
|
+
<table>
|
|
108
|
+
<thead>
|
|
109
|
+
<tr>
|
|
110
|
+
<th>Feature</th>
|
|
111
|
+
<th>Native <code><input type="number"></code> with Auro tokens</th>
|
|
112
|
+
<th><code>auro-counter</code></th>
|
|
113
|
+
</tr>
|
|
114
|
+
</thead>
|
|
115
|
+
<tbody>
|
|
116
|
+
<tr>
|
|
117
|
+
<td>Design-system-aligned styling</td>
|
|
118
|
+
<td>Manual (author-written CSS)</td>
|
|
119
|
+
<td>Built-in</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td>Dark background support</td>
|
|
123
|
+
<td>Manual</td>
|
|
124
|
+
<td>Yes (<code>appearance="inverse"</code>)</td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr>
|
|
127
|
+
<td>Increment/decrement button wiring</td>
|
|
128
|
+
<td>Manual JavaScript</td>
|
|
129
|
+
<td>Built-in <code>increment()</code>/<code>decrement()</code></td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>Auto-disable at min/max</td>
|
|
133
|
+
<td>Manual</td>
|
|
134
|
+
<td>Automatic per counter</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>Group-level min/max total</td>
|
|
138
|
+
<td>Not supported</td>
|
|
139
|
+
<td>Built-in via <code>auro-counter-group</code></td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>Coordinated value object and total</td>
|
|
143
|
+
<td>Manual aggregation</td>
|
|
144
|
+
<td>Single <code>value</code> and <code>total</code></td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Spinbutton ARIA semantics</td>
|
|
148
|
+
<td>Not supported</td>
|
|
149
|
+
<td><code>role="spinbutton"</code> with full ARIA</td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td>Validation messages</td>
|
|
153
|
+
<td>Limited to <code>setCustomValidity()</code></td>
|
|
154
|
+
<td>Inline live-region error help text</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>Keyboard strategy across group</td>
|
|
158
|
+
<td>Browser default only</td>
|
|
159
|
+
<td>Coordinated arrow/Home/End handling</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>Disabled propagation</td>
|
|
163
|
+
<td>Per-input and per-button</td>
|
|
164
|
+
<td>Single attribute on counter or group</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td>Dropdown layout</td>
|
|
168
|
+
<td>Not supported</td>
|
|
169
|
+
<td><code>isDropdown</code> with fullscreen breakpoints</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td>Form validation events</td>
|
|
173
|
+
<td>Not supported</td>
|
|
174
|
+
<td><code>auroFormElement-validated</code></td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Multi-brand theming</td>
|
|
178
|
+
<td>Static (import-time tokens)</td>
|
|
179
|
+
<td>Full (design tokens + component logic)</td>
|
|
180
|
+
</tr>
|
|
181
|
+
</tbody>
|
|
182
|
+
</table>
|
|
183
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
184
|
+
<p>Use <code>auro-counter</code> and <code>auro-counter-group</code> whenever possible. Fall back to a CSS-styled native number input only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement button wiring, min/max disabling, group totals, spinbutton ARIA, and keyboard coordination yourself.</p>
|
|
@@ -1645,7 +1645,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1645
1645
|
}
|
|
1646
1646
|
};
|
|
1647
1647
|
|
|
1648
|
-
var formkitVersion$1 = '
|
|
1648
|
+
var formkitVersion$1 = '202606051806';
|
|
1649
1649
|
|
|
1650
1650
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1651
1651
|
// See LICENSE in the project root for license information.
|
|
@@ -5991,7 +5991,7 @@ class AuroHelpText extends i$2 {
|
|
|
5991
5991
|
}
|
|
5992
5992
|
}
|
|
5993
5993
|
|
|
5994
|
-
var formkitVersion = '
|
|
5994
|
+
var formkitVersion = '202606051806';
|
|
5995
5995
|
|
|
5996
5996
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5997
5997
|
static get properties() {
|
|
@@ -1645,7 +1645,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1645
1645
|
}
|
|
1646
1646
|
};
|
|
1647
1647
|
|
|
1648
|
-
var formkitVersion$1 = '
|
|
1648
|
+
var formkitVersion$1 = '202606051806';
|
|
1649
1649
|
|
|
1650
1650
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1651
1651
|
// See LICENSE in the project root for license information.
|
|
@@ -5991,7 +5991,7 @@ class AuroHelpText extends i$2 {
|
|
|
5991
5991
|
}
|
|
5992
5992
|
}
|
|
5993
5993
|
|
|
5994
|
-
var formkitVersion = '
|
|
5994
|
+
var formkitVersion = '202606051806';
|
|
5995
5995
|
|
|
5996
5996
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5997
5997
|
static get properties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-counter.md","readme.md"]
|
|
1
|
+
["accessibility.md","api.md","css-only.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-counter.md","readme.md"]
|