@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.22 → 0.0.0-pr1451.24

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

@@ -1690,7 +1690,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/getting-started.md

@@ -8,6 +8,9 @@
 <auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
 <auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
 <auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
+<auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
+<auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
+<auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
 <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
 <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
 <auro-anchorlink fluid href="#slotsGroup" class="level2 body-xs">auro-checkbox-group</auro-anchorlink>
@@ -120,6 +123,157 @@ This will create a new custom element <code>&gt;custom-checkbox&lt;</code> and <
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
+<auro-header level="2" id="frameworks">Frameworks</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion class="section" id="react">
+<span slot="trigger">React</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
+React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code>&lt;auro-checkbox&gt;</code> works directly in JSX without any wrapper library.
+
+<auro-header level="3" id="reactImport">Import the Component</auro-header>
+Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
+
+<pre class="language-js"><code class="language-js">import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+​
+AuroCheckbox.register('[custom]-checkbox');
+AuroCheckboxGroup.register('[custom]-checkbox-group');</code></pre>
+
+<auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
+The component ships with TypeScript type definitions for the `AuroCheckbox` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-checkbox>` in JSX, add the following declaration to a `.d.ts` file in your project:
+
+<pre class="language-js"><code class="language-js">import type { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+​
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      '[custom]-checkbox': React.HTMLAttributes&lt;AuroCheckbox&gt; &amp; Partial&lt;AuroCheckbox&gt;;
+      '[custom]-checkbox-group': React.HTMLAttributes&lt;AuroCheckboxGroup&gt; &amp; Partial&lt;AuroCheckboxGroup&gt;;
+    }
+  }
+}</code></pre>
+
+<auro-header level="3" id="reactEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
+
+<pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
+​
+function MyCheckboxGroup() {
+  const groupRef = useRef&lt;HTMLElement&gt;(null);
+​
+  useEffect(() =&gt; {
+    const el = groupRef.current;
+    if (!el) return;
+​
+    const handleInput = () =&gt; {
+      console.log('Selected values:', (el as any).value);
+    };
+​
+    el.addEventListener('input', handleInput);
+    return () =&gt; el.removeEventListener('input', handleInput);
+  }, []);
+​
+  return (
+    &lt;custom-checkbox-group ref={groupRef}&gt;
+      &lt;span slot="legend"&gt;Select options&lt;/span&gt;
+      &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
+      &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
+    &lt;/custom-checkbox-group&gt;
+  );
+}</code></pre>
+
+<auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="svelte">
+<span slot="trigger">Svelte</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
+Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-checkbox&gt;</code> works directly in Svelte templates without any wrapper or configuration.
+
+<auro-header level="3" id="svelteImport">Import the Component</auro-header>
+Import and register the components in the `<script>` block:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+​
+  AuroCheckbox.register('[custom]-checkbox');
+  AuroCheckboxGroup.register('[custom]-checkbox-group');
+&lt;/script&gt;</code></pre>
+
+<auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
+Use `<auro-checkbox-group>` directly in your Svelte template:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+​
+  AuroCheckbox.register('[custom]-checkbox');
+  AuroCheckboxGroup.register('[custom]-checkbox-group');
+&lt;/script&gt;
+&lt;custom-checkbox-group&gt;
+  &lt;span slot="legend"&gt;Select options&lt;/span&gt;
+  &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
+  &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
+&lt;/custom-checkbox-group&gt;</code></pre>
+
+<auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
+Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-checkbox>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
+
+<pre class="language-js"><code class="language-js">import type { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+​
+declare namespace svelteHTML {
+  interface IntrinsicElements {
+    '[custom]-checkbox': Partial&lt;AuroCheckbox&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCheckbox&gt;;
+    '[custom]-checkbox-group': Partial&lt;AuroCheckboxGroup&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCheckboxGroup&gt;;
+  }
+}</code></pre>
+
+This enables prop hinting for attributes like `value`, `checked`, `disabled`, and others directly in Svelte templates.
+
+<auro-header level="3" id="svelteEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Use the `oninput` handler directly on the group element:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  let values = $state&lt;string[]&gt;([]);
+​
+  function handleInput(e: Event) {
+    values = (e.target as HTMLElement &amp; { value: string[] }).value;
+  }
+&lt;/script&gt;
+&lt;custom-checkbox-group oninput={handleInput}&gt;
+  &lt;span slot="legend"&gt;Select options&lt;/span&gt;
+  &lt;custom-checkbox value="option1" name="example"&gt;Option 1&lt;/custom-checkbox&gt;
+  &lt;custom-checkbox value="option2" name="example"&gt;Option 2&lt;/custom-checkbox&gt;
+&lt;/custom-checkbox-group&gt;
+&lt;p&gt;Selected: {values}&lt;/p&gt;</code></pre>
+
+<auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
 <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
 <p>Every <code>&lt;auro-checkbox-group&gt;</code> implementation requires:</p>
 <ol>

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

@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -5229,7 +5229,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12981,7 +12981,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14046,7 +14046,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 var styleCss$3 = i$7`.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/combobox/demo/customize.min.js

@@ -5140,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12892,7 +12892,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13957,7 +13957,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 var styleCss$3 = i$7`.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/combobox/demo/getting-started.min.js

@@ -5140,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12892,7 +12892,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13957,7 +13957,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 var styleCss$3 = i$7`.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/combobox/demo/index.min.js

