@aurodesignsystem/auro-formkit 2.2.1-beta.3 → 3.0.0

package/components/bibtemplate/dist/registered.js

@@ -5,9 +5,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
-var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
+var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -16,7 +16,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -185,7 +185,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
+var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -193,7 +193,6 @@ var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
  * @slot - Hidden from visibility, used for a11y if icon description is needed
  */
 
@@ -208,6 +207,10 @@ class BaseIcon extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * Set value for on-dark version of auro-icon.
+       */
       onDark: {
         type: Boolean,
         reflect: true
@@ -266,81 +269,11 @@ class BaseIcon extends AuroElement {
   }
 }
 
-var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-
-var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
-
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
-
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
-
-  /* eslint-disable jsdoc/require-param */
-
-  /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
-   */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
-  }
-
-  /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
-   */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
-  }
-  /* eslint-enable jsdoc/require-param */
-
-  /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
-   */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
-  }
-
-  /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
-   */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
+var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
 
-    return elemTag === tag || elem.hasAttribute(tag);
-  }
-};
+var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -348,6 +281,7 @@ class AuroIcon extends BaseIcon {
   constructor() {
     super();
 
+    this.variant = undefined;
     this.privateDefaults();
   }
 
@@ -357,20 +291,6 @@ class AuroIcon extends BaseIcon {
    * @returns {void}
    */
   privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
@@ -380,14 +300,6 @@ class AuroIcon extends BaseIcon {
     return {
       ...super.properties,
 
-      /**
-       * Sets the icon to use the accent style.
-       */
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Set aria-hidden value. Default is `true`. Option is `false`.
        */
@@ -418,38 +330,6 @@ class AuroIcon extends BaseIcon {
         type: Boolean
       },
 
-      /**
-       * Sets the icon to use the disabled style.
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the emphasis style.
-       */
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the error style.
-       */
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the info style.
-       */
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Exposes content in slot as icon label.
        */
@@ -467,50 +347,10 @@ class AuroIcon extends BaseIcon {
       },
 
       /**
-       * DEPRECATED: Sets the icon to use the baseline primary icon style.
-       */
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the secondary style.
-       */
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the subtle style.
-       */
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the success style.
-       */
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the tertiary style.
+       * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
        */
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the icon to use the warning style.
-       */
-      warning: {
-        type: Boolean,
+      variant: {
+        type: String,
         reflect: true
       }
     };
@@ -600,7 +440,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '7.0.1';
+var iconVersion = '8.0.1';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -825,7 +665,7 @@ class AuroBibtemplate extends LitElement {
   constructor() {
     super();
 
-    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -864,7 +704,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.2/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/api.html

@@ -22,7 +22,8 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>

package/components/checkbox/demo/api.md

@@ -13,6 +13,7 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 | [error](#error)                         | `error`                         | `string`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       | If set, checkboxes will be aligned horizontally. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |             | If set, disables auto-validation on blur.        |
+| [onDark](#onDark)                        | `onDark`                        | `boolean` | false       | Sets onDark styles for component.                |
 | [required](#required)                      | `required`                      | `boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`  |             | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`  |             | Custom help text message to display when validity = `customError`. |
@@ -54,6 +55,7 @@ Custom element for the purpose of allowing users to select one or more options o
 | [error](#error)    | `error`    | `boolean` | false   | If set to true, the checkbox will be displayed with an error state. |
 | [id](#id)       | `id`       | `string`  |         | Sets the individual `id` per element.            |
 | [name](#name)     | `name`     | `string`  |         | Accepts any string and is used to identify related checkboxes when submitting form data. |
+| [onDark](#onDark)   | `onDark`   | `boolean` | false   | Sets onDark styles for component.                |
 | [value](#value)    | `value`    | `string`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
@@ -96,7 +98,19 @@ Custom element for the purpose of allowing users to select one or more options o
     <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-checkbox-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -112,12 +126,55 @@ Custom element for the purpose of allowing users to select one or more options o
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+<auro-checkbox-group onDark>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Disabled
 
 Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or the entire `<auro-checkbox-group>`.
 
+#### Disabled Checkbox within Group
+
+The `disabled` attribute used to disable a single `<auro-checkbox>` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+
+```html
+<auro-checkbox-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### Disabled Group
 
 The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
@@ -134,6 +191,18 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+  <auro-checkbox-group onDark disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
@@ -149,39 +218,75 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+<auro-checkbox-group onDark disabled>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Disabled Checkbox within Group
+### Error
 
-The `disabled` attribute used to disable a single `<auro-checkbox>` element.
+Use the `error` attribute to force an error state on the element.
+
+#### Checkbox Group with Error
+
+The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
+  <auro-checkbox-group error="custom error">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+  <auro-checkbox-group onDark error="custom error">
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorGroup.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/errorGroup.html -->
 
 ```html
-<auro-checkbox-group>
+<auro-checkbox-group error="custom error">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+<auro-checkbox-group onDark error="custom error">
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Form Validation
@@ -223,41 +328,6 @@ When present, the `required` attribute specifies that at least one or more `<aur
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Error
-
-Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
-
-A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
-  <auro-checkbox-group error="custom error">
-    <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/errorGroup.html -->
-
-```html
-<auro-checkbox-group error="custom error">
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 ### Functional Examples
 
 #### Reset State
@@ -318,15 +388,16 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
 ```scss
-@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+@import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
 
 :host {
-  --ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default});
-  --ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #{$ds-color-icon-emphasis-inverse});
-  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-  --ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
+  --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{$ds-advanced-color-boolean-indicator});
+  --ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{$ds-advanced-color-boolean-isfalse});
+  --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
   --ds-auro-checkbox-outline-color: transparent;
-  --ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->