@aurodesignsystem-dev/auro-formkit 0.0.0-pr1257.0 → 0.0.0-pr1269.0

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

@@ -172,20 +172,12 @@ class AuroCheckbox extends i$2 {
     this.error = false;
     this.onDark = false;
     this.touched = false;
+    this.role = 'checkbox';
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...i$2.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   static get styles() {
@@ -275,6 +267,15 @@ class AuroCheckbox extends i$2 {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Don't add to api.md since changing of this can easily break a11y.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -368,6 +369,10 @@ class AuroCheckbox extends i$2 {
 
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
+    // Set initial ARIA state
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', '0');
+
     this.addEventListener('click', (evt) => {
       // Only prevent default for real user events, not tests or programmatic calls
       if (evt.isTrusted) {
@@ -406,6 +411,26 @@ class AuroCheckbox extends i$2 {
     this.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  /**
+   * Updates ARIA attributes when properties change.
+   * @private
+   * @param {Map} changedProperties - Map of changed properties.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
   /**
    * Handles keydown event to toggle the checkbox with Space key.
    * @private
@@ -435,7 +460,7 @@ class AuroCheckbox extends i$2 {
       <div class="cbxContainer body-default" part="checkbox">
         <div class="inputContainer">
           <input
-            class="util_displayHiddenVisually cbx--input"
+            class="util_displayHidden cbx--input"
             part="checkbox-input"
             @change="${this.handleChange}"
             @input="${this.handleInput}"
@@ -445,6 +470,8 @@ class AuroCheckbox extends i$2 {
             name="${o$1(this.name)}"
             type="checkbox"
             .value="${this.value}"
+            aria-hidden="true"
+            tabindex="-1"
           />
           ${this.checked ? this.generateIconHtml() : undefined}
         </div>
@@ -1607,7 +1634,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -164,20 +164,12 @@ class AuroCheckbox extends i$2 {
     this.error = false;
     this.onDark = false;
     this.touched = false;
+    this.role = 'checkbox';
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...i$2.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   static get styles() {
@@ -267,6 +259,15 @@ class AuroCheckbox extends i$2 {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Don't add to api.md since changing of this can easily break a11y.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -360,6 +361,10 @@ class AuroCheckbox extends i$2 {
 
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
+    // Set initial ARIA state
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', '0');
+
     this.addEventListener('click', (evt) => {
       // Only prevent default for real user events, not tests or programmatic calls
       if (evt.isTrusted) {
@@ -398,6 +403,26 @@ class AuroCheckbox extends i$2 {
     this.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  /**
+   * Updates ARIA attributes when properties change.
+   * @private
+   * @param {Map} changedProperties - Map of changed properties.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
   /**
    * Handles keydown event to toggle the checkbox with Space key.
    * @private
@@ -427,7 +452,7 @@ class AuroCheckbox extends i$2 {
       <div class="cbxContainer body-default" part="checkbox">
         <div class="inputContainer">
           <input
-            class="util_displayHiddenVisually cbx--input"
+            class="util_displayHidden cbx--input"
             part="checkbox-input"
             @change="${this.handleChange}"
             @input="${this.handleInput}"
@@ -437,6 +462,8 @@ class AuroCheckbox extends i$2 {
             name="${o$1(this.name)}"
             type="checkbox"
             .value="${this.value}"
+            aria-hidden="true"
+            tabindex="-1"
           />
           ${this.checked ? this.generateIconHtml() : undefined}
         </div>
@@ -1599,7 +1626,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -79,6 +79,14 @@ export class AuroCheckbox extends LitElement {
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * Don't add to api.md since changing of this can easily break a11y.
+         * @private
+         */
+        role: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     /**
      * This will register this element with the browser.
@@ -144,6 +152,13 @@ export class AuroCheckbox extends LitElement {
      * @returns {void}
      */
     private handleKeyDown;
+    /**
+     * Updates ARIA attributes when properties change.
+     * @private
+     * @param {Map} changedProperties - Map of changed properties.
+     * @returns {void}
+     */
+    private updated;
     /**
      * @private
      * @returns {HTMLElement}

package/components/checkbox/dist/index.js

@@ -124,20 +124,12 @@ class AuroCheckbox extends LitElement {
     this.error = false;
     this.onDark = false;
     this.touched = false;
+    this.role = 'checkbox';
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   static get styles() {
@@ -227,6 +219,15 @@ class AuroCheckbox extends LitElement {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Don't add to api.md since changing of this can easily break a11y.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -320,6 +321,10 @@ class AuroCheckbox extends LitElement {
 
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
+    // Set initial ARIA state
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', '0');
+
     this.addEventListener('click', (evt) => {
       // Only prevent default for real user events, not tests or programmatic calls
       if (evt.isTrusted) {
@@ -358,6 +363,26 @@ class AuroCheckbox extends LitElement {
     this.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  /**
+   * Updates ARIA attributes when properties change.
+   * @private
+   * @param {Map} changedProperties - Map of changed properties.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
   /**
    * Handles keydown event to toggle the checkbox with Space key.
    * @private
@@ -387,7 +412,7 @@ class AuroCheckbox extends LitElement {
       <div class="cbxContainer body-default" part="checkbox">
         <div class="inputContainer">
           <input
-            class="util_displayHiddenVisually cbx--input"
+            class="util_displayHidden cbx--input"
             part="checkbox-input"
             @change="${this.handleChange}"
             @input="${this.handleInput}"
@@ -397,6 +422,8 @@ class AuroCheckbox extends LitElement {
             name="${ifDefined(this.name)}"
             type="checkbox"
             .value="${this.value}"
+            aria-hidden="true"
+            tabindex="-1"
           />
           ${this.checked ? this.generateIconHtml() : undefined}
         </div>
@@ -1552,7 +1579,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -124,20 +124,12 @@ class AuroCheckbox extends LitElement {
     this.error = false;
     this.onDark = false;
     this.touched = false;
+    this.role = 'checkbox';
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   static get styles() {
@@ -227,6 +219,15 @@ class AuroCheckbox extends LitElement {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Don't add to api.md since changing of this can easily break a11y.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -320,6 +321,10 @@ class AuroCheckbox extends LitElement {
 
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
+    // Set initial ARIA state
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', '0');
+
     this.addEventListener('click', (evt) => {
       // Only prevent default for real user events, not tests or programmatic calls
       if (evt.isTrusted) {
@@ -358,6 +363,26 @@ class AuroCheckbox extends LitElement {
     this.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  /**
+   * Updates ARIA attributes when properties change.
+   * @private
+   * @param {Map} changedProperties - Map of changed properties.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
   /**
    * Handles keydown event to toggle the checkbox with Space key.
    * @private
@@ -387,7 +412,7 @@ class AuroCheckbox extends LitElement {
       <div class="cbxContainer body-default" part="checkbox">
         <div class="inputContainer">
           <input
-            class="util_displayHiddenVisually cbx--input"
+            class="util_displayHidden cbx--input"
             part="checkbox-input"
             @change="${this.handleChange}"
             @input="${this.handleInput}"
@@ -397,6 +422,8 @@ class AuroCheckbox extends LitElement {
             name="${ifDefined(this.name)}"
             type="checkbox"
             .value="${this.value}"
+            aria-hidden="true"
+            tabindex="-1"
           />
           ${this.checked ? this.generateIconHtml() : undefined}
         </div>
@@ -1552,7 +1579,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/README.md

@@ -91,11 +91,11 @@ This configuration enables proper module resolution for the component's TypeScri
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
-    <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-    <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-    <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-    <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-    <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
     <auro-menuoption static nomatch>No matching option</auro-menuoption>
   </auro-menu>
 </auro-combobox>

package/components/combobox/demo/api.md

@@ -96,11 +96,11 @@
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
   </auro-combobox>
@@ -135,11 +135,11 @@
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
-    <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-    <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-    <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-    <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-    <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
     <auro-menuoption static nomatch>No matching option</auro-menuoption>
   </auro-menu>
 </auro-combobox>

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

@@ -4303,7 +4303,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202512151914';
+var formkitVersion$2 = '202601052019';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -11928,7 +11928,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202512151914';
+var formkitVersion$1 = '202601052019';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12918,7 +12918,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 var styleCss$3 = i$6`.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.md

@@ -35,11 +35,11 @@ The `<auro-combobox>` element should be used in situations where users may:
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
   </auro-combobox>
@@ -57,11 +57,11 @@ The `<auro-combobox>` element should be used in situations where users may:
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
-    <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-    <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-    <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-    <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-    <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
     <auro-menuoption static nomatch>No matching option</auro-menuoption>
   </auro-menu>
 </auro-combobox>
@@ -80,11 +80,11 @@ The `<auro-combobox>` element should be used in situations where users may:
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
     <span slot="helpText">
@@ -127,11 +127,11 @@ The `<auro-combobox>` element should be used in situations where users may:
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
     <span slot="helpText">
@@ -158,11 +158,11 @@ The `<auro-combobox>` element should be used in situations where users may:
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
     <span slot="helpText">
@@ -183,11 +183,11 @@ The `<auro-combobox>` element should be used in situations where users may:
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
-      <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
   </auro-combobox>
@@ -222,11 +222,11 @@ The `<auro-combobox>` element should be used in situations where users may:
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
-    <auro-menuoption value="app" id="option-0">Apples</auro-menuoption>
-    <auro-menuoption value="ora" id="option-1">Oranges</auro-menuoption>
-    <auro-menuoption value="pea" id="option-2">Peaches</auro-menuoption>
-    <auro-menuoption value="gra" id="option-3">Grapes</auro-menuoption>
-    <auro-menuoption value="che" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
     <auro-menuoption static nomatch>No matching option</auro-menuoption>
   </auro-menu>
 </auro-combobox>

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

@@ -4175,7 +4175,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202512151914';
+var formkitVersion$2 = '202601052019';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -11800,7 +11800,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202512151914';
+var formkitVersion$1 = '202601052019';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12790,7 +12790,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202512151914';
+var formkitVersion = '202601052019';
 
 var styleCss$3 = i$6`.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}`;