@boostdev/design-system-components 1.0.2 → 1.1.0

package/dist/web-components.d.ts

@@ -0,0 +1,303 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+/**
+ * `<bds-badge>` — framework-agnostic Badge custom element.
+ *
+ * Attributes:
+ *   variant  — "primary" (default) | "secondary" | "success" | "error" | "warning"
+ *
+ * Slots:
+ *   (default) — badge label text / content
+ *
+ * @example
+ * <bds-badge variant="success">New</bds-badge>
+ */
+declare class BdsBadge extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: BadgeVariant;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-badge': BdsBadge;
+    }
+}
+
+type ButtonVariant = 'default' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * `<bds-button>` — framework-agnostic Button custom element.
+ *
+ * Attributes:
+ *   variant   — "default" (filled, default) | "ghost" (transparent + outlined)
+ *   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;
+    }
+}
+
+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;
+    }
+}
+
+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 _onOutsideClick;
+    private _toggle;
+    private _open;
+    private _close;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-popover': BdsPopover;
+    }
+}
+
+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 { BdsAlert, BdsBadge, BdsButton, BdsPopover, BdsToastProvider };