@brandsync/wc 1.13.0 → 1.15.0

package/dist/types/components/bs-app-shell/bs-app-shell.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+ * with CSS grid. The main column scrolls independently of the header and the side columns.
+ *
+ * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+ * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+ * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+ * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+ * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+ * auto track follows the drawer's width on its own.
+ *
+ * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+ * `banner` and `navigation` roles.
+ *
+ * ## When to use
+ * - The outer frame of an application page with a header and side navigation.
+ *
+ * ## When not to use
+ * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+ * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+ *
+ * @slot header - A `bs-navigation-header`, spanning the full width.
+ * @slot navigation - A `bs-navigation-drawer`.
+ * @slot - The main content, rendered inside `<main>`; scrolls independently.
+ * @slot aside - Optional right column.
+ * @part container - The grid element.
+ * @part header - Wrapper around the header slot.
+ * @part navigation - Wrapper around the navigation slot.
+ * @part main - The `<main>` element.
+ * @part aside - Wrapper around the aside slot.
+ * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+ * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+ * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+ */
+export declare class BsAppShell {
+    /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
+    fullHeight: boolean;
+    render(): any;
+}

package/dist/types/components/bs-app-shell/bs-app-shell.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsAppShellArgs {
+    fullHeight: boolean;
+    aside: boolean;
+}
+declare const meta: Meta<BsAppShellArgs>;
+export default meta;
+type Story = StoryObj<BsAppShellArgs>;
+export declare const Default: Story;
+export declare const WithAside: Story;
+export declare const MinHeightViewport: Story;

package/dist/types/components/bs-container/bs-container.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-container/bs-container.d.ts

@@ -0,0 +1,22 @@
+export type BsContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid';
+/**
+ * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+ *
+ * ## When to use
+ * - Constraining page or section content to a readable, consistent maximum width.
+ *
+ * ## When not to use
+ * - Arranging children relative to each other (use `bs-stack`).
+ * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+ *
+ * @slot - Content to constrain.
+ * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+ * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+ */
+export declare class BsContainer {
+    /** Maximum width, taken from the breakpoint tokens. `fluid` removes the limit. */
+    size: BsContainerSize;
+    /** Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`. */
+    padding: string;
+    render(): any;
+}

package/dist/types/components/bs-container/bs-container.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsContainerArgs {
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid';
+    padding: string;
+}
+declare const meta: Meta<BsContainerArgs>;
+export default meta;
+type Story = StoryObj<BsContainerArgs>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge2x: Story;
+export declare const Fluid: Story;
+export declare const WidePadding: Story;

package/dist/types/components/bs-divider/bs-divider.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-divider/bs-divider.d.ts

@@ -0,0 +1,29 @@
+export type BsDividerOrientation = 'horizontal' | 'vertical';
+export type BsDividerVariant = 'subtle' | 'default';
+export type BsDividerInset = 'none' | 'start' | 'both';
+/**
+ * A thin line that separates content, horizontally or vertically.
+ *
+ * ## When to use
+ * - Separating groups of related content in a list, menu, toolbar or card.
+ *
+ * ## When not to use
+ * - Adding vertical space between blocks (use `bs-stack` gap or spacing tokens).
+ * - Drawing a border around a surface (use `bs-card`).
+ *
+ * @part line - The visible line element.
+ * @prop --bs-divider-thickness - Line thickness. Defaults to `1px`.
+ * @prop --bs-divider-color - Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
+ * @prop --bs-divider-inset - Indent applied by `inset`. Aliased to `--bs-spacing-300`.
+ */
+export declare class BsDivider {
+    /** Direction of the line. A vertical divider stretches to the height of its container. */
+    orientation: BsDividerOrientation;
+    /** Visual weight of the line. */
+    variant: BsDividerVariant;
+    /** Indents the line from its start edge, or from both edges. */
+    inset: BsDividerInset;
+    /** Purely visual: hides the divider from assistive technology instead of exposing a separator. */
+    decorative: boolean;
+    render(): any;
+}

package/dist/types/components/bs-divider/bs-divider.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsDividerArgs {
+    orientation: 'horizontal' | 'vertical';
+    variant: 'subtle' | 'default';
+    inset: 'none' | 'start' | 'both';
+    decorative: boolean;
+}
+declare const meta: Meta<BsDividerArgs>;
+export default meta;
+type Story = StoryObj<BsDividerArgs>;
+export declare const Default: Story;
+export declare const Subtle: Story;
+export declare const Vertical: Story;
+export declare const InsetStart: Story;
+export declare const InsetBoth: Story;
+export declare const Decorative: Story;

