@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.21 → 0.0.0-pr1451.23
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/api.min.js +1 -1
- package/components/checkbox/demo/getting-started.md +154 -0
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +3 -3
- 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/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/getting-started.md +150 -0
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/getting-started.md +146 -0
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.min.js +13 -13
- package/components/form/demo/getting-started.md +143 -0
- package/components/form/demo/index.min.js +13 -13
- package/components/input/demo/api.min.js +1 -1
- 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/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/README.md +8 -26
- package/components/menu/demo/accessibility.html +53 -0
- package/components/menu/demo/accessibility.md +34 -0
- package/components/menu/demo/api.html +11 -17
- package/components/menu/demo/api.md +0 -1059
- package/components/menu/demo/customize.html +54 -0
- package/components/menu/demo/customize.md +639 -0
- package/components/menu/demo/demo-support.js +60 -0
- package/components/menu/demo/design.html +53 -0
- package/components/menu/demo/design.md +81 -0
- package/components/menu/demo/getting-started.html +54 -0
- package/components/menu/demo/getting-started.md +322 -0
- package/components/menu/demo/index.html +14 -19
- package/components/menu/demo/index.md +26 -63
- package/components/menu/demo/keyboard-behavior.html +53 -0
- package/components/menu/demo/readme.html +11 -15
- package/components/menu/demo/readme.md +8 -26
- package/components/menu/demo/styles.css +974 -0
- package/components/menu/demo/voiceover.html +53 -0
- package/components/menu/demo/voiceover.md +33 -0
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/getting-started.md +154 -0
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- 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/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import {unified} from 'https://esm.sh/unified';
|
|
2
|
+
import remarkParse from 'https://esm.sh/remark-parse';
|
|
3
|
+
import remarkGfm from 'https://esm.sh/remark-gfm';
|
|
4
|
+
import remarkRehype from 'https://esm.sh/remark-rehype';
|
|
5
|
+
import rehypeRaw from 'https://esm.sh/rehype-raw';
|
|
6
|
+
import rehypeHighlight from 'https://esm.sh/rehype-highlight';
|
|
7
|
+
import rehypeStringify from 'https://esm.sh/rehype-stringify';
|
|
8
|
+
|
|
9
|
+
export async function renderPage(mdPath) {
|
|
10
|
+
const response = await fetch(mdPath);
|
|
11
|
+
const text = await response.text();
|
|
12
|
+
const result = await unified()
|
|
13
|
+
.use(remarkParse)
|
|
14
|
+
.use(remarkGfm)
|
|
15
|
+
.use(remarkRehype, { allowDangerousHtml: true })
|
|
16
|
+
.use(rehypeRaw)
|
|
17
|
+
.use(rehypeHighlight)
|
|
18
|
+
.use(rehypeStringify)
|
|
19
|
+
.process(text);
|
|
20
|
+
|
|
21
|
+
document.querySelector('main').innerHTML = String(result);
|
|
22
|
+
addCopyButtons();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function addCopyButtons() {
|
|
26
|
+
document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
|
|
27
|
+
const pre = code.parentElement;
|
|
28
|
+
const wrapper = document.createElement('div');
|
|
29
|
+
wrapper.className = 'pre-wrapper';
|
|
30
|
+
pre.parentNode.insertBefore(wrapper, pre);
|
|
31
|
+
wrapper.appendChild(pre);
|
|
32
|
+
const btn = document.createElement('button');
|
|
33
|
+
btn.className = 'copy-btn';
|
|
34
|
+
btn.textContent = 'Copy';
|
|
35
|
+
btn.addEventListener('click', () => {
|
|
36
|
+
const raw = code.textContent;
|
|
37
|
+
const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
|
|
38
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
39
|
+
btn.textContent = 'Copied!';
|
|
40
|
+
setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
wrapper.appendChild(btn);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export function openAccordion(id) {
|
|
48
|
+
document.querySelectorAll('auro-accordion').forEach((accordion) => {
|
|
49
|
+
accordion.removeAttribute('expanded');
|
|
50
|
+
});
|
|
51
|
+
const target = document.getElementById(id);
|
|
52
|
+
if (target) {
|
|
53
|
+
target.setAttribute('expanded', '');
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
56
|
+
}, 550);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
window.openAccordion = openAccordion;
|
|
@@ -0,0 +1,53 @@
|
|
|
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/design.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 | Design</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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import { renderPage } from './demo-support.js';
|
|
42
|
+
await renderPage('./design.md');
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
50
|
+
|
|
51
|
+
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Menu - Design</auro-header>
|
|
2
|
+
<div class="contentWrapper">
|
|
3
|
+
<div class="mainContent">
|
|
4
|
+
<div class="scrollWrapper">
|
|
5
|
+
<section>
|
|
6
|
+
<auro-header level="2" id="anatomy">Component Anatomy</auro-header>
|
|
7
|
+
<p>The <code>auro-menu</code> component is a list container that renders one or more <code>auro-menuoption</code> elements. The component consists of the following key elements:</p>
|
|
8
|
+
<ul>
|
|
9
|
+
<li><strong>Menu Container</strong> — The outer list element (<code>role="listbox"</code>) that holds all options and manages selection state, keyboard navigation, and active/selected tracking.</li>
|
|
10
|
+
<li><strong>Menu Option</strong> — An individual selectable item (<code>auro-menuoption</code>) within the menu. Each option can carry a <code>value</code>, display label text, and respond to selection, disabled, and hidden states.</li>
|
|
11
|
+
<li><strong>Checkmark Icon</strong> — A visual indicator shown on the selected option(s). Can be hidden with the <code>nocheckmark</code> attribute.</li>
|
|
12
|
+
<li><strong>Divider (<code><hr></code>)</strong> — A horizontal rule used to visually separate groups of options within the menu.</li>
|
|
13
|
+
</ul>
|
|
14
|
+
<auro-header level="3" id="menuOption">Menu Option</auro-header>
|
|
15
|
+
<p>Each <code>auro-menuoption</code> is a focusable element that visually responds to common UI states — <strong>Hover</strong>, <strong>Active</strong> (keyboard-highlighted), <strong>Selected</strong>, and <strong>Disabled</strong>. Options support a default slot for display text and a <code>value</code> attribute that is used for programmatic selection.</p>
|
|
16
|
+
<auro-header level="3" id="dividers">Dividers</auro-header>
|
|
17
|
+
<p>Use standard <code><hr></code> elements between <code>auro-menuoption</code> elements to create visual group separators. Dividers are non-interactive and are skipped during keyboard navigation.</p>
|
|
18
|
+
<auro-header level="3" id="checkmark">Checkmark</auro-header>
|
|
19
|
+
<p>By default, a checkmark icon appears next to the selected option(s). Use the <code>nocheckmark</code> attribute on <code>auro-menu</code> to hide this indicator when a simpler visual style is preferred.</p>
|
|
20
|
+
</section>
|
|
21
|
+
<section>
|
|
22
|
+
<auro-header level="2" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
|
|
23
|
+
<p>The <code>auro-menu</code> component supports the <code>shape</code> and <code>size</code> feature set. The component defaults to <code>shape="box"</code> and <code>size="sm"</code>. The <code>layout</code> attribute is not supported by this component.</p>
|
|
24
|
+
<auro-header level="3" id="size">Size</auro-header>
|
|
25
|
+
<p>Use the <code>size</code> attribute to change the size of menu options. Supported values are <code>sm</code> (default) and <code>md</code>.</p>
|
|
26
|
+
<div class="exampleWrapper">
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size.html) -->
|
|
28
|
+
<!-- The below content is automatically added from ./../apiExamples/size.html -->
|
|
29
|
+
<auro-menu size="md">
|
|
30
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
31
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
32
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
33
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
34
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
35
|
+
</auro-menu>
|
|
36
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
|
+
</div>
|
|
38
|
+
<auro-accordion alignRight>
|
|
39
|
+
<span slot="trigger">See code</span>
|
|
40
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size.html) -->
|
|
41
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/size.html -->
|
|
42
|
+
<pre class="language-html"><code class="language-html"><auro-menu size="md">
|
|
43
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
44
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
45
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
46
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
47
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
48
|
+
</auro-menu></code></pre>
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
|
+
</auro-accordion>
|
|
51
|
+
<auro-header level="3" id="shape">Shape</auro-header>
|
|
52
|
+
<p>Use the <code>shape</code> attribute to change the shape of menu options. Supported values are <code>box</code> (default) and <code>round</code>.</p>
|
|
53
|
+
<div class="exampleWrapper">
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/shape.html) -->
|
|
55
|
+
<!-- The below content is automatically added from ./../apiExamples/shape.html -->
|
|
56
|
+
<auro-menu shape="round">
|
|
57
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
58
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
59
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
60
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
61
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
62
|
+
</auro-menu>
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
64
|
+
</div>
|
|
65
|
+
<auro-accordion alignRight>
|
|
66
|
+
<span slot="trigger">See code</span>
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/shape.html) -->
|
|
68
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/shape.html -->
|
|
69
|
+
<pre class="language-html"><code class="language-html"><auro-menu shape="round">
|
|
70
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
71
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
72
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
73
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
74
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
75
|
+
</auro-menu></code></pre>
|
|
76
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
77
|
+
</auro-accordion>
|
|
78
|
+
</section>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
@@ -0,0 +1,54 @@
|
|
|
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/getting-started.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 | Getting Started</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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import { renderPage } from './demo-support.js';
|
|
42
|
+
await renderPage('./getting-started.md');
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
51
|
+
|
|
52
|
+
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Menu - Getting Started</auro-header>
|
|
2
|
+
<div class="contentWrapper">
|
|
3
|
+
<nav>
|
|
4
|
+
<auro-nav anchorNavContent=".scrollWrapper">
|
|
5
|
+
<span slot="mobileToggleCollapsed">View More</span>
|
|
6
|
+
<span slot="mobileToggleExpanded">View Less</span>
|
|
7
|
+
<auro-anchorlink fluid href="#setup">Setup</auro-anchorlink>
|
|
8
|
+
<auro-anchorlink fluid href="#recommendedAccordion" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
|
|
9
|
+
<auro-anchorlink fluid href="#autoAccordion" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
|
|
10
|
+
<auro-anchorlink fluid href="#cdnAccordion" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
|
|
11
|
+
<auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
|
|
12
|
+
<auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
|
|
13
|
+
<auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
|
|
14
|
+
<auro-anchorlink fluid href="#minimalConfig">Minimal Configuration</auro-anchorlink>
|
|
15
|
+
<auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
|
|
16
|
+
<auro-anchorlink fluid href="#slotDefault" class="level2 body-xs">Default Slot</auro-anchorlink>
|
|
17
|
+
<auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
|
|
18
|
+
<auro-anchorlink fluid href="#value" class="level2 body-xs">value</auro-anchorlink>
|
|
19
|
+
<auro-anchorlink fluid href="#optionSelected" class="level2 body-xs">optionSelected</auro-anchorlink>
|
|
20
|
+
<auro-anchorlink fluid href="#optionActive" class="level2 body-xs">optionActive</auro-anchorlink>
|
|
21
|
+
<auro-anchorlink fluid href="#currentLabel" class="level2 body-xs">currentLabel</auro-anchorlink>
|
|
22
|
+
<auro-anchorlink fluid href="#options" class="level2 body-xs">options</auro-anchorlink>
|
|
23
|
+
<auro-anchorlink fluid href="#index" class="level2 body-xs">index</auro-anchorlink>
|
|
24
|
+
<auro-anchorlink fluid href="#functions">Functions</auro-anchorlink>
|
|
25
|
+
<auro-anchorlink fluid href="#makeSelection" class="level2 body-xs">makeSelection()</auro-anchorlink>
|
|
26
|
+
<auro-anchorlink fluid href="#reset" class="level2 body-xs">reset()</auro-anchorlink>
|
|
27
|
+
<auro-anchorlink fluid href="#updateActiveOption" class="level2 body-xs">updateActiveOption()</auro-anchorlink>
|
|
28
|
+
<auro-anchorlink fluid href="#navigateOptions" class="level2 body-xs">navigateOptions()</auro-anchorlink>
|
|
29
|
+
</auro-nav>
|
|
30
|
+
</nav>
|
|
31
|
+
<div class="mainContent">
|
|
32
|
+
<div class="scrollWrapper">
|
|
33
|
+
<section>
|
|
34
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
|
|
35
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
|
|
36
|
+
<auro-header level="2" id="setup">Setup</auro-header>
|
|
37
|
+
<auro-accordion-group Emphasis>
|
|
38
|
+
<auro-accordion expanded class="section" id="recommendedAccordion">
|
|
39
|
+
<span slot="trigger">Recommended Installation and Implementation</span>
|
|
40
|
+
<div class="accordion-content">
|
|
41
|
+
<auro-header level="3">Install</auro-header>
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
|
|
43
|
+
<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
|
|
44
|
+
|
|
45
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
47
|
+
<auro-header level="3">Implementation</auro-header>
|
|
48
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
|
|
49
|
+
<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
|
|
50
|
+
There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank">class</auro-hyperlink> and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
51
|
+
|
|
52
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
53
|
+
|
|
54
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
55
|
+
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
56
|
+
|
|
57
|
+
// Register with a custom name if desired
|
|
58
|
+
AuroMenu.register('[custom]-menu');
|
|
59
|
+
AuroMenuOption.register('[custom]-menu-option');</code></pre>
|
|
60
|
+
|
|
61
|
+
This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
|
|
62
|
+
|
|
63
|
+
<pre class="language-html"><code class="language-html"><custom-menu>
|
|
64
|
+
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
65
|
+
<custom-menuoption value="price">Price</custom-menuoption>
|
|
66
|
+
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
67
|
+
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
68
|
+
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
69
|
+
</custom-menu></code></pre>
|
|
70
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
|
+
</div>
|
|
72
|
+
</auro-accordion>
|
|
73
|
+
<auro-accordion class="section" id="autoAccordion">
|
|
74
|
+
<span slot="trigger">Auto Installation and Implementation</span>
|
|
75
|
+
<div class="accordion-content">
|
|
76
|
+
<p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
|
|
77
|
+
<auro-header level="3">Install</auro-header>
|
|
78
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
|
|
79
|
+
<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
|
|
80
|
+
|
|
81
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
82
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
83
|
+
<auro-header level="3">Implementation</auro-header>
|
|
84
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
|
|
85
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
|
|
86
|
+
Import the component, then register the custom element:
|
|
87
|
+
|
|
88
|
+
<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-menu';</code></pre>
|
|
89
|
+
|
|
90
|
+
Then use the element in your HTML:
|
|
91
|
+
|
|
92
|
+
<pre class="language-html"><code class="language-html"><auro-menu>
|
|
93
|
+
<auro-menuoption value="option1">Option 1</auro-menuoption>
|
|
94
|
+
<auro-menuoption value="option2">Option 2</auro-menuoption>
|
|
95
|
+
<auro-menuoption value="option3">Option 3</auro-menuoption>
|
|
96
|
+
</auro-menu></code></pre>
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
98
|
+
</div>
|
|
99
|
+
</auro-accordion>
|
|
100
|
+
<auro-accordion class="section" id="cdnAccordion">
|
|
101
|
+
<span slot="trigger">CDN Installation</span>
|
|
102
|
+
<div class="accordion-content">
|
|
103
|
+
<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
|
|
105
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
|
|
106
|
+
The menu component can be loaded via CDN without a build step:
|
|
107
|
+
|
|
108
|
+
<pre class="language-html"><code class="language-html"><script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm" type="module"></script></code></pre>
|
|
109
|
+
|
|
110
|
+
Then use the element in your HTML:
|
|
111
|
+
|
|
112
|
+
<pre class="language-html"><code class="language-html"><auro-menu>
|
|
113
|
+
<auro-menuoption value="option1">Option 1</auro-menuoption>
|
|
114
|
+
<auro-menuoption value="option2">Option 2</auro-menuoption>
|
|
115
|
+
<auro-menuoption value="option3">Option 3</auro-menuoption>
|
|
116
|
+
</auro-menu></code></pre>
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
118
|
+
</div>
|
|
119
|
+
</auro-accordion>
|
|
120
|
+
</auro-accordion-group>
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
+
</section>
|
|
123
|
+
<section>
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
|
|
125
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
|
|
126
|
+
<auro-header level="2" id="frameworks">Frameworks</auro-header>
|
|
127
|
+
<auro-accordion-group Emphasis>
|
|
128
|
+
<auro-accordion class="section" id="react">
|
|
129
|
+
<span slot="trigger">React</span>
|
|
130
|
+
<div class="accordion-content">
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
|
|
132
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
|
|
133
|
+
React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code><auro-menu></code> works directly in JSX without any wrapper library.
|
|
134
|
+
|
|
135
|
+
<auro-header level="3" id="reactImport">Import the Component</auro-header>
|
|
136
|
+
Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
|
|
137
|
+
|
|
138
|
+
<pre class="language-js"><code class="language-js">import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
139
|
+
|
|
140
|
+
AuroMenu.register('[custom]-menu');
|
|
141
|
+
AuroMenuOption.register('[custom]-menuoption');</code></pre>
|
|
142
|
+
|
|
143
|
+
<auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
|
|
144
|
+
The component ships with TypeScript type definitions for the `AuroMenu` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-menu>` in JSX, add the following declaration to a `.d.ts` file in your project:
|
|
145
|
+
|
|
146
|
+
<pre class="language-js"><code class="language-js">import type { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
147
|
+
|
|
148
|
+
declare global {
|
|
149
|
+
namespace JSX {
|
|
150
|
+
interface IntrinsicElements {
|
|
151
|
+
'[custom]-menu': React.HTMLAttributes<AuroMenu> & Partial<AuroMenu>;
|
|
152
|
+
'[custom]-menuoption': React.HTMLAttributes<AuroMenuOption> & Partial<AuroMenuOption>;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}</code></pre>
|
|
156
|
+
|
|
157
|
+
<auro-header level="3" id="reactEvents">Event Handling</auro-header>
|
|
158
|
+
Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
|
|
159
|
+
|
|
160
|
+
<pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
|
|
161
|
+
|
|
162
|
+
function MyMenu() {
|
|
163
|
+
const menuRef = useRef<HTMLElement>(null);
|
|
164
|
+
|
|
165
|
+
useEffect(() => {
|
|
166
|
+
const el = menuRef.current;
|
|
167
|
+
if (!el) return;
|
|
168
|
+
|
|
169
|
+
const handleSelect = () => {
|
|
170
|
+
console.log('Selected value:', (el as any).value);
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
el.addEventListener('selectedOption', handleSelect);
|
|
174
|
+
return () => el.removeEventListener('selectedOption', handleSelect);
|
|
175
|
+
}, []);
|
|
176
|
+
|
|
177
|
+
return (
|
|
178
|
+
<custom-menu ref={menuRef}>
|
|
179
|
+
<custom-menuoption value="option1">Option 1</custom-menuoption>
|
|
180
|
+
<custom-menuoption value="option2">Option 2</custom-menuoption>
|
|
181
|
+
<custom-menuoption value="option3">Option 3</custom-menuoption>
|
|
182
|
+
</custom-menu>
|
|
183
|
+
);
|
|
184
|
+
}</code></pre>
|
|
185
|
+
|
|
186
|
+
<auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
|
|
187
|
+
Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
|
|
188
|
+
|
|
189
|
+
<pre class="language-js"><code class="language-js">{
|
|
190
|
+
"compilerOptions": {
|
|
191
|
+
"moduleResolution": "bundler"
|
|
192
|
+
}
|
|
193
|
+
}</code></pre>
|
|
194
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
195
|
+
</div>
|
|
196
|
+
</auro-accordion>
|
|
197
|
+
<auro-accordion class="section" id="svelte">
|
|
198
|
+
<span slot="trigger">Svelte</span>
|
|
199
|
+
<div class="accordion-content">
|
|
200
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
|
|
201
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
|
|
202
|
+
Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code><auro-menu></code> works directly in Svelte templates without any wrapper or configuration.
|
|
203
|
+
|
|
204
|
+
<auro-header level="3" id="svelteImport">Import the Component</auro-header>
|
|
205
|
+
Import and register the components in the `<script>` block:
|
|
206
|
+
|
|
207
|
+
<pre class="language-html"><code class="language-html"><script lang="ts">
|
|
208
|
+
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
209
|
+
|
|
210
|
+
AuroMenu.register('[custom]-menu');
|
|
211
|
+
AuroMenuOption.register('[custom]-menuoption');
|
|
212
|
+
</script></code></pre>
|
|
213
|
+
|
|
214
|
+
<auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
|
|
215
|
+
Use `<auro-menu>` directly in your Svelte template:
|
|
216
|
+
|
|
217
|
+
<pre class="language-html"><code class="language-html"><script lang="ts">
|
|
218
|
+
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
219
|
+
|
|
220
|
+
AuroMenu.register('[custom]-menu');
|
|
221
|
+
AuroMenuOption.register('[custom]-menuoption');
|
|
222
|
+
</script>
|
|
223
|
+
<custom-menu>
|
|
224
|
+
<custom-menuoption value="option1">Option 1</custom-menuoption>
|
|
225
|
+
<custom-menuoption value="option2">Option 2</custom-menuoption>
|
|
226
|
+
<custom-menuoption value="option3">Option 3</custom-menuoption>
|
|
227
|
+
</custom-menu></code></pre>
|
|
228
|
+
|
|
229
|
+
<auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
|
|
230
|
+
Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-menu>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
|
|
231
|
+
|
|
232
|
+
<pre class="language-js"><code class="language-js">import type { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
233
|
+
|
|
234
|
+
declare namespace svelteHTML {
|
|
235
|
+
interface IntrinsicElements {
|
|
236
|
+
'[custom]-menu': Partial<AuroMenu> & svelteHTML.HTMLAttributes<AuroMenu>;
|
|
237
|
+
'[custom]-menuoption': Partial<AuroMenuOption> & svelteHTML.HTMLAttributes<AuroMenuOption>;
|
|
238
|
+
}
|
|
239
|
+
}</code></pre>
|
|
240
|
+
|
|
241
|
+
This enables prop hinting for attributes like `value`, `disabled`, and others directly in Svelte templates.
|
|
242
|
+
|
|
243
|
+
<auro-header level="3" id="svelteEvents">Event Handling</auro-header>
|
|
244
|
+
Auro components emit native `CustomEvent`s. Listen for the `selectedOption` event on the element:
|
|
245
|
+
|
|
246
|
+
<pre class="language-html"><code class="language-html"><script lang="ts">
|
|
247
|
+
let value = $state('');
|
|
248
|
+
|
|
249
|
+
function handleSelect(e: Event) {
|
|
250
|
+
value = (e.target as HTMLElement & { value: string }).value;
|
|
251
|
+
}
|
|
252
|
+
</script>
|
|
253
|
+
<custom-menu on:selectedOption={handleSelect}>
|
|
254
|
+
<custom-menuoption value="option1">Option 1</custom-menuoption>
|
|
255
|
+
<custom-menuoption value="option2">Option 2</custom-menuoption>
|
|
256
|
+
</custom-menu>
|
|
257
|
+
<p>Selected: {value}</p></code></pre>
|
|
258
|
+
|
|
259
|
+
<auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
|
|
260
|
+
Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
|
|
261
|
+
|
|
262
|
+
<pre class="language-js"><code class="language-js">{
|
|
263
|
+
"compilerOptions": {
|
|
264
|
+
"moduleResolution": "bundler"
|
|
265
|
+
}
|
|
266
|
+
}</code></pre>
|
|
267
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
268
|
+
</div>
|
|
269
|
+
</auro-accordion>
|
|
270
|
+
</auro-accordion-group>
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
272
|
+
</section>
|
|
273
|
+
<section>
|
|
274
|
+
<auro-header level="2" id="minimalConfig">Minimal Configuration</auro-header>
|
|
275
|
+
<p>The most basic use of <code><auro-menu></code> is a list of <code><auro-menuoption></code> elements in the default slot. Each option should have a <code><value></code> attribute.</p>
|
|
276
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
277
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
278
|
+
<pre class="language-html"><code class="language-html"><auro-menu>
|
|
279
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
280
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
281
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
282
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
283
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
284
|
+
</auro-menu></code></pre>
|
|
285
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
286
|
+
</section>
|
|
287
|
+
<section>
|
|
288
|
+
<auro-header level="2" id="slots">Slots</auro-header>
|
|
289
|
+
<auro-header level="3" id="slotDefault">Default Slot</auro-header>
|
|
290
|
+
<p>The default slot accepts <code>auro-menuoption</code> elements and <code><hr></code> elements as dividers. You can also nest additional <code><auro-menu></code> elements within the default slot.</p>
|
|
291
|
+
</section>
|
|
292
|
+
<section>
|
|
293
|
+
<auro-header level="2" id="stateManagement">State Management</auro-header>
|
|
294
|
+
<p>The following properties reflect the current state of the menu and can be accessed via JavaScript.</p>
|
|
295
|
+
<auro-header level="3" id="value">value</auro-header>
|
|
296
|
+
<p>Gets or sets the selected value. In multi-select mode, this is a JSON stringified array of selected option values (e.g., <code>'["stops","duration"]'</code>).</p>
|
|
297
|
+
<auro-header level="3" id="optionSelected">optionSelected</auro-header>
|
|
298
|
+
<p>Returns the currently selected <code><auro-menuoption></code> element, or <code>undefined</code> if no option is selected. When <code>multiSelect</code> is enabled, returns an array of selected elements.</p>
|
|
299
|
+
<auro-header level="3" id="optionActive">optionActive</auro-header>
|
|
300
|
+
<p>Returns the currently active (focused) <code><auro-menuoption></code> element. The active option receives visual focus during keyboard navigation.</p>
|
|
301
|
+
<auro-header level="3" id="currentLabel">currentLabel</auro-header>
|
|
302
|
+
<p>Returns the display label of the currently selected option(s). Useful for rendering a summary of the selection outside the menu.</p>
|
|
303
|
+
<auro-header level="3" id="options">options</auro-header>
|
|
304
|
+
<p>Returns a read-only array of available <code><auro-menuoption></code> elements currently in the menu.</p>
|
|
305
|
+
<auro-header level="3" id="index">index</auro-header>
|
|
306
|
+
<p>Gets or sets the index of the currently highlighted option. Setting this value programmatically moves the visual focus indicator.</p>
|
|
307
|
+
</section>
|
|
308
|
+
<section>
|
|
309
|
+
<auro-header level="2" id="functions">Functions</auro-header>
|
|
310
|
+
<p>The following public methods are available on the <code><auro-menu></code> element.</p>
|
|
311
|
+
<auro-header level="3" id="makeSelection">makeSelection()</auro-header>
|
|
312
|
+
<p>Selects the currently active menu option. This is the programmatic equivalent of clicking on an option or pressing Enter while an option is focused.</p>
|
|
313
|
+
<auro-header level="3" id="reset">reset()</auro-header>
|
|
314
|
+
<p>Resets the menu to its initial state, clearing all selected options and restoring the value to <code>undefined</code>.</p>
|
|
315
|
+
<auro-header level="3" id="updateActiveOption">updateActiveOption(option)</auro-header>
|
|
316
|
+
<p>Sets the specified <code><auro-menuoption></code> element as the currently active (highlighted) option.</p>
|
|
317
|
+
<auro-header level="3" id="navigateOptions">navigateOptions(direction)</auro-header>
|
|
318
|
+
<p>Moves the highlight to the next or previous option. Accepts <code>'up'</code> or <code>'down'</code> as the direction parameter.</p>
|
|
319
|
+
</section>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|