@brandsync/wc 1.17.0 → 1.19.0

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

@@ -0,0 +1,51 @@
+export type BsAppTileSize = 'grid' | 'compact';
+/**
+ * One app in an app launcher: an icon tile above a short label. Matches the Figma "App tile" component
+ * (Size Grid and Compact, each Default, Hover, Pressed, Focus, Current and Disabled).
+ *
+ * The tile is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element; `current` marks the app you are in (`aria-current="true"`); `disabled` dims it, sets
+ * `aria-disabled` and removes it from the tab order.
+ *
+ * Built from `bs-icon-tile`. 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
+ * - An app in a launcher grid, usually inside `bs-app-switcher`.
+ *
+ * ## When not to use
+ * - A row with a description or "recently opened" line -- use `bs-app-recent-item`.
+ * - A command in a menu -- use `bs-menu-item`.
+ *
+ * @slot - The icon (24px in `grid`, 16px in `compact`, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part label - The app name.
+ * @prop --bs-app-tile-icon-size - Size of the icon square. `44px` in `grid` (Figma) and `--bs-sizing-400` in `compact`.
+ * @prop --bs-app-tile-padding - Padding inside the tile. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-100` (`compact`).
+ * @prop --bs-app-tile-gap - Gap between icon and label. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-50` (`compact`).
+ * @prop --bs-app-tile-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-app-tile-bg - Resting background. `transparent`.
+ * @prop --bs-app-tile-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-app-tile-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-app-tile-bg-current - Aliased to `--bs-surface-selected`.
+ * @prop --bs-app-tile-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered, pressed or current.
+ * @prop --bs-app-tile-color - Label colour. Aliased to `--bs-text-default`.
+ * @prop --bs-app-tile-color-disabled - Label and icon colour when disabled. Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-app-tile-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export declare class BsAppTile {
+    /** The app name, shown under the icon and used as the accessible name. */
+    name: string;
+    /** `grid` is the 3-column launcher tile; `compact` the smaller 4-column one. */
+    size: BsAppTileSize;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon?: string;
+    /** The app you are in right now: selected background and `aria-current="true"`. */
+    current: boolean;
+    /** Dims the tile, sets `aria-disabled` and takes it out of the tab order. */
+    disabled: boolean;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-app-tile/bs-app-tile.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsAppTileArgs {
+    name: string;
+    size: 'grid' | 'compact';
+    current: boolean;
+    disabled: boolean;
+}
+declare const meta: Meta<BsAppTileArgs>;
+export default meta;
+type Story = StoryObj<BsAppTileArgs>;
+export declare const Default: Story;
+/** Both sizes in each state the design shows. Hover, pressed and focus come from the native element: point, press or Tab to see them. */
+export declare const States: Story;
+export declare const Current: Story;
+export declare const Disabled: Story;
+export declare const Compact: Story;
+/** A slotted `<svg>` instead of the `icon` URL. */
+export declare const SlottedIcon: Story;

package/dist/types/components/bs-button/bs-button/bs-button.d.ts

@@ -19,8 +19,11 @@ export type BsButtonSize = 'sm' | 'md' | 'lg';
  *   it for actions that actually delete/revoke/undo something.
  *
  * @slot - Default slot: the button's label content.
+ * Built from: `bs-ripple` (press feedback).
+ *
  * @slot icon - Optional leading icon, rendered before the label.
  * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `bs-button::part(ripple) { --bs-ripple-color: ...; }` (also `--bs-ripple-opacity`, `--bs-ripple-duration`).
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.

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

@@ -24,6 +24,7 @@ export type BsIconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
  * @slot - Default slot: the icon content. Exactly one icon, no label -- an inline SVG, or an icon-font
  * glyph (sized by `font-size`, which this component sets from the `size` prop).
  * @part icon - The icon wrapper element.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsIconButton {
     el: HTMLElement;
@@ -50,6 +51,13 @@ export declare class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel: string | null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click. Put the toggle's state in the icon (e.g. a filled
+     * star), not in the label, which should stay the same.
+     */
+    pressed?: boolean;
     private onClick;
     render(): any;
 }

package/dist/types/components/bs-carousel/bs-carousel.d.ts

@@ -10,6 +10,12 @@ export type BsCarouselTracker = 'dots' | 'numbers';
  * so they leave the tab order and the accessibility tree) and, only when not already set,
  * `role="group"`, `aria-roledescription="slide"` and an `aria-label` of "n of N".
  *
+ * Changing page plays a short motion: the visible slides fade and slide out in the direction of travel,
+ * then the next page's slides fade and slide in (reversed for previous, and mirrored in RTL). The dots
+ * also grow and fade between pages. Motion length and distance follow `--bs-carousel-duration`,
+ * `--bs-carousel-easing` and `--bs-carousel-slide-distance`. Under `prefers-reduced-motion: reduce`
+ * the duration token is `0ms`, so pages switch instantly.
+ *
  * Composes `bs-pagination` (`tracker="numbers"`), `bs-icon-button` (previous/next for
  * `tracker="dots"`) and `bs-button` (Pause/Play) rather than re-implementing them.
  *
