@brandsync/wc 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @brandsync/wc
 
+## 1.19.0
+
+### Minor Changes
+
+- e0fb531: Add `bs-presence`, a slot wrapper that fades, slides, scales, or collapses its content when `active` changes. Duration and easing map to the existing motion tokens, and reduced motion snaps the transition to instant.
+- e0fb531: Add `bs-ripple`, a press-ripple building block, and use it in `bs-button`, `bs-icon-button`, `bs-chip-filter`, `bs-chip-input`, `bs-tab`, `bs-inline-tab`, `bs-menu-item`, `bs-list-item`, `bs-search-item`, `bs-tree-item`, `bs-pagination`, `bs-source-link`, `bs-chatbot-suggestion-button`, `bs-chatbot-response-action`, `bs-switch`, `bs-checkbox` and `bs-radio` (each exposes it as `::part(ripple)`). `bs-accordion` now animates its body height and rotates the caret when `expanded` changes (new `--bs-accordion-duration` and `--bs-accordion-easing`). `bs-carousel` slides now fade and slide out and in between pages, and the dots animate (new `--bs-carousel-duration`, `--bs-carousel-easing` and `--bs-carousel-slide-distance`). `bs-dialog`, `bs-side-panel` and `bs-popover` now animate open and close (new `--bs-dialog-*`, `--bs-side-panel-duration`/`-easing` and `--bs-popover-duration`/`-easing`/`-distance`), staying mounted until the exit finishes. All of it follows the motion tokens, and reduced motion turns them off.
+- c3cd521: `bs-tooltip-trigger` now fades its tooltip in and out with a small drift away from the trigger (new `--bs-tooltip-trigger-duration`, `--bs-tooltip-trigger-easing` and `--bs-tooltip-trigger-distance`). `bs-mega-menu` has a new optional `open` prop that fades and drops the panel in and out, keeping it mounted until the exit finishes (new `--bs-mega-menu-duration`, `--bs-mega-menu-easing` and `--bs-mega-menu-distance`); the host `hidden` attribute still shows and hides it instantly, and `hidden` wins over `open`. Reduced motion turns both off.
+
+## 1.18.0
+
+### Minor Changes
+
+- 30f2ede: New `bs-app-switcher`, `bs-app-tile` and `bs-app-recent-item` components from the Figma "App switcher", "App tile" and "Recent item" designs. The switcher is the 360px launcher panel ("EG apps"): header with Manage, search field, your apps as a grid (or Recent plus All apps), search results, and a Browse all footer link, with no-results, loading (`status="loading"`), error (`status="error"`) and empty states. Set `apps` and `recent` as JS properties (each app's `icon` is a monochrome SVG URL); listen to `bsAppSelect` (cancelable; apps are buttons and never navigate), `bsManage`, `bsBrowseAll`, `bsClearSearch`, `bsRetry`, `bsRequestAccess` and `bsQueryChange`. Built from `bs-card`, `bs-input`, `bs-app-tile`, `bs-app-recent-item`, `bs-empty-state`, `bs-skeleton`, `bs-button` and `bs-divider`; the tile and row are built from `bs-icon-tile`.
+- 30f2ede: New `bs-company-switcher` component from the Figma "Company Switcher" and "Triggers" designs. A trigger (avatar, company name, org. number, chevron) opens a panel to find and switch company: a search field, Current / Recent / All companies groups, a filtered matches view, a no-results state, a switching state (`switchingId`) and "Manage Companies" / "Add companies" footer actions. Set `companies` as a JS property; listen to `bsCompanySwitch`, `bsManageCompanies`, `bsAddCompanies` and `bsOpenChange`. Built from `bs-popover`, `bs-card`, `bs-input`, `bs-list-item`, `bs-avatar`, `bs-spinner`, `bs-empty-state`, `bs-divider` and `bs-button`.
+- 30f2ede: `bs-navigation-header` and the `bs-mega-menu` in its `menu` slot work on phones. At 768px and below the header's `left` region scrolls sideways inside itself (default alignment) so wide tabs no longer widen the page, and the `menu` slot is limited to the viewport and scrolls internally; the limit is the new `--bs-navigation-header-menu-max-height` (default `calc(100dvh - 100%)`). `bs-mega-menu` now responds to its own width: below 600px it is one column with wrapping text, 44px links, a stacked footer and no shortcut hint. `bs-menu-block` gets `--bs-menu-block-white-space` (default `nowrap`). New "In navigation header (mobile)" stories.
+- 30f2ede: New `bs-mega-menu`, `bs-menu-block` and `bs-compact-menu-block` components from the Figma "Mega menu", "Menu block" and "Compact menu block" designs. The mega menu is the dropdown panel under a navigation header tab: columns of links under group headings (`type="columns"` with icons and descriptions, or `type="compact"` with plain text links), an optional featured area (the `featured` prop or slot), and a footer with recently used items and a `bs-key-caps` shortcut hint. Set `columns`, `featured` and `recent` as JS properties (each item's `icon` is a monochrome SVG URL); listen to `bsMenuSelect` (cancelable; blocks are buttons and never navigate) and `bsClose` (Escape); toggle the host's `hidden` attribute from the tab that opens it. Built from `bs-card`, `bs-menu-block`, `bs-compact-menu-block`, `bs-divider` and `bs-key-caps`; the menu block uses `bs-icon-tile` and `bs-chip-informative`.
+- 30f2ede: `bs-navigation-header` gets a `menu` slot (and a `menu` part, plus `--bs-navigation-header-menu-z-index`, aliased to `--bs-z-index-dropdown`) that anchors a panel such as `bs-mega-menu` directly under the bar, at the header's full width, overlaying the page below. The slot only positions the panel and costs no layout when empty or hidden; open/close state, closing on `bsClose` or an outside click, and restoring focus to the trigger stay with the consumer. New "In navigation header" `bs-mega-menu` stories show the composition.
+- 30f2ede: New `bs-page-header` component from the Figma "Page header" design (types List page, Record, Record with tabs and Sticky compact): the header at the top of a page's content area, with a `breadcrumb` slot, the `heading` as a real heading (`headingLevel` 1-6, default 1), an optional `back` button (`bsBack`) and `favoritable` star toggle (`favorite`, `bsFavoriteChange`, cancelable), a `status` slot, a `meta` prop or slot, page-level `actions` and a `tabs` row. `compact` is the condensed sticky state (one row, level 2 shadow, no breadcrumb or tabs; `--bs-page-header-sticky-offset` sets its `top`). It reacts to its own width: below 640px the actions wrap under the title, slotted buttons grow to 44px and the tab row scrolls inside itself. Built from `bs-icon-button` (back, favourite), `bs-divider`, and the `bs-breadcrumbs`, `bs-chip-informative`, `bs-button` and `bs-tabs` you slot in. `bs-icon-button` gains a `pressed` prop that sets `aria-pressed` for toggle buttons.
+
 ## 1.17.0
 
 ### Minor Changes

package/REFERENCE.md

@@ -19,6 +19,11 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `caret` — The trailing caret wrapper.
 - `content` — The body content wrapper.
 
+### CSS custom properties
+
+- `--bs-accordion-duration` — Length of the expand/collapse motion. Aliased to `--bs-duration-default`.
+- `--bs-accordion-easing` — Curve of the expand/collapse motion. Aliased to `--bs-easing-standard`. Expanding and collapsing animate the body's height and rotate the caret. Under `prefers-reduced-motion: reduce` the duration token is `0ms`, so the body snaps.
+
 ## `<bs-accordion-group>`
 
 ### Slots
@@ -87,6 +92,35 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-ai-thinking-line-height` — Label line height. Aliased to `--bs-line-height-body-md`.
 - `--bs-ai-thinking-cycle-duration` — Duration of one shimmer sweep. Figma's own keyframe track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
 
+## `<bs-app-recent-item>`
+
+### Slots
+
+- `(default)` — The icon (16px, `currentColor`). Overrides the `icon` prop.
+
+### Parts (`::part()`)
+
+- `container` — The button.
+- `icon` — The icon tile (`bs-icon-tile`).
+- `name` — The app name.
+- `description` — The description line.
+
+### CSS custom properties
+
+- `--bs-app-recent-item-padding-x` — Aliased to `--bs-spacing-100`.
+- `--bs-app-recent-item-padding-y` — Aliased to `--bs-spacing-100`.
+- `--bs-app-recent-item-gap` — Gap between icon and text. Aliased to `--bs-spacing-150`.
+- `--bs-app-recent-item-radius` — Aliased to `--bs-border-radius-100`.
+- `--bs-app-recent-item-bg` — Resting background. `transparent`.
+- `--bs-app-recent-item-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-app-recent-item-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-app-recent-item-bg-current` — Aliased to `--bs-surface-selected`.
+- `--bs-app-recent-item-icon-bg` — Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered, pressed or current.
+- `--bs-app-recent-item-color` — Name colour. Aliased to `--bs-text-default`.
+- `--bs-app-recent-item-color-muted` — Description colour. Aliased to `--bs-text-secondary`.
+- `--bs-app-recent-item-color-disabled` — Name, description and icon colour when disabled. Aliased to `--bs-text-on-disabled`.
+- `--bs-app-recent-item-focus-ring` — Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+
 ## `<bs-app-shell>`
 
 ### Slots
@@ -111,6 +145,65 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-app-shell-main-padding` — Padding of the main area. Aliased to `--bs-spacing-400`.
 - `--bs-app-shell-aside-width` — Width of the aside column. Defaults to `auto` (zero when empty).
 
+## `<bs-app-switcher>`
+
+### Parts (`::part()`)
+
+- `panel` — The panel surface (`bs-card`).
+- `header` — The header row.
+- `heading` — The heading.
+- `manage` — The Manage link or button.
+- `search` — The search field wrapper.
+- `group` — One group (header and its apps).
+- `group-header` — A group header.
+- `grid` — A list of tiles.
+- `list` — A list of rows.
+- `tile` — An app tile (`bs-app-tile`).
+- `row` — A recent or result row (`bs-app-recent-item`).
+- `empty` — The no-results, error or empty state (`bs-empty-state`).
+- `footer` — The footer.
+- `browse` — The "Browse all" link or button.
+
+### CSS custom properties
+
+- `--bs-app-switcher-width` — Panel width. Defaults to `360px` (Figma); capped at the viewport.
+- `--bs-app-switcher-radius` — Panel corner radius. Aliased to `--bs-border-radius-150`.
+- `--bs-app-switcher-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-app-switcher-border-color` — Panel border. Aliased to `--bs-border-default`.
+- `--bs-app-switcher-shadow` — Panel shadow (elevation level 4). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-higher`.
+- `--bs-app-switcher-padding` — Side padding of the content. Aliased to `--bs-spacing-150`.
+- `--bs-app-switcher-text-color` — Heading and links in the header. Aliased to `--bs-text-default`.
+- `--bs-app-switcher-header-color` — Group headers. Aliased to `--bs-text-secondary`.
+- `--bs-app-switcher-link-color` — Browse link. Aliased to `--bs-text-action`.
+- `--bs-app-switcher-focus-ring` — Link focus ring. Aliased to `--bs-border-neutral-focus`.
+
+## `<bs-app-tile>`
+
+### Slots
+
+- `(default)` — The icon (24px in `grid`, 16px in `compact`, `currentColor`). Overrides the `icon` prop.
+
+### Parts (`::part()`)
+
+- `container` — The button.
+- `icon` — The icon tile (`bs-icon-tile`).
+- `label` — The app name.
+
+### CSS custom properties
+
+- `--bs-app-tile-icon-size` — Size of the icon square. `44px` in `grid` (Figma) and `--bs-sizing-400` in `compact`.
+- `--bs-app-tile-padding` — Padding inside the tile. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-100` (`compact`).
+- `--bs-app-tile-gap` — Gap between icon and label. Aliased to `--bs-spacing-150` (`grid`) or `--bs-spacing-50` (`compact`).
+- `--bs-app-tile-radius` — Corner radius. Aliased to `--bs-border-radius-100`.
+- `--bs-app-tile-bg` — Resting background. `transparent`.
+- `--bs-app-tile-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-app-tile-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-app-tile-bg-current` — Aliased to `--bs-surface-selected`.
+- `--bs-app-tile-icon-bg` — Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered, pressed or current.
+- `--bs-app-tile-color` — Label colour. Aliased to `--bs-text-default`.
+- `--bs-app-tile-color-disabled` — Label and icon colour when disabled. Aliased to `--bs-text-on-disabled`.
+- `--bs-app-tile-focus-ring` — Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+
 ## `<bs-attachment>`
 
 ### Parts (`::part()`)
@@ -208,12 +301,13 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Slots
 
-- `(default)` — Default slot: the button's label content.
+- `(default)` — Default slot: the button's label content. Built from: `bs-ripple` (press feedback).
 - `icon` — Optional leading icon, rendered before the label.
 - `end-icon` — Optional trailing icon, rendered after the label.
 
 ### Parts (`::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`).
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `end-icon` — The trailing icon wrapper element.
@@ -241,7 +335,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Parts (`::part()`)
 
-- `icon` — The icon wrapper element. // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of // CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
+- `icon` — The icon wrapper element.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of // CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
 
 ## `<bs-button-skeleton>`
 
@@ -382,6 +477,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `regenerate` — The "Regenerate" icon button.
 - `menu` — The "More options" icon button.
 - `sources` — The "N sources" button (only rendered when `sourcesCount` is set).
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -438,6 +534,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### Parts (`::part()`)
 
 - `button` — The button element.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -477,7 +574,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `box` — The visual checkbox square.
 - `icon` — The check/minus icon shown inside the box when `checked` or `indeterminate`.
-- `label` — The label text wrapper. // Note: this component's CSS Custom Properties (--bs-checkbox-*) are documented via @prop comments // in bs-checkbox.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-input.tsx's equivalent note).
+- `label` — The label text wrapper.
+- `ripple` — The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-checkbox-*) are documented via @prop comments // in bs-checkbox.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-input.tsx's equivalent note).
 
 ## `<bs-chip-filter>`
 
@@ -491,6 +589,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `caret` — The dropdown caret wrapper element, when `dropdown` is set.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-chip-informative>`
 
@@ -517,6 +616,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `remove` — The trailing remove button.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-citation-preview>`
 
@@ -580,6 +680,58 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-command-palette-hint-color` — Aliased to `--bs-text-secondary`.
 - `--bs-command-palette-z-index` — Aliased to `--bs-z-index-modal`.
 
+## `<bs-compact-menu-block>`
+
+### Parts (`::part()`)
+
+- `container` — The button.
+
+### CSS custom properties
+
+- `--bs-compact-menu-block-padding` — Padding inside the block. Aliased to `--bs-spacing-100`.
+- `--bs-compact-menu-block-radius` — Corner radius. Aliased to `--bs-border-radius-100`.
+- `--bs-compact-menu-block-bg` — Resting background. `transparent`.
+- `--bs-compact-menu-block-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-compact-menu-block-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-compact-menu-block-color` — Text colour. Aliased to `--bs-text-default`.
+- `--bs-compact-menu-block-focus-ring` — Focus ring colour. Aliased to `--bs-border-info`.
+
+## `<bs-company-switcher>`
+
+### Parts (`::part()`)
+
+- `trigger` — The trigger button.
+- `avatar` — The trigger's `bs-avatar`.
+- `name` — The company name in the trigger.
+- `subtitle` — The org. number (or "Switching…") line in the trigger.
+- `panel` — The panel surface (`bs-card`).
+- `search` — The search field wrapper (combobox).
+- `list` — The listbox.
+- `group` — One group (header and rows).
+- `group-header` — A group header.
+- `row` — A company row (`bs-list-item`).
+- `empty` — The no-results state (`bs-empty-state`).
+- `footer` — The footer actions.
+
+### CSS custom properties
+
+- `--bs-company-switcher-width` — Trigger width. Defaults to `260px` (Figma); capped at 100%.
+- `--bs-company-switcher-panel-width` — Panel width. Defaults to `360px` (Figma); capped at the viewport.
+- `--bs-company-switcher-radius` — Trigger and panel corner radius. Aliased to `--bs-border-radius-100`.
+- `--bs-company-switcher-trigger-bg` — Trigger resting background. `transparent`.
+- `--bs-company-switcher-trigger-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-company-switcher-trigger-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-company-switcher-trigger-bg-open` — Aliased to `--bs-surface-selected`.
+- `--bs-company-switcher-focus-ring` — Trigger focus outline. Aliased to `--bs-border-neutral-focus`.
+- `--bs-company-switcher-panel-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-company-switcher-panel-border-color` — Panel border. Aliased to `--bs-border-default`.
+- `--bs-company-switcher-shadow` — Panel shadow. Aliased to `--bs-shadow-md`.
+- `--bs-company-switcher-max-height` — Maximum height of the scrolling list. Defaults to `320px`.
+- `--bs-company-switcher-text-color` — Names. Aliased to `--bs-text-default`.
+- `--bs-company-switcher-muted-color` — Org. numbers. Aliased to `--bs-text-secondary`.
+- `--bs-company-switcher-header-color` — Group headers. Aliased to `--bs-text-muted`.
+- `--bs-company-switcher-z-index` — Panel stacking. Aliased to `--bs-z-index-popover`.
+
 ## `<bs-composer>`
 
 ### Slots
@@ -737,7 +889,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `header` — The header row (heading + close button, when the close button isn't floating).
 - `close` — The close button (inline in the header, or floating -- see the class doc above).
 - `body` — The body content wrapper.
-- `footer` — The footer wrapper (only visible when the footer slot has content).
+- `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.
 
 ## `<bs-divider>`
 
@@ -1018,6 +1170,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `description` — The description line.
 - `support-text` — The support text line.
 - `trailing` — Wrapper around the trailing slot / caret.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1048,6 +1201,44 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `logo` — The rendered SVG/image's wrapper. // Note: this component's CSS Custom Properties are documented via @prop comments in bs-logo.css, // not here -- see bs-navigation-header.css's identical note.
 
+## `<bs-mega-menu>`
+
+### Slots
+
+- `featured` — The featured area on the right. Overrides the `featured` prop.
+- `footer-start` — Left side of the footer. Overrides the recently used line.
+- `footer-end` — Right side of the footer. Overrides the shortcut hint.
+
+### Parts (`::part()`)
+
+- `panel` — The panel surface (`bs-card`).
+- `columns` — The grid of columns and the featured area.
+- `column` — One column (group).
+- `heading` — A column heading.
+- `list` — A column's list of links.
+- `block` — A link (`bs-menu-block` or `bs-compact-menu-block`).
+- `featured` — The featured area.
+- `featured-title` — The featured title.
+- `featured-description` — The featured description.
+- `footer` — The footer.
+- `shortcut` — The shortcut hint's key caps (`bs-key-caps`).
+
+### CSS custom properties
+
+- `--bs-mega-menu-width` — Panel width. Defaults to `1100px` (Figma); capped at the viewport.
+- `--bs-mega-menu-radius` — Panel corner radius. Aliased to `--bs-border-radius-150`.
+- `--bs-mega-menu-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-mega-menu-border-color` — Panel border. Aliased to `--bs-border-default`.
+- `--bs-mega-menu-shadow` — Panel shadow (elevation level 3). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-high`.
+- `--bs-mega-menu-padding` — Padding around the columns. Aliased to `--bs-spacing-300` and `--bs-spacing-350`.
+- `--bs-mega-menu-gap` — Gap between columns. Aliased to `--bs-spacing-300`.
+- `--bs-mega-menu-heading-color` — Column headings. Aliased to `--bs-text-muted`.
+- `--bs-mega-menu-text-color` — Featured title. Aliased to `--bs-text-default`.
+- `--bs-mega-menu-muted-color` — Featured description and footer text. Aliased to `--bs-text-secondary`.
+- `--bs-mega-menu-duration` — Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+- `--bs-mega-menu-easing` — Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+- `--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.
+
 ## `<bs-menu>`
 
 ### Slots
@@ -1066,6 +1257,34 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-menu-gap` — Gap between slotted items. Aliased to `--bs-spacing-50`.
 - `--bs-menu-shadow` — Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
 
+## `<bs-menu-block>`
+
+### Slots
+
+- `(default)` — The icon (16px, `currentColor`). Overrides the `icon` prop.
+
+### Parts (`::part()`)
+
+- `container` — The button.
+- `icon` — The icon tile (`bs-icon-tile`).
+- `name` — The title.
+- `badge` — The badge chip (`bs-chip-informative`).
+- `description` — The description.
+
+### CSS custom properties
+
+- `--bs-menu-block-padding` — Padding inside the block. Aliased to `--bs-spacing-150`.
+- `--bs-menu-block-gap` — Gap between icon and text. Aliased to `--bs-spacing-150`.
+- `--bs-menu-block-radius` — Corner radius. Aliased to `--bs-border-radius-100`.
+- `--bs-menu-block-bg` — Resting background. `transparent`.
+- `--bs-menu-block-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-menu-block-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-menu-block-icon-bg` — Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered or pressed.
+- `--bs-menu-block-color` — Title colour. Aliased to `--bs-text-default`.
+- `--bs-menu-block-color-muted` — Description colour. Aliased to `--bs-text-secondary`.
+- `--bs-menu-block-focus-ring` — Focus ring colour. Aliased to `--bs-border-info`.
+- `--bs-menu-block-white-space` — `white-space` of the title and description. `nowrap` (single line, ellipsis); set `normal` to let them wrap.
+
 ## `<bs-menu-item>`
 
 ### Slots
@@ -1078,6 +1297,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `item` — The button element.
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1169,6 +1389,46 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `primary` — The main button (`completion`).
 - `secondary` — The Hide checklist button (`completion`).
 
+## `<bs-page-header>`
+
+### Slots
+
+- `breadcrumb` — A `bs-breadcrumbs` trail, shown above the title. Not shown when `compact`.
+- `status` — A status chip next to the title, e.g. `<bs-chip-informative color="error" size="sm">Overdue</bs-chip-informative>`.
+- `meta` — The line under the title (inline after it when `compact`). Overrides the `meta` prop. Plain text.
+- `actions` — The page-level actions on the right, e.g. `bs-button`s and an icon-only "more" `bs-icon-button`.
+- `tabs` — A `bs-tabs` row under the meta line. Not shown when `compact`.
+
+### Parts (`::part()`)
+
+- `container` — The root element.
+- `breadcrumb` — The breadcrumb area.
+- `row` — The row holding the title block and the actions.
+- `main` — The title block (back button, title row and meta).
+- `back` — The back `bs-icon-button`.
+- `title` — The row holding the heading, status and favourite button.
+- `heading` — The heading element.
+- `status` — The status area.
+- `favorite` — The favourite `bs-icon-button`.
+- `meta` — The meta line.
+- `actions` — The actions area.
+- `tabs` — The tab row (scrolls sideways when narrow).
+- `divider` — The `bs-divider` under the tabs.
+
+### CSS custom properties
+
+- `--bs-page-header-bg` — Background. Aliased to `--bs-surface-base`.
+- `--bs-page-header-padding-x` — Left and right padding. Aliased to `--bs-spacing-200`.
+- `--bs-page-header-padding-y` — Top and bottom padding. Aliased to `--bs-spacing-300`.
+- `--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`.
+- `--bs-page-header-title-gap` — Gap between the heading, status and favourite button. Aliased to `--bs-spacing-150`.
+- `--bs-page-header-actions-gap` — Gap between the actions. Aliased to `--bs-spacing-100`.
+- `--bs-page-header-text-color` — Heading. Aliased to `--bs-text-default`.
+- `--bs-page-header-meta-color` — Meta line. Aliased to `--bs-text-secondary`.
+- `--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`.
+- `--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).
+- `--bs-page-header-z-index` — Stacking order of the compact header. Aliased to `--bs-z-index-sticky`.
+
 ## `<bs-pagination>`
 
 ### Parts (`::part()`)
