@brandsync/wc 1.17.0 → 1.19.0

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

@@ -28,6 +28,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
  * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
  * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsMenuItem {
     /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by

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

@@ -24,6 +24,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part page - Each page-number button.
  * @part current - The current page's button (in addition to `page`).
  * @part ellipsis - Each collapsed-range indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsPagination {
     /** Total number of pages. Must be a positive integer -- there's always at least one page. */

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

@@ -23,6 +23,12 @@ export type BsPopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | '
  * @prop --bs-popover-offset - Gap between trigger and popup. Aliased to `--bs-spacing-100`.
  * @prop --bs-popover-min-width - Minimum popup width. Aliased to `--bs-scale-1600`.
  * @prop --bs-popover-z-index - Popup stacking order. Aliased to `--bs-z-index-popover`.
+ * @prop --bs-popover-duration - Length of the open/close motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-popover-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-popover-distance - How far the popup nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The popup fades and nudges toward its trigger when it opens and closes. Length, curve and travel are
+ * `--bs-popover-duration`, `--bs-popover-easing` and `--bs-popover-distance`; under `prefers-reduced-motion: reduce` it is instant.
  */
 export declare class BsPopover {
     el: HTMLElement;
@@ -34,12 +40,21 @@ export declare class BsPopover {
     bsOpenChange: EventEmitter<boolean>;
     private popupId;
     private triggerSlot?;
+    /** True while the exit motion plays after `open` went false, so the popup stays visible for it. */
+    closing: boolean;
     private popupEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
     private needsFocusIn;
     private escaped;
     onOpenChange(next: boolean): void;
     onPlacementChange(): void;
     componentWillLoad(): void;
+    /** Slides toward the trigger it hangs off: a popup above its trigger rises from below, one below drops from above. */
+    private offset;
+    private playEnter;
+    private playExit;
     componentDidRender(): void;
     private isInTrigger;
     /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */

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

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

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsPresencePreset = 'fade' | 'slide-up' | 'slide-down' | 'scale' | 'collapse';
+export type BsPresenceDuration = 'instant' | 'fast' | 'default' | 'slow' | 'slower';
+export type BsPresenceEasing = 'standard' | 'decelerate' | 'accelerate' | 'linear';
+/**
+ * Shows and hides slotted content with a short enter/exit transition.
+ *
+ * The motion uses the shared duration and easing tokens (`--bs-duration-*`, `--bs-easing-*`).
+ * Under `prefers-reduced-motion: reduce` those durations are already `0ms`, and this component
+ * forces `--bs-presence-duration` to `--bs-duration-instant` as well, so the content snaps
+ * instead of moving.
+ *
+ * ## When to use
+ * - Revealing a block that does not have its own enter/exit (a card, a form section, a panel).
+ * - Comparing duration and easing tokens while designing a screen.
+ *
+ * ## When not to use
+ * - Loading placeholders (`bs-skeleton`), spinners (`bs-spinner`), or progress.
+ * - Dialog, snackbar, toast, and command palette — those components own their motion.
+ *
+ * @slot - The content to show and hide.
+ * @part content - The element that transitions. Style it with `::part(content)`.
+ * @prop --bs-presence-duration - Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+ * @prop --bs-presence-easing - Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+ * @prop --bs-presence-distance - Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+ * @prop --bs-presence-scale - Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
+ */
+export declare class BsPresence {
+    el: HTMLElement;
+    /** When true, the slotted content is shown. Flipping this plays the exit or enter transition. */
+    active: boolean;
+    /** Which transition to play. */
+    preset: BsPresencePreset;
+    /** Length of the transition, mapped to a `--bs-duration-*` token. */
+    duration: BsPresenceDuration;
+    /** Curve of the transition, mapped to a `--bs-easing-*` token. */
+    easing: BsPresenceEasing;
+    /** Fires once when the transition to the new `active` state finishes. Payload is that state. */
+    bsTransitionEnd: EventEmitter<boolean>;
+    private clip?;
+    private shell?;
+    /**
+     * CSS class changes inside this shadow root will play the exit and then not the entrance
+     * (Chromium drops the reverse transition). The Web Animations API plays both directions.
+     * A 0ms duration — including `prefers-reduced-motion` — snaps and emits here.
+     */
+    onActiveChange(active: boolean): void;
+    private motionDuration;
+    render(): any;
+}

package/dist/types/components/bs-presence/bs-presence.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsPresenceDuration, BsPresenceEasing, BsPresencePreset } from './bs-presence';
+interface BsPresenceArgs {
+    active: boolean;
+    preset: BsPresencePreset;
+    duration: BsPresenceDuration;
+    easing: BsPresenceEasing;
+}
+declare const meta: Meta<BsPresenceArgs>;
+export default meta;
+type Story = StoryObj<BsPresenceArgs>;
+export declare const Default: Story;
+export declare const Presets: Story;
+export declare const Durations: Story;
+export declare const Easings: Story;

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

@@ -15,6 +15,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part circle - The visual radio ring.
  * @part dot - The center fill shown inside the ring when `checked`.
  * @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 BsRadio {
     el: HTMLElement;

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * A touch-ripple effect: on pointer press, a circle grows from the press point and fades out.
+ *
+ * It is a building block for pressable components (`bs-button`, `bs-icon-button`, ...), not something
+ * to place on a page by itself. Put it inside a positioned, pressable parent; it fills that parent,
+ * follows its corner radius, and listens for `pointerdown` on it. Pointer-events pass through, so the
+ * parent still receives every click.
+ *
+ * The motion uses the shared duration and easing tokens. Under `prefers-reduced-motion: reduce` those
+ * durations are `0ms`, and the ripple does not play at all.
+ *
+ * ## When to use
+ * - Inside a pressable `bs-*` component, to give press feedback.
+ *
+ * ## When not to use
+ * - As a hover or focus indicator. Those are colour changes on the parent.
+ * - On non-interactive surfaces.
+ *
+ * Set the custom properties on the `bs-ripple` element itself. Inside another component that means `::part(ripple)`,
+ * e.g. `bs-button::part(ripple) { --bs-ripple-color: white; }`.
+ *
+ * @part surface - The clipping layer the ripple circles are drawn in.
+ * @prop --bs-ripple-color - Ripple colour. `currentColor` by default, so it follows the parent's text colour and works on every variant.
+ * @prop --bs-ripple-opacity - Starting opacity of the ripple. No opacity token fits, so the default is `0.24`.
+ * @prop --bs-ripple-duration - Length of the ripple. Aliased to `--bs-duration-slower`.
+ * @prop --bs-ripple-easing - Curve of the ripple. Aliased to `--bs-easing-decelerate`.
+ */
+export declare class BsRipple {
+    el: HTMLElement;
+    /** Always start the ripple from the centre instead of the press point. Use it for round or icon-only controls. */
+    centered: boolean;
+    /** Turns the ripple off. A disabled parent (`<button disabled>`) also stops it. */
+    disabled: boolean;
+    /**
+     * CSS selector of the element to listen on, found with `closest()` from the ripple (so it stays inside
+     * the same shadow tree). By default the ripple listens on its parent. Use it when the pressable element
+     * is bigger than the ripple's own parent, e.g. a switch whose ripple sits on the knob but whose whole
+     * `<label>` is the press target.
+     */
+    triggerSelector?: string;
+    onTriggerChange(): void;
+    private surface?;
+    private target?;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private bind;
+    private unbind;
+    private onPointerDown;
+    private toMs;
+    render(): any;
+}

package/dist/types/components/bs-ripple/bs-ripple.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsRippleArgs {
+    centered: boolean;
+    disabled: boolean;
+}
+declare const meta: Meta<BsRippleArgs>;
+export default meta;
+type Story = StoryObj<BsRippleArgs>;
+export declare const Default: Story;
+export declare const Centered: Story;
+export declare const InButtons: Story;

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

@@ -36,6 +36,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @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`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsSearchItem {
     el: HTMLElement;

package/dist/types/components/bs-side-panel/bs-side-panel.d.ts

@@ -30,6 +30,8 @@ export type BsSidePanelSide = 'start' | 'end';
  * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
  * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
  * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ * @prop --bs-side-panel-duration - Length of the slide in/out. Aliased to `--bs-duration-slow`.
+ * @prop --bs-side-panel-easing - Curve of the slide in/out. Aliased to `--bs-easing-standard`.
  */
 export declare class BsSidePanel {
     el: HTMLElement;
@@ -50,6 +52,13 @@ export declare class BsSidePanel {
     private panelEl?;
     /** Elements we set `inert` on (so we only undo our own changes). */
     private inertified;
+    /** True while the slide-out plays after `open` went false, so the panel stays mounted for it. */
+    closing: boolean;
+    private overlayEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    private wasRendered;
     onOpenChange(next: boolean): void;
     onOverlayChange(): void;
     connectedCallback(): void;
@@ -59,6 +68,10 @@ export declare class BsSidePanel {
     private restoreInert;
     private getFocusables;
     private trapTab;
+    /** Where the panel sits when hidden: fully past its own edge. Physical, like the panel's own left/right. */
+    private offscreen;
+    private playEnter;
+    private playExit;
     componentDidRender(): void;
     private focusedIn;
     private close;

package/dist/types/components/bs-source-link/bs-source-link.d.ts

@@ -32,6 +32,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
  * @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
  *   `--bs-text-secondary`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsSourceLink {
     /** The cited document's filename. */

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

@@ -16,6 +16,7 @@ export type BsSwitchSize = 'md' | 'lg';
  * @part track - The visual pill-shaped track.
  * @part knob - The sliding circular knob.
  * @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 BsSwitch {
     el: HTMLElement;

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts

@@ -29,6 +29,7 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * @part tab - The button element.
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsInlineTab {
     el: HTMLElement;

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

@@ -32,6 +32,7 @@ export type BsTabIconPosition = 'start' | 'top';
  * @part label - The label wrapper.
  * @part badge - The badge wrapper.
  * @part indicator - The selection/hover underline indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsTab {
     el: HTMLElement;

package/dist/types/components/bs-tooltip-trigger/bs-tooltip-trigger.d.ts

@@ -16,8 +16,15 @@ export type BsTooltipTriggerPlacement = 'top' | 'bottom' | 'start' | 'end';
  * @part tooltip - The positioned tooltip wrapper (role="tooltip").
  * @prop --bs-tooltip-trigger-offset - Gap between trigger and tooltip. Aliased to `--bs-spacing-100`.
  * @prop --bs-tooltip-trigger-z-index - Stacking order. Aliased to `--bs-z-index-popover`.
+ * @prop --bs-tooltip-trigger-duration - Length of the show/hide motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-tooltip-trigger-easing - Curve of the show/hide motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-tooltip-trigger-distance - How far the tooltip nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The tooltip fades in while drifting a few pixels away from the trigger into place, and fades back out toward it. Under
+ * `prefers-reduced-motion: reduce` (or a duration of `0ms`) it appears and disappears instantly.
  */
 export declare class BsTooltipTrigger {
+    el: HTMLElement;
     /** Tooltip message. */
     text: string;
     /** Milliseconds to wait before showing the tooltip. */
@@ -25,6 +32,17 @@ export declare class BsTooltipTrigger {
     /** Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'. */
     placement: BsTooltipTriggerPlacement;
     visible: boolean;
+    /** True while the exit motion plays after `visible` went false, so the tooltip stays shown for it. */
+    closing: boolean;
+    private bubbleEl?;
+    private tipEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    onVisibleChange(next: boolean): void;
+    /** The tooltip drifts away from the trigger it hangs off: below it drops from above, above it rises from below, and so on. */
+    private offset;
+    componentDidRender(): void;
     private tooltipId;
     private timer?;
     disconnectedCallback(): void;

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

@@ -21,6 +21,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
  * @part group - The `role="group"` wrapper around the child items (while expanded).
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsTreeItem {
     el: HTMLElement;

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[];
 }