@brandsync/wc 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+export { format };

package/dist/esm/loader.js

@@ -0,0 +1,10 @@
+import { g as globalScripts, b as bootstrapLazy } from './index-BOj_41o9.js';
+export { s as setNonce } from './index-BOj_41o9.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-composer",[[529,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-input",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]]], options);
+};
+
+export { defineCustomElements };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

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

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

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

@@ -0,0 +1,20 @@
+export type BsBadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral' | 'inverse';
+/**
+ * A small status or category pill, usually paired with a label or list item.
+ *
+ * ## When to use
+ * - Communicating a short, fixed status (e.g. "Active", "On leave") or category label.
+ *
+ * ## When not to use
+ * - As an interactive/clickable element — a badge is a label, not a control. Use a button
+ *   or chip component if it needs to be clickable.
+ * - For long text — badges are sized for one or two words.
+ *
+ * @slot - Default slot: the badge's label text.
+ * @part container - The pill element.
+ */
+export declare class BsBadge {
+    /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
+    variant: BsBadgeVariant;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsBadgeVariant } from './bs-badge';
+interface BsBadgeArgs {
+    variant: BsBadgeVariant;
+    label: string;
+}
+declare const meta: Meta<BsBadgeArgs>;
+export default meta;
+type Story = StoryObj<BsBadgeArgs>;
+export declare const Primary: Story;
+export declare const DefaultVariant: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Error: Story;
+export declare const Neutral: Story;
+export declare const Inverse: Story;
+export declare const AllVariants: Story;
+export declare const LongText: Story;

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

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

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

@@ -0,0 +1,84 @@
+export type BsButtonVariant = 'primary' | 'neutral' | 'error' | 'subtle' | 'outlined' | 'success' | 'warning' | 'info';
+export type BsButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * A clickable action element for the single most important action in a given context.
+ *
+ * ## When to use
+ * - The primary call to action on a screen or within a card/modal (e.g. "Book room", "Confirm").
+ * - Secondary, lower-emphasis actions alongside it (use `variant="neutral"`).
+ * - `variant="error"` for destructive/irreversible actions (e.g. "Delete account") — per
+ *   BrandSync guidance, destructive actions should always use the error variant, never
+ *   `neutral`, so the visual weight matches the risk of the action.
+ *
+ * ## When not to use
+ * - For navigation between pages — use a link/nav component instead, a button implies an
+ *   in-page action, not a destination change.
+ * - For more than one primary-emphasis action in the same view — pick one, demote the rest to
+ *   `neutral`.
+ * - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
+ *   it for actions that actually delete/revoke/undo something.
+ *
+ * @slot - Default slot: the button's label content.
+ * @slot icon - Optional leading icon, rendered before the label.
+ * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part icon - The icon wrapper element.
+ * @part label - The text label element.
+ * @part end-icon - The trailing icon wrapper element.
+ * @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
+ * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
+ * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
+ * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ */
+export declare class BsButton {
+    el: HTMLElement;
+    /**
+     * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant: BsButtonVariant;
+    /** Sizing scale. */
+    size: BsButtonSize;
+    /** Disables the button and applies the disabled token set. */
+    disabled: boolean;
+    /** Native `<button>` type. */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Accessible name for the button. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the button does. Stencil reflects this
+     * camelCase prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel: string | null;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually an icon. */
+    hasIcon: boolean;
+    /** Tracks whether the `end-icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually a trailing icon. */
+    hasEndIcon: boolean;
+    /**
+     * Tracks whether the default (label) slot has assigned content, so an icon-only button can be
+     * styled/sized differently (see `bs-button--icon-only`).
+     *
+     * Known edge case (not fixed, same simplification `hasIcon`/similar flags elsewhere in this
+     * codebase already make): a default slot containing only whitespace (e.g. a lone space text
+     * node) still counts as `hasLabel = true`, since checking for assigned nodes doesn't
+     * distinguish whitespace-only text nodes from real content.
+     */
+    hasLabel: boolean;
+    /**
+     * Computes the initial `hasIcon`/`hasEndIcon`/`hasLabel` state directly from the host's light
+     * DOM children, before first render.
+     *
+     * This can't be left to the `slotchange` handlers below alone: `slotchange` only fires when a
+     * slot's *assigned nodes* change, and a slot that starts out with zero assigned nodes and stays
+     * that way never fires it (nothing changed). Relying on `slotchange` alone left an icon-only
+     * button (default slot empty from the start) permanently stuck on its initial `hasLabel`
+     * default, so `bs-button--icon-only` never applied.
+     */
+    componentWillLoad(): void;
+    private hasSlottedContent;
+    private onIconSlotchange;
+    private onEndIconSlotchange;
+    private onLabelSlotchange;
+    render(): any;
+}

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsButtonVariant, BsButtonSize } from './bs-button';
+interface BsButtonArgs {
+    variant: BsButtonVariant;
+    size: BsButtonSize;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    label: string;
+}
+declare const meta: Meta<BsButtonArgs>;
+export default meta;
+type Story = StoryObj<BsButtonArgs>;
+export declare const Primary: Story;
+export declare const Neutral: Story;
+export declare const Subtle: Story;
+export declare const Outlined: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const NeutralDisabled: Story;
+export declare const Sizes: Story;
+export declare const WithIcon: Story;
+export declare const WithEndIcon: Story;
+export declare const IconOnly: Story;
+export declare const LongLabel: Story;
+export declare const AllCombinations: Story;
+export declare const Skeleton: Story;

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

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

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

