npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1475.6 → 0.0.0-pr1477.1 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.6 → 0.0.0-pr1477.1

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.

Files changed (103) hide show

package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -7
package/components/bibtemplate/dist/index.js +1 -9
package/components/bibtemplate/dist/registered.js +1 -9
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/customize.min.js +18 -236
package/components/combobox/demo/getting-started.min.js +18 -236
package/components/combobox/demo/index.min.js +18 -236
package/components/combobox/demo/keyboard-behavior.md +68 -8
package/components/combobox/demo/pages.json +1 -1
package/components/combobox/dist/index.js +18 -236
package/components/combobox/dist/registered.js +18 -236
package/components/counter/demo/customize.min.js +15 -233
package/components/counter/demo/index.min.js +15 -233
package/components/counter/demo/keyboard-behavior.md +0 -1
package/components/counter/demo/pages.json +1 -1
package/components/counter/dist/index.js +2 -10
package/components/counter/dist/registered.js +2 -10
package/components/datepicker/demo/accessibility.md +3 -51
package/components/datepicker/demo/api.md +2 -11
package/components/datepicker/demo/customize.html +0 -2
package/components/datepicker/demo/customize.md +8 -72
package/components/datepicker/demo/design.md +1 -3
package/components/datepicker/demo/index.js +1 -5
package/components/datepicker/demo/index.md +2 -83
package/components/datepicker/demo/index.min.js +100 -1567
package/components/datepicker/demo/keyboard-behavior.md +2 -201
package/components/datepicker/demo/pages.json +1 -1
package/components/datepicker/demo/voiceover.md +12 -19
package/components/datepicker/dist/index.js +98 -1489
package/components/datepicker/dist/registered.js +98 -1489
package/components/datepicker/dist/src/auro-calendar-cell.d.ts +1 -66
package/components/datepicker/dist/src/auro-calendar-month.d.ts +0 -28
package/components/datepicker/dist/src/auro-calendar.d.ts +0 -100
package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -88
package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +3 -5
package/components/dropdown/demo/accessibility.md +0 -11
package/components/dropdown/demo/api.md +0 -1
package/components/dropdown/demo/customize.md +0 -3
package/components/dropdown/demo/customize.min.js +13 -223
package/components/dropdown/demo/getting-started.min.js +13 -223
package/components/dropdown/demo/index.min.js +13 -223
package/components/dropdown/demo/keyboard-behavior.md +0 -1
package/components/dropdown/demo/pages.json +1 -1
package/components/dropdown/dist/auro-dropdown.d.ts +1 -33
package/components/dropdown/dist/index.js +13 -223
package/components/dropdown/dist/registered.js +13 -223
package/components/form/demo/customize.min.js +165 -2208
package/components/form/demo/getting-started.min.js +165 -2208
package/components/form/demo/index.min.js +165 -2208
package/components/form/demo/pages.json +1 -1
package/components/form/demo/registerDemoDeps.min.js +165 -2208
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/pages.json +1 -1
package/components/radio/demo/getting-started.js +1 -1
package/components/radio/demo/getting-started.md +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/customize.min.js +33 -249
package/components/select/demo/getting-started.min.js +33 -249
package/components/select/demo/index.min.js +33 -249
package/components/select/demo/keyboard-behavior.md +54 -9
package/components/select/demo/pages.json +1 -1
package/components/select/dist/index.js +33 -249
package/components/select/dist/registered.js +33 -249
package/custom-elements.json +21 -738
package/package.json +2 -2
package/components/checkbox/demo/why-checkbox.html +0 -57
package/components/checkbox/demo/why-checkbox.md +0 -86
package/components/combobox/demo/why-combobox.html +0 -57
package/components/combobox/demo/why-combobox.md +0 -113
package/components/counter/demo/why-counter.html +0 -57
package/components/counter/demo/why-counter.md +0 -108
package/components/datepicker/demo/customize.js +0 -19
package/components/datepicker/demo/customize.min.js +0 -26028
package/components/datepicker/demo/why-datepicker.html +0 -57
package/components/datepicker/demo/why-datepicker.md +0 -133
package/components/dropdown/demo/why-dropdown.html +0 -57
package/components/dropdown/demo/why-dropdown.md +0 -97
package/components/form/demo/why-form.html +0 -57
package/components/form/demo/why-form.md +0 -101
package/components/input/demo/why-input.html +0 -57
package/components/input/demo/why-input.md +0 -121
package/components/menu/demo/why-menu.html +0 -57
package/components/menu/demo/why-menu.md +0 -104
package/components/radio/demo/customize.min.js +0 -2186
package/components/radio/demo/demo-support.min.js +0 -55807
package/components/radio/demo/getting-started.min.js +0 -2205
package/components/radio/demo/why-radio.html +0 -57
package/components/radio/demo/why-radio.md +0 -92
package/components/select/demo/why-select.html +0 -57
package/components/select/demo/why-select.md +0 -128

