@brandsync/wc 0.0.10 → 0.0.12

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.css

@@ -0,0 +1,39 @@
+/**
+ * @prop --bs-tabs-tab-gap: Gap between tabs when type="bs-tab". Aliased to --bs-spacing-100.
+ * @prop --bs-tabs-inline-tab-bg: Bar background when type="bs-inline-tab". Aliased to --bs-color-neutral-container.
+ * @prop --bs-tabs-inline-tab-padding-x: Bar horizontal padding when type="bs-inline-tab". Aliased to --bs-spacing-50.
+ * @prop --bs-tabs-inline-tab-radius: Bar corner radius when type="bs-inline-tab". Aliased to --bs-border-radius-full.
+ * @prop --bs-tabs-inline-tab-gap: Gap between tabs when type="bs-inline-tab". Aliased to --bs-spacing-50.
+ */
+:host {
+  display: inline-block;
+
+  --bs-tabs-tab-gap: var(--bs-spacing-100);
+
+  --bs-tabs-inline-tab-bg: var(--bs-color-neutral-container);
+  --bs-tabs-inline-tab-padding-x: var(--bs-spacing-50);
+  --bs-tabs-inline-tab-radius: var(--bs-border-radius-full);
+  --bs-tabs-inline-tab-gap: var(--bs-spacing-50);
+}
+
+.bs-tabs {
+  display: inline-flex;
+  align-items: center;
+}
+
+.bs-tabs--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.bs-tabs--bs-tab {
+  gap: var(--bs-tabs-tab-gap);
+}
+
+.bs-tabs--bs-inline-tab {
+  background: var(--bs-tabs-inline-tab-bg);
+  padding: 0 var(--bs-tabs-inline-tab-padding-x);
+  border-radius: var(--bs-tabs-inline-tab-radius);
+  gap: var(--bs-tabs-inline-tab-gap);
+}

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -0,0 +1,133 @@
+import { h } from "@stencil/core";
+/**
+ * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+ * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+ *
+ * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+ * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+ * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+ * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+ * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+ * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+ * manually -- but that's no longer the first recommended path.
+ *
+ * ## When to use
+ * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+ *   should behave as a single-selection tab bar.
+ *
+ * ## When not to use
+ * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+ *   directly.
+ *
+ * @slot - Default slot: the tab elements (`<bs-tab>` or `<bs-inline-tab>`, matching `type`) that
+ * make up this group.
+ * @part tablist - The wrapping element carrying `role="tablist"`.
+ */
+// Note: this component's CSS Custom Properties (--bs-tabs-*) are documented via @prop comments in
+// bs-tabs.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not
+// the class-level JSDoc (see bs-tab.tsx's equivalent note).
+export class BsTabs {
+    el;
+    /** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
+     * for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing
+     * external needs to target it via CSS attribute selector, it only drives internal class names. */
+    type = 'bs-tab';
+    /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
+     * switches `flex-direction`. */
+    orientation = 'horizontal';
+    /**
+     * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
+     * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
+     * on the host itself), and sets `selected` on the clicked child / `false` on its siblings.
+     * Disabled children never emit `bsSelect` in the first place (each's own `onClick` guards
+     * `if (this.disabled) return;`), so no special-casing is needed here.
+     */
+    onTabSelect(ev) {
+        const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
+        tabs.forEach(tab => {
+            tab.selected = tab === ev.target;
+        });
+    }
+    render() {
+        const vertical = this.orientation === 'vertical';
+        return (h("div", { key: '55006a332bf4d3b955f5c76cf2cfadf483affb4b', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0b0d1ec94485389d4bb6b4000384e337991060bd' })));
+    }
+    static get is() { return "bs-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTabsType",
+                    "resolved": "\"bs-inline-tab\" | \"bs-tab\"",
+                    "references": {
+                        "BsTabsType": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
+                            "id": "src/components/bs-tab/bs-tabs/bs-tabs.tsx::BsTabsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only\nfor `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing\nexternal needs to target it via CSS attribute selector, it only drives internal class names."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'bs-tab'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTabsOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsTabsOrientation": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
+                            "id": "src/components/bs-tab/bs-tabs/bs-tabs.tsx::BsTabsOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and\nswitches `flex-direction`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "bsSelect",
+                "method": "onTabSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const types = ['bs-tab', 'bs-inline-tab'];
+const orientations = ['horizontal', 'vertical'];
+const tabLabels = ['Overview', 'Details', 'Settings', 'Archived'];
+const meta = {
+    title: 'Components/bs-tab/bs-tabs',
+    parameters: { docs: { description: { component: componentDescription('bs-tabs') } } },
+    render: args => html `
+    <bs-tabs type=${args.type} orientation=${args.orientation}>
+      ${tabLabels.map(label => args.type === 'bs-inline-tab'
+        ? html `<bs-inline-tab ?selected=${label === args.selectedTab} ?disabled=${label === 'Archived'}>${label}</bs-inline-tab>`
+        : html `<bs-tab ?selected=${label === args.selectedTab} ?disabled=${label === 'Archived'}>${label}</bs-tab>`)}
+    </bs-tabs>
+  `,
+    argTypes: {
+        type: { control: 'select', options: types, description: propDescription('bs-tabs', 'type') },
+        orientation: { control: 'select', options: orientations, description: propDescription('bs-tabs', 'orientation') },
+        selectedTab: {
+            control: 'select',
+            options: tabLabels,
+            description: 'Which tab is selected (Archived is disabled and cannot be selected).',
+        },
+    },
+    args: {
+        type: 'bs-tab',
+        orientation: 'horizontal',
+        selectedTab: 'Overview',
+    },
+};
+export default meta;
+export const Default = {};
+export const InlineTabGroup = {
+    name: 'Inline tab group',
+    args: { type: 'bs-inline-tab' },
+};
+export const Vertical = {
+    args: { orientation: 'vertical' },
+};

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '7020be9b961d1370449ce37570ae0c9162bd6176', class: "bs-tooltip" }, h("span", { key: 'e21d62d8f701917c7a074c105a7509c9f4582f64', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'f011584e85c9d10371f961e49d44b67a3983bd2e', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'f27da1c55a31d3e1a7ee330440ee9b4a3c577e9a' }))));
+        return (h("div", { key: '64951f06f070f2d3b10796d09f2c97ef7cf098fa', class: "bs-tooltip" }, h("span", { key: 'b9ff6d99eb95aea33949f211aa80c29220a3e199', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '3b559c7952b42011f45bd59177dbdf3194b84b92', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '54b278e8ee7c98360b9aaaea300e0631d8bfb8dd' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -0,0 +1,131 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-navigation-drawer', () => {
+    it('renders a <nav> landmark with the logo', async () => {
+        const { root } = await render(h("bs-navigation-drawer", null));
+        expect(root.shadowRoot.querySelector('nav')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="logo"]')).not.toBeNull();
+    });
+    it('renders the default "Main Menu" heading', async () => {
+        const { root } = await render(h("bs-navigation-drawer", null));
+        const title = root.shadowRoot.querySelector('[part="title"]');
+        expect(title.textContent).toBe('Main Menu');
+    });
+    it('sets the <nav> landmark aria-label from heading', async () => {
+        const { root } = await render(h("bs-navigation-drawer", { heading: "Admin Menu" }));
+        expect(root.shadowRoot.querySelector('nav')).toEqualAttribute('aria-label', 'Admin Menu');
+    });
+    it('renders a custom heading', async () => {
+        const { root } = await render(h("bs-navigation-drawer", { heading: "Admin Menu" }));
+        const title = root.shadowRoot.querySelector('[part="title"]');
+        expect(title.textContent).toBe('Admin Menu');
+    });
+    it('renders the search and default (items) slots', async () => {
+        const { root } = await render(h("bs-navigation-drawer", null));
+        expect(root.shadowRoot.querySelector('slot[name="search"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="items"] slot:not([name])')).not.toBeNull();
+    });
+    it('projects light-DOM content into the search and items slots', async () => {
+        const { root } = await render(h("bs-navigation-drawer", null, h("input", { slot: "search" }), h("button", null, "Item one")));
+        const searchSlot = root.shadowRoot.querySelector('slot[name="search"]');
+        const itemsSlot = root.shadowRoot.querySelector('[part="items"] slot:not([name])');
+        expect(searchSlot.assignedElements()[0].tagName).toBe('INPUT');
+        expect(itemsSlot.assignedElements()[0].textContent).toBe('Item one');
+    });
+    describe('collapsible', () => {
+        it('renders the collapse toggle by default', async () => {
+            const { root } = await render(h("bs-navigation-drawer", null));
+            expect(root.shadowRoot.querySelector('[part="collapse"]')).not.toBeNull();
+        });
+        it('renders no collapse toggle at all when collapsible is false', async () => {
+            const { root } = await render(h("bs-navigation-drawer", { collapsible: false }));
+            expect(root.shadowRoot.querySelector('[part="collapse"]')).toBeNull();
+        });
+    });
+    describe('collapse toggle', () => {
+        it('renders a real button with an accessible label', async () => {
+            const { root } = await render(h("bs-navigation-drawer", null));
+            const button = root.shadowRoot.querySelector('[part="collapse"]');
+            expect(button.tagName).toBe('BUTTON');
+            expect(button).toEqualAttribute('type', 'button');
+            expect(button).toEqualAttribute('aria-label', 'Collapse');
+            expect(button).toEqualAttribute('aria-pressed', 'false');
+        });
+        it('self-toggles collapsed and emits bsCollapse with the new value when clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-navigation-drawer", null));
+            const collapseSpy = spyOnEvent('bsCollapse');
+            root.shadowRoot.querySelector('[part="collapse"]').click();
+            await waitForChanges();
+            expect(root.hasAttribute('collapsed')).toBe(true);
+            expect(collapseSpy).toHaveReceivedEventTimes(1);
+            expect(collapseSpy).toHaveReceivedEventDetail(true);
+            const button = root.shadowRoot.querySelector('[part="collapse"]');
+            expect(button).toEqualAttribute('aria-label', 'Expand');
+            expect(button).toEqualAttribute('aria-pressed', 'true');
+        });
+        it('toggles back to expanded on a second click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-navigation-drawer", { collapsed: true }));
+            const collapseSpy = spyOnEvent('bsCollapse');
+            root.shadowRoot.querySelector('[part="collapse"]').click();
+            await waitForChanges();
+            expect(root.hasAttribute('collapsed')).toBe(false);
+            expect(collapseSpy).toHaveReceivedEventDetail(false);
+        });
+    });
+    describe('collapsed', () => {
+        it('sets the nav landmark aria-label from heading, even when collapsed hides the visible title', async () => {
+            const { root } = await render(h("bs-navigation-drawer", { heading: "Admin Menu", collapsed: true }));
+            expect(root.shadowRoot.querySelector('nav')).toEqualAttribute('aria-label', 'Admin Menu');
+        });
+        it('syncs collapsed onto direct-child bs-navigation-drawer-item elements', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }, h("bs-navigation-drawer-item", null, "Introduction")));
+            await waitForChanges();
+            const item = root.querySelector('bs-navigation-drawer-item');
+            expect(item.hasAttribute('collapsed')).toBe(true);
+        });
+        it('syncs collapsed=false back onto items once turned back off', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }, h("bs-navigation-drawer-item", null, "Introduction")));
+            root.removeAttribute('collapsed');
+            await waitForChanges();
+            const item = root.querySelector('bs-navigation-drawer-item');
+            expect(item.hasAttribute('collapsed')).toBe(false);
+        });
+        it('does not sync collapsed onto nested (non-direct-child) items', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }, h("bs-navigation-drawer-item", { expandable: true, expanded: true }, "Foundation", h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Colors"))));
+            await waitForChanges();
+            const nestedItem = root.querySelector('[slot="children"]');
+            expect(nestedItem.hasAttribute('collapsed')).toBe(false);
+        });
+        it('shows a search-trigger button instead of the search slot', async () => {
+            const { root, waitForChanges } = await render(h("bs-navigation-drawer", { collapsed: true }));
+            await waitForChanges();
+            const trigger = root.shadowRoot.querySelector('[part="search-trigger"]');
+            expect(getComputedStyle(trigger).display).not.toBe('none');
+        });
+        it('emits bsSearchClick when the search-trigger button is clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-navigation-drawer", { collapsed: true }));
+            await waitForChanges();
+            const searchClickSpy = spyOnEvent('bsSearchClick');
+            root.shadowRoot.querySelector('[part="search-trigger"]').click();
+            expect(searchClickSpy).toHaveReceivedEventTimes(1);
+        });
+        it('hides the search-trigger button when not collapsed', async () => {
+            const { root } = await render(h("bs-navigation-drawer", null));
+            const trigger = root.shadowRoot.querySelector('[part="search-trigger"]');
+            expect(getComputedStyle(trigger).display).toBe('none');
+        });
+    });
+    describe('logoBackground', () => {
+        it('forwards the default "auto" background to both internal bs-logo elements', async () => {
+            const { root } = await render(h("bs-navigation-drawer", null));
+            const logos = root.shadowRoot.querySelectorAll('bs-logo');
+            expect(logos).toHaveLength(2);
+            logos.forEach(logo => expect(logo.background).toBe('auto'));
+        });
+        it('forwards logoBackground="dark" to both internal bs-logo elements', async () => {
+            const { root } = await render(h("bs-navigation-drawer", { logoBackground: "dark" }));
+            const logos = root.shadowRoot.querySelectorAll('bs-logo');
+            expect(logos).toHaveLength(2);
+            logos.forEach(logo => expect(logo.background).toBe('dark'));
+        });
+    });
+});

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -0,0 +1,257 @@
+/**
+ * @prop --bs-navigation-drawer-bg: Background of the drawer. Aliased to --bs-surface-base.
+ * @prop --bs-navigation-drawer-border: Right border color. Aliased to --bs-border-neutral-container.
+ * @prop --bs-navigation-drawer-padding-y: Top/bottom padding. Aliased to --bs-spacing-300.
+ * @prop --bs-navigation-drawer-padding-left: Left padding. Aliased to --bs-spacing-300 -- note
+ *   this is deliberately different from --bs-navigation-drawer-padding-right (below), per the
+ *   Figma spec. Both are ignored (set to 0) while `collapsed` -- see Figma node 8028:135374, which
+ *   uses `px-0` for the collapsed rail.
+ * @prop --bs-navigation-drawer-padding-right: Right padding. Aliased to --bs-spacing-200.
+ * @prop --bs-navigation-drawer-gap: Gap between the logo, title row, search slot, and items list.
+ *   Aliased to --bs-spacing-300 (24px, matching the drawer's own top/bottom padding for an even
+ *   rhythm) -- bumped up from the originally Figma-measured --bs-spacing-150 (12px) at the user's
+ *   request after seeing it rendered (felt cramped in practice), not a Figma re-measurement.
+ * @prop --bs-navigation-drawer-width: Default width of the drawer. 280px, matching Figma's own
+ *   frame -- overridable by a consumer that needs a different fixed width.
+ * @prop --bs-navigation-drawer-title-font-family: Title text font family. Aliased to
+ *   --bs-typography-font-family-heading.
+ * @prop --bs-navigation-drawer-title-font-weight: Title text font weight. Aliased to
+ *   --bs-font-weight-bold.
+ * @prop --bs-navigation-drawer-title-font-size: Title text font size. The Figma spec calls this
+ *   style "heading h7", but src/global/tokens.css only defines heading tokens through h6
+ *   (--bs-fontsize-heading-h6: 16px, --bs-line-height-heading-h6: 20) -- there is no h7 tier. h6
+ *   is the smallest/closest defined tier, so this aliases to the plain --bs-font-size-md token
+ *   (also 16px, the same value as --bs-fontsize-heading-h6) rather than inventing a new h7 token.
+ *   Flagged here as a judgment call, not a pixel-confirmed h7 value.
+ * @prop --bs-navigation-drawer-title-line-height: Title text line height. Aliased to
+ *   --bs-line-height-heading-h6, for the same reason as the font-size prop above.
+ * @prop --bs-navigation-drawer-title-color: Title text color. Aliased to --bs-text-default.
+ * @prop --bs-navigation-drawer-collapse-size: Width/height of the collapse toggle button. 48px.
+ * @prop --bs-navigation-drawer-collapse-radius: Corner radius of the collapse toggle button.
+ *   Aliased to --bs-border-radius-100.
+ * @prop --bs-navigation-drawer-collapse-hover: Collapse toggle background on hover. Aliased to
+ *   --bs-color-neutral-container.
+ * @prop --bs-navigation-drawer-collapse-pressed: Collapse toggle background when pressed.
+ *   Aliased to --bs-color-neutral-container-pressed.
+ * @prop --bs-navigation-drawer-collapse-icon: Collapse toggle icon color. Aliased to
+ *   --bs-icon-default.
+ * @prop --bs-navigation-drawer-items-gap: Gap between top-level item rows in the items list.
+ *   Aliased to --bs-spacing-100.
+ * @prop --bs-navigation-drawer-collapsed-width: Width of the drawer when `collapsed`. 96px, per
+ *   Figma node 8028:135374's own frame ("Type=Collapsed").
+ * @prop --bs-navigation-drawer-search-trigger-size: Width/height of the compact search-trigger
+ *   button shown instead of the `search` slot while `collapsed`. 44px, per Figma.
+ * @prop --bs-navigation-drawer-search-trigger-bg: Search-trigger background. Aliased to
+ *   --bs-color-neutral-container (Figma's "button/neutral-container" tonal fill).
+ * @prop --bs-navigation-drawer-search-trigger-border: Search-trigger border color. Aliased to
+ *   --bs-border-neutral-container (same border color as the drawer's own right edge).
+ * @prop --bs-navigation-drawer-search-trigger-icon: Search-trigger icon color. Aliased to
+ *   --bs-icon-default.
+ */
+:host {
+  display: block;
+
+  --bs-navigation-drawer-bg: var(--bs-surface-base);
+  --bs-navigation-drawer-border: var(--bs-border-neutral-container);
+  --bs-navigation-drawer-padding-y: var(--bs-spacing-300);
+  --bs-navigation-drawer-padding-left: var(--bs-spacing-300);
+  --bs-navigation-drawer-padding-right: var(--bs-spacing-200);
+  --bs-navigation-drawer-gap: var(--bs-spacing-300);
+  --bs-navigation-drawer-width: 280px;
+
+  --bs-navigation-drawer-title-font-family: var(--bs-typography-font-family-heading);
+  --bs-navigation-drawer-title-font-weight: var(--bs-font-weight-bold);
+  --bs-navigation-drawer-title-font-size: var(--bs-font-size-md);
+  --bs-navigation-drawer-title-line-height: var(--bs-line-height-heading-h6);
+  --bs-navigation-drawer-title-color: var(--bs-text-default);
+
+  --bs-navigation-drawer-collapse-size: 48px;
+  --bs-navigation-drawer-collapse-radius: var(--bs-border-radius-100);
+  --bs-navigation-drawer-collapse-hover: var(--bs-color-neutral-container);
+  --bs-navigation-drawer-collapse-pressed: var(--bs-color-neutral-container-pressed);
+  --bs-navigation-drawer-collapse-icon: var(--bs-icon-default);
+
+  --bs-navigation-drawer-items-gap: var(--bs-spacing-100);
+
+  --bs-navigation-drawer-collapsed-width: 96px;
+
+  --bs-navigation-drawer-search-trigger-size: 44px;
+  --bs-navigation-drawer-search-trigger-bg: var(--bs-color-neutral-container);
+  --bs-navigation-drawer-search-trigger-border: var(--bs-border-neutral-container);
+  --bs-navigation-drawer-search-trigger-icon: var(--bs-icon-default);
+}
+
+.bs-navigation-drawer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-navigation-drawer-gap);
+  width: var(--bs-navigation-drawer-width);
+  height: 100%;
+  background: var(--bs-navigation-drawer-bg);
+  border-right: 1px solid var(--bs-navigation-drawer-border);
+  padding: var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-right) var(--bs-navigation-drawer-padding-y)
+    var(--bs-navigation-drawer-padding-left);
+  font-family: inherit;
+  transition:
+    width var(--bs-duration-fast) var(--bs-easing-standard),
+    padding var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+/* Figma's collapsed rail is `px-0` (no horizontal padding at all) and horizontally centers every
+   child -- logo/collapse button/search trigger all have less width than the 96px rail and center
+   within it; the items list stays full-width since collapsed items lay themselves out centered
+   internally instead (see bs-navigation-drawer-item.css). */
+:host([collapsed]) .bs-navigation-drawer {
+  width: var(--bs-navigation-drawer-collapsed-width);
+  padding-left: 0;
+  padding-right: 0;
+  align-items: center;
+}
+
+.bs-navigation-drawer__logo {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* The full-wordmark logo shows by default; the icon-only mark (a real second bs-logo asset, not a
+   CSS crop of the full one) takes over while collapsed -- see the :host([collapsed]) rules below,
+   the same visibility-toggle pattern already used for .bs-navigation-drawer__search /
+   .bs-navigation-drawer__search-trigger further down. */
+.bs-navigation-drawer__logo--mark {
+  display: none;
+}
+
+:host([collapsed]) .bs-navigation-drawer__logo--full {
+  display: none;
+}
+
+:host([collapsed]) .bs-navigation-drawer__logo--mark {
+  display: flex;
+}
+
+.bs-navigation-drawer__title-row {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-navigation-drawer-gap);
+}
+
+.bs-navigation-drawer__title {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--bs-navigation-drawer-title-font-family);
+  font-weight: var(--bs-navigation-drawer-title-font-weight);
+  font-size: var(--bs-navigation-drawer-title-font-size);
+  line-height: calc(var(--bs-navigation-drawer-title-line-height) * 1px);
+  color: var(--bs-navigation-drawer-title-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The heading text is purely visual here -- the <nav> itself carries the same text as its own
+   aria-label (see bs-navigation-drawer.tsx), so the landmark stays named even with this hidden. */
+:host([collapsed]) .bs-navigation-drawer__title {
+  display: none;
+}
+
+.bs-navigation-drawer__collapse {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bs-navigation-drawer-collapse-size);
+  height: var(--bs-navigation-drawer-collapse-size);
+  border: none;
+  border-radius: var(--bs-navigation-drawer-collapse-radius);
+  padding: 0;
+  background: transparent;
+  color: var(--bs-navigation-drawer-collapse-icon);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-navigation-drawer__collapse svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Deliberately no rotation on `collapsed`, unlike bs-navigation-drawer-item's own disclosure
+   chevron -- Figma's collapsed mock (node 8028:135374) reuses the identical left-pointing
+   "CaretLeft" asset unrotated, confirmed by directly inspecting that state, not assumed. */
+
+.bs-navigation-drawer__collapse:hover {
+  background: var(--bs-navigation-drawer-collapse-hover);
+}
+
+.bs-navigation-drawer__collapse:active {
+  background: var(--bs-navigation-drawer-collapse-pressed);
+}
+
+.bs-navigation-drawer__collapse:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-navigation-drawer__search {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+:host([collapsed]) .bs-navigation-drawer__search {
+  display: none;
+}
+
+/* Compact search-trigger button, shown only while `collapsed` (Figma's second "Icon Button" in
+   the collapsed rail, a tonal/neutral-container 44x44 button) -- replaces the `search` slot,
+   which this component can't meaningfully shrink to icon size on its own since it doesn't know
+   what's actually slotted there. See bs-navigation-drawer.tsx's bsSearchClick doc. */
+.bs-navigation-drawer__search-trigger {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bs-navigation-drawer-search-trigger-size);
+  height: var(--bs-navigation-drawer-search-trigger-size);
+  border: 1px solid var(--bs-navigation-drawer-search-trigger-border);
+  border-radius: var(--bs-navigation-drawer-collapse-radius);
+  background: var(--bs-navigation-drawer-search-trigger-bg);
+  color: var(--bs-navigation-drawer-search-trigger-icon);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-navigation-drawer__search-trigger svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-navigation-drawer__search-trigger:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+:host([collapsed]) .bs-navigation-drawer__search-trigger {
+  display: inline-flex;
+}
+
+.bs-navigation-drawer__items {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-navigation-drawer-items-gap);
+  /* Scrolling stays fully functional (overflow-y: auto above) -- only the scrollbar's own visual
+     chrome is hidden, cross-browser: scrollbar-width for Firefox, ::-webkit-scrollbar for
+     Chromium/Safari (no standard property covers both). */
+  scrollbar-width: none;
+}
+
+.bs-navigation-drawer__items::-webkit-scrollbar {
+  display: none;
+}