@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.5 → 0.0.0-pr1493.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.
Files changed (153) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +7 -0
  2. package/components/bibtemplate/dist/index.js +9 -1
  3. package/components/bibtemplate/dist/registered.js +9 -1
  4. package/components/checkbox/demo/css-only.html +57 -0
  5. package/components/checkbox/demo/css-only.md +146 -0
  6. package/components/checkbox/demo/customize.min.js +2 -2
  7. package/components/checkbox/demo/getting-started.min.js +2 -2
  8. package/components/checkbox/demo/index.min.js +2 -2
  9. package/components/checkbox/demo/pages.json +1 -1
  10. package/components/checkbox/demo/styles.min.css +1 -1
  11. package/components/checkbox/demo/why-checkbox.html +57 -0
  12. package/components/checkbox/demo/why-checkbox.md +86 -0
  13. package/components/checkbox/dist/index.js +2 -2
  14. package/components/checkbox/dist/registered.js +2 -2
  15. package/components/combobox/demo/css-only.html +57 -0
  16. package/components/combobox/demo/css-only.md +209 -0
  17. package/components/combobox/demo/customize.md +7 -3
  18. package/components/combobox/demo/customize.min.js +1846 -1804
  19. package/components/combobox/demo/getting-started.min.js +1846 -1804
  20. package/components/combobox/demo/index.min.js +1846 -1804
  21. package/components/combobox/demo/pages.json +1 -1
  22. package/components/combobox/demo/styles.min.css +1 -1
  23. package/components/combobox/demo/why-combobox.html +57 -0
  24. package/components/combobox/demo/why-combobox.md +113 -0
  25. package/components/combobox/dist/auro-combobox.d.ts +5 -0
  26. package/components/combobox/dist/index.js +796 -179
  27. package/components/combobox/dist/registered.js +796 -179
  28. package/components/counter/demo/css-only.html +57 -0
  29. package/components/counter/demo/css-only.md +184 -0
  30. package/components/counter/demo/customize.min.js +276 -16
  31. package/components/counter/demo/index.min.js +276 -16
  32. package/components/counter/demo/keyboard-behavior.md +1 -0
  33. package/components/counter/demo/pages.json +1 -1
  34. package/components/counter/demo/styles.min.css +1 -1
  35. package/components/counter/demo/why-counter.html +57 -0
  36. package/components/counter/demo/why-counter.md +108 -0
  37. package/components/counter/dist/index.js +5457 -193
  38. package/components/counter/dist/registered.js +5457 -193
  39. package/components/datepicker/demo/accessibility.md +54 -3
  40. package/components/datepicker/demo/api.md +65 -55
  41. package/components/datepicker/demo/css-only.html +57 -0
  42. package/components/datepicker/demo/css-only.md +151 -0
  43. package/components/datepicker/demo/customize.html +2 -0
  44. package/components/datepicker/demo/customize.js +19 -0
  45. package/components/datepicker/demo/customize.md +474 -298
  46. package/components/datepicker/demo/customize.min.js +36243 -0
  47. package/components/datepicker/demo/design.md +5 -3
  48. package/components/datepicker/demo/getting-started.md +6 -6
  49. package/components/datepicker/demo/index.js +5 -1
  50. package/components/datepicker/demo/index.md +113 -16
  51. package/components/datepicker/demo/index.min.js +2735 -396
  52. package/components/datepicker/demo/keyboard-behavior.md +201 -2
  53. package/components/datepicker/demo/pages.json +1 -1
  54. package/components/datepicker/demo/styles.min.css +1 -1
  55. package/components/datepicker/demo/voiceover.md +21 -12
  56. package/components/datepicker/demo/why-datepicker.html +57 -0
  57. package/components/datepicker/demo/why-datepicker.md +133 -0
  58. package/components/datepicker/dist/index.js +2649 -397
  59. package/components/datepicker/dist/registered.js +2649 -397
  60. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +116 -14
  61. package/components/datepicker/dist/src/auro-calendar-month.d.ts +54 -1
  62. package/components/datepicker/dist/src/auro-calendar.d.ts +264 -0
  63. package/components/datepicker/dist/src/auro-datepicker.d.ts +189 -53
  64. package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +5 -3
  65. package/components/datepicker/dist/src/utilities.d.ts +0 -14
  66. package/components/dropdown/demo/accessibility.md +11 -0
  67. package/components/dropdown/demo/api.md +1 -0
  68. package/components/dropdown/demo/css-only.html +57 -0
  69. package/components/dropdown/demo/css-only.md +219 -0
  70. package/components/dropdown/demo/customize.md +3 -0
  71. package/components/dropdown/demo/customize.min.js +265 -13
  72. package/components/dropdown/demo/getting-started.min.js +265 -13
  73. package/components/dropdown/demo/index.min.js +265 -13
  74. package/components/dropdown/demo/keyboard-behavior.md +1 -0
  75. package/components/dropdown/demo/pages.json +1 -1
  76. package/components/dropdown/demo/styles.min.css +1 -1
  77. package/components/dropdown/demo/why-dropdown.html +57 -0
  78. package/components/dropdown/demo/why-dropdown.md +97 -0
  79. package/components/dropdown/dist/auro-dropdown.d.ts +36 -1
  80. package/components/dropdown/dist/index.js +265 -13
  81. package/components/dropdown/dist/registered.js +265 -13
  82. package/components/form/demo/css-only.html +57 -0
  83. package/components/form/demo/css-only.md +156 -0
  84. package/components/form/demo/customize.min.js +11084 -8072
  85. package/components/form/demo/getting-started.min.js +11084 -8072
  86. package/components/form/demo/index.min.js +11084 -8072
  87. package/components/form/demo/pages.json +1 -1
  88. package/components/form/demo/registerDemoDeps.min.js +11083 -8071
  89. package/components/form/demo/styles.min.css +1 -1
  90. package/components/form/demo/why-form.html +57 -0
  91. package/components/form/demo/why-form.md +101 -0
  92. package/components/input/demo/css-only.html +57 -0
  93. package/components/input/demo/css-only.md +199 -0
  94. package/components/input/demo/customize.md +625 -636
  95. package/components/input/demo/customize.min.js +150 -75
  96. package/components/input/demo/getting-started.md +16 -6
  97. package/components/input/demo/getting-started.min.js +150 -75
  98. package/components/input/demo/index.min.js +150 -75
  99. package/components/input/demo/pages.json +1 -1
  100. package/components/input/demo/styles.min.css +1 -1
  101. package/components/input/demo/why-input.html +57 -0
  102. package/components/input/demo/why-input.md +121 -0
  103. package/components/input/dist/auro-input-util.d.ts +1 -1
  104. package/components/input/dist/base-input.d.ts +16 -0
  105. package/components/input/dist/index.js +150 -75
  106. package/components/input/dist/registered.js +150 -75
  107. package/components/input/dist/utilities.d.ts +1 -2
  108. package/components/menu/demo/api.md +41 -45
  109. package/components/menu/demo/css-only.html +57 -0
  110. package/components/menu/demo/css-only.md +166 -0
  111. package/components/menu/demo/customize.md +0 -28
  112. package/components/menu/demo/index.min.js +779 -1354
  113. package/components/menu/demo/pages.json +1 -1
  114. package/components/menu/demo/styles.min.css +1 -1
  115. package/components/menu/demo/why-menu.html +57 -0
  116. package/components/menu/demo/why-menu.md +104 -0
  117. package/components/menu/dist/auro-menu.d.ts +95 -110
  118. package/components/menu/dist/auro-menuoption.d.ts +32 -138
  119. package/components/menu/dist/index.js +753 -1308
  120. package/components/menu/dist/registered.js +765 -1308
  121. package/components/radio/demo/css-only.html +57 -0
  122. package/components/radio/demo/css-only.md +151 -0
  123. package/components/radio/demo/customize.min.js +1764 -0
  124. package/components/radio/demo/demo-support.min.js +55807 -0
  125. package/components/radio/demo/getting-started.js +1 -1
  126. package/components/radio/demo/getting-started.md +1 -1
  127. package/components/radio/demo/getting-started.min.js +1783 -0
  128. package/components/radio/demo/index.min.js +2 -2
  129. package/components/radio/demo/pages.json +1 -1
  130. package/components/radio/demo/styles.min.css +1 -1
  131. package/components/radio/demo/why-radio.html +57 -0
  132. package/components/radio/demo/why-radio.md +92 -0
  133. package/components/radio/dist/index.js +2 -2
  134. package/components/radio/dist/registered.js +2 -2
  135. package/components/select/demo/api.md +1 -0
  136. package/components/select/demo/css-only.html +57 -0
  137. package/components/select/demo/css-only.md +203 -0
  138. package/components/select/demo/customize.md +78 -3
  139. package/components/select/demo/customize.min.js +1341 -1533
  140. package/components/select/demo/getting-started.min.js +1341 -1533
  141. package/components/select/demo/index.min.js +1341 -1533
  142. package/components/select/demo/keyboard-behavior.md +19 -0
  143. package/components/select/demo/pages.json +1 -1
  144. package/components/select/demo/styles.min.css +1 -1
  145. package/components/select/demo/why-select.html +57 -0
  146. package/components/select/demo/why-select.md +128 -0
  147. package/components/select/dist/auro-select.d.ts +38 -2
  148. package/components/select/dist/index.js +435 -52
  149. package/components/select/dist/registered.js +435 -52
  150. package/components/select/dist/selectUtils.d.ts +12 -0
  151. package/custom-elements.json +4206 -3708
  152. package/package.json +8 -8
  153. package/components/menu/dist/auro-menu.context.d.ts +0 -238
