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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1475.6",
+  "version": "0.0.0-pr1477.1",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -108,7 +108,7 @@
     "@aurodesignsystem/auro-icon": "^9.1.1",
     "@aurodesignsystem/auro-library": "^5.12.2",
     "@aurodesignsystem/auro-loader": "^6.2.0",
-    "@aurodesignsystem/auro-popover": "npm:@aurodesignsystem-dev/auro-popover@0.0.0-pr127.14",
+    "@aurodesignsystem/auro-popover": "^6.0.0",
     "@aurodesignsystem/build-tools": "*",
     "@aurodesignsystem/config": "*",
     "@aurodesignsystem/design-tokens": "^8.16.0",

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

@@ -1,86 +0,0 @@
-<auro-header level="1" id="overview">Why auro-checkbox?</auro-header>
-<p>The native HTML <code>&lt;input type="checkbox"&gt;</code> is functional but minimal. It cannot be styled consistently across browsers, offers no group-level validation, and provides no integration with a design system. <code>auro-checkbox</code> and <code>auro-checkbox-group</code> address these gaps.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native checkboxes have basic accessibility, but managing groups of related checkboxes — with a shared legend, coordinated validation, and consistent keyboard behavior — requires significant custom work.</p>
-<p><code>auro-checkbox</code> provides:</p>
-<ul>
-<li><strong>Proper ARIA semantics</strong> — Each checkbox carries <code>role="checkbox"</code>, <code>aria-checked</code>, and <code>aria-disabled</code> attributes that stay in sync with component state.</li>
-<li><strong>Automatic label binding</strong> — Slot content is automatically associated as the accessible label, eliminating <code>&lt;label for&gt;</code> wiring.</li>
-<li><strong>Group-level semantics</strong> — <code>auro-checkbox-group</code> wraps checkboxes with a <code>legend</code> slot, giving screen readers a clear group description.</li>
-<li><strong>Keyboard interaction</strong> — Space toggles the checkbox, matching the expected interaction pattern.</li>
-</ul>
-<auro-header level="2" id="groupManagement">Group management</auro-header>
-<p>HTML has no native concept of a checkbox group. Building one requires manual DOM wiring for legends, error messages, and validation state.</p>
-<p><code>auro-checkbox-group</code> handles this with:</p>
-<ul>
-<li>A coordinated <code>value</code> array reflecting all checked items</li>
-<li>Group-level <code>required</code> validation (at least one must be selected)</li>
-<li>Propagation of <code>disabled</code> state to all child checkboxes</li>
-<li>Horizontal layout option for compact groups (up to 3 items)</li>
-<li>A single <code>reset()</code> method that clears all checkboxes and validation state</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native checkboxes support <code>required</code> on individual inputs, but there is no way to require "at least one selected" across a group without JavaScript.</p>
-<p><code>auro-checkbox-group</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Group-level <code>required</code> validation</li>
-<li>Custom error messages via <code>setCustomValidity</code> and <code>setCustomValidityValueMissing</code></li>
-<li><code>touched</code> tracking so errors only appear after user interaction</li>
-<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
-</ul>
-<auro-header level="2" id="themingAndVisualConsistency">Theming and visual consistency</auro-header>
-<p>Native checkboxes render differently across browsers and operating systems. Their appearance cannot be reliably controlled with CSS alone.</p>
-<p><code>auro-checkbox</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>checkbox</code>, <code>checkbox-input</code>, <code>checkbox-label</code>)</li>
-<li>Embedded checkmark SVG that renders only when checked</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;input type="checkbox"&gt;</code></th>
-<th><code>auro-checkbox</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>Not supported</td>
-<td>Built-in with <code>auro-checkbox-group</code></td>
-</tr>
-<tr>
-<td>Custom error messages</td>
-<td>Not supported</td>
-<td>Per-constraint custom messages</td>
-</tr>
-<tr>
-<td>Accessible group labeling</td>
-<td>Manual <code>&lt;fieldset&gt;</code>/<code>&lt;legend&gt;</code></td>
-<td>Automatic via <code>legend</code> slot</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>Browser-dependent</td>
-<td>Full design system integration</td>
-</tr>
-<tr>
-<td>Horizontal layout</td>
-<td>Manual CSS</td>
-<td><code>horizontal</code> attribute</td>
-</tr>
-<tr>
-<td>Reset all in group</td>
-<td>Manual</td>
-<td>Single <code>reset()</code> call</td>
-</tr>
-</tbody>
-</table>

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

