@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0

package/components/checkbox/src/auro-checkbox.js

@@ -1,210 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-import { LitElement, html } from "lit";
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-
-import styleCss from "./styles/auro-checkbox-css.js";
-import colorCss from "./styles/color-css.js";
-import tokensCss from "./styles/tokens-css.js";
-
-import checkLg from '@alaskaairux/icons/dist/icons/interface/check-lg.mjs';
-
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-/**
- * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
- *
- * @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.
- */
-
-// build the component class
-export class AuroCheckbox extends LitElement {
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-
-    /**
-     * @private
-     */
-    this.error = false;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
-
-  static get styles() {
-    return [
-      styleCss,
-      colorCss,
-      tokensCss
-    ];
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-
-      /**
-       * If set to true, the checkbox will be filled with a checkmark.
-       */
-      checked: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If set to true, the checkbox will not be clickable.
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Sets the individual `id` per element.
-       */
-      id: { type: String },
-
-      /**
-       * Accepts any string and is used to identify related checkboxes when submitting form data.
-       */
-      name: { type: String },
-
-      /**
-       * Sets the element's input value. Must be unique within an auro-checkbox-group element.
-       */
-      value: {
-        type: String,
-        reflect: true
-      }
-    };
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-checkbox"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroCheckbox.register("custom-checkbox") // this will register this element to <custom-checkbox/>
-   *
-   */
-  static register(name = "auro-checkbox") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckbox);
-  }
-
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
-  handleChange(event) {
-    this.checked = event.target.checked;
-    const customEvent = new CustomEvent(event.type, event);
-
-    this.dispatchEvent(customEvent);
-  }
-
-  handleInput(event) {
-    this.checked = event.target.checked;
-
-    this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-  }
-
-  /**
-   * Function to support @focusin event.
-   * @private
-   * @returns {void}
-   */
-  handleFocusin() {
-    this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-  }
-
-  /**
-   * Function to generate checkmark svg.
-   * @private
-   * @returns {void}
-   */
-  generateIconHtml() {
-    this.dom = new DOMParser().parseFromString(checkLg.svg, 'text/html');
-    this.svg = this.dom.body.firstChild;
-
-    this.svg.classList.add('svg--cbx');
-
-    return this.svg;
-  }
-
-  /**
-   * Resets component to initial state.
-   * @returns {void}
-   */
-  reset() {
-    this.checked = false;
-    this.error = false;
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
-
-    this.addEventListener('click', () => {
-      this.handleFocusin();
-    });
-
-    this.addEventListener('focusin', () => {
-      this.handleFocusin();
-    });
-
-    this.addEventListener('focusout', () => {
-      this.dispatchEvent(new CustomEvent('auroCheckbox-focusout', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    });
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const labelClasses = {
-      'label': true,
-      'label--cbx': true,
-      'errorBorder': this.error
-    };
-
-    return html`
-      <div class="cbxContainer" part="checkbox">
-        <input
-          class="util_displayHiddenVisually cbx--input"
-          part="checkbox-input"
-          @change=${this.handleChange}
-          @input="${this.handleInput}"
-          ?disabled="${this.disabled}"
-          .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
-          name="${ifDefined(this.name)}"
-          type="checkbox"
-          .value="${this.value}"
-        />
-
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}" part="checkbox-label">
-          ${this.checked ? this.generateIconHtml() : undefined}
-          <slot></slot>
-        </label>
-      </div>
-    `;
-  }
-}

package/components/checkbox/src/index.js

@@ -1,8 +0,0 @@
-import { AuroCheckbox } from './auro-checkbox.js';
-import { AuroCheckboxGroup } from './auro-checkbox-group.js';
-
-AuroCheckbox.register();
-AuroCheckboxGroup.register();
-
-// Enable TypeScript support
-export { AuroCheckbox, AuroCheckboxGroup };

package/components/checkbox/src/styles/auro-checkbox-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default 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:var(--ds-size-50, 0.25rem);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));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}`;

package/components/checkbox/src/styles/auro-checkbox-group-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default 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)}`;

