@brandsync/wc 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @brandsync/wc
 
+## 1.17.0
+
+### Minor Changes
+
+- bd9e559: New `bs-command-palette` component from the Figma "Command Palette" design: a Ctrl+K modal (native `dialog`) with a search field, slotted recent, suggested, commands, navigation and records sections made of `bs-search-item`s, a commands-only mode (value starting with `>`), no-results and loading views, an optional scope chip, an optional `hotkey`, and a keyboard-hint footer.
+- ccd592e: New `bs-empty-state`, `bs-search-item` and `bs-global-search` components from the Figma "Empty state", "Search results" and "Global Search" designs. `bs-empty-state` is a centered icon tile, heading, description and optional action. `bs-search-item` is a suggestion or result row. `bs-global-search` is a search combobox with a dropdown panel: slot-driven recent, jump-to, top-match and search-in sections, empty and error views, a keyboard-hint footer, full arrow-key navigation and combobox ARIA.
+- 10998b3: New `bs-key` and `bs-key-caps` components from the Figma "Base keys" and "Key caps" designs. `bs-key` is a single keyboard keycap (`<kbd>`) with a `label` (or default slot) or an `icon` slot. `bs-key-caps` is a one-to-four-key shortcut joined by "+" separators: pass `keys="Ctrl+K"` (or an array for a literal plus key) or slot your own `bs-key` elements, with a `disabled` state that dims the shortcut to 38%.
+- 30ab50a: New `bs-shortcut-row` and `bs-keyboard-shortcuts` components from the Figma "Shortcut row" and "Keyboard shortcuts" designs. `bs-shortcut-row` is an action label with its `bs-key-caps`. `bs-keyboard-shortcuts` is a searchable two-column shortcut reference panel with a single-key switch, filtering, a no-results state and a footer hint.
+
+## 1.16.0
+
+### Minor Changes
+
+- b31434a: New `bs-list` and `bs-list-item` components from the Figma "List" design. `bs-list-item` is the row: `label`, `description` and `supportText` lines, a `leading` slot (avatar, icon or image), an optional trailing caret (`showArrow`) or `trailing` slot, and `selected` / `disabled` states with hover, pressed and focus styling. `bs-list` is the container: a plain list by default, or a single-select listbox with `selectable`, keyboard navigation (arrows, Home, End, Enter, Space), a two-way-synced `value`, a `bsChange` event and optional `dividers`.
+- b31434a: New `bs-tree` and `bs-tree-item` components from the Figma "Tree" design. `bs-tree-item` is a 48px row with a caret (parents), a folder or file icon (or the `icon` slot), the `expanded` / `selected` / `disabled` states, hover, pressed and keyboard-focus styling, and nested child items that indent 40px per level (computed from nesting depth). `bs-tree` is the `role="tree"` container with single selection, a two-way-synced `value`, a `bsChange` event, `expandAll()` / `collapseAll()`, and the WAI-ARIA tree keyboard model (arrows, Home, End, Enter, Space, `*`, RTL-aware).
+
 ## 1.15.0
 
 ### Minor Changes

package/REFERENCE.md