@@ -1,113 +0,0 @@
-<auro-header level="1" id="overview">Why auro-combobox?</auro-header>
-<p>The native <code>&lt;input list&gt;</code> with <code>&lt;datalist&gt;</code> provides a basic autocomplete experience, but it cannot be styled, has no concept of required selection, and offers no mobile-friendly layout. <code>auro-combobox</code> is a fully featured autocomplete and selection component designed for real-world use.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native <code>&lt;datalist&gt;</code> support varies between browsers. Some announce suggestion counts, others do not. Keyboard behavior is inconsistent, and there is no standard way to communicate selection state to screen readers.</p>
-<p><code>auro-combobox</code> provides:</p>
-<ul>
-<li><strong>ARIA combobox pattern</strong> — The input carries <code>aria-expanded</code>, <code>aria-owns</code>, and <code>aria-haspopup</code> to properly describe the relationship between the input and the suggestions list.</li>
-<li><strong>Active descendant tracking</strong> — <code>aria-activedescendant</code> moves with keyboard navigation so screen readers announce the highlighted option without moving DOM focus.</li>
-<li><strong>Live region announcements</strong> — Selections are announced via <code>aria-live="polite"</code>, and validation errors use <code>aria-live="assertive"</code>.</li>
-<li><strong>Full keyboard navigation</strong> — Arrow keys navigate options, Enter selects, Escape closes, Home/End jump to boundaries. A dedicated keyboard strategy handles all interactions.</li>
-</ul>
-<auro-header level="2" id="dualBehaviorModes">Dual behavior modes</auro-header>
-<p>Native <code>&lt;datalist&gt;</code> always allows freeform input. There is no way to restrict the user to only the provided options.</p>
-<p><code>auro-combobox</code> supports two modes:</p>
-<ul>
-<li><strong>Suggestion mode</strong> (default) — The user can type any value. Suggestions are offered but not required.</li>
-<li><strong>Filter mode</strong> — The user must select from the available options. Typed text filters the list but cannot be submitted as a value. Validation enforces this constraint.</li>
-</ul>
-<auro-header level="2" id="realtimeFiltering">Real-time filtering</auro-header>
-<p><code>&lt;datalist&gt;</code> filtering is browser-controlled and cannot be customized. Some browsers match from the start of the option text, others match anywhere.</p>
-<p><code>auro-combobox</code> filters options as the user types, with full control:</p>
-<ul>
-<li><code>noFilter</code> disables filtering to show all options regardless of input</li>
-<li><code>matchWord</code> highlights the matched portion of each option</li>
-<li><code>persistInput</code> keeps the filter text visible after selection</li>
-</ul>
-<auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
-<p>Native <code>&lt;datalist&gt;</code> renders a small browser-controlled popup that cannot be repositioned or resized.</p>
-<p><code>auro-combobox</code> adapts to the viewport:</p>
-<ul>
-<li><strong>Desktop</strong> — Suggestions appear as a positioned dropdown using Floating UI, with configurable placement, offset, flip, and shift behavior</li>
-<li><strong>Mobile</strong> — Suggestions open in a fullscreen dialog via <code>showModal()</code>, with a configurable breakpoint (<code>fullscreenBreakpoint</code>)</li>
-<li><strong>Width matching</strong> — The dropdown can match the input width or size independently</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native <code>&lt;datalist&gt;</code> has no built-in validation beyond standard <code>required</code>.</p>
-<p><code>auro-combobox</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Required field validation with mode-aware messaging (separate messages for suggestion vs. filter mode)</li>
-<li>Custom error messages per validity state (<code>setCustomValidityCustomError</code>, <code>setCustomValidityValueMissing</code>, <code>setCustomValidityValueMissingFilter</code>)</li>
-<li>Validation on blur with <code>noValidate</code> opt-out</li>
-<li>Error display via help text with <code>role="alert"</code></li>
-</ul>
-<auro-header level="2" id="inputMasking">Input masking</auro-header>
-<p><code>&lt;datalist&gt;</code> inputs have no formatting support.</p>
-<p><code>auro-combobox</code> supports input masks via the <code>format</code> attribute, enabling structured input (e.g., dates, phone numbers) while still offering suggestions.</p>
-<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
-<p><code>&lt;datalist&gt;</code> styling is entirely browser-controlled. The popup cannot be themed, and option rendering is limited to plain text.</p>
-<p><code>auro-combobox</code> is built with the Auro Design System:</p>
-<ul>
-<li>Three layout options: classic, emphasized, and snowflake</li>
-<li>Light and dark theme support (<code>appearance</code>)</li>
-<li>Checkmarks on selected options</li>
-<li>Rich HTML content in options (icons, descriptions, nested structure)</li>
-<li>CSS <code>::part()</code> selectors for styling</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;input list&gt;</code> + <code>&lt;datalist&gt;</code></th>
-<th><code>auro-combobox</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>Restrict to options only</td>
-<td>No</td>
-<td>Yes (filter mode)</td>
-</tr>
-<tr>
-<td>Real-time filtering control</td>
-<td>Browser-controlled</td>
-<td>Fully configurable</td>
-</tr>
-<tr>
-<td>Keyboard navigation</td>
-<td>Inconsistent</td>
-<td>Full arrow/Enter/Escape/Home/End</td>
-</tr>
-<tr>
-<td>Screen reader announcements</td>
-<td>Inconsistent</td>
-<td>Live regions and active descendant</td>
-</tr>
-<tr>
-<td>Mobile fullscreen</td>
-<td>No</td>
-<td>Automatic at breakpoint</td>
-</tr>
-<tr>
-<td>Input masking</td>
-<td>No</td>
-<td>Yes (format attribute)</td>
-</tr>
-<tr>
-<td>Custom validation messages</td>
-<td>No</td>
-<td>Per-constraint messages</td>
-</tr>
-<tr>
-<td>Rich option content</td>
-<td>Plain text only</td>
-<td>Full HTML</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>No</td>
-<td>Three layouts + appearance modes</td>
-</tr>
-</tbody>
-</table>

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