@@ -0,0 +1,28 @@
+import type { BsButtonSize } from '../bs-button/bs-button';
+/**
+ * A shape-matched loading placeholder for `bs-button`, shown while the real label/action isn't
+ * known yet (e.g. still being fetched from an API). Sized to match `bs-button`'s `sm`/`md`/`lg`
+ * heights so layout doesn't shift once the real button renders.
+ *
+ * This is not a submit-in-progress spinner — that's a different concern (a button that's
+ * already rendered but waiting on an async action it triggered). Use this component only when
+ * the button itself doesn't exist yet.
+ *
+ * ## When to use
+ * - In place of a `bs-button` whose label/visibility depends on data that hasn't loaded yet.
+ *
+ * ## When not to use
+ * - While a button's own click handler is running (e.g. a submit request in flight) — render the
+ *   real `bs-button` and show its own busy/spinner state instead.
+ *
+ * @part container - The pulsing placeholder element.
+ * @prop --bs-button-skeleton-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
+ * @prop --bs-button-skeleton-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
+ * @prop --bs-button-skeleton-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-skeleton-width - Placeholder width. Defaults to `96px`.
+ */
+export declare class BsButtonSkeleton {
+    /** Sizing scale, matching the `bs-button` size it stands in for. */
+    size: BsButtonSize;
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsButtonSize } from '../bs-button/bs-button';
+interface BsButtonSkeletonArgs {
+    size: BsButtonSize;
+}
+declare const meta: Meta<BsButtonSkeletonArgs>;
+export default meta;
+type Story = StoryObj<BsButtonSkeletonArgs>;
+export declare const Default: Story;
+export declare const Sizes: Story;

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

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

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

