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/radio/demo/why-radio.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-radio.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-radio | Why auro-radio</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-radio'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-radio.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/radio/demo/why-radio.md DELETED Viewed

@@ -1,92 +0,0 @@
-<auro-header level="1" id="overview">Why auro-radio?</auro-header>
-<p>The native <code>&lt;input type="radio"&gt;</code> provides basic mutual exclusion within a named group, but it cannot be styled consistently, has no built-in group validation or error messaging, and requires manual <code>&lt;fieldset&gt;</code>/<code>&lt;legend&gt;</code> wiring. <code>auro-radio</code> and <code>auro-radio-group</code> address these gaps.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native radio buttons have basic accessibility, but managing a group with a legend, validation errors, and consistent keyboard behavior requires careful manual implementation.</p>
-<p><code>auro-radio</code> provides:</p>
-<ul>
-<li><strong>Proper ARIA semantics</strong> — Each radio carries <code>role="radio"</code>, <code>aria-checked</code>, <code>aria-required</code>, and <code>aria-disabled</code>.</li>
-<li><strong>Roving tabindex</strong> — Only the selected radio (or the first radio if none is selected) has <code>tabindex="0"</code>. Arrow keys move between radios within the group, matching the expected WAI-ARIA radio group pattern.</li>
-<li><strong>Group labeling</strong> — <code>auro-radio-group</code> provides a <code>legend</code> slot that is automatically associated as the group's accessible label.</li>
-<li><strong>Keyboard interaction</strong> — Arrow keys navigate between options, Space selects the focused radio.</li>
-</ul>
-<auro-header level="2" id="groupManagement">Group management</auro-header>
-<p>Building a radio group with coordinated validation, error display, and state management from native inputs requires custom JavaScript and DOM structure.</p>
-<p><code>auro-radio-group</code> provides:</p>
-<ul>
-<li>A single <code>value</code> property reflecting the selected radio's value</li>
-<li><code>optionSelected</code> reference to the selected element</li>
-<li>Propagation of <code>disabled</code> state to all child radios</li>
-<li>Horizontal layout option via the <code>horizontal</code> attribute</li>
-<li><code>reset()</code> to clear selection and validation state across all children</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native radio groups support <code>required</code> via the HTML attribute, but the error message is browser-controlled and there is no standard way to display custom error text below the group.</p>
-<p><code>auro-radio-group</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Group-level <code>required</code> validation (at least one must be selected)</li>
-<li>Custom error messages via <code>setCustomValidityCustomError</code> and <code>setCustomValidityValueMissing</code></li>
-<li><code>noValidate</code> to disable auto-validation on blur</li>
-<li><code>touched</code> tracking so errors appear only after user interaction</li>
-<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
-<li>Error display via the <code>helpText</code> slot</li>
-</ul>
-<auro-header level="2" id="themingAndVisualConsistency">Theming and visual consistency</auro-header>
-<p>Native radio buttons render differently across browsers and operating systems. Their appearance — the circle, the fill, the label spacing — cannot be reliably controlled with CSS alone.</p>
-<p><code>auro-radio</code> is built with the Auro Design System:</p>
-<ul>
-<li>Consistent visual language across all browsers and platforms</li>
-<li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
-<li>CSS <code>::part()</code> selectors for targeted styling (<code>radio</code>, <code>radio-input</code>, <code>radio-label</code>)</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;input type="radio"&gt;</code></th>
-<th><code>auro-radio</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Consistent cross-browser styling</td>
-<td>No</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Group validation</td>
-<td>Manual <code>&lt;fieldset&gt;</code></td>
-<td>Built-in with <code>auro-radio-group</code></td>
-</tr>
-<tr>
-<td>Custom error messages</td>
-<td>Browser-controlled</td>
-<td>Per-constraint custom messages</td>
-</tr>
-<tr>
-<td>Roving tabindex</td>
-<td>Manual implementation</td>
-<td>Built-in</td>
-</tr>
-<tr>
-<td>Group legend</td>
-<td>Manual <code>&lt;legend&gt;</code></td>
-<td><code>legend</code> slot</td>
-</tr>
-<tr>
-<td>Horizontal layout</td>
-<td>Manual CSS</td>
-<td><code>horizontal</code> attribute</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>Browser-dependent</td>
-<td>Full design system integration</td>
-</tr>
-<tr>
-<td>Reset group</td>
-<td>Manual per-element</td>
-<td>Single <code>reset()</code> call</td>
-</tr>
-</tbody>
-</table>

package/components/select/demo/why-select.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-select.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 | Why auro-select</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-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="./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-select.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/select/demo/why-select.md DELETED Viewed