@@ -1,108 +0,0 @@
-<auro-header level="1" id="overview">Why auro-counter?</auro-header>
-<p>The native <code>&lt;input type="number"&gt;</code> provides a basic numeric input, but it lacks the spinbutton accessibility pattern, has no concept of grouped counters with shared constraints, and renders inconsistently across browsers. <code>auro-counter</code> and <code>auro-counter-group</code> provide an accessible, feature-rich alternative.</p>
-<auro-header level="2" id="accessibility">Accessibility</auro-header>
-<p>Native number inputs have limited screen reader support. The browser-rendered increment/decrement buttons are often small, difficult to interact with, and announced inconsistently.</p>
-<p><code>auro-counter</code> provides:</p>
-<ul>
-<li><strong>ARIA spinbutton pattern</strong> — The component uses <code>role="spinbutton"</code> with <code>aria-valuemin</code>, <code>aria-valuemax</code>, <code>aria-valuenow</code>, and <code>aria-valuetext</code> for complete screen reader semantics.</li>
-<li><strong>Labeled controls</strong> — Increment and decrement buttons have customizable ARIA labels via <code>ariaLabel.plus</code> and <code>ariaLabel.minus</code> slots.</li>
-<li><strong>Keyboard shortcuts</strong> — Arrow Up/Down, Ctrl+Arrow, and +/- keys all increment and decrement the value. These shortcuts go beyond what native number inputs provide.</li>
-<li><strong>Focus delegation</strong> — <code>delegatesFocus</code> ensures focus reaches the interactive control regardless of where the user clicks.</li>
-<li><strong>Description binding</strong> — The <code>description</code> slot content is linked via <code>aria-describedByElements</code> for additional context.</li>
-</ul>
-<auro-header level="2" id="smartButtonState">Smart button state</auro-header>
-<p>Native number inputs allow the user to type or spin past the min/max bounds, then rely on validation to catch the error.</p>
-<p><code>auro-counter</code> takes a proactive approach:</p>
-<ul>
-<li>The decrement button disables automatically at <code>min</code></li>
-<li>The increment button disables automatically at <code>max</code></li>
-<li>In a group, buttons disable based on the aggregate total, preventing any individual counter from pushing the group past its constraints</li>
-</ul>
-<auro-header level="2" id="counterGroups">Counter groups</auro-header>
-<p>HTML has no concept of related numeric inputs with a shared constraint. For example, a passenger selector with "Adults", "Children", and "Infants" that must total no more than 9 requires custom JavaScript.</p>
-<p><code>auro-counter-group</code> handles this with:</p>
-<ul>
-<li>An aggregate <code>total</code> computed from all child counters</li>
-<li>Group-level <code>min</code> and <code>max</code> constraints applied across all children</li>
-<li>A <code>value</code> object with named entries (e.g., <code>{ adults: 2, children: 1 }</code>)</li>
-<li>Dynamic button disabling — when the group total reaches max, all increment buttons disable; when it reaches min, all decrement buttons disable</li>
-<li>Group-level validation that aggregates individual counter errors</li>
-<li>Optional dropdown presentation with <code>isDropdown</code> for compact UI</li>
-</ul>
-<auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
-<p>Native number inputs have no concept of responsive presentation.</p>
-<p><code>auro-counter-group</code> in dropdown mode adapts to the viewport:</p>
-<ul>
-<li><strong>Desktop</strong> — Counters appear in a positioned dropdown panel</li>
-<li><strong>Mobile</strong> — Counters open in a fullscreen dialog with a configurable breakpoint</li>
-<li>Layout options (classic, snowflake) control visual presentation</li>
-</ul>
-<auro-header level="2" id="validation">Validation</auro-header>
-<p>Native number input validation is limited to <code>min</code>, <code>max</code>, <code>step</code>, and <code>required</code>.</p>
-<p><code>auro-counter</code> integrates with the Auro form validation system:</p>
-<ul>
-<li>Group-level validation aggregates errors from all child counters</li>
-<li><code>touched</code> tracking ensures errors appear only after interaction</li>
-<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
-</ul>
-<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
-<p>Native number inputs render browser-specific controls that cannot be styled consistently.</p>
-<p><code>auro-counter</code> is built with the Auro Design System:</p>
-<ul>
-<li>Consistent visual language with clearly labeled +/- buttons</li>
-<li>Light and dark theme support (<code>appearance</code>)</li>
-<li>CSS <code>::part()</code> selectors (<code>counterControl</code>, <code>controlPlus</code>, <code>controlMinus</code>, <code>helpText</code>)</li>
-<li>Design token integration for sizing and spacing</li>
-</ul>
-<auro-header level="2" id="summary">Summary</auro-header>
-<table>
-<thead>
-<tr>
-<th>Capability</th>
-<th><code>&lt;input type="number"&gt;</code></th>
-<th><code>auro-counter</code></th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>ARIA spinbutton semantics</td>
-<td>No</td>
-<td>Full implementation</td>
-</tr>
-<tr>
-<td>Auto-disable at min/max</td>
-<td>No</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Grouped counters with shared max</td>
-<td>Not supported</td>
-<td>Built-in with <code>auro-counter-group</code></td>
-</tr>
-<tr>
-<td>Aggregate value object</td>
-<td>Not supported</td>
-<td><code>{ name: value }</code> pairs</td>
-</tr>
-<tr>
-<td>Keyboard shortcuts</td>
-<td>Arrow keys only</td>
-<td>Arrows, Ctrl+Arrows, +/-</td>
-</tr>
-<tr>
-<td>Mobile fullscreen (group)</td>
-<td>No</td>
-<td>Automatic at breakpoint</td>
-</tr>
-<tr>
-<td>Consistent cross-browser UI</td>
-<td>No</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Theming</td>
-<td>Browser-dependent</td>
-<td>Full design system integration</td>
-</tr>
-</tbody>
-</table>

package/components/datepicker/demo/customize.js DELETED Viewed

@@ -1,19 +0,0 @@
-import { AuroDatePicker } from '../src/auro-datepicker.js';
-import { localizationExample } from '../apiExamples/localization.js';
-AuroDatePicker.register();
-export function initExamples(initCount) {
-  initCount = initCount || 0;
-  try {
-    localizationExample();
-  } catch {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}