@aurodesignsystem-dev/auro-formkit 0.0.0-pr1396.2 → 0.0.0-pr1397.1

package/components/select/demo/install.md

@@ -0,0 +1,97 @@
+# Select - Install
+
+## Getting Started
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../../docs/templates/componentInstall.md -->
+
+#### NPM Installation
+
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../../docs/templates/gettingStarted.md -->
+
+### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+
+This configuration enables proper module resolution for the component's TypeScript files.
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 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.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
+
+// Register with a custom name if desired
+AuroSelect.register('custom-select');
+```
+
+This will create a new custom element `<custom-select>` that behaves exactly like `<auro-select>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+```
+</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/select/demo/keyboard.html

@@ -0,0 +1,72 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-select</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+
+      sup {
+        font-size: 60%;
+        font-style: italic;
+        opacity: 0.6;
+        top: -.5rem;
+      }
+    </style>
+</head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./keyboardBehavior.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/select/demo/keyboardBehavior.md

@@ -0,0 +1,247 @@
+<auro-header level="1" id="overview">Select - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+  <nav>
+    <auro-nav anchorNavContent=".scrollWrapper">
+      <!-- <span slot="label">Anchor Navigation</span> -->
+      <span slot="mobileToggleCollapsed">View More</span>
+      <span slot="mobileToggleExpanded">View Less</span>
+      <auro-anchorlink fluid href="#keyboard">Keyboard Behavior</auro-anchorlink>
+      <auro-anchorlink fluid href="#tabBehavior" class="level2 body-xs">Tab Behavior</auro-anchorlink>
+      <auro-anchorlink fluid href="#keyEvents" class="level2 body-xs">Key Events</auro-anchorlink>
+    </auro-nav>
+  </nav>
+  <div class="mainContent">
+  <div class="scrollWrapper">
+    <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+    <p>The <code>&lt;auro-select></code> component inherits the default tabindex behavior of <code>&lt;auro-dropdown></code> with no modifications.</p>
+    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/tabindex.md) -->
+    <!-- The below content is automatically added from ./../../dropdown/docs/partials/tabindex.md -->
+    <p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior.<auro-hyperlink></p>
+    <p> When the component is <code>disabled</code> it is removed from the tab order by the browser. VoiceOver's virtual cursor (swipe navigation) can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+    <p>When the bib is collapsed, the bib content is excluded from the tab sequence. When expanded, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition.</p>
+    <!-- AURO-GENERATED-CONTENT:END -->
+    <p>There are no focusable elements inside the <code>&lt;auro-select></code> bib content.</p>
+    <auro-header level="2" id="keyEvents">Key Events</auro-header>
+    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+    <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+    <table>
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Modifier</th>
+          <th>Current State</th>
+          <th>Focus Element</th>
+          <th>Behavior</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td rowspan="6">ArrowDown</td>
+          <td rowspan="2">-</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the next enabled option in the list. If the current <code>activeOption</code> is the last enabled option, selection wraps to the first enabled option.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="2">Command</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the last enabled option in the list.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="2">Option</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the last enabled option in the list.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="6">ArrowUp</td>
+          <td rowspan="2">-</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the previous enabled option in the list. If the current <code>activeOption</code> is the first enabled option, selection wraps to the last enabled option.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="2">Command</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the first enabled option in the list.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="2">Option</td>
+          <td>Collapsed</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the first enabled option in the list.
+          </td>
+        </tr>
+        <tr>
+          <td>End</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the last enabled option in the list.
+          </td>
+        </tr>
+          <tr>
+          <td>Enter</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            The current <code>activeOption</code> is selected.
+          </td>
+        </tr>
+        <tr>
+          <td>Home</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the first enabled option in the list.
+          </td>
+        </tr>
+        <tr>
+          <td>PageDown</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            The browser advances the <code>activeOption</code> by approximately one “page” of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly active option is brought into view, usually aligning near the bottom of the visible list.
+          </td>
+        </tr>
+        <tr>
+          <td>PageUp</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            The browser moves the <code>activeOption</code> up by approximately one “page” of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly active option is brought into view, often aligning near the top of the visible list.
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="2">Tab</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            The current <code>activeOption</code> is selected.
+            <br />
+            <i><strong>Note:</strong> the page will also navigate to the next focusable element in the tabindex order.</i>
+          </td>
+        </tr>
+        <tr>
+          <td>Shift</td>
+          <td>Expanded</td>
+          <td>*<sup><a href="#fn_FocusAll">1</a></sup></td>
+          <td>
+            Advances the <code>activeOption</code> to the first enabled option in the list.
+            <br />
+            <i><strong>Note:</strong> the page will <strong>NOT</strong> navigate to the previous focusable element in the tabindex order.</i>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- AURO-GENERATED-CONTENT:END -->
+    <auro-header level="3" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
+    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
+    <!-- The below content is automatically added from ./../../dropdown/docs/partials/keyEvents.md -->
+    <table>
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Modifier</th>
+          <th>Current State</th>
+          <th>Focus Element</th>
+          <th>Behavior</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td rowspan="2">Enter</td>
+          <td>-</td>
+          <td>Collapsed</td>
+          <td>*<sup>1</sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup>1</sup></td>
+          <td>Closes the bib.</td>
+        </tr>
+        <tr>
+          <td>Escape</td>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup>1</sup></td>
+          <td>Closes the bib.</td>
+        </tr>
+        <tr>
+          <td rowspan="2">Space</td>
+          <td>-</td>
+          <td>Collapsed</td>
+          <td>*<sup>1</sup></td>
+          <td>Opens the bib.</td>
+        </tr>
+        <tr>
+          <td>-</td>
+          <td>Expanded</td>
+          <td>*<sup>1</sup></td>
+          <td>Closes the bib.</td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- AURO-GENERATED-CONTENT:END -->
+    <section class="footnotes">
+    <hr />
+    <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/footnotes/1.md) -->
+    <!-- The below content is automatically added from ./../../../docs/partials/footnotes/1.md -->
+    <span class="fineprint" id="fn_FocusAll">
+    1. Current focus is `:host` or any focusable element within the component.
+    </span>
+    <!-- AURO-GENERATED-CONTENT:END -->
+    </section>
+  </div>
+</div>