@@ -540,6 +540,46 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-citation-preview-snippet-radius` — Snippet corner radius. Aliased to `--bs-border-radius-100`.
 - `--bs-citation-preview-page-color` — Page label color. Aliased to `--bs-text-secondary`.
 
+## `<bs-command-palette>`
+
+### Slots
+
+- `recent` — `bs-search-item`s for the "Recent" section.
+- `suggested` — `bs-search-item`s for the "Suggested" section.
+- `commands` — `bs-search-item`s for the "Commands" section.
+- `navigation` — `bs-search-item`s for the "Navigation" section.
+- `records` — `bs-search-item`s for the "Records" section.
+- `try-instead` — `bs-search-item`s under "Try instead" in the no-results view (status `empty`).
+
+### Parts (`::part()`)
+
+- `dialog` — The native `<dialog>`.
+- `panel` — The palette surface.
+- `search` — The search bar row.
+- `input` — The `bs-input`.
+- `results` — The scrolling results area.
+- `section` — One section (header and items).
+- `section-header` — A section header.
+- `empty` — The no-results message block.
+- `footer` — The footer row.
+- `hint` — One keyboard hint (keycaps and text).
+
+### CSS custom properties
+
+- `--bs-command-palette-width` — Panel width. Defaults to `640px` (Figma); capped to the viewport.
+- `--bs-command-palette-top` — Distance from the top of the viewport. Defaults to `12vh`.
+- `--bs-command-palette-max-height` — Max height of the results area. Defaults to `60vh`.
+- `--bs-command-palette-radius` — Aliased to `--bs-border-radius-150`.
+- `--bs-command-palette-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-command-palette-shadow` — Figma elevation level 4: `0 8px 16px` in `--bs-elevation-higher` (stronger in dark mode).
+- `--bs-command-palette-overlay` — Scrim colour. Aliased to `--bs-surface-overlay`.
+- `--bs-command-palette-footer-bg` — Aliased to `--bs-surface-container`.
+- `--bs-command-palette-divider-color` — Aliased to `--bs-border-default`.
+- `--bs-command-palette-header-border-color` — Aliased to `--bs-border-neutral-container`.
+- `--bs-command-palette-header-color` — Aliased to `--bs-text-muted`.
+- `--bs-command-palette-hint-color` — Aliased to `--bs-text-secondary`.
+- `--bs-command-palette-z-index` — Aliased to `--bs-z-index-modal`.
+
 ## `<bs-composer>`
 
 ### Slots
@@ -711,6 +751,30 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-divider-color` — Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
 - `--bs-divider-inset` — Indent applied by `inset`. Aliased to `--bs-spacing-300`.
 
+## `<bs-empty-state>`
+
+### Slots
+
+- `icon` — The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
+- `(default)` — The description (overrides the `description` prop).
+- `action` — An optional action, e.g. `<bs-button variant="outlined">`.
+
+### Parts (`::part()`)
+
+- `container` — The centered column.
+- `icon` — The icon tile (`bs-icon-tile`).
+- `heading` — The heading element.
+- `description` — The description paragraph.
+- `action` — The action wrapper (only rendered while the `action` slot is filled).
+
+### CSS custom properties
+
+- `--bs-empty-state-padding-y` — Vertical padding. Aliased to `--bs-spacing-700` (56px).
+- `--bs-empty-state-padding-x` — Horizontal padding. Aliased to `--bs-spacing-300` (24px).
+- `--bs-empty-state-gap` — Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+- `--bs-empty-state-heading-color` — Aliased to `--bs-text-default`.
+- `--bs-empty-state-description-color` — Aliased to `--bs-text-secondary`.
+
 ## `<bs-error-page>`
 
 ### Slots
@@ -759,6 +823,43 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `status` — The success / error message line.
 - `action` — The cancel / remove button. // Note: this component's CSS Custom Properties (--bs-file-upload-item-*) are documented via @prop // comments in bs-file-upload-item.css, not here (see bs-input.tsx's equivalent note).
 
