@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/esm/bds-button.entry.js

@@ -1,16 +1,14 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BqJlOB6b.js';
 import { C as COMPONENT_STATES } from './states-Bfazyxqi.js';
-import { a as BUTTON_TYPES, b as BUTTON_VARIANTS, B as BUTTON_SIZES } from './enum-C8mRvnTA.js';
+import { b as BUTTON_TYPES, a as BUTTON_VARIANTS, B as BUTTON_SIZES } from './enum-DlVzZK7o.js';
+import { C as CORE_COLORS } from './coreColors-Dwo1hcd9.js';
 import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+import { K as KeyboardController, a as KEY_TRIGGERS } from './KeyboardController-DcnXb5F5.js';
+import { K as KEYBOARD } from './Keys-7G4h4DI7.js';
+import './Logger-iq2UuV7c.js';
+import './orientation-CPvuMm5C.js';
 
-const CORE_COLORS = {
-    DEFAULT: 'default',
-    PRIMARY: 'primary',
-    SUCCESS: 'success',
-    ERROR: 'error',
-};
-
-const bdsButtonCss = () => `@charset "UTF-8";bds-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.bds-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;margin:var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);outline:none;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-semibold);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;vertical-align:middle}.bds-button .bds-button__content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-button--is-loading{pointer-events:none;position:relative;color:transparent !important}.bds-button--is-loading::after{position:absolute;content:" ";-webkit-box-sizing:inherit;box-sizing:inherit;-webkit-animation:rotateSpinner 0.5s linear infinite;animation:rotateSpinner 0.5s linear infinite;border-radius:9999px;display:block;height:1em;width:1em;rotate:45deg;left:calc(50% - 0.5em);top:calc(50% - 0.5em);border:3px solid;border-right-color:transparent;border-top-color:transparent}.bds-button--size-small{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);line-height:var(--boreal-typography-line-height-xs);height:26px}.bds-button--size-small .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-small .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-button--size-small .bds-button__content-icon:empty{display:none}.bds-button--size-small .bds-button__content{}.bds-button--size-small .bds-button__content-badge:empty{display:none}.bds-button--size-small .bds-button__content-badge{display:none}.bds-button--size-medium{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-sm);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);line-height:var(--boreal-typography-line-height-sm);height:32px}.bds-button--size-medium .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-medium .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-sm)}.bds-button--size-medium .bds-button__content-icon:empty{display:none}.bds-button--size-medium .bds-button__content{}.bds-button--size-medium .bds-button__content-badge:empty{display:none}.bds-button--size-large{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-md);padding:var(--boreal-spacing-xs);line-height:var(--boreal-typography-line-height-md);height:44px}.bds-button--size-large .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-large .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-md)}.bds-button--size-large .bds-button__content-icon:empty{display:none}.bds-button--size-large .bds-button__content{}.bds-button--size-large .bds-button__content-badge:empty{display:none}.bds-button.bds-button--var-default.bds-button--default{color:var(--boreal-text-default);background-color:var(--boreal-ui-inverse);border-color:transparent}.bds-button.bds-button--var-default.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--default:active,.bds-button.bds-button--var-default.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-default.bds-button--primary{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--primary:hover{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--primary:focus{background-color:var(--boreal-ui-primary-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--primary:active,.bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--success{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--success:hover{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--success:focus{background-color:var(--boreal-ui-success-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--success:active,.bds-button.bds-button--var-default.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--error{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--error:hover{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--error:focus{background-color:var(--boreal-ui-danger-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--error:active,.bds-button.bds-button--var-default.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-outline{background-color:transparent}.bds-button.bds-button--var-outline.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:var(--boreal-stroke-default-light)}.bds-button.bds-button--var-outline.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--default:active,.bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-outline.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:var(--boreal-ui-primary-base)}.bds-button.bds-button--var-outline.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--primary:active,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:var(--boreal-stroke-primary-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-outline.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:var(--boreal-stroke-success-base)}.bds-button.bds-button--var-outline.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--success:active,.bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:var(--boreal-stroke-success-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-outline.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:var(--boreal-stroke-danger-base)}.bds-button.bds-button--var-outline.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--error:active,.bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:var(--boreal-stroke-danger-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}.bds-button.bds-button--var-plain{background-color:transparent}.bds-button.bds-button--var-plain.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--default:active,.bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-plain.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--primary:active,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-plain.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--success:active,.bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-plain.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--error:active,.bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}@-webkit-keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const bdsButtonCss = () => `@charset "UTF-8";bds-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.bds-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;margin:var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);outline:none;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-semibold);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;vertical-align:middle}.bds-button .bds-button__content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-button--is-loading{pointer-events:none;position:relative;color:transparent !important}.bds-button--is-loading::after{position:absolute;content:" ";-webkit-box-sizing:inherit;box-sizing:inherit;-webkit-animation:rotateSpinner 0.5s linear infinite;animation:rotateSpinner 0.5s linear infinite;border-radius:9999px;display:block;height:1em;width:1em;rotate:45deg;left:calc(50% - 0.5em);top:calc(50% - 0.5em);border:3px solid;border-right-color:transparent;border-top-color:transparent}.bds-button--size-sm{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);line-height:var(--boreal-typography-line-height-xs);height:26px}.bds-button--size-sm .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-sm .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-button--size-sm .bds-button__content-icon:empty{display:none}.bds-button--size-sm .bds-button__content{}.bds-button--size-sm .bds-button__content-badge:empty{display:none}.bds-button--size-sm .bds-button__content-badge{display:none}.bds-button--size-md{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-sm);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);line-height:var(--boreal-typography-line-height-sm);height:32px}.bds-button--size-md .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-md .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-sm)}.bds-button--size-md .bds-button__content-icon:empty{display:none}.bds-button--size-md .bds-button__content{}.bds-button--size-md .bds-button__content-badge:empty{display:none}.bds-button--size-lg{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-md);padding:var(--boreal-spacing-xs);line-height:var(--boreal-typography-line-height-md);height:44px}.bds-button--size-lg .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-lg .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-md)}.bds-button--size-lg .bds-button__content-icon:empty{display:none}.bds-button--size-lg .bds-button__content{}.bds-button--size-lg .bds-button__content-badge:empty{display:none}.bds-button.bds-button--var-default.bds-button--default{color:var(--boreal-text-default);background-color:var(--boreal-ui-inverse);border-color:transparent}.bds-button.bds-button--var-default.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--default:active,.bds-button.bds-button--var-default.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-default.bds-button--primary{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--primary:hover{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--primary:focus{background-color:var(--boreal-ui-primary-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--primary:active,.bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--success{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--success:hover{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--success:focus{background-color:var(--boreal-ui-success-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--success:active,.bds-button.bds-button--var-default.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--error{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--error:hover{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--error:focus{background-color:var(--boreal-ui-danger-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--error:active,.bds-button.bds-button--var-default.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-outline{background-color:transparent}.bds-button.bds-button--var-outline.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:var(--boreal-stroke-default-light)}.bds-button.bds-button--var-outline.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--default:active,.bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-outline.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:var(--boreal-ui-primary-base)}.bds-button.bds-button--var-outline.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--primary:active,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:var(--boreal-stroke-primary-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-outline.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:var(--boreal-stroke-success-base)}.bds-button.bds-button--var-outline.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--success:active,.bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:var(--boreal-stroke-success-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-outline.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:var(--boreal-stroke-danger-base)}.bds-button.bds-button--var-outline.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--error:active,.bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:var(--boreal-stroke-danger-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}.bds-button.bds-button--var-plain{background-color:transparent}.bds-button.bds-button--var-plain.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--default:active,.bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-plain.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--primary:active,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-plain.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--success:active,.bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-plain.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--error:active,.bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}@-webkit-keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const BdsButton = class {
     constructor(hostRef) {
@@ -23,6 +21,7 @@ const BdsButton = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this._keyboard = new KeyboardController();
         /** State to manage states */
         this.currentState = COMPONENT_STATES.DEFAULT;
         /* Props to manage the button attributes */
@@ -38,7 +37,7 @@ const BdsButton = class {
         this.color = CORE_COLORS.DEFAULT;
         /** variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.*/
         this.variant = BUTTON_VARIANTS.DEFAULT;
-        /** size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'. */
+        /** size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'. */
         this.size = BUTTON_SIZES.MEDIUM;
         /** loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false. */
         this.loading = false;
@@ -46,10 +45,14 @@ const BdsButton = class {
         this.disclosure = false;
         /** Event for listen keydown from button, make navigation easier */
         this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                this.currentState = COMPONENT_STATES.ACTIVE;
-                event.preventDefault();
-                this.handleClick(event);
+            this.currentState = COMPONENT_STATES.ACTIVE;
+            if (this.disabled || this.loading)
+                return;
+            if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
+                this.processFormClick();
+            }
+            else {
+                this.bdsClick.emit(event);
             }
         };
         /** reset status on keyup */
@@ -62,6 +65,8 @@ const BdsButton = class {
             event.stopPropagation();
             if (this.disabled || this.loading)
                 return;
+            if (event.detail === 0)
+                return;
             if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
                 this.processFormClick();
             }
@@ -84,6 +89,19 @@ const BdsButton = class {
     /** After component rendered */
     componentDidLoad() {
         this.setupFormAssociation();
+        this.setupKeyboard();
+    }
+    /** Bind keyboard events through KeyboardController. */
+    setupKeyboard() {
+        this._keyboard
+            .attach(this.el)
+            .set([KEYBOARD.Enter, KEYBOARD.Space], (event) => {
+            if (event.type === KEY_TRIGGERS.KEYDOWN)
+                this.handleKeyDown(event);
+            else
+                this.handleKeyUp();
+        }, { triggers: [KEY_TRIGGERS.KEYDOWN, KEY_TRIGGERS.KEYUP], preventDefault: false })
+            .onFocusOut(this.handleKeyUp);
     }
     /** Select closest form or internal form from ElementInternals */
     setupFormAssociation() {
@@ -114,6 +132,9 @@ const BdsButton = class {
         }
         return;
     }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
     /* Method to get the class map for the button based on the props */
     get getClassMap() {
         return {
@@ -128,7 +149,7 @@ const BdsButton = class {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: 'e5e7dd996abf7f32218d1871069f4cdd5070cb6b', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: '815ced9f3e464c73f371227c098ea65a7097f376', class: "bds-button__content" }, h("span", { key: '350acb5924bb036afeb2c252c71261c5b2015b1e', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '57feb7a77e7edd0d43c3432a5822cdaec60729f6', name: "icon" })), h("slot", { key: '07536c420613bc6d4d53b5947524e69999937d19' }), h("span", { key: 'ae96692ab7ffe82df0f2a2cb685704912724df35', class: "bds-button__content-badge" }, h("slot", { key: '6a802ae2b19f85c3678c16f7950b597efc981da6', name: "badge" })), this.disclosure && (h("span", { key: 'c38f71595010045c86257f6d5c3ce48a504966ad', class: "bds-button__content-icon" }, h("i", { key: 'a51aff2455184cd38b2d7ebd52cc9c590b81601c', class: "bds-icon-chevron-down" }))))));
+        return (h("button", { key: 'c79564584911edae6ec1cafeb98cc3df848bf70c', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyUp: this.handleKeyUp }, h("div", { key: '75b3061a16259a504177bf8824cfa9f236a72411', class: "bds-button__content" }, h("span", { key: '53d81ba990237be2c48f98d4d9e995d5a7330cdc', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '6cebb89369396fc34480821720fa6da635409563', name: "icon" })), h("slot", { key: '237237e29f08ee510cd95bafbd481f3856f1b08f' }), h("span", { key: '67c515f4faaac368d0bcdf20ef64a6717cfda3be', class: "bds-button__content-badge" }, h("slot", { key: 'd0e6fc25d95ba960e4b3b3940321a4221769e8ad', name: "badge" })), this.disclosure && (h("span", { key: 'ffae85e8d38481098323ee36549596bfb61e5b4a', class: "bds-button__content-icon" }, h("i", { key: '633b27a4306ba7c159f15eac9e5b9e712e19cbe0', class: "bds-icon-chevron-down" }))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/bds-checkbox-button.entry.js

@@ -0,0 +1,117 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
+import { u as useFormCheckbox } from './checkbox-form-association-cgdh1LO-.js';
+
+const bdsCheckboxButtonCss = () => `@charset "UTF-8";.bds-checkbox-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--boreal-spacing-2xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);border:1px solid transparent;border-radius:var(--boreal-radius-s);background-color:var(--boreal-ui-default-base);color:var(--boreal-text-default);cursor:pointer;outline:none;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-checkbox-button input[type=checkbox],.bds-checkbox-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-checkbox-button [slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox-button:hover:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error){background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox-button:focus-visible,.bds-checkbox-button:focus{z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus);outline:none}.bds-checkbox-button:active:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error){z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-checkbox-button--checked{background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-primary-base);color:var(--boreal-text-primary-base)}.bds-checkbox-button--checked:hover,.bds-checkbox-button--checked:focus-visible,.bds-checkbox-button--checked:focus,.bds-checkbox-button--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-checkbox-button--error{background-color:var(--boreal-ui-inverse);color:var(--boreal-text-danger-base)}.bds-checkbox-button--error:hover,.bds-checkbox-button--error:focus-visible,.bds-checkbox-button--error:focus,.bds-checkbox-button--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-checkbox-button--error.bds-checkbox-button--checked{border-color:var(--boreal-stroke-danger-base)}.bds-checkbox-button--disabled{cursor:not-allowed;pointer-events:none;background-color:var(--boreal-ui-inverse);color:var(--boreal-text-disabled)}.bds-checkbox-button--disabled.bds-checkbox-button--checked{border-color:var(--boreal-stroke-primary-light);color:var(--boreal-text-primary-light)}.bds-checkbox-button__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.bds-checkbox-button__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-checkbox-button__icon:empty{display:none}.bds-checkbox-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
+
+const BdsCheckboxButton = class extends Mixin(formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.bdsChange = createEvent(this, "bdsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.isDisabled = false;
+        this.isInvalid = false;
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /** Disables the button, preventing interaction. Propagated by `bds-checkbox-group` when the group is disabled. */
+        this.disabled = false;
+        /** Marks this button as required for form submission. Has no effect when used inside `bds-checkbox-group`. */
+        this.required = false;
+        /** Toggle state of this button. Flips on every interaction when not disabled. */
+        this.checked = false;
+        /** Shows error styling on the button. */
+        this.error = false;
+        /** Value associated with this button; submitted with form data when checked. */
+        this.value = 'on';
+        /** Label text displayed inside the button. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.formCheckbox = useFormCheckbox(this, this.value);
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+    }
+    onCheckedChange() {
+        this.formCheckbox.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    formAssociatedCallback() {
+        this.formCheckbox.formAssociatedCallback();
+    }
+    formResetCallback() {
+        this.formCheckbox.formResetCallback();
+    }
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
+    }
+    formDisabledCallback(disabled) {
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    handleInvalid(event) {
+        event.preventDefault();
+        this.isInvalid = true;
+    }
+    /** Returns whether this button satisfies its validation constraints. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports validity to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.checked = !this.checked;
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+        this.valueChange.emit(this.checked);
+    }
+    get isError() {
+        return (this.error && !this.isDisabled) || this.isInvalid;
+    }
+    get classMap() {
+        return {
+            'bds-checkbox-button': true,
+            'bds-checkbox-button--checked': this.checked,
+            'bds-checkbox-button--error': this.isError,
+            'bds-checkbox-button--disabled': this.isDisabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '39d1432637929a38909bb0d3a768619d27af09c1', class: this.classMap, role: "checkbox", "aria-checked": `${this.checked}`, "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: 'fdd48deeb69445ecdde9cb2ce3556a3f07286602', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '96783bbf11a64262b8ebe88487cd2cc16f4d4263', class: "bds-checkbox-button__icon" }, h("slot", { key: 'de45f31aa9a6774f33a36c6238380014be066d50', name: "icon" })), h("span", { key: '9f94a920639d50a6949bf5272bc6fe6057701bee', class: "bds-checkbox-button__label" }, this.label || h("slot", { key: '8fb82d43c376371110a24a0310a15a7911f42964' })), this.info && (h("span", { key: '9f128d14a257bae34ab64be3e1b76b1ccfce295b', class: "bds-checkbox-button__info" }, h("span", { key: 'b3baa9bf7172810a8d5971d9e58939de24861da8', class: "bds-checkbox-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: 'bea872bace0b177316103002f7a3d17ac65fb951' }, this.info)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+BdsCheckboxButton.style = bdsCheckboxButtonCss();
+
+export { BdsCheckboxButton as bds_checkbox_button };

package/dist/esm/bds-checkbox-card.entry.js

@@ -0,0 +1,133 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
+import { u as useFormCheckbox } from './checkbox-form-association-cgdh1LO-.js';
+
+const bdsCheckboxCardCss = () => `@charset "UTF-8";.bds-checkbox-card{position:relative;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:start;align-items:flex-start;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-checkbox-card:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox-card:focus-within,.bds-checkbox-card:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-checkbox-card:focus-visible{outline:none}.bds-checkbox-card:active bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:hover bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-within bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-visible bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box{background:var(--boreal-ui-inverse)}.bds-checkbox-card__icon{display:-ms-flexbox;display:flex;margin-top:var(--boreal-spacing-3xs);height:var(--boreal-layout-m);-ms-flex-align:center;align-items:center;margin-bottom:var(--boreal-spacing-2xs)}.bds-checkbox-card .bds-checkbox-card__checkbox{pointer-events:none;-ms-flex-negative:0;flex-shrink:0;margin-top:var(--boreal-spacing-2xs);gap:0}.bds-checkbox-card .bds-checkbox-card__checkbox .bds-checkbox__label{display:none}.bds-checkbox-card__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-checkbox-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md)}.bds-checkbox-card__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md)}.bds-checkbox-card__description{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs)}.bds-checkbox-card__icon:empty{display:none}.bds-checkbox-card--checked{border-color:var(--boreal-stroke-primary-base)}.bds-checkbox-card--checked:hover,.bds-checkbox-card--checked:focus,.bds-checkbox-card--checked:focus-within,.bds-checkbox-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-checkbox-card--checked .bds-checkbox-card__header,.bds-checkbox-card--checked .bds-checkbox-card__description{color:var(--boreal-text-primary-base)}.bds-checkbox-card--checked:disabled .bds-checkbox__box{border-color:var(--boreal-stroke-primary-light);background:var(--boreal-ui-primary-light)}.bds-checkbox-card--indeterminate{border-color:var(--boreal-stroke-default-light)}.bds-checkbox-card--indeterminate .bds-checkbox-card__header{color:var(--boreal-text-default)}.bds-checkbox-card--indeterminate .bds-checkbox-card__description{color:var(--boreal-text-default-light)}.bds-checkbox-card--disabled{pointer-events:none}.bds-checkbox-card--disabled .bds-checkbox-card__header,.bds-checkbox-card--disabled .bds-checkbox-card__description{color:var(--boreal-text-disabled)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error){border-color:var(--boreal-stroke-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__header,.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__description{color:var(--boreal-text-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error{border-color:var(--boreal-stroke-danger-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__header,.bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__description{color:var(--boreal-text-danger-light)}.bds-checkbox-card--disabled .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-ui-disabled)}.bds-checkbox-card--error{border-color:var(--boreal-stroke-danger-base)}.bds-checkbox-card--error:hover,.bds-checkbox-card--error:focus,.bds-checkbox-card--error:focus-within,.bds-checkbox-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-checkbox-card--error .bds-checkbox-card__header,.bds-checkbox-card--error .bds-checkbox-card__description{color:var(--boreal-text-danger-base)}`;
+
+const BdsCheckboxCard = class extends Mixin(formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.bdsChange = createEvent(this, "bdsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.isDisabled = false;
+        this.isInvalid = false;
+        this.isIndeterminate = false;
+        /** Disables the control. */
+        this.disabled = false;
+        /** Marks the control as required for form submission. */
+        this.required = false;
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Value submitted with the form when this checkbox is selected. */
+        this.value = 'on';
+        /** Label text displayed next to the checkbox indicator. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Whether this checkbox card is selected. */
+        this.checked = false;
+        /** Whether the checkbox card shows an indeterminate visual state. */
+        this.indeterminate = false;
+        /** Whether the checkbox card is in an error state. */
+        this.error = false;
+        this.formCheckbox = useFormCheckbox(this, this.value);
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+        this.isIndeterminate = this.indeterminate;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    onIndeterminateChange(next) {
+        this.isIndeterminate = next;
+    }
+    onCheckedChange(next) {
+        this.checked = next !== false;
+        this.formCheckbox.syncFormValue();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    handleInvalid(_event) {
+        this.isInvalid = true;
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        if (this.isIndeterminate)
+            this.isIndeterminate = false;
+        this.checked = !this.checked;
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+        this.valueChange.emit(this.checked);
+    }
+    get hostClasses() {
+        return {
+            'bds-checkbox-card': true,
+            'bds-checkbox-card--checked': this.checked,
+            'bds-checkbox-card--indeterminate': this.isIndeterminate,
+            'bds-checkbox-card--disabled': this.isDisabled,
+            'bds-checkbox-card--error': this.isError,
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks (IFormControl)
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.formCheckbox.formAssociatedCallback();
+    }
+    formResetCallback() {
+        this.formCheckbox.formResetCallback();
+    }
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
+    }
+    formDisabledCallback(disabled) {
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
+    }
+    render() {
+        return (h(Host, { key: 'cb39b373d8bbbbe137a74a001f91c73b444d0c8e', class: this.hostClasses, role: "checkbox", "aria-checked": this.isIndeterminate ? 'mixed' : `${this.checked}`, "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, "aria-label": this.label || this.name || undefined, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("bds-checkbox", { key: '3375dc0b18a424f5f140143626b2bcdc73c298b0', name: this.name, class: "bds-checkbox-card__checkbox", ref: () => this.checkboxElement, value: this.value, checked: this.checked, indeterminate: this.isIndeterminate, disabled: this.isDisabled, error: this.isError, tabIndex: -1, "aria-hidden": "true", onBdsChange: e => e.preventDefault() }), h("div", { key: 'beba4396fb8c0830ffdb05b62482f0ff63aab0d7', class: "bds-checkbox-card__card" }, h("div", { key: 'f369995cc0dbeecfd7670d271ff041240a6dcb65', class: "bds-checkbox-card__content" }, h("div", { key: '12848e5aef69157ca5d144a2815e7b64a654cbe6', class: "bds-checkbox-card__header" }, h("div", { key: '18c72637c1dfb0037b7d2e7fc8cb5004bdeafb0b', class: "bds-checkbox-card__icon" }, h("slot", { key: '7e2979ea18f5c29ecdf629851378aa9efb9e39f6', name: "icon" })), h("div", { key: '0aedaf532433d3deb899f6f6fd6826589850fd71', class: "bds-checkbox-card__title" }, this.label || h("slot", { key: '43a0a9b10edc6f4ee73b5995912889728648d5d6' }))), h("div", { key: '8c89db4ab52395c75f8a1a826ace5aa0f0dbae10', class: "bds-checkbox-card__description" }, h("slot", { key: '174e70254d531fa80d8d19b419587837a4a676ea', name: "description" }))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "indeterminate": [{
+                "onIndeterminateChange": 0
+            }],
+        "checked": [{
+                "onCheckedChange": 0
+            }]
+    }; }
+};
+BdsCheckboxCard.style = bdsCheckboxCardCss();
+
+export { BdsCheckboxCard as bds_checkbox_card };