@@ -1180,6 +1440,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `page` — Each page-number button.
 - `current` — The current page's button (in addition to `page`).
 - `ellipsis` — Each collapsed-range indicator.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-popover>`
 
@@ -1201,6 +1462,26 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-popover-offset` — Gap between trigger and popup. Aliased to `--bs-spacing-100`.
 - `--bs-popover-min-width` — Minimum popup width. Aliased to `--bs-scale-1600`.
 - `--bs-popover-z-index` — Popup stacking order. Aliased to `--bs-z-index-popover`.
+- `--bs-popover-duration` — Length of the open/close motion. Aliased to `--bs-duration-fast`.
+- `--bs-popover-easing` — Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+- `--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.
+
+## `<bs-presence>`
+
+### Slots
+
+- `(default)` — The content to show and hide.
+
+### Parts (`::part()`)
+
+- `content` — The element that transitions. Style it with `::part(content)`.
+
+### CSS custom properties
+
+- `--bs-presence-duration` — Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+- `--bs-presence-easing` — Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+- `--bs-presence-distance` — Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+- `--bs-presence-scale` — Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
 
 ## `<bs-product-tour>`
 
@@ -1279,7 +1560,21 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `circle` — The visual radio ring.
 - `dot` — The center fill shown inside the ring when `checked`.
-- `label` — The label text wrapper. // Note: this component's CSS Custom Properties (--bs-radio-*) are documented via @prop comments // in bs-radio.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-checkbox.tsx's equivalent note).
+- `label` — The label text wrapper.
+- `ripple` — The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-radio-*) are documented via @prop comments // in bs-radio.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-checkbox.tsx's equivalent note).
+
+## `<bs-ripple>`
+
+### Parts (`::part()`)
+
+- `surface` — The clipping layer the ripple circles are drawn in.
+
+### CSS custom properties
+
+- `--bs-ripple-color` — Ripple colour. `currentColor` by default, so it follows the parent's text colour and works on every variant.
+- `--bs-ripple-opacity` — Starting opacity of the ripple. No opacity token fits, so the default is `0.24`.
+- `--bs-ripple-duration` — Length of the ripple. Aliased to `--bs-duration-slower`.
+- `--bs-ripple-easing` — Curve of the ripple. Aliased to `--bs-easing-decelerate`.
 
 ## `<bs-search-item>`
 
@@ -1298,6 +1593,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `label` — The primary line.
 - `description` — The description line.
 - `trailing` — The trailing text wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1386,6 +1682,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-side-panel-overlay-bg` — Backdrop color. Aliased to `--bs-surface-overlay`.
 - `--bs-side-panel-color` — Text color. Aliased to `--bs-text-default`.
 - `--bs-side-panel-z-index` — Stacking order. Aliased to `--bs-z-index-modal`.