@@ -0,0 +1,26 @@
+export type BsCardSurface = 'base' | 'raised' | 'container';
+/**
+ * A bounded surface for grouping related content — a summary, a form section, a list item.
+ *
+ * ## When to use
+ * - Grouping a self-contained piece of content that needs visual separation from the page
+ *   background (e.g. a booking summary, a settings section).
+ *
+ * ## When not to use
+ * - As the only structural element on a page — cards group content, they don't replace layout.
+ * - For a dismissible/transient message — use a modal or a dedicated notification component.
+ *
+ * @slot header - Optional heading content above the body.
+ * @slot - Default slot: the card's main body content.
+ * @slot footer - Optional actions/content below the body (e.g. a button).
+ * @part container - The outer bordered surface element.
+ * @part header - The header wrapper.
+ * @part body - The body wrapper.
+ * @part footer - The footer wrapper.
+ */
+export declare class BsCard {
+    /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
+     * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
+    surface: BsCardSurface;
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsCardArgs {
+    surface: 'base' | 'raised' | 'container';
+}
+declare const meta: Meta<BsCardArgs>;
+export default meta;
+type Story = StoryObj<BsCardArgs>;
+export declare const Raised: Story;
+export declare const Base: Story;
+export declare const Container: Story;

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

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

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsComposerVariant = 'ai' | 'human';
+export type BsComposerState = 'idle' | 'generating' | 'disabled' | 'recording';
+/**
+ * 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
+ * icon and behavior change with `state` (send, stop generating, or confirm a voice recording).
+ *
+ * ## When to use
+ * - The message-entry bar for an AI chat/assistant or human support conversation.
+ *
+ * ## When not to use
+ * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
+ *   purpose-built for a chat composer, not a generic form field.
+ *
+ * @part attach - The "+" attach button.
+ * @part input - The native text `<input>`.
+ * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
+ * @part action - The primary circular action button (send, stop, or confirm depending on `state`).
+ * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.
+ * @prop --bs-composer-bg - Background of the pill container. Aliased to `--bs-input-bg-default`.
+ * @prop --bs-composer-border - Border color of the pill container. Aliased to `--bs-input-border-default`.
+ * @prop --bs-composer-border-focus - Border color when the text field has focus. Aliased to `--bs-input-border-focus`.
+ * @prop --bs-composer-action-bg - Background of the primary action button. Aliased to `--bs-color-primary-default`.
+ * @prop --bs-composer-action-bg-hover - Aliased to `--bs-color-primary-hover`.
+ * @prop --bs-composer-action-bg-pressed - Aliased to `--bs-color-primary-pressed`.
+ * @prop --bs-composer-action-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-composer-action-icon - Icon color on the primary action button. Aliased to `--bs-text-on-action`.
+ * @prop --bs-composer-action-icon-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-composer-attach-icon - Icon color of the attach button. Aliased to `--bs-icon-default`.
+ * @prop --bs-composer-mic-icon - Icon color of the mic/stop-recording button. Aliased to `--bs-icon-default`.
+ * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
+ * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ */
+export declare class BsComposer {
+    /**
+     * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
+     * directly to override it) and, per the Figma design, renders the container border dashed
+     * instead of solid for `'human'` -- a deliberate visual cue distinguishing a human-support
+     * composer from the AI one, not a layout/token difference.
+     */
+    variant: BsComposerVariant;
+    /** Overrides the variant's default placeholder. */
+    placeholder?: string;
+    /** Current text value. Native `input` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as a `bsInput` custom event instead. */
+    value: string;
+    /**
+     * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
+     * `generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or
+     * `recording` (voice input in progress -- shows a waveform and a confirm action).
+     */
+    state: BsComposerState;
+    /**
+     * Accessible name for the text field. This component has no visible `<label>` (chat composers
+     * don't show one in the design), so `ariaLabel` is the only way a consumer gives the textbox an
+     * accessible name -- set it in every real usage.
+     */
+    ariaLabel: string | null;
+    /** Fires on every keystroke in the text field, with the current value. */
+    bsInput: EventEmitter<string>;
+    /** Fires when the primary action button is clicked while `state="idle"`. */
+    bsSubmit: EventEmitter<void>;
+    /** Fires when the primary action button is clicked while `state="generating"`. */
+    bsStop: EventEmitter<void>;
+    /** Fires when the primary action button is clicked while `state="recording"`. */
+    bsVoiceConfirm: EventEmitter<void>;
+    /** Fires when the "+" attach button is clicked. */
+    bsAttach: EventEmitter<void>;
+    /** Fires when the mic/stop-recording button is clicked. The consumer decides what that means
+     * (e.g. start recording when idle/generating, or stop recording when `state="recording"`). */
+    bsMicToggle: EventEmitter<void>;
+    private onInput;
+    private onAttachClick;
+    private onMicClick;
+    private onActionClick;
+    private actionLabel;
+    private renderActionIcon;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsComposerVariant, BsComposerState } from './bs-composer';
+interface BsComposerArgs {
+    variant: BsComposerVariant;
+    state: BsComposerState;
+    value: string;
+    placeholder: string;
+}
+declare const meta: Meta<BsComposerArgs>;
+export default meta;
+type Story = StoryObj<BsComposerArgs>;
+export declare const Default: Story;
+export declare const Human: Story;
+export declare const Generating: Story;
+export declare const Disabled: Story;
+export declare const Recording: Story;
+export declare const AllStates: Story;

package/dist/types/components/bs-data-table/bs-data-table.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsDataTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+}
+export type BsDataTableRow = Record<string, unknown> & {
+    id: string | number;
+};
+/**
+ * A sortable, optionally row-selectable table for tabular data.
+ *
+ * `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
+ * strings, so arrays/objects/functions must be set via `element.rows = [...]` etc., not as
+ * attributes. See CONVENTIONS.md.
+ *
+ * ## When to use
+ * - Comparing structured records across the same set of fields (a list of people, bookings, etc.).
+ *
+ * ## When not to use
+ * - A handful of unrelated key/value pairs — a simple list or card is lighter-weight.
+ * - Deeply nested/hierarchical data — this component renders one flat row per record.
+ *
+ * @part table - The `<table>` element.
+ * @part head - The `<thead>` element.
+ * @part body - The `<tbody>` element.
+ * @part row - Each `<tr>` in the body.
+ * @part header-cell - Each `<th>` in the header row.
+ * @part cell - Each `<td>` in a body row.
+ */
+export declare class BsDataTable {
+    /** Array prop -- must be set as a JS property (`el.columns = [...]`), not an HTML attribute,
+     * since attributes can only carry strings. See CONVENTIONS.md. */
+    columns: BsDataTableColumn[];
+    /** Array prop -- same JS-property-only rule as `columns`. */
+    rows: BsDataTableRow[];
+    sortColumn?: string;
+    sortDirection: 'asc' | 'desc';
+    selectable: boolean;
+    /** Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,
+     * same as array props -- there is no attribute equivalent. Falls back to the raw cell value. */
+    cellRenderer?: (row: BsDataTableRow, column: BsDataTableColumn) => string;
+    bsSort: EventEmitter<{
+        column: string;
+        direction: 'asc' | 'desc';
+    }>;
+    bsRowSelect: EventEmitter<{
+        id: string | number;
+        selected: boolean;
+    }>;
+    private selectedIds;
+    private onHeaderClick;
+    private onRowCheckboxChange;
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Selectable: Story;
+export declare const WithCustomCellRenderer: Story;

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

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

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A single-line text field with an optional label, description, and error state.
+ *
+ * ## When to use
+ * - Collecting a single line of free-text, email, password, or numeric input.
+ * - Pair with `error` for inline validation feedback tied to that specific field.
+ *
+ * ## When not to use
+ * - Multi-line text — this component has no `textarea` mode.
+ * - A fixed set of choices — use a select/radio/checkbox component instead of free text.
+ *
+ * @part label - The `<label>` element.
+ * @part control - The native `<input>` element.
+ * @part description - The helper text element (hidden when `error` is set).
+ * @part error - The error message element.
+ */
+export declare class BsInput {
+    /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+    value: string;
+    type: 'text' | 'email' | 'password' | 'number';
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    error?: string;
+    disabled: boolean;
+    bsInput: EventEmitter<string>;
+    bsChange: EventEmitter<string>;
+    private onInput;
+    private onChange;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsInputArgs {
+    label: string;
+    placeholder: string;
+    description: string;
+    error: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsInputArgs>;
+export default meta;
+type Story = StoryObj<BsInputArgs>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;

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

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

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

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsModalSize = 'sm' | 'md' | 'lg';
+/**
+ * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+ * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+ *
+ * ## When to use
+ * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+ * - A short, focused task that doesn't warrant navigating to a new page.
+ *
+ * ## When not to use
+ * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+ * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+ *   modal that just gets taller and taller.
+ *
+ * @slot - Default slot: the dialog body content.
+ * @slot footer - Optional footer content (typically action buttons).
+ * @part backdrop - The full-viewport overlay behind the dialog.
+ * @part dialog - The dialog box itself.
+ * @part header - The header row (heading + close button).
+ * @part close - The close button.
+ * @part body - The body content wrapper.
+ * @part footer - The footer wrapper (only visible when the footer slot has content).
+ */
+export declare class BsModal {
+    /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
+     * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
+    open: boolean;
+    heading?: string;
+    size: BsModalSize;
+    bsClose: EventEmitter<void>;
+    /** Tracks whether the `footer` slot has assigned content, so the footer bar (border + padding)
+     * only renders when there's actually something to put in it. */
+    hasFooter: boolean;
+    private onFooterSlotchange;
+    private dialogRef?;
+    private previouslyFocused?;
+    private wasOpen;
+    private close;
+    onKeydown(ev: KeyboardEvent): void;
+    private onBackdropClick;
+    onFocusIn(ev: FocusEvent): void;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsModalArgs {
+    heading: string;
+    size: 'sm' | 'md' | 'lg';
+}
+declare const meta: Meta<BsModalArgs>;
+export default meta;
+type Story = StoryObj<BsModalArgs>;
+export declare const Default: Story;