@boostdev/design-system-components 1.1.0 → 1.1.2

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

package/dist/web-components/ui/bds-notification-banner.d.ts

@@ -0,0 +1,61 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error';
+/**
+ * `<bds-notification-banner>` — framework-agnostic Notification Banner custom element.
+ *
+ * Attributes:
+ *   variant       — "info" (default) | "success" | "warning" | "error"
+ *   dismissible   — boolean; shows a dismiss button when present
+ *   dismiss-label — aria-label for the dismiss button (default: "Dismiss notification")
+ *
+ * Slots:
+ *   (default) — banner body content
+ *   action    — optional action area (e.g. a button)
+ *
+ * Events:
+ *   bds-dismiss — fired (bubbles, composed) when the dismiss button is clicked
+ *
+ * @example
+ * <bds-notification-banner variant="success">
+ *   Your changes have been saved.
+ *   <button slot="action" type="button">Undo</button>
+ * </bds-notification-banner>
+ */
+declare class BdsNotificationBanner extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dismissLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _actionFilled: {
+            state: boolean;
+        };
+    };
+    variant: NotificationBannerVariant;
+    dismissible: boolean;
+    dismissLabel: string;
+    private _actionFilled;
+    constructor();
+    private _onActionSlotChange;
+    private get _isUrgent();
+    private _handleDismiss;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-notification-banner': BdsNotificationBanner;
+    }
+}
+
+export { BdsNotificationBanner, type NotificationBannerVariant };

package/dist/web-components/ui/bds-notification-banner.js

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

package/dist/web-components/ui/bds-progress-circle.d.ts

@@ -0,0 +1,53 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-progress-circle>` — framework-agnostic circular Progress custom element.
+ *
+ * Attributes:
+ *   value      — current progress value (required)
+ *   max        — maximum value (default: 100)
+ *   label      — accessible label for the progress bar
+ *   show-value — boolean; when set, displays the percentage in the centre
+ *   size       — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-progress-circle value="75" label="Loading" show-value></bds-progress-circle>
+ */
+declare class BdsProgressCircle extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        value: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        showValue: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    value: number;
+    max: number;
+    label: string;
+    showValue: boolean;
+    size: 'small' | 'medium' | 'large';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-progress-circle': BdsProgressCircle;
+    }
+}
+
+export { BdsProgressCircle };

package/dist/web-components/ui/bds-progress-circle.js

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

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

@@ -0,0 +1,54 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-progress>` — framework-agnostic Progress bar custom element.
+ *
+ * Attributes:
+ *   value      — current progress value (required)
+ *   max        — maximum value (default: 100)
+ *   label      — accessible label for the progress bar
+ *   show-label — boolean; when set, displays the label and percentage above the bar
+ *   size       — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-progress value="60" label="Upload progress" show-label></bds-progress>
+ */
+declare class BdsProgress extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        value: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        showLabel: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    value: number;
+    max: number;
+    label: string;
+    showLabel: boolean;
+    size: 'small' | 'medium' | 'large';
+    constructor();
+    private get _percentage();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-progress': BdsProgress;
+    }
+}
+
+export { BdsProgress };

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

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

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

@@ -0,0 +1,36 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-rating>` — framework-agnostic read-only star Rating custom element.
+ *
+ * Attributes:
+ *   value — number of filled stars
+ *   max   — total number of stars (default: 5)
+ *
+ * @example
+ * <bds-rating value="3"></bds-rating>
+ * <bds-rating value="4" max="10"></bds-rating>
+ */
+declare class BdsRating extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        value: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+    };
+    value: number;
+    max: number;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-rating': BdsRating;
+    }
+}
+
+export { BdsRating };

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

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

package/dist/web-components/ui/bds-section-header.d.ts

@@ -0,0 +1,53 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-section-header>` — framework-agnostic Section Header custom element.
+ *
+ * Attributes:
+ *   title     — heading text (required)
+ *   subtitle  — optional subheading text
+ *   alignment — "start" (default) | "center" | "end"
+ *   size      — "small" | "medium" (default) | "large"
+ *   title-as  — tag name for the title element (default: "h2")
+ *
+ * @example
+ * <bds-section-header title="Our Products" subtitle="Browse the full range" size="large"></bds-section-header>
+ */
+declare class BdsSectionHeader extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        title: {
+            type: StringConstructor;
+        };
+        subtitle: {
+            type: StringConstructor;
+        };
+        alignment: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        titleAs: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    title: string;
+    subtitle: string;
+    alignment: 'start' | 'center' | 'end';
+    size: 'small' | 'medium' | 'large';
+    titleAs: string;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-section-header': BdsSectionHeader;
+    }
+}
+
+export { BdsSectionHeader };

package/dist/web-components/ui/bds-section-header.js

@@ -0,0 +1,8 @@
+import {
+  BdsSectionHeader
+} from "../chunk-Y4MAXTMA.js";
+import "../chunk-QPOKHLMQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsSectionHeader
+};