@aurodesignsystem-dev/auro-formkit 0.0.0-pr1608.0 → 0.0.0-pr1609.0

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

@@ -1046,22 +1046,6 @@ class AuroDependencyVersioning {
   }
 }
 
-/**
- * Class for generating unique hashes based on the current timestamp.
- * This can be used to create unique identifiers for elements or data within an application,
- * ensuring that each identifier is distinct and can be easily generated without the need
- * for external libraries or complex algorithms.
- */
-class UniqueId {
-  /**
-   * Creates a unique hash based on the current timestamp.
-   * @returns {Function} Timestamp as a base-36 string
-   */
-  create() {
-    return Date.now().toString(36);
-  }
-}
-
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1300,7 +1284,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1377,11 +1361,6 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
-
-    /**
-     * @private
-     */
-    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1667,10 +1646,8 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1696,6 +1673,12 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
+      if (this.error) {
+        this.setAttribute('aria-invalid', true);
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+
       this.validate(true);
     }
   }
@@ -1714,11 +1697,7 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset
-        class="${e(groupClasses)}"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
-        aria-describedby="${this.uniqueId}"
-      >
+      <fieldset class="${e(groupClasses)}">
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1728,11 +1707,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/demo/getting-started.min.js

@@ -1046,22 +1046,6 @@ class AuroDependencyVersioning {
   }
 }
 
-/**
- * Class for generating unique hashes based on the current timestamp.
- * This can be used to create unique identifiers for elements or data within an application,
- * ensuring that each identifier is distinct and can be easily generated without the need
- * for external libraries or complex algorithms.
- */
-class UniqueId {
-  /**
-   * Creates a unique hash based on the current timestamp.
-   * @returns {Function} Timestamp as a base-36 string
-   */
-  create() {
-    return Date.now().toString(36);
-  }
-}
-
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1300,7 +1284,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1377,11 +1361,6 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
-
-    /**
-     * @private
-     */
-    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1667,10 +1646,8 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1696,6 +1673,12 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
+      if (this.error) {
+        this.setAttribute('aria-invalid', true);
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+
       this.validate(true);
     }
   }
@@ -1714,11 +1697,7 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset
-        class="${e(groupClasses)}"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
-        aria-describedby="${this.uniqueId}"
-      >
+      <fieldset class="${e(groupClasses)}">
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1728,11 +1707,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

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

@@ -1046,22 +1046,6 @@ class AuroDependencyVersioning {
   }
 }
 
-/**
- * Class for generating unique hashes based on the current timestamp.
- * This can be used to create unique identifiers for elements or data within an application,
- * ensuring that each identifier is distinct and can be easily generated without the need
- * for external libraries or complex algorithms.
- */
-class UniqueId {
-  /**
-   * Creates a unique hash based on the current timestamp.
-   * @returns {Function} Timestamp as a base-36 string
-   */
-  create() {
-    return Date.now().toString(36);
-  }
-}
-
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1300,7 +1284,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1377,11 +1361,6 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
-
-    /**
-     * @private
-     */
-    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1667,10 +1646,8 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1696,6 +1673,12 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
+      if (this.error) {
+        this.setAttribute('aria-invalid', true);
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+
       this.validate(true);
     }
   }
@@ -1714,11 +1697,7 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset
-        class="${e(groupClasses)}"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
-        aria-describedby="${this.uniqueId}"
-      >
+      <fieldset class="${e(groupClasses)}">
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1728,11 +1707,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

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

@@ -141,10 +141,6 @@ export class AuroCheckboxGroup extends LitElement {
      * @private
      */
     private helpTextTag;
-    /**
-     * @private
-     */
-    private uniqueId;
     /**
      * Helper method to handle checkbox value changing.
      * @private

package/components/checkbox/dist/index.js

@@ -999,22 +999,6 @@ class AuroDependencyVersioning {
   }
 }
 
-/**
- * Class for generating unique hashes based on the current timestamp.
- * This can be used to create unique identifiers for elements or data within an application,
- * ensuring that each identifier is distinct and can be easily generated without the need
- * for external libraries or complex algorithms.
- */
-class UniqueId {
-  /**
-   * Creates a unique hash based on the current timestamp.
-   * @returns {Function} Timestamp as a base-36 string
-   */
-  create() {
-    return Date.now().toString(36);
-  }
-}
-
 var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1253,7 +1237,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1330,11 +1314,6 @@ class AuroCheckboxGroup extends LitElement {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
-
-    /**
-     * @private
-     */
-    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1620,10 +1599,8 @@ class AuroCheckboxGroup extends LitElement {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1649,6 +1626,12 @@ class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('error')) {
+      if (this.error) {
+        this.setAttribute('aria-invalid', true);
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+
       this.validate(true);
     }
   }
@@ -1667,11 +1650,7 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     return html$1`
-      <fieldset
-        class="${classMap(groupClasses)}"
-        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
-        aria-describedby="${this.uniqueId}"
-      >
+      <fieldset class="${classMap(groupClasses)}">
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1681,11 +1660,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/dist/registered.js

@@ -999,22 +999,6 @@ class AuroDependencyVersioning {
   }
 }
 
-/**
- * Class for generating unique hashes based on the current timestamp.
- * This can be used to create unique identifiers for elements or data within an application,
- * ensuring that each identifier is distinct and can be easily generated without the need
- * for external libraries or complex algorithms.
- */
-class UniqueId {
-  /**
-   * Creates a unique hash based on the current timestamp.
-   * @returns {Function} Timestamp as a base-36 string
-   */
-  create() {
-    return Date.now().toString(36);
-  }
-}
-
 var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1253,7 +1237,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1330,11 +1314,6 @@ class AuroCheckboxGroup extends LitElement {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
-
-    /**
-     * @private
-     */
-    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1620,10 +1599,8 @@ class AuroCheckboxGroup extends LitElement {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1649,6 +1626,12 @@ class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('error')) {
+      if (this.error) {
+        this.setAttribute('aria-invalid', true);
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+
       this.validate(true);
     }
   }
@@ -1667,11 +1650,7 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     return html$1`
-      <fieldset
-        class="${classMap(groupClasses)}"
-        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
-        aria-describedby="${this.uniqueId}"
-      >
+      <fieldset class="${classMap(groupClasses)}">
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1681,11 +1660,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

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

@@ -3003,6 +3003,48 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/**
+ * Generates a v4 UUID with a three-tier fallback for insecure contexts.
+ *
+ * Tier 1 (secure contexts): crypto.randomUUID() — native, fully random.
+ * Tier 2 (insecure contexts): crypto.getRandomValues() — available on all
+ *   modern browsers regardless of secure-context status.
+ * Tier 3 (last resort, no crypto API): new Date().getTime() — lower entropy,
+ *   but sufficient for element IDs where collision risk is negligible.
+ *
+ * See: https://w3c.github.io/webcrypto/#dom-crypto-randomuuid (secure-context restriction)
+ */
+function generateUUID() {
+  let uuid;
+
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    uuid = crypto.randomUUID();
+  } else if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.getRandomValues === "function"
+  ) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0"));
+    uuid = `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  } else {
+    let d = new Date().getTime();
+    uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (d % 16) | 0;
+      d = (d - r) / 16 || new Date().getTime();
+      return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  }
+
+  // CSS selectors require IDs starting with a letter; replace a leading digit with 'a'.
+  return /^[0-9]/.test(uuid) ? `a${uuid.slice(1)}` : uuid;
+}
+
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
@@ -4021,7 +4063,7 @@ class AuroFloatingUI {
 
     this.id = element.getAttribute("id");
     if (!this.id) {
-      this.id = window.crypto.randomUUID();
+      this.id = generateUUID();
       element.setAttribute("id", this.id);
     }
 
@@ -5066,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609021913';
+var formkitVersion$2 = '202609022123';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18935,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609021913';
+var formkitVersion$1 = '202609022123';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20127,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 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/getting-started.min.js

@@ -3003,6 +3003,48 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/**
+ * Generates a v4 UUID with a three-tier fallback for insecure contexts.
+ *
+ * Tier 1 (secure contexts): crypto.randomUUID() — native, fully random.
+ * Tier 2 (insecure contexts): crypto.getRandomValues() — available on all
+ *   modern browsers regardless of secure-context status.
+ * Tier 3 (last resort, no crypto API): new Date().getTime() — lower entropy,
+ *   but sufficient for element IDs where collision risk is negligible.
+ *
+ * See: https://w3c.github.io/webcrypto/#dom-crypto-randomuuid (secure-context restriction)
+ */
+function generateUUID() {
+  let uuid;
+
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    uuid = crypto.randomUUID();
+  } else if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.getRandomValues === "function"
+  ) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0"));
+    uuid = `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  } else {
+    let d = new Date().getTime();
+    uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (d % 16) | 0;
+      d = (d - r) / 16 || new Date().getTime();
+      return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  }
+
+  // CSS selectors require IDs starting with a letter; replace a leading digit with 'a'.
+  return /^[0-9]/.test(uuid) ? `a${uuid.slice(1)}` : uuid;
+}
+
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
@@ -4021,7 +4063,7 @@ class AuroFloatingUI {
 
     this.id = element.getAttribute("id");
     if (!this.id) {
-      this.id = window.crypto.randomUUID();
+      this.id = generateUUID();
       element.setAttribute("id", this.id);
     }
 
@@ -5066,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609021913';
+var formkitVersion$2 = '202609022123';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18935,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609021913';
+var formkitVersion$1 = '202609022123';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20127,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609022123';
 
 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}`;