@aurodesignsystem-dev/auro-formkit 0.0.0-pr1489.13 → 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 +1 -1
- 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 +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- 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 +13 -13
- package/components/form/demo/getting-started.min.js +13 -13
- package/components/form/demo/index.min.js +13 -13
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +13 -13
- 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 +1444 -1444
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-input.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-input.md","readme.md"]
|
|
@@ -6738,7 +6738,7 @@ class AuroHelpText extends LitElement {
|
|
|
6738
6738
|
}
|
|
6739
6739
|
}
|
|
6740
6740
|
|
|
6741
|
-
var formkitVersion = '
|
|
6741
|
+
var formkitVersion = '202606051806';
|
|
6742
6742
|
|
|
6743
6743
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6744
6744
|
// See LICENSE in the project root for license information.
|
|
@@ -6738,7 +6738,7 @@ class AuroHelpText extends LitElement {
|
|
|
6738
6738
|
}
|
|
6739
6739
|
}
|
|
6740
6740
|
|
|
6741
|
-
var formkitVersion = '
|
|
6741
|
+
var formkitVersion = '202606051806';
|
|
6742
6742
|
|
|
6743
6743
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6744
6744
|
// See LICENSE in the project root for license information.
|
|
@@ -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-menu | 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-menu'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,166 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native listbox</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-menu></code> web component cannot be used, a native HTML <code><ul role="listbox"></code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-menu</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>.menu</code> class, so the styling must be authored manually using Auro design tokens. For very simple single-select use cases, a native <code><select></code> may also be an acceptable fallback, but it does not match the menu/listbox semantics as closely as a styled <code><ul></code>.</p>
|
|
3
|
+
<auro-header level="2">Styling a native listbox</auro-header>
|
|
4
|
+
<p>A native <code><ul></code> can be given <code>role="listbox"</code> (or <code>role="menu"</code>) 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 spacing, hover, focus, and selected-state colors used by <code>auro-menu</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.menu {
|
|
8
|
+
list-style: none;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: var(--ds-size-100, 0.5rem) 0;
|
|
11
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
12
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
13
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.menu__option {
|
|
17
|
+
padding: var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);
|
|
18
|
+
color: var(--ds-color-text-primary-default, #1d1f24);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
user-select: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.menu__option:hover {
|
|
24
|
+
background-color: var(--ds-color-container-ui-hover-default, #f0f5ff);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.menu__option:focus-visible {
|
|
28
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
29
|
+
outline-offset: -2px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.menu__option[aria-selected="true"] {
|
|
33
|
+
background-color: var(--ds-color-container-ui-selected-default, #01426a);
|
|
34
|
+
color: var(--ds-color-text-inverse-default, #ffffff);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.menu__option[aria-disabled="true"] {
|
|
38
|
+
cursor: not-allowed;
|
|
39
|
+
opacity: 0.5;
|
|
40
|
+
}</code></pre>
|
|
41
|
+
<auro-header level="3">Basic listbox</auro-header>
|
|
42
|
+
<p>Apply the <code>.menu</code> class to a <code><ul></code> with <code>role="listbox"</code> and give each <code><li></code> the <code>option</code> role:</p>
|
|
43
|
+
<pre><code><ul class="menu" role="listbox" aria-label="Cabin class">
|
|
44
|
+
<li class="menu__option" role="option" tabindex="0" aria-selected="true">Economy</li>
|
|
45
|
+
<li class="menu__option" role="option" tabindex="-1" aria-selected="false">Premium</li>
|
|
46
|
+
<li class="menu__option" role="option" tabindex="-1" aria-selected="false">First</li>
|
|
47
|
+
</ul></code></pre>
|
|
48
|
+
<auro-header level="3">Listbox with a disabled option</auro-header>
|
|
49
|
+
<p>Use <code>aria-disabled="true"</code> on individual options that should not be selectable:</p>
|
|
50
|
+
<pre><code><ul class="menu" role="listbox" aria-label="Seat">
|
|
51
|
+
<li class="menu__option" role="option" tabindex="0" aria-selected="false">12A</li>
|
|
52
|
+
<li class="menu__option" role="option" tabindex="-1" aria-selected="false" aria-disabled="true">12B</li>
|
|
53
|
+
<li class="menu__option" role="option" tabindex="-1" aria-selected="false">12C</li>
|
|
54
|
+
</ul></code></pre>
|
|
55
|
+
<auro-header level="2">What you lose without auro-menu</auro-header>
|
|
56
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-menu</code>, the following functionality built into the <code>auro-menu</code> and <code>auro-menuoption</code> web components is <strong>not available</strong> when using plain HTML:</p>
|
|
57
|
+
<auro-header level="3">Roving tabindex</auro-header>
|
|
58
|
+
<p><code>auro-menu</code> manages a roving <code>tabindex</code> so that only the currently active option is in the tab order, and focus moves between options without leaving the menu. With plain HTML, you must implement the roving-tabindex pattern yourself by maintaining the <code>tabindex="0"</code>/<code>tabindex="-1"</code> state across all options on every focus and key event.</p>
|
|
59
|
+
<auro-header level="3">Arrow-key navigation</auro-header>
|
|
60
|
+
<p><code>auro-menu</code> handles <code>ArrowUp</code>, <code>ArrowDown</code>, <code>Home</code>, <code>End</code>, <code>Enter</code>, and <code>Space</code> to move the highlight and commit selections. Native <code><ul></code> elements have no built-in keyboard model — you must wire up <code>keydown</code> listeners, track the highlighted index, and prevent default browser scrolling on the arrow keys yourself.</p>
|
|
61
|
+
<auro-header level="3">Type-ahead search</auro-header>
|
|
62
|
+
<p><code>auro-menu</code> supports a <code>matchword</code> attribute that highlights matched substrings within option labels, and the listbox supports type-ahead focus jumping. Plain HTML provides neither — both behaviors must be implemented manually with string matching and DOM manipulation.</p>
|
|
63
|
+
<auro-header level="3">Nested submenu support</auro-header>
|
|
64
|
+
<p><code>auro-menu</code> detects nested <code>auro-menu</code> elements, applies the correct <code>role="group"</code>, computes indentation per level, and propagates the shared menu service down the tree. With plain HTML, you must apply nested ARIA roles and indentation manually, and there is no built-in coordination of focus or selection between parent and child lists.</p>
|
|
65
|
+
<auro-header level="3">Selection state coordination</auro-header>
|
|
66
|
+
<p><code>auro-menu</code> coordinates the selected option(s) through an internal <code>MenuService</code> that keeps <code>optionSelected</code>, <code>value</code>, and each option's <code>aria-selected</code> state in sync. With native HTML, you must update <code>aria-selected</code> on every option yourself on each change and manage your own source of truth for the selected value.</p>
|
|
67
|
+
<auro-header level="3">ARIA roles and live announcements</auro-header>
|
|
68
|
+
<p><code>auro-menu</code> automatically applies <code>role="listbox"</code>, <code>aria-multiselectable</code>, <code>aria-busy</code> during loading, and per-option <code>role="option"</code> with <code>aria-selected</code> and <code>aria-disabled</code>. Plain HTML requires you to author every one of these attributes by hand and keep them in sync with state — and to add any additional live-region announcements yourself.</p>
|
|
69
|
+
<auro-header level="3">Value emission and events</auro-header>
|
|
70
|
+
<p><code>auro-menu</code> dispatches a structured set of events — <code>auroMenu-selectedOption</code>, <code>auroMenu-activatedOption</code>, <code>auroMenu-optionsChange</code>, <code>auroMenu-selectValueReset</code>, <code>auroMenu-selectValueFailure</code>, <code>auroMenu-deselectPrevented</code>, and <code>auroMenu-loadingChange</code> — so parent components can react to highlight, selection, and lifecycle changes. Native listboxes emit no equivalent events; you must dispatch your own.</p>
|
|
71
|
+
<auro-header level="3">Multi-select with array value</auro-header>
|
|
72
|
+
<p><code>auro-menu</code> supports <code>multiselect</code>, exposing the selection as a JSON-stringified array via <code>value</code> and as an array of elements via <code>optionSelected</code>. With plain HTML, you must track multiple selections yourself, manage the <code>aria-multiselectable</code> attribute, and serialize the result manually.</p>
|
|
73
|
+
<auro-header level="3">Allow-deselect behavior</auro-header>
|
|
74
|
+
<p><code>auro-menu</code> supports an <code>allowDeselect</code> attribute that lets a user click an already-selected option to clear it in single-select mode, with a <code>auroMenu-deselectPrevented</code> event when the operation is blocked. Native listboxes do not have a deselect concept; you must implement and gate the behavior yourself.</p>
|
|
75
|
+
<auro-header level="3">Select-by-value and reset</auro-header>
|
|
76
|
+
<p><code>auro-menu</code> exposes a <code>value</code> attribute that drives selection programmatically (including the <code>selectAllMatchingOptions</code> option for multi-select) and a single <code>reset()</code> method that clears all selection and validation state. With plain HTML, you must walk the list to find a matching option, set its state, and write your own reset routine.</p>
|
|
77
|
+
<auro-header level="3">Loading state</auro-header>
|
|
78
|
+
<p><code>auro-menu</code> renders a built-in loading placeholder via <code>loadingIcon</code> and <code>loadingText</code> slots, sets <code>aria-busy</code>, and emits <code>auroMenu-loadingChange</code> when the loading attribute toggles. With plain HTML, you must render a placeholder, manage <code>aria-busy</code>, and signal loading transitions yourself.</p>
|
|
79
|
+
<auro-header level="3">Shape and size variants</auro-header>
|
|
80
|
+
<p><code>auro-menu</code> supports <code>shape</code> (<code>box</code>, <code>round</code>) and <code>size</code> (<code>sm</code>, <code>md</code>) variants that adjust spacing and corner radii consistently across the menu and its options. A CSS-only listbox must reauthor each variant by hand.</p>
|
|
81
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
82
|
+
<p><code>auro-menu</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 listbox 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>
|
|
83
|
+
<auro-header level="2">Summary</auro-header>
|
|
84
|
+
<table>
|
|
85
|
+
<thead>
|
|
86
|
+
<tr>
|
|
87
|
+
<th>Feature</th>
|
|
88
|
+
<th>Native <code><ul role="listbox"></code> with Auro tokens</th>
|
|
89
|
+
<th><code>auro-menu</code></th>
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
<tr>
|
|
94
|
+
<td>Design-system-aligned styling</td>
|
|
95
|
+
<td>Manual (author-written CSS)</td>
|
|
96
|
+
<td>Built-in</td>
|
|
97
|
+
</tr>
|
|
98
|
+
<tr>
|
|
99
|
+
<td>Roving tabindex</td>
|
|
100
|
+
<td>Manual</td>
|
|
101
|
+
<td>Built-in</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr>
|
|
104
|
+
<td>Arrow-key navigation</td>
|
|
105
|
+
<td>Manual <code>keydown</code> handling</td>
|
|
106
|
+
<td>Built-in</td>
|
|
107
|
+
</tr>
|
|
108
|
+
<tr>
|
|
109
|
+
<td>Type-ahead and <code>matchword</code> highlighting</td>
|
|
110
|
+
<td>Not supported</td>
|
|
111
|
+
<td>Built-in via <code>matchword</code></td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td>Nested submenus</td>
|
|
115
|
+
<td>Manual roles and indentation</td>
|
|
116
|
+
<td>Automatic level detection</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td>Selection state coordination</td>
|
|
120
|
+
<td>Manual <code>aria-selected</code> sync</td>
|
|
121
|
+
<td>Centralized via menu service</td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>ARIA roles and <code>aria-busy</code></td>
|
|
125
|
+
<td>Manual</td>
|
|
126
|
+
<td>Automatic</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Selection and lifecycle events</td>
|
|
130
|
+
<td>Not supported</td>
|
|
131
|
+
<td><code>auroMenu-*</code> event suite</td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td>Multi-select with array value</td>
|
|
135
|
+
<td>Manual aggregation</td>
|
|
136
|
+
<td><code>multiselect</code> + <code>value</code></td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td>Allow-deselect behavior</td>
|
|
140
|
+
<td>Manual</td>
|
|
141
|
+
<td><code>allowDeselect</code> attribute</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>Select-by-value and reset</td>
|
|
145
|
+
<td>Manual</td>
|
|
146
|
+
<td><code>value</code> attribute + <code>reset()</code></td>
|
|
147
|
+
</tr>
|
|
148
|
+
<tr>
|
|
149
|
+
<td>Loading state</td>
|
|
150
|
+
<td>Manual</td>
|
|
151
|
+
<td>Built-in via <code>loading</code></td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td>Shape and size variants</td>
|
|
155
|
+
<td>Manual CSS</td>
|
|
156
|
+
<td><code>shape</code> / <code>size</code> attributes</td>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td>Multi-brand theming</td>
|
|
160
|
+
<td>Static (import-time tokens)</td>
|
|
161
|
+
<td>Full (design tokens + component logic)</td>
|
|
162
|
+
</tr>
|
|
163
|
+
</tbody>
|
|
164
|
+
</table>
|
|
165
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
166
|
+
<p>Use <code>auro-menu</code> and <code>auro-menuoption</code> whenever possible. Fall back to a CSS-styled native listbox 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 roving focus, keyboard navigation, selection coordination, and the full set of ARIA semantics yourself.</p>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-menu.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-menu.md","readme.md"]
|
|
@@ -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>
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native radio</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-radio></code> web component cannot be used, a native HTML <code><input type="radio"></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><input type="radio"></code> element and pair it with a <code><label></code>:</p>
|
|
39
|
+
<pre><code><label>
|
|
40
|
+
<input type="radio" class="radio" name="subscribe" value="yes" />
|
|
41
|
+
Subscribe to updates
|
|
42
|
+
</label></code></pre>
|
|
43
|
+
<auro-header level="3">Group of radios</auro-header>
|
|
44
|
+
<p>Use a <code><fieldset></code> and <code><legend></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><fieldset>
|
|
46
|
+
<legend>Choose a delivery method</legend>
|
|
47
|
+
<label><input type="radio" class="radio" name="delivery" value="email" /> Email</label>
|
|
48
|
+
<label><input type="radio" class="radio" name="delivery" value="sms" /> SMS</label>
|
|
49
|
+
<label><input type="radio" class="radio" name="delivery" value="push" /> Push notification</label>
|
|
50
|
+
</fieldset></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><label for></code> wiring or wrapping <code><label></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><fieldset disabled></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><input type="radio"></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><fieldset></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>
|
|
@@ -1758,7 +1758,7 @@ class AuroHelpText extends i$2 {
|
|
|
1758
1758
|
}
|
|
1759
1759
|
}
|
|
1760
1760
|
|
|
1761
|
-
var formkitVersion = '
|
|
1761
|
+
var formkitVersion = '202606051806';
|
|
1762
1762
|
|
|
1763
1763
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1764
1764
|
// See LICENSE in the project root for license information.
|
|
@@ -1758,7 +1758,7 @@ class AuroHelpText extends i$2 {
|
|
|
1758
1758
|
}
|
|
1759
1759
|
}
|
|
1760
1760
|
|
|
1761
|
-
var formkitVersion = '
|
|
1761
|
+
var formkitVersion = '202606051806';
|
|
1762
1762
|
|
|
1763
1763
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1764
1764
|
// See LICENSE in the project root for license information.
|
|
@@ -1758,7 +1758,7 @@ class AuroHelpText extends i$2 {
|
|
|
1758
1758
|
}
|
|
1759
1759
|
}
|
|
1760
1760
|
|
|
1761
|
-
var formkitVersion = '
|
|
1761
|
+
var formkitVersion = '202606051806';
|
|
1762
1762
|
|
|
1763
1763
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1764
1764
|
// See LICENSE in the project root for license information.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-radio.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-radio.md","readme.md"]
|
|
@@ -1697,7 +1697,7 @@ class AuroHelpText extends LitElement {
|
|
|
1697
1697
|
}
|
|
1698
1698
|
}
|
|
1699
1699
|
|
|
1700
|
-
var formkitVersion = '
|
|
1700
|
+
var formkitVersion = '202606051806';
|
|
1701
1701
|
|
|
1702
1702
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1703
1703
|
// See LICENSE in the project root for license information.
|
|
@@ -1697,7 +1697,7 @@ class AuroHelpText extends LitElement {
|
|
|
1697
1697
|
}
|
|
1698
1698
|
}
|
|
1699
1699
|
|
|
1700
|
-
var formkitVersion = '
|
|
1700
|
+
var formkitVersion = '202606051806';
|
|
1701
1701
|
|
|
1702
1702
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1703
1703
|
// See LICENSE in the project root for license information.
|
|
@@ -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-select | 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-select'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>
|