@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,100 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type ButtonVariant = 'default' | 'outline' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * `<bds-button>` — framework-agnostic Button custom element.
+ *
+ * Attributes:
+ *   variant   — "default" (filled, default) | "outline" (transparent + outlined) | "ghost" (deprecated alias for "outline")
+ *   size      — "small" | "medium" (default) | "large"
+ *   disabled  — boolean
+ *   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
+ *   type      — "button" (default) | "submit" | "reset"
+ *
+ * Slots:
+ *   (default)    — button label
+ *   icon-start   — icon placed before the label
+ *   icon-end     — icon placed after the label
+ *
+ * Events:
+ *   click — standard DOM click (disabled buttons suppress it and set aria-disabled)
+ *
+ * @example
+ * <bds-button variant="ghost" size="small">
+ *   <svg slot="icon-start">…</svg>
+ *   Save
+ * </bds-button>
+ */
+declare class BdsButton extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        target: {
+            type: StringConstructor;
+        };
+        rel: {
+            type: StringConstructor;
+        };
+        hasPulse: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _iconStartFilled: {
+            state: boolean;
+        };
+        _iconEndFilled: {
+            state: boolean;
+        };
+    };
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    href: string | undefined;
+    target: string | undefined;
+    rel: string | undefined;
+    hasPulse: boolean;
+    type: 'button' | 'submit' | 'reset';
+    ariaLabel: string | null;
+    private _iconStartFilled;
+    private _iconEndFilled;
+    constructor();
+    private _onIconSlotChange;
+    private get _classes();
+    private _handleAnchorClick;
+    private _iconSlot;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-button': BdsButton;
+    }
+}
+
+export { BdsButton, type ButtonSize, type ButtonVariant };

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

@@ -0,0 +1,7 @@
+import {
+  BdsButton
+} from "../chunk-3REOIRDW.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsButton
+};

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

@@ -0,0 +1,52 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-collapsible>` — framework-agnostic Collapsible custom element.
+ *
+ * Wraps a native `<details>/<summary>` element for built-in toggle behaviour.
+ *
+ * Attributes:
+ *   open     — boolean; controlled open state
+ *   name     — groups multiple collapsibles so only one is open at a time
+ *               (native <details name="…"> behaviour)
+ *
+ * Slots:
+ *   summary  — the always-visible trigger text
+ *   (default) — the content revealed when expanded
+ *
+ * Events:
+ *   bds-toggle — fired (bubbles, composed) when the collapsible opens or closes;
+ *                event.detail.open reflects the new state
+ *
+ * @example
+ * <bds-collapsible>
+ *   <span slot="summary">What is this?</span>
+ *   <p>It's a collapsible panel.</p>
+ * </bds-collapsible>
+ */
+declare class BdsCollapsible extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+        };
+    };
+    open: boolean;
+    name: string;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    private _onToggle;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-collapsible': BdsCollapsible;
+    }
+}
+
+export { BdsCollapsible };

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

@@ -0,0 +1,7 @@
+import {
+  BdsCollapsible
+} from "../chunk-5IPHEONG.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsCollapsible
+};

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

@@ -0,0 +1,56 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-dialog>` — framework-agnostic Dialog custom element.
+ *
+ * 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"`).
+ *
+ * Attributes:
+ *   open — boolean; controlled open state (syncs to native showModal/close)
+ *
+ * Slots:
+ *   (default) — dialog content
+ *
+ * Events:
+ *   bds-open  — fired (bubbles, composed) when the dialog opens
+ *   bds-close — fired (bubbles, composed) when the dialog closes
+ *
+ * @example
+ * <bds-dialog id="my-dialog">
+ *   <p>Dialog content</p>
+ * </bds-dialog>
+ * <button commandfor="my-dialog" command="show-modal">Open</button>
+ */
+declare class BdsDialog extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    private _triggerEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private get _dialog();
+    private _onCommand;
+    private _openDialog;
+    private _closeDialog;
+    private _handleBackdropClick;
+    private _handleCancel;
+    private _handleKeydown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-dialog': BdsDialog;
+    }
+}
+
+export { BdsDialog };

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

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

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

@@ -0,0 +1,64 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type DrawerSide = 'left' | 'right';
+/**
+ * `<bds-drawer>` — framework-agnostic Drawer (slide-in panel) custom element.
+ *
+ * Same modal infrastructure as `<bds-dialog>` but positioned as a side panel.
+ * Uses a native `<dialog>` element with a slide-in inner panel.
+ *
+ * Attributes:
+ *   open — boolean; controlled open state
+ *   side — "left" | "right" (default: "right")
+ *
+ * Slots:
+ *   title   — drawer title text
+ *   (default) — drawer body content
+ *
+ * Events:
+ *   bds-open  — fired (bubbles, composed) when the drawer opens
+ *   bds-close — fired (bubbles, composed) when the drawer closes
+ *
+ * @example
+ * <bds-drawer id="my-drawer" side="right">
+ *   <span slot="title">Settings</span>
+ *   <p>Drawer content</p>
+ * </bds-drawer>
+ * <button commandfor="my-drawer" command="show-modal">Open</button>
+ */
+declare class BdsDrawer extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        side: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    side: DrawerSide;
+    private _triggerEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private get _dialog();
+    private _onCommand;
+    private _openDrawer;
+    private _closeDrawer;
+    private _handleBackdropClick;
+    private _handleCancel;
+    private _handleKeydown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-drawer': BdsDrawer;
+    }
+}
+
+export { BdsDrawer, type DrawerSide };

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

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

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 };