@boostdev/design-system-components 2.7.1 → 2.11.0

package/dist/web-components/interaction/bds-accordion-item.js

@@ -1,6 +1,6 @@
 import {
   BdsAccordionItem
-} from "../chunk-FXURM6D5.js";
+} from "../chunk-YFAXGRPR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordionItem

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

@@ -1,6 +1,6 @@
 import {
   BdsAccordion
-} from "../chunk-BKIHQYJR.js";
+} from "../chunk-PXPPKCLT.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordion

package/dist/web-components/interaction/bds-button.d.ts

@@ -13,10 +13,15 @@ type ButtonSize = 'small' | 'medium' | 'large';
  *   href      — renders an <a> tag instead of <button>
  *   target    — forwarded to <a> when href is set
  *   rel       — forwarded to <a> when href is set
- *   has-pulse — boolean, enables the pulse ring animation
- *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xs padding (requires aria-label)
+ *   has-pulse — boolean, enables the pulse ring animation (respects prefers-reduced-motion)
+ *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xxs padding (requires aria-label)
  *   type      — "button" (default) | "submit" | "reset"
  *
+ * Form participation: form-associated via the Form-Associated Custom Elements
+ * API (ElementInternals). When nested inside a light-DOM <form>, type="submit"
+ * calls the form's requestSubmit() and type="reset" calls its reset() — the
+ * inner shadow-DOM <button> has no native form of its own to act on.
+ *
  * Slots:
  *   (default)    — button label
  *   icon-start   — icon placed before the label