+- `--bs-side-panel-duration` — Length of the slide in/out. Aliased to `--bs-duration-slow`.
+- `--bs-side-panel-easing` — Curve of the slide in/out. Aliased to `--bs-easing-standard`.
 
 ## `<bs-skeleton>`
 
@@ -1443,6 +1741,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `source` — The source system name.
 - `version` — The version label.
 - `arrow` — The trailing "open" arrow icon.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1549,7 +1848,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `track` — The visual pill-shaped track.
 - `knob` — The sliding circular knob.
-- `label` — The label text wrapper. // Note: this component's CSS Custom Properties are documented via @prop comments in // bs-switch.css, not here.
+- `label` — The label text wrapper.
+- `ripple` — The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties are documented via @prop comments in // bs-switch.css, not here.
 
 ## `<bs-inline-tab>`
 
@@ -1562,7 +1862,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `tab` — The button element.
 - `icon` — The icon wrapper.
-- `label` — The label wrapper. // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop // comments in bs-inline-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS // file comments, not the class-level JSDoc (see bs-tab.tsx's equivalent note).
+- `label` — The label wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop // comments in bs-inline-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS // file comments, not the class-level JSDoc (see bs-tab.tsx's equivalent note).
 
 ## `<bs-tab>`
 
@@ -1578,7 +1879,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
 - `badge` — The badge wrapper.
