@brandsync/wc 1.18.0 → 1.20.0

package/dist/types/components/bs-toggle-button/bs-toggle-button.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsToggleButtonMode = 'toggle' | 'radio';
+/**
+ * A button that is either pressed or not. Standalone it is a toggle (`aria-pressed`); inside a
+ * `bs-toggle-button-group` the group sets its `mode` (`toggle` for multiple choice, `radio` for
+ * single choice, which switches the semantics to `role="radio"` + `aria-checked`).
+ *
+ * Built from: hand-built `<button>` (the segment shape and pressed state differ from `bs-button`) plus
+ * `bs-ripple`.
+ *
+ * ## When to use
+ * - A two-state option such as "Bold", or a segment of a `bs-toggle-button-group`.
+ *
+ * ## When not to use
+ * - Triggering an action (use `bs-button`) or an on/off setting that applies immediately (use `bs-switch`).
+ *
+ * @slot icon - Optional leading icon (24x24). With no default-slot text the button is icon-only and
+ * needs `ariaLabel`.
+ * @slot - Default slot: the label text.
+ * @part button - The native button.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part ripple - The press-ripple (a `bs-ripple`).
+ */
+export declare class BsToggleButton {
+    el: HTMLElement;
+    /** Identifies the segment inside a group's `value`/`values`. */
+    value?: string;
+    /** Whether the button is pressed/selected. */
+    pressed: boolean;
+    /** Disables the button. */
+    disabled: boolean;
+    /** Semantics. Normally set by the parent group. */
+    mode: BsToggleButtonMode;
+    /** Roving tabindex, set by the parent group (`false` = `tabindex="-1"`). Standalone: always tabbable. */
+    tabbable: boolean;
+    /** Accessible name; required for an icon-only button. */
+    ariaLabel: string | null;
+    /** Emitted on user interaction with the new `pressed` value. A radio-mode button that is already
+     * pressed does not emit. Bubbles, so a group can coordinate its segments. */
+    bsChange: EventEmitter<boolean>;
+    hasLabel: boolean;
+    hasIcon: boolean;
+    private onIconSlotchange;
+    private onLabelSlotchange;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-toggle-button/bs-toggle-button.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsToggleButtonArgs {
+    pressed: boolean;
+    disabled: boolean;
+    label: string;
+}
+declare const meta: Meta<BsToggleButtonArgs>;
+export default meta;
+type Story = StoryObj<BsToggleButtonArgs>;
+export declare const Default: Story;
+export declare const Pressed: Story;
+export declare const Disabled: Story;
+export declare const IconOnly: Story;

package/dist/types/components/bs-toggle-button-group/bs-toggle-button-group.cmp.test.d.ts

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

package/dist/types/components/bs-toggle-button-group/bs-toggle-button-group.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A segmented control: a row of `bs-toggle-button` segments with single or multiple choice.
+ *
+ * Single choice (default) uses radio semantics (`role="radiogroup"` / `role="radio"`) and arrow keys
+ * move focus AND selection. Multiple choice (`multiple`) uses `role="group"` with `aria-pressed`
+ * toggle buttons; arrow keys move focus only, Space/Enter toggles. Focus is roving in both modes
+ * (one tab stop).
+ *
+ * Built from: `bs-toggle-button`.
+ *
+ * ## When to use
+ * - 2-5 short, related options that should all stay visible (view mode, alignment, filters).
+ *
+ * ## When not to use
+ * - Long lists (use `bs-select`) or page-level navigation (use `bs-tabs`).
+ *
+ * @slot - `bs-toggle-button` segments.
+ * @part group - The segmented container.
+ */
+export declare class BsToggleButtonGroup {
+    el: HTMLElement;
+    /** Selected segment `value` (single choice). */
+    value?: string;
+    /** Selected segment values (multiple choice). Set as a JS property. */
+    values: string[];
+    /** Allow several pressed segments. */
+    multiple: boolean;
+    /** Disables every segment. */
+    disabled: boolean;
+    /** Accessible name of the group. Required. */
+    ariaLabel: string | null;
+    /** Emitted when the user changes the selection: the new `value` (single) or `values` (multiple). */
+    bsChange: EventEmitter<string | string[]>;
+    sync(): void;
+    componentDidLoad(): void;
+    private segments;
+    private enabled;
+    onSegmentChange(ev: CustomEvent): void;
+    onKeyDown(ev: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/bs-toggle-button-group/bs-toggle-button-group.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsToggleButtonGroupArgs {
+    multiple: boolean;
+    disabled: boolean;
+    value: string;
+}
+declare const meta: Meta<BsToggleButtonGroupArgs>;
+export default meta;
+type Story = StoryObj<BsToggleButtonGroupArgs>;
+export declare const Default: Story;
+export declare const MultipleChoice: Story;
+export declare const IconOnly: Story;
+export declare const Disabled: Story;

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

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

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

@@ -0,0 +1,88 @@
+export type BsToolbarOrientation = 'horizontal' | 'vertical';
+type ToolbarItem = HTMLElement & {
+    disabled?: boolean;
+};
+type OverflowEntry = {
+    el: ToolbarItem;
+    label: string;
+};
+/**
+ * A bar of related controls (buttons, toggles, selects) with a left and a right group, grouped
+ * separators, a single tab stop and arrow-key navigation between the controls (WAI-ARIA toolbar
+ * pattern). Optionally, controls that do not fit collapse into a "more" menu.
+ *
+ * Keyboard: the toolbar is ONE tab stop. Left/Right arrows (Up/Down when `orientation="vertical"`,
+ * mirrored in RTL) move focus between the controls and wrap; Home/End jump to the first/last. The
+ * control last focused is the one Tab returns to. Disabled controls are skipped.
+ *
+ * Direct children of the `left`/`right` slots are the toolbar's controls. A slotted `bs-divider` is a
+ * separator: the toolbar sets its `orientation` perpendicular to its own and skips it when navigating.
+ *
+ * ## When to use
+ * - Several related actions that act on the same content (a text editor's formatting row, a table's
+ *   bulk actions, a viewer's zoom controls).
+ *
+ * ## When not to use
+ * - Navigating between pages or sections -- use `bs-tabs`, `bs-navigation-header` or a nav.
+ * - A single action or a form's submit row -- place the `bs-button`s directly.
+ * - A menu of actions that opens on demand -- use `bs-popover` with `bs-menu`.
+ *
+ * ## Overflow
+ * With `overflow` set (horizontal only), controls from the end of the bar that do not fit are hidden and
+ * listed in a `bs-menu` behind a "more" button; choosing an entry activates the original control. An
+ * entry's text is the control's `data-label`, else its `aria-label`, else its text content, else `title`:
+ * give icon-only controls one of these.
+ *
+ * Composition: built from `bs-icon-button`, `bs-popover`, `bs-menu` and `bs-menu-item` (overflow) and
+ * expects `bs-button`, `bs-icon-button`, `bs-divider` etc. as slotted content.
+ *
+ * @slot left - The left (leading) group of controls.
+ * @slot right - The right (trailing) group of controls; pushed to the far end of the bar.
+ * @part container - The element carrying `role="toolbar"`.
+ * @part left - The wrapper around the `left` slot.
+ * @part right - The wrapper around the `right` slot.
+ * @part overflow - The overflow `bs-popover` (only rendered when `overflow` is set).
+ */
+export declare class BsToolbar {
+    el: HTMLElement;
+    /** Accessible name of the toolbar (`aria-label`). Required for a good experience, and essential
+     * when a page has more than one toolbar -- say what it controls ("Text formatting"). */
+    label?: string;
+    /** Direction of the bar. Sets `aria-orientation`, switches which arrow keys navigate, and sets the
+     * orientation of slotted `bs-divider`s to the perpendicular one. */
+    orientation: BsToolbarOrientation;
+    /** Collapse controls that do not fit into a "more" menu (see Overflow in the description).
+     * Horizontal toolbars only; ignored when `orientation="vertical"`. */
+    overflow: boolean;
+    /** Accessible name and tooltip of the overflow button. */
+    overflowLabel: string;
+    overflowed: OverflowEntry[];
+    private activeEl?;
+    private resizeObserver?;
+    private containerEl?;
+    private triggerEl?;
+    private popoverEl?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    onConfigChange(): void;
+    private observe;
+    private overflowActive;
+    /** Every direct child of the two groups, in visual order (left group, then right group). */
+    private children;
+    private isDivider;
+    /** Controls that arrow keys can land on: not separators, not disabled, not collapsed into the menu. */
+    private navigable;
+    private labelOf;
+    /** Single pass: perpendicular dividers, overflow partitioning, roving tabindex. */
+    private syncItems;
+    private updateOverflow;
+    /** Roving tabindex: exactly one control is in the tab order. */
+    private syncRoving;
+    componentDidRender(): void;
+    onFocusIn(ev: FocusEvent): void;
+    onKeyDown(ev: KeyboardEvent): void;
+    private activate;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsToolbarArgs {
+    label: string;
+    orientation: 'horizontal' | 'vertical';
+    overflow: boolean;
+    overflowLabel: string;
+}
+declare const meta: Meta<BsToolbarArgs>;
+export default meta;
+type Story = StoryObj<BsToolbarArgs>;
+export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const WithOverflow: Story;

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

@@ -16,8 +16,15 @@ export type BsTooltipTriggerPlacement = 'top' | 'bottom' | 'start' | 'end';
  * @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`.
+ * @prop --bs-tooltip-trigger-duration - Length of the show/hide motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-tooltip-trigger-easing - Curve of the show/hide motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-tooltip-trigger-distance - How far the tooltip nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The tooltip fades in while drifting a few pixels away from the trigger into place, and fades back out toward it. Under
+ * `prefers-reduced-motion: reduce` (or a duration of `0ms`) it appears and disappears instantly.
  */
 export declare class BsTooltipTrigger {
+    el: HTMLElement;
     /** Tooltip message. */
     text: string;
     /** Milliseconds to wait before showing the tooltip. */
@@ -25,6 +32,17 @@ export declare class BsTooltipTrigger {
     /** Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'. */
     placement: BsTooltipTriggerPlacement;
     visible: boolean;
+    /** True while the exit motion plays after `visible` went false, so the tooltip stays shown for it. */
+    closing: boolean;
+    private bubbleEl?;
+    private tipEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    onVisibleChange(next: boolean): void;
+    /** The tooltip drifts away from the trigger it hangs off: below it drops from above, above it rises from below, and so on. */
+    private offset;
+    componentDidRender(): void;
     private tooltipId;
     private timer?;
     disconnectedCallback(): void;

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

@@ -21,6 +21,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
  * @part group - The `role="group"` wrapper around the child items (while expanded).
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsTreeItem {
     el: HTMLElement;

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

@@ -81,7 +81,17 @@ export declare class BsNavigationDrawerItem {
      * never shows a nested tree.
      */
     collapsed: boolean;
-    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    /** Makes a leaf item a real link: renders an `<a part="item" href>` instead of the `<button>`, so
+     * open-in-new-tab, copy link address, middle-click and the status-bar URL work. Ignored when
+     * `expandable` (groups stay buttons). `bsSelect` still fires on a plain click and is
+     * **cancelable**: call `event.preventDefault()` to stop the navigation and route it yourself
+     * (an SPA router). Ctrl/cmd/shift/alt-clicks and middle-clicks are left to the browser and do not
+     * emit `bsSelect`. */
+    href?: string;
+    /** `target` of the link, when `href` is set. */
+    target?: string;
+    /** Fires on click, only when `expandable` is false. Cancelable when `href` is set (see `href`).
+     * See the class doc above. */
     bsSelect: EventEmitter<void>;
     /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
      * doc above. */

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

@@ -14,6 +14,9 @@ export declare const HeaderBase: Story;
 export declare const HeaderBaseWithNavigation: Story;
 export declare const HeaderBaseWithActions: Story;
 export declare const HeaderBaseWithNavigationAndActions: Story;
+export declare const HeaderBaseNarrowContainer: Story;
+export declare const HeaderBaseMediumContainer: Story;
+export declare const HeaderBaseWideContainer: Story;
 export declare const HeaderBaseWithNavigationAndActionsCentered: Story;
 export declare const HeaderBaseWithNavigationAndActionsNoLogo: Story;
 export declare const HeaderBaseWithNavigationAndActionsTabs: Story;