@@ -32,6 +37,7 @@ type ButtonSize = 'small' | 'medium' | 'large';
  * </bds-button>
  */
 declare class BdsButton extends LitElement {
+    static formAssociated: boolean;
     static styles: lit.CSSResult;
     static properties: {
         variant: {
@@ -91,10 +97,12 @@ declare class BdsButton extends LitElement {
     ariaLabel: string | null;
     private _iconStartFilled;
     private _iconEndFilled;
+    private _internals;
     constructor();
     private _onIconSlotChange;
     private get _classes();
     private _handleAnchorClick;
+    private _handleButtonClick;
     private _iconSlot;
     render(): lit.TemplateResult<1>;
 }

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

@@ -1,6 +1,6 @@
 import {
   BdsButton
-} from "../chunk-F5E3IT7G.js";
+} from "../chunk-XIZWAWMJ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsButton

package/dist/web-components/interaction/bds-collapsible.d.ts

@@ -8,8 +8,11 @@ import { LitElement } from 'lit';
  *
  * Attributes:
  *   open     — boolean; controlled open state
- *   name     — groups multiple collapsibles so only one is open at a time
- *               (native <details name="…"> behaviour)
+ *   name     — groups multiple collapsibles so only one is open at a time.
+ *               Each instance renders its own <details> in its own shadow root, so
+ *               native <details name> grouping (tree-scoped) can't see across
+ *               instances; the component emulates it by closing same-name siblings
+ *               found via document.querySelectorAll() whenever one opens.
  *
  * Slots:
  *   summary  — the always-visible trigger text
@@ -40,6 +43,8 @@ declare class BdsCollapsible extends LitElement {
     name: string;
     constructor();
     updated(changed: Map<string, unknown>): void;
+    private _closeOtherGroupMembers;
+    private _setOpen;
     private _onToggle;
     render(): lit.TemplateResult<1>;
 }

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

@@ -1,6 +1,6 @@
 import {
   BdsCollapsible
-} from "../chunk-6I2DBFQ7.js";
+} from "../chunk-HGFCJXOQ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCollapsible

package/dist/web-components/interaction/bds-dialog.d.ts

@@ -6,10 +6,13 @@ import { LitElement } from 'lit';
  *
  * Wraps a native `<dialog>` element with `showModal()` / `close()` lifecycle,
  * backdrop-click to dismiss, Escape key handling, Tab focus trapping, and
- * the Invoker Commands API (`command="show-modal"` / `command="close"`).
+ * the Invoker Commands API (custom commands `--show-modal` / `--close`; the
+ * unprefixed `show-modal` / `close` values are still accepted for
+ * compatibility with polyfilled/legacy environments).
  *
  * Attributes:
  *   open — boolean; controlled open state (syncs to native showModal/close)
+ *   aria-label — accessible name forwarded to the inner shadow <dialog>
  *
  * Slots:
  *   (default) — dialog content
@@ -19,10 +22,10 @@ import { LitElement } from 'lit';
  *   bds-close — fired (bubbles, composed) when the dialog closes
  *
  * @example
- * <bds-dialog id="my-dialog">
+ * <bds-dialog id="my-dialog" aria-label="Confirm deletion">
  *   <p>Dialog content</p>
  * </bds-dialog>
- * <button commandfor="my-dialog" command="show-modal">Open</button>
+ * <button commandfor="my-dialog" command="--show-modal">Open</button>
  */
 declare class BdsDialog extends LitElement {
     static styles: lit.CSSResult;
@@ -31,8 +34,13 @@ declare class BdsDialog extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     open: boolean;
+    ariaLabel: string | null;
     private _triggerEl;
     constructor();
     connectedCallback(): void;

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

@@ -1,6 +1,6 @@
 import {
   BdsDialog
-} from "../chunk-65JXQOBA.js";
+} from "../chunk-U3YZE6R6.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDialog

package/dist/web-components/interaction/bds-drawer.d.ts

@@ -11,6 +11,7 @@ type DrawerSide = 'left' | 'right';
  * Attributes:
  *   open — boolean; controlled open state
  *   side — "left" | "right" (default: "right")
+ *   aria-label — optional; overrides the default accessible name (the title slot)
  *
  * Slots:
  *   title   — drawer title text
@@ -25,7 +26,7 @@ type DrawerSide = 'left' | 'right';
  *   <span slot="title">Settings</span>
  *   <p>Drawer content</p>
  * </bds-drawer>
- * <button commandfor="my-drawer" command="show-modal">Open</button>
+ * <button commandfor="my-drawer" command="--show-modal">Open</button>
  */
 declare class BdsDrawer extends LitElement {
     static styles: lit.CSSResult;
@@ -38,9 +39,14 @@ declare class BdsDrawer extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     open: boolean;
     side: DrawerSide;
+    ariaLabel: string | null;
     private _triggerEl;
     constructor();
     connectedCallback(): void;

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

@@ -1,6 +1,6 @@
 import {
   BdsDrawer
-} from "../chunk-KUI55GFB.js";
+} from "../chunk-JUPCZVVW.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDrawer

package/dist/web-components/interaction/bds-dropdown-menu-item.d.ts

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

package/dist/web-components/interaction/bds-dropdown-menu-item.js

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

package/dist/web-components/interaction/bds-dropdown-menu.d.ts

@@ -0,0 +1,70 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+/**
+ * `<bds-dropdown-menu>` — anchored dropdown menu with keyboard navigation.
+ *
+ * The panel is an absolutely-positioned element inside the shadow root (not
+ * the native Popover API / top layer) — it can be clipped by an ancestor's
+ * `overflow` or stacking context. Light-dismiss is implemented via a
+ * document-level `click` listener. The trigger slot element controls
+ * open/close. The component handles keyboard navigation (Arrow keys, Home,
+ * End, 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;
+    private readonly _uid;
+    private get _panelId();
+    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;
+    }
+}
+
+export { BdsDropdownMenu, type DropdownMenuPlacement };

package/dist/web-components/interaction/bds-dropdown-menu.js

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

package/dist/web-components/interaction/bds-popover.d.ts

@@ -10,11 +10,14 @@ type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
  * overflow the viewport (`@position-try` fallbacks).
  *
  * Attributes:
- *   placement — "bottom" (default) | "top" | "left" | "right"
- *   open      — boolean; reflects whether the panel is visible
+ *   placement  — "bottom" (default) | "top" | "left" | "right"
+ *   open       — boolean; reflects whether the panel is visible
+ *   aria-label — accessible name for the panel; when present the panel gets
+ *                `role="region"` (mirrors the React implementation)
  *
  * Slots:
- *   trigger   — the element that opens/closes the panel on click
+ *   trigger   — the element that opens/closes the panel on click. Receives
+ *               `aria-haspopup`, `aria-controls` and `aria-expanded` wiring.
  *   (default) — panel content
  *
  * Events:
@@ -38,10 +41,17 @@ declare class BdsPopover extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     placement: PopoverPlacement;
     open: boolean;
+    ariaLabel: string | null;
     private _anchorName;
+    private _panelId;
+    private _triggerEl;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -51,6 +61,7 @@ declare class BdsPopover extends LitElement {
     private _toggle;
     private _open;
     private _close;
+    private _onTriggerSlotChange;
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

@@ -1,6 +1,6 @@
 import {
   BdsPopover
-} from "../chunk-TQ7IQ4GZ.js";
+} from "../chunk-QEF2IRID.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsPopover

package/dist/web-components/interaction/bds-skip-link.js

@@ -1,6 +1,6 @@
 import {
   BdsSkipLink
-} from "../chunk-BQLZ7I4G.js";
+} from "../chunk-66M6ETWD.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsSkipLink

package/dist/web-components/interaction/bds-tab-panel.js

@@ -1,6 +1,6 @@
 import {
   BdsTabPanel
-} from "../chunk-OQTRTMAB.js";
+} from "../chunk-WIBAN7KP.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTabPanel

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

@@ -1,6 +1,6 @@
 import {
   BdsTab
-} from "../chunk-6I3CFC26.js";
+} from "../chunk-RSZ3BWBK.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTab

package/dist/web-components/interaction/bds-tabs.d.ts

@@ -27,6 +27,7 @@ declare class BdsTabs extends LitElement {
     static styles: lit.CSSResult;
     private _activeIndex;
     private _mo;
+    private readonly _uid;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private get _tabs();

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

@@ -1,6 +1,6 @@
 import {
   BdsTabs
-} from "../chunk-L3XHOMN6.js";
+} from "../chunk-F3ZDNHZZ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTabs

package/dist/web-components/interaction/bds-toast-provider.js

@@ -1,6 +1,6 @@
 import {
   BdsToastProvider
-} from "../chunk-YLVTEY23.js";
+} from "../chunk-BTCMJQKB.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsToastProvider

package/dist/web-components/interaction/bds-tooltip.d.ts

@@ -16,9 +16,14 @@ type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
  *   (default) — the trigger element (button, icon, etc.)
  *
  * Accessibility:
- *   The `aria-describedby` relationship between trigger and tooltip panel
- *   cannot cross shadow DOM boundaries; screen readers will announce the tooltip
- *   via role="tooltip" proximity when it becomes visible.
+ *   `aria-describedby` id references only resolve within the same tree scope, so a
+ *   slotted (light-DOM) trigger can never reference an id that lives inside this
+ *   element's shadow root. To keep the description reachable, a visually-hidden
+ *   `<span>` holding `content` is appended as a light-DOM child of the host and its
+ *   id is written into `aria-describedby` on the slotted trigger — both elements then
+ *   share the light DOM's tree scope, so the reference resolves in every browser. The
+ *   shadow-DOM tooltip bubble stays `aria-hidden="true"`; it is purely the visual
+ *   presentation, shown on `:hover`/`:focus-within`.
  *
  * @example
  * <bds-tooltip content="More information" placement="bottom">
@@ -38,7 +43,18 @@ declare class BdsTooltip extends LitElement {
     };
     content: string;
     placement: TooltipPlacement;
+    private readonly _uid;
+    /** Visually-hidden light-DOM node holding `content`, referenced by the trigger's aria-describedby. */
+    private _descEl;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private get _descId();
+    /** Ensures the hidden description node exists (or is torn down) and re-wires the trigger. */
+    private _syncDescription;
+    private _describeTrigger;
+    private _teardownDescription;
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

@@ -1,6 +1,6 @@
 import {
   BdsTooltip
-} from "../chunk-Y7V7LM6R.js";
+} from "../chunk-M3ECULRH.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTooltip

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

@@ -0,0 +1,83 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
+ *
+ * Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+ * Propagates `disabled` to slotted `<bds-checkbox>` elements — a shadow-DOM
+ * `<fieldset disabled>` has no effect on slotted light-DOM content on its
+ * own, so the group attribute is explicitly applied to (and removed from)
+ * each child. A checkbox individually marked `disabled` in markup stays
+ * disabled even after the group re-enables.
+ *
+ * `required` is surfaced to assistive tech via a visually-hidden "(required)"
+ * text alternative in the legend rather than `aria-required` on the fieldset —
+ * `aria-required` is only a supported property on the `checkbox`, `combobox`,
+ * `gridcell`, `listbox`, `radiogroup`, `spinbutton`, `textbox` and `tree`
+ * roles; a bare `<fieldset>` maps to the generic `group` role, which does not
+ * support it (there is no ARIA `checkboxgroup` role), so the attribute would
+ * be silently ignored by assistive tech.
+ *
+ * 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 and all slotted `<bds-checkbox>` elements
+ *   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;
+    private readonly _uid;
+    constructor();
+    /**
+     * Propagates `disabled` to slotted `<bds-checkbox>` elements. Only checkboxes
+     * that were enabled before the group disabled them are re-enabled when the
+     * group re-enables — a checkbox individually marked `disabled` in markup
+     * stays disabled.
+     */
+    private _propagateDisabled;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-checkbox-group': BdsCheckboxGroup;
+    }
+}
+
+export { BdsCheckboxGroup };

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

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

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

