@aurodesignsystem-dev/auro-formkit 0.0.0-pr1489.12 → 0.0.0-pr1489.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/css-only.html +57 -0
- package/components/checkbox/demo/css-only.md +146 -0
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/pages.json +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/css-only.html +57 -0
- package/components/combobox/demo/css-only.md +209 -0
- package/components/combobox/demo/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/demo/pages.json +1 -1
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/css-only.html +57 -0
- package/components/counter/demo/css-only.md +184 -0
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/pages.json +1 -1
- package/components/counter/dist/index.js +441 -45
- package/components/counter/dist/registered.js +1 -1
- package/components/datepicker/demo/css-only.html +57 -0
- package/components/datepicker/demo/css-only.md +151 -0
- package/components/datepicker/demo/customize.min.js +13 -7
- package/components/datepicker/demo/index.min.js +13 -7
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/dist/index.js +13 -7
- package/components/datepicker/dist/registered.js +13 -7
- package/components/datepicker/dist/src/auro-calendar.d.ts +5 -0
- package/components/dropdown/demo/css-only.html +57 -0
- package/components/dropdown/demo/css-only.md +219 -0
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/pages.json +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/css-only.html +57 -0
- package/components/form/demo/css-only.md +156 -0
- package/components/form/demo/customize.min.js +864 -858
- package/components/form/demo/getting-started.min.js +864 -858
- package/components/form/demo/index.min.js +864 -858
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +859 -853
- package/components/input/demo/css-only.html +57 -0
- package/components/input/demo/css-only.md +199 -0
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/pages.json +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/css-only.html +57 -0
- package/components/menu/demo/css-only.md +166 -0
- package/components/menu/demo/pages.json +1 -1
- package/components/radio/demo/css-only.html +57 -0
- package/components/radio/demo/css-only.md +151 -0
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/pages.json +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/css-only.html +57 -0
- package/components/select/demo/css-only.md +203 -0
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/pages.json +1 -1
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1629 -1619
- package/package.json +1 -1
|
@@ -353,6 +353,11 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
353
353
|
/**
|
|
354
354
|
* Clears range preview classes from all cells.
|
|
355
355
|
* @private
|
|
356
|
+
* @param {Object} [options] - Optional settings.
|
|
357
|
+
* @param {boolean} [options.force=false] - When true, clears classes even
|
|
358
|
+
* when both dateFrom and dateTo are set. Used by month nav handlers
|
|
359
|
+
* since the subsequent re-render re-applies classMap-managed classes,
|
|
360
|
+
* while `lastHoveredDate` (not in classMap) would otherwise persist.
|
|
356
361
|
* @returns {void}
|
|
357
362
|
*/
|
|
358
363
|
private clearRangePreview;
|
|
@@ -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-dropdown | 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-dropdown'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,219 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native disclosure</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-dropdown></code> web component cannot be used, a native HTML <code><details></code>/<code><summary></code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-dropdown</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>.dropdown</code> class, so the styling must be authored manually using Auro design tokens.</p>
|
|
3
|
+
<auro-header level="2">Styling a native disclosure</auro-header>
|
|
4
|
+
<p>The native <code><details></code>/<code><summary></code> pair 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 trigger border, spacing, and panel colors used by <code>auro-dropdown</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.dropdown {
|
|
8
|
+
position: relative;
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.dropdown > summary {
|
|
13
|
+
list-style: none;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: var(--ds-size-100, 0.5rem);
|
|
18
|
+
padding: var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem);
|
|
19
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
20
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
21
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
22
|
+
color: var(--ds-color-text-primary-default, #1d1d1d);
|
|
23
|
+
font-family: var(--ds-font-family-default, sans-serif);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.dropdown > summary::-webkit-details-marker {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.dropdown > summary::after {
|
|
31
|
+
content: "";
|
|
32
|
+
width: var(--ds-size-150, 0.75rem);
|
|
33
|
+
height: var(--ds-size-150, 0.75rem);
|
|
34
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
35
|
+
background-repeat: no-repeat;
|
|
36
|
+
background-position: center;
|
|
37
|
+
transition: transform 150ms ease;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dropdown[open] > summary::after {
|
|
41
|
+
transform: rotate(180deg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dropdown > summary:focus-visible {
|
|
45
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
46
|
+
outline-offset: 2px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.dropdown-bib {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: calc(100% + var(--ds-size-50, 0.25rem));
|
|
52
|
+
left: 0;
|
|
53
|
+
z-index: 1;
|
|
54
|
+
min-width: 100%;
|
|
55
|
+
padding: var(--ds-size-100, 0.5rem);
|
|
56
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
57
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
58
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
59
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
60
|
+
}</code></pre>
|
|
61
|
+
<auro-header level="3">Basic disclosure</auro-header>
|
|
62
|
+
<p>Apply the <code>.dropdown</code> class to a <code><details></code> element with a <code><summary></code> trigger and a panel container:</p>
|
|
63
|
+
<pre><code><details class="dropdown">
|
|
64
|
+
<summary>More options</summary>
|
|
65
|
+
<div class="dropdown-bib">
|
|
66
|
+
<p>Panel content goes here.</p>
|
|
67
|
+
</div>
|
|
68
|
+
</details></code></pre>
|
|
69
|
+
<auro-header level="3">Disclosure with a list of actions</auro-header>
|
|
70
|
+
<p>The panel can hold any markup. For a menu-like list, author the items as a plain unordered list:</p>
|
|
71
|
+
<pre><code><details class="dropdown">
|
|
72
|
+
<summary>Account</summary>
|
|
73
|
+
<div class="dropdown-bib">
|
|
74
|
+
<ul>
|
|
75
|
+
<li><a href="/profile">Profile</a></li>
|
|
76
|
+
<li><a href="/settings">Settings</a></li>
|
|
77
|
+
<li><a href="/logout">Log out</a></li>
|
|
78
|
+
</ul>
|
|
79
|
+
</div>
|
|
80
|
+
</details></code></pre>
|
|
81
|
+
<auro-header level="2">What you lose without auro-dropdown</auro-header>
|
|
82
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-dropdown</code>, the following functionality built into the <code>auro-dropdown</code> web component is <strong>not available</strong> when using plain HTML:</p>
|
|
83
|
+
<auro-header level="3">Floating-UI positioning</auro-header>
|
|
84
|
+
<p><code>auro-dropdown</code> uses Floating UI to position the bib relative to the trigger and supports a <code>placement</code> attribute with twelve values (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, and their <code>-start</code>/<code>-end</code> variants). A native <code><details></code> panel is absolutely positioned by the author and does not adapt to alternate placements without additional CSS for each case.</p>
|
|
85
|
+
<auro-header level="3">Auto-placement and flip</auro-header>
|
|
86
|
+
<p><code>auro-dropdown</code> exposes <code>autoPlacement</code> and the inverse <code>noFlip</code> option so the bib can automatically pick the side of the trigger with the most available space and flip when it would otherwise be clipped by the viewport. A CSS-only panel stays where it is authored and will overflow the viewport when there is not enough room.</p>
|
|
87
|
+
<auro-header level="3">Shift to stay on-screen</auro-header>
|
|
88
|
+
<p><code>auro-dropdown</code> supports a <code>shift</code> attribute that nudges the bib along its axis so it remains fully visible inside the viewport. Native disclosures have no equivalent — a panel positioned with CSS that runs past the viewport edge is simply clipped or causes horizontal scroll.</p>
|
|
89
|
+
<auro-header level="3">Match-width and offset control</auro-header>
|
|
90
|
+
<p><code>auro-dropdown</code> exposes <code>matchWidth</code> to size the bib to the trigger and a numeric <code>offset</code> for the gap between trigger and bib. With native HTML, both must be implemented manually with CSS and, in the case of dynamic trigger widths, JavaScript measurement.</p>
|
|
91
|
+
<auro-header level="3">Mobile fullscreen behavior</auro-header>
|
|
92
|
+
<p><code>auro-dropdown</code> supports a <code>fullscreenBreakpoint</code> (defaulting to <code>sm</code>) that switches the bib into a fullscreen presentation on small viewports, and a <code>desktopModal</code> option for modal behavior on larger viewports. Native <code><details></code> has no responsive presentation — the panel renders the same way on every screen size.</p>
|
|
93
|
+
<auro-header level="3">Hover trigger</auro-header>
|
|
94
|
+
<p><code>auro-dropdown</code> supports a <code>hoverToggle</code> attribute that opens the bib on mouseover and closes it on mouseout. Native <code><details></code> only responds to click on the <code><summary></code>; hover-to-open requires custom JavaScript.</p>
|
|
95
|
+
<auro-header level="3">Focus management</auro-header>
|
|
96
|
+
<p><code>auro-dropdown</code> provides a <code>focus()</code> method that moves focus to the first focusable element inside the bib when it is open, or to the trigger when it is closed. It also supports <code>focusShow</code> to open the bib on trigger focus. Native <code><details></code> leaves focus on the <code><summary></code> after toggle and offers no built-in focus-into-panel behavior.</p>
|
|
97
|
+
<auro-header level="3">Click-outside and focus-loss dismissal</auro-header>
|
|
98
|
+
<p><code>auro-dropdown</code> closes the bib when the user clicks outside the component or moves focus out of it, and exposes <code>noHideOnThisFocusLoss</code> to opt out. Native <code><details></code> stays open until the <code><summary></code> is clicked again — click-outside and focus-out dismissal must be wired up manually.</p>
|
|
99
|
+
<auro-header level="3">Keyboard handling</auro-header>
|
|
100
|
+
<p><code>auro-dropdown</code> includes a keyboard strategy for arrow-key navigation, <code>Escape</code> to close, and <code>Tab</code> behavior coordinated with the bib contents, and lets consumers opt out via <code>disableKeyboardHandling</code>. Native <code><details></code> only toggles on <code>Enter</code>/<code>Space</code> on the <code><summary></code> and offers no panel-internal keyboard model.</p>
|
|
101
|
+
<auro-header level="3">ARIA wiring</auro-header>
|
|
102
|
+
<p><code>auro-dropdown</code> sets an <code>a11yRole</code> on the trigger, manages <code>aria-expanded</code>, and emits an <code>auroDropdown-idAdded</code> event so consumers can wire <code>aria-controls</code> to the generated bib ID. Native <code><details></code> exposes a disclosure role with <code>open</code> state but does not expose a generated panel ID, and any custom role (for example, <code>combobox</code> or <code>menu</code>) must be added and kept in sync by hand.</p>
|
|
103
|
+
<auro-header level="3">Chevron indicator</auro-header>
|
|
104
|
+
<p><code>auro-dropdown</code> supports a <code>chevron</code> attribute that renders a collapsed/expanded indicator with the correct rotation and design-token color. With native HTML you must author the indicator yourself — the example above uses a background-image SVG and a <code>[open]</code> selector to rotate it.</p>
|
|
105
|
+
<auro-header level="3">Error and help-text presentation</auro-header>
|
|
106
|
+
<p><code>auro-dropdown</code> exposes <code>error</code>, <code>errorMessage</code>, and a <code>helpText</code> slot that renders supporting text below the trigger with the correct error styling. Native <code><details></code> has no concept of error state or help text — both must be authored and toggled manually.</p>
|
|
107
|
+
<auro-header level="3">Imperative show/hide and toggle events</auro-header>
|
|
108
|
+
<p><code>auro-dropdown</code> exposes <code>show()</code> and <code>hide()</code> methods, a <code>disableEventShow</code> option to lock it to programmatic control, and emits <code>auroDropdown-toggled</code> and <code>auroDropdown-triggerClick</code> events. Native <code><details></code> emits a single <code>toggle</code> event and is toggled by user interaction with the <code><summary></code>; coordinated open/close logic across components must be written by hand.</p>
|
|
109
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
110
|
+
<p><code>auro-dropdown</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 disclosure 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>
|
|
111
|
+
<auro-header level="2">Summary</auro-header>
|
|
112
|
+
<table>
|
|
113
|
+
<thead>
|
|
114
|
+
<tr>
|
|
115
|
+
<th>Feature</th>
|
|
116
|
+
<th>Native <code><details></code>/<code><summary></code> with Auro tokens</th>
|
|
117
|
+
<th><code>auro-dropdown</code></th>
|
|
118
|
+
</tr>
|
|
119
|
+
</thead>
|
|
120
|
+
<tbody>
|
|
121
|
+
<tr>
|
|
122
|
+
<td>Design-system-aligned styling</td>
|
|
123
|
+
<td>Manual (author-written CSS)</td>
|
|
124
|
+
<td>Built-in</td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr>
|
|
127
|
+
<td>Dark background support</td>
|
|
128
|
+
<td>Manual</td>
|
|
129
|
+
<td>Yes (<code>appearance="inverse"</code>)</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>Bib placement</td>
|
|
133
|
+
<td>Fixed by author CSS</td>
|
|
134
|
+
<td>12 <code>placement</code> values</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>Auto-placement and flip</td>
|
|
138
|
+
<td>Not supported</td>
|
|
139
|
+
<td><code>autoPlacement</code> / <code>noFlip</code></td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>Shift to stay on-screen</td>
|
|
143
|
+
<td>Not supported</td>
|
|
144
|
+
<td><code>shift</code></td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Match trigger width</td>
|
|
148
|
+
<td>Manual CSS/JS</td>
|
|
149
|
+
<td><code>matchWidth</code></td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td>Offset / gap control</td>
|
|
153
|
+
<td>Manual CSS</td>
|
|
154
|
+
<td><code>offset</code></td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>Mobile fullscreen</td>
|
|
158
|
+
<td>Not supported</td>
|
|
159
|
+
<td><code>fullscreenBreakpoint</code></td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>Desktop modal</td>
|
|
163
|
+
<td>Not supported</td>
|
|
164
|
+
<td><code>desktopModal</code></td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td>Hover to open</td>
|
|
168
|
+
<td>Manual JS</td>
|
|
169
|
+
<td><code>hoverToggle</code></td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td>Focus into bib on open</td>
|
|
173
|
+
<td>Manual JS</td>
|
|
174
|
+
<td><code>focus()</code> / <code>focusShow</code></td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Click-outside / focus-loss dismiss</td>
|
|
178
|
+
<td>Manual JS</td>
|
|
179
|
+
<td>Built-in (with opt-out)</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td>Keyboard model</td>
|
|
183
|
+
<td><code>Enter</code>/<code>Space</code> on summary only</td>
|
|
184
|
+
<td>Arrow / <code>Escape</code> / <code>Tab</code> strategy</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td>ARIA wiring</td>
|
|
188
|
+
<td>Native disclosure role only</td>
|
|
189
|
+
<td><code>a11yRole</code>, <code>aria-expanded</code>, generated bib ID</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td>Chevron indicator</td>
|
|
193
|
+
<td>Manual</td>
|
|
194
|
+
<td><code>chevron</code></td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td>Error / help text</td>
|
|
198
|
+
<td>Manual</td>
|
|
199
|
+
<td><code>error</code>, <code>errorMessage</code>, <code>helpText</code> slot</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td>Imperative show / hide</td>
|
|
203
|
+
<td>Not supported</td>
|
|
204
|
+
<td><code>show()</code> / <code>hide()</code></td>
|
|
205
|
+
</tr>
|
|
206
|
+
<tr>
|
|
207
|
+
<td>Toggle events</td>
|
|
208
|
+
<td><code>toggle</code></td>
|
|
209
|
+
<td><code>auroDropdown-toggled</code>, <code>auroDropdown-triggerClick</code></td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td>Multi-brand theming</td>
|
|
213
|
+
<td>Static (import-time tokens)</td>
|
|
214
|
+
<td>Full (design tokens + component logic)</td>
|
|
215
|
+
</tr>
|
|
216
|
+
</tbody>
|
|
217
|
+
</table>
|
|
218
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
219
|
+
<p>Use <code>auro-dropdown</code> whenever possible. Fall back to a CSS-styled native <code><details></code>/<code><summary></code> 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 positioning, focus management, click-outside dismissal, keyboard behavior, and responsive presentation yourself.</p>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-dropdown.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-dropdown.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-form | 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-form'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,156 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native form</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-form></code> web component cannot be used, a native HTML <code><form></code> element can be styled with the Auro Design System tokens to approximate the layout and spacing used by <code>auro-form</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>.form</code> class. The native <code><form></code> element provides the structural container and browser-native constraint validation, but it does not provide the cross-field coordination that <code>auro-form</code> adds.</p>
|
|
3
|
+
<auro-header level="2">Styling a native form</auro-header>
|
|
4
|
+
<p>The native form can be laid out using 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 and rhythm used by <code>auro-form</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.form {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: var(--ds-size-300, 1.5rem);
|
|
11
|
+
padding: var(--ds-size-400, 2rem);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.form fieldset {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
gap: var(--ds-size-200, 1rem);
|
|
18
|
+
border: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
margin: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.form legend {
|
|
24
|
+
padding: 0;
|
|
25
|
+
margin-bottom: var(--ds-size-100, 0.5rem);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.form .actions {
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: var(--ds-size-200, 1rem);
|
|
31
|
+
margin-top: var(--ds-size-200, 1rem);
|
|
32
|
+
}</code></pre>
|
|
33
|
+
<auro-header level="3">Basic form</auro-header>
|
|
34
|
+
<p>Apply the <code>.form</code> class to a native <code><form></code> element and rely on the browser's built-in submit and reset behavior:</p>
|
|
35
|
+
<pre><code><form class="form" action="/subscribe" method="post">
|
|
36
|
+
<label>
|
|
37
|
+
Email
|
|
38
|
+
<input type="email" name="email" required />
|
|
39
|
+
</label>
|
|
40
|
+
<div class="actions">
|
|
41
|
+
<button type="submit">Submit</button>
|
|
42
|
+
<button type="reset">Reset</button>
|
|
43
|
+
</div>
|
|
44
|
+
</form></code></pre>
|
|
45
|
+
<auro-header level="3">Form with grouped fields</auro-header>
|
|
46
|
+
<p>Use a <code><fieldset></code> and <code><legend></code> to give grouped fields an accessible name:</p>
|
|
47
|
+
<pre><code><form class="form">
|
|
48
|
+
<fieldset>
|
|
49
|
+
<legend>Contact information</legend>
|
|
50
|
+
<label>First name <input type="text" name="firstName" required /></label>
|
|
51
|
+
<label>Last name <input type="text" name="lastName" required /></label>
|
|
52
|
+
<label>Email <input type="email" name="email" required /></label>
|
|
53
|
+
</fieldset>
|
|
54
|
+
<div class="actions">
|
|
55
|
+
<button type="submit">Submit</button>
|
|
56
|
+
<button type="reset">Reset</button>
|
|
57
|
+
</div>
|
|
58
|
+
</form></code></pre>
|
|
59
|
+
<auro-header level="2">What you lose without auro-form</auro-header>
|
|
60
|
+
<p>While the CSS above replicates the <strong>visual layout</strong> of <code>auro-form</code>, the following functionality built into the <code>auro-form</code> web component is <strong>not available</strong> when using a plain HTML <code><form></code>:</p>
|
|
61
|
+
<auro-header level="3">Child element registration</auro-header>
|
|
62
|
+
<p><code>auro-form</code> automatically discovers and registers its named Auro form-element children (<code>auro-input</code>, <code>auro-select</code>, <code>auro-datepicker</code>, <code>auro-combobox</code>, <code>auro-checkbox-group</code>, <code>auro-radio-group</code>, <code>auro-counter-group</code>) on slot change and via a <code>MutationObserver</code>, so dynamically added or removed fields are tracked without manual wiring. A native <code><form></code> only exposes built-in form-associated elements through <code>form.elements</code> — custom elements and dynamically inserted controls require custom registration logic.</p>
|
|
63
|
+
<auro-header level="3">Aggregated value snapshot</auro-header>
|
|
64
|
+
<p><code>auro-form</code> exposes a <code>value</code> getter that returns a single key-value object of every named child's current value, including array values from range datepickers and grouped controls. With a native <code><form></code>, you must either use <code>FormData</code> (which does not understand custom elements) or query each control individually and assemble the values yourself.</p>
|
|
65
|
+
<auro-header level="3">Aggregated validity state</auro-header>
|
|
66
|
+
<p><code>auro-form</code> exposes a single <code>validity</code> getter that returns <code>'valid'</code>, <code>'invalid'</code>, or <code>null</code> based on the validity of every required and interacted-with child. Native forms expose <code>form.checkValidity()</code> and <code>form.reportValidity()</code>, but those only consider built-in form-associated elements and do not include custom elements like <code>auro-input</code> or <code>auro-datepicker</code>.</p>
|
|
67
|
+
<auro-header level="3">Initial-state tracking</auro-header>
|
|
68
|
+
<p><code>auro-form</code> tracks an <code>isInitialState</code> flag that is <code>true</code> until any child has been interacted with or had its value changed. Native forms have no equivalent — you must implement change tracking yourself to know whether the form is in a pristine state.</p>
|
|
69
|
+
<auro-header level="3">auroFormElement-validated event aggregation</auro-header>
|
|
70
|
+
<p><code>auro-form</code> listens for <code>auroFormElement-validated</code> events from every registered child and updates its aggregated validity state in response. A native <code><form></code> does not listen to or interpret these events, so per-field validation reported by Auro components is not rolled up into a single form-level validity result.</p>
|
|
71
|
+
<auro-header level="3">Submit coordination</auro-header>
|
|
72
|
+
<p><code>auro-form</code> intercepts clicks on child submit buttons (<code><button type="submit"></code> or <code><auro-button type="submit"></code>), forces validation on every registered child, waits for validation to settle, and only then fires a <code>submit</code> event with <code>detail.value</code> containing the full form snapshot. A native <code><form></code> submit fires before custom-element validation can complete and does not surface a structured value object.</p>
|
|
73
|
+
<auro-header level="3">Reset coordination</auro-header>
|
|
74
|
+
<p><code>auro-form</code> intercepts clicks on child reset buttons, calls <code>reset()</code> on every registered child, reinitializes its state, and fires a <code>reset</code> event with <code>detail.previousValue</code> containing the values captured before the reset. A native <code><form></code> reset only restores default values on built-in form controls and does not call any custom reset method on web components.</p>
|
|
75
|
+
<auro-header level="3">Submit and reset button disabling</auro-header>
|
|
76
|
+
<p><code>auro-form</code> automatically disables submit buttons while the form is in its initial state or invalid, and disables reset buttons while the form is in its initial state. With a native <code><form></code>, you must wire up your own change listeners to toggle the <code>disabled</code> attribute on action buttons.</p>
|
|
77
|
+
<auro-header level="3">Enter-to-submit handling</auro-header>
|
|
78
|
+
<p><code>auro-form</code> listens for the Enter key on its registered children and triggers a coordinated submit, while skipping textarea-style fields so they can accept newlines. A native <code><form></code> submits on Enter only when the focused control is a form-associated element the browser recognizes, which excludes most custom elements.</p>
|
|
79
|
+
<auro-header level="3">Mixed Auro and native child support</auro-header>
|
|
80
|
+
<p><code>auro-form</code> recognizes its named Auro children and coordinates them as a single form, while still allowing native elements to live alongside them in markup. A native <code><form></code> treats Auro custom elements as opaque DOM nodes and provides no cross-field coordination between them.</p>
|
|
81
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
82
|
+
<p><code>auro-form</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 form 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><form></code> with Auro tokens</th>
|
|
89
|
+
<th><code>auro-form</code></th>
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
<tr>
|
|
94
|
+
<td>Design-system-aligned layout</td>
|
|
95
|
+
<td>Manual (author-written CSS)</td>
|
|
96
|
+
<td>Built-in</td>
|
|
97
|
+
</tr>
|
|
98
|
+
<tr>
|
|
99
|
+
<td>Child element registration</td>
|
|
100
|
+
<td>Built-ins only via <code>form.elements</code></td>
|
|
101
|
+
<td>Automatic, including dynamic children</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr>
|
|
104
|
+
<td>Aggregated value snapshot</td>
|
|
105
|
+
<td>Manual or <code>FormData</code> (no custom elements)</td>
|
|
106
|
+
<td>Single <code>value</code> getter</td>
|
|
107
|
+
</tr>
|
|
108
|
+
<tr>
|
|
109
|
+
<td>Aggregated validity state</td>
|
|
110
|
+
<td>Built-ins only via <code>checkValidity()</code></td>
|
|
111
|
+
<td>Single <code>validity</code> getter across all children</td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td>Initial-state tracking</td>
|
|
115
|
+
<td>Manual</td>
|
|
116
|
+
<td><code>isInitialState</code> getter</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td><code>auroFormElement-validated</code> aggregation</td>
|
|
120
|
+
<td>Not supported</td>
|
|
121
|
+
<td>Built-in</td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>Submit coordination</td>
|
|
125
|
+
<td>Native submit fires before custom-element validation</td>
|
|
126
|
+
<td>Forces validation, then fires <code>submit</code> with full value</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Reset coordination</td>
|
|
130
|
+
<td>Resets built-ins only</td>
|
|
131
|
+
<td>Calls <code>reset()</code> on every child; emits previous value</td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td>Submit/reset button disabling</td>
|
|
135
|
+
<td>Manual</td>
|
|
136
|
+
<td>Automatic based on state and validity</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td>Enter-to-submit on custom elements</td>
|
|
140
|
+
<td>Not supported</td>
|
|
141
|
+
<td>Built-in (skips textarea)</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>Mixed Auro and native children</td>
|
|
145
|
+
<td>Native treats Auro elements as opaque</td>
|
|
146
|
+
<td>Coordinated as a single form</td>
|
|
147
|
+
</tr>
|
|
148
|
+
<tr>
|
|
149
|
+
<td>Multi-brand theming</td>
|
|
150
|
+
<td>Static (import-time tokens)</td>
|
|
151
|
+
<td>Full (design tokens + component logic)</td>
|
|
152
|
+
</tr>
|
|
153
|
+
</tbody>
|
|
154
|
+
</table>
|
|
155
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
156
|
+
<p>Use <code>auro-form</code> whenever possible. Fall back to a CSS-styled native <code><form></code> 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 child registration, aggregated value and validity, submit and reset coordination, and action-button state management yourself.</p>
|