package/components/datepicker/demo/why-datepicker.html DELETED Viewed

@@ -1,57 +0,0 @@
-<!--
-  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/why-datepicker.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-datepicker | Why auro-datepicker</title>
-    <!-- highlight.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
-    <!-- Legacy reference is still needed to support auro-datepicker'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="./styles.min.css" />
-    <style>
-      table {
-        --ds-color-container-secondary-default: transparent;
-      }
-      tr:not(:last-of-type) {
-        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
-      }
-    </style>
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-    <script type="module">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./why-datepicker.md');
-    </script>
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-  </body>
-</html>

package/components/datepicker/demo/why-datepicker.md DELETED Viewed

@@ -1,133 +0,0 @@
-<auro-header level="1" id="overview">Why auro-datepicker?</auro-header>
-<p>The native HTML <code>&lt;input type="date"&gt;</code> element provides a minimal date-picking experience, but it falls short for the needs of a complex, accessible, and branded application. <code>auro-datepicker</code> bridges those gaps with a purpose-built component designed for real-world use.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management.</p>
-<p><code>auro-datepicker</code> provides:</p>
-<ul>
-<li><strong>Full keyboard navigation</strong> — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar. The roving <code>tabindex</code> pattern ensures only one cell is in the tab order at a time, so users can Tab past the calendar efficiently.</li>
-<li><strong>Rich ARIA semantics</strong> — Every cell is labeled with its full date, day-of-week, and contextual state (e.g. "selected", "today", "unavailable", "range start", "in range"). Screen reader users hear meaningful announcements, not just numbers.</li>
-<li><strong>Live region announcements</strong> — Month changes are announced via <code>aria-live</code> so assistive technology users know the visible month has changed.</li>
-<li><strong>Reduced motion support</strong> — Scrolling and transitions respect <code>prefers-reduced-motion</code>.</li>
-<li><strong>Focus management</strong> — Opening the calendar moves focus to the active date cell. Closing it returns focus to the trigger input. The fullscreen dialog uses <code>showModal()</code> for native inert-background behavior, while the desktop modal traps focus within the bib.</li>
-</ul>
-<p>By contrast, native <code>&lt;input type="date"&gt;</code> delegates all of this to the browser, and the result differs significantly between Chrome, Safari, and Firefox — often with no keyboard navigation of the calendar grid at all on some platforms.</p>
-<auro-header level="2" id="dateRangeSelection">Date range selection</auro-header>
-<p>HTML has no native concept of a date range picker. Building one from two <code>&lt;input type="date"&gt;</code> elements requires custom logic for coordinating values, enforcing start-before-end ordering, and providing a unified visual experience.</p>
-<p><code>auro-datepicker</code> handles this with a single <code>range</code> attribute, providing:</p>
-<ul>
-<li>Two coordinated input fields with shared calendar interaction</li>
-<li>Visual range highlighting across the calendar grid</li>
-<li>Customizable ARIA labels for range positions (start, end, in-range, before range, after range)</li>
-<li>Automatic value coordination between departure and return dates</li>
-</ul>
-<auro-header level="2" id="blackoutDates">Blackout dates</auro-header>
-<p>Native date inputs have no mechanism to mark specific dates as unavailable. <code>minDate</code> and <code>maxDate</code> can restrict to a range, but they cannot express "these specific dates within the range are not selectable."</p>
-<p><code>auro-datepicker</code> supports a <code>blackoutDates</code> array of ISO date strings. Blacked-out dates are:</p>
-<ul>
-<li>Visually styled as unavailable</li>
-<li>Announced as unavailable (with a customizable label like "sold out") to screen readers</li>
-<li>Focusable but not selectable via click or keyboard</li>
-<li>Validated on typed input — entering a blackout date triggers a <code>customError</code> validity state</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native date validation is limited to <code>required</code>, <code>min</code>, and <code>max</code>. Error messages are browser-controlled and cannot be customized.</p>
-<p><code>auro-datepicker</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Supports <code>required</code>, <code>minDate</code>, <code>maxDate</code>, and blackout date constraints</li>
-<li>Custom error messages for each validity state (<code>setCustomValidityValueMissing</code>, <code>setCustomValidityRangeOverflow</code>, <code>setCustomValidityRangeUnderflow</code>, <code>setCustomValidityCustomError</code>)</li>
-<li>Validation runs on blur, on value change, and when constraints change (e.g. <code>blackoutDates</code> is updated)</li>
-<li>Dispatches <code>auroFormElement-validated</code> events so parent forms can react</li>
-<li>Displays errors inline via the help text slot</li>
-</ul>
-<auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
-<p>Native date inputs render a small, browser-controlled popup that cannot be styled or repositioned.</p>
-<p><code>auro-datepicker</code> adapts to viewport size:</p>
-<ul>
-<li><strong>Desktop</strong> — Calendar appears as a positioned dropdown bib, with optional modal behavior (<code>desktopModal</code>) that traps focus and makes background content inert</li>
-<li><strong>Mobile</strong> — Calendar opens as a fullscreen dialog via <code>showModal()</code>, with a configurable breakpoint (<code>fullscreenBreakpoint</code>). The virtual keyboard stays open during the transition so users can continue typing</li>
-<li><strong>Multi-month</strong> — Desktop viewports can display two months side-by-side for range selection</li>
-</ul>
-<auro-header level="2" id="localization">Localization</auro-header>
-<p>Native <code>&lt;input type="date"&gt;</code> follows the browser's locale for display format, but offers no control over month names, labels, or ARIA text.</p>
-<p><code>auro-datepicker</code> supports:</p>
-<ul>
-<li>Custom <code>monthNames</code> arrays for any language</li>
-<li>Localizable navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>)</li>
-<li>Localizable range position labels for screen readers</li>
-<li>Customizable <code>blackoutLabel</code> text</li>
-<li>Configurable date display format</li>
-</ul>
-<auro-header level="2" id="customCellContent">Custom cell content</auro-header>
-<p>Native date inputs render a fixed grid of numbers. There is no way to add prices, icons, or supplementary information to individual dates.</p>
-<p><code>auro-datepicker</code> supports per-date slot content:</p>
-<ul>
-<li><strong>Date slots</strong> (<code>date_MM_DD_YYYY</code>) — Add custom HTML below the date number (e.g. flight prices, availability indicators)</li>
-<li><strong>Popover slots</strong> (<code>popover_MM_DD_YYYY</code>) — Add popover content that appears on hover or focus for a specific date</li>
-<li><strong>Reference dates</strong> — Display reference data alongside dates for decision-making</li>
-</ul>
-<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
-<p>A native <code>&lt;input type="date"&gt;</code> cannot be styled to match a design system. Shadow DOM browser controls resist CSS customization, and the calendar popup is entirely outside author control.</p>
-<p><code>auro-datepicker</code> is built with the Alaska Airlines Auro Design System:</p>
-<ul>
-<li>Consistent visual language with other Auro form components</li>
-<li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
-<li>CSS custom properties and <code>::part()</code> selectors for targeted styling</li>
-<li>Composed from versioned Auro sub-components (dropdown, input, button, icon) for consistency</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;input type="date"&gt;</code></th>
-<th><code>auro-datepicker</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Keyboard navigation</td>
-<td>Browser-dependent</td>
-<td>Full arrow-key grid navigation</td>
-</tr>
-<tr>
-<td>Screen reader support</td>
-<td>Inconsistent</td>
-<td>Rich ARIA labels and live regions</td>
-</tr>
-<tr>
-<td>Date range</td>
-<td>Not supported</td>
-<td>Built-in with <code>range</code> attribute</td>
-</tr>
-<tr>
-<td>Blackout dates</td>
-<td>Not supported</td>
-<td><code>blackoutDates</code> array with validation</td>
-</tr>
-<tr>
-<td>Custom validation messages</td>
-<td>Not supported</td>
-<td>Per-constraint custom messages</td>
-</tr>
-<tr>
-<td>Responsive layout</td>
-<td>Fixed popup</td>
-<td>Desktop dropdown / mobile fullscreen</td>
-</tr>
-<tr>
-<td>Custom cell content</td>
-<td>Not supported</td>
-<td>Per-date slots and popovers</td>
-</tr>
-<tr>
-<td>Localization</td>
-<td>Browser locale only</td>
-<td>Fully configurable labels and names</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>Minimal / browser-dependent</td>
-<td>Full design system integration</td>
-</tr>
-</tbody>
-</table>

