@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.4 → 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 +2736 -398
  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 +2650 -399
  59. package/components/datepicker/dist/registered.js +2650 -399
  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 +11085 -8074
  85. package/components/form/demo/getting-started.min.js +11085 -8074
  86. package/components/form/demo/index.min.js +11085 -8074
  87. package/components/form/demo/pages.json +1 -1
  88. package/components/form/demo/registerDemoDeps.min.js +11084 -8073
  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 +3051 -2553
  152. package/package.json +8 -8
  153. package/components/menu/dist/auro-menu.context.d.ts +0 -238
package/components/radio/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-radio | 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-radio'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/radio/demo/css-only.md ADDED
@@ -0,0 +1,151 @@
1
+ <auro-header level="1">CSS only with native radio</auro-header>
2
+ <p>For situations where the <code>&lt;auro-radio&gt;</code> web component cannot be used, a native HTML <code>&lt;input type="radio"&gt;</code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-radio</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>.radio</code> class, so the styling must be authored manually using Auro design tokens.</p>
3
+ <auro-header level="2">Styling a native radio</auro-header>
4
+ <p>The native radio can be reset and 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 size, border, and selected-state colors used by <code>auro-radio</code>.</p>
5
+ <pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
6
+ ​
7
+ .radio {
8
+ appearance: none;
9
+ -webkit-appearance: none;
10
+ width: var(--ds-size-300, 1.5rem);
11
+ height: var(--ds-size-300, 1.5rem);
12
+ border: 1px solid var(--ds-color-border-ui-default, #6e767f);
13
+ border-radius: 50%;
14
+ background-color: var(--ds-color-container-primary-default, #ffffff);
15
+ cursor: pointer;
16
+ vertical-align: middle;
17
+ }
18
+ ​
19
+ .radio:checked {
20
+ background-color: var(--ds-color-container-ui-selected-default, #01426a);
21
+ border-color: var(--ds-color-border-ui-selected-default, #01426a);
22
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='white'/%3E%3C/svg%3E");
23
+ background-repeat: no-repeat;
24
+ background-position: center;
25
+ background-size: 100%;
26
+ }
27
+ ​
28
+ .radio:focus-visible {
29
+ outline: 2px solid var(--ds-color-border-active-default, #01426a);
30
+ outline-offset: 2px;
31
+ }
32
+ ​
33
+ .radio:disabled {
34
+ cursor: not-allowed;
35
+ opacity: 0.5;
36
+ }</code></pre>
37
+ <auro-header level="3">Basic radio</auro-header>
38
+ <p>Apply the <code>.radio</code> class to a native <code>&lt;input type="radio"&gt;</code> element and pair it with a <code>&lt;label&gt;</code>:</p>
39
+ <pre><code>&lt;label&gt;
40
+ &lt;input type="radio" class="radio" name="subscribe" value="yes" /&gt;
41
+ Subscribe to updates
42
+ &lt;/label&gt;</code></pre>
43
+ <auro-header level="3">Group of radios</auro-header>
44
+ <p>Use a <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> to give the group an accessible name. All inputs in the group must share the same <code>name</code> attribute so the browser enforces single-selection and enables arrow-key navigation between them:</p>
45
+ <pre><code>&lt;fieldset&gt;
46
+ &lt;legend&gt;Choose a delivery method&lt;/legend&gt;
47
+ &lt;label&gt;&lt;input type="radio" class="radio" name="delivery" value="email" /&gt; Email&lt;/label&gt;
48
+ &lt;label&gt;&lt;input type="radio" class="radio" name="delivery" value="sms" /&gt; SMS&lt;/label&gt;
49
+ &lt;label&gt;&lt;input type="radio" class="radio" name="delivery" value="push" /&gt; Push notification&lt;/label&gt;
50
+ &lt;/fieldset&gt;</code></pre>
51
+ <auro-header level="2">What you lose without auro-radio</auro-header>
52
+ <p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-radio</code>, the following functionality built into the <code>auro-radio</code> and <code>auro-radio-group</code> web components is <strong>not available</strong> when using plain HTML. Note that native radios sharing a <code>name</code> attribute do provide arrow-key navigation and roving tab order for free — that behavior is one thing you do <em>not</em> have to reimplement.</p>
53
+ <auro-header level="3">Group-level validation</auro-header>
54
+ <p><code>auro-radio-group</code> supports a <code>required</code> attribute that validates "one radio in the group must be selected." Native HTML <code>required</code> on a radio input enforces the same constraint, but the validation message surfaces on a single input rather than being coordinated across the group. With plain HTML, you must write custom JavaScript to manage error display at the group level.</p>
55
+ <auro-header level="3">Custom validation messages</auro-header>
56
+ <p><code>auro-radio-group</code> exposes <code>setCustomValidity</code> and <code>setCustomValidityValueMissing</code> for fully customizable error messages per validity state. Native radios surface browser-controlled validation messages that cannot be customized beyond <code>setCustomValidity()</code> on the individual input.</p>
57
+ <auro-header level="3">Touched-state tracking</auro-header>
58
+ <p><code>auro-radio-group</code> tracks a <code>touched</code> state so validation errors only appear after the user has interacted with the group. Native radios have no built-in touched concept — you must implement focus/blur tracking yourself to avoid showing errors on initial render.</p>
59
+ <auro-header level="3">Coordinated value property</auro-header>
60
+ <p><code>auro-radio-group</code> exposes a single <code>value</code> property that reflects the selected radio's value and dispatches a single change event when that value changes. With native HTML, you must query each input individually to determine which one is checked, and listen for change events on each input separately.</p>
61
+ <auro-header level="3">Automatic label binding</auro-header>
62
+ <p><code>auro-radio</code> automatically associates slot content as the accessible label, eliminating the need for <code>&lt;label for&gt;</code> wiring or wrapping <code>&lt;label&gt;</code> elements. With native HTML, you must manage <code>id</code> and <code>for</code> attributes manually to keep labels in sync with inputs.</p>
63
+ <auro-header level="3">Disabled propagation</auro-header>
64
+ <p><code>auro-radio-group</code> propagates a single <code>disabled</code> attribute to all child radios. With native HTML, you must apply <code>disabled</code> to each input individually or wrap them in a <code>&lt;fieldset disabled&gt;</code>, the latter of which has additional side effects on nested form controls.</p>
65
+ <auro-header level="3">Form integration events</auro-header>
66
+ <p><code>auro-radio-group</code> dispatches <code>auroFormElement-validated</code> events so parent <code>auro-form</code> elements can coordinate validation across all child fields. Native radios participate in form submission but do not emit the structured validation events that the Auro form system expects.</p>
67
+ <auro-header level="3">Horizontal layout</auro-header>
68
+ <p><code>auro-radio-group</code> supports a <code>horizontal</code> attribute for compact groups of up to three items, with spacing and alignment handled by the component. With native HTML, you must author the layout CSS yourself.</p>
69
+ <auro-header level="3">Reset behavior</auro-header>
70
+ <p><code>auro-radio-group</code> provides a single <code>reset()</code> method that clears the selection and resets validation state in one call. With native HTML, you must iterate each input to uncheck it and separately clear any custom validation state you are tracking.</p>
71
+ <auro-header level="3">Multi-brand theming</auro-header>
72
+ <p><code>auro-radio</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 radio 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>
73
+ <auro-header level="2">Summary</auro-header>
74
+ <table>
75
+ <thead>
76
+ <tr>
77
+ <th>Feature</th>
78
+ <th>Native <code>&lt;input type="radio"&gt;</code> with Auro tokens</th>
79
+ <th><code>auro-radio</code></th>
80
+ </tr>
81
+ </thead>
82
+ <tbody>
83
+ <tr>
84
+ <td>Design-system-aligned styling</td>
85
+ <td>Manual (author-written CSS)</td>
86
+ <td>Built-in</td>
87
+ </tr>
88
+ <tr>
89
+ <td>Dark background support</td>
90
+ <td>Manual</td>
91
+ <td>Yes (<code>appearance="inverse"</code>)</td>
92
+ </tr>
93
+ <tr>
94
+ <td>Arrow-key navigation within group</td>
95
+ <td>Built-in (shared <code>name</code>)</td>
96
+ <td>Built-in</td>
97
+ </tr>
98
+ <tr>
99
+ <td>Group-level <code>required</code> validation</td>
100
+ <td>Per-input only</td>
101
+ <td>Built-in via <code>auro-radio-group</code></td>
102
+ </tr>
103
+ <tr>
104
+ <td>Custom validation messages</td>
105
+ <td>Limited to <code>setCustomValidity()</code></td>
106
+ <td>Per-constraint custom messages</td>
107
+ </tr>
108
+ <tr>
109
+ <td>Touched-state tracking</td>
110
+ <td>Manual</td>
111
+ <td>Automatic</td>
112
+ </tr>
113
+ <tr>
114
+ <td>Coordinated value property</td>
115
+ <td>Manual aggregation</td>
116
+ <td>Single <code>value</code> property</td>
117
+ </tr>
118
+ <tr>
119
+ <td>Automatic label binding</td>
120
+ <td>Manual <code>id</code>/<code>for</code> wiring</td>
121
+ <td>Automatic via slot</td>
122
+ </tr>
123
+ <tr>
124
+ <td>Disabled propagation</td>
125
+ <td>Per-input or <code>&lt;fieldset&gt;</code></td>
126
+ <td>Single group attribute</td>
127
+ </tr>
128
+ <tr>
129
+ <td>Form validation events</td>
130
+ <td>Not supported</td>
131
+ <td><code>auroFormElement-validated</code></td>
132
+ </tr>
133
+ <tr>
134
+ <td>Horizontal layout</td>
135
+ <td>Manual CSS</td>
136
+ <td><code>horizontal</code> attribute</td>
137
+ </tr>
138
+ <tr>
139
+ <td>Reset group</td>
140
+ <td>Manual iteration</td>
141
+ <td>Single <code>reset()</code> call</td>
142
+ </tr>
143
+ <tr>
144
+ <td>Multi-brand theming</td>
145
+ <td>Static (import-time tokens)</td>
146
+ <td>Full (design tokens + component logic)</td>
147
+ </tr>
148
+ </tbody>
149
+ </table>
150
+ <auro-header level="2">Recommendation</auro-header>
151
+ <p>Use <code>auro-radio</code> and <code>auro-radio-group</code> whenever possible. Fall back to a CSS-styled native radio 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 group-level validation messaging, touched tracking, and coordinated value handling yourself.</p>