@brandsync/wc 0.0.10 → 0.0.12

package/dist/collection/components/bs-logo/bs-logo.js

@@ -0,0 +1,193 @@
+import { h } from "@stencil/core";
+import { BRANDSYNC_LOGO_FULL_LIGHT_SVG } from "./brandsync-logo-full-light";
+import { BRANDSYNC_LOGO_FULL_DARK_SVG } from "./brandsync-logo-full-dark";
+import { BRANDSYNC_LOGO_MARK_SVG } from "./brandsync-logo-mark";
+/**
+ * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+ * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+ * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+ * down to a narrowed box, rather than using a real icon-only asset).
+ *
+ * ## When to use
+ * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+ *
+ * ## When not to use
+ * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+ *   own inline Genie asset), not this one.
+ *
+ * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+ * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+ * the icon-only mark at different responsive breakpoints -- renamed here to
+ * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+ * renders), not literally a device/breakpoint switch.
+ *
+ * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+ * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+ * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+ * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+ * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+ * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+ * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+ * is already designed for whatever surface it's placed on.
+ *
+ * @part logo - The rendered SVG/image's wrapper.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in bs-logo.css,
+// not here -- see bs-navigation-header.css's identical note.
+export class BsLogo {
+    /** How much of the logo to render. `full` is the icon + "EG BrandSync" wordmark (190.977x44
+     * natural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a
+     * consumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class
+     * doc above. */
+    variant = 'full';
+    /**
+     * Which pre-built asset to use for `variant="full"` -- Figma ships a genuinely separate,
+     * differently-drawn dark-background asset (every wordmark path filled solid white, and the
+     * icon's outer shape a single solid-white path instead of the light version's two-path
+     * white-fill-plus-border-ring), not a CSS currentColor swap of identical paths.
+     *
+     * `"auto"` (default) renders both assets and lets CSS pick one via
+     * `--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in
+     * `src/global/base.css`, flipped by the same `[data-theme="dark"]` attribute every other
+     * `--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring
+     * needed, the same way a consuming app's own dark mode already re-themes every other part of
+     * this library via ordinary CSS custom property inheritance. Set `"light"`/`"dark"` explicitly
+     * to pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise
+     * dark-themed.
+     *
+     * Has no effect on `variant="mark"`: Figma's component set only has one real designed instance
+     * of the icon-only mark (`Device="Tab and mobile"`, `Background="Default"`) -- there's no
+     * separate dark version of it, so the mark renders identically regardless of this prop.
+     */
+    background = 'auto';
+    /** `variant="custom"` only: the image URL to render (e.g. a URL your app already fetched from a
+     * logo API). Ignored for `full`/`mark`. */
+    src = null;
+    /**
+     * `variant="custom"` only: accessible alt text for the image -- a product logo is meaningful
+     * content (whose brand is this?), not decorative, so set this to something real (e.g. the
+     * product/company name). Falls back to `alt=""` (marking the image decorative to assistive
+     * tech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no
+     * `alt` attribute at all is a harder accessibility failure than one explicitly marked
+     * decorative, but an empty fallback is still worse than a real name, so don't rely on it.
+     * Ignored for `full`/`mark` (those already carry their own fixed `aria-label="BrandSync"`).
+     */
+    alt = null;
+    render() {
+        if (this.variant === 'custom') {
+            return h("img", { part: "logo", class: "bs-logo bs-logo--custom", src: this.src ?? undefined, alt: this.alt ?? '' });
+        }
+        if (this.variant === 'mark') {
+            return h("div", { part: "logo", class: "bs-logo bs-logo--mark", role: "img", "aria-label": "BrandSync", innerHTML: BRANDSYNC_LOGO_MARK_SVG });
+        }
+        return (h("div", { part: "logo", class: `bs-logo bs-logo--full bs-logo--bg-${this.background}`, role: "img", "aria-label": "BrandSync" }, h("div", { class: "bs-logo__asset bs-logo__asset--light", innerHTML: BRANDSYNC_LOGO_FULL_LIGHT_SVG }), h("div", { class: "bs-logo__asset bs-logo__asset--dark", innerHTML: BRANDSYNC_LOGO_FULL_DARK_SVG })));
+    }
+    static get is() { return "bs-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoVariant",
+                    "resolved": "\"custom\" | \"full\" | \"mark\"",
+                    "references": {
+                        "BsLogoVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'full'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoBackground",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {
+                        "BsLogoBackground": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "'auto'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "null"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "null"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-logo/bs-logo.stories.js

@@ -0,0 +1,69 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['full', 'mark', 'custom'];
+const backgrounds = ['auto', 'light', 'dark'];
+const meta = {
+    title: 'Components/bs-logo',
+    parameters: { docs: { description: { component: componentDescription('bs-logo') } } },
+    render: args => html `<bs-logo variant=${args.variant} background=${args.background} src=${args.src} alt=${args.alt}></bs-logo>`,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-logo', 'variant') },
+        background: { control: 'select', options: backgrounds, description: propDescription('bs-logo', 'background') },
+        src: { control: 'text', description: propDescription('bs-logo', 'src') },
+        alt: { control: 'text', description: propDescription('bs-logo', 'alt') },
+    },
+    args: {
+        variant: 'full',
+        background: 'auto',
+        src: '',
+        alt: '',
+    },
+};
+export default meta;
+export const Full = {
+    name: 'Full (light)',
+};
+// `data-theme="dark"` is set on a wrapper scoped to just this story, NOT via a globals override on
+// the toolbar's Theme switch -- that switch's decorator (see .storybook/preview.ts) sets the
+// attribute on the shared document root, which breaks down on this component's Docs page (every
+// story renders together in one document there, so one story forcing a document-wide theme while
+// its siblings render under the *other* theme thrashes). A local wrapper gets the identical CSS
+// custom property cascade (tokens.css's dark block matches any `[data-theme="dark"]` element, not
+// specifically <html>) without touching shared state. background is left at its "auto" default
+// (via args below) so this demonstrates the logo following the ambient theme on its own, the same
+// way every other --bs-* token already does (see the CSS bridge in src/global/base.css).
+export const FullAutoDark = {
+    name: 'Full (auto, dark theme)',
+    render: args => html `
+    <div data-theme="dark" style="background: var(--bs-surface-base); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+// Pins the dark asset explicitly via background="dark", regardless of the page's own theme --
+// for a consumer that places this on a dark surface without setting [data-theme="dark"] itself.
+// Rendered on a manually dark canvas (not the global theme switch) to prove the override doesn't
+// depend on that switch at all.
+export const FullDark = {
+    name: 'Full (dark, explicit)',
+    args: { background: 'dark' },
+    render: args => html `
+    <div style="background: var(--bs-surface-inverse); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+export const Mark = {
+    name: 'Mark',
+    args: { variant: 'mark' },
+};
+// A consumer-supplied logo (e.g. fetched at runtime from a service like brand.dev) instead of the
+// built-in BrandSync assets -- this component only renders the image, it never fetches it itself.
+export const Custom = {
+    name: 'Custom (consumer-supplied image)',
+    args: {
+        variant: 'custom',
+        src: 'https://placehold.co/160x44/0062c1/white?text=Acme+Co',
+        alt: 'Acme Co',
+    },
+};

package/dist/collection/components/bs-menu/bs-menu.js

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: 'e49c52a18ea8c10399d818a00e0c6b748f0c9b8f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '7e8cef2af1a068d0ab31fc3aee0abf8b59645a08' })));
+        return (h("div", { key: 'b39f37927ff53201d71b40612720ceb8bb0eda27', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'b6a89f46892cf4e204edc58fe61ab69837514571' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'ddd19d6211c8fe3be1567f67ac74076ccd664235', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'bee75c968706c83503a3461f263640c3fbfa12a9', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '521e1f06cd42794e78e17de93f1318f2998f67bd', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '0f65b70e59b7dbaa3e455a3f2ff73b50dcdb1b61', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '31f5e8c8ce0996bfe26051918b378de82dffa63c' }))));
+        return (h("button", { key: '1ca79f8c38bb2d8b4dc0d6edfaeafa4b7be1aee9', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '2efc2485a3ae52e3ee5ca4b622ca853aa6ce8abf', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '8e426c1974fd8c9d1bd6fb97eb62ccb8e1770f05', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2b799a8cfc0a546b53cbe2f65847b255e53b4dcc', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '0babde24dcc1265ef9a9e1517701c913a70a6f78' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-radio/bs-radio.cmp.test.js

@@ -0,0 +1,76 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-radio', () => {
+    it('renders an unchecked native radio by default', async () => {
+        const { root } = await render(h("bs-radio", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', 'radio');
+        expect(input.checked).toBe(false);
+        expect(root.shadowRoot.querySelector('[part="dot"]')).toBeNull();
+    });
+    it('reflects the checked prop to the native input and shows the center dot', async () => {
+        const { root } = await render(h("bs-radio", { checked: true }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="circle"]')).toHaveClass('bs-radio__circle--selected');
+        expect(root.shadowRoot.querySelector('[part="dot"]')).not.toBeNull();
+    });
+    it('clicking the input checks it and emits bsChange with the value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-radio", { value: "one" }));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail('one');
+    });
+    it('passes name and value attributes through to the native input', async () => {
+        const { root } = await render(h("bs-radio", { name: "fruit", value: "apple" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('name', 'fruit');
+        expect(input).toEqualAttribute('value', 'apple');
+    });
+    // NOTE: each <bs-radio> has its own shadow root, so its native <input> lives in its own separate
+    // DOM tree. Per the HTML spec, a "radio button group" is scoped to a single tree -- shadow DOM
+    // boundaries mean same-`name` inputs in *different* <bs-radio> instances are NOT part of the same
+    // native radio group, so clicking one does not natively uncheck another. This is a real, tested
+    // limitation of composing native <input type="radio"> inside separate shadow roots, not a bug in
+    // this component -- see bs-radio.mdx's Accessibility section for the documented gap. Within a
+    // single instance's own shadow root the native input still behaves like a normal radio input.
+    it('same-name bs-radio instances do NOT natively uncheck each other, since each lives in its own shadow root', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-radio", { name: "fruit", value: "apple" }), h("bs-radio", { name: "fruit", value: "banana" })));
+        const [first, second] = Array.from(root.querySelectorAll('bs-radio'));
+        const firstInput = first.shadowRoot.querySelector('input');
+        const secondInput = second.shadowRoot.querySelector('input');
+        firstInput.click();
+        await waitForChanges();
+        expect(firstInput.checked).toBe(true);
+        secondInput.click();
+        await waitForChanges();
+        expect(secondInput.checked).toBe(true);
+        // Real (shadow-DOM-scoped) native behavior: the first input is untouched, not unchecked.
+        expect(firstInput.checked).toBe(true);
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the native input', async () => {
+            const { root } = await render(h("bs-radio", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toHaveAttribute('disabled');
+        });
+        it('prevents toggling via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-radio", { disabled: true }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.checked).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-radio", null, "Option A"));
+        expect(root).toHaveTextContent('Option A');
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(label.querySelector('slot')).not.toBeNull();
+    });
+});

package/dist/collection/components/bs-radio/bs-radio.css

@@ -0,0 +1,164 @@
+/**
+ * @prop --bs-radio-size: Diameter of the visual radio ring. Aliased to --bs-spacing-300.
+ * @prop --bs-radio-border-width: Width of the ring border.
+ * @prop --bs-radio-state-layer-size: Diameter of the hover/focus/pressed halo behind the ring.
+ * @prop --bs-radio-hit-area-size: Diameter of the layout box the state layer is centered in.
+ * @prop --bs-radio-gap: Gap between the ring and the label text. Aliased to --bs-spacing-100.
+ */
+:host {
+  display: inline-block;
+
+  --bs-radio-size: var(--bs-spacing-300);
+  --bs-radio-border-width: 2px;
+  --bs-radio-state-layer-size: 40px;
+  --bs-radio-hit-area-size: 48px;
+  --bs-radio-gap: var(--bs-spacing-100);
+}
+
+.bs-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-radio-gap);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.bs-radio--disabled {
+  cursor: not-allowed;
+}
+
+/* The native input is visually hidden but stays in the layout/focus/keyboard chain -- opacity: 0
+   (not display: none) so it can still receive and show focus. Covers the whole label (same
+   pattern as bs-checkbox) so clicking anywhere -- ring or label text -- toggles it. */
+.bs-radio__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.bs-radio__input:disabled {
+  cursor: not-allowed;
+}
+
+/* Outer clickable-area layout box -- just sizes/centers the state layer, carries no styling of
+   its own (the real hit target is the absolutely-positioned input above, covering the whole
+   label). */
+.bs-radio__hit-area {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-radio-hit-area-size);
+  height: var(--bs-radio-hit-area-size);
+}
+
+/* State layer -- the soft hover/focus/pressed background wash, distinct from the ring's own
+   border color. */
+.bs-radio__state-layer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-radio-state-layer-size);
+  height: var(--bs-radio-state-layer-size);
+  border-radius: 50%;
+  background: var(--bs-radio-bg-default);
+}
+
+.bs-radio__circle {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-radio-size);
+  height: var(--bs-radio-size);
+  border: var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);
+  border-radius: 50%;
+  background: transparent;
+}
+
+.bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-default);
+}
+
+.bs-radio__dot {
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background: var(--bs-radio-icon-checked);
+}
+
+/* Hover/focus/pressed -- keyed off the hidden native input's pseudo-classes, since it sits on top
+   of and covers the whole label, so it always reflects the user's actual pointer/keyboard target. */
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-hover);
+}
+
+.bs-radio__input:hover:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot {
+  background: var(--bs-radio-icon-hover);
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-focus);
+  outline: 2px solid var(--bs-radio-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-focus);
+}
+
+.bs-radio__input:focus-visible ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-focus);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-pressed);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-enabled-border-pressed);
+}
+
+.bs-radio__input:active:not(:disabled) ~ .bs-radio__hit-area .bs-radio__circle--selected {
+  border-color: var(--bs-radio-selected-border-pressed);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__state-layer {
+  background: var(--bs-radio-bg-disabled);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__circle {
+  border-color: var(--bs-radio-border-disabled);
+}
+
+.bs-radio__input:disabled ~ .bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot {
+  background: var(--bs-radio-icon-disabled);
+}
+
+.bs-radio__label {
+  font-size: var(--bs-font-size-md);
+  color: var(--bs-radio-label-default);
+}
+
+.bs-radio--disabled .bs-radio__label {
+  color: var(--bs-radio-label-disabled);
+}