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

package/components/combobox/dist/registered.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605190056';
+var formkitVersion$2 = '202605201522';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -6208,9 +6208,9 @@ class AuroDropdown extends AuroElement$2 {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -6218,13 +6218,15 @@ class AuroDropdown extends AuroElement$2 {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }
@@ -13164,7 +13166,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605190056';
+var formkitVersion$1 = '202605201522';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14237,7 +14239,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/counter/demo/customize.min.js

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605190056';
+var formkitVersion$1 = '202605201522';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5867,7 +5867,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -6864,9 +6864,9 @@ class AuroDropdown extends AuroElement$1 {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -6874,13 +6874,15 @@ class AuroDropdown extends AuroElement$1 {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

package/components/counter/demo/index.min.js

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605190056';
+var formkitVersion$1 = '202605201522';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5867,7 +5867,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605190056';
+var formkitVersion = '202605201522';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -6864,9 +6864,9 @@ class AuroDropdown extends AuroElement$1 {
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
-        if (sibling !== current && !sibling.inert) {
+        if (sibling !== current) {
+          this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
           sibling.inert = true;
-          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -6874,13 +6874,15 @@ class AuroDropdown extends AuroElement$1 {
   }
 
   /**
-   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Preserves the previous inert state so externally-inerted elements are
+   * not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const sibling of this._inertSiblings) {
-        sibling.inert = false;
+      for (const entry of this._inertSiblings) {
+        entry.element.inert = entry.wasInert;
       }
       this._inertSiblings = undefined;
     }

package/components/counter/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-counter.md","readme.md"]

package/components/counter/demo/why-counter.html

@@ -0,0 +1,57 @@
+<!--
+  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

@@ -0,0 +1,108 @@
+<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>