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

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

@@ -32,7 +32,7 @@
 <section>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
 <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
-<auro-header level="2" id="setup">Setup</auro-header>
+<auro-header level="2" id="setup">Setup</auro-header>
 <auro-accordion-group Emphasis>
 <auro-accordion expanded class="section" id="recommendedAccordion">
 <span slot="trigger">Recommended Installation and Implementation</span>
@@ -44,8 +44,8 @@
 <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="3">Implementation</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
 <auro-header level="2" id="customRegistration">Custom Component Registration for Version Management</auro-header>
 There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
@@ -100,10 +100,9 @@ This will create a new custom element <code>&gt;custom-checkbox&lt;</code> and <
 </div>
 </auro-accordion>
 <auro-accordion class="section" id="cdnAccordion">
-<span slot="trigger">CDN Installation and Implementation</span>
+<span slot="trigger">CDN Installation</span>
 <div class="accordion-content">
-<p class="warning"><strong>Warning:</strong> CDN install & registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
-<auro-header level="3">Install & Implementation</auro-header>
+<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
 <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
 <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>

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

@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605071747';
+var formkitVersion = '202605072132';
 
 // 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 = '202605071747';
+var formkitVersion = '202605072132';
 
 // 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 = '202605071747';
+var formkitVersion = '202605072132';
 
 // 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/getting-started.md

@@ -41,54 +41,103 @@
 <section>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
 <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
-<auro-header level="1" id="install">Install</auro-header>
-<auro-header level="2" id="npmInstall">NPM Installation</auro-header>
+<auro-header level="2" id="setup">Setup</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion expanded class="section" id="recommendedAccordion">
+<span slot="trigger">Recommended Installation and Implementation</span>
+<div class="accordion-content">
+<auro-header level="3">Install</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
 
 <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
+<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
+<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
+<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
+<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
+<p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
 <!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="2" id="gettingStarted">Getting Started</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/gettingStarted.md) -->
-<!-- The below content is automatically added from ./../../../docs/templates/gettingStarted.md -->
 
-### TypeScript Module Resolution
+<pre class="language-js"><code class="language-js">// Import the class only
+import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
+​
+// Register with a custom name if desired
+AuroCombobox.register('custom-combobox');</code></pre>
 
-When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
 
-<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 -->
-<auro-header level="2" id="defaultSetup">Default Component Setup</auro-header>
-        Once installed, the component can be used in your project by importing the component's registered module:
+<pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/custom-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="autoAccordion">
+<span slot="trigger">Auto Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
 
-<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
+<p>Once installed, the component can be used in your project by importing the component's registered module:</p>
 
-        This import registers the `<auro-combobox>` custom element globally. You can then use it in your HTML:
+<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
+<p>This import registers the <code>&lt;auro-combobox&gt;</code> custom element globally. You can then use it in your HTML:</p>
 
 <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
   &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
   &lt;auro-menu&gt;
     &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
     &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
 &lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="cdnAccordion">
+<span slot="trigger">CDN Installation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
+<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
 
-<auro-header level="2" id="cdn">Install from CDN</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/bundleInstallDescription.md) -->
-<!-- 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.
-
 <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="2" id="customRegistration">Custom Component Registration</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
+<p>This script registers the <code>&lt;auro-combobox&gt;</code> custom element globally. You can then use it in your HTML:</p>
+
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
+  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>   
 <section>

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

@@ -1,6 +1,20 @@
-import { s as swapValueExample } from './swap-value.min.js';
 import { A as AuroCombobox } from './registered.min.js';
 
+function swapValueExample() {
+  const btn = document.querySelector('#swapExampleBtn');
+  const comboboxOne = document.querySelector('#swapExampleLeft');
+  const comboboxTwo = document.querySelector('#swapExampleRight');
+
+  btn.addEventListener('click', () => {
+    console.warn('swap value example button clicked');
+    const valueOne = comboboxOne.value;
+    const valueTwo = comboboxTwo.value;
+
+    comboboxOne.value = valueTwo;
+    comboboxTwo.value = valueOne;
+  });
+}
+
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 

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

@@ -5278,7 +5278,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605071747';
+var formkitVersion$2 = '202605072132';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -13030,7 +13030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605071747';
+var formkitVersion$1 = '202605072132';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14095,7 +14095,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605071747';
+var formkitVersion = '202605072132';
 
 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}`;
 
@@ -15814,6 +15814,8 @@ class AuroCombobox extends AuroElement {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
+          // Sync the input display for freeform values that don't match any option
+          this.input.value = this.value;
         }
       } else {
         // Use setMenuValue like select does instead of direct assignment

package/components/combobox/dist/index.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605071747';
+var formkitVersion$2 = '202605072132';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605071747';
+var formkitVersion$1 = '202605072132';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14021,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605071747';
+var formkitVersion = '202605072132';
 
 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}`;
 
@@ -15740,6 +15740,8 @@ class AuroCombobox extends AuroElement {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
+          // Sync the input display for freeform values that don't match any option
+          this.input.value = this.value;
         }
       } else {
         // Use setMenuValue like select does instead of direct assignment

package/components/combobox/dist/registered.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605071747';
+var formkitVersion$2 = '202605072132';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605071747';
+var formkitVersion$1 = '202605072132';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14021,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605071747';
+var formkitVersion = '202605072132';
 
 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}`;
 
@@ -15740,6 +15740,8 @@ class AuroCombobox extends AuroElement {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
+          // Sync the input display for freeform values that don't match any option
+          this.input.value = this.value;
         }
       } else {
         // Use setMenuValue like select does instead of direct assignment

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

@@ -34,7 +34,7 @@
 <section>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
 <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
-<auro-header level="2" id="setup">Setup</auro-header>
+<auro-header level="2" id="setup">Setup</auro-header>
 <auro-accordion-group Emphasis>
 <auro-accordion expanded class="section" id="recommendedAccordion">
 <span slot="trigger">Recommended Installation and Implementation</span>
@@ -46,8 +46,8 @@
 <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="3">Implementation</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
 <auro-header level="4">Custom Component Registration for Version Management</auro-header>
 There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</auro-hyperlink> and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
@@ -109,6 +109,7 @@ Then use the elements in your HTML:
 <auro-accordion class="section" id="cdnAccordion">
 <span slot="trigger">CDN Installation</span>
 <div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
 <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
 The counter components can be loaded via CDN without a build step: