@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

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

@@ -1,28 +1,23 @@
 /**
- * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
- *
- * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
- * @attr id
+ * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
+ * @customElement auro-checkbox
  *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
  *
- * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 export class AuroCheckbox extends LitElement {
     static get styles(): import("lit").CSSResult[];
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @type {'default' | 'inverse'}
          * @default 'default'
          */
-        appearance: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        appearance: "default" | "inverse";
         /**
          * If set to true, the checkbox will be filled with a checkmark.
          */
@@ -44,6 +39,21 @@ export class AuroCheckbox extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * The id global attribute defines an identifier (ID) which must be unique in the whole document.
+         */
+        id: {
+            type: StringConstructor;
+        };
+        /**
+         * The id for input node.
+         * @private
+         */
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * Accepts any string and is used to identify related checkboxes when submitting form data.
          */
@@ -51,12 +61,21 @@ export class AuroCheckbox extends LitElement {
             type: StringConstructor;
         };
         /**
-         * DEPRECATED - use `appearance` instead.
+         * DEPRECATED - use `appearance="inverse"` instead.
          */
         onDark: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the checkbox has been interacted with.
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * Sets the element's input value. Must be unique within an auro-checkbox-group element.
          */
@@ -65,19 +84,40 @@ export class AuroCheckbox extends LitElement {
             reflect: boolean;
         };
         /**
-         * Indicates whether the checkbox has been interacted with.
-         * @type {boolean}
+         * The tabindex attribute for the checkbox.
          * @private
          */