package/components/checkbox/src/styles/auro-checkbox-group.css

@@ -1,26 +0,0 @@
-/* stylelint-disable no-descending-specificity,
-   no-duplicate-selectors
-   declaration-empty-line-before,
-   comment-whitespace-inside,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-: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);
-}

package/components/checkbox/src/styles/auro-checkbox-group.scss

@@ -1,38 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable no-descending-specificity,
-   no-duplicate-selectors
-   declaration-empty-line-before,
-   comment-whitespace-inside,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-
-@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-
-:host {
-  display: block;
-  padding-bottom: var(--ds-size-150, $ds-size-150);
-}
-
-.displayFlex {
-  legend + slot {
-    display: flex;
-    white-space: nowrap;
-  }
-}
-
-fieldset {
-  all: unset;
-
-}
-
-legend {
-  margin-bottom: var(--ds-size-150, $ds-size-150);
-}
-

package/components/checkbox/src/styles/auro-checkbox.css

@@ -1,123 +0,0 @@
-/* stylelint-disable custom-property-empty-line-before,
-   custom-property-pattern,
-   selector-max-class,
-   scss/selector-nest-combinators,
-   order/properties-order,
-   max-nesting-depth,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-class-pattern,
-   rule-empty-line-before,
-   scss/selector-no-redundant-nesting-selector,
-   no-descending-specificity,
-   no-duplicate-selectors,
-   declaration-empty-line-before */
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.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: var(--ds-size-50, 0.25rem);
-  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));
-  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;
-}

package/components/checkbox/src/styles/auro-checkbox.scss

@@ -1,100 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable custom-property-empty-line-before,
-   custom-property-pattern,
-   selector-max-class,
-   scss/selector-nest-combinators,
-   order/properties-order,
-   max-nesting-depth,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-class-pattern,
-   rule-empty-line-before,
-   scss/selector-no-redundant-nesting-selector,
-   no-descending-specificity,
-   no-duplicate-selectors,
-   declaration-empty-line-before */
-
-// Import Auro tokens
-@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-
-@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
-@import "@aurodesignsystem/webcorestylesheets/src/core";
-@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
-
-// container styles - defines the look of the outer custom component
-:host {
-  display: block;
-  --cbxLocation: var(--ds-size-50, $ds-size-50);
-}
-
-fieldset {
-  all: unset;
-}
-
-.displayFlex {
-  slot {
-    @include auro_breakpoint--sm {
-      display: flex;
-    }
-  }
-}
-
-.cbxContainer {
-  position: relative;
-  padding-left: var(--ds-size-100, $ds-size-100);
-  padding-right: var(--ds-size-100, $ds-size-100);
-  line-height: var(--ds-size-400, $ds-size-400);
-}
-
-.cbx--input {
-  &:disabled {
-    & + label {
-      &:hover {
-        cursor: auto;
-      }
-    }
-  }
-}
-
-.label {
-  margin-left: var(--ds-size-300, $ds-size-300);
-  display: block;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-// No tokens available for values used here
-.label--cbx {
-  &:after {
-    -webkit-tap-highlight-color: transparent;
-    position: absolute;
-    content: '';
-    top: var(--ds-size-50, $ds-size-50);
-    left: var(--cbxLocation);
-    width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
-    height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
-    border-width: 1px;
-    border-style: solid;
-    border-radius: var(--ds-border-radius, $ds-border-radius);
-    outline-style: solid;
-    outline-width: 1px;
-    z-index: 0;
-  }
-}
-
-.svg--cbx {
-  position: absolute;
-  top: var(--ds-size-25, $ds-size-25);
-  left: var(--ds-size-25, $ds-size-25);
-
-  padding-top: 3px;
-  padding-bottom: 3px;
-
-  z-index: 1;
-}

package/components/checkbox/src/styles/color-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default 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)}`;

package/components/checkbox/src/styles/color.css

@@ -1,84 +0,0 @@
-/* stylelint-disable selector-class-pattern, order/properties-order, no-descending-specificity */
-: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);
-}