package/components/counter/demo/css-only.html ADDED
@@ -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>
package/components/counter/demo/css-only.md ADDED
@@ -0,0 +1,184 @@
1
+ <auro-header level="1">CSS only with native number input</auro-header>
2
+ <p>For situations where the <code>&lt;auro-counter&gt;</code> web component cannot be used, a native HTML <code>&lt;input type="number"&gt;</code> element — optionally paired with <code>&lt;button&gt;</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>&lt;input type="number"&gt;</code> with two <code>&lt;button&gt;</code> elements and a <code>&lt;label&gt;</code> for an accessible name:</p>
59
+ <pre><code>&lt;div class="counter"&gt;
60
+ &lt;label for="passengers"&gt;Passengers&lt;/label&gt;
61
+ &lt;button type="button" class="counter__button" aria-label="Decrease passengers"&gt;&minus;&lt;/button&gt;
62
+ &lt;input id="passengers" class="counter__value" type="number" min="0" max="9" step="1" value="0" /&gt;
63
+ &lt;button type="button" class="counter__button" aria-label="Increase passengers"&gt;+&lt;/button&gt;
64
+ &lt;/div&gt;</code></pre>
65
+ <auro-header level="3">Group of counters</auro-header>
66
+ <p>Use a <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> to give the group an accessible name. The buttons require custom JavaScript to update each input's value:</p>
67
+ <pre><code>&lt;fieldset&gt;
68
+ &lt;legend&gt;Travelers&lt;/legend&gt;
69
+ &lt;div class="counter"&gt;
70
+ &lt;label for="adults"&gt;Adults&lt;/label&gt;
71
+ &lt;button type="button" class="counter__button" aria-label="Decrease adults"&gt;&minus;&lt;/button&gt;
72
+ &lt;input id="adults" class="counter__value" type="number" min="1" max="9" step="1" value="1" /&gt;
73
+ &lt;button type="button" class="counter__button" aria-label="Increase adults"&gt;+&lt;/button&gt;
74
+ &lt;/div&gt;
75
+ &lt;div class="counter"&gt;
76
+ &lt;label for="children"&gt;Children&lt;/label&gt;
77
+ &lt;button type="button" class="counter__button" aria-label="Decrease children"&gt;&minus;&lt;/button&gt;
78
+ &lt;input id="children" class="counter__value" type="number" min="0" max="8" step="1" value="0" /&gt;
79
+ &lt;button type="button" class="counter__button" aria-label="Increase children"&gt;+&lt;/button&gt;
80
+ &lt;/div&gt;
81
+ &lt;/fieldset&gt;</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>&lt;button&gt;</code> controls have no inherent relationship to the <code>&lt;input type="number"&gt;</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>&lt;button&gt;</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>&lt;input type="number"&gt;</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>&lt;input&gt;</code> and each <code>&lt;button&gt;</code> individually, or wrap them in a <code>&lt;fieldset disabled&gt;</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>&lt;input type="number"&gt;</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>
package/components/counter/demo/customize.min.js CHANGED
@@ -727,7 +727,7 @@ class AuroFormValidation {
727
727
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
728
728
  const input = elem.renderRoot.querySelector('input');
729
729
 
730
- if (input.validationMessage.length > 0) {
730
+ if (input && input.validationMessage.length > 0) {
731
731
  elem.errorMessage = input.validationMessage;
732
732
  }
733
733
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606031942';
1102
+ var formkitVersion$1 = '202606181613';
1103
1103
 
1104
1104
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1105
1105
  // See LICENSE in the project root for license information.
@@ -4814,7 +4814,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
4814
4814
  });
