@brandsync/wc 1.17.0 → 1.18.0

package/dist/types/components/bs-company-switcher/bs-company-switcher.d.ts

@@ -0,0 +1,130 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsCompany {
+    id: string;
+    name: string;
+    /** Organisation number, shown as "Org. no. {orgNumber}". */
+    orgNumber: string;
+    /** Country code shown before the org. number, e.g. "NO". */
+    country: string;
+}
+/**
+ * A company (tenant) switcher: a trigger showing the current company, and a panel to find and switch to
+ * another one. The panel has a search field, the current / recent / all groups, a filtered "matches" view,
+ * a no-results state and a footer with "Manage Companies" and "Add companies" actions.
+ *
+ * Built from `bs-popover` (open/close, Escape, outside click, flipping), `bs-card` (panel surface),
+ * `bs-input` (search), `bs-list-item` (rows), `bs-avatar` (initials), `bs-spinner` (switching),
+ * `bs-empty-state` (no results), `bs-divider` and `bs-button` (footer). The trigger is a native `<button>`:
+ * no `bs-*` component is a composite "avatar + two lines + chevron" button.
+ *
+ * ## When to use
+ * - An app header or side navigation where a user belongs to several companies and works in one at a time.
+ *
+ * ## When not to use
+ * - Picking a value in a form -- use `bs-input type="dropdown"`.
+ * - Switching between a handful of fixed views -- use `bs-tab`.
+ *
+ * `companies` is an array and must be set as a JS property. You own the data and the switch itself: listen to
+ * `bsCompanySwitch`, do the work, then update `currentId`. To show the switching state set `switchingId`
+ * (from the `bsCompanySwitch` handler, or later) and the panel stays open until you clear it and set `open`
+ * to `false`. If `switchingId` is not set by the time the handler returns, the panel closes immediately.
+ *
+ * @part trigger - The trigger button.
+ * @part avatar - The trigger's `bs-avatar`.
+ * @part name - The company name in the trigger.
+ * @part subtitle - The org. number (or "Switching…") line in the trigger.
+ * @part panel - The panel surface (`bs-card`).
+ * @part search - The search field wrapper (combobox).
+ * @part list - The listbox.
+ * @part group - One group (header and rows).
+ * @part group-header - A group header.
+ * @part row - A company row (`bs-list-item`).
+ * @part empty - The no-results state (`bs-empty-state`).
+ * @part footer - The footer actions.
+ * @prop --bs-company-switcher-width - Trigger width. Defaults to `260px` (Figma); capped at 100%.
+ * @prop --bs-company-switcher-panel-width - Panel width. Defaults to `360px` (Figma); capped at the viewport.
+ * @prop --bs-company-switcher-radius - Trigger and panel corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-company-switcher-trigger-bg - Trigger resting background. `transparent`.
+ * @prop --bs-company-switcher-trigger-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-company-switcher-trigger-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-company-switcher-trigger-bg-open - Aliased to `--bs-surface-selected`.
+ * @prop --bs-company-switcher-focus-ring - Trigger focus outline. Aliased to `--bs-border-neutral-focus`.
+ * @prop --bs-company-switcher-panel-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-company-switcher-panel-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-company-switcher-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-company-switcher-max-height - Maximum height of the scrolling list. Defaults to `320px`.
+ * @prop --bs-company-switcher-text-color - Names. Aliased to `--bs-text-default`.
+ * @prop --bs-company-switcher-muted-color - Org. numbers. Aliased to `--bs-text-secondary`.
+ * @prop --bs-company-switcher-header-color - Group headers. Aliased to `--bs-text-muted`.
+ * @prop --bs-company-switcher-z-index - Panel stacking. Aliased to `--bs-z-index-popover`.
+ */
+export declare class BsCompanySwitcher {
+    el: HTMLElement;
+    private id;
+    private inputEl?;
+    private focusSearch;
+    /** The companies the user can switch between. JS property only (an array cannot be an attribute). */
+    companies: BsCompany[];
+    /** `id` of the current company. */
+    currentId?: string;
+    /** `id`s of recently used companies, most recent first. The current company is not repeated in the Recent group. */
+    recentIds: string[];
+    /** `id` of the company being switched to. Shows the switching state: a spinner in the trigger and on that row. */
+    switchingId?: string;
+    /** Whether the panel is open. */
+    open: boolean;
+    /** Text of the trigger when there is no current company. */
+    placeholderLabel: string;
+    /** Placeholder (and accessible name) of the search field. */
+    searchPlaceholder: string;
+    /** Accessible name of the company listbox. */
+    listLabel: string;
+    /** Header of the current company group. */
+    currentLabel: string;
+    /** Header of the recent companies group. */
+    recentLabel: string;
+    /** Header of the all companies group (the count is appended). */
+    allLabel: string;
+    /** Header of the search view when there are several matches ("3 matches"). */
+    matchesLabel: string;
+    /** Header of the search view when there is one match ("1 match"). */
+    matchLabel: string;
+    /** Prefix of the org. number, e.g. "Org. no.". */
+    orgNumberLabel: string;
+    /** Trigger subtitle while switching. */
+    switchingLabel: string;
+    /** No-results heading. `{query}` is replaced by the query. */
+    emptyHeading: string;
+    /** No-results description. */
+    emptyDescription: string;
+    /** Text of the "Manage Companies" footer button. */
+    manageLabel: string;
+    /** Text of the "Add companies" footer button. */
+    addLabel: string;
+    query: string;
+    activeId: string | null;
+    /** Fires when a company other than the current one is chosen (click or Enter), with the company. */
+    bsCompanySwitch: EventEmitter<BsCompany>;
+    /** Fires when "Manage Companies" is pressed. */
+    bsManageCompanies: EventEmitter<void>;
+    /** Fires when "Add companies" is pressed. */
+    bsAddCompanies: EventEmitter<void>;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange: EventEmitter<boolean>;
+    onOpen(next: boolean): void;
+    componentDidRender(): void;
+    private byId;
+    private get q();
+    private matches;
+    private groups;
+    private rowId;
+    private setOpen;
+    private choose;
+    private onPopoverOpenChange;
+    private onInput;
+    private onKeyDown;
+    private subtitle;
+    private renderTrigger;
+    private renderRow;
+    render(): any;
+}