package/components/dropdown/demo/why-dropdown.html DELETED Viewed

@@ -1,57 +0,0 @@
-<!--
-  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/why-dropdown.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-dropdown | Why auro-dropdown</title>
-    <!-- highlight.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
-    <!-- Legacy reference is still needed to support auro-dropdown'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="./styles.min.css" />
-    <style>
-      table {
-        --ds-color-container-secondary-default: transparent;
-      }
-      tr:not(:last-of-type) {
-        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
-      }
-    </style>
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-    <script type="module">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./why-dropdown.md');
-    </script>
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-  </body>
-</html>

package/components/dropdown/demo/why-dropdown.md DELETED Viewed

@@ -1,97 +0,0 @@
-<auro-header level="1" id="overview">Why auro-dropdown?</auro-header>
-<p>Native HTML has no dedicated dropdown/popover primitive that combines trigger management, content positioning, focus trapping, and responsive behavior. Building a dropdown from <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> or custom <code>&lt;div&gt;</code> toggles requires significant work for accessibility and positioning. <code>auro-dropdown</code> provides a production-ready solution.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Custom dropdown implementations often break keyboard navigation, fail to trap focus, or leave background content interactive when the dropdown is open.</p>
-<p><code>auro-dropdown</code> provides:</p>
-<ul>
-<li><strong>Focus trapping</strong> — In desktop modal mode, Tab and Shift+Tab cycle within the dropdown content. Background content is made inert. The implementation handles focus across shadow DOM boundaries.</li>
-<li><strong>Native dialog semantics</strong> — On mobile, the dropdown opens via <code>showModal()</code>, which provides browser-native focus trapping and background inert behavior.</li>
-<li><strong>ARIA attributes</strong> — The trigger carries <code>aria-expanded</code>, <code>aria-controls</code>, and a configurable <code>role</code> (default: <code>button</code>). The dropdown bib has an accessible dialog label.</li>
-<li><strong>Focus delegation</strong> — <code>delegatesFocus: true</code> ensures clicks on the trigger container route focus to the correct interactive element.</li>
-<li><strong>Escape to close</strong> — The dialog's cancel event is handled to close the dropdown on Escape.</li>
-</ul>
-<auro-header level="2" id="positioning">Positioning</auro-header>
-<p>Positioning a dropdown relative to its trigger — accounting for viewport edges, scroll containers, and dynamic content — is a complex problem that native HTML does not solve.</p>
-<p><code>auro-dropdown</code> integrates Floating UI with:</p>
-<ul>
-<li>Configurable <code>placement</code> (12 positions: top/bottom/left/right with start/center/end)</li>
-<li><code>offset</code> control for gap between trigger and content</li>
-<li><code>noFlip</code> to prevent automatic repositioning</li>
-<li><code>shift</code> to slide the dropdown along the edge to avoid clipping</li>
-<li><code>autoPlacement</code> to let the library choose the best position</li>
-<li><code>matchWidth</code> to size the dropdown to the trigger width</li>
-<li>Layout containment escape so the dropdown is not clipped by ancestor <code>overflow</code> or <code>&lt;dialog&gt;</code> elements</li>
-</ul>
-<auro-header level="2" id="responsiveBehavior">Responsive behavior</auro-header>
-<p>Native disclosure elements have no concept of viewport-aware presentation.</p>
-<p><code>auro-dropdown</code> adapts to the viewport:</p>
-<ul>
-<li><strong>Desktop</strong> — Content appears as a positioned panel with optional modal behavior</li>
-<li><strong>Mobile</strong> — Content opens as a fullscreen dialog below a configurable breakpoint (<code>fullscreenBreakpoint</code>: xs, sm, md, lg, xl, or disabled)</li>
-<li><strong>Desktop modal</strong> — <code>desktopModal</code> makes background siblings inert, traps focus within the dropdown, and prevents interaction with page content — all without going fullscreen</li>
-</ul>
-<auro-header level="2" id="contentagnostic">Content-agnostic</auro-header>
-<p>Unlike <code>&lt;select&gt;</code>, which only accepts <code>&lt;option&gt;</code> elements, <code>auro-dropdown</code> accepts any HTML content in its default slot. This makes it the foundation for composed components like <code>auro-select</code>, <code>auro-combobox</code>, and <code>auro-counter-group</code>.</p>
-<auro-header level="2" id="triggerFlexibility">Trigger flexibility</auro-header>
-<p>The <code>trigger</code> slot accepts any content — plain text, buttons, inputs, or complex custom elements. The component detects whether the trigger content is focusable and adjusts tabindex and ARIA attributes accordingly.</p>
-<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
-<p><code>auro-dropdown</code> is built with the Auro Design System:</p>
-<ul>
-<li>Three layout options: classic, emphasized, snowflake</li>
-<li>Light and dark theme support (<code>appearance</code>)</li>
-<li>Chevron indicator for expand/collapse state</li>
-<li>CSS <code>::part()</code> selectors (<code>trigger</code>, <code>chevron</code>, <code>size</code>, <code>helpText</code>)</li>
-<li>Help text slot with error message support</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;details&gt;</code> / custom div</th>
-<th><code>auro-dropdown</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Viewport-aware positioning</td>
-<td>No</td>
-<td>Floating UI with flip/shift/auto</td>
-</tr>
-<tr>
-<td>Focus trapping</td>
-<td>No</td>
-<td>Desktop modal + fullscreen dialog</td>
-</tr>
-<tr>
-<td>Background inert</td>
-<td>No</td>
-<td>Automatic in modal modes</td>
-</tr>
-<tr>
-<td>Keyboard close (Escape)</td>
-<td>No</td>
-<td>Built-in</td>
-</tr>
-<tr>
-<td>Mobile fullscreen</td>
-<td>No</td>
-<td>Automatic at breakpoint</td>
-</tr>
-<tr>
-<td>Any HTML content</td>
-<td>Yes</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Trigger detection</td>
-<td>No</td>
-<td>Auto-detects focusable content</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>No</td>
-<td>Three layouts + appearance modes</td>
-</tr>
-</tbody>
-</table>

