@boostdev/design-system-components 1.1.0 → 1.1.2

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-OTX4COSV.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-O7I63SQX.js";
+import "../../chunk-LGEZYFUU.js";
+export {
+  BdsRadio
+};

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

@@ -0,0 +1,71 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * `<bds-segmented-control>` — form-associated Segmented Control custom element.
+ *
+ * Renders a group of radio buttons 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? }` option objects
+ *   disabled — boolean; disables all options
+ *
+ * Events:
+ *   change — fired when a new segment is selected
+ *
+ * @example
+ * <bds-segmented-control
+ *   name="view"
+ *   value="list"
+ *   options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
+ * ></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;
+        };
+    };
+    name: string;
+    value: string;
+    options: string;
+    disabled: boolean;
+    private _internals;
+    private readonly _uid;
+    constructor();
+    private get _options();
+    updated(changed: Map<string, unknown>): void;
+    private _updateThumb;
+    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-K5CE6HSB.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-4BX6AWXX.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
+};

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

@@ -0,0 +1,67 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-switch>` — form-associated Toggle Switch custom element.
+ *
+ * Visually a toggle switch but semantically equivalent to a checkbox
+ * (`role="switch"`). Participates in HTML forms via the Form-Associated
+ * Custom Elements API.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — submitted value when on (default: "on")
+ *   checked  — boolean; whether the switch is on
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * @example
+ * <bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+ */
+declare class BdsSwitch 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-switch': BdsSwitch;
+    }
+}
+
+export { BdsSwitch };

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

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

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

@@ -0,0 +1,70 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-textarea>` — form-associated Textarea custom element.
+ *
+ * Wraps a native `<textarea>` for consistent styling while participating
+ * in HTML forms via the Form-Associated Custom Elements API.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — text value
+ *   placeholder — placeholder text
+ *   rows        — number of visible rows (default: 4)
+ *   required    — boolean
+ *   disabled    — boolean
+ *
+ * Events:
+ *   input  — native input event
+ *   change — native change event
+ *
+ * @example
+ * <bds-textarea name="message" placeholder="Enter message…" rows="6"></bds-textarea>
+ */
+declare class BdsTextarea extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    placeholder: string;
+    rows: number;
+    required: boolean;
+    disabled: boolean;
+    private _internals;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleInput;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-textarea': BdsTextarea;
+    }
+}
+
+export { BdsTextarea };

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

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

package/dist/web-components/ui/bds-alert.d.ts

@@ -0,0 +1,66 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+/**
+ * `<bds-alert>` — framework-agnostic Alert custom element.
+ *
+ * Attributes:
+ *   variant     — "info" (default) | "success" | "warning" | "error"
+ *   title       — optional heading above the body text
+ *   dismissible — boolean; shows a dismiss button when present
+ *
+ * Slots:
+ *   (default) — alert body content
+ *   icon      — optional icon displayed to the left of the content
+ *
+ * Events:
+ *   bds-dismiss — fired (bubbles, composed) when the dismiss button is clicked
+ *
+ * Accessibility:
+ *   role="alert" + aria-live="assertive" for error/warning variants,
+ *   role="status" + aria-live="polite" for info/success variants.
+ *
+ * @example
+ * <bds-alert variant="success" title="Saved!">Your changes have been saved.</bds-alert>
+ *
+ * <bds-alert variant="error" dismissible>
+ *   <svg slot="icon">…</svg>
+ *   Something went wrong.
+ * </bds-alert>
+ */
+declare class BdsAlert extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _iconFilled: {
+            state: boolean;
+        };
+    };
+    variant: AlertVariant;
+    title: string;
+    dismissible: boolean;
+    private _iconFilled;
+    constructor();
+    private _onIconSlotChange;
+    private get _isUrgent();
+    private _handleDismiss;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-alert': BdsAlert;
+    }
+}
+
+export { type AlertVariant, BdsAlert };

package/dist/web-components/ui/bds-alert.js

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

package/dist/web-components/ui/bds-avatar.d.ts

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-avatar>` — framework-agnostic Avatar custom element.
+ *
+ * Shows an image when `src` is set; falls back to initials derived from `name`.
+ *
+ * Attributes:
+ *   src  — image URL
+ *   alt  — image alt text (defaults to `name` or "User avatar")
+ *   name — full name; used to compute initials and as fallback aria-label
+ *   size — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-avatar src="/photo.jpg" name="Jane Doe"></bds-avatar>
+ * <bds-avatar name="Jane Doe" size="large"></bds-avatar>
+ */
+declare class BdsAvatar extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        src: {
+            type: StringConstructor;
+        };
+        alt: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    src: string;
+    alt: string;
+    name: string;
+    size: 'small' | 'medium' | 'large';
+    constructor();
+    private get _initials();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-avatar': BdsAvatar;
+    }
+}
+
+export { BdsAvatar };

package/dist/web-components/ui/bds-avatar.js

@@ -0,0 +1,7 @@
+import {
+  BdsAvatar
+} from "../chunk-57TRNCWQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsAvatar
+};