@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/demo/index.md

@@ -1,7 +1,7 @@
 <!--
- THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
- ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
- ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
+THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
 # Counter
@@ -30,23 +30,21 @@ The counter component provides a simple interface for incrementing or decrementi
 This example demonstrates most basic implementation of a standalone counter.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
-  <auro-counter>
-    Adults
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
+<auro-counter>
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 
-```html
-<auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
   Adults
-</auro-counter>
-```
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -55,38 +53,36 @@ This example demonstrates most basic implementation of a standalone counter.
 Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-counter-group>
-    <auro-counter>
-      Short label
-    </auro-counter>
-    <auro-counter>
-      Another short label
-    </auro-counter>
-    <auro-counter>
-      This is an example of the wrapping behavior for a long label
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-counter-group>
+<auro-counter>
+Short label
+</auro-counter>
+<auro-counter>
+Another short label
+</auro-counter>
+<auro-counter>
+This is an example of the wrapping behavior for a long label
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-counter-group>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group&gt;
+  &lt;auro-counter&gt;
     Short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Another short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/demo/keyboard-behavior.md

@@ -0,0 +1,127 @@
+<auro-header level="1" id="overview">Counter & Counter Group - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+<auro-header level="3" id="tabBehaviorCounter">Counter</auro-header>
+<p>The counter component is itself a focusable element. There are no sub-parts that are separately focusable.</p>
+<auro-header level="3" id="tabBehaviorCounterGroup">Counter Group</auro-header>
+<p>When multiple counters are placed inside a counter group the component behaves as an auro-dropdown. The trigger element renders a counter group label and a summary of all counter labels and current values. The dropdown bib renders all counters inside of the group.</p>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/tabindex.md) -->
+<!-- The below content is automatically added from ./../../dropdown/docs/partials/tabindex.md -->
+<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior, i.e., these keys step through the browser tabindex sequence.</auro-hyperlink></p>
+<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="2" id="keyEvents">Key Events</auro-header>
+<auro-header level="3" id="keyEventsCounter">Counter</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents-counter.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents-counter.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>ArrowDown</td>
+<td>-</td>
+<td>*</td>
+<td>
+Trigger element.
+</td>
+<td>Decrements the counter value by 1.</td>
+</tr>
+<tr>
+<td>ArrowUp</td>
+<td>-</td>
+<td>*</td>
+<td>
+Trigger element.
+</td>
+<td>Increments the counter value by 1.</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="note">
+<p><strong>Note:</strong> The following keyboard behavior is unsupported at this time:</p>
+<ul>
+<li><strong>Home:</strong> sets the counter value to the defined minimum (default 0)</li>
+<li><strong>End:</strong> sets the counter value to the defined maximum (default 9)</li>
+<li><strong>PageUp:</strong> (optional) Increases the value by a larger step than Up Arrow.</li>
+<li><strong>PageDown:</strong> (optional) Decreases the value by a larger step than Down Arrow.</li>
+</ul>
+</div>
+<auro-header level="3" id="keyEventsCounterGroup">Counter Group</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents-counterGroup.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents-counterGroup.md -->
+<p>The counter group itself does not have any key event handlers other than those inherited from the dropdown component. However, when the counter group is <strong>expanded</strong> or <strong>opened</strong> the first counter in the bib receives <strong>focus</strong>. When the counter group is <strong>collapsed</strong> or <strong>closed</strong> by any method other than the <code>Tab</code> key (e.g., the <strong>Escape</strong> key), <strong>focus</strong> moves to the trigger element.</p>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="4" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../../dropdown/docs/partials/keyEvents.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="2">Enter</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Component <code>:host</code> or any <strong>focusable</strong> element within the component.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td rowspan="2">Space</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</div>

package/components/counter/demo/readme.md

@@ -45,9 +45,7 @@ The `auro-counter` element should be used in situations where users may:
 
 #### NPM Installation
 