package/dist/types/components/bs-grid/bs-grid.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-grid/bs-grid.d.ts

@@ -0,0 +1,43 @@
+export type BsGridAlign = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * A CSS grid layout wrapper. Children are placed in equal-width columns with a token-based gap.
+ *
+ * `columns` takes either a number (`"3"` becomes `repeat(3, minmax(0, 1fr))`) or any raw
+ * `grid-template-columns` value (`"200px 1fr"`). `minColumnWidth` is the responsive mechanism: it
+ * switches to `repeat(auto-fit, minmax(min(100%, X), 1fr))`, so the column count adapts to the
+ * container width and `columns` is ignored. There are deliberately no per-breakpoint props in v1.
+ *
+ * `gap`, `rowGap` and `columnGap` take spacing token names (`"200"` maps to `var(--bs-spacing-200)`);
+ * unknown names fall back to `100`.
+ *
+ * ## When to use
+ * - Card grids, form field grids and dashboards where items share equal column tracks.
+ * - Responsive galleries via `minColumnWidth`.
+ *
+ * ## When not to use
+ * - A single row or column of items with no wrapping (plain flex).
+ * - Resizable multi-pane layouts (use `bs-split-pane`) or the page frame (use `bs-app-shell`).
+ *
+ * @slot - The grid items.
+ * @part container - The grid element that holds the slotted items.
+ * @prop --bs-grid-gap - Gap on both axes. Overrides the `gap` prop's token (default `--bs-spacing-100`).
+ * @prop --bs-grid-row-gap - Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
+ * @prop --bs-grid-column-gap - Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
+ */
+export declare class BsGrid {
+    /** A number of equal columns (`"3"`), or a raw `grid-template-columns` value. Ignored when `minColumnWidth` is set. */
+    columns: string;
+    /** Spacing token name for the gap on both axes, e.g. `"200"` for `--bs-spacing-200`. */
+    gap: string;
+    /** Spacing token name for the row gap; overrides `gap` for rows. */
+    rowGap?: string;
+    /** Spacing token name for the column gap; overrides `gap` for columns. */
+    columnGap?: string;
+    /** CSS length (e.g. `240px`). Switches to auto-fit columns at least this wide and overrides `columns`. */
+    minColumnWidth?: string;
+    /** Block-axis alignment of items within their cell. */
+    align: BsGridAlign;
+    private template;
+    private token;
+    render(): any;
+}

package/dist/types/components/bs-grid/bs-grid.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsGridArgs {
+    columns: string;
+    gap: string;
+    rowGap: string;
+    columnGap: string;
+    minColumnWidth: string;
+    align: 'start' | 'center' | 'end' | 'stretch';
+}
+declare const meta: Meta<BsGridArgs>;
+export default meta;
+type Story = StoryObj<BsGridArgs>;
+export declare const Default: Story;
+export declare const LargeGap: Story;
+export declare const DifferentRowAndColumnGaps: Story;
+export declare const CustomTemplate: Story;
+export declare const ResponsiveMinColumnWidth: Story;
+export declare const AlignCenter: Story;

