@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,52 @@
+/**
+ * A touch-ripple effect: on pointer press, a circle grows from the press point and fades out.
+ *
+ * It is a building block for pressable components (`bs-button`, `bs-icon-button`, ...), not something
+ * to place on a page by itself. Put it inside a positioned, pressable parent; it fills that parent,
+ * follows its corner radius, and listens for `pointerdown` on it. Pointer-events pass through, so the
+ * parent still receives every click.
+ *
+ * The motion uses the shared duration and easing tokens. Under `prefers-reduced-motion: reduce` those
+ * durations are `0ms`, and the ripple does not play at all.
+ *
+ * ## When to use
+ * - Inside a pressable `bs-*` component, to give press feedback.
+ *
+ * ## When not to use
+ * - As a hover or focus indicator. Those are colour changes on the parent.
+ * - On non-interactive surfaces.
+ *
+ * Set the custom properties on the `bs-ripple` element itself. Inside another component that means `::part(ripple)`,
+ * e.g. `bs-button::part(ripple) { --bs-ripple-color: white; }`.
+ *
+ * @part surface - The clipping layer the ripple circles are drawn in.
+ * @prop --bs-ripple-color - Ripple colour. `currentColor` by default, so it follows the parent's text colour and works on every variant.
+ * @prop --bs-ripple-opacity - Starting opacity of the ripple. No opacity token fits, so the default is `0.24`.
+ * @prop --bs-ripple-duration - Length of the ripple. Aliased to `--bs-duration-slower`.
+ * @prop --bs-ripple-easing - Curve of the ripple. Aliased to `--bs-easing-decelerate`.
+ */
+export declare class BsRipple {
+    el: HTMLElement;
+    /** Always start the ripple from the centre instead of the press point. Use it for round or icon-only controls. */
+    centered: boolean;
+    /** Turns the ripple off. A disabled parent (`<button disabled>`) also stops it. */
+    disabled: boolean;
+    /**
+     * CSS selector of the element to listen on, found with `closest()` from the ripple (so it stays inside
+     * the same shadow tree). By default the ripple listens on its parent. Use it when the pressable element
+     * is bigger than the ripple's own parent, e.g. a switch whose ripple sits on the knob but whose whole
+     * `<label>` is the press target.
+     */
+    triggerSelector?: string;
+    onTriggerChange(): void;
+    private surface?;
+    private target?;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private bind;
+    private unbind;
+    private onPointerDown;
+    private toMs;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsRippleArgs {
+    centered: boolean;
+    disabled: boolean;
+}
+declare const meta: Meta<BsRippleArgs>;
+export default meta;
+type Story = StoryObj<BsRippleArgs>;
+export declare const Default: Story;
+export declare const Centered: Story;
+export declare const InButtons: Story;

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

@@ -36,6 +36,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
  * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
  * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsSearchItem {
     el: HTMLElement;

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

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

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

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * A single-choice select: a field-shaped combobox that opens a scrollable listbox of options. Same
+ * label / helper text / error chrome as `bs-input`.
+ *
+ * Follows the WAI-ARIA select-only combobox pattern: focus stays on the combobox and the
+ * highlighted option is exposed through `aria-activedescendant`.
+ *
+ * Built from: the field/label/description/error styling language of `bs-input` (same `--bs-input-*`
+ * tokens). The listbox rows are hand-built leaf elements: `bs-menu-item` is a `role="menuitem"`
+ * button and `bs-popover` moves focus into its popup, neither of which fits the combobox/listbox
+ * pattern where focus must stay on the field.
+ *
+ * ## When to use
+ * - Choosing exactly one value from a known list of roughly 4-15 options.
+ *
+ * ## When not to use
+ * - 2-3 options that should all be visible (use radios or `bs-toggle-button-group`).
+ * - Very long or searchable lists (use `bs-input type="dropdown"` or a search pattern).
+ *
+ * @part label - The label element.
+ * @part field - The bordered combobox element.
+ * @part value - The selected label (or placeholder).
+ * @part icon - The chevron.
+ * @part listbox - The popup listbox.
+ * @part option - A single option row.
+ * @part description - Helper text (hidden when `error` is set).
+ * @part error - Error message.
+ */
+export declare class BsSelect {
+    el: HTMLElement;
+    internals: ElementInternals;
+    private uid;
+    private initialValue;
+    private typeahead;
+    private typeaheadTimer?;
+    private listEl?;
+    private fieldEl?;
+    /** Name the value is submitted under in a surrounding `<form>`. */
+    name?: string;
+    /** The selected option's `value`. */
+    value: string;
+    /** The options. Must be set as a JS property, not an attribute. */
+    options: BsSelectOption[];
+    /** Visible label. */
+    label?: string;
+    /** Accessible name when there is no visible `label`. */
+    ariaLabel: string | null;
+    /** Text shown while no option is selected. */
+    placeholder: string;
+    /** Helper text below the field (replaced by `error` when set). */
+    description?: string;
+    /** Error message; puts the field in its error state. */
+    error?: string;
+    /** Disables the select. */
+    disabled: boolean;
+    /** Marks the field required (native form validation + asterisk). */
+    required: boolean;
+    /** Whether the listbox is open. */
+    open: boolean;
+    /** Emitted when the user picks an option, with the new value. */
+    bsChange: EventEmitter<string>;
+    activeIndex: number;
+    syncForm(): void;
+    onOpen(next: boolean): void;
+    formResetCallback(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private onDocClick;
+    /** Next enabled index after `from` in direction `dir`; stays on `from` (or -1) when none. */
+    private step;
+    private commit;
+    private selectedIndex;
+    private findByPrefix;
+    private onKeyDown;
+    private onFieldClick;
+    private onBlur;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSelectArgs {
+    label: string;
+    placeholder: string;
+    description: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    value: string;
+}
+declare const meta: Meta<BsSelectArgs>;
+export default meta;
+type Story = StoryObj<BsSelectArgs>;
+export declare const Default: Story;
+export declare const WithHelperText: Story;
+export declare const Selected: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const LongList: Story;

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

@@ -30,6 +30,8 @@ export type BsSidePanelSide = 'start' | 'end';
  * @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`.
+ * @prop --bs-side-panel-duration - Length of the slide in/out. Aliased to `--bs-duration-slow`.
+ * @prop --bs-side-panel-easing - Curve of the slide in/out. Aliased to `--bs-easing-standard`.
  */
 export declare class BsSidePanel {
     el: HTMLElement;
@@ -50,6 +52,13 @@ export declare class BsSidePanel {
     private panelEl?;
     /** Elements we set `inert` on (so we only undo our own changes). */
     private inertified;
+    /** True while the slide-out plays after `open` went false, so the panel stays mounted for it. */
+    closing: boolean;
+    private overlayEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    private wasRendered;
     onOpenChange(next: boolean): void;
     onOverlayChange(): void;
     connectedCallback(): void;
@@ -59,6 +68,10 @@ export declare class BsSidePanel {
     private restoreInert;
     private getFocusables;
     private trapTab;
+    /** Where the panel sits when hidden: fully past its own edge. Physical, like the panel's own left/right. */
+    private offscreen;
+    private playEnter;
+    private playExit;
     componentDidRender(): void;
     private focusedIn;
     private close;

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

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

package/dist/types/components/bs-skip-link/bs-skip-link.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A "skip to main content" link: invisible until it receives keyboard focus, then shown at the top
+ * of the page. Activating it moves focus to the element its `href` points at, so keyboard and
+ * screen-reader users can bypass repeated navigation (WCAG 2.4.1 Bypass Blocks).
+ *
+ * Place it as the very first focusable element on the page. Renders a real `<a>`; the focus move is
+ * done explicitly (the target gets a temporary `tabindex="-1"` when it is not natively focusable),
+ * because a fragment navigation alone does not reliably move focus in every browser.
+ *
+ * ## When to use
+ * - Once per page, before the header/navigation, pointing at the `<main>` landmark.
+ * - Additionally before large repeated blocks (e.g. a long sidebar) pointing past them.
+ *
+ * ## When not to use
+ * - As a general in-page link -- use a plain link or `bs-table-of-contents`.
+ * - When the page has no repeated blocks before its main content.
+ *
+ * Composition: a leaf element (a single anchor); no existing `bs-*` component renders a link.
+ *
+ * @slot - Default slot: the link text. Falls back to "Skip to main content".
+ * @part link - The anchor element.
+ */
+export declare class BsSkipLink {
+    el: HTMLElement;
+    /** Target to skip to: a fragment (`#main-content`) naming an element id in the same document or
+     * shadow tree, or any URL (then the browser just navigates). Point it at an element that exists --
+     * if the id is not found, activating the link does nothing beyond the native fragment jump. */
+    href: string;
+    /** Fires when the link is activated, before focus moves. **Cancelable**: `preventDefault()` stops
+     * both the focus move and the native navigation so you can handle it yourself. Detail is
+     * `{ href, target }` (`target` is the resolved element or `null`). Bubbles and is composed. */
+    bsSkip: EventEmitter<{
+        href: string;
+        target: HTMLElement | null;
+    }>;
+    private resolveTarget;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-skip-link/bs-skip-link.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSkipLinkArgs {
+    href: string;
+    label: string;
+}
+declare const meta: Meta<BsSkipLinkArgs>;
+export default meta;
+type Story = StoryObj<BsSkipLinkArgs>;
+export declare const Default: Story;
+export declare const CustomLabelAndTarget: Story;

package/dist/types/components/bs-source-link/bs-source-link.d.ts

@@ -32,6 +32,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
  * @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
  *   `--bs-text-secondary`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsSourceLink {
     /** The cited document's filename. */

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

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

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

@@ -0,0 +1,56 @@
+import type { BsCardSurface } from '../bs-card/bs-card';
+export type BsStatTrend = 'up' | 'down' | 'neutral';
+export type BsStatTrendIntent = 'positive' | 'negative' | 'neutral';
+/**
+ * A key figure: a label, a large value and an optional trend (up, down or flat) with a change figure.
+ *
+ * ## When to use
+ * - Dashboard KPIs and summary numbers ("Active users 1,284, up 12%").
+ *
+ * ## When not to use
+ * - A time series or comparison of many values -- use a chart.
+ * - A progress toward a goal -- use `bs-progress` / `bs-progress-linear`.
+ * - A count on another element -- use `bs-badge`.
+ *
+ * **Built from:** `bs-card` (the surface).
+ *
+ * The trend is never conveyed by colour or arrow alone: a visually hidden prefix ("Increase of") is
+ * rendered before the change figure. Whether up is good depends on the metric, so the colour comes from
+ * `trendIntent` (default: up is positive, down is negative; set `negative` for e.g. churn going up).
+ *
+ * @slot icon - Optional leading icon next to the label.
+ * @slot - Extra content below the value, e.g. a caption or a sparkline.
+ * @part container - The card surface (`bs-card`).
+ * @part label - The label.
+ * @part value - The value.
+ * @part trend - The trend row (arrow and change figure).
+ * @part trend-icon - The trend arrow.
+ */
+export declare class BsStat {
+    el: HTMLElement;
+    /** What the number measures. */
+    label: string;
+    /** The figure itself, already formatted (e.g. "1,284" or "98.2%"). */
+    value: string;
+    /** Direction of change. Omit to hide the trend. */
+    trend?: BsStatTrend;
+    /** The change figure shown next to the arrow (e.g. "12%"). */
+    trendValue?: string;
+    /** Colour of the trend. Defaults from `trend`: up is positive, down is negative, neutral is neutral. */
+    trendIntent?: BsStatTrendIntent;
+    /** Visually hidden prefix for `trend="up"`. */
+    trendUpLabel: string;
+    /** Visually hidden prefix for `trend="down"`. */
+    trendDownLabel: string;
+    /** Visually hidden text for `trend="neutral"`. */
+    trendNeutralLabel: string;
+    /** Surface of the underlying `bs-card`. */
+    surface: BsCardSurface;
+    hasIcon: boolean;
+    hasExtra: boolean;
+    componentWillLoad(): void;
+    private get intent();
+    private get trendPrefix();
+    private arrow;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsStatArgs {
+    label: string;
+    value: string;
+    trend: 'up' | 'down' | 'neutral' | '';
+    trendValue: string;
+    surface: 'raised' | 'base' | 'container';
+}
+declare const meta: Meta<BsStatArgs>;
+export default meta;
+type Story = StoryObj<BsStatArgs>;
+export declare const Default: Story;
+export declare const Trends: Story;
+export declare const NegativeUp: Story;
+export declare const WithoutTrend: Story;
+export declare const WithSlots: Story;

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

@@ -16,6 +16,7 @@ export type BsSwitchSize = 'md' | 'lg';
  * @part track - The visual pill-shaped track.
  * @part knob - The sliding circular knob.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsSwitch {
     el: HTMLElement;

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts

@@ -29,6 +29,7 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * @part tab - The button element.
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsInlineTab {
     el: HTMLElement;

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.d.ts

@@ -11,7 +11,6 @@ export default meta;
 type Story = StoryObj<BsInlineTabArgs>;
 export declare const Default: Story;
 export declare const WithIcon: Story;
-export declare const IconOnly: Story;
 export declare const Selected: Story;
 export declare const SelectedWithIcon: Story;
 export declare const Disabled: Story;

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

@@ -32,6 +32,7 @@ export type BsTabIconPosition = 'start' | 'top';
  * @part label - The label wrapper.
  * @part badge - The badge wrapper.
  * @part indicator - The selection/hover underline indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsTab {
     el: HTMLElement;

package/dist/types/components/bs-tab/bs-tabs/bs-tabs.d.ts

@@ -40,9 +40,11 @@ export declare class BsTabs {
      * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
      * If unset, it is read from whichever tab is already `selected` once the group loads. */
     value?: string;
-    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
-     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
-     * still fires as before. */
+    /** Fires when the **selection changes** (click, or arrow/Home/End), with the new `value`. It does
+     * not fire when the already-selected tab is clicked again, nor when `value` is set
+     * programmatically. To react to every activation, including a click on the already-selected tab
+     * (e.g. to sync a URL), listen for `bsSelect` on the tab itself (it bubbles, so one listener on
+     * `<bs-tabs>` covers all tabs); it fires on every click. */
     bsChange: EventEmitter<{
         value: string;
     }>;

package/dist/types/components/bs-table-of-contents/bs-table-of-contents.cmp.test.d.ts

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

package/dist/types/components/bs-table-of-contents/bs-table-of-contents.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** One entry of the table of contents. `href` is a fragment (`#section`) pointing at an element id. */
+export interface BsTocItem {
+    label: string;
+    href: string;
+    /** Nested entries (sub-sections), rendered one level deeper. */
+    children?: BsTocItem[];
+}
+type TocNode = {
+    label: string;
+    href: string;
+    children: TocNode[];
+};
+/**
+ * An "On this page" navigation: a nested list of in-page links with a scroll spy that marks the
+ * section currently in view (`aria-current="location"`), optionally sticky beside long content.
+ *
+ * Give it entries in either of two ways:
+ * - **`items` property** (a JS array, `{ label, href, children? }`) -- the data-driven way.
+ * - **Slotted anchors** -- `<a href="#intro">Intro</a>`, optionally inside nested `<ul>`/`<li>` or with
+ *   `data-level="2"` for sub-sections. The component reads them and renders its own styled links (the
+ *   slotted markup is not displayed; it is the no-JavaScript fallback). Used when `items` is empty.
+ *
+ * The scroll spy uses an `IntersectionObserver` on the elements the links point at. The current section
+ * is the first one (in link order) that intersects the top band of the viewport defined by `rootMargin`;
+ * when none does (between two sections) the previous one stays current. Observers are disconnected when
+ * the element is removed from the DOM and re-created when it is re-attached.
+ *
+ * Link targets are looked up by id in the same document (or shadow tree) as the component. Links whose
+ * target does not exist are still shown but never become current.
+ *
+ * ## When to use
+ * - Long single-page content (documentation, policies, settings pages) with several headed sections.
+ *
+ * ## When not to use
+ * - Navigating between pages -- use `bs-navigation-drawer` or `bs-breadcrumbs`.
+ * - Switching between panels of content that are not all on the page -- use `bs-tabs`.
+ *
+ * Composition: leaf element (a nav landmark with anchors); no existing `bs-*` component renders links.
+ *
+ * @slot - Default slot: anchors (`<a href="#id">`) used as entries when `items` is empty. Not displayed.
+ * @part container - The `<nav>` landmark.
+ * @part title - The visible heading (unless `hideTitle`).
+ * @part list - Every `<ul>` (top level and nested).
+ * @part item - Every `<li>`.
+ * @part link - Every anchor. The current one also matches `[aria-current]`.
+ */
+export declare class BsTableOfContents {
+    el: HTMLElement;
+    /** Entries as a JS array (set as a property, not an attribute). Takes precedence over slotted anchors. */
+    items: BsTocItem[];
+    /** Accessible name of the `nav` landmark, and the visible title text. */
+    label: string;
+    /** Hides the visible title; the landmark keeps its accessible name. */
+    hideTitle: boolean;
+    /** The `href` (`#id`) of the current section. Reflected; follows the scroll spy and clicks, and can be
+     * set to force a section. */
+    current?: string;
+    /** Turns the scroll spy on or off. Off: `current` only changes when a link is clicked or it is set. */
+    scrollSpy: boolean;
+    /** `rootMargin` of the spy's `IntersectionObserver`: shrinks the viewport to the band in which a
+     * section counts as "current". The default is the top 40% of the viewport. Raise the top value (e.g.
+     * `-64px 0px -60% 0px`) when a fixed header covers the top of the page. */
+    rootMargin: string;
+    /** Sticks the table of contents to the top of its scroll container (`position: sticky`) so it stays
+     * in view beside long content. Offset with `--bs-toc-sticky-top`. */
+    sticky: boolean;
+    /** Fires when a link is clicked, before navigation. **Cancelable**: `preventDefault()` stops the
+     * browser jump so you can scroll/route yourself. Detail is `{ href }`. Modified clicks are ignored. */
+    bsNavigate: EventEmitter<{
+        href: string;
+    }>;
+    /** Fires when the current section changes (scroll spy or click), with its `href`. */
+    bsChange: EventEmitter<string>;
+    slotted: TocNode[];
+    private titleId;
+    private observer?;
+    private visible;
+    private order;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onSpyConfigChange(): void;
+    private tree;
+    private flat;
+    private readSlotted;
+    private targetOf;
+    private teardownSpy;
+    private setupSpy;
+    private setCurrent;
+    private onLinkClick;
+    private renderList;
+    render(): any;
+}
+export {};

package/dist/types/components/bs-table-of-contents/bs-table-of-contents.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTocArgs {
+    label: string;
+    hideTitle: boolean;
+    scrollSpy: boolean;
+    sticky: boolean;
+    rootMargin: string;
+}
+declare const meta: Meta<BsTocArgs>;
+export default meta;
+type Story = StoryObj<BsTocArgs>;
+export declare const Default: Story;
+export declare const SlottedAnchors: Story;

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

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

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsTagColor = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type BsTagSize = 'sm' | 'md' | 'lg';
+/**
+ * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
+ * neutral or coloured, optionally removable, and optionally a link.
+ *
+ * ## When to use
+ * - Metadata on a record: topics, categories, keywords, owners.
+ * - A removable tag in a list of applied values you edit one by one (`removable`).
+ * - A tag that leads to a filtered view or detail page (`href`).
+ *
+ * ## When not to use
+ * - A pure count or notification marker -- use `bs-badge`.
+ * - A read-only status pill with a leading icon -- use `bs-chip-informative`.
+ * - Toggling a filter on and off -- use `bs-chip-filter`; entering free text values -- use `bs-chip-input`.
+ *
+ * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
+ *
+ * @slot - The tag label.
+ * @slot icon - Optional leading icon (16px).
+ * @part container - The tag surface.
+ * @part icon - The icon wrapper.
+ * @part label - The label (a link when `href` is set).
+ * @part remove - The remove button (`bs-icon-button`), only when `removable`.
+ */
+export declare class BsTag {
+    el: HTMLElement;
+    /** Semantic colour. `neutral` is the default. */
+    color: BsTagColor;
+    /** Sizing scale. */
+    size: BsTagSize;
+    /** Shows a remove button that emits `bsRemove`. The consumer removes the tag. */
+    removable: boolean;
+    /** Turns the label into a link to this URL. */
+    href?: string;
+    /** Link target, only used with `href`. */
+    target?: string;
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel: string;
+    /** Fires when the remove button is activated. No payload; the consumer removes the element. */
+    bsRemove: EventEmitter<void>;
+    hasIcon: boolean;
+    labelText: string;
+    componentWillLoad(): void;
+    private readLabel;
+    private onRemove;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTagArgs {
+    label: string;
+    color: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size: 'sm' | 'md' | 'lg';
+    removable: boolean;
+    href: string;
+}
+declare const meta: Meta<BsTagArgs>;
+export default meta;
+type Story = StoryObj<BsTagArgs>;
+export declare const Default: Story;
+export declare const Colors: Story;
+export declare const Sizes: Story;
+export declare const Removable: Story;
+export declare const AsLink: Story;

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

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

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

@@ -0,0 +1,31 @@
+export type BsTextVariant = 'lead' | 'body' | 'small' | 'caption';
+export type BsTextTone = 'default' | 'secondary' | 'muted' | 'action' | 'link' | 'success' | 'info' | 'warning' | 'error' | 'inverse' | 'inherit';
+export type BsTextAs = 'p' | 'span' | 'div' | 'label' | 'small' | 'strong' | 'em';
+/**
+ * Body and caption text mapped to the typography tokens, with the element (`as`) chosen separately
+ * from the look (`variant`) and the colour (`tone`).
+ *
+ * Variants: `lead` 18px, `body` 16px, `small` 14px, `caption` 12px (`--bs-font-size-*`,
+ * `--bs-typography-font-family-body`).
+ *
+ * Composed from: nothing (leaf).
+ *
+ * ## When to use
+ * - Paragraphs, helper copy, captions and inline spans that should follow the type scale and theme.
+ *
+ * ## When not to use
+ * - Headings: use `bs-heading` so the document outline is right.
+ * - Code: use `bs-code-block`.
+ *
+ * @slot - The text.
+ * @part text - The rendered text element.
+ */
+export declare class BsText {
+    /** The rendered element. `span` (and `small`, `strong`, `em`, `label`) make the host inline. */
+    as: BsTextAs;
+    /** Visual style. */
+    variant: BsTextVariant;
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone: BsTextTone;
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsTextArgs {
+    as: string;
+    variant: 'lead' | 'body' | 'small' | 'caption';
+    tone: string;
+    text: string;
+}
+declare const meta: Meta<BsTextArgs>;
+export default meta;
+type Story = StoryObj<BsTextArgs>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Tones: Story;
+export declare const Inline: Story;

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

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