@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,67 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-switch>` — form-associated Toggle Switch custom element.
+ *
+ * Visually a toggle switch but semantically equivalent to a checkbox
+ * (`role="switch"`). Participates in HTML forms via the Form-Associated
+ * Custom Elements API.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — submitted value when on (default: "on")
+ *   checked  — boolean; whether the switch is on
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * @example
+ * <bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+ */
+declare class BdsSwitch 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-switch': BdsSwitch;
+    }
+}
+
+export { BdsSwitch };

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

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

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

@@ -0,0 +1,70 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-textarea>` — form-associated Textarea custom element.
+ *
+ * Wraps a native `<textarea>` for consistent styling while participating
+ * in HTML forms via the Form-Associated Custom Elements API.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — text value
+ *   placeholder — placeholder text
+ *   rows        — number of visible rows (default: 4)
+ *   required    — boolean
+ *   disabled    — boolean
+ *
+ * Events:
+ *   input  — native input event
+ *   change — native change event
+ *
+ * @example
+ * <bds-textarea name="message" placeholder="Enter message…" rows="6"></bds-textarea>
+ */
+declare class BdsTextarea extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    placeholder: string;
+    rows: number;
+    required: boolean;
+    disabled: boolean;
+    private _internals;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _handleInput;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-textarea': BdsTextarea;
+    }
+}
+
+export { BdsTextarea };

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

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

package/dist/web-components/ui/bds-alert.d.ts

@@ -0,0 +1,66 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+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;
+    }
+}
+
+export { type AlertVariant, BdsAlert };

package/dist/web-components/ui/bds-alert.js

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

package/dist/web-components/ui/bds-avatar.d.ts

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-avatar>` — framework-agnostic Avatar custom element.
+ *
+ * Shows an image when `src` is set; falls back to initials derived from `name`.
+ *
+ * Attributes:
+ *   src  — image URL
+ *   alt  — image alt text (defaults to `name` or "User avatar")
+ *   name — full name; used to compute initials and as fallback aria-label
+ *   size — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-avatar src="/photo.jpg" name="Jane Doe"></bds-avatar>
+ * <bds-avatar name="Jane Doe" size="large"></bds-avatar>
+ */
+declare class BdsAvatar extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        src: {
+            type: StringConstructor;
+        };
+        alt: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    src: string;
+    alt: string;
+    name: string;
+    size: 'small' | 'medium' | 'large';
+    constructor();
+    private get _initials();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-avatar': BdsAvatar;
+    }
+}
+
+export { BdsAvatar };

package/dist/web-components/ui/bds-avatar.js

@@ -0,0 +1,7 @@
+import {
+  BdsAvatar
+} from "../chunk-57TRNCWQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsAvatar
+};

package/dist/web-components/ui/bds-badge.d.ts

@@ -0,0 +1,35 @@
+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;
+    }
+}
+
+export { type BadgeVariant, BdsBadge };

package/dist/web-components/ui/bds-badge.js

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

package/dist/web-components/ui/bds-breadcrumb.d.ts

@@ -0,0 +1,35 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+/**
+ * `<bds-breadcrumb>` — framework-agnostic Breadcrumb custom element.
+ *
+ * Attributes:
+ *   items — JSON string array of `{ label: string, href?: string }` objects.
+ *           The last item is treated as the current page (no link).
+ *
+ * @example
+ * <bds-breadcrumb items='[{"label":"Home","href":"/"},{"label":"Products","href":"/products"},{"label":"Item"}]'></bds-breadcrumb>
+ */
+declare class BdsBreadcrumb extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        items: {
+            type: ArrayConstructor;
+        };
+    };
+    items: BreadcrumbItem[];
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-breadcrumb': BdsBreadcrumb;
+    }
+}
+
+export { BdsBreadcrumb, type BreadcrumbItem };

package/dist/web-components/ui/bds-breadcrumb.js

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

package/dist/web-components/ui/bds-card.d.ts

@@ -0,0 +1,72 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+type CardPadding = 'none' | 'small' | 'medium' | 'large';
+type CardTextAlign = 'start' | 'center' | 'end';
+/**
+ * `<bds-card>` — framework-agnostic Card layout custom element.
+ *
+ * Attributes:
+ *   variant    — "default" (default) | "elevated" | "outlined"
+ *   padding    — "none" | "small" | "medium" (default) | "large"
+ *   text-align — "start" (default) | "center" | "end"
+ *   clickable  — boolean; renders as a <button> with hover/active effects
+ *   aria-label — accessible label (useful when clickable)
+ *
+ * Slots:
+ *   (default) — card content
+ *
+ * Events:
+ *   bds-click — fired (bubbles, composed) when the card button is clicked
+ *
+ * @example
+ * <bds-card variant="elevated" padding="large">
+ *   <p>Card content</p>
+ * </bds-card>
+ *
+ * <bds-card clickable aria-label="Open details">
+ *   <p>Clickable card</p>
+ * </bds-card>
+ */
+declare class BdsCard extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        padding: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        textAlign: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        clickable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    variant: CardVariant;
+    padding: CardPadding;
+    textAlign: CardTextAlign;
+    clickable: boolean;
+    ariaLabel: string;
+    constructor();
+    private _handleClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-card': BdsCard;
+    }
+}
+
+export { BdsCard, type CardPadding, type CardTextAlign, type CardVariant };

package/dist/web-components/ui/bds-card.js

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

package/dist/web-components/ui/bds-description-list.d.ts

@@ -0,0 +1,42 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-description-list>` — framework-agnostic Description List custom element.
+ *
+ * Renders a `<dl>` styled list. Consumers provide `<dt>` and `<dd>` elements
+ * as slotted children; this component handles layout and styling.
+ *
+ * Attributes:
+ *   layout — "stacked" (default) | "inline"
+ *
+ * Slots:
+ *   (default) — `<dt>` and `<dd>` pairs
+ *
+ * @example
+ * <bds-description-list layout="inline">
+ *   <dt>Name</dt>
+ *   <dd>Jane Doe</dd>
+ *   <dt>Email</dt>
+ *   <dd>jane@example.com</dd>
+ * </bds-description-list>
+ */
+declare class BdsDescriptionList extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        layout: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    layout: 'stacked' | 'inline';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-description-list': BdsDescriptionList;
+    }
+}
+
+export { BdsDescriptionList };

package/dist/web-components/ui/bds-description-list.js

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

package/dist/web-components/ui/bds-icon-wrapper.d.ts

@@ -0,0 +1,39 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-icon-wrapper>` — framework-agnostic Icon Wrapper custom element.
+ *
+ * Displays an icon inside a circular container with background and foreground theming.
+ *
+ * Attributes:
+ *   aria-hidden — boolean attribute; set to "true" for decorative icons
+ *
+ * Slots:
+ *   (default) — icon content (SVG or img)
+ *
+ * @example
+ * <bds-icon-wrapper aria-hidden="true">
+ *   <svg>…</svg>
+ * </bds-icon-wrapper>
+ */
+declare class BdsIconWrapper extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        ariaHidden: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    ariaHidden: string;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-icon-wrapper': BdsIconWrapper;
+    }
+}
+
+export { BdsIconWrapper };

package/dist/web-components/ui/bds-icon-wrapper.js

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

package/dist/web-components/ui/bds-link.d.ts

@@ -0,0 +1,59 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type LinkVariant = 'default' | 'subtle' | 'standalone';
+/**
+ * `<bds-link>` — framework-agnostic Link custom element.
+ *
+ * Attributes:
+ *   href           — URL for the anchor
+ *   target         — link target (e.g. "_blank")
+ *   variant        — "default" (default) | "subtle" | "standalone"
+ *   external       — boolean; when set, adds rel="noreferrer noopener" and a
+ *                    visually-hidden label for screen readers
+ *   external-label — the screen reader text appended for external links
+ *                    (default: "(opens in new tab)")
+ *
+ * Slots:
+ *   (default) — link text / content
+ *
+ * @example
+ * <bds-link href="https://example.com" external>Visit site</bds-link>
+ */
+declare class BdsLink extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        href: {
+            type: StringConstructor;
+        };
+        target: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        external: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        externalLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    href: string;
+    target: string;
+    variant: LinkVariant;
+    external: boolean;
+    externalLabel: string;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-link': BdsLink;
+    }
+}
+
+export { BdsLink, type LinkVariant };

package/dist/web-components/ui/bds-link.js

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

package/dist/web-components/ui/bds-loading.d.ts

@@ -0,0 +1,32 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-loading>` — framework-agnostic Loading spinner custom element.
+ *
+ * Attributes:
+ *   size — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-loading></bds-loading>
+ * <bds-loading size="large"></bds-loading>
+ */
+declare class BdsLoading extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    size: 'small' | 'medium' | 'large';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-loading': BdsLoading;
+    }
+}
+
+export { BdsLoading };

package/dist/web-components/ui/bds-loading.js

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