@brandsync/wc 1.12.1 → 1.14.0

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

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsPopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+/**
+ * A trigger plus a popup panel that opens on trigger click and closes on outside click or Escape.
+ *
+ * The popup is positioned with CSS (absolute, relative to the host) and flips to the opposite side
+ * when it would overflow the viewport; the effective placement is mirrored on the host as
+ * `data-placement`. Focus moves into the popup on open and back to the trigger on close. The popup content is slotted, so it is typically a `bs-menu` or a list.
+ *
+ * ## When to use
+ * - A menu, language list or small set of options revealed from a button.
+ *
+ * ## When not to use
+ * - A blocking decision (use `bs-dialog`) or a hover-only hint (use `bs-tooltip-trigger`).
+ *
+ * @slot trigger - The element that toggles the popup (e.g. a `bs-button`).
+ * @slot - Default slot: the popup content.
+ * @part trigger - The wrapper around the trigger; carries aria-expanded/aria-haspopup/aria-controls.
+ * @part popup - The popup surface.
+ * @prop --bs-popover-bg - Popup background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-popover-radius - Popup corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-popover-shadow - Popup shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-popover-offset - Gap between trigger and popup. Aliased to `--bs-spacing-100`.
+ * @prop --bs-popover-min-width - Minimum popup width. Aliased to `--bs-scale-1600`.
+ * @prop --bs-popover-z-index - Popup stacking order. Aliased to `--bs-z-index-popover`.
+ */
+export declare class BsPopover {
+    el: HTMLElement;
+    /** Whether the popup is shown. */
+    open: boolean;
+    /** Where the popup sits relative to the trigger. */
+    placement: BsPopoverPlacement;
+    /** Emitted when the open state changes through user interaction, with the new value. */
+    bsOpenChange: EventEmitter<boolean>;
+    private popupId;
+    private triggerSlot?;
+    private popupEl?;
+    private needsFocusIn;
+    private escaped;
+    onOpenChange(next: boolean): void;
+    onPlacementChange(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private isInTrigger;
+    /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */
+    private reposition;
+    private focusPopup;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    private detach;
+    private setOpen;
+    private focusTrigger;
+    private onTriggerKeyDown;
+    private onTriggerClick;
+    private onDocClick;
+    private onKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsPopoverArgs {
+    open: boolean;
+    placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+}
+declare const meta: Meta<BsPopoverArgs>;
+export default meta;
+type Story = StoryObj<BsPopoverArgs>;
+export declare const Default: Story;
+export declare const Open: Story;
+export declare const TopEnd: Story;

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

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

package/dist/types/components/bs-side-panel/bs-side-panel.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSidePanelSide = 'start' | 'end';
+/**
+ * A generic slide-in panel (drawer) anchored to the start or end edge, for history, filters, FAQ
+ * and similar secondary content. Closes via its close button or Escape and emits `bsClose`.
+ *
+ * Composed from `bs-icon-button` (close button).
+ *
+ * While open, Tab/Shift+Tab are trapped in the panel; with `overlay`, the rest of the page is made `inert`.
+ *
+ * ## When to use
+ * - Secondary content that sits beside the page without leaving it.
+ *
+ * ## When not to use
+ * - A blocking confirmation (use `bs-dialog`).
+ *
+ * @slot - Default slot: the panel body.
+ * @slot header-actions - Extra actions shown in the header next to the close button.
+ * @slot footer - Optional footer area (e.g. apply/reset buttons).
+ * @part overlay - The backdrop (only when `overlay` is set).
+ * @part panel - The panel surface (role="dialog").
+ * @part header - The header row.
+ * @part heading - The heading text.
+ * @part body - The scrollable body.
+ * @part footer - The footer wrapper.
+ * @prop --bs-side-panel-bg - Panel background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-side-panel-width - Panel width. Aliased to `calc(var(--bs-scale-1600) * 3)`.
+ * @prop --bs-side-panel-padding - Header/body/footer padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-side-panel-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
+ * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
+ * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ */
+export declare class BsSidePanel {
+    el: HTMLElement;
+    /** Whether the panel is visible. */
+    open: boolean;
+    /** Panel title; also its accessible name. */
+    heading: string;
+    /** Edge the panel is anchored to. */
+    side: BsSidePanelSide;
+    /** Accessible label of the close button. */
+    closeLabel: string;
+    /** Shows a backdrop behind the panel; clicking it closes the panel. */
+    overlay: boolean;
+    /** Emitted when the panel requests to close (close button, Escape, overlay click). */
+    bsClose: EventEmitter<void>;
+    private headingId;
+    private previouslyFocused;
+    private panelEl?;
+    /** Elements we set `inert` on (so we only undo our own changes). */
+    private inertified;
+    onOpenChange(next: boolean): void;
+    onOverlayChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Marks everything outside the panel as inert (modal overlay only). */
+    private applyInert;
+    private restoreInert;
+    private getFocusables;
+    private trapTab;
+    componentDidRender(): void;
+    private focusedIn;
+    private close;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/bs-side-panel/bs-side-panel.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSidePanelArgs {
+    open: boolean;
+    heading: string;
+    side: 'start' | 'end';
+    closeLabel: string;
+    overlay: boolean;
+}
+declare const meta: Meta<BsSidePanelArgs>;
+export default meta;
+type Story = StoryObj<BsSidePanelArgs>;
+export declare const Default: Story;
+export declare const WithOverlay: Story;
+export declare const Start: Story;

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

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

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

@@ -0,0 +1,44 @@
+export type BsSkeletonVariant = 'text' | 'rect' | 'circle';
+/**
+ * A general-purpose loading placeholder for content whose shape isn't covered by a dedicated
+ * skeleton (e.g. `bs-button-skeleton`). Renders a pulsing text line (or several), rectangle or circle.
+ *
+ * Decorative by default (`aria-hidden="true"`). Set `label` to expose it to assistive tech as a
+ * `role="status"` live region with that accessible name -- do this on one placeholder per loading
+ * region, not on every placeholder, so screen readers don't announce it repeatedly.
+ *
+ * ## When to use
+ * - Standing in for text, images, avatars or other blocks while their data loads.
+ *
+ * ## When not to use
+ * - For a `bs-button` or `bs-checkbox` placeholder -- use `bs-button-skeleton` / `bs-checkbox-skeleton`.
+ * - For an in-progress action on already-rendered UI -- use `bs-spinner` or `bs-progress`.
+ *
+ * @part container - The outer wrapper.
+ * @part line - Each pulsing placeholder element (one per line for `variant="text"`).
+ * @prop --bs-skeleton-bg - Placeholder color. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-skeleton-radius - Corner radius for `text`/`rect`. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-skeleton-width - Width when the `width` prop is not set. Defaults to `100%`.
+ * @prop --bs-skeleton-text-height - Height of each text line when `height` is not set. Defaults to `1em`.
+ * @prop --bs-skeleton-rect-height - Height of `rect`/`circle` when `height` is not set. Defaults to `96px`.
+ * @prop --bs-skeleton-gap - Gap between text lines. Aliased to `--bs-spacing-100`.
+ * @prop --bs-skeleton-duration - Pulse duration. Defaults to `1.5s`.
+ */
+export declare class BsSkeleton {
+    /** Shape of the placeholder. */
+    variant: BsSkeletonVariant;
+    /** Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if
+     * only one of `width`/`height` is set the other matches it. */
+    width?: string;
+    /** Any CSS length. Falls back to the variant's default height custom property. */
+    height?: string;
+    /** Number of text lines (`variant="text"` only). The last line of a multi-line block is shorter.
+     * Values below 1 are treated as 1. */
+    lines: number;
+    /** Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`. */
+    animated: boolean;
+    /** When set, the placeholder gets `role="status"` and this as its `aria-label`; otherwise it is
+     * `aria-hidden="true"`. */
+    label?: string;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsSkeletonVariant } from './bs-skeleton';
+interface BsSkeletonArgs {
+    variant: BsSkeletonVariant;
+    width: string;
+    height: string;
+    lines: number;
+    animated: boolean;
+    label: string;
+}
+declare const meta: Meta<BsSkeletonArgs>;
+export default meta;
+type Story = StoryObj<BsSkeletonArgs>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const MultiLineText: Story;
+export declare const WithLabel: Story;

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

@@ -64,6 +64,10 @@ export declare class BsSlider {
     /** Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses
      * hover/focus/drag styling and the value tooltip, and prevents interaction. */
     disabled: boolean;
+    /** Accessible name of the lower-bound thumb / percent field when `ariaLabel` is unset. */
+    startValueLabel: string;
+    /** Accessible name of the upper-bound thumb / percent field when `ariaLabel` is unset. */
+    endValueLabel: string;
     /**
      * Accessible name for the slider's native range input(s). Required whenever `showLabel` is
      * `false` (a bare track with no visible "Label" text) -- without it, the internal native

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

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

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

@@ -0,0 +1,32 @@
+export type BsSpinnerSize = 'xs' | 'sm' | 'md' | 'inherit';
+/**
+ * A small inline spinner sized for text. By default (`size="inherit"`) it is `1em` square so it
+ * scales with the surrounding font size, and it draws in `currentColor` so it matches the
+ * surrounding text. Built as plain inline SVG: `bs-progress` has fixed pixel diameters and a
+ * block layout, so it can't sit inline with text.
+ *
+ * ## When to use
+ * - Inline "busy" feedback next to or inside text, e.g. "Saving..." or within a button label.
+ *
+ * ## When not to use
+ * - For a large or standalone loading indicator, or one with a known percentage -- use `bs-progress`.
+ * - As a content placeholder -- use `bs-skeleton`.
+ *
+ * @part container - The outer inline wrapper (carries the status role).
+ * @part svg - The spinner SVG.
+ * @prop --bs-spinner-size-xs - Diameter at `size="xs"`. Aliased to `--bs-spacing-200`.
+ * @prop --bs-spinner-size-sm - Diameter at `size="sm"`. Aliased to `--bs-spacing-250`.
+ * @prop --bs-spinner-size-md - Diameter at `size="md"`. Aliased to `--bs-spacing-300`.
+ * @prop --bs-spinner-color - Spinner color. Defaults to `currentColor`.
+ * @prop --bs-spinner-track-opacity - Opacity of the background track ring. Defaults to `0.25`.
+ * @prop --bs-spinner-duration - Rotation duration. Defaults to `0.8s`.
+ */
+export declare class BsSpinner {
+    /** `xs`/`sm`/`md` use fixed token sizes; `inherit` (default) is `1em`, following the font size. */
+    size: BsSpinnerSize;
+    /** Accessible name (e.g. "Loading"). When set, the spinner gets `role="status"` and this
+     * `aria-label`; when omitted it is `aria-hidden="true"` (use it next to visible text that already
+     * says what is happening). */
+    label?: string;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsSpinnerSize } from './bs-spinner';
+interface BsSpinnerArgs {
+    size: BsSpinnerSize;
+    label: string;
+}
+declare const meta: Meta<BsSpinnerArgs>;
+export default meta;
+type Story = StoryObj<BsSpinnerArgs>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const InlineWithText: 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-timepicker/bs-timepicker.d.ts

@@ -66,6 +66,10 @@ export declare class BsTimepicker {
     /** Label of the Cancel button. */
     cancelLabel: string;
     /** Accessible name of the hour spinner. */
+    /** Verb prefix of each column's increment button name ("Increase hour"). */
+    increaseLabel: string;
+    /** Verb prefix of each column's decrement button name ("Decrease hour"). */
+    decreaseLabel: string;
     hourLabel: string;
     /** Accessible name of the minute spinner. */
     minuteLabel: string;

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

@@ -19,6 +19,8 @@ export declare class BsToast {
     /** Semantic state. Each state has its own icon and matching container/text tokens -- there is
      * no neutral/default state. */
     state: BsToastState;
+    /** Accessible name of the dismiss button. */
+    dismissLabel: string;
     /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
      * the consumer is expected to do that (or hide it) in response to this event. */
     bsDismiss: EventEmitter<void>;

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

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

package/dist/types/components/bs-tooltip-trigger/bs-tooltip-trigger.d.ts

@@ -0,0 +1,35 @@
+export type BsTooltipTriggerPlacement = 'top' | 'bottom' | 'start' | 'end';
+/**
+ * Wraps a trigger element and shows a `bs-tooltip` on hover or keyboard focus, after an optional
+ * delay. Escape dismisses it. The tooltip is linked to the trigger with `aria-describedby`.
+ *
+ * Composed from `bs-tooltip`.
+ *
+ * ## When to use
+ * - A short hint for an icon button or truncated label.
+ *
+ * ## When not to use
+ * - Interactive content or long text (use `bs-popover`).
+ *
+ * @slot - Default slot: the trigger element.
+ * @part trigger - The wrapper around the trigger; carries aria-describedby.
+ * @part tooltip - The positioned tooltip wrapper (role="tooltip").
+ * @prop --bs-tooltip-trigger-offset - Gap between trigger and tooltip. Aliased to `--bs-spacing-100`.
+ * @prop --bs-tooltip-trigger-z-index - Stacking order. Aliased to `--bs-z-index-popover`.
+ */
+export declare class BsTooltipTrigger {
+    /** Tooltip message. */
+    text: string;
+    /** Milliseconds to wait before showing the tooltip. */
+    delay: number;
+    /** Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'. */
+    placement: BsTooltipTriggerPlacement;
+    visible: boolean;
+    private tooltipId;
+    private timer?;
+    disconnectedCallback(): void;
+    private show;
+    private hide;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/bs-tooltip-trigger/bs-tooltip-trigger.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTooltipTriggerArgs {
+    text: string;
+    delay: number;
+}
+declare const meta: Meta<BsTooltipTriggerArgs>;
+export default meta;
+type Story = StoryObj<BsTooltipTriggerArgs>;
+export declare const Default: Story;
+export declare const Delayed: Story;

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts

@@ -71,6 +71,12 @@ export declare class BsNavigationDrawer {
      * a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a
      * rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`. */
     collapsible: boolean;
+    /** Accessible name of the collapse toggle while the drawer is expanded. */
+    collapseLabel: string;
+    /** Accessible name of the collapse toggle while the drawer is collapsed. */
+    expandLabel: string;
+    /** Accessible name of the search trigger. */
+    searchLabel: string;
     /** Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected
      * -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above
      * for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own