@brandsync/wc 0.0.10 → 0.0.12

package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.d.ts

@@ -0,0 +1,60 @@
+export type BsNavigationHeaderAlignment = 'default' | 'center' | 'with-navigation-drawer';
+/**
+ * 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).
+ */
+export declare 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: BsNavigationHeaderAlignment;
+    /** 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: string | 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: string | null;
+    /** Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set. */
+    skipToContentLabel: string;
+    /** 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' | 'light' | 'dark';
+    render(): any;
+}

package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsNavigationHeaderAlignment = 'default' | 'center' | 'with-navigation-drawer';
+type LeftContentType = 'buttons' | 'tabs';
+interface BsNavigationHeaderArgs {
+    alignment: BsNavigationHeaderAlignment;
+    skipToContentHref: string;
+    leftContentType: LeftContentType;
+    logoBackground: 'auto' | 'light' | 'dark';
+}
+declare const meta: Meta<BsNavigationHeaderArgs>;
+export default meta;
+type Story = StoryObj<BsNavigationHeaderArgs>;
+export declare const HeaderBase: Story;
+export declare const HeaderBaseWithNavigation: Story;
+export declare const HeaderBaseWithActions: Story;
+export declare const HeaderBaseWithNavigationAndActions: Story;
+export declare const HeaderBaseWithNavigationAndActionsCentered: Story;
+export declare const HeaderBaseWithNavigationAndActionsNoLogo: Story;
+export declare const HeaderBaseWithNavigationAndActionsTabs: Story;
+export declare const HeaderBaseDark: Story;
+export declare const HeaderBaseWithSkipLink: Story;