-        touched: boolean;
+        tabIndex: {
+            type: NumberConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
         /**
-         * The id for input node.
+         * The aria-checked attribute for the checkbox.
          * @private
          */
-        inputId: {
+        ariaChecked: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * The aria-disabled attribute for the checkbox.
+         * @private
+         */
+        ariaDisabled: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * The ARIA role for the element. Must remain 'checkbox' for screen readers
+         * to correctly identify this as a checkbox control.
+         * @private
+         */
+        role: {
             type: StringConstructor;
             reflect: boolean;
-            attribute: boolean;
         };
     };
     /**
@@ -89,8 +129,9 @@ export class AuroCheckbox extends LitElement {
      *
      */
     static register(name?: string): void;
+    _initializeDefaults(): void;
     apperance: string;
-    checked: boolean;
+    checked: any;
     disabled: boolean;
     error: boolean;
     onDark: boolean;
@@ -125,7 +166,7 @@ export class AuroCheckbox extends LitElement {
     /**
      * Function to generate checkmark svg.
      * @private
-     * @returns {void}
+     * @returns {HTMLElement}
      */
     private generateIconHtml;
     dom: Document;
@@ -135,6 +176,12 @@ export class AuroCheckbox extends LitElement {
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Updates the aria-label based on slot content.
+     * @private
+     * @returns {void}
+     */
+    private updateAriaLabel;
     firstUpdated(): void;
     inputId: string;
     /**
@@ -144,6 +191,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

@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 
-var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem)}.cbxContainer:hover{cursor:pointer}.label{display:block;padding-top:var(--ds-size-50, 0.25rem)}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;left:0;top:3px;bottom:3px;z-index:1;pointer-events:none}`;
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}:host(:focus-visible){outline:none !important}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem)}.cbxContainer:hover{cursor:pointer}.label{display:block;padding-top:var(--ds-size-50, 0.25rem)}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;left:0;top:3px;bottom:3px;z-index:1;pointer-events:none}`;
 
 var colorCss$2 = css`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .cbxContainer:hover,:host([checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .cbxContainer:hover,:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .cbxContainer:hover,:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .cbxContainer:hover,:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .cbxContainer:hover,:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .cbxContainer:hover,:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .cbxContainer:hover,:host([onDark]) .inputContainer:hover,:host([appearance=inverse]) .cbxContainer:hover,:host([appearance=inverse]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .cbxContainer:hover,:host([onDark]:not([checked])) .inputContainer:hover,:host([appearance=inverse]:not([checked])) .cbxContainer:hover,:host([appearance=inverse]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]),:host([appearance=inverse][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .cbxContainer:hover,:host([onDark][checked]) .inputContainer:hover,:host([appearance=inverse][checked]) .cbxContainer:hover,:host([appearance=inverse][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within),:host([appearance=inverse][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .cbxContainer:hover,:host([onDark][checked]:focus-within) .inputContainer:hover,:host([appearance=inverse][checked]:focus-within) .cbxContainer:hover,:host([appearance=inverse][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .cbxContainer:hover,:host([onDark][disabled]) .inputContainer:hover,:host([appearance=inverse][disabled]) .cbxContainer:hover,:host([appearance=inverse][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]),:host([appearance=inverse][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .cbxContainer:hover,:host([onDark][disabled][checked]) .inputContainer:hover,:host([appearance=inverse][disabled][checked]) .cbxContainer:hover,:host([appearance=inverse][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]),:host([appearance=inverse][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within),:host([appearance=inverse][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]),:host([appearance=inverse][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .cbxContainer:hover,:host([onDark][error][checked]) .inputContainer:hover,:host([appearance=inverse][error][checked]) .cbxContainer:hover,:host([appearance=inverse][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within),:host([appearance=inverse][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .cbxContainer:hover,:host([onDark][error][checked]:focus-within) .inputContainer:hover,:host([appearance=inverse][error][checked]:focus-within) .cbxContainer:hover,:host([appearance=inverse][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
 
@@ -94,23 +94,20 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 /**
- * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
- *
- * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
- * @attr id
+ * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
+ * @customElement auro-checkbox
  *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
  *
- * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -118,26 +115,24 @@ class AuroCheckbox extends LitElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.apperance = 'default';
     this.checked = false;
     this.disabled = false;
     this.error = false;
     this.onDark = false;
     this.touched = false;
+    this.tabIndex = 0;
+    this.ariaChecked = '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() {
@@ -155,7 +150,7 @@ class AuroCheckbox extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -187,47 +182,94 @@ class AuroCheckbox extends LitElement {
         reflect: true
       },
 
+      /**
+       * The id global attribute defines an identifier (ID) which must be unique in the whole document.
+       */
+      id: {
+        type: String
+      },
+
+      /**
+       * The id for input node.
+       * @private
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
+      },
+
       /**
        * Accepts any string and is used to identify related checkboxes when submitting form data.
        */
       name: { type: String },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
         reflect: true
       },
 
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
       /**
        * Sets the element's input value. Must be unique within an auro-checkbox-group element.
        */
       value: {
         type: String,
-        reflect: true
+        reflect: false
       },
 
       /**
-       * Indicates whether the checkbox has been interacted with.
-       * @type {boolean}
+       * The tabindex attribute for the checkbox.
        * @private
        */
-      touched: {
-        type: Boolean,
+      tabIndex: {
+        type: Number,
         reflect: true,
-        attribute: false
+        attribute: 'tabindex'
       },
 
       /**
-       * The id for input node.
+       * The aria-checked attribute for the checkbox.
        * @private
        */
-      inputId: {
+      ariaChecked: {
         type: String,
-        reflect: false,
-        attribute: false
-      }
+        reflect: true,
+        attribute: 'aria-checked'
+      },
+
+      /**
+       * The aria-disabled attribute for the checkbox.
+       * @private
+       */
+      ariaDisabled: {
+        type: String,
+        reflect: true,
+        attribute: 'aria-disabled'
+      },
+
+      /**
+       * The ARIA role for the element. Must remain 'checkbox' for screen readers
+       * to correctly identify this as a checkbox control.
+       * @private
+       */
+      role: {
+        type: String,
+        reflect: true
+      },
+
     };
   }
 
@@ -293,7 +335,7 @@ class AuroCheckbox extends LitElement {
   /**
    * Function to generate checkmark svg.
    * @private
-   * @returns {void}
+   * @returns {HTMLElement}
    */
   generateIconHtml() {
     this.dom = new DOMParser().parseFromString(checkLg.svg, 'text/html');
@@ -314,6 +356,22 @@ class AuroCheckbox extends LitElement {
     this.touched = false;
   }
 
+  /**
+   * Updates the aria-label based on slot content.
+   * @private
+   * @returns {void}
+   */
+  updateAriaLabel() {
+    const slot = this.shadowRoot.querySelector('slot');
+    const text = slot.assignedNodes().
+      map((node) => node.textContent).
+      join('').
+      trim();
+    if (text) {
+      this.setAttribute('aria-label', text);
+    }
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
@@ -358,6 +416,24 @@ 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) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      this.ariaChecked = this.checked ? 'true' : 'false';
+    }
+
+    if (changedProperties.has('disabled')) {
+      this.ariaDisabled = this.disabled ? 'true' : undefined;
+    }
+  }
+
   /**
    * Handles keydown event to toggle the checkbox with Space key.
    * @private
@@ -387,7 +463,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,13 +473,15 @@ class AuroCheckbox extends LitElement {
             name="${ifDefined(this.name)}"
             type="checkbox"
             .value="${this.value}"
+            aria-hidden="true"
+            tabindex="-1"
           />
           ${this.checked ? this.generateIconHtml() : undefined}
         </div>
 
-        <label for="${this.inputId}" class="${classMap(labelClasses)}" part="checkbox-label">
-          <slot></slot>
-        </label>
+        <span class="${classMap(labelClasses)}" part="checkbox-label">
+          <slot @slotchange="${this.updateAriaLabel}"></slot>
+        </span>
       </div>
     `;
   }
@@ -1552,14 +1630,15 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202511191711';
+var formkitVersion = '202601271813';
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 /**
- * The auro-checkbox-group element is a wrapper for auro-checkbox element.
+ * The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
+ * @customElement auro-checkbox-group
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -1571,6 +1650,10 @@ class AuroCheckboxGroup extends LitElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = 'default';
     this.validity = undefined;
     this.disabled = undefined;
@@ -1636,7 +1719,7 @@ class AuroCheckboxGroup extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1677,7 +1760,7 @@ class AuroCheckboxGroup extends LitElement {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -1725,7 +1808,7 @@ class AuroCheckboxGroup extends LitElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-checkbox-group"] - The name of element that you want to register to.
+   * @param {string} [name="auro-checkbox-group"] - The name of the element that you want to register.
    *
    * @example
    * AuroCheckboxGroup.register("custom-checkbox-group") // this will register this element to <custom-checkbox-group/>