+## `<bs-global-search>`
+
+### Slots
+
+- `recent` — `bs-search-item`s for the "Recent searches" section (status `default`).
+- `jump-to` — `bs-search-item`s for the "Jump to" section (status `default`).
+- `top-matches` — `bs-search-item`s for the "Top matches" section (status `results`).
+- `search-in` — `bs-search-item`s for the "Search in" section (status `results`).
+- `empty` — Replaces the whole empty-state block (status `empty`).
+- `error` — Replaces the whole error-state block (status `error`).
+
+### Parts (`::part()`)
+
+- `field` — The combobox wrapper around the search field.
+- `panel` — The dropdown panel.
+- `section` — One section (header and items).
+- `section-header` — A section header.
+- `empty` — The built-in empty or error state (`bs-empty-state`).
+- `footer` — The footer row.
+- `hint` — One keyboard hint (keycaps and text).
+- `clear-recent` — The "Clear recent" button wrapper.
+- `see-all` — The "See all results" button wrapper.
+
+### CSS custom properties
+
+- `--bs-global-search-width` — Field and panel width. Defaults to `480px` (Figma); capped at 100%.
+- `--bs-global-search-panel-radius` — Aliased to `--bs-border-radius-100`.
+- `--bs-global-search-panel-padding` — Aliased to `--bs-spacing-100`.
+- `--bs-global-search-gap` — Gap between sections, and between the field and the panel. Aliased to `--bs-spacing-100`.
+- `--bs-global-search-panel-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-global-search-shadow` — Panel shadow: Figma elevation level 3 (`0 4px 8px` in `--bs-elevation-high`, 10% black in light mode and 30% in dark mode).
+- `--bs-global-search-z-index` — Panel stacking. Aliased to `--bs-z-index-dropdown`.
+- `--bs-global-search-divider-color` — Footer divider. Aliased to `--bs-border-default`.
+- `--bs-global-search-header-border-color` — Section header underline. Aliased to `--bs-border-neutral-container`.
+- `--bs-global-search-header-color` — Section header text. Aliased to `--bs-text-muted`.
+- `--bs-global-search-hint-color` — Footer hint text. Aliased to `--bs-text-secondary`.
+
 ## `<bs-grid>`
 
 ### Slots
@@ -810,6 +911,137 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `error` — The error message element.
 - `error-icon` — The warning icon shown before the error message. // Note: this component's CSS Custom Properties (--bs-input-*) are documented via @prop comments // in bs-input.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments (see stencil.js's parseStyleDocs/parseCssComment), not the class-level JSDoc.
 
