@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,62 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
+/**
+ * `<bds-popover>` — framework-agnostic Popover custom element.
+ *
+ * Uses CSS Anchor Positioning within the shadow DOM so the panel stays
+ * anchored to the trigger and automatically repositions when it would
+ * overflow the viewport (`@position-try` fallbacks).
+ *
+ * Attributes:
+ *   placement — "bottom" (default) | "top" | "left" | "right"
+ *   open      — boolean; reflects whether the panel is visible
+ *
+ * Slots:
+ *   trigger   — the element that opens/closes the panel on click
+ *   (default) — panel content
+ *
+ * Events:
+ *   bds-open  — fired (bubbles, composed) when the panel opens
+ *   bds-close — fired (bubbles, composed) when the panel closes
+ *
+ * @example
+ * <bds-popover placement="bottom">
+ *   <button slot="trigger">Open</button>
+ *   <p>Panel content here</p>
+ * </bds-popover>
+ */
+declare class BdsPopover extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    placement: PopoverPlacement;
+    open: boolean;
+    private _anchorName;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onKeydown;
+    private _onCommand;
+    private _onOutsideClick;
+    private _toggle;
+    private _open;
+    private _close;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-popover': BdsPopover;
+    }
+}
+
+export { BdsPopover, type PopoverPlacement };

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

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

package/dist/web-components/interaction/bds-skip-link.d.ts

@@ -0,0 +1,36 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-skip-link>` — framework-agnostic Skip Navigation Link custom element.
+ *
+ * Visually hidden until focused. Allows keyboard users to skip repetitive
+ * navigation and jump directly to main content.
+ *
+ * Attributes:
+ *   href — the target anchor (default: "#main")
+ *
+ * Slots:
+ *   (default) — link text (default: "Skip to main content")
+ *
+ * @example
+ * <bds-skip-link href="#main-content">Skip to main content</bds-skip-link>
+ */
+declare class BdsSkipLink extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        href: {
+            type: StringConstructor;
+        };
+    };
+    href: string;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-skip-link': BdsSkipLink;
+    }
+}
+
+export { BdsSkipLink };

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

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

package/dist/web-components/interaction/bds-tab-panel.d.ts

@@ -0,0 +1,26 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-tab-panel>` — child element of `<bds-tabs>`.
+ *
+ * Contains the content displayed for the associated tab. The `hidden`
+ * state is managed by the parent `<bds-tabs>` element.
+ *
+ * Slots:
+ *   (default) — panel content
+ *
+ * @example
+ * <bds-tab-panel>Panel content here</bds-tab-panel>
+ */
+declare class BdsTabPanel extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-tab-panel': BdsTabPanel;
+    }
+}
+
+export { BdsTabPanel };

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

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

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

@@ -0,0 +1,45 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-tab>` — child element of `<bds-tabs>`.
+ *
+ * Represents a single tab button. State (`selected`, `tabIndex`, `disabled`)
+ * is managed by the parent `<bds-tabs>` element.
+ *
+ * Slots:
+ *   (default) — tab label
+ *
+ * Events:
+ *   bds-tab-select — fired (bubbles, composed) when the tab is clicked
+ *
+ * @example
+ * <bds-tab>Overview</bds-tab>
+ */
+declare class BdsTab extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    selected: boolean;
+    disabled: boolean;
+    constructor();
+    /** Called by `bds-tabs` to focus the inner button for keyboard navigation. */
+    focusButton(): void;
+    private _handleClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-tab': BdsTab;
+    }
+}
+
+export { BdsTab };

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

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

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

@@ -0,0 +1,46 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-tabs>` — framework-agnostic Tabs custom element.
+ *
+ * Contains `<bds-tab>` and `<bds-tab-panel>` children. Tabs and panels are
+ * matched by DOM order: the first tab corresponds to the first panel, etc.
+ *
+ * Use `slot="tab"` on `<bds-tab>` elements and `slot="panel"` on
+ * `<bds-tab-panel>` elements.
+ *
+ * Keyboard navigation: ArrowLeft/Right moves between tabs, Home/End jumps to
+ * first/last enabled tab.
+ *
+ * @example
+ * <bds-tabs>
+ *   <bds-tab slot="tab">Overview</bds-tab>
+ *   <bds-tab slot="tab">Details</bds-tab>
+ *   <bds-tab slot="tab" disabled>Disabled</bds-tab>
+ *   <bds-tab-panel slot="panel">Overview content</bds-tab-panel>
+ *   <bds-tab-panel slot="panel">Details content</bds-tab-panel>
+ *   <bds-tab-panel slot="panel">Disabled content</bds-tab-panel>
+ * </bds-tabs>
+ */
+declare class BdsTabs extends LitElement {
+    static styles: lit.CSSResult;
+    private _activeIndex;
+    private _mo;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _tabs();
+    private get _panels();
+    private get _enabledIndexes();
+    private _applyState;
+    private _handleTabSelect;
+    private _handleKeydown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-tabs': BdsTabs;
+    }
+}
+
+export { BdsTabs };

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

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

package/dist/web-components/interaction/bds-toast-provider.d.ts

@@ -0,0 +1,57 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
+/**
+ * `<bds-toast-provider>` — framework-agnostic Toast provider custom element.
+ *
+ * Wraps page content and manages a `popover="manual"` toast container that
+ * renders in the browser top layer — above all fixed/sticky elements without
+ * needing a z-index.
+ *
+ * Usage:
+ *   // Instance method (direct reference)
+ *   provider.showToast('Saved!', 'success');
+ *
+ *   // Static convenience (finds the first provider in the DOM)
+ *   BdsToastProvider.show('Something went wrong', 'error');
+ *
+ *   // Event-driven (no import required)
+ *   document.dispatchEvent(new CustomEvent('bds-show-toast', {
+ *     detail: { message: 'Hello', variant: 'info' }
+ *   }));
+ *
+ * Slots:
+ *   (default) — page content; the host uses display:contents so layout
+ *               is unaffected
+ *
+ * @example
+ * <bds-toast-provider>
+ *   <main>…</main>
+ * </bds-toast-provider>
+ */
+declare class BdsToastProvider extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        _toasts: {
+            state: boolean;
+        };
+    };
+    private _toasts;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    showToast(message: string, variant?: ToastVariant): void;
+    private _removeToast;
+    private _onShowToastEvent;
+    static show(message: string, variant?: ToastVariant): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-toast-provider': BdsToastProvider;
+    }
+}
+
+export { BdsToastProvider, type ToastVariant };

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

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

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

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * `<bds-tooltip>` — framework-agnostic Tooltip custom element.
+ *
+ * Shows a tooltip panel on hover and keyboard focus using CSS-only visibility.
+ * The tooltip position is controlled via the `placement` attribute.
+ *
+ * Attributes:
+ *   content   — text to display in the tooltip
+ *   placement — "top" (default) | "bottom" | "left" | "right"
+ *
+ * Slots:
+ *   (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.
+ *
+ * @example
+ * <bds-tooltip content="More information" placement="bottom">
+ *   <button type="button">?</button>
+ * </bds-tooltip>
+ */
+declare class BdsTooltip extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        content: {
+            type: StringConstructor;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    content: string;
+    placement: TooltipPlacement;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-tooltip': BdsTooltip;
+    }
+}
+
+export { BdsTooltip, type TooltipPlacement };

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-IK3PTFZ4.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-QDRH46TF.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
+};