package/dist/types/components/bs-split-pane/bs-split-pane.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-split-pane/bs-split-pane.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSplitPaneOrientation = 'horizontal' | 'vertical';
+/**
+ * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+ * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+ * and (optionally) `pane-3`; the pane count follows which slots have content.
+ *
+ * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+ * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+ * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+ * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+ * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+ *
+ * ## When to use
+ * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+ *
+ * ## When not to use
+ * - A temporary overlay panel (use `bs-side-panel`).
+ * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+ *   the dividers purely visual).
+ *
+ * @slot pane-1 - The first pane (the one that collapses).
+ * @slot pane-2 - The second pane.
+ * @slot pane-3 - Optional third pane.
+ * @part container - The flex wrapper around all panes and dividers.
+ * @part pane - Every pane wrapper (`pane-1`, `pane-2`, `pane-3` are also exposed as separate parts).
+ * @part divider - Every divider (the focusable `role="separator"` element).
+ * @part divider-thumb - The visible thumb on a divider.
+ * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+ * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+ * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+ * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+ * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+ * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+ * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+ * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+ * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+ * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export declare class BsSplitPane {
+    el: HTMLElement;
+    /** `horizontal` = panes side by side, `vertical` = panes stacked. */
+    orientation: BsSplitPaneOrientation;
+    /** Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it. */
+    collapsed: boolean;
+    /** Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators. */
+    resizable: boolean;
+    /** Accessible name of each divider. */
+    dividerLabel: string;
+    /** Pixels moved per arrow-key press (Shift multiplies by 4). */
+    step: number;
+    /** Fires after a resize (pointer release or key press) with the pixel size of every pane except the last. */
+    bsResize: EventEmitter<number[]>;
+    /** Fires when `collapsed` changes through user interaction. */
+    bsCollapsedChange: EventEmitter<boolean>;
+    paneCount: number;
+    sizes: Array<number | undefined>;
+    draggingIndex: number;
+    private observer?;
+    private dragStart?;
+    /** Toggles `collapsed` and emits `bsCollapsedChange`. */
+    toggleCollapsed(): Promise<void>;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private countPanes;
+    private isRtl;
+    private axisSize;
+    private minSize;
+    /** Largest size pane `index` may take: leave `minSize` for each pane after it, and the dividers. */
+    private maxSize;
+    private paneEl;
+    private setSize;
+    private emitResize;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onKeyDown;
+    private paneStyle;
+    private percentFor;
+    render(): any;
+}

package/dist/types/components/bs-split-pane/bs-split-pane.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSplitPaneArgs {
+    orientation: 'horizontal' | 'vertical';
+    collapsed: boolean;
+    resizable: boolean;
+    panes: 2 | 3;
+}
+declare const meta: Meta<BsSplitPaneArgs>;
+export default meta;
+type Story = StoryObj<BsSplitPaneArgs>;
+export declare const Horizontal: Story;
+export declare const HorizontalCollapsed: Story;
+export declare const Vertical: Story;
+export declare const TwoPanes: Story;
+export declare const NotResizable: Story;

package/dist/types/components/bs-stack/bs-stack.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-stack/bs-stack.d.ts

@@ -0,0 +1,46 @@
+export type BsStackDirection = 'vertical' | 'horizontal';
+export type BsStackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type BsStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * A flex layout that arranges its children in a row or column with a token-based gap, optionally
+ * drawing a divider between children.
+ *
+ * Built from: `bs-divider` (when `divider` is set).
+ *
+ * With `divider`, each child is given a generated `slot="bs-stack-item-N"` attribute (plus a
+ * `data-bs-stack-item` marker) so a divider can be rendered between the named slots. Light-DOM
+ * nodes are never moved; the attributes are removed again when `divider` is turned off.
+ *
+ * ## When to use
+ * - Spacing and aligning a short run of siblings (form fields, button rows, card content).
+ *
+ * ## When not to use
+ * - Two-dimensional grids (use CSS grid).
+ * - Resizable panes (use `bs-split-pane`).
+ *
+ * @slot - The items to arrange.
+ * @part divider - Each generated `bs-divider` (only with `divider`).
+ * @prop --bs-stack-gap - Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
+ */
+export declare class BsStack {
+    el: HTMLElement;
+    /** Main axis: `vertical` stacks children in a column, `horizontal` in a row. */
+    direction: BsStackDirection;
+    /** Spacing token name (e.g. `200` => `--bs-spacing-200`). Invalid values fall back to `100`. */
+    gap: string;
+    /** Cross-axis alignment. */
+    align: BsStackAlign;
+    /** Main-axis distribution. */
+    justify: BsStackJustify;
+    /** Lets items wrap onto further lines. */
+    wrap: boolean;
+    /** Renders a decorative `bs-divider` between each child. */
+    divider: boolean;
+    itemCount: number;
+    dividerChanged(): void;
+    private sync;
+    private clearSlots;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/bs-stack/bs-stack.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsStackArgs {
+    direction: 'vertical' | 'horizontal';
+    gap: string;
+    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify: 'start' | 'center' | 'end' | 'between' | 'around';
+    wrap: boolean;
+    divider: boolean;
+}
+declare const meta: Meta<BsStackArgs>;
+export default meta;
+type Story = StoryObj<BsStackArgs>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const WithDividers: Story;
+export declare const HorizontalWithDividers: Story;
+export declare const Wrapping: Story;
+export declare const SpaceBetween: Story;