+## `<bs-key>`
+
+### Slots
+
+- `(default)` — The key's label text (overrides the `label` prop), e.g. `Ctrl`.
+- `icon` — An icon shown instead of the label (16px), e.g. a return arrow.
+
+### Parts (`::part()`)
+
+- `container` — The `<kbd>` cap.
+- `label` — The label text wrapper (not rendered while the `icon` slot is filled).
+- `icon` — The icon wrapper (only rendered while the `icon` slot is filled).
+
+### CSS custom properties
+
+- `--bs-key-bg` — Cap background. Aliased to `--bs-surface-base`.
+- `--bs-key-border-color` — Cap border colour. Aliased to `--bs-border-default`.
+- `--bs-key-radius` — Cap corner radius. Aliased to `--bs-border-radius-50`.
+- `--bs-key-padding-x` — Horizontal padding. Aliased to `--bs-spacing-75`.
+- `--bs-key-padding-y` — Vertical padding. Aliased to `--bs-spacing-50`.
+- `--bs-key-min-width` — Smallest cap width, so single characters keep a keycap shape. Defaults to `25px` (Figma).
+- `--bs-key-color` — Label colour. Aliased to `--bs-text-secondary`.
+- `--bs-key-font-size` — Label size. Aliased to `--bs-font-size-xs` (12px).
+- `--bs-key-icon-size` — Icon size. Defaults to `16px` (Figma).
+
+## `<bs-key-caps>`
+
+### Slots
+
+- `(default)` — `bs-key` elements. A "+" separator is drawn before every key except the first.
+
+### Parts (`::part()`)
+
+- `container` — The group wrapper.
+
+### CSS custom properties
+
+- `--bs-key-caps-gap` — Gap between keys and separators. Aliased to `--bs-spacing-100`.
+- `--bs-key-caps-separator-color` — Colour of the "+" separators. Aliased to `--bs-text-muted`.
+- `--bs-key-caps-disabled-opacity` — Opacity of the whole shortcut while `disabled`. Defaults to `0.38` (Figma).
+
+## `<bs-keyboard-shortcuts>`
+
+### Slots
+
+- `heading` — Replaces the heading text.
+- `footer` — Replaces the footer hint.
+
+### Parts (`::part()`)
+
+- `container` — The panel surface (a `bs-card`).
+- `head` — The heading row.
+- `heading` — The heading element.
+- `close` — The close button.
+- `search` — The search field.
+- `switch` — The single-key switch row.
+- `groups` — The columns wrapper.
+- `group` — One group.
+- `group-title` — A group title.
+- `row` — A shortcut row (`bs-shortcut-row`).
+- `empty` — The "no results" line.
+- `footer` — The footer hint.
+
+### CSS custom properties
+
+- `--bs-keyboard-shortcuts-width` — Panel width and min-width. Defaults to `720px` (Figma).
+- `--bs-keyboard-shortcuts-bg` — Panel background. Aliased to `--bs-surface-base`.
+- `--bs-keyboard-shortcuts-radius` — Aliased to `--bs-border-radius-150`.
+- `--bs-keyboard-shortcuts-padding` — Aliased to `--bs-spacing-200`.
+- `--bs-keyboard-shortcuts-gap` — Gap between sections. Aliased to `--bs-spacing-200`.
+- `--bs-keyboard-shortcuts-shadow` — Figma elevation level 4 (`0 8px 8px` in `--bs-elevation-higher`, 12% black in light mode and 25% in dark mode).
+- `--bs-keyboard-shortcuts-column-gap` — Gap between the two columns. Aliased to `--bs-spacing-600`.
+- `--bs-keyboard-shortcuts-color` — Main text colour. Aliased to `--bs-text-default`.
+- `--bs-keyboard-shortcuts-color-secondary` — Titles, captions, footer. Aliased to `--bs-text-secondary`.
+
+## `<bs-list>`
+
+### Slots
+
+- `(default)` — The `bs-list-item` rows.
+
+### Parts (`::part()`)
+
+- `list` — The list container.
+
+### CSS custom properties
+
+- `--bs-list-gap` — Gap between rows. Defaults to `0`.
+- `--bs-list-divider-color` — Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+
+## `<bs-list-item>`
+
+### Slots
+
+- `leading` — Leading media: a `bs-avatar size="lg"` (64px), a 32px icon, or a 72x56 `<img>`.
+- `trailing` — Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
+- `(default)` — Rich content that replaces `label`, `description` and `supportText` entirely.
+
+### Parts (`::part()`)
+
+- `container` — The row.
+- `leading` — Wrapper around the leading slot.
+- `content` — The text column.
+- `label` — The label line.
+- `description` — The description line.
+- `support-text` — The support text line.
+- `trailing` — Wrapper around the trailing slot / caret.
+
+### CSS custom properties
+
+- `--bs-list-item-min-height` — Minimum row height. Aliased to `--bs-spacing-1000`.
+- `--bs-list-item-padding-y` — Aliased to `--bs-spacing-150`.
+- `--bs-list-item-padding-x` — Aliased to `--bs-spacing-200`.
+- `--bs-list-item-gap` — Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+- `--bs-list-item-content-gap` — Gap between text lines. Aliased to `--bs-spacing-25`.
+- `--bs-list-item-radius` — Aliased to `--bs-border-radius-100`.
+- `--bs-list-item-bg` — Enabled background. `transparent`.
+- `--bs-list-item-bg-hover` — Aliased to `--bs-surface-hover`.
+- `--bs-list-item-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-list-item-bg-focus` — Aliased to `--bs-surface-focus`.
+- `--bs-list-item-bg-selected` — Aliased to `--bs-surface-selected`.
+- `--bs-list-item-bg-selected-hover` — Aliased to `--bs-surface-selected-hover`.
+- `--bs-list-item-bg-selected-pressed` — Aliased to `--bs-surface-selected-pressed`.
+- `--bs-list-item-bg-selected-focus` — Aliased to `--bs-surface-selected-focus`.
+- `--bs-list-item-bg-disabled` — Aliased to `--bs-surface-action-disabled`.
+- `--bs-list-item-color` — Text colour. Aliased to `--bs-text-default`.
+- `--bs-list-item-color-disabled` — Aliased to `--bs-text-on-disabled`.
+- `--bs-list-item-focus-ring` — Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+- `--bs-list-item-image-width` — Leading image width. 72px.
+- `--bs-list-item-image-height` — Leading image height. 56px.
+
 ## `<bs-logo>`
 
 ### Parts (`::part()`)
@@ -1049,6 +1281,39 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `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).
 
+## `<bs-search-item>`
+
+### Slots
+
+- `icon` — A leading glyph (24px, `currentColor`).
+- `(default)` — The primary text. Wrap the matched part in `<strong>` or `<b>` to show it semibold.
+- `description` — An optional second line.
+- `trailing` — Trailing text (overrides the `trailing` prop).
+
+### Parts (`::part()`)
+
+- `container` — The row.
+- `icon` — The icon wrapper.
+- `content` — The text column.
+- `label` — The primary line.
+- `description` — The description line.
+- `trailing` — The trailing text wrapper.
+
+### CSS custom properties
+
+- `--bs-search-item-min-height` — Aliased to `--bs-spacing-600` (48px).
+- `--bs-search-item-padding-y` — Aliased to `--bs-spacing-100`.
+- `--bs-search-item-padding-x` — Aliased to `--bs-spacing-150`.
+- `--bs-search-item-gap` — Aliased to `--bs-spacing-100`.
+- `--bs-search-item-radius` — Aliased to `--bs-border-radius-100`.
+- `--bs-search-item-bg` — Resting background. `transparent`.
+- `--bs-search-item-bg-active` — Active (highlighted) and hover background. Aliased to `--bs-surface-hover`.
+- `--bs-search-item-bg-pressed` — Aliased to `--bs-surface-pressed`.
+- `--bs-search-item-color` — Primary text. Aliased to `--bs-text-default`.
+- `--bs-search-item-color-muted` — Description and trailing text. Aliased to `--bs-text-muted`.
+- `--bs-search-item-color-disabled` — Aliased to `--bs-text-on-disabled`.
+- `--bs-search-item-icon-color` — Aliased to `--bs-icon-default`.
+
 ## `<bs-session-timeout>`
 
 ### Slots
@@ -1073,6 +1338,28 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `secondary` — The secondary button.
 - `cancel` — The Cancel button (`confirm-identity`).
 
+## `<bs-shortcut-row>`
+
+### Slots
+
+- `(default)` — The action label (overrides the `action` prop).
+- `keys` — Your own `bs-key-caps` (or custom keys), replacing the generated one.
+
+### Parts (`::part()`)
+
+- `container` — The row.
+- `action` — The action label wrapper.
+- `keys` — The wrapper around the key caps.
+
+### CSS custom properties
+
+- `--bs-shortcut-row-height` — Row height. Defaults to `36px` (Figma).
+- `--bs-shortcut-row-padding-x` — Horizontal padding. Aliased to `--bs-spacing-100`.
+- `--bs-shortcut-row-gap` — Gap between label and keys. Aliased to `--bs-spacing-100`.
+- `--bs-shortcut-row-radius` — Corner radius. Aliased to `--bs-border-radius-75`.
+- `--bs-shortcut-row-color` — Label colour. Aliased to `--bs-text-default`.
+- `--bs-shortcut-row-color-disabled` — Label colour while `disabled`. Aliased to `--bs-text-on-disabled`.
+
 ## `<bs-side-panel>`
 
 ### Slots
@@ -1373,6 +1660,32 @@ 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-tree>`
+
+### Slots
+
+- `(default)` — Default slot: top-level `bs-tree-item` elements (nested ones go inside their parent item).
+
+### Parts (`::part()`)
+
+- `container` — The `role="tree"` wrapper.
+
+## `<bs-tree-item>`
+
+### Slots
+
+- `(default)` — Default slot: child `bs-tree-item` elements (the subtree). Only rendered, inside a `role="group"` wrapper, while the item is expanded; collapsed children are not accessible.
+- `label` — Overrides the `label` text.
+- `icon` — Overrides the default folder / file icon. Only used when `showIcon` is `true`.
+
+### Parts (`::part()`)
+
+- `container` — The highlighted row pill (carries the hover / selected / focus states).
+- `caret` — The expand/collapse caret (parents only).
+- `icon` — The icon wrapper.
+- `label` — The label wrapper.
+- `group` — The `role="group"` wrapper around the child items (while expanded).
+
 ## `<bs-whats-new>`
 
 ### Slots