-```shell
-$ npm i @aurodesignsystem/auro-formkit
-```
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -56,13 +54,11 @@ $ npm i @aurodesignsystem/auro-formkit
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
-```json
-{
+<pre class="language-json"><code class="language-json">{
     "compilerOptions": {
         "moduleResolution": "bundler"
     }
-}
-```
+}</code></pre>
 
 This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -73,9 +69,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm"></script>
-```
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -89,9 +83,7 @@ Running the `dev` command will open a `localhost` development server for all com
 
 To only develop a single component, use the `--filter` flag:
 
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
+<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
@@ -106,56 +98,52 @@ However, if you need to load multiple versions of the same component on a single
 
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-```js
-// Import the class only
+<pre class="language-js"><code class="language-js">// Import the class only
 import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
-
+​
 // Register with a custom name if desired
 AuroCounter.register('custom-counter');
-AuroCounterGroup.register('custom-counter-group');
-```
+AuroCounterGroup.register('custom-counter-group');</code></pre>
 
 This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <custom-counter-group>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <custom-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </custom-counter>
-    <custom-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </custom-counter>
-  </custom-counter-group>
+<custom-counter-group>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<div slot="label">Passengers</div>
+<custom-counter>
+Adults
+<span slot="description">18 years or older</span>
+</custom-counter>
+<custom-counter>
+Children
+<span slot="description">2-17 years</span>
+</custom-counter>
+</custom-counter-group>
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 
-```html
-  <custom-counter-group>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <custom-counter>
+<pre class="language-html"><code class="language-html">  &lt;custom-counter-group&gt;
+    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+    &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+    &lt;custom-counter&gt;
       Adults
-      <span slot="description">18 years or older</span>
-    </custom-counter>
-    <custom-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/custom-counter&gt;
+    &lt;custom-counter&gt;
       Children
-      <span slot="description">2-17 years</span>
-    </custom-counter>
-  </custom-counter-group>
-
+      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+    &lt;/custom-counter&gt;
+  &lt;/custom-counter-group&gt;
+​
 ```html
-  <custom-checkbox-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-  </custom-checkbox-group>
-```
+  &lt;custom-checkbox-group&gt;
+    &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+    &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+    &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+    &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+    &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
+  &lt;/custom-checkbox-group&gt;</code></pre>
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/counter/dist/auro-counter-group.d.ts

@@ -171,9 +171,9 @@ export class AuroCounterGroup extends AuroElement {
     max: any;
     min: any;
     onDark: boolean;
-    total: number;
+    total: number | undefined;
     validity: any;
-    value: {};
+    value: {} | undefined;
     matchWidth: boolean;
     isDropdown: boolean;
     fullscreenBreakpoint: string;

package/components/counter/dist/auro-counter.d.ts

@@ -12,7 +12,7 @@ export class AuroCounter extends LitElement {
     static get shadowRootOptions(): {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -21,7 +21,7 @@ export class AuroCounter extends LitElement {
      * Defines reactive properties for the component.
      * @returns {Object} Property configuration.
      */
-    static get properties(): any;
+    static get properties(): Object;
     /**
      * Registers the custom element with the browser.
      * @param {string} [name="auro-counter"] - The name of the element that you want to register.
@@ -31,14 +31,14 @@ export class AuroCounter extends LitElement {
     static register(name?: string): void;
     static get styles(): import("lit").CSSResult[];
     _initializeDefaults(): void;
-    appearance: string;
+    appearance: string | undefined;
     defaultSlot: any;
-    disabled: boolean;
-    disableMax: boolean;
-    disableMin: boolean;
-    max: number;
-    min: number;
-    onDark: boolean;
+    disabled: boolean | undefined;
+    disableMax: boolean | undefined;
+    disableMin: boolean | undefined;
+    max: number | undefined;
+    min: number | undefined;
+    onDark: boolean | undefined;
     validity: any;
     /**
      * Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.
@@ -68,7 +68,7 @@ export class AuroCounter extends LitElement {
      * @private
      */
     private runtimeUtils;
-    _value: number;
+    _value: number | undefined;
     /**
      * Increments the counter value by 1. If a value is provided, it increments by that amount.
      * @method increment

package/components/counter/dist/index.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/counter/dist/registered.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {