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

package/dist/collection/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.js

@@ -60,6 +60,8 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         this.selected = false;
         /** Value associated with the menu item */
         this.value = '';
+        /** Checkable state item, if is activated should be visible a checkbox */
+        this.checkable = false;
         /** Active state item */
         this.activeItem = false;
         /** Link behavior props */
@@ -70,17 +72,21 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         this.download = '';
         /** State to manage click and keyboard interaction states */
         this.currentState = COMPONENT_STATES.DEFAULT;
+        /** State to manage checked box */
+        this.boxChecked = false;
         /** Event to notify when the menu item is clicked */
         this.handleClick = (e) => {
             if (this.disabled || this.isLabelVariant)
                 return;
+            e.stopPropagation();
             if (this.isLink) {
                 this.handleLinkClick(e);
                 return;
             }
-            this.bdsSelect.emit({
+            this.bdsSelectItem.emit({
                 value: this.value,
                 selected: !this.selected,
+                element: this.el,
             });
         };
         /** Event to handle keydown navigation and trigger click */
@@ -91,7 +97,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
             // If the item is a link, we dont activate this animation
             if (!this.isLink || this.linkAttributes.download !== undefined) {
                 this.currentState =
-                    e.key === KEYBOARD.Enter.key || e.key === KEYBOARD.Space.key ? COMPONENT_STATES.ACTIVE : this.currentState;
+                    e.key === KEYBOARD.Enter || e.key === KEYBOARD.Space ? COMPONENT_STATES.ACTIVE : this.currentState;
             }
         };
         /** Event to handle keyup navigation and reset active state */
@@ -105,9 +111,25 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     checkPropsVariant() {
         validatePropValue(Object.values(LIST_MENU_ITEM_VARIANTS), LIST_MENU_ITEM_VARIANTS.BUTTON, this.el, 'variant');
     }
+    handleSelectedChange(newValue) {
+        if (this.checkable) {
+            this.boxChecked = newValue;
+        }
+    }
     /** Lifecycle method called before the component is loaded */
     componentWillLoad() {
         this.checkPropsVariant();
+        if (this.checkable) {
+            this.boxChecked = this.selected;
+        }
+    }
+    /** Improve aria resolve for checkable items */
+    get menuItemRoleExtended() {
+        if (!this.checkable)
+            return this.menuItemRole;
+        if (this.parentRole === 'listbox')
+            return 'checkbox';
+        return 'menuitemcheckbox';
     }
     /** Checks if the variant is a label */
     get isLabelVariant() {
@@ -127,9 +149,14 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     renderTypeLabel() {
         return (h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, h("slot", { name: "left-content" }), " ", h("slot", null)));
     }
+    renderCheckbox() {
+        if (!this.checkable)
+            return null;
+        return (h("bds-checkbox", { checked: this.boxChecked, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
+    }
     /** Return the render for the button variant of the list menu item */
     renderTypeButton() {
-        return (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content--left" }, h("slot", { name: "left-content" }), h("slot", null)), h("div", { class: "bds-list-item__content--right" }, h("slot", { name: "right-content" }))));
+        return (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content-left" }, this.renderCheckbox(), h("span", { class: "bds-list-item__content-left__icon" }, h("slot", { name: "left-content" })), h("span", { class: "bds-list-item__content-left__text" }, h("slot", null))), h("div", { class: "bds-list-item__content-right" }, h("slot", { name: "right-content" }))));
     }
     /** Main render */
     render() {
@@ -137,7 +164,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         if (this.isLabelVariant)
             renderItem = this.renderTypeLabel();
         const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
-        return (h(Host, { key: 'ccf9e4a413fd0f13e38f040a0da92493c84d5ae2', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRole, "aria-selected": this.ariaSelected, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...linkAttributes }, renderItem));
+        return (h(Host, { key: 'f2eba72a913704f5de812a1be1f7aafbd718f27b', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
     }
     static get is() { return "bds-list-menu-item"; }
     static get originalStyleUrls() {
@@ -287,6 +314,33 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['checkable']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkable state item, if is activated should be visible a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
             "activeItem": {
                 "type": "boolean",
                 "mutable": false,
@@ -399,13 +453,14 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     }
     static get states() {
         return {
-            "currentState": {}
+            "currentState": {},
+            "boxChecked": {}
         };
     }
     static get events() {
         return [{
-                "method": "bdsSelect",
-                "name": "bdsSelect",
+                "method": "bdsSelectItem",
+                "name": "bdsSelectItem",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -432,6 +487,9 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         return [{
                 "propName": "variant",
                 "methodName": "checkPropsVariant"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedChange"
             }];
     }
 }

package/dist/collection/components/actions/bds-toggle/bds-toggle.css

@@ -35,14 +35,14 @@
   outline: none;
 }
 .bds-toggle:active .bds-toggle__input:not([disabled]) + .bds-toggle__slider, .bds-toggle:focus-visible .bds-toggle__input:not([disabled]) + .bds-toggle__slider {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-toggle .bds-toggle__input:active:not([disabled]) + .bds-toggle__slider,
 .bds-toggle .bds-toggle__input:focus-visible:not([disabled]) + .bds-toggle__slider {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-toggle:hover:not(:active):not([checked]):not([disabled]) .bds-toggle__slider, .bds-toggle:hover:not(:active):focus-within:not([checked]) .bds-toggle__slider {
-  box-shadow: 0 1px 2px 0 var(--boreal-stroke-default-light);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-toggle__switch {
   position: relative;

package/dist/collection/components/actions/bds-toggle/bds-toggle.js

@@ -168,7 +168,7 @@ export class BdsToggle extends Mixin(formAssociatedMixin) {
             : this.validationError && this.validationMessage !== ''
                 ? this.validationMessage
                 : this.helperText;
-        return (h(Host, { key: '8aa5ec26708ce8eb834020353e2e01e882cefad6', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, h("div", { key: 'a62ae102ba2167be5e03758c5bfc6197e8f3b73c', part: "container", class: this.containerClasses }, this.canShowLabel && (h("bds-typography", { key: 'c6129d113b083f9db5bad181f5a8cf1ae161b593', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), h("label", { key: '570a0637d106b24823d39945e1b7a68a4cec4f36', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, h("input", { key: '197a94215e42e7a8a9d5a5652ad1163b501799ab', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), h("span", { key: '09ac81f91f9dc92c4e4cac593db4be4697243ce0', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (h("bds-typography", { key: '4a35755ec9e280dfedb839826683f1272c76223d', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
+        return (h(Host, { key: 'b5d27825358eaadb5cbca86e48488350e6099d8f', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, h("div", { key: '9b7bb4c4551beb61ed72c9ee4a4d7ee14e746c4e', part: "container", class: this.containerClasses }, this.canShowLabel && (h("bds-typography", { key: 'a95e1b66d8452b983002348b9456aa0c3674b202', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), h("label", { key: '954125135521cd6e65c2e6c3dfa41216e6f52dd3', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, h("input", { key: 'c3e0ee266aba0bd6e8ca7fb2d3efaeb412161806', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), h("span", { key: '68912685234edb7c6ec972231c7f951531862f7c', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (h("bds-typography", { key: '3e5645d234edc1f3efe7805260def2c74bc7cd44', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
     }
     static get is() { return "bds-toggle"; }
     static get formAssociated() { return true; }

package/dist/collection/components/feedback/bds-badge/bds-badge.js

@@ -39,7 +39,7 @@ export class BdsBadge {
         };
     }
     render() {
-        return (h(Host, { key: 'fd04d8986fd170056769871a07f838c3cf200108', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0186c80b8fbce04a7c96949ca39ecf0319abf352', name: "icon" }), h("slot", { key: 'd79b91a4c5b93280c977dce033e0e05fad2c7524' })));
+        return (h(Host, { key: 'f686ff59037a77660bc82262b9374193dface206', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '5089ac4144f7fdd1023ee3561010859b6b96ef3b', name: "icon" }), h("slot", { key: '44addf6e20aa27f1ed3df4ab728b5a0a37cc2f20' })));
     }
     static get is() { return "bds-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-banner/bds-banner.js

@@ -123,7 +123,7 @@ export class BdsBanner {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: '1a07d4c50cb16abf16a6202fc0a6453028030c94', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '2fa91a3e46f6660cb80302bc56619c107f3cf1a9' }, h("div", { key: '406c8ce24b6c8d9467f83baea3c521ef823b7ff6', class: "bds-banner__vertical-line" }), h("div", { key: '1a2c84c6480397e179a212056e0d9896a4ffcd5c', class: "bds-banner__container" }, h("div", { key: 'c3a259dae39176720f74fb4961b01166956f8e5c', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '6d24dc0d611b85a0c9f524f29948552607fc124f', "aria-hidden": "true", class: iconName })), h("div", { key: '6c4af02b7d783417cd016c81214ae4ae9a9040ff', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '74d4b78b0e6a058c48d2681b0d49742266f6653d', class: "bds-banner__title" }, h("slot", { key: '65baf563140619dd68ba6da5b1a2e61acfae61e6', name: "title" })), h("div", { key: 'a24a1af35cf217bcdadff0a9c2d3bbef8d21e232', class: "bds-banner__body" }, h("slot", { key: '5ea6dd31fbcf8eb9fd06426a2e98e36c537857b1' })), h("div", { key: '41cc79e73c212e381f8bfca997d62710f94e6ba4', class: "bds-banner__actions" }, h("slot", { key: '0266cc63e42d35a7fcbb836dfe7d11c47f192321', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: 'e5ece2606d360add80831cb5cff99c07bb6fe9a6', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '1f25dabb048e75db7f9b155ed660ee3c07b878e7' }, h("div", { key: '363d11782e11ab9e34c30981653da02d62753611', class: "bds-banner__vertical-line" }), h("div", { key: '256f0e83e848d7e50b851524364314ac8a15f195', class: "bds-banner__container" }, h("div", { key: '3f16aa2ab24f0621e754276032dea90ba7a2fcae', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '1ee1cd86ac8e6fe63d77ab815f3467623e3701bf', "aria-hidden": "true", class: iconName })), h("div", { key: 'b56334ec515aa5036143a21e17ccbab0284edd52', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '454a4dd729fa18675c9db2a8101732688b15d4d7', class: "bds-banner__title" }, h("slot", { key: '06d51ebe3e862210035d98b2ecde35ba9872309f', name: "title" })), h("div", { key: '773524e70efc9e2412c3ca71913cc1f4da80a493', class: "bds-banner__body" }, h("slot", { key: '483f4358227e080db9ee884e6462743042a17bfe' })), h("div", { key: '6180025c2b07adc050d716269f76783f3f8164d2', class: "bds-banner__actions" }, h("slot", { key: '4e45498d447a003859421f98d884f289fc18e084', name: "actions" }))), this.closable && closeIcon)))));
     }
     static get is() { return "bds-banner"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-spinner/bds-spinner.js

@@ -41,7 +41,7 @@ export class BdsSpinner {
         };
     }
     render() {
-        return (h(Host, { key: 'd114eb6445b81a4e7beafd0ff08b8aaf6e1a96e7', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: 'fa45675b2e258eca9c44a9374a65f26c781343d5', class: "bds-spinner__sr-only" }, this.label)));
+        return (h(Host, { key: '7e7846adadb6224abfcaaf2478768b72ec712659', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: '1c6aad446ed35a3adcb4e4f28fd4a3e7b9b7cb3a', class: "bds-spinner__sr-only" }, this.label)));
     }
     static get is() { return "bds-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-status/bds-status.js

@@ -38,7 +38,7 @@ export class BdsStatus {
         };
     }
     render() {
-        return (h(Host, { key: '36cf2dfe777002b02d126d38cb9ed2bce3f828a6', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '99ab1fa89dc28f3ffca617508b5c577abf874d7a', name: "icon" }), h("slot", { key: '8ff726d294fc524950ac0255c71f4ba65b3c9b96' })));
+        return (h(Host, { key: '9a952b22de8565fcca464d045f71ea86c92c8632', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '47e03b139fcb4da8b15fe115518856c54d02a320', name: "icon" }), h("slot", { key: 'e512e975c2df8fa3e3380f27808eec96be5ad455' })));
     }
     static get is() { return "bds-status"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-tag/bds-tag.css

@@ -30,15 +30,15 @@
   line-height: var(--boreal-typography-line-height-xs);
 }
 .bds-tag:hover:not(.bds-tag--selected):not(.bds-tag--disabled) {
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-tag:focus:not(.bds-tag--selected) {
   outline: none;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-tag--selected {
   outline: none;
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag__icon {
   font-size: var(--boreal-typography-font-size-md);
@@ -67,7 +67,7 @@
   cursor: pointer;
 }
 .bds-tag__close-button:hover {
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
 }
@@ -75,12 +75,12 @@
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
   outline: none;
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag__close-button:active {
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
-  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, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag--disabled {
   cursor: not-allowed;

package/dist/collection/components/feedback/bds-tag/bds-tag.js

@@ -116,7 +116,7 @@ export class BdsTag {
         const classes = this.getClasses();
         const hasCloseButton = !this.readonly;
         const isSelectable = this.multiselect;
-        return (h(Host, { key: '0864f3764aef3354e5b2c7494a5c9c2cb261582f', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
+        return (h(Host, { key: 'bd62a05fccbfa4aed3b7f72b9edf800c3ab05362', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
     }
     static get is() { return "bds-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/forms/bds-checkbox/bds-checkbox/bds-checkbox.css

@@ -0,0 +1,132 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+.bds-checkbox__info {
+  display: inline-flex;
+  align-items: center;
+}
+
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-checkbox {
+  font-family: var(--boreal-typography-font-family-primary);
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--boreal-spacing-2xs);
+  outline: none;
+  cursor: pointer;
+}
+.bds-checkbox input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.bds-checkbox__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--boreal-spacing-3xs);
+}
+.bds-checkbox__required-indicator {
+  color: var(--boreal-icon-danger-base);
+  font-weight: var(--boreal-typography-font-weight-regular);
+  font-style: normal;
+}
+.bds-checkbox__info-icon {
+  font-size: var(--boreal-typography-font-size-xs);
+  color: var(--boreal-icon-default-light);
+}
+.bds-checkbox__label {
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-checkbox__label:empty {
+  display: none;
+}
+.bds-checkbox__icon:empty {
+  display: none;
+}
+.bds-checkbox__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--boreal-spacing-m);
+  height: var(--boreal-spacing-m);
+  border: var(--boreal-spacing-3xs) solid var(--boreal-stroke-default-light);
+  background: var(--boreal-ui-inverse);
+  border-radius: var(--boreal-spacing-2xs);
+  transition: background 0.2s ease;
+}
+.bds-checkbox:hover .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-checkbox:focus .bds-checkbox__box, .bds-checkbox:focus-visible .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-focus);
+}
+.bds-checkbox:active .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-active);
+}
+.bds-checkbox--checked .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  color: var(--boreal-icon-inverse);
+}
+.bds-checkbox--checked:hover .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+.bds-checkbox--checked:active .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+.bds-checkbox--checked:disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-light);
+  background: var(--boreal-ui-primary-light);
+}
+.bds-checkbox--indeterminate .bds-checkbox__box {
+  color: var(--boreal-icon-default-ink);
+}
+.bds-checkbox--indeterminate:disabled .bds-checkbox__box {
+  color: var(--boreal-icon-disabled);
+  background: var(--boreal-ui-inverse);
+}
+.bds-checkbox--error .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box {
+  color: var(--boreal-icon-inverse);
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bds-checkbox--disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-ui-disabled);
+}
+.bds-checkbox--disabled .bds-checkbox__label {
+  color: var(--boreal-text-disabled);
+}
+.bds-checkbox--disabled .bds-checkbox__required-indicator {
+  color: var(--boreal-text-danger-light);
+}