@brandsync/wc 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @brandsync/wc
 
+## 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

@@ -87,6 +87,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 +140,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()`)
@@ -580,6 +668,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
@@ -1048,6 +1188,41 @@ 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-menu>`
 
 ### Slots
@@ -1066,6 +1241,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
@@ -1169,6 +1372,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()`)
@@ -1769,10 +2012,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.