@@ -5155,7 +5155,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12907,7 +12907,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13972,7 +13972,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 var styleCss$3 = i$7`.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/combobox/dist/index.js

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 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/combobox/dist/registered.js

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605050043';
+var formkitVersion$2 = '202605050131';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605050043';
+var formkitVersion = '202605050131';
 
 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/api.min.js

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // 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 = '202605050043';
+var formkitVersion = '202605050131';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/demo/getting-started.md

@@ -8,6 +8,9 @@
 <auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
 <auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
 <auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
+<auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
+<auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
+<auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
 <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
 <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
 <auro-anchorlink fluid href="#slotsGroup" class="level2 body-xs">auro-counter-group</auro-anchorlink>
@@ -125,6 +128,153 @@ Then use the elements in your HTML:
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
+<auro-header level="2" id="frameworks">Frameworks</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion class="section" id="react">
+<span slot="trigger">React</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
+React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code>&lt;auro-counter&gt;</code> works directly in JSX without any wrapper library.
+
+<auro-header level="3" id="reactImport">Import the Component</auro-header>
+Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
+
+<pre class="language-js"><code class="language-js">import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+AuroCounter.register('[custom]-counter');
+AuroCounterGroup.register('[custom]-counter-group');</code></pre>
+
+<auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
+The component ships with TypeScript type definitions for the `AuroCounter` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-counter>` in JSX, add the following declaration to a `.d.ts` file in your project:
+
+<pre class="language-js"><code class="language-js">import type { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      '[custom]-counter': React.HTMLAttributes&lt;AuroCounter&gt; &amp; Partial&lt;AuroCounter&gt;;
+      '[custom]-counter-group': React.HTMLAttributes&lt;AuroCounterGroup&gt; &amp; Partial&lt;AuroCounterGroup&gt;;
+    }
+  }
+}</code></pre>
+
+<auro-header level="3" id="reactEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
+
+<pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
+​
+function MyCounterGroup() {
+  const groupRef = useRef&lt;HTMLElement&gt;(null);
+​
+  useEffect(() =&gt; {
+    const el = groupRef.current;
+    if (!el) return;
+​
+    const handleInput = () =&gt; {
+      console.log('Counter value:', (el as any).value);
+    };
+​
+    el.addEventListener('countChanged', handleInput);
+    return () =&gt; el.removeEventListener('countChanged', handleInput);
+  }, []);
+​
+  return (
+    &lt;custom-counter-group&gt;
+      &lt;span slot="label"&gt;Passengers&lt;/span&gt;
+      &lt;custom-counter ref={groupRef}&gt;Adults&lt;/custom-counter&gt;
+      &lt;custom-counter&gt;Children&lt;/custom-counter&gt;
+    &lt;/custom-counter-group&gt;
+  );
+}</code></pre>
+
+<auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="svelte">
+<span slot="trigger">Svelte</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
+Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-counter&gt;</code> works directly in Svelte templates without any wrapper or configuration.
+
+<auro-header level="3" id="svelteImport">Import the Component</auro-header>
+Import and register the components in the `<script>` block:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+  AuroCounter.register('[custom]-counter');
+  AuroCounterGroup.register('[custom]-counter-group');
+&lt;/script&gt;</code></pre>
+
+<auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
+Use `<auro-counter-group>` directly in your Svelte template:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+  AuroCounter.register('[custom]-counter');
+  AuroCounterGroup.register('[custom]-counter-group');
+&lt;/script&gt;
+&lt;custom-counter-group&gt;
+  &lt;span slot="label"&gt;Passengers&lt;/span&gt;
+  &lt;custom-counter&gt;Adults&lt;/custom-counter&gt;
+  &lt;custom-counter&gt;Children&lt;/custom-counter&gt;
+&lt;/custom-counter-group&gt;</code></pre>
+
+<auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
+Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-counter>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
+
+<pre class="language-js"><code class="language-js">import type { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+declare namespace svelteHTML {
+  interface IntrinsicElements {
+    '[custom]-counter': Partial&lt;AuroCounter&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCounter&gt;;
+    '[custom]-counter-group': Partial&lt;AuroCounterGroup&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroCounterGroup&gt;;
+  }
+}</code></pre>
+
+This enables prop hinting for attributes like `value`, `min`, `max`, `disabled`, and others directly in Svelte templates.
+
+<auro-header level="3" id="svelteEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Listen for the `countChanged` event on the element:
+
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  let count = $state(0);
+​
+  function handleChange(e: Event) {
+    count = (e.target as HTMLElement &amp; { value: number }).value;
+  }
+&lt;/script&gt;
+&lt;custom-counter on:countChanged={handleChange}&gt;Adults&lt;/custom-counter&gt;
+&lt;p&gt;Count: {count}&lt;/p&gt;</code></pre>
+
+<auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
 <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
 <p>A standalone <code>&lt;auro-counter&gt;</code> requires only a label in the default slot:</p>
 <pre class="language-html"><code class="language-html">&lt;auro-counter&gt;

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // 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 = '202605050043';
+var formkitVersion = '202605050131';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/dist/index.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // 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 = '202605050043';
+var formkitVersion = '202605050131';
 
 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 = '202605050043';
+var formkitVersion$1 = '202605050131';
 
 // 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 = '202605050043';
+var formkitVersion = '202605050131';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {