@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

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

@@ -0,0 +1,127 @@
+@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
+ **/
+/**
+* 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-card {
+  position: relative;
+  cursor: pointer;
+  font-family: var(--boreal-typography-font-family-primary);
+  display: inline-flex;
+  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);
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-checkbox-card:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-checkbox-card:focus-within, .bds-checkbox-card:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-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: flex;
+  margin-top: var(--boreal-spacing-3xs);
+  height: var(--boreal-layout-m);
+  align-items: center;
+  margin-bottom: var(--boreal-spacing-2xs);
+}
+.bds-checkbox-card .bds-checkbox-card__checkbox {
+  pointer-events: none;
+  flex-shrink: 0;
+  margin-top: calc(var(--boreal-spacing-2xs) - var(--boreal-spacing-4xs));
+}
+.bds-checkbox-card .bds-checkbox-card__checkbox .bds-checkbox__label {
+  display: none;
+}
+.bds-checkbox-card__content {
+  display: flex;
+  flex-direction: column;
+}
+.bds-checkbox-card__header {
+  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--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--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--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);
+}

package/dist/collection/components/forms/bds-checkbox-card/bds-checkbox-card.js

@@ -0,0 +1,397 @@
+import { formAssociatedMixin } from "../../../mixins/index";
+import { Host, Mixin, h } from "@stencil/core";
+import { setFormValue } from "../../../utils/index";
+/**
+ * Checkbox card component is a selectable card-based checkbox option.
+ * It presents a non-exclusive choice with optional descriptive text and icon,
+ * supporting checked, indeterminate, disabled, and error states.
+ * Can be used standalone or within a checkbox group for orchestration.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ * @slot description - Optional descriptive text rendered below the label.
+ *
+ * @property {string}  name          - Name of the form control, submitted as a key in the form data.
+ * @property {boolean} disabled      - Disables the control. Defaults to `false`.
+ * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
+ * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
+ * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
+ * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
+ * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
+ * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
+ *
+ * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+ * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
+ */
+export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this.isDisabled = false;
+        this.isIndeterminate = false;
+        this.isChecked = 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.handleClick = () => this.toggle();
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        super();
+    }
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+        this.isIndeterminate = this.indeterminate;
+        this.isChecked = this.checked;
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    onIndeterminateChange(next) {
+        this.isIndeterminate = next;
+    }
+    onCheckedChange(next) {
+        this.isChecked = next;
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.isIndeterminate = false;
+        this.isChecked = !this.isChecked;
+        this.bdsChange.emit({ checked: this.isChecked, value: this.value });
+        this.valueChange.emit(this.isChecked);
+    }
+    get hostClasses() {
+        return {
+            'bds-checkbox-card': true,
+            'bds-checkbox-card--checked': this.isChecked,
+            'bds-checkbox-card--indeterminate': this.isIndeterminate,
+            'bds-checkbox-card--disabled': this.isDisabled,
+            'bds-checkbox-card--error': this.error,
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks (IFormControl)
+    // ---------------------------------------------------------------------------
+    syncFormValue() {
+        setFormValue(this.internals, this.isChecked ? this.value : null);
+    }
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        this.isChecked = false;
+        this.isIndeterminate = false;
+        setFormValue(this.internals, null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.isChecked = state === this.value;
+        this.syncFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+    }
+    render() {
+        return (h(Host, { key: '9277e649285e38b491fe55bd8bc4eabf7b0725f8', class: this.hostClasses, role: "checkbox", "aria-checked": this.isIndeterminate ? 'mixed' : `${this.isChecked}`, "aria-disabled": this.isDisabled ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-label": this.label || this.name || undefined, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("bds-checkbox", { key: 'e87685111aae53e368f37fde53994590bbdc0a69', class: "bds-checkbox-card__checkbox", name: this.name, value: this.value, checked: this.isChecked, indeterminate: this.isIndeterminate, disabled: this.isDisabled, error: this.error, tabIndex: -1, "aria-hidden": "true" }), h("div", { key: 'ca93933dddfbdbbf6ae96a9f0b2f7ec1b4014a3a', class: "bds-checkbox-card__card" }, h("div", { key: '952ca899553bc57a7f6b01cd65607d084c7869a9', class: "bds-checkbox-card__content" }, h("div", { key: 'bf913fdb5d5fab9e81b387113c7198514fdbe8de', class: "bds-checkbox-card__header" }, h("div", { key: 'd885e0eabf9ea9d425160ce88a4d76212b400a1d', class: "bds-checkbox-card__icon" }, h("slot", { key: '9c658f9823aa449e4e9138b2b86e937cc9ce3e1c', name: "icon" })), h("div", { key: 'e7c410ff15cb7bd62c2eba56683cf1b9b24c970a', class: "bds-checkbox-card__title" }, this.label || h("slot", { key: '59cce6d6bd050711af8a55a44252747a593b0a29' }))), h("div", { key: '1a574fde1998ebd5f2940c27dbc5e275ce7bb933', class: "bds-checkbox-card__description" }, h("slot", { key: 'ed53c06534344f9dfec0f0ffba067c16596d24d7', name: "description" }))))));
+    }
+    static get is() { return "bds-checkbox-card"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-checkbox-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-checkbox-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['name']",
+                    "resolved": "string",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control, submitted as a key in the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['required']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control as required for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['value']",
+                    "resolved": "string",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted with the form when this checkbox is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['label']",
+                    "resolved": "string",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed next to the checkbox indicator. Falls back to the default slot when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "ICheckboxCard['checked']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this checkbox card is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "ICheckboxCard['indeterminate']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox card shows an indeterminate visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckboxCard['error']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ICheckboxCard": {
+                            "location": "import",
+                            "path": "./types/ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "referenceLocation": "ICheckboxCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox card is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "isIndeterminate": {},
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes. Useful for 2-way binding / v-model."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles this checkbox card."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "onIndeterminateChange"
+            }, {
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/forms/bds-checkbox-card/types/ICheckboxCard.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/forms/bds-flag/bds-flag.js

@@ -182,7 +182,7 @@ export class BdsFlag {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (h(Host, { key: 'a3d7548922ce9ad6bd67bdc906e0cd3590a76a35', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: '44299f5031e4adb04837eabefa37f70f7dc8a9b8', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: 'ce37d02816caf7bfc7fa22f1897de481a8d82bbb', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (h(Host, { key: 'a8a3ef0fefd3e7b1d4c9fd40bf5ea82ce9000815', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: 'ea653c06af2a3c3341c95acd1750bdbbbd08f268', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: '289fcc0f0d247f02b79493fd34aca190c985ed45', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get is() { return "bds-flag"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,121 @@
+@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-radio__content, .bds-radio__icon {
+  display: flex;
+  align-items: center;
+}
+
+.bds-radio__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-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+  cursor: pointer;
+  outline: none;
+}
+.bds-radio input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.bds-radio__content {
+  gap: var(--boreal-spacing-3xs);
+}
+.bds-radio__icon {
+  flex-shrink: 0;
+  line-height: 1;
+}
+.bds-radio__label {
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-regular);
+  line-height: var(--boreal-typography-line-height-sm);
+  color: var(--boreal-text-default);
+}
+.bds-radio__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--boreal-radius-full);
+  border: 1px solid var(--boreal-stroke-default-light);
+  background-color: var(--boreal-ui-inverse);
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-radio__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--boreal-radius-full);
+  background-color: transparent;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-radio__info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: 1;
+  color: var(--boreal-icon-default-ink);
+}
+.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button {
+  border-color: var(--boreal-stroke-default-light);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__dot {
+  background-color: var(--boreal-ui-base-light);
+}
+.bds-radio:is(:focus-visible, :focus) .bds-radio__button {
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-radio:active:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button {
+  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-radio--checked .bds-radio__button {
+  border-color: var(--boreal-stroke-primary-base);
+}
+.bds-radio--checked .bds-radio__dot {
+  background-color: var(--boreal-ui-primary-base);
+}
+.bds-radio--error .bds-radio__button {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-radio--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.bds-radio--disabled .bds-radio__button {
+  border-color: var(--boreal-stroke-default-light);
+  background-color: var(--boreal-ui-disabled);
+}
+.bds-radio--disabled .bds-radio__label {
+  color: var(--boreal-text-disabled);
+}
+.bds-radio--disabled.bds-radio--checked .bds-radio__button {
+  border-color: var(--boreal-ui-primary-light);
+}
+.bds-radio--disabled.bds-radio--checked .bds-radio__dot {
+  background-color: var(--boreal-ui-primary-light);
+}