@brandsync/wc 0.1.0 → 1.1.0

package/dist/types/components.d.ts

@@ -16,6 +16,9 @@ import { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/
 import { BsCardSurface } from "./components/bs-card/bs-card";
 import { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
 import { BsCheckboxSize as BsCheckboxSize1 } from "./components/bs-checkbox/bs-checkbox";
+import { BsChipFilterSize } from "./components/bs-chip/bs-chip-filter/bs-chip-filter";
+import { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-chip/bs-chip-informative/bs-chip-informative";
+import { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
 import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 import { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
@@ -25,6 +28,8 @@ import { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
 import { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
 import { BsSliderType } from "./components/bs-slider/bs-slider";
 import { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
+import { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
+import { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 import { BsSwitchSize } from "./components/bs-switch/bs-switch";
 import { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
 import { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
@@ -39,6 +44,9 @@ export { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/
 export { BsCardSurface } from "./components/bs-card/bs-card";
 export { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
 export { BsCheckboxSize as BsCheckboxSize1 } from "./components/bs-checkbox/bs-checkbox";
+export { BsChipFilterSize } from "./components/bs-chip/bs-chip-filter/bs-chip-filter";
+export { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-chip/bs-chip-informative/bs-chip-informative";
+export { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
 export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
@@ -48,6 +56,8 @@ export { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
 export { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
 export { BsSliderType } from "./components/bs-slider/bs-slider";
 export { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
+export { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
+export { BsStepperDirection as BsStepperDirection1, BsStepperStepComputedState } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
 export { BsSwitchSize } from "./components/bs-switch/bs-switch";
 export { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
 export { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
@@ -775,6 +785,102 @@ export namespace Components {
          */
         "size": BsCheckboxSize1;
     }
+    /**
+     * A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a "Filter chip" row
+     * above a table or search results), optionally paired with a leading icon and/or a dropdown caret
+     * that signals it opens a menu of further options.
+     * ## When to use
+     * - Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with
+     *   your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a
+     *   menu itself).
+     * ## When not to use
+     * - A static, non-interactive status/category label -- use `bs-badge` instead.
+     * - A single primary action -- use `bs-button`.
+     */
+    interface BsChipFilter {
+        /**
+          * Accessible name override. The visible label (default slot) already gives the native button an accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it doesn't convey that activating the chip toggles a filter).
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed styling, and prevents toggling.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Shows a trailing dropdown caret, signaling this chip opens a menu of further options. Purely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself.
+          * @default false
+         */
+        "dropdown": boolean;
+        /**
+          * Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and reflected so consumers can target `bs-chip-filter[selected]` via CSS.
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay constant across sizes, matching the Figma spec exactly.
+          * @default 'lg'
+         */
+        "size": BsChipFilterSize;
+    }
+    /**
+     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
+     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
+     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * ## When to use
+     * - Conveying a category or status inline with other content, with more color options and an
+     *   optional icon than `bs-badge` offers.
+     * ## When not to use
+     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     */
+    interface BsChipInformative {
+        /**
+          * Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/ `--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is set -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have.
+          * @default 'neutral'
+         */
+        "color": BsChipInformativeColor;
+        /**
+          * Overrides `color` with the disabled token set, regardless of its value. Reflected so `:host([disabled])` can apply it in CSS.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Sizing scale. Controls height and font-size/line-height together -- unlike `bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size="sm"`, not just a shorter pill.
+          * @default 'lg'
+         */
+        "size": BsChipInformativeSize;
+    }
+    /**
+     * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
+     * a selected filter value, an invited email address), optionally paired with a leading icon or
+     * avatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and
+     * a separate trailing button removes the chip entirely.
+     * ## When to use
+     * - Representing one entry in a list the user built themselves (tags, recipients, multi-select
+     *   values) that they need to be able to remove individually.
+     * ## When not to use
+     * - A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.
+     * - A static, non-interactive status/category label -- use `bs-badge`.
+     */
+    interface BsChipInput {
+        /**
+          * Disables both the body and the remove button, and reflected so `:host([disabled])` can apply the disabled token set (a plain CSS pseudo-class can't target the host itself here, since :host isn't a native form control).
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and reflected so consumers can target `bs-chip-input[selected]` via CSS.
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay constant across sizes, matching the Figma spec exactly.
+          * @default 'lg'
+         */
+        "size": BsChipInputSize;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -1682,6 +1788,98 @@ export namespace Components {
          */
         "version"?: string;
     }
+    /**
+     * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+     * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+     * disabled, connected by a rail between them.
+     * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+     * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+     * of those change or the slotted children themselves change -- the same "container pushes state
+     * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+     * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+     * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+     * This is a static status display, not an interactive control -- Figma's spec shows no
+     * hover/pressed treatment on any step, so nothing here is clickable.
+     * ## When to use
+     * - Showing where the user is in a fixed, ordered, multi-step flow.
+     * ## When not to use
+     * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+     *   already known.
+     * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+     *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+     */
+    interface BsStepper {
+        /**
+          * 0-indexed: which step is current. Every step before this index reads as "done" (unless that step's own `error`/`disabled` overrides it), every step after reads as "enabled".
+          * @default 0
+         */
+        "currentStep": number;
+        /**
+          * `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical` (icon beside name/description, connected by a vertical rail). Propagated to every slotted `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`) means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any wrapper div.
+          * @default 'horizontal'
+         */
+        "direction": BsStepperDirection;
+        /**
+          * Whether each step's description renders at all. Propagated to every slotted `bs-stepper-step`.
+          * @default true
+         */
+        "showDescription": boolean;
+    }
+    /**
+     * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+     * description, connected to the next step by a trailing rail.
+     * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+     * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+     * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+     * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+     * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+     * read as "done", but `error` on that step wins regardless.
+     * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+     * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+     * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+     * position, not CSS `:last-of-type`, is what actually needs checking here too).
+     * ## When to use
+     * - As a child of `<bs-stepper>`, one per step in the sequence.
+     * ## When not to use
+     * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+     *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+     */
+    interface BsStepperStep {
+        /**
+          * Set automatically by the parent `<bs-stepper>` from this step's position relative to its `currentStep` -- see the class doc above. Can be set directly for a standalone step.
+          * @default 'enabled'
+         */
+        "computedState": BsStepperStepComputedState;
+        /**
+          * Optional supporting text below the name. Only rendered when `showDescription` (propagated from the parent `<bs-stepper>`) is also true.
+         */
+        "description"?: string;
+        /**
+          * Set automatically by the parent `<bs-stepper>`, propagated to every slotted step.
+          * @default 'horizontal'
+         */
+        "direction": BsStepperDirection1;
+        /**
+          * Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority over `error` if both are somehow set.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Shows the error treatment for this step, regardless of its `computedState`.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * This step's name/title.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Set automatically by the parent `<bs-stepper>`, propagated to every slotted step.
+          * @default true
+         */
+        "showDescription": boolean;
+    }
     /**
      * A toggle switch for an on/off setting that takes effect immediately (no explicit form
      * submission required).
@@ -1846,6 +2044,14 @@ export interface BsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsCheckboxElement;
 }
+export interface BsChipFilterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChipFilterElement;
+}
+export interface BsChipInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChipInputElement;
+}
 export interface BsComposerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsComposerElement;
@@ -2550,6 +2756,82 @@ declare global {
         prototype: HTMLBsCheckboxSkeletonElement;
         new (): HTMLBsCheckboxSkeletonElement;
     };
+    interface HTMLBsChipFilterElementEventMap {
+        "bsChange": boolean;
+    }
+    /**
+     * A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a "Filter chip" row
+     * above a table or search results), optionally paired with a leading icon and/or a dropdown caret
+     * that signals it opens a menu of further options.
+     * ## When to use
+     * - Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with
+     *   your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a
+     *   menu itself).
+     * ## When not to use
+     * - A static, non-interactive status/category label -- use `bs-badge` instead.
+     * - A single primary action -- use `bs-button`.
+     */
+    interface HTMLBsChipFilterElement extends Components.BsChipFilter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChipFilterElementEventMap>(type: K, listener: (this: HTMLBsChipFilterElement, ev: BsChipFilterCustomEvent<HTMLBsChipFilterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsChipFilterElementEventMap>(type: K, listener: (this: HTMLBsChipFilterElement, ev: BsChipFilterCustomEvent<HTMLBsChipFilterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsChipFilterElement: {
+        prototype: HTMLBsChipFilterElement;
+        new (): HTMLBsChipFilterElement;
+    };
+    /**
+     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
+     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
+     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * ## When to use
+     * - Conveying a category or status inline with other content, with more color options and an
+     *   optional icon than `bs-badge` offers.
+     * ## When not to use
+     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     */
+    interface HTMLBsChipInformativeElement extends Components.BsChipInformative, HTMLStencilElement {
+    }
+    var HTMLBsChipInformativeElement: {
+        prototype: HTMLBsChipInformativeElement;
+        new (): HTMLBsChipInformativeElement;
+    };
+    interface HTMLBsChipInputElementEventMap {
+        "bsChange": boolean;
+        "bsRemove": void;
+    }
+    /**
+     * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
+     * a selected filter value, an invited email address), optionally paired with a leading icon or
+     * avatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and
+     * a separate trailing button removes the chip entirely.
+     * ## When to use
+     * - Representing one entry in a list the user built themselves (tags, recipients, multi-select
+     *   values) that they need to be able to remove individually.
+     * ## When not to use
+     * - A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.
+     * - A static, non-interactive status/category label -- use `bs-badge`.
+     */
+    interface HTMLBsChipInputElement extends Components.BsChipInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChipInputElementEventMap>(type: K, listener: (this: HTMLBsChipInputElement, ev: BsChipInputCustomEvent<HTMLBsChipInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsChipInputElementEventMap>(type: K, listener: (this: HTMLBsChipInputElement, ev: BsChipInputCustomEvent<HTMLBsChipInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsChipInputElement: {
+        prototype: HTMLBsChipInputElement;
+        new (): HTMLBsChipInputElement;
+    };
     interface HTMLBsComposerElementEventMap {
         "bsInput": string;
         "bsSubmit": void;
@@ -3234,6 +3516,57 @@ declare global {
         prototype: HTMLBsSourceLinkElement;
         new (): HTMLBsSourceLinkElement;
     };
+    /**
+     * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+     * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+     * disabled, connected by a rail between them.
+     * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+     * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+     * of those change or the slotted children themselves change -- the same "container pushes state
+     * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+     * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+     * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+     * This is a static status display, not an interactive control -- Figma's spec shows no
+     * hover/pressed treatment on any step, so nothing here is clickable.
+     * ## When to use
+     * - Showing where the user is in a fixed, ordered, multi-step flow.
+     * ## When not to use
+     * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+     *   already known.
+     * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+     *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+     */
+    interface HTMLBsStepperElement extends Components.BsStepper, HTMLStencilElement {
+    }
+    var HTMLBsStepperElement: {
+        prototype: HTMLBsStepperElement;
+        new (): HTMLBsStepperElement;
+    };
+    /**
+     * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+     * description, connected to the next step by a trailing rail.
+     * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+     * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+     * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+     * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+     * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+     * read as "done", but `error` on that step wins regardless.
+     * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+     * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+     * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+     * position, not CSS `:last-of-type`, is what actually needs checking here too).
+     * ## When to use
+     * - As a child of `<bs-stepper>`, one per step in the sequence.
+     * ## When not to use
+     * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+     *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+     */
+    interface HTMLBsStepperStepElement extends Components.BsStepperStep, HTMLStencilElement {
+    }
+    var HTMLBsStepperStepElement: {
+        prototype: HTMLBsStepperStepElement;
+        new (): HTMLBsStepperStepElement;
+    };
     interface HTMLBsSwitchElementEventMap {
         "bsChange": boolean;
     }
@@ -3373,6 +3706,9 @@ declare global {
         "bs-chatbot-suggestion-button": HTMLBsChatbotSuggestionButtonElement;
         "bs-checkbox": HTMLBsCheckboxElement;
         "bs-checkbox-skeleton": HTMLBsCheckboxSkeletonElement;
+        "bs-chip-filter": HTMLBsChipFilterElement;
+        "bs-chip-informative": HTMLBsChipInformativeElement;
+        "bs-chip-input": HTMLBsChipInputElement;
         "bs-composer": HTMLBsComposerElement;
         "bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
         "bs-data-table": HTMLBsDataTableElement;
@@ -3391,6 +3727,8 @@ declare global {
         "bs-slider": HTMLBsSliderElement;
         "bs-snackbar": HTMLBsSnackbarElement;
         "bs-source-link": HTMLBsSourceLinkElement;
+        "bs-stepper": HTMLBsStepperElement;
+        "bs-stepper-step": HTMLBsStepperStepElement;
         "bs-switch": HTMLBsSwitchElement;
         "bs-tab": HTMLBsTabElement;
         "bs-tabs": HTMLBsTabsElement;
@@ -4197,6 +4535,114 @@ declare namespace LocalJSX {
          */
         "size"?: BsCheckboxSize1;
     }
+    /**
+     * A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a "Filter chip" row
+     * above a table or search results), optionally paired with a leading icon and/or a dropdown caret
+     * that signals it opens a menu of further options.
+     * ## When to use
+     * - Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with
+     *   your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a
+     *   menu itself).
+     * ## When not to use
+     * - A static, non-interactive status/category label -- use `bs-badge` instead.
+     * - A single primary action -- use `bs-button`.
+     */
+    interface BsChipFilter {
+        /**
+          * Accessible name override. The visible label (default slot) already gives the native button an accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it doesn't convey that activating the chip toggles a filter).
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed styling, and prevents toggling.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Shows a trailing dropdown caret, signaling this chip opens a menu of further options. Purely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself.
+          * @default false
+         */
+        "dropdown"?: boolean;
+        /**
+          * Emitted when `selected` changes via user interaction, with the new value.
+         */
+        "onBsChange"?: (event: BsChipFilterCustomEvent<boolean>) => void;
+        /**
+          * Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and reflected so consumers can target `bs-chip-filter[selected]` via CSS.
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay constant across sizes, matching the Figma spec exactly.
+          * @default 'lg'
+         */
+        "size"?: BsChipFilterSize;
+    }
+    /**
+     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
+     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
+     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * ## When to use
+     * - Conveying a category or status inline with other content, with more color options and an
+     *   optional icon than `bs-badge` offers.
+     * ## When not to use
+     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     */
+    interface BsChipInformative {
+        /**
+          * Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/ `--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is set -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have.
+          * @default 'neutral'
+         */
+        "color"?: BsChipInformativeColor;
+        /**
+          * Overrides `color` with the disabled token set, regardless of its value. Reflected so `:host([disabled])` can apply it in CSS.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Sizing scale. Controls height and font-size/line-height together -- unlike `bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size="sm"`, not just a shorter pill.
+          * @default 'lg'
+         */
+        "size"?: BsChipInformativeSize;
+    }
+    /**
+     * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
+     * a selected filter value, an invited email address), optionally paired with a leading icon or
+     * avatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and
+     * a separate trailing button removes the chip entirely.
+     * ## When to use
+     * - Representing one entry in a list the user built themselves (tags, recipients, multi-select
+     *   values) that they need to be able to remove individually.
+     * ## When not to use
+     * - A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.
+     * - A static, non-interactive status/category label -- use `bs-badge`.
+     */
+    interface BsChipInput {
+        /**
+          * Disables both the body and the remove button, and reflected so `:host([disabled])` can apply the disabled token set (a plain CSS pseudo-class can't target the host itself here, since :host isn't a native form control).
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when `selected` changes via clicking the body, with the new value.
+         */
+        "onBsChange"?: (event: BsChipInputCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the remove button is clicked. No payload -- unlike bs-input's own chip-entry mode (which tracks a `chips: string[]` array internally and can identify which string was removed), a standalone chip doesn't know its own "value" to a consumer; whatever's rendering a list of these already has that context via closure/key.
+         */
+        "onBsRemove"?: (event: BsChipInputCustomEvent<void>) => void;
+        /**
+          * Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and reflected so consumers can target `bs-chip-input[selected]` via CSS.
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay constant across sizes, matching the Figma spec exactly.
+          * @default 'lg'
+         */
+        "size"?: BsChipInputSize;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -5213,6 +5659,98 @@ declare namespace LocalJSX {
          */
         "version"?: string;
     }
+    /**
+     * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+     * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+     * disabled, connected by a rail between them.
+     * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+     * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+     * of those change or the slotted children themselves change -- the same "container pushes state
+     * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+     * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+     * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+     * This is a static status display, not an interactive control -- Figma's spec shows no
+     * hover/pressed treatment on any step, so nothing here is clickable.
+     * ## When to use
+     * - Showing where the user is in a fixed, ordered, multi-step flow.
+     * ## When not to use
+     * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+     *   already known.
+     * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+     *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+     */
+    interface BsStepper {
+        /**
+          * 0-indexed: which step is current. Every step before this index reads as "done" (unless that step's own `error`/`disabled` overrides it), every step after reads as "enabled".
+          * @default 0
+         */
+        "currentStep"?: number;
+        /**
+          * `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical` (icon beside name/description, connected by a vertical rail). Propagated to every slotted `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`) means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any wrapper div.
+          * @default 'horizontal'
+         */
+        "direction"?: BsStepperDirection;
+        /**
+          * Whether each step's description renders at all. Propagated to every slotted `bs-stepper-step`.
+          * @default true
+         */
+        "showDescription"?: boolean;
+    }
+    /**
+     * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+     * description, connected to the next step by a trailing rail.
+     * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+     * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+     * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+     * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+     * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+     * read as "done", but `error` on that step wins regardless.
+     * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+     * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+     * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+     * position, not CSS `:last-of-type`, is what actually needs checking here too).
+     * ## When to use
+     * - As a child of `<bs-stepper>`, one per step in the sequence.
+     * ## When not to use
+     * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+     *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+     */
+    interface BsStepperStep {
+        /**
+          * Set automatically by the parent `<bs-stepper>` from this step's position relative to its `currentStep` -- see the class doc above. Can be set directly for a standalone step.
+          * @default 'enabled'
+         */
+        "computedState"?: BsStepperStepComputedState;
+        /**
+          * Optional supporting text below the name. Only rendered when `showDescription` (propagated from the parent `<bs-stepper>`) is also true.
+         */
+        "description"?: string;
+        /**
+          * Set automatically by the parent `<bs-stepper>`, propagated to every slotted step.
+          * @default 'horizontal'
+         */
+        "direction"?: BsStepperDirection1;
+        /**
+          * Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority over `error` if both are somehow set.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Shows the error treatment for this step, regardless of its `computedState`.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * This step's name/title.
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Set automatically by the parent `<bs-stepper>`, propagated to every slotted step.
+          * @default true
+         */
+        "showDescription"?: boolean;
+    }
     /**
      * A toggle switch for an on/off setting that takes effect immediately (no explicit form
      * submission required).
@@ -5446,6 +5984,23 @@ declare namespace LocalJSX {
     interface BsCheckboxSkeletonAttributes {
         "size": BsCheckboxSize;
     }
+    interface BsChipFilterAttributes {
+        "size": BsChipFilterSize;
+        "selected": boolean;
+        "dropdown": boolean;
+        "disabled": boolean;
+        "ariaLabel": string | null;
+    }
+    interface BsChipInformativeAttributes {
+        "color": BsChipInformativeColor;
+        "size": BsChipInformativeSize;
+        "disabled": boolean;
+    }
+    interface BsChipInputAttributes {
+        "size": BsChipInputSize;
+        "selected": boolean;
+        "disabled": boolean;
+    }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
         "placeholder": string;
@@ -5584,6 +6139,20 @@ declare namespace LocalJSX {
         "href": string;
         "target": string;
     }
+    interface BsStepperAttributes {
+        "currentStep": number;
+        "direction": BsStepperDirection;
+        "showDescription": boolean;
+    }
+    interface BsStepperStepAttributes {
+        "name": string;
+        "description": string;
+        "error": boolean;
+        "disabled": boolean;
+        "computedState": BsStepperStepComputedState;
+        "direction": BsStepperDirection;
+        "showDescription": boolean;
+    }
     interface BsSwitchAttributes {
         "size": BsSwitchSize;
         "checked": boolean;
@@ -5625,6 +6194,9 @@ declare namespace LocalJSX {
         "bs-chatbot-suggestion-button": Omit<BsChatbotSuggestionButton, keyof BsChatbotSuggestionButtonAttributes> & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes]?: BsChatbotSuggestionButton[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `attr:${K}`]?: BsChatbotSuggestionButtonAttributes[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `prop:${K}`]?: BsChatbotSuggestionButton[K] };
         "bs-checkbox": Omit<BsCheckbox, keyof BsCheckboxAttributes> & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes]?: BsCheckbox[K] } & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes as `attr:${K}`]?: BsCheckboxAttributes[K] } & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes as `prop:${K}`]?: BsCheckbox[K] };
         "bs-checkbox-skeleton": Omit<BsCheckboxSkeleton, keyof BsCheckboxSkeletonAttributes> & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes]?: BsCheckboxSkeleton[K] } & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes as `attr:${K}`]?: BsCheckboxSkeletonAttributes[K] } & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes as `prop:${K}`]?: BsCheckboxSkeleton[K] };
+        "bs-chip-filter": Omit<BsChipFilter, keyof BsChipFilterAttributes> & { [K in keyof BsChipFilter & keyof BsChipFilterAttributes]?: BsChipFilter[K] } & { [K in keyof BsChipFilter & keyof BsChipFilterAttributes as `attr:${K}`]?: BsChipFilterAttributes[K] } & { [K in keyof BsChipFilter & keyof BsChipFilterAttributes as `prop:${K}`]?: BsChipFilter[K] };
+        "bs-chip-informative": Omit<BsChipInformative, keyof BsChipInformativeAttributes> & { [K in keyof BsChipInformative & keyof BsChipInformativeAttributes]?: BsChipInformative[K] } & { [K in keyof BsChipInformative & keyof BsChipInformativeAttributes as `attr:${K}`]?: BsChipInformativeAttributes[K] } & { [K in keyof BsChipInformative & keyof BsChipInformativeAttributes as `prop:${K}`]?: BsChipInformative[K] };
+        "bs-chip-input": Omit<BsChipInput, keyof BsChipInputAttributes> & { [K in keyof BsChipInput & keyof BsChipInputAttributes]?: BsChipInput[K] } & { [K in keyof BsChipInput & keyof BsChipInputAttributes as `attr:${K}`]?: BsChipInputAttributes[K] } & { [K in keyof BsChipInput & keyof BsChipInputAttributes as `prop:${K}`]?: BsChipInput[K] };
         "bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
         "bs-composer-status-banner": Omit<BsComposerStatusBanner, keyof BsComposerStatusBannerAttributes> & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes]?: BsComposerStatusBanner[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `attr:${K}`]?: BsComposerStatusBannerAttributes[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `prop:${K}`]?: BsComposerStatusBanner[K] };
         "bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
@@ -5643,6 +6215,8 @@ declare namespace LocalJSX {
         "bs-slider": Omit<BsSlider, keyof BsSliderAttributes> & { [K in keyof BsSlider & keyof BsSliderAttributes]?: BsSlider[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `attr:${K}`]?: BsSliderAttributes[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `prop:${K}`]?: BsSlider[K] };
         "bs-snackbar": Omit<BsSnackbar, keyof BsSnackbarAttributes> & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes]?: BsSnackbar[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `attr:${K}`]?: BsSnackbarAttributes[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `prop:${K}`]?: BsSnackbar[K] };
         "bs-source-link": Omit<BsSourceLink, keyof BsSourceLinkAttributes> & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes]?: BsSourceLink[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `attr:${K}`]?: BsSourceLinkAttributes[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `prop:${K}`]?: BsSourceLink[K] };
+        "bs-stepper": Omit<BsStepper, keyof BsStepperAttributes> & { [K in keyof BsStepper & keyof BsStepperAttributes]?: BsStepper[K] } & { [K in keyof BsStepper & keyof BsStepperAttributes as `attr:${K}`]?: BsStepperAttributes[K] } & { [K in keyof BsStepper & keyof BsStepperAttributes as `prop:${K}`]?: BsStepper[K] };
+        "bs-stepper-step": Omit<BsStepperStep, keyof BsStepperStepAttributes> & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes]?: BsStepperStep[K] } & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes as `attr:${K}`]?: BsStepperStepAttributes[K] } & { [K in keyof BsStepperStep & keyof BsStepperStepAttributes as `prop:${K}`]?: BsStepperStep[K] };
         "bs-switch": Omit<BsSwitch, keyof BsSwitchAttributes> & { [K in keyof BsSwitch & keyof BsSwitchAttributes]?: BsSwitch[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `attr:${K}`]?: BsSwitchAttributes[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `prop:${K}`]?: BsSwitch[K] };
         "bs-tab": Omit<BsTab, keyof BsTabAttributes> & { [K in keyof BsTab & keyof BsTabAttributes]?: BsTab[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `attr:${K}`]?: BsTabAttributes[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `prop:${K}`]?: BsTab[K] };
         "bs-tabs": Omit<BsTabs, keyof BsTabsAttributes> & { [K in keyof BsTabs & keyof BsTabsAttributes]?: BsTabs[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `attr:${K}`]?: BsTabsAttributes[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `prop:${K}`]?: BsTabs[K] };
@@ -6103,6 +6677,44 @@ declare module "@stencil/core" {
              * `96px`.
              */
             "bs-checkbox-skeleton": LocalJSX.IntrinsicElements["bs-checkbox-skeleton"] & JSXBase.HTMLAttributes<HTMLBsCheckboxSkeletonElement>;
+            /**
+             * A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a "Filter chip" row
+             * above a table or search results), optionally paired with a leading icon and/or a dropdown caret
+             * that signals it opens a menu of further options.
+             * ## When to use
+             * - Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with
+             *   your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a
+             *   menu itself).
+             * ## When not to use
+             * - A static, non-interactive status/category label -- use `bs-badge` instead.
+             * - A single primary action -- use `bs-button`.
+             */
+            "bs-chip-filter": LocalJSX.IntrinsicElements["bs-chip-filter"] & JSXBase.HTMLAttributes<HTMLBsChipFilterElement>;
+            /**
+             * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
+             * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
+             * -- no click/select/remove behavior, no hover/focus/pressed states.
+             * ## When to use
+             * - Conveying a category or status inline with other content, with more color options and an
+             *   optional icon than `bs-badge` offers.
+             * ## When not to use
+             * - Anything clickable/selectable -- use `bs-chip-filter`.
+             * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+             */
+            "bs-chip-informative": LocalJSX.IntrinsicElements["bs-chip-informative"] & JSXBase.HTMLAttributes<HTMLBsChipInformativeElement>;
+            /**
+             * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
+             * a selected filter value, an invited email address), optionally paired with a leading icon or
+             * avatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and
+             * a separate trailing button removes the chip entirely.
+             * ## When to use
+             * - Representing one entry in a list the user built themselves (tags, recipients, multi-select
+             *   values) that they need to be able to remove individually.
+             * ## When not to use
+             * - A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.
+             * - A static, non-interactive status/category label -- use `bs-badge`.
+             */
+            "bs-chip-input": LocalJSX.IntrinsicElements["bs-chip-input"] & JSXBase.HTMLAttributes<HTMLBsChipInputElement>;
             /**
              * A chat composer input for Genie AI-style conversational interfaces: a text field
              * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -6526,6 +7138,47 @@ declare module "@stencil/core" {
              * `--bs-text-secondary`.
              */
             "bs-source-link": LocalJSX.IntrinsicElements["bs-source-link"] & JSXBase.HTMLAttributes<HTMLBsSourceLinkElement>;
+            /**
+             * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+             * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+             * disabled, connected by a rail between them.
+             * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+             * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+             * of those change or the slotted children themselves change -- the same "container pushes state
+             * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+             * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+             * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+             * This is a static status display, not an interactive control -- Figma's spec shows no
+             * hover/pressed treatment on any step, so nothing here is clickable.
+             * ## When to use
+             * - Showing where the user is in a fixed, ordered, multi-step flow.
+             * ## When not to use
+             * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+             *   already known.
+             * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+             *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+             */
+            "bs-stepper": LocalJSX.IntrinsicElements["bs-stepper"] & JSXBase.HTMLAttributes<HTMLBsStepperElement>;
+            /**
+             * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+             * description, connected to the next step by a trailing rail.
+             * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+             * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+             * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+             * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+             * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+             * read as "done", but `error` on that step wins regardless.
+             * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+             * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+             * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+             * position, not CSS `:last-of-type`, is what actually needs checking here too).
+             * ## When to use
+             * - As a child of `<bs-stepper>`, one per step in the sequence.
+             * ## When not to use
+             * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+             *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+             */
+            "bs-stepper-step": LocalJSX.IntrinsicElements["bs-stepper-step"] & JSXBase.HTMLAttributes<HTMLBsStepperStepElement>;
             /**
              * A toggle switch for an on/off setting that takes effect immediately (no explicit form
              * submission required).