@brandsync/wc 0.0.11 → 0.0.12

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;
+}

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

@@ -0,0 +1,188 @@
+import { h } from "@stencil/core";
+/**
+ * The top-level navigation bar for a page: the BrandSync logo plus two consumer-provided slots
+ * for menu/action content (e.g. `bs-button`/`bs-icon-button` elements).
+ *
+ * ## When to use
+ * - The persistent top bar of an application, above the page content.
+ *
+ * ## When not to use
+ * - The header of a Genie AI chat panel -- use `bs-chatbot-header` instead, which is purpose-built
+ *   for that narrower layout and its own fixed action buttons.
+ *
+ * `alignment` controls both whether the logo renders and how the two slots are laid out:
+ * - `default` (default): logo on the left, `left` slot content immediately after it, `right` slot
+ *   content pushed to the far right.
+ * - `center`: logo and `right` slot both grow equally (`flex: 1`), which centers the `left` slot
+ *   content in the middle of the bar.
+ * - `with-navigation-drawer`: no logo at all (this variant assumes a nav-drawer toggle is the
+ *   leftmost thing on the page instead) -- `left` slot content starts at the bar's own left edge,
+ *   `right` slot content pushed to the far right.
+ *
+ * @slot left - Menu/action content immediately after the logo (or, in `with-navigation-drawer`
+ *   mode, at the bar's left edge). Typically one or more `bs-button`/`bs-icon-button` elements.
+ * @slot right - Menu/action content pushed to the bar's far right.
+ * @part logo - The BrandSync brand mark, rendered via a nested `bs-logo` element (`part="logo"` is
+ *   set directly on that element -- the same pattern `bs-attachment` uses for its own nested
+ *   `bs-icon-button`'s `remove` part -- so `bs-navigation-header::part(logo)` still targets it
+ *   directly, no forwarding needed). Not rendered in `with-navigation-drawer` mode.
+ * @part left - The wrapper around the `left` slot.
+ * @part right - The wrapper around the `right` slot.
+ * @part skip-link - The "Skip to main content" link (only rendered when `skipToContentHref` is set).
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in
+// bs-navigation-header.css, not here.
+export class BsNavigationHeader {
+    /** Controls whether the logo renders and how the `left`/`right` slots are laid out -- see the
+     * class doc above for the three variants' exact behavior. */
+    alignment = 'default';
+    /** Accessible label for the header landmark, useful when a page has more than one `<header>`
+     * (e.g. this one plus a page-specific sub-header) and screen reader users need to tell them
+     * apart in the landmarks list. */
+    ariaLabel = null;
+    /**
+     * Fragment/URL to jump to when the "Skip to main content" link is activated (e.g.
+     * `#main-content`, matching an id on your page's main landmark). Unset by default -- the link
+     * is opt-in rather than pointing at a guessed default id, since a skip link to a target that
+     * doesn't exist on the consumer's page is worse than no skip link at all (it silently does
+     * nothing when activated). Set this to the same id your page's `<main>` (or equivalent) already
+     * has to enable it.
+     */
+    skipToContentHref = null;
+    /** Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set. */
+    skipToContentLabel = 'Skip to main content';
+    /** Forwarded straight to the internal `bs-logo`'s own `background` prop. Defaults to `"auto"`,
+     * which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own
+     * docs) -- so if this bar ends up on a dark surface via the normal theming mechanism, the logo
+     * switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"`
+     * explicitly only if you've overridden `--bs-navigation-header-bg` to something dark yourself
+     * *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme. */
+    logoBackground = 'auto';
+    render() {
+        const showLogo = this.alignment !== 'with-navigation-drawer';
+        const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
+        return (h("header", { key: 'e106c295d18a32638e8b2e8179264da30c6343fd', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '9b0aa4f626e2ac17fd02ff35f63861be5cca0a4c', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '079ebb7b6077307cb84dacf5504eeca259c265df', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '79fb735078a3d2b200811c4c055b881fb17feb54', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '8c72405a0adeb158bd6427e9c6afb77950cb1de2', name: "left" })), h("div", { key: '81941860e7e9b2780cc02b3ca9a13c0f0cde00bd', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'ceb361449083be06404b862e22d461daa56cd8ca', name: "right" }))));
+    }
+    static get is() { return "bs-navigation-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-navigation-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-navigation-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsNavigationHeaderAlignment",
+                    "resolved": "\"center\" | \"default\" | \"with-navigation-drawer\"",
+                    "references": {
+                        "BsNavigationHeaderAlignment": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.tsx",
+                            "id": "src/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.tsx::BsNavigationHeaderAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the logo renders and how the `left`/`right` slots are laid out -- see the\nclass doc above for the three variants' exact behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'default'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the header landmark, useful when a page has more than one `<header>`\n(e.g. this one plus a page-specific sub-header) and screen reader users need to tell them\napart in the landmarks list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "skipToContentHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fragment/URL to jump to when the \"Skip to main content\" link is activated (e.g.\n`#main-content`, matching an id on your page's main landmark). Unset by default -- the link\nis opt-in rather than pointing at a guessed default id, since a skip link to a target that\ndoesn't exist on the consumer's page is worse than no skip link at all (it silently does\nnothing when activated). Set this to the same id your page's `<main>` (or equivalent) already\nhas to enable it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skip-to-content-href",
+                "defaultValue": "null"
+            },
+            "skipToContentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skip-to-content-label",
+                "defaultValue": "'Skip to main content'"
+            },
+            "logoBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'light' | 'dark'",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded straight to the internal `bs-logo`'s own `background` prop. Defaults to `\"auto\"`,\nwhich follows the ambient `[data-theme=\"dark\"]` state automatically (see `bs-logo`'s own\ndocs) -- so if this bar ends up on a dark surface via the normal theming mechanism, the logo\nswitches to its dedicated dark-background asset with no wiring needed. Set `\"light\"`/`\"dark\"`\nexplicitly only if you've overridden `--bs-navigation-header-bg` to something dark yourself\n*without* setting `[data-theme=\"dark\"]`, and need to pin the logo regardless of theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-background",
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,189 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../../../stories-utils";
+const alignments = ['default', 'center', 'with-navigation-drawer'];
+const leftContentTypes = ['buttons', 'tabs'];
+const searchIcon = html `
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5" />
+    <path d="M11 11L14.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+  </svg>
+`;
+const bellIcon = html `
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M3 12.5H13L11.5 10.5V6.5C11.5 4.29086 9.98528 2.5 8 2.5C6.01472 2.5 4.5 4.29086 4.5 6.5V10.5L3 12.5Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+    <path d="M6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+`;
+const LEFT_SLOT_BUTTONS = html `
+  <bs-button variant="subtle" size="sm">Products</bs-button>
+  <bs-button variant="subtle" size="sm">Solutions</bs-button>
+  <bs-button variant="subtle" size="sm">Pricing</bs-button>
+`;
+const LEFT_SLOT_TABS = html `
+  <bs-tabs type="bs-tab">
+    <bs-tab selected>Products</bs-tab>
+    <bs-tab>Solutions</bs-tab>
+    <bs-tab>Pricing</bs-tab>
+  </bs-tabs>
+`;
+// This is a Storybook-only demo toggle, not a real prop on bs-navigation-header itself -- the
+// component's `left`/`right` slots already accept arbitrary content (buttons, tabs, links,
+// anything), so baking a specific content choice into the actual component's API would narrow it
+// unnecessarily. This just switches what the story slots in.
+const leftSlotContent = (type) => (type === 'tabs' ? LEFT_SLOT_TABS : LEFT_SLOT_BUTTONS);
+// Icon-only buttons (no visible text label) get a hover/focus tooltip repeating their
+// aria-label, same convention as bs-chatbot-header's own action buttons -- bs-tooltip is purely
+// presentational (see its own class doc), so the show/hide-on-hover/focus-within CSS below is this
+// story's responsibility, not something bs-navigation-header or bs-tooltip provide automatically.
+const RIGHT_SLOT = html `
+  <style>
+    .story-nav-header-tooltip-wrapper {
+      position: relative;
+      display: inline-flex;
+    }
+    .story-nav-header-tooltip {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: var(--bs-spacing-100);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);
+      transition-delay: 0s;
+      white-space: nowrap;
+      z-index: 1;
+    }
+    .story-nav-header-tooltip-wrapper:hover .story-nav-header-tooltip,
+    .story-nav-header-tooltip-wrapper:focus-within .story-nav-header-tooltip {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: var(--bs-duration-slow);
+    }
+  </style>
+  <span class="story-nav-header-tooltip-wrapper">
+    <bs-icon-button size="sm" variant="subtle" aria-label="Search">${searchIcon}</bs-icon-button>
+    <bs-tooltip class="story-nav-header-tooltip" placement="top" aria-hidden="true">Search</bs-tooltip>
+  </span>
+  <span class="story-nav-header-tooltip-wrapper">
+    <bs-icon-button size="sm" variant="subtle" aria-label="Notifications">${bellIcon}</bs-icon-button>
+    <bs-tooltip class="story-nav-header-tooltip" placement="top" aria-hidden="true">Notifications</bs-tooltip>
+  </span>
+  <bs-button variant="primary" size="sm">Sign in</bs-button>
+`;
+const meta = {
+    title: 'UI Shell/bs-navigation-header',
+    parameters: { docs: { description: { component: componentDescription('bs-navigation-header') } }, layout: 'fullscreen' },
+    render: args => html `
+    <bs-navigation-header
+      alignment=${args.alignment}
+      skip-to-content-href=${ifDefined(args.skipToContentHref || undefined)}
+      logo-background=${args.logoBackground}
+    >
+      <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+      <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+    </bs-navigation-header>
+  `,
+    argTypes: {
+        alignment: { control: 'select', options: alignments, description: propDescription('bs-navigation-header', 'alignment') },
+        skipToContentHref: { control: 'text', description: propDescription('bs-navigation-header', 'skipToContentHref') },
+        leftContentType: {
+            control: 'select',
+            options: leftContentTypes,
+            description: 'Storybook-only demo toggle: what to render in the `left` slot (not a real prop on bs-navigation-header -- the slot accepts anything).',
+        },
+        logoBackground: { control: 'select', options: ['auto', 'light', 'dark'], description: propDescription('bs-navigation-header', 'logoBackground') },
+    },
+    args: {
+        alignment: 'default',
+        skipToContentHref: '',
+        leftContentType: 'buttons',
+        logoBackground: 'auto',
+    },
+};
+export default meta;
+// Story naming follows the "Header Base [with X [and Y]]" convention: the bare bar first, then
+// each slot added on its own, then combined, then the alignment/content variants layered on top
+// of the fully-populated ("Navigation and Actions") bar.
+export const HeaderBase = {
+    name: 'Header Base',
+    render: args => html `<bs-navigation-header alignment=${args.alignment}></bs-navigation-header>`,
+};
+export const HeaderBaseWithNavigation = {
+    name: 'Header Base with Navigation',
+    render: args => html `
+    <bs-navigation-header alignment=${args.alignment}>
+      <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+    </bs-navigation-header>
+  `,
+};
+export const HeaderBaseWithActions = {
+    name: 'Header Base with Actions',
+    render: args => html `
+    <bs-navigation-header alignment=${args.alignment}>
+      <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+    </bs-navigation-header>
+  `,
+};
+export const HeaderBaseWithNavigationAndActions = {
+    name: 'Header Base with Navigation and Actions',
+};
+export const HeaderBaseWithNavigationAndActionsCentered = {
+    name: 'Header Base with Navigation and Actions, Centered',
+    args: { alignment: 'center' },
+};
+export const HeaderBaseWithNavigationAndActionsNoLogo = {
+    name: 'Header Base with Navigation and Actions (No Logo)',
+    args: { alignment: 'with-navigation-drawer' },
+};
+export const HeaderBaseWithNavigationAndActionsTabs = {
+    name: 'Header Base with Navigation and Actions, Tabs',
+    args: { leftContentType: 'tabs' },
+};
+export const HeaderBaseDark = {
+    name: 'Header Base with Navigation and Actions (Dark)',
+    // `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 is fine in isolation but 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 alongside it under the *other* theme
+    // causes exactly the kind of thrash/hang a shared mutable global produces. 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.
+    // logoBackground is left at its "auto" default here deliberately -- this story demonstrates that
+    // no manual prop is needed for the logo to follow the theme; see logoBackground's own docs for
+    // the explicit-override case.
+    render: args => html `
+    <div data-theme="dark" style="background: var(--bs-surface-base);">
+      <bs-navigation-header alignment=${args.alignment} logo-background=${args.logoBackground}>
+        <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+        <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+      </bs-navigation-header>
+    </div>
+  `,
+};
+export const HeaderBaseWithSkipLink = {
+    name: 'Header Base with Skip Link',
+    // Press Tab from the top of this story to focus the (normally offscreen) skip link and see it
+    // come into view, then Enter/Space to jump straight to the #main-content landmark below,
+    // bypassing the left/right slot content in between.
+    args: { skipToContentHref: '#main-content' },
+    render: args => html `
+    <div>
+      <bs-navigation-header alignment=${args.alignment} skip-to-content-href=${ifDefined(args.skipToContentHref || undefined)}>
+        <div slot="left" style="display: contents;">${leftSlotContent(args.leftContentType)}</div>
+        <div slot="right" style="display: contents;">${RIGHT_SLOT}</div>
+      </bs-navigation-header>
+      <main id="main-content" tabindex="-1" style="padding: 24px; font-family: sans-serif;">
+        <h1 style="margin: 0;">Main content</h1>
+        <p>This is the landmark the skip link jumps to.</p>
+      </main>
+    </div>
+  `,
+};

package/dist/components/bs-ai-disclaimer.js

@@ -1 +1 @@
-import{t as i,p as e,H as s,h as a}from"./p-D1cYtKyN.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"ea1210d75f9f55f4ce31f0ecd434e28a0c3a6ae5",class:"bs-ai-disclaimer"},a("p",{key:"a4379d06096623a33254466c83d7a8342a1a61f6",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"4ceb6be62b06ddeae050ce84c92d511218791219"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}
+import{t as e,p as i,H as s,h as a}from"./p-Be1Pfcnm.js";const t=i(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"c1215e28befb6e10d60deb9ef777269e3b8a2a49",class:"bs-ai-disclaimer"},a("p",{key:"c01f55b4cb73131f79af6cea3636224317fd8f5b",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"99d3b3ae67d32a3df261bfcc3df39ee39d66ad40"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((i=>{"bs-ai-disclaimer"===i&&(customElements.get(e(i))||customElements.define(e(i),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}