@brandsync/wc 1.18.0 → 1.20.0

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

@@ -5,7 +5,9 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
  * share the same label/description/error/icon-slot chrome.
  *
- * Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
+ * Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`), `bs-chip-informative` + `bs-icon-button` (`type="chip"`),
+ * and `bs-icon-button` + `bs-spinner` (`type="combobox"` clear button / loading indicator; its listbox is a
+ * hand-built `role="listbox"` because `bs-menu` is `role="menu"` and cannot host `option`s).
  *
  * ## When to use
  * - Collecting a single line of free-text, email, password, or numeric input.
@@ -28,13 +30,15 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
  * @part field - The bordered field wrapper containing the icon(s) and native control(s).
  *   `type="initials"` renders this part on TWO separate elements instead of one (the title
- *   `<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two
+ *   picker's own small box, and the name `<input>`'s own box) -- Figma specs these as two
  *   genuinely independent bordered containers with a gap between them, not one shared field the
- *   way every other composite type (`country` included) renders, so `::part(field)` reaches
+ *   way every other composite type renders, so `::part(field)` reaches
  *   whichever of the two a given selector context matches, same "multiple elements, one shared
  *   part name" convention as `bs-attachment`'s own `star` part.
  * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
- *   `options` is non-empty.
+ *   `options` is non-empty; for `type="combobox"` the popup (listbox + status message) while `open`.
+ * @part option - A single `role="option"` row of the `type="combobox"` listbox.
+ * @part clear - The clear button (`bs-icon-button`) of `type="combobox"`.
  * @part label - The `<label>` element.
  * @part required - The red `*` rendered after the label text when `required` is set.
  * @part icon - The leading icon wrapper element.