package/dist/types/components/bs-company-switcher/bs-company-switcher.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Sample data (invented for the stories and tests, not real organisations). */
+export declare const COMPANIES: {
+    id: string;
+    name: string;
+    orgNumber: string;
+    country: string;
+}[];
+export declare const RECENT_IDS: string[];
+interface BsCompanySwitcherArgs {
+    currentId?: string;
+    recentIds: string[];
+    switchingId?: string;
+    open: boolean;
+}
+declare const meta: Meta<BsCompanySwitcherArgs>;
+export default meta;
+type Story = StoryObj<BsCompanySwitcherArgs>;
+export declare const Closed: Story;
+export declare const Open: Story;
+export declare const Switching: Story;
+export declare const SwitchingClosed: Story;
+export declare const Search: Story;
+export declare const NoResults: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-icon-tile/bs-icon-tile.d.ts

@@ -25,6 +25,7 @@ export type BsIconTileIntent = 'default' | 'success' | 'warning' | 'error' | 'br
  * @part text - The wrapper around the `text` slot (only shown when something is slotted).
  */
 export declare class BsIconTile {
+    el: HTMLElement;
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size: BsIconTileSize;
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -36,5 +37,9 @@ export declare class BsIconTile {
     hasCustomIcon: boolean;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText: boolean;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad(): void;
     render(): any[];
 }

package/dist/types/components/bs-mega-menu/bs-mega-menu.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-mega-menu/bs-mega-menu.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsMegaMenuItem {
+    id: string;
+    /** The link text. */
+    label: string;
+    /** One line under the label. Only shown in `type="columns"`. */
+    description?: string;
+    /** URL of a monochrome SVG, painted with the icon colour. Only shown in `type="columns"`. */
+    icon?: string;
+    /** Short chip text beside the label, e.g. "New". Only shown in `type="columns"`. */
+    badge?: string;
+}
+export interface BsMegaMenuColumn {
+    id: string;
+    /** The group heading, e.g. "Sell". */
+    label: string;
+    items: BsMegaMenuItem[];
+}
+export interface BsMegaMenuFeatured {
+    title: string;
+    description?: string;
+}
+export type BsMegaMenuType = 'columns' | 'compact';
+/**
+ * The dropdown panel under a navigation header tab: columns of links grouped under headings, an optional
+ * featured area on the right, and a footer with recently used items and a shortcut hint. Matches the Figma
+ * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
+ *
+ * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
+ * header's full width, and toggle the host's `hidden` attribute from the tab that
+ * opens it; the panel does not open or close itself. Escape inside the panel fires `bsClose` so you can close it.
+ *
+ * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
+ * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
+ * markup: no component covers them.
+ *
+ * ## Responsive
+ * The panel reacts to its own width (a container query), not the viewport's. Below 600px it becomes one column (heading
+ * above its links, featured area below), titles and descriptions wrap, links are at least 44px tall, the footer stacks
+ * and the default shortcut hint is hidden (`display: none`; a keyboard hint means nothing on a touch screen). A custom
+ * `footer-end` slot is not hidden.
+ *
+ * ## When to use
+ * - A header tab that leads to many destinations that need grouping (Sell, Finance, Inventory).
+ *
+ * ## When not to use
+ * - A short list of commands -- use `bs-menu` in a `bs-popover`.
+ * - Switching app or company -- use `bs-app-switcher` or `bs-company-switcher`.
+ *
+ * `columns`, `featured` and `recent` are arrays or objects and must be set as JS properties. Each item's `icon` is
+ * the URL of a monochrome SVG. You own the data: listen to `bsMenuSelect` (cancelable: `preventDefault()` cancels the
+ * originating click).
+ *
+ * @slot featured - The featured area on the right. Overrides the `featured` prop.
+ * @slot footer-start - Left side of the footer. Overrides the recently used line.
+ * @slot footer-end - Right side of the footer. Overrides the shortcut hint.
+ * @part panel - The panel surface (`bs-card`).
+ * @part columns - The grid of columns and the featured area.
+ * @part column - One column (group).
+ * @part heading - A column heading.
+ * @part list - A column's list of links.
+ * @part block - A link (`bs-menu-block` or `bs-compact-menu-block`).
+ * @part featured - The featured area.
+ * @part featured-title - The featured title.
+ * @part featured-description - The featured description.
+ * @part footer - The footer.
+ * @part shortcut - The shortcut hint's key caps (`bs-key-caps`).
+ * @prop --bs-mega-menu-width - Panel width. Defaults to `1100px` (Figma); capped at the viewport.
+ * @prop --bs-mega-menu-radius - Panel corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-mega-menu-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-mega-menu-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-mega-menu-shadow - Panel shadow (elevation level 3). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-high`.
+ * @prop --bs-mega-menu-padding - Padding around the columns. Aliased to `--bs-spacing-300` and `--bs-spacing-350`.
+ * @prop --bs-mega-menu-gap - Gap between columns. Aliased to `--bs-spacing-300`.
+ * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
+ * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
+ * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ */
+export declare class BsMegaMenu {
+    el: HTMLElement;
+    private id;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type: BsMegaMenuType;
+    /** The groups of links. JS property only (an array cannot be an attribute). */
+    columns: BsMegaMenuColumn[];
+    /** The featured area on the right. JS property only. The `featured` slot overrides it. */
+    featured?: BsMegaMenuFeatured;
+    /** Recently used destinations, already translated, shown in the footer. JS property only. */
+    recent: string[];
+    /** Accessible name of the panel. */
+    label: string;
+    /** Text before the recently used items. */
+    recentLabel: string;
+    /** Text before the shortcut keys. */
+    shortcutLabel: string;
+    /** The shortcut keys, joined by "+". */
+    shortcutKeys: string;
+    /** Accessible name of the shortcut keys. Defaults to the keys joined with " plus ". */
+    shortcutKeysLabel?: string;
+    /** Fires when a link is chosen (click or Enter), with the item. Cancelable: `preventDefault()` cancels the originating click. */
+    bsMenuSelect: EventEmitter<BsMegaMenuItem>;
+    /** Fires when Escape is pressed inside the panel, so you can close it. */
+    bsClose: EventEmitter<void>;
+    private select;
+    private onKeyDown;
+    private renderItem;
+    private renderColumn;
+    private renderFeatured;
+    render(): any;
+}

package/dist/types/components/bs-mega-menu/bs-mega-menu.stories.d.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own URLs. */
+export declare const ICONS: Record<string, string>;
+/** Sample data (invented for the stories and tests; not real EG products). */
+export declare const COLUMNS: {
+    id: string;
+    label: string;
+    items: ({
+        id: string;
+        label: string;
+        description: string;
+        icon: string;
+        badge?: undefined;
+    } | {
+        id: string;
+        label: string;
+        description: string;
+        icon: string;
+        badge: string;
+    })[];
+}[];
+export declare const COMPACT_COLUMNS: {
+    id: string;
+    label: string;
+    items: {
+        id: string;
+        label: string;
+    }[];
+}[];
+export declare const FEATURED: {
+    title: string;
+    description: string;
+};
+export declare const RECENT: string[];
+interface BsMegaMenuArgs {
+    type: 'columns' | 'compact';
+    featured: boolean;
+}
+declare const meta: Meta<BsMegaMenuArgs>;
+export default meta;
+type Story = StoryObj<BsMegaMenuArgs>;
+export declare const Columns: Story;
+export declare const ColumnWithFeatured: Story;
+export declare const Compact: Story;
+export declare const CompactWithFeatured: Story;
+/** Wired up: pick a link, press Escape, and the last event is printed below. */
+export declare const Interactive: Story;
+/** The mega menu in `bs-navigation-header`'s `menu` slot, opened by the "Sales" tab (sample data; columns type). */
+export declare const InNavigationHeader: Story;
+/** Compact type with the featured area, in the same header composition. */
+export declare const InNavigationHeaderCompact: Story;
+/** The same composition at 375px: the tabs scroll inside the bar, the panel is one column with no shortcut hint. */
+export declare const InNavigationHeaderMobile: Story;
+/** Compact with featured at 375px. */
+export declare const InNavigationHeaderCompactMobile: Story;

package/dist/types/components/bs-menu-block/bs-menu-block.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-menu-block/bs-menu-block.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A rich entry in a mega menu: an icon tile, a title with an optional "New" chip, and a one-line description.
+ * Matches the Figma "Menu block" component (Default, Hover, Pressed and Focused).
+ *
+ * The block is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element. Its accessible name is its text: the title, the badge and the description, read once.
+ *
+ * Built from `bs-icon-tile` (the icon) and `bs-chip-informative` (the badge). The icon is either a URL of a
+ * monochrome SVG in `icon` (painted with the theme's icon colour through a CSS mask, so it follows light and
+ * dark mode), or any element in the default slot (an `<svg>` drawn with `currentColor`).
+ *
+ * ## When to use
+ * - A destination in a mega menu that needs an icon and a sentence of explanation, usually inside `bs-mega-menu`.
+ *
+ * ## When not to use
+ * - A plain text destination -- use `bs-compact-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @slot - The icon (16px, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part name - The title.
+ * @part badge - The badge chip (`bs-chip-informative`).
+ * @part description - The description.
+ * @prop --bs-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-gap - Gap between icon and text. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-menu-block-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered or pressed.
+ * @prop --bs-menu-block-color - Title colour. Aliased to `--bs-text-default`.
+ * @prop --bs-menu-block-color-muted - Description colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ * @prop --bs-menu-block-white-space - `white-space` of the title and description. `nowrap` (single line, ellipsis); set `normal` to let them wrap.
+ */
+export declare class BsMenuBlock {
+    /** The title, and the start of the accessible name. */
+    name: string;
+    /** One line under the title; part of the accessible name. */
+    description?: string;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon?: string;
+    /** Short text for a chip beside the title, e.g. "New". */
+    badge?: string;
+    render(): any;
+}

package/dist/types/components/bs-menu-block/bs-menu-block.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsMenuBlockArgs {
+    name: string;
+    description: string;
+    badge: string;
+}
+declare const meta: Meta<BsMenuBlockArgs>;
+export default meta;
+type Story = StoryObj<BsMenuBlockArgs>;
+export declare const Default: Story;
+export declare const WithBadge: Story;
+/** The four states in the design. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export declare const States: Story;
+/** A slotted `<svg>` instead of the `icon` URL. */
+export declare const SlottedIcon: Story;

package/dist/types/components/bs-page-header/bs-page-header.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-page-header/bs-page-header.d.ts

@@ -0,0 +1,100 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+type SlotName = 'breadcrumb' | 'status' | 'meta' | 'actions' | 'tabs';
+/**
+ * The header at the top of a page's content area: breadcrumb trail, the page title (a real heading) with an
+ * optional back button, status and favourite toggle, a meta line, page-level actions on the right and an
+ * optional row of tabs. Matches the Figma "Page header" (types List page, Record, Record with tabs and Sticky
+ * compact).
+ *
+ * Built from `bs-breadcrumbs`/`bs-breadcrumb` (slotted by you), `bs-icon-button` (the built-in back and favourite
+ * buttons), `bs-chip-informative` (the status you slot), `bs-button` and `bs-icon-button` (the actions you slot),
+ * `bs-tabs`/`bs-tab` (the tab row you slot) and `bs-divider` (under the tabs). The title block, meta line and
+ * actions area are plain layout markup, because no component covers them. The back arrow and the star are
+ * inline SVG (Phosphor "arrow-left", "star" and "star-fill") until the library has an icon component.
+ *
+ * ## Compact (sticky)
+ * `compact` is the condensed state a record header takes once the page scrolls: one row (back, title, status,
+ * meta inline, actions), a level 2 shadow, no breadcrumb and no tabs, and `position: sticky`. Set it yourself
+ * from a scroll observer. Because the header covers the top of the scroll area, give the scroll container
+ * `scroll-padding-top` equal to its height (80px by default) so focused or anchored content is not hidden under it.
+ *
+ * ## Responsive
+ * The header reacts to its own width (a container query), not the viewport's. Below 640px the actions wrap
+ * below the title block, slotted buttons grow to 44px tall, the title and meta wrap, and the tab row scrolls
+ * sideways inside itself. The page never gets wider.
+ *
+ * ## When to use
+ * - The top of a list page or a single record (an invoice, a customer) inside the app shell's content area.
+ *
+ * ## When not to use
+ * - The app-wide bar with logo, search and user: use `bs-navigation-header`.
+ * - The heading of a card, dialog or panel: use that component's own `heading`.
+ *
+ * ## Accessibility notes
+ * The root is a plain `div`, not a `<header>`: a `<header>` that is not inside `<main>`/`<article>`/`<section>`
+ * is a second banner landmark. The title is a real heading (`<h1>` by default, `headingLevel` 1 to 6); the
+ * status is next to it, not inside it. If you want a landmark, wrap `bs-page-header` yourself.
+ *
+ * @slot breadcrumb - A `bs-breadcrumbs` trail, shown above the title. Not shown when `compact`.
+ * @slot status - A status chip next to the title, e.g. `<bs-chip-informative color="error" size="sm">Overdue</bs-chip-informative>`.
+ * @slot meta - The line under the title (inline after it when `compact`). Overrides the `meta` prop. Plain text.
+ * @slot actions - The page-level actions on the right, e.g. `bs-button`s and an icon-only "more" `bs-icon-button`.
+ * @slot tabs - A `bs-tabs` row under the meta line. Not shown when `compact`.
+ * @part container - The root element.
+ * @part breadcrumb - The breadcrumb area.
+ * @part row - The row holding the title block and the actions.
+ * @part main - The title block (back button, title row and meta).
+ * @part back - The back `bs-icon-button`.
+ * @part title - The row holding the heading, status and favourite button.
+ * @part heading - The heading element.
+ * @part status - The status area.
+ * @part favorite - The favourite `bs-icon-button`.
+ * @part meta - The meta line.
+ * @part actions - The actions area.
+ * @part tabs - The tab row (scrolls sideways when narrow).
+ * @part divider - The `bs-divider` under the tabs.
+ * @prop --bs-page-header-bg - Background. Aliased to `--bs-surface-base`.
+ * @prop --bs-page-header-padding-x - Left and right padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-page-header-padding-y - Top and bottom padding. Aliased to `--bs-spacing-300`.
+ * @prop --bs-page-header-gap - Gap between the breadcrumb, title block and tabs, and between the title block and the actions. Aliased to `--bs-spacing-150`.
+ * @prop --bs-page-header-title-gap - Gap between the heading, status and favourite button. Aliased to `--bs-spacing-150`.
+ * @prop --bs-page-header-actions-gap - Gap between the actions. Aliased to `--bs-spacing-100`.
+ * @prop --bs-page-header-text-color - Heading. Aliased to `--bs-text-default`.
+ * @prop --bs-page-header-meta-color - Meta line. Aliased to `--bs-text-secondary`.
+ * @prop --bs-page-header-shadow - Shadow of the compact header (elevation level 2). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-medium`.
+ * @prop --bs-page-header-sticky-offset - The `top` of the compact header. Defaults to `0px`; set it to the height of a sticky bar above (e.g. the navigation header).
+ * @prop --bs-page-header-z-index - Stacking order of the compact header. Aliased to `--bs-z-index-sticky`.
+ */
+export declare class BsPageHeader {
+    el: HTMLElement;
+    /** The page title, rendered as the heading. */
+    heading: string;
+    /** HTML heading level for the title, 1 to 6. Use 1 unless the page already has its own `h1`. */
+    headingLevel: number;
+    /** The line under the title, plain text, e.g. "214 invoices · 38 open". The `meta` slot overrides it. */
+    meta?: string;
+    /** The condensed, sticky state: one row, a level 2 shadow, no breadcrumb and no tabs. Reflected. */
+    compact: boolean;
+    /** Shows a back button before the title. It emits `bsBack`; you navigate. */
+    back: boolean;
+    /** Accessible name of the back button. */
+    backLabel: string;
+    /** Shows the favourite (star) toggle after the title. */
+    favoritable: boolean;
+    /** Whether the record is a favourite. Mutable: it follows the user's toggle unless `bsFavoriteChange` is cancelled. */
+    favorite: boolean;
+    /** Accessible name of the favourite toggle. It stays the same in both states; `aria-pressed` carries the state. */
+    favoriteLabel: string;
+    /** Fires when the back button is clicked. Not cancelable: the component has no default action to cancel. */
+    bsBack: EventEmitter<void>;
+    /** Fires when the user toggles the favourite button, with the new value. Cancelable: `preventDefault()` keeps the old value. */
+    bsFavoriteChange: EventEmitter<{
+        favorite: boolean;
+    }>;
+    slotted: Record<SlotName, boolean>;
+    componentWillLoad(): void;
+    private onSlotChange;
+    private onFavoriteClick;
+    render(): any;
+}
+export {};

package/dist/types/components/bs-page-header/bs-page-header.stories.d.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own. */
+export declare const ICONS: Record<string, string>;
+/** Sample data (invented for the stories and tests; not real invoices, customers or amounts). */
+export declare const SAMPLE: {
+    heading: string;
+    listMeta: string;
+    customerMeta: string;
+};
+interface BsPageHeaderArgs {
+    heading: string;
+    headingLevel: number;
+    meta: string;
+    compact: boolean;
+    back: boolean;
+    favoritable: boolean;
+    favorite: boolean;
+    backLabel: string;
+    favoriteLabel: string;
+}
+declare const meta: Meta<BsPageHeaderArgs>;
+export default meta;
+type Story = StoryObj<BsPageHeaderArgs>;
+/** Type "List page": breadcrumb, title, a meta line and the page actions on the right. */
+export declare const ListPage: Story;
+/** Type "Record": back button, status chip and favourite toggle beside the title; the meta line lines up with the title. */
+export declare const Record: Story;
+/** Type "Record with tabs": a `bs-tabs` row under the meta line with a full-width divider below it. */
+export declare const RecordWithTabs: Story;
+/** Type "Sticky compact": one row with an inline meta and a level 2 shadow. Scroll the box: the header stays at the top. */
+export declare const StickyCompact: Story;
+/** A favourited record: the star is filled and the button reports `aria-pressed="true"`. */
+export declare const Favourited: Story;
+/** No actions and no status: the title block and the meta line only. */
+export declare const NoActions: Story;
+/** A long title wraps inside the title block; the status, favourite toggle and actions stay in place. */
+export declare const LongTitle: Story;
+/** The Record with tabs at 375px: actions wrap below the title, buttons are 44px tall, the tabs scroll inside their row. */
+export declare const Mobile: Story;
+/** Wired up: click back or the star; the last event is printed below. `bsFavoriteChange` is cancelable. */
+export declare const Interactive: Story;

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

@@ -22,12 +22,18 @@ export type BsNavigationHeaderAlignment = 'default' | 'center' | 'with-navigatio
  * @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.
+ * @slot menu - A panel anchored directly below the bar, spanning the header's full width and
+ *   overlaying the page content under it (typically a `bs-mega-menu`). It takes no space while
+ *   empty or hidden. The slot only positions the panel: it does not own open/close state -- the
+ *   consumer's trigger toggles the panel's `hidden`, closes it on its `bsClose` event and on an
+ *   outside click, and restores focus to the trigger.
  * @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 menu - The wrapper around the `menu` slot (absolutely positioned under the bar).
  * @part skip-link - The "Skip to main content" link (only rendered when `skipToContentHref` is set).
  */
 export declare class BsNavigationHeader {
@@ -56,5 +62,5 @@ export declare class BsNavigationHeader {
      * 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;
+    render(): any[];
 }