@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,314 @@
+import { h } from "@stencil/core";
+/**
+ * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+ * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+ *
+ * ## When to use
+ * - Every row inside a `bs-navigation-drawer`'s default slot.
+ *
+ * ## When not to use
+ * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+ *
+ * Click behavior is mutually exclusive, based on `expandable`:
+ * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+ *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+ *   class doc): coordinating which sibling row is selected needs cross-item state a
+ *   consumer/wrapper owns, not something this component can reason about on its own.
+ * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+ *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+ *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+ *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+ *   than `bs-tab`'s non-self-toggling `selected`.
+ *
+ * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+ * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+ * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+ * visibility toggling needed, since `expanded` is reflected).
+ *
+ * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+ * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+ * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+ * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+ * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+ * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+ * prop so a standalone item (or this component's own stories) can be demoed without the parent.
+ *
+ * @slot - Default slot: the row's label text.
+ * @slot icon - Optional leading icon (24x24). Only rendered (and only reserves layout space) when
+ *   populated -- same "only take up space if slotted" pattern as `bs-tab`'s `icon` slot. Not
+ *   rendered at all for `nested` rows (Figma's nested rows never have icons).
+ * @slot children - `expandable` only: nested `bs-navigation-drawer-item` rows, shown/hidden based
+ *   on `expanded`.
+ * @part item - The row's root `<button>` element.
+ * @part icon - The icon wrapper (top-level, non-`nested` rows only).
+ * @part label - The label text wrapper.
+ * @part chevron - The trailing expand/collapse chevron wrapper (`expandable` only).
+ * @part children - The wrapper around the `children` slot.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in
+// bs-navigation-drawer-item.css, not here -- see bs-navigation-header.css's identical note.
+export class BsNavigationDrawerItem {
+    el;
+    /** Tints the row's background/text to indicate it's the current destination. NOT
+     * self-toggling -- see the class doc above for why. Ignored (never applied) when `expandable`
+     * is true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`. */
+    selected = false;
+    /** Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`,
+     * `bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the
+     * class doc above for the full click-behavior split. */
+    expandable = false;
+    /** Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an
+     * `expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS
+     * shows/hides the `children` slot wrapper based on the reflected attribute. Ignored when
+     * `expandable` is false. */
+    expanded = false;
+    /** Marks this as a child row nested under an `expandable` parent (via `slot="children"`) --
+     * deepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows
+     * never have icons). */
+    nested = false;
+    /**
+     * Optional accessible name override. Not required for `collapsed` rows -- unlike an
+     * icon-only button, the label caption stays visible (just restyled smaller, under the icon) in
+     * that mode per Figma, so the button's default accessible-name computation (its own text
+     * content) already works. Set this if you want a fuller/different name than the visible caption
+     * (e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for
+     * consistency).
+     */
+    ariaLabel = null;
+    /**
+     * Switches this row to the compact icon-above-caption column layout used when its parent
+     * `bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so
+     * `bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows'
+     * chevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail
+     * never shows a nested tree.
+     */
+    collapsed = false;
+    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    bsSelect;
+    /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
+     * doc above. */
+    bsToggle;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper only reserves
+     * layout space when there's actually an icon -- same pattern as `bs-tab`'s `hasIcon`. Not used
+     * at all for `nested` rows, which never render an icon wrapper in the first place. */
+    hasIcon = false;
+    /**
+     * Computes the initial `hasIcon` state directly from the host's light DOM children, before
+     * first render -- same reasoning as `bs-tab.componentWillLoad`'s identical comment (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.expandable) {
+            this.expanded = !this.expanded;
+            this.bsToggle.emit(this.expanded);
+        }
+        else {
+            this.bsSelect.emit();
+        }
+    };
+    render() {
+        const rowClasses = [
+            'bs-navigation-drawer-item',
+            this.selected && !this.expandable ? 'bs-navigation-drawer-item--selected' : '',
+            this.nested ? 'bs-navigation-drawer-item--nested' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // The `children` slot wrapper is deliberately a SIBLING of the <button>, not nested inside
+        // it -- a nested child row's own shadow DOM renders its own real <button>, and putting that
+        // inside this row's <button> would produce invalid nested interactive controls (button inside
+        // button). Nested buttons also break click handling in practice: a click on the child bubbles
+        // through this outer <button> too (it's a real ancestor in the flattened tree), which would
+        // incorrectly also toggle this parent row on every child click. Both are wrapped in a
+        // `display: contents` container so render() still returns a single root node (this codebase's
+        // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
+        return (h("div", { key: '6fd089698cd27459fc10a2806fba5a792dbfec2b', class: "bs-navigation-drawer-item__root" }, h("button", { key: '5c4448c9f16dfe9356ce069a5f069db9ed084f3b', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: 'bcfd23ef22e33ed6dcb3ec70b8263a4dccb14914', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '170f97cc6ca93bf5e9e336b7c39c3d3bb02adca8', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'abbc25976aa21e94e503497430d2be0895fd8987', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0b9e12703c42e326634bb5adb49f1994b9c19754' })), this.expandable && (h("span", { key: '25e2a8517451cced2993390cd194420d57ee5489', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '7b15770e5a071f8f49b06d811dbe1925ff9b5054' })))), this.expandable && (h("span", { key: '861ac7d088e527486c43f80a933e796c05980bc0', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'fc673a4f19b0aee8c4c3d9d718cb239746e04221', name: "children" })))));
+    }
+    static get is() { return "bs-navigation-drawer-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-navigation-drawer-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-navigation-drawer-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tints the row's background/text to indicate it's the current destination. NOT\nself-toggling -- see the class doc above for why. Ignored (never applied) when `expandable`\nis true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`,\n`bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the\nclass doc above for the full click-behavior split."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an\n`expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS\nshows/hides the `children` slot wrapper based on the reflected attribute. Ignored when\n`expandable` is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "nested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this as a child row nested under an `expandable` parent (via `slot=\"children\"`) --\ndeepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows\nnever have icons)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nested",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accessible name override. Not required for `collapsed` rows -- unlike an\nicon-only button, the label caption stays visible (just restyled smaller, under the icon) in\nthat mode per Figma, so the button's default accessible-name computation (its own text\ncontent) already works. Set this if you want a fuller/different name than the visible caption\n(e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for\nconsistency)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switches this row to the compact icon-above-caption column layout used when its parent\n`bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so\n`bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows'\nchevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail\nnever shows a nested tree."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on click, only when `expandable` is false. See the class doc above."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsToggle",
+                "name": "bsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the new `expanded` value on click, only when `expandable` is true. See the class\ndoc above."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per
+// the class doc's note on this being the author's choice between the two options offered.
+const ChevronDownIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.stories.js

@@ -0,0 +1,78 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../../stories-utils";
+const bookIcon = html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M4 4.5C4 3.67157 4.67157 3 5.5 3H18.5C19.3284 3 20 3.67157 20 4.5V19.5C20 20.3284 19.3284 21 18.5 21H5.5C4.67157 21 4 20.3284 4 19.5V4.5Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <path d="M8 3V21" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+`;
+const meta = {
+    title: 'UI Shell/bs-navigation-drawer/bs-navigation-drawer-item',
+    parameters: { docs: { description: { component: componentDescription('bs-navigation-drawer-item') } } },
+    render: args => html `
+    <bs-navigation-drawer-item
+      ?selected=${args.selected}
+      ?expandable=${args.expandable}
+      ?expanded=${args.expanded}
+      ?nested=${args.nested}
+      ?collapsed=${args.collapsed}
+      style="width: ${args.collapsed ? '85px' : '248px'}; display: block;"
+    >
+      ${args.icon ? bookIcon : ''}${args.label}
+    </bs-navigation-drawer-item>
+  `,
+    argTypes: {
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+        selected: { control: 'boolean', description: propDescription('bs-navigation-drawer-item', 'selected') },
+        expandable: { control: 'boolean', description: propDescription('bs-navigation-drawer-item', 'expandable') },
+        expanded: { control: 'boolean', description: propDescription('bs-navigation-drawer-item', 'expanded') },
+        nested: { control: 'boolean', description: propDescription('bs-navigation-drawer-item', 'nested') },
+        icon: { control: 'boolean', description: 'Toggles a leading icon (not a real attribute -- see the `icon` slot).' },
+        collapsed: { control: 'boolean', description: propDescription('bs-navigation-drawer-item', 'collapsed') },
+    },
+    args: {
+        label: 'Introduction',
+        selected: false,
+        expandable: false,
+        expanded: false,
+        nested: false,
+        icon: true,
+        collapsed: false,
+    },
+};
+export default meta;
+export const Default = {};
+export const Selected = {
+    args: { selected: true },
+};
+export const Expandable = {
+    name: 'Expandable (group header)',
+    args: { expandable: true, icon: true, label: 'Components' },
+};
+export const ExpandableWithChildren = {
+    name: 'Expandable with nested children',
+    render: () => html `
+    <bs-navigation-drawer-item expandable expanded style="width: 248px; display: block;">
+      ${bookIcon} Components
+      <bs-navigation-drawer-item slot="children" nested>Button</bs-navigation-drawer-item>
+      <bs-navigation-drawer-item slot="children" nested selected>Checkbox</bs-navigation-drawer-item>
+      <bs-navigation-drawer-item slot="children" nested>Switch</bs-navigation-drawer-item>
+    </bs-navigation-drawer-item>
+  `,
+};
+export const Nested = {
+    name: 'Nested (child row)',
+    args: { nested: true, icon: false, label: 'Button' },
+};
+export const IconOnlyLabelSpace = {
+    name: 'No icon (space not reserved)',
+    args: { icon: false, label: 'Accessibility' },
+};
+export const Collapsed = {
+    name: 'Collapsed (icon above caption)',
+    args: { collapsed: true, selected: true, label: 'Introduction' },
+};

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

@@ -0,0 +1,77 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-navigation-header', () => {
+    it('renders a <header> landmark with the logo by default', async () => {
+        const { root } = await render(h("bs-navigation-header", null));
+        expect(root.shadowRoot.querySelector('header')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="logo"]')).not.toBeNull();
+    });
+    it('applies the "default" alignment class by default', async () => {
+        const { root } = await render(h("bs-navigation-header", null));
+        expect(root.shadowRoot.querySelector('header')).toHaveClass('bs-navigation-header--default');
+    });
+    it('renders the logo for "center" alignment', async () => {
+        const { root } = await render(h("bs-navigation-header", { alignment: "center" }));
+        expect(root.shadowRoot.querySelector('[part="logo"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('header')).toHaveClass('bs-navigation-header--center');
+    });
+    it('does not render the logo for "with-navigation-drawer" alignment', async () => {
+        const { root } = await render(h("bs-navigation-header", { alignment: "with-navigation-drawer" }));
+        expect(root.shadowRoot.querySelector('[part="logo"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('header')).toHaveClass('bs-navigation-header--with-navigation-drawer');
+    });
+    it('renders the left and right slots', async () => {
+        const { root } = await render(h("bs-navigation-header", null));
+        expect(root.shadowRoot.querySelector('slot[name="left"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('slot[name="right"]')).not.toBeNull();
+    });
+    it('projects light-DOM content into the left/right slots', async () => {
+        const { root } = await render(h("bs-navigation-header", null, h("button", { slot: "left" }, "Left action"), h("button", { slot: "right" }, "Right action")));
+        const leftSlot = root.shadowRoot.querySelector('slot[name="left"]');
+        const rightSlot = root.shadowRoot.querySelector('slot[name="right"]');
+        expect(leftSlot.assignedElements()[0].textContent).toBe('Left action');
+        expect(rightSlot.assignedElements()[0].textContent).toBe('Right action');
+    });
+    it('sets aria-label on the header when ariaLabel is provided', async () => {
+        const { root } = await render(h("bs-navigation-header", { ariaLabel: "Main navigation" }));
+        expect(root.shadowRoot.querySelector('header')).toEqualAttribute('aria-label', 'Main navigation');
+    });
+    it('omits aria-label when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-navigation-header", null));
+        expect(root.shadowRoot.querySelector('header').hasAttribute('aria-label')).toBe(false);
+    });
+    describe('skip-to-content link', () => {
+        it('does not render a skip link when skipToContentHref is not set', async () => {
+            const { root } = await render(h("bs-navigation-header", null));
+            expect(root.shadowRoot.querySelector('[part="skip-link"]')).toBeNull();
+        });
+        it('renders a skip link pointing at skipToContentHref, with a default label', async () => {
+            const { root } = await render(h("bs-navigation-header", { skipToContentHref: "#main-content" }));
+            const link = root.shadowRoot.querySelector('[part="skip-link"]');
+            expect(link).not.toBeNull();
+            expect(link).toEqualAttribute('href', '#main-content');
+            expect(link.textContent).toBe('Skip to main content');
+        });
+        it('uses a custom skipToContentLabel when provided', async () => {
+            const { root } = await render(h("bs-navigation-header", { skipToContentHref: "#main-content", skipToContentLabel: "Jump to content" }));
+            const link = root.shadowRoot.querySelector('[part="skip-link"]');
+            expect(link.textContent).toBe('Jump to content');
+        });
+        it('renders the skip link before the logo, so it is the first focusable element', async () => {
+            const { root } = await render(h("bs-navigation-header", { skipToContentHref: "#main-content" }));
+            const header = root.shadowRoot.querySelector('header');
+            expect(header.firstElementChild).toEqualAttribute('part', 'skip-link');
+        });
+    });
+    describe('logoBackground', () => {
+        it('forwards the default "auto" background to the internal bs-logo', async () => {
+            const { root } = await render(h("bs-navigation-header", null));
+            const logo = root.shadowRoot.querySelector('bs-logo');
+            expect(logo.background).toBe('auto');
+        });
+        it('forwards logoBackground="dark" to the internal bs-logo', async () => {
+            const { root } = await render(h("bs-navigation-header", { logoBackground: "dark" }));
+            const logo = root.shadowRoot.querySelector('bs-logo');
+            expect(logo.background).toBe('dark');
+        });
+    });
+});

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

@@ -0,0 +1,106 @@
+/**
+ * @prop --bs-navigation-header-bg: Background of the bar. Aliased to --bs-surface-base.
+ * @prop --bs-navigation-header-border: Bottom border color. Aliased to --bs-border-default.
+ * @prop --bs-navigation-header-padding-top: Aliased to --bs-spacing-200.
+ * @prop --bs-navigation-header-padding-bottom: Aliased to --bs-spacing-100.
+ * @prop --bs-navigation-header-padding-x: Aliased to --bs-margin-fluid.
+ * @prop --bs-navigation-header-max-width: Overall max-width of the bar. The global vendored
+ *   --bs-breakpoints-max-width token is malformed (`1920rem` instead of `1920px` -- at a 16px root
+ *   font size that's ~30720px, effectively unconstrained), so this is a literal 1920px instead of
+ *   aliasing to it.
+ * @prop --bs-navigation-header-item-gap: Gap between the logo and the `left` slot (`default`
+ *   alignment), or between the `left` and `right` slots (`with-navigation-drawer` alignment, which
+ *   has no logo). Not used in `center` alignment -- see the class doc in bs-navigation-header.tsx.
+ *   The global vendored --bs-navigation-header-gap token is also malformed (a bare unitless `40`,
+ *   which is an invalid `gap` value and silently falls back to `normal`/0), so this multiplies it
+ *   into a real length instead of aliasing directly.
+ * @prop --bs-navigation-header-slot-gap: Gap between items within a single `left`/`right` slot.
+ *   Aliased to --bs-spacing-100.
+ * @prop --bs-navigation-header-skip-link-bg: Skip-to-content link background, once focused into
+ *   view. Aliased to --bs-surface-action.
+ * @prop --bs-navigation-header-skip-link-color: Skip-to-content link text color, once focused
+ *   into view. Aliased to --bs-text-inverse.
+ */
+:host {
+  display: block;
+
+  --bs-navigation-header-bg: var(--bs-surface-base);
+  --bs-navigation-header-border: var(--bs-border-default);
+  --bs-navigation-header-padding-top: var(--bs-spacing-200);
+  --bs-navigation-header-padding-bottom: var(--bs-spacing-100);
+  --bs-navigation-header-padding-x: var(--bs-margin-fluid);
+  --bs-navigation-header-max-width: 1920px;
+  --bs-navigation-header-item-gap: calc(var(--bs-navigation-header-gap) * 1px);
+  --bs-navigation-header-slot-gap: var(--bs-spacing-100);
+  --bs-navigation-header-skip-link-bg: var(--bs-surface-action);
+  --bs-navigation-header-skip-link-color: var(--bs-text-inverse);
+}
+
+.bs-navigation-header {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: var(--bs-navigation-header-max-width);
+  background: var(--bs-navigation-header-bg);
+  border-bottom: 1px solid var(--bs-navigation-header-border);
+  padding: var(--bs-navigation-header-padding-top) var(--bs-navigation-header-padding-x) var(--bs-navigation-header-padding-bottom);
+}
+
+/* Visually hidden until keyboard-focused, per the standard skip-link pattern -- offscreen (not
+   display: none/visibility: hidden, which would remove it from the tab order entirely) until
+   :focus moves it on-screen, absolutely positioned relative to the header itself (position:
+   relative above) so it doesn't affect the flex layout or push any other content. */
+.bs-navigation-header__skip-link {
+  position: absolute;
+  top: var(--bs-spacing-100);
+  left: -9999px;
+  z-index: 1;
+  padding: var(--bs-spacing-100) var(--bs-spacing-200);
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-navigation-header-skip-link-bg);
+  color: var(--bs-navigation-header-skip-link-color);
+  font-size: var(--bs-font-size-sm);
+  text-decoration: underline;
+}
+
+.bs-navigation-header__skip-link:focus {
+  left: var(--bs-navigation-header-padding-x);
+}
+
+/* `default` and `with-navigation-drawer` both space their (present) children with a fixed gap;
+   `center` instead relies on the logo and `right` slot both being flex: 1 (below), which absorbs
+   all remaining space and needs no extra gap of its own -- see bs-navigation-header.tsx's class
+   doc for why. */
+.bs-navigation-header--default,
+.bs-navigation-header--with-navigation-drawer {
+  gap: var(--bs-navigation-header-item-gap);
+}
+
+.bs-navigation-header__logo {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.bs-navigation-header--center .bs-navigation-header__logo {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.bs-navigation-header__left {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-navigation-header-slot-gap);
+  flex-shrink: 0;
+}
+
+.bs-navigation-header__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--bs-navigation-header-slot-gap);
+  flex: 1 0 0;
+  min-width: 0;
+}