@brandsync/wc 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @brandsync/wc
 
+## 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
+
+- c46620e: New layout primitives: `bs-stack` (flex row/column with a spacing-token `gap`, alignment, wrapping and optional dividers between children), `bs-grid` (`columns` count or template, `gap` / `rowGap` / `columnGap`, and responsive auto-fit columns via `minColumnWidth`), `bs-container` (centred max-width wrapper sized from the breakpoint tokens, `fluid` for none), `bs-divider` (horizontal or vertical separator, `subtle` / `default`, insets, decorative mode) and `bs-app-shell` (page frame with `header`, `navigation`, content and `aside` slots that composes `bs-navigation-header` and `bs-navigation-drawer`).
+
 ## 1.14.0
 
 ### Minor Changes

package/REFERENCE.md

@@ -87,6 +87,30 @@ 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-shell>`
+
+### Slots
+
+- `header` — A `bs-navigation-header`, spanning the full width.
+- `navigation` — A `bs-navigation-drawer`.
+- `(default)` — The main content, rendered inside `<main>`; scrolls independently.
+- `aside` — Optional right column.
+
+### Parts (`::part()`)
+
+- `container` — The grid element.
+- `header` — Wrapper around the header slot.
+- `navigation` — Wrapper around the navigation slot.
+- `main` — The `<main>` element.
+- `aside` — Wrapper around the aside slot.
+
+### CSS custom properties
+
+- `--bs-app-shell-bg` — Shell background. Aliased to `--bs-surface-base`.
+- `--bs-app-shell-color` — Text colour. Aliased to `--bs-text-default`.
+- `--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-attachment>`
 
 ### Parts (`::part()`)
@@ -592,6 +616,17 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-composer-status-banner-warning-action-bg-hover` — Aliased to `--bs-color-warning-hover`.
 - `--bs-composer-status-banner-close-hover-bg` — Close button hover background (same across every `type`). Aliased to `--bs-color-neutral-container-hover`.
 
+## `<bs-container>`
+
+### Slots
+
+- `(default)` — Content to constrain.
+
+### CSS custom properties
+
+- `--bs-container-max-width` — Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+- `--bs-container-padding` — Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+
 ## `<bs-cookie-consent>`
 
 ### Slots
@@ -664,6 +699,18 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `body` — The body content wrapper.
 - `footer` — The footer wrapper (only visible when the footer slot has content).
 
+## `<bs-divider>`
+
+### Parts (`::part()`)
+
+- `line` — The visible line element.
+
+### CSS custom properties
+
+- `--bs-divider-thickness` — Line thickness. Defaults to `1px`.
+- `--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-error-page>`
 
 ### Slots
@@ -712,6 +759,22 @@ 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-grid>`
+
+### Slots
+
+- `(default)` — The grid items.
+
+### Parts (`::part()`)
+
+- `container` — The grid element that holds the slotted items.
+
+### CSS custom properties
+
+- `--bs-grid-gap` — Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+- `--bs-grid-row-gap` — Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+- `--bs-grid-column-gap` — Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+
 ## `<bs-icon-tile>`
 
 ### Slots
@@ -747,6 +810,62 @@ 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-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()`)
@@ -1155,6 +1274,20 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-split-pane-border` — Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
 - `--bs-split-pane-focus-ring` — Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
 
+## `<bs-stack>`
+
+### Slots
+
+- `(default)` — The items to arrange.
+
+### Parts (`::part()`)
+
+- `divider` — Each generated `bs-divider` (only with `divider`).
+
+### CSS custom properties
+
+- `--bs-stack-gap` — Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+
 ## `<bs-stepper>`
 
 ### Slots
@@ -1296,6 +1429,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