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

package/components/checkbox/dist/index.js

@@ -3,11 +3,11 @@ 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`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host{display:block;--cbxLocation: var(--ds-size-50, $ds-size-50)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:50%;left: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));transform:translateY(-50%);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;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;
+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}: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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:50%;left: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));transform:translateY(-50%);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;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;
 
-var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .label--cbx: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 .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([disabled]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-color-utility-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-active-default, #225296)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}:host([error][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-container-error-inverse, #74110e);--ds-auro-checkbox-container-color: var(--ds-color-container-error-inverse, #df0b37)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([error][checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}`;
+var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .label--cbx: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 .label--cbx: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]) .label--cbx: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) .label--cbx: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]) .label--cbx: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]) .label--cbx: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]) .label--cbx: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) .label--cbx: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]){--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]) .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]: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]){--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]) .label--cbx: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){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .label--cbx: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]){--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]) .label--cbx: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]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][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]){--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]) .label--cbx: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){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .label--cbx: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)}`;
 
-var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
 var checkLg = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.321 12.514a.75.75 0 0 0-1.142.972l4.25 5a.75.75 0 0 0 1.141.001l10.25-12a.75.75 0 1 0-1.14-.975L9 16.844z\"/></svg>"};
 
@@ -100,6 +100,7 @@ class AuroCheckbox extends LitElement {
     this.checked = false;
     this.disabled = false;
     this.error = false;
+    this.onDark = false;
 
     /**
      * @private
@@ -153,6 +154,14 @@ class AuroCheckbox extends LitElement {
        */
       name: { type: String },
 
+      /**
+       * Sets onDark styles for component.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Sets the element's input value. Must be unique within an auro-checkbox-group element.
        */
@@ -636,13 +645,13 @@ class AuroDependencyVersioning {
 
 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)}`;
 
-var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+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]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
 var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
-var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
+var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -729,6 +738,7 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+    this.onDark = false;
     this.hasTextContent = false;
 
     AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
@@ -767,6 +777,14 @@ class AuroHelpText extends LitElement {
         type: Boolean,
         reflect: true,
       },
+
+      /**
+       * If declared, will apply onDark styles.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      }
     };
   }
 
@@ -858,6 +876,7 @@ class AuroCheckboxGroup extends LitElement {
     this.disabled = undefined;
     this.required = false;
     this.horizontal = false;
+    this.onDark = false;
 
     /**
      * @private
@@ -938,6 +957,14 @@ class AuroCheckboxGroup extends LitElement {
         reflect: true
       },
 
+      /**
+       * Sets onDark styles for component.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the element. Used for client-side validation.
        */
@@ -1155,6 +1182,12 @@ class AuroCheckboxGroup extends LitElement {
       }
     }
 
+    if (changedProperties.has('onDark')) {
+      this.checkboxes.forEach((el) => {
+        el.onDark = this.onDark;
+      });
+    }
+
     if (changedProperties.has('error')) {
       if (this.error) {
         this.setAttribute('aria-invalid', true);
@@ -1190,11 +1223,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} large part="helpText">
+          <${this.helpTextTag} large part="helpText" ?onDark="${this.onDark}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} error large role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error large ?onDark="${this.onDark}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/dist/registered.js

@@ -3,11 +3,11 @@ 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`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host{display:block;--cbxLocation: var(--ds-size-50, $ds-size-50)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:50%;left: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));transform:translateY(-50%);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;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;
+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}: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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:50%;left: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));transform:translateY(-50%);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;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;
 
-var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .label--cbx: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 .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([disabled]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-color-utility-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-active-default, #225296)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}:host([error][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-container-error-inverse, #74110e);--ds-auro-checkbox-container-color: var(--ds-color-container-error-inverse, #df0b37)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([error][checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}`;
+var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .label--cbx: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 .label--cbx: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]) .label--cbx: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) .label--cbx: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]) .label--cbx: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]) .label--cbx: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]) .label--cbx: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) .label--cbx: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]){--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]) .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]: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]){--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]) .label--cbx: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){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .label--cbx: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]){--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]) .label--cbx: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]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][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]){--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]) .label--cbx: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){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .label--cbx: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)}`;
 
-var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
 var checkLg = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.321 12.514a.75.75 0 0 0-1.142.972l4.25 5a.75.75 0 0 0 1.141.001l10.25-12a.75.75 0 1 0-1.14-.975L9 16.844z\"/></svg>"};
 
@@ -100,6 +100,7 @@ class AuroCheckbox extends LitElement {
     this.checked = false;
     this.disabled = false;
     this.error = false;
+    this.onDark = false;
 
     /**
      * @private
@@ -153,6 +154,14 @@ class AuroCheckbox extends LitElement {
        */
       name: { type: String },
 
+      /**
+       * Sets onDark styles for component.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Sets the element's input value. Must be unique within an auro-checkbox-group element.
        */
@@ -636,13 +645,13 @@ class AuroDependencyVersioning {
 
 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)}`;
 
