@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
|
@@ -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-input | 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-input'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,199 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native input</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-input></code> web component cannot be used, a native HTML <code><input></code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-input</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>.input</code> or <code>.form-*</code> class, so the styling must be authored manually using Auro design tokens.</p>
|
|
3
|
+
<auro-header level="2">Styling a native input</auro-header>
|
|
4
|
+
<p>The native input 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 border, focus ring, padding, label, and helper text used by <code>auro-input</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.input-field {
|
|
8
|
+
display: block;
|
|
9
|
+
width: 100%;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
height: var(--ds-size-600, 3rem);
|
|
12
|
+
padding: 0 var(--ds-size-200, 1rem);
|
|
13
|
+
font-family: var(--ds-font-family-default, sans-serif);
|
|
14
|
+
font-size: var(--ds-text-body-default-size, 1rem);
|
|
15
|
+
line-height: var(--ds-text-body-default-line-height, 1.5);
|
|
16
|
+
color: var(--ds-color-text-primary-default, #1d1d1d);
|
|
17
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
18
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
19
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
20
|
+
outline: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.input-field:focus-visible {
|
|
24
|
+
border-color: var(--ds-color-border-active-default, #01426a);
|
|
25
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
26
|
+
outline-offset: 1px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.input-field:disabled {
|
|
30
|
+
cursor: not-allowed;
|
|
31
|
+
opacity: 0.5;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.input-field[aria-invalid="true"] {
|
|
35
|
+
border-color: var(--ds-color-border-error-default, #d50032);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.input-label {
|
|
39
|
+
display: block;
|
|
40
|
+
margin-bottom: var(--ds-size-50, 0.25rem);
|
|
41
|
+
font-size: var(--ds-text-body-sm-size, 0.875rem);
|
|
42
|
+
color: var(--ds-color-text-secondary-default, #6e767f);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.input-helptext {
|
|
46
|
+
display: block;
|
|
47
|
+
margin-top: var(--ds-size-50, 0.25rem);
|
|
48
|
+
font-size: var(--ds-text-body-sm-size, 0.875rem);
|
|
49
|
+
color: var(--ds-color-text-secondary-default, #6e767f);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.input-helptext[data-error="true"] {
|
|
53
|
+
color: var(--ds-color-text-error-default, #d50032);
|
|
54
|
+
}</code></pre>
|
|
55
|
+
<auro-header level="3">Text input</auro-header>
|
|
56
|
+
<p>Apply the <code>.input-field</code> class to a native <code><input type="text"></code> element and pair it with a <code><label></code> using <code>for</code>/<code>id</code>:</p>
|
|
57
|
+
<pre><code><label class="input-label" for="name">Full name</label>
|
|
58
|
+
<input id="name" type="text" class="input-field" name="name" /></code></pre>
|
|
59
|
+
<auro-header level="3">Email input</auro-header>
|
|
60
|
+
<p>Use <code>type="email"</code> to surface the browser's built-in email format validation:</p>
|
|
61
|
+
<pre><code><label class="input-label" for="email">Email address</label>
|
|
62
|
+
<input id="email" type="email" class="input-field" name="email" required /></code></pre>
|
|
63
|
+
<auro-header level="3">Password input</auro-header>
|
|
64
|
+
<p>Use <code>type="password"</code> to mask the entered value. Note that the show/hide toggle provided by <code>auro-input</code> is not present:</p>
|
|
65
|
+
<pre><code><label class="input-label" for="password">Password</label>
|
|
66
|
+
<input id="password" type="password" class="input-field" name="password" /></code></pre>
|
|
67
|
+
<auro-header level="3">Number input</auro-header>
|
|
68
|
+
<p>Use <code>type="number"</code> with <code>min</code>, <code>max</code>, and <code>step</code> for numeric constraints:</p>
|
|
69
|
+
<pre><code><label class="input-label" for="qty">Quantity</label>
|
|
70
|
+
<input id="qty" type="number" class="input-field" name="qty" min="1" max="9" step="1" /></code></pre>
|
|
71
|
+
<auro-header level="3">Helper text</auro-header>
|
|
72
|
+
<p>Pair the input with a sibling element and wire it up via <code>aria-describedby</code> so assistive technology announces the helper content:</p>
|
|
73
|
+
<pre><code><label class="input-label" for="username">Username</label>
|
|
74
|
+
<input id="username" type="text" class="input-field" name="username" aria-describedby="username-help" />
|
|
75
|
+
<span id="username-help" class="input-helptext">Must be 3-20 characters.</span></code></pre>
|
|
76
|
+
<auro-header level="3">Error state</auro-header>
|
|
77
|
+
<p>Toggle <code>aria-invalid="true"</code> on the input and switch the helper text to error styling to communicate validation failure:</p>
|
|
78
|
+
<pre><code><label class="input-label" for="email-error">Email address</label>
|
|
79
|
+
<input id="email-error" type="email" class="input-field" name="email" aria-invalid="true" aria-describedby="email-error-msg" />
|
|
80
|
+
<span id="email-error-msg" class="input-helptext" data-error="true">Enter a valid email address.</span></code></pre>
|
|
81
|
+
<auro-header level="2">What you lose without auro-input</auro-header>
|
|
82
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-input</code>, the following functionality built into the <code>auro-input</code> web component is <strong>not available</strong> when using plain HTML:</p>
|
|
83
|
+
<auro-header level="3">Input masking</auro-header>
|
|
84
|
+
<p><code>auro-input</code> integrates IMask to apply format patterns as the user types — for example <code>format="(###) ###-####"</code> for phone numbers or <code>format="mm/dd/yyyy"</code> for dates. Native inputs have no concept of input masks, so you must integrate a third-party masking library and manage cursor position, paste handling, and value reconciliation yourself.</p>
|
|
85
|
+
<auro-header level="3">Credit-card formatting and detection</auro-header>
|
|
86
|
+
<p><code>auro-input</code> with <code>type="credit-card"</code> auto-detects Visa, Mastercard, American Express, Discover, Diners Club, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), displays the matching card brand icon, and validates with the Luhn algorithm. None of this is available natively.</p>
|
|
87
|
+
<auro-header level="3">Password show/hide toggle</auro-header>
|
|
88
|
+
<p><code>auro-input</code> with <code>type="password"</code> includes an accessible show/hide toggle with customizable ARIA labels via the <code>ariaLabel.password.show</code> and <code>ariaLabel.password.hide</code> slots. A native password input only masks the value — you must build the toggle button, swap the <code>type</code> attribute, and manage its accessible name yourself.</p>
|
|
89
|
+
<auro-header level="3">Clear button</auro-header>
|
|
90
|
+
<p><code>auro-input</code> renders an accessible clear button when the field has a value, with a customizable ARIA label via the <code>ariaLabel.clear</code> slot. Native inputs do not provide a clear control beyond the browser's built-in (and inconsistently styled) <code>type="search"</code> affordance.</p>
|
|
91
|
+
<auro-header level="3">Custom validation messages</auro-header>
|
|
92
|
+
<p><code>auro-input</code> exposes a full set of per-constraint setters — <code>setCustomValidityValueMissing</code>, <code>setCustomValidityRangeOverflow</code>, <code>setCustomValidityRangeUnderflow</code>, <code>setCustomValidityTooLong</code>, <code>setCustomValidityTooShort</code>, <code>setCustomValidityBadInput</code>, <code>setCustomValidityCustomError</code>, and <code>setCustomValidityForType</code>. Native inputs surface browser-controlled validation messages that cannot be customized beyond a single <code>setCustomValidity()</code> string.</p>
|
|
93
|
+
<auro-header level="3">Format types</auro-header>
|
|
94
|
+
<p><code>auro-input</code> ships dedicated <code>type</code> values for <code>credit-card</code>, <code>month-day-year</code>, <code>year-month-day</code>, <code>day-month-year</code>, <code>month-year</code>, <code>month-fullYear</code>, and <code>year-month</code>, each applying the correct mask, validation, and accent icon. With native HTML you are limited to the standard input types and must implement format-specific behavior by hand.</p>
|
|
95
|
+
<auro-header level="3">Floating and dynamic labels</auro-header>
|
|
96
|
+
<p><code>auro-input</code> floats the label above the field when it is focused or populated, and automatically associates slotted label content with the underlying input. With native HTML you must wire up <code>for</code>/<code>id</code> attributes and author the floating-label animation yourself.</p>
|
|
97
|
+
<auro-header level="3">Display value slot</auro-header>
|
|
98
|
+
<p><code>auro-input</code> supports a <code>displayValue</code> slot that renders custom HTML in place of the raw value when the input is blurred — useful for masked account numbers or formatted currency. Native inputs always show the raw value and have no equivalent.</p>
|
|
99
|
+
<auro-header level="3">Layout and shape variants</auro-header>
|
|
100
|
+
<p><code>auro-input</code> supports classic, emphasized, and snowflake layouts, as well as <code>shape</code> variants (<code>box</code>, <code>pill</code>, <code>pill-left</code>, <code>pill-right</code>). A bordered default and a borderless <code>simple</code> mode are also provided. With native HTML you must author each variant's CSS yourself.</p>
|
|
101
|
+
<auro-header level="3">Icon slots and accents</auro-header>
|
|
102
|
+
<p><code>auro-input</code> renders left and right accent slots and an automatic accent icon for typed formats (credit-card brand icon, calendar icon for date types). Native inputs have no slotting mechanism, so icons must be positioned via wrapper elements and absolute positioning.</p>
|
|
103
|
+
<auro-header level="3">Help text and error slots</auro-header>
|
|
104
|
+
<p><code>auro-input</code> exposes a <code>helpText</code> slot that automatically swaps to the validation error message when the field is invalid, with the correct ARIA wiring and color treatment. With native HTML you must manage <code>aria-describedby</code>, error-state styling, and the switch between help and error content yourself.</p>
|
|
105
|
+
<auro-header level="3">Validation timing control</auro-header>
|
|
106
|
+
<p><code>auro-input</code> supports <code>validateOnInput</code> to validate on every keystroke, <code>noValidate</code> to disable validation, and tracks touched state so errors do not appear before the user has interacted with the field. Native inputs validate on submit and have no built-in touched concept.</p>
|
|
107
|
+
<auro-header level="3">Form integration events</auro-header>
|
|
108
|
+
<p><code>auro-input</code> dispatches <code>auroFormElement-validated</code> events so a parent <code>auro-form</code> can coordinate validation across all child fields. Native inputs participate in form submission but do not emit the structured validation events that the Auro form system expects.</p>
|
|
109
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
110
|
+
<p><code>auro-input</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 input 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><input></code> with Auro tokens</th>
|
|
117
|
+
<th><code>auro-input</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>Input masking</td>
|
|
128
|
+
<td>Not supported</td>
|
|
129
|
+
<td>Built-in via IMask and <code>format</code></td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>Credit-card detection and formatting</td>
|
|
133
|
+
<td>Not supported</td>
|
|
134
|
+
<td>Auto-detect with icon and Luhn check</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>Password show/hide toggle</td>
|
|
138
|
+
<td>Not supported</td>
|
|
139
|
+
<td>Built-in</td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>Clear button</td>
|
|
143
|
+
<td>Not supported</td>
|
|
144
|
+
<td>Built-in with ARIA label</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Custom validation messages</td>
|
|
148
|
+
<td>Limited to <code>setCustomValidity()</code></td>
|
|
149
|
+
<td>Per-constraint custom messages</td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td>Format types (date, credit-card, etc.)</td>
|
|
153
|
+
<td>Standard input types only</td>
|
|
154
|
+
<td>Dedicated <code>type</code> values</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>Floating label</td>
|
|
158
|
+
<td>Manual</td>
|
|
159
|
+
<td>Automatic</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>Display value slot</td>
|
|
163
|
+
<td>Not supported</td>
|
|
164
|
+
<td><code>displayValue</code> slot</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td>Bordered/borderless variants</td>
|
|
168
|
+
<td>Manual CSS</td>
|
|
169
|
+
<td><code>simple</code>, <code>shape</code>, layout attributes</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td>Icon slots / accents</td>
|
|
173
|
+
<td>Manual wrapper + positioning</td>
|
|
174
|
+
<td>Left/right accent slots</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Helper / error slot swap</td>
|
|
178
|
+
<td>Manual <code>aria-describedby</code></td>
|
|
179
|
+
<td>Automatic</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td>Validation timing / touched state</td>
|
|
183
|
+
<td>Manual</td>
|
|
184
|
+
<td><code>validateOnInput</code>, <code>noValidate</code>, automatic touched tracking</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td>Form validation events</td>
|
|
188
|
+
<td>Not supported</td>
|
|
189
|
+
<td><code>auroFormElement-validated</code></td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td>Multi-brand theming</td>
|
|
193
|
+
<td>Static (import-time tokens)</td>
|
|
194
|
+
<td>Full (design tokens + component logic)</td>
|
|
195
|
+
</tr>
|
|
196
|
+
</tbody>
|
|
197
|
+
</table>
|
|
198
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
199
|
+
<p>Use <code>auro-input</code> whenever possible. Fall back to a CSS-styled native input only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement masking, format-specific validation, clear and password toggles, touched tracking, and label/help/error wiring yourself.</p>
|
|
@@ -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>
|