@@ -65,8 +69,12 @@ export declare class BsInput {
     incrementLabel: string;
     /** Accessible name of the number stepper's decrement button. */
     decrementLabel: string;
-    type: 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin';
+    type: 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin' | 'combobox';
     label?: string;
+    /** Accessible name for the control, used only when no visible `label` is set (e.g. a search field
+     * with no visible label). Passed to the inner native control, because an `aria-label` on the
+     * `<bs-input>` host cannot name an element inside its shadow root. */
+    ariaLabel: string | null;
     placeholder?: string;
     description?: string;
     error?: string;
@@ -80,7 +88,7 @@ export declare class BsInput {
     min?: number;
     /** Maximum value for `type="number"`'s stepper buttons. */
     max?: number;
-    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+    /** Options for `type="select"` (rendered as `role="option"` rows of an in-shadow listbox) and `type="dropdown"` (rendered
      * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
      * attribute -- see CONVENTIONS.md's non-string props rule. */
     options: {
@@ -99,6 +107,8 @@ export declare class BsInput {
      * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
      * Stencil warns against shadowing it with a component `@Prop`. */
     initialsTitle: string;
+    /** `type="initials"`: accessible name of the title picker (its visible text is just the title). */
+    titleLabel: string;
     /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
      * attribute -- see CONVENTIONS.md's non-string props rule. */
     countryOptions: {
@@ -108,9 +118,26 @@ export declare class BsInput {
     }[];
     /** Current selected country code for `type="country"`. */
     country: string;
+    /** `type="country"`: accessible name of the country picker (its visible content is just the flag). */
+    countryLabel: string;
     /** Number of cells for `type="pin"`. */
     length: number;
-    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+    /** `type="combobox"`: shows a loading indicator and, while no options match, a loading message
+     * in the popup instead of "no results". Use while fetching `options` asynchronously. */
+    loading: boolean;
+    /** `type="combobox"`: when true (default) `options` are filtered client-side by whether the label
+     * contains the typed text. Set false when you supply already-filtered results yourself (e.g. from
+     * a server) in response to `bsInput`. */
+    filterOptions: boolean;
+    /** `type="combobox"`: text of the popup row shown when no option matches. */
+    noResultsLabel: string;
+    /** `type="combobox"`: text of the popup row shown while `loading` and nothing matches. */
+    loadingLabel: string;
+    /** `type="combobox"`: accessible name of the clear button. */
+    clearLabel: string;
+    /** `type="date"`: accessible name of the default calendar button that opens the native picker. */
+    openPickerLabel: string;
+    /** Whether the `type="dropdown"` / `type="combobox"` popup is open. Reflects to an attribute so consumers can style
      * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
      * of `bs-menu-item`s is rendered below the field. */
     open: boolean;
@@ -120,12 +147,18 @@ export declare class BsInput {
      * shell-only limitation. */
     bsOpen: EventEmitter<boolean>;
     /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    /** Emitted when an option is chosen for `type="combobox"` (click or Enter), with the option's
+     * `{ label, value }`. `value` of the component itself becomes the option's label (the text shown). */
+    bsOptionSelect: EventEmitter<{
+        label: string;
+        value: string;
+    }>;
     bsChipAdd: EventEmitter<string>;
     /** Emitted when a chip's remove button is clicked for `type="chip"`. */
     bsChipRemove: EventEmitter<string>;
-    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    /** Emitted when a title is chosen from the picker for `type="initials"`. */
     bsTitleChange: EventEmitter<string>;
-    /** Emitted when the country `<select>` changes for `type="country"`. */
+    /** Emitted when a country is chosen from the picker for `type="country"`. */
     bsCountryChange: EventEmitter<string>;
     /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
      * up space in the field when there's actually an icon (same pattern as `bs-button`). */
@@ -138,7 +171,23 @@ export declare class BsInput {
     passwordVisible: boolean;
     /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
     chipDraft: string;
+    /** Index into the visible (filtered) options of the active option for `type="combobox"`, -1 for none. */
+    activeIndex: number;
+    /** True once the user has typed in the `type="combobox"` input, so opening it with a value that is
+     * already a chosen label still lists every option instead of only that one. */
+    comboFiltering: boolean;
     private pinInputs;
+    private get isPopupType();
+    /** `select`, `initials` (title) and `country` render a trigger button plus an in-shadow listbox
+     * styled like `bs-menu`, instead of a native `<select>` whose popup cannot be themed. */
+    private get isPickerType();
+    private typeahead;
+    private typeaheadTimer?;
+    private get pickerItems();
+    private get pickerSelectedValue();
+    private get pickerSelectedIndex();
+    private get visibleOptions();
+    componentDidRender(): void;
     /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
      * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
      * alone isn't enough for a slot that starts (and stays) empty. */
@@ -155,6 +204,11 @@ export declare class BsInput {
     private onIconSlotchange;
     private onEndIconSlotchange;
     private onInput;
+    private setOpen;
+    private onComboboxKeydown;
+    private selectComboOption;
+    private onClear;
+    private onDatePickerOpen;
     private onChange;
     private clampNumber;
     private onStepperIncrement;
@@ -171,11 +225,18 @@ export declare class BsInput {
      * a click outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across
      * the `bs-menu-item` shadow boundary too. */
     onHostFocusOut(ev: FocusEvent): void;
+    /** Closes an open picker on a click anywhere outside the component (focusout alone misses clicks
+     * on non-focusable page areas in some browsers). */
+    onDocumentClick(ev: MouseEvent): void;
     private onChipDraftInput;
     private onChipDraftKeydown;
     private onChipRemove;
-    private onTitleChange;
-    private onCountryChange;
+    private pickerCommit;
+    private pickerOpen;
+    private onPickerToggle;
+    private onPickerOptionClick;
+    private onPickerKeyup;
+    private onPickerKeydown;
     private onPinInput;
     private onPinKeydown;
     private get showsEndIconArea();
@@ -183,13 +244,23 @@ export declare class BsInput {
     private renderIconContent;
     private renderEndIconContent;
     private renderStandardControl;
+    /** An image URL flag renders as `<img>`; anything else (an emoji) as text. */
+    private renderFlag;
+    /** The trigger button of the select/title/country pickers: a focusable `role="combobox"` whose
+     * listbox lives in this same shadow root so aria-controls/aria-activedescendant resolve. */
+    private renderPickerTrigger;
+    private renderPickerPopup;
     private renderSelectControl;
     private renderTextareaControl;
     private renderChipControl;
     private renderInitialsField;
+    private renderCountryField;
     private renderSelectChevron;
-    private renderCountryControl;
     private renderControl;
+    private onComboboxFieldClick;
+    /** The `type="combobox"` popup. Rendered inside this shadow root so `aria-controls` and
+     * `aria-activedescendant` on the input resolve to real elements. */
+    private renderComboboxPopup;
     private renderField;
     private renderPinField;
     render(): any;

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-type BsInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin';
+type BsInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin' | 'combobox';
 interface BsInputArgs {
     type: BsInputType;
     label: string;
@@ -26,6 +26,8 @@ export declare const NumberInput: Story;
 export declare const Password: Story;
 export declare const DateInput: Story;
 export declare const Dropdown: Story;
+export declare const Combobox: Story;
+export declare const ComboboxLoading: Story;
 export declare const Select: Story;
 export declare const TextArea: Story;
 export declare const Chip: Story;

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

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

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

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsLinkVariant = 'inline' | 'standalone' | 'button';
+/**
+ * A navigation link: either text (inline within a sentence, or standalone with a 44px target) or a
+ * link styled as a primary button. Always renders a real `<a href>`.
+ *
+ * Built from: hand-built `<a>` (leaf). `bs-button` renders a `<button>` and has no `href`; nesting a
+ * button in an anchor is invalid HTML, so the `button` variant reuses the primary button's colour
+ * tokens instead. Known gap: add `href` support to `bs-button` and compose it here.
+ *
+ * ## When to use
+ * - Navigating to another page or an external resource.
+ *
+ * ## When not to use
+ * - Triggering an action on the current page (use `bs-button`).
+ *
+ * @slot - Default slot: the link text.
+ * @part link - The anchor element.
+ * @part label - The text wrapper.
+ * @part icon - The external-link icon.
+ */
+export declare class BsLink {
+    /** Destination. */
+    href?: string;
+    /** Browsing context (e.g. `_blank`). `_blank` implies the external icon. */
+    target?: string;
+    /** Link relationship. Defaults to `noopener noreferrer` when `target="_blank"`. */
+    rel?: string;
+    /** `inline` sits in running text; `standalone` has a 44px minimum touch target; `button` is
+     * styled as a primary button (also 44px). */
+    variant: BsLinkVariant;
+    /** Shows the external-link icon (always shown for `target="_blank"`). */
+    external: boolean;
+    /** Visually hidden suffix announced for links that open in a new tab. */
+    externalLabel: string;
+    /** Marks the link as the current page (`aria-current="page"`). */
+    current: boolean;
+    /** Accessible name override (needed on the host, as `aria-label` does not cross the shadow boundary). */
+    ariaLabel: string | null;
+    /** Fires on a plain primary click before the browser navigates. **Cancelable**: call
+     * `preventDefault()` to route it yourself (SPA router). Detail is `{ href }`. Ctrl/cmd/shift/alt
+     * and middle clicks are left to the browser. Bubbles and is composed. */
+    bsNavigate: EventEmitter<{
+        href: string;
+    }>;
+    private onClick;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsLinkVariant = 'inline' | 'standalone' | 'button';
+interface BsLinkArgs {
+    variant: BsLinkVariant;
+    href: string;
+    target: string;
+    external: boolean;
+    current: boolean;
+    label: string;
+}
+declare const meta: Meta<BsLinkArgs>;
+export default meta;
+type Story = StoryObj<BsLinkArgs>;
+export declare const Default: Story;
+export declare const Inline: Story;
+export declare const Standalone: Story;
+export declare const External: Story;
+export declare const LinkButton: Story;
+export declare const Current: Story;

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

@@ -11,6 +11,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * - Navigation between app sections -- use `bs-navigation-drawer`.
  * - Multi-column, sortable or paged data -- use `bs-data-table`.
  *
+ * `variant` switches between a plain list, a bulleted list and a numbered list; `dividers` gives a divided
+ * list. The list keeps real list semantics in every variant (`role="list"` with `listitem` rows); the bullet
+ * or number is drawn by the row and hidden from assistive technology, which announces position itself.
+ *
  * Built from `bs-list-item` children (light DOM; the list never moves nodes).
  *
  * @slot - The `bs-list-item` rows.
@@ -24,6 +28,8 @@ export declare class BsList {
     selectable: boolean;
     /** `value` of the selected item (selectable mode). */
     value: string | null;
+    /** `plain` (default), `bulleted` (a bullet before each row) or `numbered` (1., 2., 3., ...). Ignored when `selectable`. */
+    variant: 'plain' | 'bulleted' | 'numbered';
     /** Draws a 1px separator between rows. */
     dividers: boolean;
     /** Accessible name of the list. */

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 interface BsListArgs {
     selectable: boolean;
     dividers: boolean;
+    variant: 'plain' | 'bulleted' | 'numbered';
     value: string;
 }
 declare const meta: Meta<BsListArgs>;
@@ -11,3 +12,6 @@ export declare const Default: Story;
 export declare const Selectable: Story;
 export declare const WithDividers: Story;
 export declare const AvatarList: Story;
+export declare const Bulleted: Story;
+export declare const Numbered: Story;
+export declare const DividedWithTrailingAction: Story;

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

@@ -24,6 +24,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot trailing - Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
  * @slot - Rich content that replaces `label`, `description` and `supportText` entirely.
  * @part container - The row.
+ * @part marker - The bullet or number drawn by a bulleted / numbered `bs-list`.
  * @part leading - Wrapper around the leading slot.
  * @part content - The text column.
  * @part label - The label line.
@@ -50,6 +51,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
  * @prop --bs-list-item-image-width - Leading image width. 72px.
  * @prop --bs-list-item-image-height - Leading image height. 56px.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsListItem {
     el: HTMLElement;
@@ -71,6 +73,8 @@ export declare class BsListItem {
     interactive: boolean;
     /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
     selectionRole: 'listitem' | 'option' | null;
+    /** Set by the parent `bs-list` for `bulleted` / `numbered` variants: the visual marker. Hidden from assistive technology. Do not set by hand. */
+    marker: string | null;
     hasLeading: boolean;
     hasTrailing: boolean;
     hasDefault: boolean;

package/dist/types/components/bs-mega-menu/bs-mega-menu.d.ts

@@ -27,8 +27,13 @@ export type BsMegaMenuType = 'columns' | 'compact';
  * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
  *
  * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
- * header's full width, and toggle the host's `hidden` attribute from the tab that
- * opens it; the panel does not open or close itself. Escape inside the panel fires `bsClose` so you can close it.
+ * header's full width, and show it from the tab that opens it; the panel does not open or close itself. Escape
+ * inside the panel fires `bsClose` so you can close it.
+ *
+ * There are two ways to show and hide it. Toggle the host's `hidden` attribute and it appears and disappears at once
+ * (the original contract, unchanged). Or set `open` and it fades and drops in from under the bar, then fades back out
+ * and is removed once the exit finishes. Leave `open` unset to keep using `hidden` only. `hidden` always wins: with it
+ * set the panel is not shown whatever `open` says.
  *
  * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
  * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
@@ -75,12 +80,23 @@ export type BsMegaMenuType = 'columns' | 'compact';
  * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
  * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
  * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ * @prop --bs-mega-menu-duration - Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+ * @prop --bs-mega-menu-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-mega-menu-distance - How far the panel drops while it fades. Aliased to `--bs-spacing-100`.
+ *
+ * Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
  */
 export declare class BsMegaMenu {
     el: HTMLElement;
     private id;
     /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
     type: BsMegaMenuType;
+    /**
+     * Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`
+     * attribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.
+     * The panel stays in the DOM and is `inert` while it fades out.
+     */
+    open?: boolean;
     /** The groups of links. JS property only (an array cannot be an attribute). */
     columns: BsMegaMenuColumn[];
     /** The featured area on the right. JS property only. The `featured` slot overrides it. */
@@ -101,6 +117,14 @@ export declare class BsMegaMenu {
     bsMenuSelect: EventEmitter<BsMegaMenuItem>;
     /** Fires when Escape is pressed inside the panel, so you can close it. */
     bsClose: EventEmitter<void>;
+    /** True while the exit motion plays after `open` went false, so the panel stays visible for it. */
+    closing: boolean;
+    private panelEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
+    onOpenChange(next?: boolean, prev?: boolean): void;
+    componentDidRender(): void;
     private select;
     private onKeyDown;
     private renderItem;

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

@@ -28,6 +28,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-menu-item-color-disabled - Label text color when `disabled` is set. Aliased to `--bs-text-on-disabled`.
  * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
  * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsMenuItem {
     /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by

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

@@ -24,6 +24,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part page - Each page-number button.
  * @part current - The current page's button (in addition to `page`).
  * @part ellipsis - Each collapsed-range indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export declare class BsPagination {
     /** Total number of pages. Must be a positive integer -- there's always at least one page. */

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

@@ -23,6 +23,12 @@ export type BsPopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | '
  * @prop --bs-popover-offset - Gap between trigger and popup. Aliased to `--bs-spacing-100`.
  * @prop --bs-popover-min-width - Minimum popup width. Aliased to `--bs-scale-1600`.
  * @prop --bs-popover-z-index - Popup stacking order. Aliased to `--bs-z-index-popover`.
+ * @prop --bs-popover-duration - Length of the open/close motion. Aliased to `--bs-duration-fast`.
+ * @prop --bs-popover-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-popover-distance - How far the popup nudges while it fades. Aliased to `--bs-spacing-50`.
+ *
+ * The popup fades and nudges toward its trigger when it opens and closes. Length, curve and travel are
+ * `--bs-popover-duration`, `--bs-popover-easing` and `--bs-popover-distance`; under `prefers-reduced-motion: reduce` it is instant.
  */
 export declare class BsPopover {
     el: HTMLElement;
@@ -34,12 +40,21 @@ export declare class BsPopover {
     bsOpenChange: EventEmitter<boolean>;
     private popupId;
     private triggerSlot?;
+    /** True while the exit motion plays after `open` went false, so the popup stays visible for it. */
+    closing: boolean;
     private popupEl?;
+    private enterPending;
+    private exitPending;
+    private motionRun;
     private needsFocusIn;
     private escaped;
     onOpenChange(next: boolean): void;
     onPlacementChange(): void;
     componentWillLoad(): void;
+    /** Slides toward the trigger it hangs off: a popup above its trigger rises from below, one below drops from above. */
+    private offset;
+    private playEnter;
+    private playExit;
     componentDidRender(): void;
     private isInTrigger;
     /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */

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

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

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsPresencePreset = 'fade' | 'slide-up' | 'slide-down' | 'scale' | 'collapse';
+export type BsPresenceDuration = 'instant' | 'fast' | 'default' | 'slow' | 'slower';
+export type BsPresenceEasing = 'standard' | 'decelerate' | 'accelerate' | 'linear';
+/**
+ * Shows and hides slotted content with a short enter/exit transition.
+ *
+ * The motion uses the shared duration and easing tokens (`--bs-duration-*`, `--bs-easing-*`).
+ * Under `prefers-reduced-motion: reduce` those durations are already `0ms`, and this component
+ * forces `--bs-presence-duration` to `--bs-duration-instant` as well, so the content snaps
+ * instead of moving.
+ *
+ * ## When to use
+ * - Revealing a block that does not have its own enter/exit (a card, a form section, a panel).
+ * - Comparing duration and easing tokens while designing a screen.
+ *
+ * ## When not to use
+ * - Loading placeholders (`bs-skeleton`), spinners (`bs-spinner`), or progress.
+ * - Dialog, snackbar, toast, and command palette — those components own their motion.
+ *
+ * @slot - The content to show and hide.
+ * @part content - The element that transitions. Style it with `::part(content)`.
+ * @prop --bs-presence-duration - Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+ * @prop --bs-presence-easing - Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+ * @prop --bs-presence-distance - Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+ * @prop --bs-presence-scale - Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
+ */
+export declare class BsPresence {
+    el: HTMLElement;
+    /** When true, the slotted content is shown. Flipping this plays the exit or enter transition. */
+    active: boolean;
+    /** Which transition to play. */
+    preset: BsPresencePreset;
+    /** Length of the transition, mapped to a `--bs-duration-*` token. */
+    duration: BsPresenceDuration;
+    /** Curve of the transition, mapped to a `--bs-easing-*` token. */
+    easing: BsPresenceEasing;
+    /** Fires once when the transition to the new `active` state finishes. Payload is that state. */
+    bsTransitionEnd: EventEmitter<boolean>;
+    private clip?;
+    private shell?;
+    /**
+     * CSS class changes inside this shadow root will play the exit and then not the entrance
+     * (Chromium drops the reverse transition). The Web Animations API plays both directions.
+     * A 0ms duration — including `prefers-reduced-motion` — snaps and emits here.
+     */
+    onActiveChange(active: boolean): void;
+    private motionDuration;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsPresenceDuration, BsPresenceEasing, BsPresencePreset } from './bs-presence';
+interface BsPresenceArgs {
+    active: boolean;
+    preset: BsPresencePreset;
+    duration: BsPresenceDuration;
+    easing: BsPresenceEasing;
+}
+declare const meta: Meta<BsPresenceArgs>;
+export default meta;
+type Story = StoryObj<BsPresenceArgs>;
+export declare const Default: Story;
+export declare const Presets: Story;
+export declare const Durations: Story;
+export declare const Easings: Story;

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

@@ -15,6 +15,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part circle - The visual radio ring.
  * @part dot - The center fill shown inside the ring when `checked`.
  * @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 BsRadio {
     el: HTMLElement;
@@ -27,6 +28,10 @@ export declare class BsRadio {
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
     value: string;
+    /** Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio
+     * has no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as
+     * `bs-checkbox` / `bs-switch`. */
+    ariaLabel: string | null;
     /** Whether the radio is checked. Mutable so clicking the label/input sets it directly. */
     checked: boolean;
     /** Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and

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

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

package/dist/types/components/bs-radio-group/bs-radio-group.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsRadioGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * A labelled group of `bs-radio`s: a visible label, helper or error text, an accessible
+ * `role="radiogroup"`, and a single `value` for the whole set.
+ *
+ * The group gives its radios one shared `name` (its own `name`, or a generated one) so they behave
+ * as one native-style group: arrow keys move the selection (wrapping), only the checked radio is in
+ * the tab order, and checking one unchecks the others. It keeps at most one radio checked (the
+ * first one wins if several start checked).
+ *
+ * Composed from: `bs-radio` (slotted by you).
+ *
+ * ## When to use
+ * - A set of 2-5 mutually exclusive options that should all stay visible, with a shared label.
+ *
+ * ## When not to use
+ * - Independent yes/no choices: use `bs-checkbox-group`.
+ * - Many options: use a select or `bs-menu`.
+ *
+ * @slot - The `bs-radio` elements.
+ * @part group - The `role="radiogroup"` element.
+ * @part label - The visible label.
+ * @part options - The wrapper laying out the radios (column, or row when `orientation="horizontal"`).
+ * @part description - The helper text (hidden while `error` is set).
+ * @part error - The error message.
+ */
+export declare class BsRadioGroup {
+    el: HTMLElement;
+    private id;
+    /** Visible group label, also the accessible name of the group. */
+    label?: string;
+    /** Helper text under the options. Replaced by `error` while that is set. */
+    description?: string;
+    /** Error message. Sets `aria-invalid`, replaces the helper text and is announced with the group. */
+    error?: string;
+    /** Layout of the radios. */
+    orientation: BsRadioGroupOrientation;
+    /** `name` given to every radio in the group. Defaults to a generated, unique name. */
+    name?: string;
+    /** `value` of the checked radio. Setting it checks the matching radio (and unchecks the rest). */
+    value?: string;
+    /** Marks the group as required: sets `aria-required` and shows an asterisk after the label. */
+    required: boolean;
+    /** Check the first enabled radio when none is checked, so a choice is always made. Off by default so a form can start empty. */
+    selectFirst: boolean;
+    /** Emitted with the new `value` when the user checks a radio. Replaces the radios' own `bsChange`, which does not reach listeners outside the group. */
+    bsChange: EventEmitter<string>;
+    private radios;
+    onValueOrName(): void;
+    componentWillLoad(): void;
+    /** Shared name on every radio, then reconcile checked state with `value`. */
+    private sync;
+    private onSlotchange;
+    onRadioChange(ev: CustomEvent<string>): void;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsRadioGroupArgs {
+    label: string;
+    description: string;
+    error: string;
+    orientation: 'vertical' | 'horizontal';
+    required: boolean;
+    value: string;
+}
+declare const meta: Meta<BsRadioGroupArgs>;
+export default meta;
+type Story = StoryObj<BsRadioGroupArgs>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;

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

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