-var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+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]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
 var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
-var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
+var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -729,6 +738,7 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+    this.onDark = false;
     this.hasTextContent = false;
 
     AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
@@ -767,6 +777,14 @@ class AuroHelpText extends LitElement {
         type: Boolean,
         reflect: true,
       },
+
+      /**
+       * If declared, will apply onDark styles.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      }
     };
   }
 
@@ -858,6 +876,7 @@ class AuroCheckboxGroup extends LitElement {
     this.disabled = undefined;
     this.required = false;
     this.horizontal = false;
+    this.onDark = false;
 
     /**
      * @private
@@ -938,6 +957,14 @@ class AuroCheckboxGroup extends LitElement {
         reflect: true
       },
 
+      /**
+       * Sets onDark styles for component.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the element. Used for client-side validation.
        */
@@ -1155,6 +1182,12 @@ class AuroCheckboxGroup extends LitElement {
       }
     }
 
+    if (changedProperties.has('onDark')) {
+      this.checkboxes.forEach((el) => {
+        el.onDark = this.onDark;
+      });
+    }
+
     if (changedProperties.has('error')) {
       if (this.error) {
         this.setAttribute('aria-invalid', true);
@@ -1190,11 +1223,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} large part="helpText">
+          <${this.helpTextTag} large part="helpText" ?onDark="${this.onDark}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} error large role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} error large ?onDark="${this.onDark}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/combobox/README.md

@@ -111,7 +111,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-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/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/combobox/demo/api.md

@@ -18,6 +18,7 @@
 | [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
 | [offset](#offset)                        | `offset`                        | `number`  | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean` |                | If declared, onDark styles will be applied to the trigger. |
 | [optionSelected](#optionSelected)                | `optionSelected`                | `object`  | "undefined"    | Specifies the current selected option.           |
 | [placement](#placement)                     | `placement`                     | `string`  | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
 | [required](#required)                      | `required`                      | `boolean` |                | Populates the `required` attribute on the input. Used for client-side validation. |
@@ -75,6 +76,23 @@
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </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-combobox onDark>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -95,6 +113,21 @@
 </auro-combobox>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+<auro-combobox onDark>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Dynamic Menu
@@ -226,7 +259,25 @@ If set, disables the combobox.
     </auro-menu>
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</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-combobox onDark disabled>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
@@ -248,6 +299,22 @@ If set, disables the combobox.
 </auro-combobox>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+<auro-combobox onDark disabled>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### noFilter
@@ -315,6 +382,24 @@ Sets a persistent error state (e.g. an error state returned from the server).
   </auro-combobox>
   <!-- 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-combobox onDark error="Custom error message">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
@@ -336,6 +421,22 @@ Sets a persistent error state (e.g. an error state returned from the server).
 </auro-combobox>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+<auro-combobox onDark error="Custom error message">
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### noValidate