@aurodesignsystem-dev/auro-formkit 0.0.0-pr1460.2 → 0.0.0-pr1464.0

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

@@ -337,7 +337,6 @@ export class AuroCombobox extends AuroElement {
     optionActive: any;
     persistInput: boolean | undefined;
     required: boolean | undefined;
-    value: any;
     typedValue: any;
     behavior: string | undefined;
     clearBtnFocused: boolean | undefined;
@@ -484,6 +483,7 @@ export class AuroCombobox extends AuroElement {
     private configureMenu;
     menu: Element | null | undefined;
     defaultMenuShape: string | null | undefined;
+    value: any;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private

package/components/combobox/dist/index.js

@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605070044';
+var formkitVersion$2 = '202605081752';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605070044';
+var formkitVersion$1 = '202605081752';
 
 // 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 = '202605070044';
+var formkitVersion = '202605081752';
 
 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}`;
 
@@ -14418,7 +14418,6 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
-    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -15031,6 +15030,10 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
+      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
+        this.setMenuValue(this.value);
+      }
+
       this.syncValuesAndStates();
     }
 
@@ -15644,10 +15647,6 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.menu.value = this.value;
-    }
   }
 
   /**
@@ -15728,13 +15727,21 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
+      if (this.menu && this.hasValue && this.menu.options) {
+        this.menu.options.forEach((opt) => {
+          if (!opt.hasAttribute('static')) {
+            opt.removeAttribute('hidden');
+          }
+        });
+      }
+
       if (this.behavior === 'suggestion') {
-        // if menu has an option that has matched value, then select it,
-        // otherwise clear the menu value since the input value doesn't match any option
-        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           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 = '202605070044';
+var formkitVersion$2 = '202605081752';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12956,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605070044';
+var formkitVersion$1 = '202605081752';
 
 // 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 = '202605070044';
+var formkitVersion = '202605081752';
 
 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}`;
 
@@ -14418,7 +14418,6 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
-    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -15031,6 +15030,10 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
+      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
+        this.setMenuValue(this.value);
+      }
+
       this.syncValuesAndStates();
     }
 
@@ -15644,10 +15647,6 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.menu.value = this.value;
-    }
   }
 
   /**
@@ -15728,13 +15727,21 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
+      if (this.menu && this.hasValue && this.menu.options) {
+        this.menu.options.forEach((opt) => {
+          if (!opt.hasAttribute('static')) {
+            opt.removeAttribute('hidden');
+          }
+        });
+      }
+
       if (this.behavior === 'suggestion') {
-        // if menu has an option that has matched value, then select it,
-        // otherwise clear the menu value since the input value doesn't match any option
-        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           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/api.html

@@ -3,9 +3,6 @@
   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/index.md
-
-  With the exception of adding custom elements if needed for the demo.
 
   ----------------------- DO NOT EDIT -----------------------------
 
@@ -17,39 +14,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | 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" />
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="./api.min.js" data-demo-script="true" type="module"></script>
     <script type="module">
       import { renderPage } from './demo-support.min.js';
-      import { initExamples } from './api.min.js';
       await renderPage('./api.md');
-      initExamples();
     </script>
-
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
-    <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>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
   </body>
 </html>

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: