@boostdev/design-system-components 1.2.0 → 1.2.2

package/dist/web-components/index.d.ts

@@ -38,4 +38,574 @@ export { BdsIconWrapper } from './ui/bds-icon-wrapper.js';
 export { BdsDescriptionList } from './ui/bds-description-list.js';
 export { BdsBreadcrumb } from './ui/bds-breadcrumb.js';
 export { BdsLink } from './ui/bds-link.js';
-import 'lit';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+/**
+ * `<bds-button-group>` — groups related buttons into a flex container.
+ *
+ * Attributes:
+ *   orientation — `"horizontal"` (default) | `"vertical"`
+ *   aria-label  — accessible label for the group
+ *
+ * Slots:
+ *   (default) — `<bds-button>` elements
+ *
+ * @example
+ * <bds-button-group aria-label="View options">
+ *   <bds-button>Day</bds-button>
+ *   <bds-button>Week</bds-button>
+ *   <bds-button>Month</bds-button>
+ * </bds-button-group>
+ */
+declare class BdsButtonGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        'aria-label': {
+            type: StringConstructor;
+        };
+    };
+    orientation: ButtonGroupOrientation;
+    ['aria-label']: string | undefined;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-button-group': BdsButtonGroup;
+    }
+}
+
+/**
+ * `<bds-table>` — scrollable table wrapper with design-system styles.
+ *
+ * Slotted content should be a standard `<table>` with `<thead>` / `<tbody>`.
+ * Design-token styles are applied to the table and its cells via `::slotted`.
+ *
+ * Attributes:
+ *   sticky-header — freezes `<thead>` at the top when the table overflows vertically
+ *
+ * Slots:
+ *   (default) — a `<table>` element
+ *
+ * @example
+ * <bds-table sticky-header>
+ *   <table>
+ *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
+ *     <tbody><tr><td>Alpha</td><td>1</td></tr></tbody>
+ *   </table>
+ * </bds-table>
+ */
+declare class BdsTable extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        stickyHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    stickyHeader: boolean;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-table': BdsTable;
+    }
+}
+
+/**
+ * `<bds-pagination>` — pagination navigation control.
+ *
+ * Attributes:
+ *   current-page  — active page number (1-based, default: 1)
+ *   total-pages   — total number of pages (default: 1)
+ *
+ * Events:
+ *   bds-page-change — fired when the user navigates; `detail: { page: number }`
+ *
+ * @example
+ * <bds-pagination current-page="3" total-pages="10"></bds-pagination>
+ * <script>
+ *   document.querySelector('bds-pagination')
+ *     .addEventListener('bds-page-change', e => console.log(e.detail.page));
+ * </script>
+ */
+declare class BdsPagination extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        currentPage: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        totalPages: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    currentPage: number;
+    totalPages: number;
+    constructor();
+    private _navigate;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-pagination': BdsPagination;
+    }
+}
+
+/**
+ * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
+ *
+ * Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+ *
+ * Attributes:
+ *   label    — visible group label (rendered as `<legend>`)
+ *   error    — error message shown below items
+ *   hint     — hint text shown below items
+ *   disabled — disables the entire fieldset
+ *   required — marks the group as required
+ *
+ * Slots:
+ *   (default) — `<bds-checkbox>` elements
+ *
+ * @example
+ * <bds-checkbox-group label="Interests" required>
+ *   <bds-checkbox name="sports" value="sports">Sports</bds-checkbox>
+ *   <bds-checkbox name="music"  value="music">Music</bds-checkbox>
+ * </bds-checkbox-group>
+ */
+declare class BdsCheckboxGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    error: string | undefined;
+    hint: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-checkbox-group': BdsCheckboxGroup;
+    }
+}
+
+/**
+ * `<bds-radio-group>` — groups related radio buttons with a shared label and name.
+ *
+ * Renders a `<fieldset>` with a `<legend>`. Propagates the `name` attribute to
+ * all slotted `<bds-radio>` elements so radios form a mutually-exclusive set.
+ *
+ * Attributes:
+ *   label    — visible group label (rendered as `<legend>`)
+ *   name     — shared name forwarded to all slotted `<bds-radio>` elements
+ *   error    — error message shown below items
+ *   hint     — hint text shown below items
+ *   disabled — disables the entire fieldset
+ *   required — marks the group as required
+ *
+ * Slots:
+ *   (default) — `<bds-radio>` elements
+ *
+ * @example
+ * <bds-radio-group label="Preferred contact" name="contact">
+ *   <bds-radio value="email">Email</bds-radio>
+ *   <bds-radio value="phone">Phone</bds-radio>
+ * </bds-radio-group>
+ */
+declare class BdsRadioGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    name: string;
+    error: string | undefined;
+    hint: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    constructor();
+    private _propagateName;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-radio-group': BdsRadioGroup;
+    }
+}
+
+/**
+ * `<bds-form-input>` — form-associated text input with label, hint, and error support.
+ *
+ * Participates in HTML forms via the Form-Associated Custom Elements API.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   type        — input type: text | email | password | search | url | tel (default: "text")
+ *   value       — current value
+ *   placeholder — placeholder text
+ *   label       — visible label text
+ *   hint        — helper text shown below the input
+ *   error       — error message; when set the input enters error state
+ *   disabled    — disables the input
+ *   required    — marks the field as required
+ *
+ * Slots:
+ *   prefix — icon or text rendered before the input
+ *   suffix — icon or text rendered after the input
+ *
+ * Events:
+ *   bds-change — fired on value change; `detail: { value: string }`
+ *   bds-input  — fired on every keystroke; `detail: { value: string }`
+ *
+ * @example
+ * <bds-form-input name="email" type="email" label="Email address" required></bds-form-input>
+ */
+declare class BdsFormInput extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    type: string;
+    value: string;
+    placeholder: string;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    private _internals;
+    private readonly _uid;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleInput;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-form-input': BdsFormInput;
+    }
+}
+
+/**
+ * `<bds-carousel>` — scroll-snap based carousel/slider.
+ *
+ * Attributes:
+ *   current-index — active slide index (0-based, default: 0)
+ *   indicators    — show dot indicators
+ *   loop          — wrap from last slide back to first and vice versa
+ *
+ * Slots:
+ *   (default) — slide content elements (each direct child = one slide)
+ *   prev      — custom previous button (renders a default button if omitted)
+ *   next      — custom next button (renders a default button if omitted)
+ *
+ * Events:
+ *   bds-slide-change — fired when active slide changes; `detail: { index: number }`
+ *
+ * @example
+ * <bds-carousel indicators loop>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </bds-carousel>
+ */
+declare class BdsCarousel extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        currentIndex: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        indicators: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    currentIndex: number;
+    indicators: boolean;
+    loop: boolean;
+    private _slideCount;
+    private _io;
+    constructor();
+    private get _track();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _updateSlideCount;
+    private _goTo;
+    private _onSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-carousel': BdsCarousel;
+    }
+}
+
+/**
+ * `<bds-calendar>` — form-associated date picker calendar.
+ *
+ * Renders a month grid for selecting a date. Keyboard-navigable. Participates
+ * in HTML forms via the Form-Associated Custom Elements API.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — selected date in ISO 8601 format (`YYYY-MM-DD`)
+ *   min      — minimum selectable date (ISO 8601)
+ *   max      — maximum selectable date (ISO 8601)
+ *   disabled — disables all interaction
+ *
+ * Events:
+ *   bds-date-select — fired when user selects a date; `detail: { date: string }` (ISO 8601)
+ *
+ * @example
+ * <bds-calendar name="birthday" value="2024-03-15"></bds-calendar>
+ */
+declare class BdsCalendar extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    min: string;
+    max: string;
+    disabled: boolean;
+    private _internals;
+    private _viewYear;
+    private _viewMonth;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _prevMonth;
+    private _nextMonth;
+    private _selectDate;
+    private _isDisabledDate;
+    private _handleKeydown;
+    private _buildGrid;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-calendar': BdsCalendar;
+    }
+}
+
+type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+/**
+ * `<bds-dropdown-menu>` — anchored dropdown menu with keyboard navigation.
+ *
+ * Uses the native Popover API for the floating panel (light-dismiss, top-layer).
+ * The trigger slot element controls open/close. The component handles keyboard
+ * navigation (Arrow keys, Escape, Tab) and focus management.
+ *
+ * Attributes:
+ *   open      — controls open/closed state (reflected)
+ *   placement — menu position relative to trigger (default: `"bottom-start"`)
+ *
+ * Slots:
+ *   trigger   — the activating element (button or similar)
+ *   (default) — `<bds-dropdown-menu-item>` elements
+ *
+ * Events:
+ *   bds-open  — fired when the menu opens
+ *   bds-close — fired when the menu closes
+ *
+ * @example
+ * <bds-dropdown-menu>
+ *   <button slot="trigger">Options</button>
+ *   <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+ *   <bds-dropdown-menu-item value="delete" destructive>Delete</bds-dropdown-menu-item>
+ * </bds-dropdown-menu>
+ */
+declare class BdsDropdownMenu extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    placement: DropdownMenuPlacement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _items();
+    private get _trigger();
+    _open(): void;
+    _close(): void;
+    private _handleTriggerClick;
+    private _handleOutsideClick;
+    private _handleKeydown;
+    private _handleItemSelect;
+    private _onTriggerSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-dropdown-menu': BdsDropdownMenu;
+    }
+}
+
+/**
+ * `<bds-dropdown-menu-item>` — a single item inside a `<bds-dropdown-menu>`.
+ *
+ * Attributes:
+ *   value       — value associated with this item
+ *   disabled    — disables this item
+ *   destructive — renders the item in a destructive (red) style
+ *
+ * Slots:
+ *   (default) — item label text
+ *
+ * Events:
+ *   bds-select — fired when the item is clicked or activated; `detail: { value: string }`
+ *
+ * @example
+ * <bds-dropdown-menu-item value="delete" destructive>Delete</bds-dropdown-menu-item>
+ */
+declare class BdsDropdownMenuItem extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        destructive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    destructive: boolean;
+    constructor();
+    private _handleClick;
+    private _handleKeydown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-dropdown-menu-item': BdsDropdownMenuItem;
+    }
+}
+
+export { BdsButtonGroup, BdsCalendar, BdsCarousel, BdsCheckboxGroup, BdsDropdownMenu, BdsDropdownMenuItem, BdsFormInput, BdsPagination, BdsRadioGroup, BdsTable };