4815
4815
  }
4816
4816
 
4817
- var styleCss$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
4817
+ var styleCss$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
4818
4818
 
4819
4819
  var colorCss$2 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
4820
4820
 
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
5445
5445
  }
5446
5446
  }
5447
5447
 
5448
- var formkitVersion = '202606031942';
5448
+ var formkitVersion = '202606181613';
5449
5449
 
5450
5450
  let AuroElement$1 = class AuroElement extends i$2 {
5451
5451
  static get properties() {
@@ -5625,6 +5625,7 @@ class AuroDropdown extends AuroElement$1 {
5625
5625
  _intializeDefaults() {
5626
5626
  this.appearance = 'default';
5627
5627
  this.chevron = false;
5628
+ this.desktopModal = false;
5628
5629
  this.disabled = false;
5629
5630
  this.disableKeyboardHandling = false;
5630
5631
  this.error = false;
@@ -5805,6 +5806,14 @@ class AuroDropdown extends AuroElement$1 {
5805
5806
  reflect: true
5806
5807
  },
5807
5808
 
5809
+ /**
5810
+ * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
5811
+ */
5812
+ desktopModal: {
5813
+ type: Boolean,
5814
+ reflect: true
5815
+ },
5816
+
5808
5817
  /**
5809
5818
  * If declared, the dropdown will only show by calling the API .show() public method.
5810
5819
  */
@@ -6092,6 +6101,15 @@ class AuroDropdown extends AuroElement$1 {
6092
6101
 
6093
6102
  disconnectedCallback() {
6094
6103
  super.disconnectedCallback();
6104
+ this._clearPageInert();
6105
+ if (this._bibTabHandler) {
6106
+ this.removeEventListener('keydown', this._bibTabHandler);
6107
+ this._bibTabHandler = undefined;
6108
+ }
6109
+ if (this.focusTrap) {
6110
+ this.focusTrap.disconnect();
6111
+ this.focusTrap = undefined;
6112
+ }
6095
6113
  if (this.floater) {
6096
6114
  this.floater.hideBib('disconnect');
6097
6115
  this.floater.disconnect();
@@ -6119,19 +6137,45 @@ class AuroDropdown extends AuroElement$1 {
6119
6137
  if (this.isPopoverVisible) {
6120
6138
  // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
6121
6139
  // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
6122
- const useModal = this.isBibFullscreen;
6123
- this.bibElement.value.open(useModal);
6140
+ this.bibElement.value.open(this.isBibFullscreen);
6141
+ this.updateFocusTrap();
6142
+
6143
+ // Desktop modal: make siblings inert so content outside is not interactive
6144
+ if (this.desktopModal && !this.isBibFullscreen) {
6145
+ this._setPageInert();
6146
+ }
6124
6147
  } else {
6125
6148
  this.bibElement.value.close();
6149
+ this._clearPageInert();
6126
6150
  }
6127
6151
  }
6128
6152
 
6129
6153
  // When fullscreen strategy changes while open, re-open dialog with correct mode
6130
6154
  // (e.g. resizing from desktop → mobile while dropdown is open)
6131
6155
  if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
6132
- const useModal = this.isBibFullscreen;
6133
6156
  this.bibElement.value.close();
6134
- this.bibElement.value.open(useModal);
6157
+ this.bibElement.value.open(this.isBibFullscreen);
6158
+
6159
+ // Re-initialize focus management for the new strategy
6160
+ this.updateFocusTrap();
6161
+
6162
+ // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
6163
+ if (this.desktopModal && !this.isBibFullscreen) {
6164
+ this._setPageInert();
6165
+ } else {
6166
+ this._clearPageInert();
6167
+ }
6168
+ }
6169
+
6170
+ // Handle desktopModal toggled while the dropdown is already open.
6171
+ // Re-initialize focus trapping and page inert state to match the new mode.
6172
+ if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
6173
+ this.updateFocusTrap();
6174
+ if (this.desktopModal) {
6175
+ this._setPageInert();
6176
+ } else {
6177
+ this._clearPageInert();
6178
+ }
6135
6179
  }
6136
6180
  }
6137
6181
 
@@ -6141,8 +6185,14 @@ class AuroDropdown extends AuroElement$1 {
6141
6185
  * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
6142
6186
  */
6143
6187
  handleDropdownToggle(event) {
6144
- this.updateFocusTrap();
6145
6188
  this.isPopoverVisible = event.detail.expanded;
6189
+
6190
+ // Tear down FocusTrap when closing. Creation happens in updated()
6191
+ // after the dialog is open so getFocusableElements can find content.
6192
+ if (!this.isPopoverVisible) {
6193
+ this.updateFocusTrap();
6194
+ }
6195
+
6146
6196
  const eventType = event.detail.eventType || "unknown";
6147
6197
  if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
6148
6198
  this.trigger.focus();
@@ -6241,19 +6291,220 @@ class AuroDropdown extends AuroElement$1 {
6241
6291
  * @private
6242
6292
  */
6243
6293
  updateFocusTrap() {
6294
+ // Always clean up existing handlers/traps before setting up new ones
6295
+ // to prevent duplicate listeners on repeated calls.
6296
+ if (this._bibTabHandler) {
6297
+ this.removeEventListener('keydown', this._bibTabHandler);
6298
+ this._bibTabHandler = undefined;
6299
+ }
6300
+
6301
+ if (this.focusTrap) {
6302
+ this.focusTrap.disconnect();
6303
+ this.focusTrap = undefined;
6304
+ }
6305
+
6306
+ // Restore the user-set noHideOnThisFocusLoss value, if we overrode it.
6307
+ if (this._noHideOverridden) {
6308
+ this.noHideOnThisFocusLoss = this._priorNoHide;
6309
+ this._noHideOverridden = false;
6310
+ this._priorNoHide = undefined;
6311
+ }
6312
+
6244
6313
  if (this.isPopoverVisible) {
6245
6314
  if (!this.isBibFullscreen) {
6246
- // Desktop: show() doesn't trap focus, so use FocusTrap
6247
- this.focusTrap = new FocusTrap(this.bibContent);
6248
- this.focusTrap.focusFirstElement();
6315
+ if (this.desktopModal) {
6316
+ // The floater's focus-loss check uses :focus-within, which does not
6317
+ // match the host when focus is on a slotted element projected through
6318
+ // multiple shadow roots. Without this override, focusing a button
6319
+ // inside the bib would be misread as focus leaving the dropdown and
6320
+ // close the bib immediately. desktopModal traps focus inside the
6321
+ // bib and inerts siblings, so suppressing focus-loss dismissal here
6322
+ // is safe — Escape and outside-click still close the bib.
6323
+ this._priorNoHide = this.noHideOnThisFocusLoss;
6324
+ this._noHideOverridden = true;
6325
+ this.noHideOnThisFocusLoss = true;
6326
+
6327
+ // Desktop modal: trap focus only within the bib content.
6328
+ // Can't use FocusTrap on the bib element because keydown events
6329
+ // from slotted content bubble through the dropdown host (light DOM),
6330
+ // not through the bib (shadow projection target). Using FocusTrap
6331
+ // on the dropdown would include the trigger in the tab cycle.
6332
+ // Instead, listen for Tab on the dropdown and manually wrap focus
6333
+ // within the bib's focusable elements.
6334
+ this._bibTabHandler = (event) => {
6335
+ if (event.key !== 'Tab') {
6336
+ return;
6337
+ }
6338
+
6339
+ // Collect focusable elements from the bib content.
6340
+ const focusables = getFocusableElements(this.bibContent);
6341
+
6342
+ // Fallback: try from slotted content directly
6343
+ if (!focusables.length) {
6344
+ const slot = this.shadowRoot.querySelector('.slotContent slot');
6345
+ const assignedNodes = slot.assignedNodes({ flatten: true });
6346
+
6347
+ for (const node of assignedNodes) {
6348
+ if (node.nodeType === Node.ELEMENT_NODE) {
6349
+ focusables.push(...getFocusableElements(node));
6350
+ }
6351
+ }
6352
+ }
6353
+
6354
+ if (!focusables.length) {
6355
+ return;
6356
+ }
6357
+
6358
+ event.preventDefault();
6359
+
6360
+ const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
6361
+
6362
+ // Walk the active element chain through shadow roots
6363
+ const actives = this._getActiveElements();
6364
+
6365
+ let idx = focusables.findIndex((el) => actives.includes(el));
6366
+
6367
+ if (idx === -1) { // eslint-disable-line no-magic-numbers
6368
+ // Focus is not on a known element — move to first/last
6369
+ idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
6370
+ }
6371
+
6372
+ // Try each element in order, skipping any that can't receive focus
6373
+ // (e.g. hidden elements, elements in collapsed sections)
6374
+ for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
6375
+ let nextIdx = idx + direction;
6376
+
6377
+ // Wrap around
6378
+ if (nextIdx < 0) {
6379
+ nextIdx = focusables.length - 1;
6380
+ } else if (nextIdx >= focusables.length) {
6381
+ nextIdx = 0;
6382
+ }
6383
+
6384
+ focusables[nextIdx].focus();
6385
+
6386
+ // Verify focus actually moved to the target
6387
+ const newActives = this._getActiveElements();
6388
+
6389
+ if (newActives.includes(focusables[nextIdx])) {
6390
+ return;
6391
+ }
6392
+
6393
+ // Focus didn't stick — skip this element and try the next
6394
+ idx = nextIdx;
6395
+ }
6396
+ };
6397
+ this.addEventListener('keydown', this._bibTabHandler);
6398
+
6399
+ // Move initial focus into the bib content, matching FocusTrap behavior
6400
+ requestAnimationFrame(() => {
6401
+ const focusables = getFocusableElements(this.bibContent);
6402
+ if (focusables.length) {
6403
+ focusables[0].focus();
6404
+ }
6405
+ });
6406
+ } else {
6407
+ // Normal desktop: use FocusTrap on the bib element.
6408
+ // Defer focusFirstElement to the next frame because the popover
6409
+ // is positioned asynchronously by Floating UI — calling focus()
6410
+ // synchronously here would target elements with zero dimensions
6411
+ // and the focus call would be silently ignored.
6412
+ this.focusTrap = new FocusTrap(this.bibContent);
6413
+ requestAnimationFrame(() => {
6414
+ if (this.focusTrap) {
6415
+ this.focusTrap.focusFirstElement();
6416
+ }
6417
+ });
6418
+ }
6249
6419
  }
6250
6420
  // Fullscreen: showModal() provides native focus trapping
6421
+ }
6422
+ }
6423
+
6424
+ /**
6425
+ * Returns the chain of active (focused) elements through shadow roots.
6426
+ * @private
6427
+ * @returns {Array<HTMLElement>}
6428
+ */
6429
+ _getActiveElements() {
6430
+ let { activeElement } = document;
6431
+ const actives = [activeElement];
6432
+
6433
+ while (activeElement?.shadowRoot?.activeElement) {
6434
+ activeElement = activeElement.shadowRoot.activeElement;
6435
+ actives.push(activeElement);
6436
+ }
6437
+
6438
+ return actives;
6439
+ }
6440
+
6441
+ /**
6442
+ * Sets `inert` on sibling elements of the dropdown's top-level host
6443
+ * so that content outside the dropdown is not interactive while the modal is open.
6444
+ * Walks up through shadow DOM boundaries to find the outermost host element
6445
+ * in the light DOM, then sets `inert` on siblings at each ancestor level
6446
+ * to ensure all page content outside the host subtree is inert.
6447
+ * @private
6448
+ */
6449
+ _setPageInert() {
6450
+ if (this._inertSiblings) {
6251
6451
  return;
6252
6452
  }
6253
6453
 
6254
- if (this.focusTrap) {
6255
- this.focusTrap.disconnect();
6256
- this.focusTrap = undefined;
6454
+ this._inertSiblings = [];
6455
+
6456
+ // Walk up through shadow DOM boundaries to find the topmost host
6457
+ // element in the light DOM. For example, if this dropdown is inside
6458
+ // auro-datepicker's shadow DOM, we walk up to the datepicker element
6459
+ // so we set inert on its siblings — not on the datepicker itself.
6460
+ let host = this;
6461
+ while (host.getRootNode() instanceof ShadowRoot) {
6462
+ host = host.getRootNode().host;
6463
+ }
6464
+
6465
+ // Walk up the ancestor chain, inerting siblings at each level
6466
+ // to ensure the entire page outside the host subtree is inert.
6467
+ // Uses a reference counter (data-auro-inert-count) so multiple
6468
+ // simultaneous modal dropdowns share inert state safely.
6469
+ let current = host;
6470
+ while (current.parentElement) {
6471
+ const parent = current.parentElement;
6472
+ for (const sibling of parent.children) {
6473
+ if (sibling !== current) {
6474
+ const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
6475
+ if (count === 0) {
6476
+ sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
6477
+ }
6478
+ sibling.dataset.auroInertCount = String(count + 1);
6479
+ sibling.inert = true;
6480
+ this._inertSiblings.push(sibling);
6481
+ }
6482
+ }
6483
+ current = parent;
6484
+ }
6485
+ }
6486
+
6487
+ /**
6488
+ * Restores `inert` state on siblings that were tracked by `_setPageInert`.
6489
+ * Uses reference counting so inert is only cleared when the last modal
6490
+ * dropdown releases a given element. Preserves the original inert state
6491
+ * so externally-inerted elements are not inadvertently re-enabled.
6492
+ * @private
6493
+ */
6494
+ _clearPageInert() {
6495
+ if (this._inertSiblings) {
6496
+ for (const sibling of this._inertSiblings) {
6497
+ const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
6498
+ if (count <= 0) {
6499
+ const wasInert = sibling.dataset.auroInertWas === 'true';
6500
+ delete sibling.dataset.auroInertCount;
6501
+ delete sibling.dataset.auroInertWas;
6502
+ sibling.inert = wasInert;
6503
+ } else {
6504
+ sibling.dataset.auroInertCount = String(count);
6505
+ }
6506
+ }
6507
+ this._inertSiblings = undefined;
6257
6508
  }
6258
6509
  }
6259
6510
 
@@ -6492,6 +6743,7 @@ class AuroDropdown extends AuroElement$1 {
6492
6743
  shape="${this.shape}"
6493
6744
  ?data-show="${this.isPopoverVisible}"
6494
6745
  ?isfullscreen="${this.isBibFullscreen}"
6746
+ ?desktopmodal="${this.desktopModal}"
6495
6747
  .dialogLabel="${this.bibDialogLabel}"
6496
6748
  ${n$1(this.bibElement)}
6497
6749
  >
@@ -6859,6 +7111,14 @@ class AuroBibtemplate extends i$2 {
6859
7111
  large: {
6860
7112
  type: Boolean,
6861
7113
  reflect: true
7114
+ },
7115
+
7116
+ /**
7117
+ * If declared, the footer slot will be rendered even when not in fullscreen mode.
7118
+ */
7119
+ showFooter: {
7120
+ type: Boolean,
7121
+ reflect: true
6862
7122
  }
6863
7123
  };
6864
7124
  }
@@ -6961,7 +7221,7 @@ class AuroBibtemplate extends i$2 {
6961
7221
  <slot></slot>
6962
7222
  </div>
6963
7223
 
6964
- ${this.isFullscreen ? u$5`
7224
+ ${this.isFullscreen || this.showFooter ? u$5`
6965
7225
  <div id="footerContainer">
6966
7226
  <slot name="footer"></slot>
6967
7227
  </div>` : null}