-- `indicator` — The selection/hover underline indicator. // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in // bs-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not // the class-level JSDoc (see bs-checkbox.tsx's/bs-radio.tsx's equivalent note).
+- `indicator` — The selection/hover underline indicator.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in // bs-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not // the class-level JSDoc (see bs-checkbox.tsx's/bs-radio.tsx's equivalent note).
 
 ## `<bs-tabs>`
 
@@ -1659,6 +1961,9 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `--bs-tooltip-trigger-offset` — Gap between trigger and tooltip. Aliased to `--bs-spacing-100`.
 - `--bs-tooltip-trigger-z-index` — Stacking order. Aliased to `--bs-z-index-popover`.
+- `--bs-tooltip-trigger-duration` — Length of the show/hide motion. Aliased to `--bs-duration-fast`.
+- `--bs-tooltip-trigger-easing` — Curve of the show/hide motion. Aliased to `--bs-easing-standard`.
+- `--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.
 
 ## `<bs-tree>`
 
@@ -1685,6 +1990,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
 - `group` — The `role="group"` wrapper around the child items (while expanded).
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-whats-new>`
 
@@ -1769,10 +2075,12 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `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.
 - `right` — Menu/action content pushed to the bar's far right.
+- `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.
 
 ### Parts (`::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.
 - `left` — The wrapper around the `left` slot.
 - `right` — The wrapper around the `right` slot.
+- `menu` — The wrapper around the `menu` slot (absolutely positioned under the bar).
 - `skip-link` — The "Skip to main content" link (only rendered when `skipToContentHref` is set). // Note: this component's CSS Custom Properties are documented via @prop comments in // bs-navigation-header.css, not here.