@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -0,0 +1,89 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type FieldGroupVariant = 'horizontal' | 'vertical';
+/**
+ * `<bds-field-group>` — framework-agnostic FieldGroup custom element.
+ *
+ * Semantically groups related form fields under a single `<fieldset>` and
+ * lays them out either horizontally (auto-collapsing to a vertical stack
+ * when the FieldGroup itself is too narrow to fit a full row) or
+ * vertically. Mirrors the React `FieldGroup` component.
+ *
+ * Attributes:
+ *   variant  — "horizontal" (default) | "vertical"
+ *   legend   — optional legend text rendered above the fields
+ *   disabled — boolean; forwarded to the inner <fieldset> AND propagated to
+ *     each directly-slotted form control. A shadow-root `<fieldset disabled>`
+ *     cannot disable light-DOM children projected through a `<slot>` — its
+ *     "descendant" is defined over the DOM tree, and a slotted element's
+ *     actual parent stays the host, not the shadow fieldset — so the WC
+ *     sets `.disabled` on each slotted control directly (see
+ *     `_syncDisabledToSlotted`).
+ *
+ * Slots:
+ *   (default) — form fields (any element). The slotted-element count is
+ *     measured on each `slotchange` and surfaced via the
+ *     `--fieldGroup_field-count` custom property, which the auto-derived
+ *     collapse threshold reads.
+ *
+ * Auto-collapse mechanism (mirrors FieldGroup.tsx):
+ *   `@container` query *conditions* cannot reference custom properties — a
+ *   var() inside a container-query feature value is invalid CSS and is
+ *   silently dropped, so it can never fire. Instead, an invisible `.probe`
+ *   element's own inline-size resolves --fieldGroup_collapse-threshold
+ *   through a normal property value (where var() is valid); a
+ *   ResizeObserver compares the probe's measured pixel width against the
+ *   `<fieldset>`'s own width and toggles a `data-collapsed` attribute on
+ *   the host, which drives the CSS.
+ *
+ * @example
+ * <bds-field-group variant="horizontal" legend="Contact details">
+ *   <bds-form-input label="First name" name="first"></bds-form-input>
+ *   <bds-form-input label="Last name"  name="last"></bds-form-input>
+ *   <bds-form-input label="Email"      name="email"></bds-form-input>
+ * </bds-field-group>
+ */
+declare class BdsFieldGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        legend: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: FieldGroupVariant;
+    legend: string;
+    disabled: boolean;
+    private _ro?;
+    private _fieldsetEl?;
+    private _probeEl?;
+    private _fieldsetSize;
+    private _thresholdSize;
+    private _groupDisabledEls;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _setupObserver;
+    private _onResize;
+    private _updateCollapsed;
+    private _onSlotChange;
+    private _syncDisabledToSlotted;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-field-group': BdsFieldGroup;
+    }
+}
+
+export { BdsFieldGroup, type FieldGroupVariant };

package/dist/web-components/interaction/form/bds-field-group.js

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

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

@@ -47,7 +47,7 @@ declare class BdsFileInput extends LitElement {
     formResetCallback(): void;
     private _handleFiles;
     private _handleInputChange;
-    private _handleClick;
+    private _isFileAccepted;
     private _handleDragover;
     private _handleDragleave;
     private _handleDrop;

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

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

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

@@ -0,0 +1,92 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<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;
+    }
+}
+
+export { BdsFormInput };

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

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

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

@@ -11,13 +11,16 @@ import { LitElement } from 'lit';
  *   max      — maximum allowed value
  *   step     — increment/decrement step (default: 1)
  *   disabled — boolean
+ *   label    — visible label text, associated with the input via `for`/`id`
+ *   hint     — helper text shown below the input
+ *   error    — error message; when set the input enters error state
  *
  * 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>
+ * <bds-number-input name="qty" label="Quantity" value="1" min="0" max="99" step="1"></bds-number-input>
  */
 declare class BdsNumberInput extends LitElement {
     static formAssociated: boolean;
@@ -43,6 +46,16 @@ declare class BdsNumberInput extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     name: string;
     value: number;
@@ -50,7 +63,11 @@ declare class BdsNumberInput extends LitElement {
     max: number | undefined;
     step: number;
     disabled: boolean;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
     private _internals;
+    private readonly _uid;
     constructor();
     updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;

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

@@ -1,6 +1,6 @@
 import {
   BdsNumberInput
-} from "../../chunk-PXZWYO6Z.js";
+} from "../../chunk-VED2DFJ6.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsNumberInput

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

@@ -0,0 +1,81 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<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,
+ * and propagates `disabled` the same way — a group-level `disabled` attribute
+ * disables every slotted `<bds-radio>` (a shadow-DOM `<fieldset disabled>` has
+ * no effect on slotted light-DOM content on its own).
+ *
+ * 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 and all slotted `<bds-radio>` elements
+ *   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;
+    private readonly _uid;
+    constructor();
+    private _propagateName;
+    /**
+     * Propagates `disabled` to slotted `<bds-radio>` elements. Only radios that were
+     * enabled before the group disabled them are re-enabled when the group re-enables —
+     * a radio individually marked `disabled` in markup stays disabled.
+     */
+    private _propagateDisabled;
+    private _propagateToRadios;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-radio-group': BdsRadioGroup;
+    }
+}
+
+export { BdsRadioGroup };

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

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

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

@@ -5,18 +5,28 @@ 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.
+ * Use multiple `<bds-radio>` elements with the same `name` to form a group —
+ * checking one automatically unchecks the others sharing that `name`
+ * (searched within the same document/shadow root), and Arrow Up/Down/Left/Right
+ * move selection between them, mirroring native `<input type="radio">` semantics.
  *
  * Attributes:
- *   name     — form field name (groups radio buttons)
- *   value    — submitted value when selected
- *   checked  — boolean; whether this option is selected
- *   required — boolean
- *   disabled — boolean
+ *   name        — form field name (groups radio buttons)
+ *   value       — submitted value when selected
+ *   checked     — boolean; whether this option is selected
+ *   required    — boolean
+ *   disabled    — boolean
+ *   error       — boolean; visual + aria-invalid error state
+ *   description — optional supporting text rendered below the label
  *
  * Slots:
  *   (default) — label text
  *
+ * Events:
+ *   bds-change — fired when this radio becomes checked via user interaction;
+ *                `detail: { value: string, checked: true }`. Composed so it
+ *                crosses the shadow boundary (unlike the native `change` event).
+ *
  * @example
  * <bds-radio name="size" value="s">Small</bds-radio>
  * <bds-radio name="size" value="m" checked>Medium</bds-radio>
@@ -45,18 +55,36 @@ declare class BdsRadio extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        error: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        description: {
+            type: StringConstructor;
+        };
     };
     name: string;
     value: string;
     checked: boolean;
     required: boolean;
     disabled: boolean;
+    error: boolean;
+    description: string | undefined;
     private _internals;
     private readonly _uid;
+    private _initialChecked;
     constructor();
+    connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;
+    /** All `<bds-radio>` elements sharing this radio's `name`, in document order (including this one). */
+    private _getGroupMembers;
+    /** Marks `radio` as the sole checked member of its group and notifies listeners. */
+    private _selectRadio;
     private _handleChange;
+    private _handleKeydown;
+    /** Roving tabindex: only the checked member (or the first member if none is checked) is tabbable. */
+    private _isTabbable;
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

@@ -1,6 +1,6 @@
 import {
   BdsRadio
-} from "../../chunk-IYGF6CD5.js";
+} from "../../chunk-3WAV6MDN.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadio

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

@@ -23,7 +23,8 @@ interface SegmentedOption {
  *   variant  — "outline" (inset border on active item, default) | "filled" (sliding thumb)
  *
  * Events:
- *   change — fired when a new segment is selected (radio mode only)
+ *   bds-change — fired when a new segment is selected (radio mode only); detail: { value }
+ *   change     — deprecated alias for bds-change, kept for backward compatibility (radio mode only)
  *
  * @example
  * <bds-segmented-control
@@ -69,12 +70,11 @@ declare class BdsSegmentedControl extends LitElement {
     variant: 'outline' | 'filled';
     private _internals;
     private readonly _uid;
+    private _initialValue;
     constructor();
+    connectedCallback(): void;
     private get _options();
     updated(changed: Map<string, unknown>): void;
-    private _positionSlider;
-    private _updateThumb;
-    private _updateIndicator;
     formResetCallback(): void;
     private _handleChange;
     render(): lit.TemplateResult<1>;

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

@@ -1,6 +1,6 @@
 import {
   BdsSegmentedControl
-} from "../../chunk-2FGATTGT.js";
+} from "../../chunk-NTQ4TCUT.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSegmentedControl

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

@@ -17,15 +17,22 @@ interface SelectOption {
  *   value       — currently selected value
  *   options     — JSON array of `{ value, label, disabled? }` option objects
  *   placeholder — placeholder option label (disabled, empty value)
+ *   label       — visible label text (rendered as a shadow <label for>)
+ *   hint        — helper text shown below the select
+ *   error       — error message; when set the select enters error state
  *   required    — boolean
  *   disabled    — boolean
  *
+ * When `label` is not provided, a host `aria-label` attribute (if present) is
+ * forwarded to the inner `<select>` so the control always has an accessible name.
+ *
  * Events:
- *   change — native change event (forwarded from inner select)
+ *   bds-change — fired when the selected value changes; `detail: { value: string }`
  *
  * @example
  * <bds-select
  *   name="country"
+ *   label="Country"
  *   placeholder="Choose…"
  *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
  * ></bds-select>
@@ -47,6 +54,16 @@ declare class BdsSelect extends LitElement {
         placeholder: {
             type: StringConstructor;
         };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         required: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -60,9 +77,13 @@ declare class BdsSelect extends LitElement {
     value: string;
     options: string;
     placeholder: string;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
     required: boolean;
     disabled: boolean;
     private _internals;
+    private readonly _uid;
     constructor();
     private get _options();
     updated(changed: Map<string, unknown>): void;

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

@@ -1,6 +1,6 @@
 import {
   BdsSelect
-} from "../../chunk-CM3KYZ6Z.js";
+} from "../../chunk-JH6LQKLK.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

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

@@ -5,22 +5,30 @@ 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.
+ * the `--slider_fill` custom property. Renders an associated `<label>`
+ * when `label` is set, with `hint`/`error` messages wired to the input
+ * via `aria-describedby`.
  *
  * 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
+ *   name       — form field name
+ *   value      — current value (default: 0)
+ *   min        — minimum value (default: 0)
+ *   max        — maximum value (default: 100)
+ *   step       — step increment (default: 1)
+ *   label      — visible label text, associated with the input via `for`/`id`
+ *   hint       — helper text shown below the slider
+ *   error      — error message; when set the slider enters error state (aria-invalid)
+ *   show-value — shows the current value next to the label
+ *   disabled   — boolean
  *
  * Events:
- *   input  — fired as the user drags
- *   change — fired when the user releases
+ *   input      — native event, fired continuously as the user drags
+ *   bds-change — fired when the user releases; `detail: { value: number }`.
+ *                Re-dispatched from the host (composed) so it reliably
+ *                crosses the shadow boundary, unlike the native `change`.
  *
  * @example
- * <bds-slider name="volume" value="50" min="0" max="100" step="5"></bds-slider>
+ * <bds-slider name="volume" label="Volume" value="50" min="0" max="100" step="5"></bds-slider>
  */
 declare class BdsSlider extends LitElement {
     static formAssociated: boolean;
@@ -46,6 +54,21 @@ declare class BdsSlider extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        showValue: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
     };
     name: string;
     value: number;
@@ -53,12 +76,21 @@ declare class BdsSlider extends LitElement {
     max: number;
     step: number;
     disabled: boolean;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
+    showValue: boolean;
     private _internals;
+    private readonly _uid;
+    private _initialValue;
     constructor();
+    connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;
+    private _clamp;
     private get _fillPct();
     private _handleInput;
+    private _handleChange;
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

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