@boostdev/design-system-components 1.1.1 → 1.2.0

package/dist/web-components/interaction/bds-tooltip.js

@@ -0,0 +1,7 @@
+import {
+  BdsTooltip
+} from "../chunk-HGBNDR22.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsTooltip
+};

package/dist/web-components/interaction/form/bds-checkbox.d.ts

@@ -0,0 +1,70 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-checkbox>` — form-associated Checkbox custom element.
+ *
+ * Participates in HTML forms via the Form-Associated Custom Elements API
+ * (`ElementInternals`). Native browser validation (required, etc.) works
+ * without any wrapper.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — submitted value when checked (default: "on")
+ *   checked  — boolean; whether the checkbox is checked
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * Events:
+ *   change — native change event (forwarded from inner input)
+ *
+ * @example
+ * <bds-checkbox name="agree" value="yes" required>I agree</bds-checkbox>
+ */
+declare class BdsCheckbox extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    checked: boolean;
+    required: boolean;
+    disabled: boolean;
+    private _internals;
+    private readonly _uid;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-checkbox': BdsCheckbox;
+    }
+}
+
+export { BdsCheckbox };

package/dist/web-components/interaction/form/bds-checkbox.js

@@ -0,0 +1,7 @@
+import {
+  BdsCheckbox
+} from "../../chunk-T6AETZRP.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsCheckbox
+};

package/dist/web-components/interaction/form/bds-combobox.d.ts

@@ -0,0 +1,84 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * `<bds-combobox>` — form-associated Combobox (autocomplete) custom element.
+ *
+ * Renders a text input with a filterable dropdown. Keyboard navigation:
+ * ArrowDown/ArrowUp to move focus, Enter to select, Escape to close.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — currently selected value
+ *   options     — JSON array of `{ value, label, disabled? }` option objects
+ *   placeholder — input placeholder text
+ *   disabled    — boolean
+ *
+ * Events:
+ *   bds-change — fired with `{ detail: { value, label } }` when an option is selected
+ *
+ * @example
+ * <bds-combobox
+ *   name="country"
+ *   placeholder="Search…"
+ *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+ * ></bds-combobox>
+ */
+declare class BdsCombobox extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        options: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    options: string;
+    placeholder: string;
+    disabled: boolean;
+    private _internals;
+    private _open;
+    private _query;
+    private _focusedIndex;
+    constructor();
+    private get _options();
+    private get _filtered();
+    private get _displayLabel();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _openList;
+    private _closeList;
+    private _selectOption;
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleKeydown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-combobox': BdsCombobox;
+    }
+}
+
+export { BdsCombobox, type ComboboxOption };

package/dist/web-components/interaction/form/bds-combobox.js

@@ -0,0 +1,7 @@
+import {
+  BdsCombobox
+} from "../../chunk-QLZ2362S.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsCombobox
+};

package/dist/web-components/interaction/form/bds-file-input.d.ts

@@ -0,0 +1,62 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-file-input>` — form-associated File Input with drag-and-drop zone.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   accept   — file types to accept (e.g. "image/*,.pdf")
+ *   multiple — boolean; allow selecting multiple files
+ *   disabled — boolean
+ *
+ * Events:
+ *   bds-change — fired with `{ detail: FileList }` when files are selected
+ *
+ * @example
+ * <bds-file-input name="avatar" accept="image/*">Upload photo</bds-file-input>
+ */
+declare class BdsFileInput extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        accept: {
+            type: StringConstructor;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    accept: string;
+    multiple: boolean;
+    disabled: boolean;
+    private _internals;
+    private _isDragging;
+    private readonly _uid;
+    constructor();
+    formResetCallback(): void;
+    private _handleFiles;
+    private _handleInputChange;
+    private _handleClick;
+    private _handleDragover;
+    private _handleDragleave;
+    private _handleDrop;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-file-input': BdsFileInput;
+    }
+}
+
+export { BdsFileInput };

package/dist/web-components/interaction/form/bds-file-input.js

@@ -0,0 +1,7 @@
+import {
+  BdsFileInput
+} from "../../chunk-PY62FTRW.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsFileInput
+};

package/dist/web-components/interaction/form/bds-number-input.d.ts

@@ -0,0 +1,68 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-number-input>` — form-associated Number Input with stepper buttons.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — current numeric value (default: 0)
+ *   min      — minimum allowed value
+ *   max      — maximum allowed value
+ *   step     — increment/decrement step (default: 1)
+ *   disabled — boolean
+ *
+ * Events:
+ *   input  — fired on stepper click and native input
+ *   change — native change event
+ *
+ * @example
+ * <bds-number-input name="qty" value="1" min="0" max="99" step="1"></bds-number-input>
+ */
+declare class BdsNumberInput extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: number;
+    min: number | undefined;
+    max: number | undefined;
+    step: number;
+    disabled: boolean;
+    private _internals;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _clamp;
+    private _adjust;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-number-input': BdsNumberInput;
+    }
+}
+
+export { BdsNumberInput };

package/dist/web-components/interaction/form/bds-number-input.js

@@ -0,0 +1,7 @@
+import {
+  BdsNumberInput
+} from "../../chunk-JUKB3BUP.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsNumberInput
+};

package/dist/web-components/interaction/form/bds-radio.d.ts

@@ -0,0 +1,68 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-radio>` — form-associated Radio custom element.
+ *
+ * Participates in HTML forms via the Form-Associated Custom Elements API.
+ * Use multiple `<bds-radio>` elements with the same `name` to form a group.
+ *
+ * Attributes:
+ *   name     — form field name (groups radio buttons)
+ *   value    — submitted value when selected
+ *   checked  — boolean; whether this option is selected
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * @example
+ * <bds-radio name="size" value="s">Small</bds-radio>
+ * <bds-radio name="size" value="m" checked>Medium</bds-radio>
+ * <bds-radio name="size" value="l">Large</bds-radio>
+ */
+declare class BdsRadio extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    checked: boolean;
+    required: boolean;
+    disabled: boolean;
+    private _internals;
+    private readonly _uid;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-radio': BdsRadio;
+    }
+}
+
+export { BdsRadio };

package/dist/web-components/interaction/form/bds-radio.js

@@ -0,0 +1,7 @@
+import {
+  BdsRadio
+} from "../../chunk-HHHRF2PS.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsRadio
+};

package/dist/web-components/interaction/form/bds-segmented-control.d.ts

@@ -0,0 +1,88 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** When set, renders the option as an <a> link instead of a radio button */
+    href?: string;
+}
+/**
+ * `<bds-segmented-control>` — form-associated Segmented Control custom element.
+ *
+ * Renders a group of radio buttons (or links) styled as a unified segmented control.
+ * Passes a JSON `options` attribute because reactive slot content can't be
+ * easily converted to radio groups.
+ *
+ * Attributes:
+ *   name     — form field name (also used for the internal radio group)
+ *   value    — currently selected value
+ *   options  — JSON array of `{ value, label, disabled?, href? }` option objects
+ *   disabled — boolean; disables all options
+ *   variant  — "outline" (inset border on active item, default) | "filled" (sliding thumb)
+ *
+ * Events:
+ *   change — fired when a new segment is selected (radio mode only)
+ *
+ * @example
+ * <bds-segmented-control
+ *   name="view"
+ *   value="list"
+ *   options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
+ * ></bds-segmented-control>
+ *
+ * @example Outline variant with links
+ * <bds-segmented-control
+ *   variant="outline"
+ *   value="home"
+ *   options='[{"value":"home","label":"Home","href":"/"},{"value":"about","label":"About","href":"/about"}]'
+ * ></bds-segmented-control>
+ */
+declare class BdsSegmentedControl extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        options: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    options: string;
+    disabled: boolean;
+    variant: 'outline' | 'filled';
+    private _internals;
+    private readonly _uid;
+    constructor();
+    private get _options();
+    updated(changed: Map<string, unknown>): void;
+    private _positionSlider;
+    private _updateThumb;
+    private _updateIndicator;
+    formResetCallback(): void;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-segmented-control': BdsSegmentedControl;
+    }
+}
+
+export { BdsSegmentedControl, type SegmentedOption };

package/dist/web-components/interaction/form/bds-segmented-control.js

@@ -0,0 +1,7 @@
+import {
+  BdsSegmentedControl
+} from "../../chunk-6MH5UWUD.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsSegmentedControl
+};

package/dist/web-components/interaction/form/bds-select.d.ts

@@ -0,0 +1,79 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * `<bds-select>` — form-associated Select custom element.
+ *
+ * Uses a JSON `options` attribute because slotting `<option>` elements into a
+ * shadow-DOM `<select>` is not supported cross-browser.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — currently selected value
+ *   options     — JSON array of `{ value, label, disabled? }` option objects
+ *   placeholder — placeholder option label (disabled, empty value)
+ *   required    — boolean
+ *   disabled    — boolean
+ *
+ * Events:
+ *   change — native change event (forwarded from inner select)
+ *
+ * @example
+ * <bds-select
+ *   name="country"
+ *   placeholder="Choose…"
+ *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+ * ></bds-select>
+ */
+declare class BdsSelect extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        options: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    options: string;
+    placeholder: string;
+    required: boolean;
+    disabled: boolean;
+    private _internals;
+    constructor();
+    private get _options();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-select': BdsSelect;
+    }
+}
+
+export { BdsSelect, type SelectOption };

package/dist/web-components/interaction/form/bds-select.js

@@ -0,0 +1,7 @@
+import {
+  BdsSelect
+} from "../../chunk-X3FKVHLK.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsSelect
+};

package/dist/web-components/interaction/form/bds-slider.d.ts

@@ -0,0 +1,70 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-slider>` — form-associated Slider / Range Input custom element.
+ *
+ * Uses a native `<input type="range">` with a CSS fill track driven by
+ * the `--slider_fill` custom property.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — current value (default: 0)
+ *   min      — minimum value (default: 0)
+ *   max      — maximum value (default: 100)
+ *   step     — step increment (default: 1)
+ *   disabled — boolean
+ *
+ * Events:
+ *   input  — fired as the user drags
+ *   change — fired when the user releases
+ *
+ * @example
+ * <bds-slider name="volume" value="50" min="0" max="100" step="5"></bds-slider>
+ */
+declare class BdsSlider extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    private _internals;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private get _fillPct();
+    private _handleInput;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-slider': BdsSlider;
+    }
+}
+
+export { BdsSlider };

package/dist/web-components/interaction/form/bds-slider.js

@@ -0,0 +1,7 @@
+import {
+  BdsSlider
+} from "../../chunk-7FMR53BW.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsSlider
+};