@@ -75,6 +81,12 @@ export declare class BsCarousel {
     /** True while the pointer is over the carousel or focus is inside it (auto-advance holds). */
     interacting: boolean;
     private timer?;
+    /** The page whose slides are actually on screen. Lags `currentPage` while a page change animates out. */
+    private shown;
+    private loaded;
+    private transitioning;
+    private runId;
+    private running;
     private get slides();
     private get perView();
     private get pageCount();
@@ -83,7 +95,15 @@ export declare class BsCarousel {
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
-    onCurrentPageChange(): void;
+    onCurrentPageChange(next: number): void;
+    /**
+     * Exit then enter, each half the duration. While the old page animates out it stays mounted
+     * (`transitioning` makes `applySlides` keep showing `shown`); then the new page is shown and
+     * animated in. A new change arriving mid-motion cancels it and snaps to the latest page.
+     */
+    private playPageChange;
+    private cancelMotion;
+    private toMs;
     updateTimer(): void;
     private stopTimer;
     onMouseEnter(): void;

package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.d.ts

@@ -39,6 +39,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
  * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
  * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsChatbotResponseAction {
     host: HTMLElement;

package/dist/types/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.d.ts

@@ -32,6 +32,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *   Aliased to `--bs-text-action-hover`.
  * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
  *   `--bs-border-primary-focus`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsChatbotSuggestionButton {
     /** Disables the button and applies a reduced-opacity treatment. */

package/dist/types/components/bs-checkbox/bs-checkbox.d.ts

@@ -17,6 +17,7 @@ export type BsCheckboxSize = 'sm' | 'md' | 'lg';
  * @part box - The visual checkbox square.
  * @part icon - The check/minus icon shown inside the box when `checked` or `indeterminate`.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsCheckbox {
     el: HTMLElement;

package/dist/types/components/bs-chip/bs-chip-filter/bs-chip-filter.d.ts

@@ -19,6 +19,7 @@ export type BsChipFilterSize = 'md' | 'lg';
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part caret - The dropdown caret wrapper element, when `dropdown` is set.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsChipFilter {
     el: HTMLElement;

package/dist/types/components/bs-chip/bs-chip-input/bs-chip-input.d.ts

@@ -22,6 +22,7 @@ export type BsChipInputSize = 'md' | 'lg';
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part remove - The trailing remove button.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsChipInput {
     el: HTMLElement;

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * A plain text entry in a mega menu: one line, no icon. Matches the Figma "Compact 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.
+ *
+ * ## When to use
+ * - A dense list of destinations in a mega menu, usually inside `bs-mega-menu` with `type="compact"`.
+ *
+ * ## When not to use
+ * - A destination that needs an icon or a description -- use `bs-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @part container - The button.
+ * @prop --bs-compact-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-100`.
+ * @prop --bs-compact-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-compact-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-compact-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-compact-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-compact-menu-block-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-compact-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ */
+export declare class BsCompactMenuBlock {
+    /** The text, and the accessible name. */
+    name: string;
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsCompactMenuBlockArgs {
+    name: string;
+}
+declare const meta: Meta<BsCompactMenuBlockArgs>;
+export default meta;
+type Story = StoryObj<BsCompactMenuBlockArgs>;
+export declare const Default: Story;
+/** A list of blocks. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export declare const States: Story;

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

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

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-dialog/bs-dialog.d.ts

@@ -33,8 +33,13 @@ export type BsDialogSize = 'sm' | 'md' | 'lg';
  * @part close - The close button (inline in the header, or floating -- see the class doc above).
  * @part body - The body content wrapper.
  * @part footer - The footer wrapper (only visible when the footer slot has content).
+ *
+ * Opening fades the backdrop in and lifts the dialog into place; closing plays the same motion in
+ * reverse before the dialog is removed. Length, curve and travel are `--bs-dialog-duration`,
+ * `--bs-dialog-easing` and `--bs-dialog-distance`. Under `prefers-reduced-motion: reduce` it is instant.
  */
 export declare class BsDialog {
+    el: HTMLElement;
     /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
      * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
     open: boolean;
@@ -62,6 +67,15 @@ export declare class BsDialog {
     private onFooterSlotchange;
     private onImageSlotchange;
     private onIconSlotchange;
+    /** True while the exit motion plays after `open` went false, so the dialog stays mounted for it. */
+    closing: boolean;
+    private backdropRef?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    onOpenChange(next: boolean): void;
+    private playEnter;
+    private playExit;
     private dialogRef?;
     private previouslyFocused?;
     private previousBodyOverflow?;

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-list-item/bs-list-item.d.ts

@@ -50,6 +50,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
  * @prop --bs-list-item-image-width - Leading image width. 72px.
  * @prop --bs-list-item-image-height - Leading image height. 56px.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsListItem {
     el: HTMLElement;

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,134 @@
+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 show it 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.
+ *
+ * There are two ways to show and hide it. Toggle the host's `hidden` attribute and it appears and disappears at once
+ * (the original contract, unchanged). Or set `open` and it fades and drops in from under the bar, then fades back out
+ * and is removed once the exit finishes. Leave `open` unset to keep using `hidden` only. `hidden` always wins: with it
+ * set the panel is not shown whatever `open` says.
+ *
+ * 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`.
+ * @prop --bs-mega-menu-duration - Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+ * @prop --bs-mega-menu-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-mega-menu-distance - How far the panel drops while it fades. Aliased to `--bs-spacing-100`.
+ *
+ * Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
+ */
+export declare class BsMegaMenu {
+    el: HTMLElement;
+    private id;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type: BsMegaMenuType;
+    /**
+     * Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`
+     * attribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.
+     * The panel stays in the DOM and is `inert` while it fades out.
+     */
+    open?: boolean;
+    /** 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>;
+    /** True while the exit motion plays after `open` went false, so the panel stays visible for it. */
+    closing: boolean;
+    private panelEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    onOpenChange(next?: boolean, prev?: boolean): void;
+    componentDidRender(): 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 {};