@@ -14,6 +14,7 @@ import { LitElement } from 'lit';
  *   checked  — boolean; whether the checkbox is checked
  *   required — boolean
  *   disabled — boolean
+ *   error    — boolean; puts the checkbox in an error state (border colour + aria-invalid)
  *
  * Slots:
  *   (default) — label text
@@ -47,12 +48,17 @@ declare class BdsCheckbox extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        error: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
     name: string;
     value: string;
     checked: boolean;
     required: boolean;
     disabled: boolean;
+    error: boolean;
     private _internals;
     private readonly _uid;
     constructor();

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

@@ -1,6 +1,6 @@
 import {
   BdsCheckbox
-} from "../../chunk-3GFWLSLS.js";
+} from "../../chunk-KA3VPKMY.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckbox

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

@@ -17,6 +17,9 @@ interface ComboboxOption {
  *   value       — currently selected value
  *   options     — JSON array of `{ value, label, disabled? }` option objects
  *   placeholder — input placeholder text
+ *   label       — visible label text (associated to the input via `<label for>`)
+ *   hint        — helper text shown below the input
+ *   error       — error message; when set the input enters error state
  *   disabled    — boolean
  *
  * Events:
@@ -25,6 +28,7 @@ interface ComboboxOption {
  * @example
  * <bds-combobox
  *   name="country"
+ *   label="Country"
  *   placeholder="Search…"
  *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
  * ></bds-combobox>
@@ -46,6 +50,16 @@ declare class BdsCombobox extends LitElement {
         placeholder: {
             type: StringConstructor;
         };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -55,8 +69,12 @@ declare class BdsCombobox extends LitElement {
     value: string;
     options: string;
     placeholder: string;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
     disabled: boolean;
     private _internals;
+    private readonly _uid;
     private _open;
     private _query;
     private _focusedIndex;

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

@@ -1,6 +1,6 @@
 import {
   BdsCombobox
-} from "../../chunk-CZBIVR4V.js";
+} from "../../chunk-47AT5KZD.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCombobox