@brandsync/wc 1.13.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @brandsync/wc
 
+## 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
+
+- 1a76700: New `bs-split-pane` component: a resizable layout of two or three panes (`pane-1`, `pane-2`, `pane-3` slots) separated by draggable, keyboard-operable dividers. Supports `horizontal` / `vertical` orientation, a collapsible first pane, and follows light/dark themes via `--bs-split-pane-*` custom properties. Also registers every component in Storybook automatically instead of through a hand-kept import list.
+
 ## 1.13.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
@@ -1124,6 +1187,51 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-spinner-track-opacity` — Opacity of the background track ring. Defaults to `0.25`.
 - `--bs-spinner-duration` — Rotation duration. Defaults to `0.8s`.
 
+## `<bs-split-pane>`
+
+### Slots
+
+- `pane-1` — The first pane (the one that collapses).
+- `pane-2` — The second pane.
+- `pane-3` — Optional third pane.
+
+### Parts (`::part()`)
+
+- `container` — The flex wrapper around all panes and dividers.
+- `pane` — Every pane wrapper (`pane-1`, `pane-2`, `pane-3` are also exposed as separate parts).
+- `divider` — Every divider (the focusable `role="separator"` element).
+- `divider-thumb` — The visible thumb on a divider.
+
+### CSS custom properties
+
+- `--bs-split-pane-radius` — Corner radius of the container. Aliased to `--bs-border-radius-100`.
+- `--bs-split-pane-bg` — Pane background. Aliased to `--bs-surface-base`.
+- `--bs-split-pane-color` — Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+- `--bs-split-pane-first-size` — Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+- `--bs-split-pane-collapsed-size` — Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+- `--bs-split-pane-min-size` — Smallest size a resized pane may take. Defaults to `96px`.
+- `--bs-split-pane-divider-size` — Thickness of a divider. Aliased to `--bs-spacing-75`.
+- `--bs-split-pane-divider-bg` — Divider track colour. Aliased to `--bs-surface-container`.
+- `--bs-split-pane-divider-thumb` — Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+- `--bs-split-pane-divider-thumb-active` — Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+- `--bs-split-pane-divider-thumb-length` — Length of the divider thumb. Defaults to `250px` (Figma).
+- `--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