@brandsync/wc 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

package/REFERENCE.md

@@ -810,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()`)
@@ -1373,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