@brandsync/wc 1.16.0 → 1.18.0

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/bs-search-item/bs-search-item.cmp.test.d.ts

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

package/dist/types/components/bs-search-item/bs-search-item.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One result or suggestion row of a search dropdown: a leading icon, a primary line, an optional
+ * description line and trailing text. Static, not focusable -- focus stays in the search field and the
+ * parent (`bs-global-search`) marks the highlighted row with `active`.
+ *
+ * Standalone it has no role. `bs-global-search` sets `selectionRole="option"` (and an `id`) on its rows,
+ * the same pattern as `bs-list-item` and `bs-shortcut-row`.
+ *
+ * ## When to use
+ * - A suggestion, recent search or result inside `bs-global-search`.
+ *
+ * ## When not to use
+ * - A row in a generic list -- use `bs-list-item`.
+ * - A command in a popup menu -- use `bs-menu-item`.
+ *
+ * @slot icon - A leading glyph (24px, `currentColor`).
+ * @slot - The primary text. Wrap the matched part in `<strong>` or `<b>` to show it semibold.
+ * @slot description - An optional second line.
+ * @slot trailing - Trailing text (overrides the `trailing` prop).
+ * @part container - The row.
+ * @part icon - The icon wrapper.
+ * @part content - The text column.
+ * @part label - The primary line.
+ * @part description - The description line.
+ * @part trailing - The trailing text wrapper.
+ * @prop --bs-search-item-min-height - Aliased to `--bs-spacing-600` (48px).
+ * @prop --bs-search-item-padding-y - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-padding-x - Aliased to `--bs-spacing-150`.
+ * @prop --bs-search-item-gap - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-search-item-bg - Resting background. `transparent`.
+ * @prop --bs-search-item-bg-active - Active (highlighted) and hover background. Aliased to `--bs-surface-hover`.
+ * @prop --bs-search-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-search-item-color - Primary text. Aliased to `--bs-text-default`.
+ * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
+ * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ */
+export declare class BsSearchItem {
+    el: HTMLElement;
+    /** Identifies the item; emitted by `bsItemSelect`. */
+    value?: string;
+    /** Highlighted row (keyboard or hover). Set by the parent. */
+    active: boolean;
+    /** Dims the row and ignores clicks. */
+    disabled: boolean;
+    /** Trailing text shorthand. The `trailing` slot overrides it. */
+    trailing?: string;
+    /** Set by the parent (`"option"`). Standalone rows have no role. */
+    selectionRole: 'option' | null;
+    hasIcon: boolean;
+    hasDescription: boolean;
+    hasTrailingSlot: boolean;
+    /** Fires with `value` when the row is clicked, or when the parent selects it with Enter. */
+    bsItemSelect: EventEmitter<string | undefined>;
+    componentWillLoad(): void;
+    onClick(): void;
+    private slotFilled;
+    render(): any;
+}

package/dist/types/components/bs-search-item/bs-search-item.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSearchItemArgs {
+    active: boolean;
+    disabled: boolean;
+    trailing: string;
+}
+declare const meta: Meta<BsSearchItemArgs>;
+export default meta;
+type Story = StoryObj<BsSearchItemArgs>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const Active: Story;
+export declare const Disabled: Story;

package/dist/types/components/bs-shortcut-row/bs-shortcut-row.cmp.test.d.ts

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

package/dist/types/components/bs-shortcut-row/bs-shortcut-row.d.ts

@@ -0,0 +1,38 @@
+/**
+ * One row of a shortcut list: an action label on the left and its keyboard shortcut on the right.
+ * Static information, not interactive. Standalone it has no role; `bs-keyboard-shortcuts` sets
+ * `selectionRole="listitem"` on its rows (same pattern as `bs-list-item`).
+ *
+ * Built from `bs-key-caps` (and so `bs-key`).
+ *
+ * ## When to use
+ * - A line in a keyboard-shortcut reference, usually inside `bs-keyboard-shortcuts`.
+ *
+ * ## When not to use
+ * - A clickable command or menu entry -- use `bs-menu-item` (which has its own shortcut slot).
+ *
+ * @slot - The action label (overrides the `action` prop).
+ * @slot keys - Your own `bs-key-caps` (or custom keys), replacing the generated one.
+ * @part container - The row.
+ * @part action - The action label wrapper.
+ * @part keys - The wrapper around the key caps.
+ * @prop --bs-shortcut-row-height - Row height. Defaults to `36px` (Figma).
+ * @prop --bs-shortcut-row-padding-x - Horizontal padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-shortcut-row-gap - Gap between label and keys. Aliased to `--bs-spacing-100`.
+ * @prop --bs-shortcut-row-radius - Corner radius. Aliased to `--bs-border-radius-75`.
+ * @prop --bs-shortcut-row-color - Label colour. Aliased to `--bs-text-default`.
+ * @prop --bs-shortcut-row-color-disabled - Label colour while `disabled`. Aliased to `--bs-text-on-disabled`.
+ */
+export declare class BsShortcutRow {
+    /** The action, e.g. "Save". The default slot overrides it. */
+    action?: string;
+    /** The keys, e.g. `"Ctrl+S"`, or an array (`['Ctrl', '+']`) for a literal plus key. See `bs-key-caps`. */
+    keys?: string | string[];
+    /** Accessible name of the key caps, e.g. "Control plus S". Defaults to the keys joined with "plus". */
+    label?: string;
+    /** Dims the label and the keys. */
+    disabled: boolean;
+    /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
+    selectionRole: 'listitem' | null;
+    render(): any;
+}

package/dist/types/components/bs-shortcut-row/bs-shortcut-row.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsShortcutRowArgs {
+    action: string;
+    keys: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsShortcutRowArgs>;
+export default meta;
+type Story = StoryObj<BsShortcutRowArgs>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const ThreeKeys: Story;
+export declare const IconKey: 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[];
 }