package/components/form/demo/why-form.html DELETED Viewed

@@ -1,57 +0,0 @@
-<!--
-  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/why-form.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-form | Why auro-form</title>
-    <!-- highlight.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
-    <!-- Legacy reference is still needed to support auro-form'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="./styles.min.css" />
-    <style>
-      table {
-        --ds-color-container-secondary-default: transparent;
-      }
-      tr:not(:last-of-type) {
-        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
-      }
-    </style>
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-    <script type="module">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./why-form.md');
-    </script>
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-  </body>
-</html>

package/components/form/demo/why-form.md DELETED Viewed

@@ -1,101 +0,0 @@
-<auro-header level="1" id="overview">Why auro-form?</auro-header>
-<p>The native <code>&lt;form&gt;</code> element handles submission and reset for standard HTML inputs, but it has no awareness of web components, cannot orchestrate validation across custom elements, and provides no centralized state management. <code>auro-form</code> fills these gaps for applications built with Auro components.</p>
-<auro-header level="2" id="customElementAwareness">Custom element awareness</auro-header>
-<p>Native <code>&lt;form&gt;</code> relies on the browser's form association API, which web components must explicitly opt into via <code>ElementInternals</code>. Even when they do, coordinating validation state, required fields, and submission values across a mix of Auro components requires custom JavaScript.</p>
-<p><code>auro-form</code> automatically discovers and manages:</p>
-<ul>
-<li><code>auro-input</code></li>
-<li><code>auro-select</code></li>
-<li><code>auro-datepicker</code></li>
-<li><code>auro-combobox</code></li>
-<li><code>auro-checkbox-group</code></li>
-<li><code>auro-radio-group</code></li>
-<li><code>auro-counter-group</code></li>
-</ul>
-<p>New elements added to the DOM are detected via <code>MutationObserver</code> and integrated automatically.</p>
-<auro-header level="2" id="validationOrchestration">Validation orchestration</auro-header>
-<p>Native forms validate each input independently. There is no built-in way to check "are all required fields valid?" without querying each element manually.</p>
-<p><code>auro-form</code> provides:</p>
-<ul>
-<li>A single <code>validity</code> getter that returns <code>'valid'</code>, <code>'invalid'</code>, or <code>null</code> based on the aggregate state of all child form elements</li>
-<li>Automatic validation of all elements on <code>submit()</code> — each element's <code>validate(true)</code> is called to force error display</li>
-<li>Per-element validity tracking via an internal <code>formState</code> object</li>
-<li>Listening for <code>auroFormElement-validated</code> events from child components to stay in sync</li>
-</ul>
-<auro-header level="2" id="centralizedState">Centralized state</auro-header>
-<p>Native forms have no concept of "has the user touched anything?" or "what are all the current values?"</p>
-<p><code>auro-form</code> tracks:</p>
-<ul>
-<li><strong><code>value</code></strong> — A key-value object of all form element values, keyed by element <code>name</code></li>
-<li><strong><code>isInitialState</code></strong> — Whether any element has been modified since initialization</li>
-<li><strong>Submit/reset button state</strong> — Submit and reset buttons are automatically disabled based on form state (e.g., reset is disabled when the form is in its initial state)</li>
-</ul>
-<auro-header level="2" id="submitAndReset">Submit and reset</auro-header>
-<p>Native form submission navigates to a URL or requires <code>event.preventDefault()</code> and manual value extraction.</p>
-<p><code>auro-form</code> simplifies this:</p>
-<ul>
-<li><strong><code>submit()</code></strong> — Validates all elements. If valid, dispatches a <code>submit</code> event with a <code>detail.value</code> object containing all form values. No page navigation.</li>
-<li><strong><code>reset()</code></strong> — Resets all child elements to their initial state, dispatches a <code>reset</code> event with <code>detail.previousValue</code> containing the pre-reset values.</li>
-<li><strong>Enter key</strong> — Pressing Enter on a form element triggers <code>submit()</code>, matching native form behavior. Textareas are excluded to allow newlines.</li>
-</ul>
-<auro-header level="2" id="eventNormalization">Event normalization</auro-header>
-<p>Each Auro component dispatches its own events (<code>auroSelect-valueSet</code>, <code>auroDatePicker-valueSet</code>, etc.). Listening for all of these individually is error-prone.</p>
-<p><code>auro-form</code> normalizes events:</p>
-<ul>
-<li><code>input</code> — Fired when any child element receives user input</li>
-<li><code>change</code> — Fired when any child element's value changes, or when the form is initialized</li>
-<li><code>submit</code> — Fired with aggregated form values on valid submission</li>
-<li><code>reset</code> — Fired with previous values on reset</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;form&gt;</code></th>
-<th><code>auro-form</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Web component discovery</td>
-<td>Manual</td>
-<td>Automatic (MutationObserver)</td>
-</tr>
-<tr>
-<td>Aggregate validity</td>
-<td>Manual querying</td>
-<td>Single <code>validity</code> getter</td>
-</tr>
-<tr>
-<td>Centralized values</td>
-<td><code>FormData</code> (native inputs only)</td>
-<td><code>value</code> object (all Auro components)</td>
-</tr>
-<tr>
-<td>Force validation on submit</td>
-<td>Manual per-element</td>
-<td>Automatic</td>
-</tr>
-<tr>
-<td>Submit button auto-disable</td>
-<td>No</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Reset to initial state</td>
-<td>Native inputs only</td>
-<td>All Auro components</td>
-</tr>
-<tr>
-<td>Enter key submit</td>
-<td>Native inputs only</td>
-<td>All Auro components</td>
-</tr>
-<tr>
-<td>Event normalization</td>
-<td>No</td>
-<td>Unified input/change/submit/reset</td>
-</tr>
-</tbody>
-</table>

package/components/input/demo/why-input.html DELETED Viewed

@@ -1,57 +0,0 @@
-<!--
-  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/why-input.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-input | Why auro-input</title>
-    <!-- highlight.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
-    <!-- Legacy reference is still needed to support auro-input'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="./styles.min.css" />
-    <style>
-      table {
-        --ds-color-container-secondary-default: transparent;
-      }
-      tr:not(:last-of-type) {
-        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
-      }
-    </style>
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-    <script type="module">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./why-input.md');
-    </script>
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-  </body>
-</html>