@brandsync/wc 1.14.0 → 1.16.0

package/dist/types/components/bs-list-item/bs-list-item.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+ * optional support text, and an optional trailing caret or custom trailing content.
+ *
+ * ## When to use
+ * - As a child of `bs-list`, one per record, person, file or option.
+ * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+ *
+ * ## When not to use
+ * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+ * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+ * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+ *
+ * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+ * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+ * trailing caret is inline SVG.
+ *
+ * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+ * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+ * `role="button"`.
+ *
+ * @slot leading - Leading media: a `bs-avatar size="lg"` (64px), a 32px icon, or a 72x56 `<img>`.
+ * @slot trailing - Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
+ * @slot - Rich content that replaces `label`, `description` and `supportText` entirely.
+ * @part container - The row.
+ * @part leading - Wrapper around the leading slot.
+ * @part content - The text column.
+ * @part label - The label line.
+ * @part description - The description line.
+ * @part support-text - The support text line.
+ * @part trailing - Wrapper around the trailing slot / caret.
+ * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+ * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+ * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+ * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+ * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+ * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-list-item-bg - Enabled background. `transparent`.
+ * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+ * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+ * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+ * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+ * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+ * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ * @prop --bs-list-item-image-width - Leading image width. 72px.
+ * @prop --bs-list-item-image-height - Leading image height. 56px.
+ */
+export declare class BsListItem {
+    el: HTMLElement;
+    /** First text line (semibold). */
+    label: string | null;
+    /** Second text line (the "paragraph"). */
+    description: string | null;
+    /** Optional third text line. */
+    supportText: string | null;
+    /** Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`. */
+    selected: boolean;
+    /** Disables the row: dimmed, not focusable, no click event. */
+    disabled: boolean;
+    /** Shows a trailing caret (unless the `trailing` slot has content). */
+    showArrow: boolean;
+    /** Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`. */
+    value: string | null;
+    /** Makes a standalone row a focusable `role="button"` that emits `bsItemClick`. */
+    interactive: boolean;
+    /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
+    selectionRole: 'listitem' | 'option' | null;
+    hasLeading: boolean;
+    hasTrailing: boolean;
+    hasDefault: boolean;
+    /** Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`. */
+    bsItemClick: EventEmitter<string | null>;
+    private get isInteractive();
+    private activate;
+    onClick(): void;
+    onKeyDown(ev: KeyboardEvent): void;
+    private slotHas;
+    render(): any;
+}

package/dist/types/components/bs-list-item/bs-list-item.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsListItemArgs {
+    label: string;
+    description: string;
+    supportText: string;
+    selected: boolean;
+    disabled: boolean;
+    showArrow: boolean;
+    interactive: boolean;
+}
+declare const meta: Meta<BsListItemArgs>;
+export default meta;
+type Story = StoryObj<BsListItemArgs>;
+export declare const Default: Story;
+export declare const Text: Story;
+export declare const Avatar: Story;
+export declare const Icon: Story;
+export declare const Image: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const WithArrow: Story;
+export declare const WithSupportText: 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;

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

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

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+ * WAI-ARIA tree keyboard pattern.
+ *
+ * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+ * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+ * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+ * their expansion state and emit `bsSelect` / `bsToggle`.
+ *
+ * Built from: `bs-tree-item` rows.
+ *
+ * @slot - Default slot: top-level `bs-tree-item` elements (nested ones go inside their parent item).
+ * @part container - The `role="tree"` wrapper.
+ */
+export declare class BsTree {
+    el: HTMLElement;
+    /** Accessible name of the tree. Bound onto the internal `role="tree"` element (an `aria-label`
+     * on the host would not reach it). */
+    ariaLabel: string | null;
+    /** The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each
+     * item's `selected` (single selection). Setting it from code does not emit `bsChange`. */
+    value: string;
+    /** When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still
+     * expand and collapse. */
+    selectable: boolean;
+    /** Emitted when the user changes the selection (click, Enter/Space), with the new value. Not
+     * emitted when `value` is set from code. */
+    bsChange: EventEmitter<string>;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    onValueChange(): void;
+    /** Expands every parent item. */
+    expandAll(): Promise<void>;
+    /** Collapses every parent item. */
+    collapseAll(): Promise<void>;
+    private items;
+    private keyOf;
+    private isParent;
+    private isRendered;
+    private navigable;
+    private syncSelection;
+    /** Roving tabindex: one tabbable item (selected if navigable, else the first). */
+    private refresh;
+    private focusItem;
+    private select;
+    onItemSelect(e: CustomEvent<string>): void;
+    onFocusIn(e: FocusEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTreeArgs {
+    value: string;
+    selectable: boolean;
+}
+declare const meta: Meta<BsTreeArgs>;
+export default meta;
+type Story = StoryObj<BsTreeArgs>;
+export declare const Default: Story;
+export declare const ControlledValue: Story;
+export declare const NonSelectable: Story;

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

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

package/dist/types/components/bs-tree-item/bs-tree-item.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+ * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+ * caret, file icon).
+ *
+ * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+ * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+ * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+ * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+ * expansion -- the two are deliberately separate.
+ *
+ * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+ *
+ * @slot - 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.
+ * @slot label - Overrides the `label` text.
+ * @slot icon - Overrides the default folder / file icon. Only used when `showIcon` is `true`.
+ * @part container - The highlighted row pill (carries the hover / selected / focus states).
+ * @part caret - The expand/collapse caret (parents only).
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part group - The `role="group"` wrapper around the child items (while expanded).
+ */
+export declare class BsTreeItem {
+    el: HTMLElement;
+    /** The row's text. Use the `label` slot for rich content. */
+    label: string;
+    /** Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the
+     * keyboard and the owning tree toggle it. Reflected. */
+    expanded: boolean;
+    /** Marks the row as selected. Owned by the tree (single selection, synced with its `value`).
+     * Reflected. */
+    selected: boolean;
+    /** Disables the row: not focusable, ignores clicks, dimmed. Reflected. */
+    disabled: boolean;
+    /** Shows the leading icon (default folder / file, or the `icon` slot). */
+    showIcon: boolean;
+    /** Identifier used in events and for the tree's `value`. Falls back to `label` when empty. */
+    value: string;
+    /** Emitted when the user toggles expansion (caret click or keyboard), with the new `expanded`
+     * value. Not emitted when `expanded` is set from code. */
+    bsToggle: EventEmitter<boolean>;
+    /** Emitted (bubbling, composed) when the user activates the row, with the item's value. The
+     * owning `bs-tree` listens and updates the selection. */
+    bsSelect: EventEmitter<string>;
+    level: number;
+    hasChildren: boolean;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private computeLevel;
+    private computeHasChildren;
+    /** Sets `expanded` as a user action: updates the prop and emits `bsToggle`. No-op for leaves,
+     * disabled items, or when the value would not change. */
+    setExpanded(next: boolean): Promise<void>;
+    private onCaretClick;
+    private onRowClick;
+    render(): any;
+}

package/dist/types/components/bs-tree-item/bs-tree-item.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTreeItemArgs {
+    label: string;
+    expanded: boolean;
+    selected: boolean;
+    disabled: boolean;
+    showIcon: boolean;
+}
+declare const meta: Meta<BsTreeItemArgs>;
+export default meta;
+type Story = StoryObj<BsTreeItemArgs>;
+export declare const Default: Story;
+export declare const Open: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const WithoutIcon: Story;
+export declare const Child: Story;
+export declare const Levels: Story;
+export declare const CustomIcon: Story;