@@ -1,128 +0,0 @@
-<auro-header level="1" id="overview">Why auro-select?</auro-header>
-<p>The native <code>&lt;select&gt;</code> element is one of the most difficult HTML elements to style, has no support for rich option content, and behaves inconsistently across browsers. <code>auro-select</code> provides a fully styled, accessible, and feature-rich replacement.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native <code>&lt;select&gt;</code> has basic accessibility, but the dropdown behavior, keyboard navigation, and screen reader announcements vary between browsers and platforms.</p>
-<p><code>auro-select</code> provides:</p>
-<ul>
-<li><strong>ARIA combobox pattern</strong> — The trigger uses <code>role="combobox"</code> with <code>aria-expanded</code>, <code>aria-controls</code>, and <code>aria-activedescendant</code> for proper screen reader semantics.</li>
-<li><strong>Full keyboard navigation</strong> — Arrow Up/Down navigate options (with Alt modifier for jumping to first/last), Enter selects, Escape closes, Home/End jump to boundaries, Tab closes and advances focus.</li>
-<li><strong>Screen reader announcements</strong> — <code>aria-live="polite"</code> announces selections, <code>aria-live="assertive"</code> announces validation errors. Each option carries <code>aria-setsize</code> and <code>aria-posinset</code> for position context.</li>
-<li><strong>Active descendant</strong> — Focus stays on the trigger while arrow keys highlight options, so screen readers announce the highlighted option without disrupting focus.</li>
-</ul>
-<auro-header level="2" id="richOptionContent">Rich option content</auro-header>
-<p><code>&lt;option&gt;</code> elements accept only plain text. There is no native way to add icons, secondary text, or nested groups.</p>
-<p><code>auro-select</code> uses <code>auro-menu</code> internally, enabling:</p>
-<ul>
-<li>Full HTML content in each option (icons, descriptions, badges)</li>
-<li>Nested option groups for hierarchical organization</li>
-<li>Checkmark indicators for the selected option</li>
-<li>Option sizing (sm, md) for different information density</li>
-</ul>
-<auro-header level="2" id="multiselect">Multi-select</auro-header>
-<p>Native <code>&lt;select multiple&gt;</code> renders a scrollable list box — a UI pattern widely regarded as confusing. Users must Ctrl+click to select multiple items, and there is no checkmark or visual feedback.</p>
-<p><code>auro-select</code> with <code>multiSelect</code> provides:</p>
-<ul>
-<li>A dropdown trigger that stays closed between selections</li>
-<li>Checkmarks on each selected option</li>
-<li>A JSON-stringified array value for easy consumption</li>
-<li><code>clearSelection()</code> to reset all selections</li>
-</ul>
-<auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
-<p>Native <code>&lt;select&gt;</code> renders a browser-controlled popup that cannot be repositioned, resized, or presented differently on mobile.</p>
-<p><code>auro-select</code> adapts to the viewport:</p>
-<ul>
-<li><strong>Desktop</strong> — Options appear in a positioned dropdown using Floating UI, with configurable placement, offset, flip, shift, and auto-placement</li>
-<li><strong>Mobile</strong> — Options open in a fullscreen dialog below a configurable breakpoint (<code>fullscreenBreakpoint</code>)</li>
-<li><strong>Width control</strong> — <code>matchWidth</code> sizes the dropdown to the trigger, <code>flexMenuWidth</code> lets it size independently</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native <code>&lt;select&gt;</code> validation is limited to <code>required</code>. Error messages are browser-controlled.</p>
-<p><code>auro-select</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Required field validation with custom messaging</li>
-<li>Custom error messages per validity state (<code>setCustomValidityCustomError</code>, <code>setCustomValidityValueMissing</code>)</li>
-<li><code>noValidate</code> to disable auto-validation on blur</li>
-<li>Error display via the <code>helpText</code> slot</li>
-<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
-</ul>
-<auro-header level="2" id="displayValueCustomization">Display value customization</auro-header>
-<p>Native <code>&lt;select&gt;</code> always shows the selected option's text. There is no way to display a formatted or alternative representation.</p>
-<p><code>auro-select</code> provides:</p>
-<ul>
-<li>A <code>displayValue</code> slot for custom HTML rendering of the selected value</li>
-<li>A <code>valueText</code> slot for formatted text display</li>
-<li>A <code>placeholder</code> slot (or attribute) for empty-state messaging</li>
-<li><code>forceDisplayValue</code> to always show the custom display slot</li>
-</ul>
-<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
-<p>Native <code>&lt;select&gt;</code> styling is notoriously difficult. The dropdown arrow, option list, and selected value display are all browser-controlled and resist CSS customization.</p>
-<p><code>auro-select</code> is built with the Auro Design System:</p>
-<ul>
-<li>Three layout options: classic, emphasized, snowflake</li>
-<li>Shape variants: box, pill, pill-left, pill-right</li>
-<li>Size options (lg, xl for emphasized layout)</li>
-<li>Light and dark theme support (<code>appearance</code>)</li>
-<li>CSS <code>::part()</code> selectors (<code>dropdownTrigger</code>, <code>dropdownChevron</code>, <code>dropdownSize</code>, <code>helpText</code>)</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;select&gt;</code></th>
-<th><code>auro-select</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Styleable dropdown</td>
-<td>No (browser-controlled)</td>
-<td>Fully styled</td>
-</tr>
-<tr>
-<td>Rich HTML in options</td>
-<td>Plain text only</td>
-<td>Full HTML (icons, groups, descriptions)</td>
-</tr>
-<tr>
-<td>Multi-select UX</td>
-<td>Ctrl+click list box</td>
-<td>Checkmark dropdown</td>
-</tr>
-<tr>
-<td>Keyboard navigation</td>
-<td>Basic</td>
-<td>Full (arrows, Alt+arrows, Home/End)</td>
-</tr>
-<tr>
-<td>Screen reader announcements</td>
-<td>Varies by browser</td>
-<td>Consistent ARIA live regions</td>
-</tr>
-<tr>
-<td>Mobile fullscreen</td>
-<td>No</td>
-<td>Automatic at breakpoint</td>
-</tr>
-<tr>
-<td>Viewport-aware positioning</td>
-<td>No</td>
-<td>Floating UI with flip/shift/auto</td>
-</tr>
-<tr>
-<td>Custom validation messages</td>
-<td>Browser-controlled</td>
-<td>Per-constraint custom messages</td>
-</tr>
-<tr>
-<td>Display value customization</td>
-<td>No</td>
-<td><code>displayValue</code> and <code>valueText</code> slots</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>No</td>
-<td>Three layouts + appearance modes</td>
-</tr>
-</tbody>
-</table>