@boostdev/design-system-components 1.1.0 → 1.1.2

package/dist/web-components/index.d.ts

@@ -0,0 +1,41 @@
+export { BdsBadge } from './ui/bds-badge.js';
+export { BdsButton } from './interaction/bds-button.js';
+export { BdsAlert } from './ui/bds-alert.js';
+export { BdsPopover } from './interaction/bds-popover.js';
+export { BdsToastProvider } from './interaction/bds-toast-provider.js';
+export { BdsSeparator } from './ui/bds-separator.js';
+export { BdsSkeleton } from './ui/bds-skeleton.js';
+export { BdsLoading } from './ui/bds-loading.js';
+export { BdsAvatar } from './ui/bds-avatar.js';
+export { BdsTypography } from './ui/bds-typography.js';
+export { BdsProgress } from './ui/bds-progress.js';
+export { BdsProgressCircle } from './ui/bds-progress-circle.js';
+export { BdsRating } from './ui/bds-rating.js';
+export { BdsCollapsible } from './interaction/bds-collapsible.js';
+export { BdsAccordionItem } from './interaction/bds-accordion-item.js';
+export { BdsAccordion } from './interaction/bds-accordion.js';
+export { BdsTab } from './interaction/bds-tab.js';
+export { BdsTabPanel } from './interaction/bds-tab-panel.js';
+export { BdsTabs } from './interaction/bds-tabs.js';
+export { BdsTooltip } from './interaction/bds-tooltip.js';
+export { BdsSkipLink } from './interaction/bds-skip-link.js';
+export { BdsDialog } from './interaction/bds-dialog.js';
+export { BdsDrawer } from './interaction/bds-drawer.js';
+export { BdsCheckbox } from './interaction/form/bds-checkbox.js';
+export { BdsRadio } from './interaction/form/bds-radio.js';
+export { BdsSwitch } from './interaction/form/bds-switch.js';
+export { BdsSelect } from './interaction/form/bds-select.js';
+export { BdsTextarea } from './interaction/form/bds-textarea.js';
+export { BdsNumberInput } from './interaction/form/bds-number-input.js';
+export { BdsSlider } from './interaction/form/bds-slider.js';
+export { BdsSegmentedControl } from './interaction/form/bds-segmented-control.js';
+export { BdsFileInput } from './interaction/form/bds-file-input.js';
+export { BdsCombobox } from './interaction/form/bds-combobox.js';
+export { BdsNotificationBanner } from './ui/bds-notification-banner.js';
+export { BdsCard } from './ui/bds-card.js';
+export { BdsSectionHeader } from './ui/bds-section-header.js';
+export { BdsIconWrapper } from './ui/bds-icon-wrapper.js';
+export { BdsDescriptionList } from './ui/bds-description-list.js';
+export { BdsBreadcrumb } from './ui/bds-breadcrumb.js';
+export { BdsLink } from './ui/bds-link.js';
+import 'lit';

package/dist/web-components/index.js

@@ -0,0 +1,165 @@
+import {
+  BdsSwitch
+} from "./chunk-A67LCT7C.js";
+import {
+  BdsTextarea
+} from "./chunk-VSS5ITNE.js";
+import {
+  BdsCheckbox
+} from "./chunk-IK3PTFZ4.js";
+import {
+  BdsCombobox
+} from "./chunk-QDRH46TF.js";
+import {
+  BdsFileInput
+} from "./chunk-PY62FTRW.js";
+import {
+  BdsNumberInput
+} from "./chunk-OTX4COSV.js";
+import {
+  BdsRadio
+} from "./chunk-O7I63SQX.js";
+import {
+  BdsSegmentedControl
+} from "./chunk-K5CE6HSB.js";
+import {
+  BdsSelect
+} from "./chunk-4BX6AWXX.js";
+import {
+  BdsSlider
+} from "./chunk-7FMR53BW.js";
+import {
+  BdsDrawer
+} from "./chunk-CJ5ZOO42.js";
+import {
+  BdsPopover
+} from "./chunk-ECW3HHWA.js";
+import {
+  BdsSkipLink
+} from "./chunk-BQLZ7I4G.js";
+import {
+  BdsTab
+} from "./chunk-6I3CFC26.js";
+import {
+  BdsTabPanel
+} from "./chunk-OQTRTMAB.js";
+import {
+  BdsTabs
+} from "./chunk-L3XHOMN6.js";
+import {
+  BdsToastProvider
+} from "./chunk-YLVTEY23.js";
+import {
+  BdsTooltip
+} from "./chunk-HGBNDR22.js";
+import {
+  BdsSeparator
+} from "./chunk-VMMVWLXL.js";
+import {
+  BdsSkeleton
+} from "./chunk-2QA62WCQ.js";
+import {
+  BdsTypography
+} from "./chunk-SOQQ7RVJ.js";
+import {
+  BdsAccordion
+} from "./chunk-6T3RKUKG.js";
+import {
+  BdsAccordionItem
+} from "./chunk-UFFCKVZE.js";
+import {
+  BdsButton
+} from "./chunk-O4UFI2RX.js";
+import {
+  BdsCollapsible
+} from "./chunk-5IPHEONG.js";
+import {
+  BdsDialog
+} from "./chunk-IQGLIQSO.js";
+import {
+  BdsIconWrapper
+} from "./chunk-5TFWOPLH.js";
+import {
+  BdsLink
+} from "./chunk-CR5PGUHV.js";
+import {
+  BdsLoading
+} from "./chunk-5R6IFELV.js";
+import {
+  BdsNotificationBanner
+} from "./chunk-VM3YHGQ2.js";
+import {
+  BdsProgress
+} from "./chunk-ITHLKR7Q.js";
+import {
+  BdsProgressCircle
+} from "./chunk-QDST57JC.js";
+import {
+  BdsRating
+} from "./chunk-LY62SAVN.js";
+import {
+  BdsSectionHeader
+} from "./chunk-Y4MAXTMA.js";
+import "./chunk-QPOKHLMQ.js";
+import "./chunk-CAPI25CU.js";
+import {
+  BdsAlert
+} from "./chunk-LSC4N56Q.js";
+import {
+  BdsAvatar
+} from "./chunk-57TRNCWQ.js";
+import {
+  BdsBadge
+} from "./chunk-OHUTLSIQ.js";
+import {
+  BdsBreadcrumb
+} from "./chunk-Q4T5BJT6.js";
+import {
+  BdsCard
+} from "./chunk-XIENXR7H.js";
+import {
+  BdsDescriptionList
+} from "./chunk-AGKJTMJI.js";
+import "./chunk-LGEZYFUU.js";
+export {
+  BdsAccordion,
+  BdsAccordionItem,
+  BdsAlert,
+  BdsAvatar,
+  BdsBadge,
+  BdsBreadcrumb,
+  BdsButton,
+  BdsCard,
+  BdsCheckbox,
+  BdsCollapsible,
+  BdsCombobox,
+  BdsDescriptionList,
+  BdsDialog,
+  BdsDrawer,
+  BdsFileInput,
+  BdsIconWrapper,
+  BdsLink,
+  BdsLoading,
+  BdsNotificationBanner,
+  BdsNumberInput,
+  BdsPopover,
+  BdsProgress,
+  BdsProgressCircle,
+  BdsRadio,
+  BdsRating,
+  BdsSectionHeader,
+  BdsSegmentedControl,
+  BdsSelect,
+  BdsSeparator,
+  BdsSkeleton,
+  BdsSkipLink,
+  BdsSlider,
+  BdsSwitch,
+  BdsTab,
+  BdsTabPanel,
+  BdsTabs,
+  BdsTextarea,
+  BdsToastProvider,
+  BdsTooltip,
+  BdsTypography
+};

package/dist/web-components/interaction/bds-accordion-item.d.ts

@@ -0,0 +1,54 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-accordion-item>` — child element of `<bds-accordion>`.
+ *
+ * Manages a single collapsible panel. The `open` and `disabled` state is
+ * controlled by the parent `<bds-accordion>` element.
+ *
+ * Attributes:
+ *   open     — boolean; whether the panel is expanded
+ *   disabled — boolean; prevents the user from toggling this item
+ *
+ * Slots:
+ *   header   — the always-visible trigger label
+ *   (default) — the content revealed when open
+ *
+ * Events:
+ *   bds-accordion-item-toggle — fired (bubbles, composed) when the trigger
+ *                               button is clicked; the parent accordion handles
+ *                               the state change.
+ *
+ * @example
+ * <bds-accordion-item>
+ *   <span slot="header">Question</span>
+ *   <p>Answer content</p>
+ * </bds-accordion-item>
+ */
+declare class BdsAccordionItem extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    disabled: boolean;
+    private readonly _uid;
+    constructor();
+    private _handleTriggerClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-accordion-item': BdsAccordionItem;
+    }
+}
+
+export { BdsAccordionItem };

package/dist/web-components/interaction/bds-accordion-item.js

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

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

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-accordion>` — framework-agnostic Accordion custom element.
+ *
+ * Contains `<bds-accordion-item>` children. Coordinates open/closed state
+ * across items; by default only one item is open at a time.
+ *
+ * Attributes:
+ *   allow-multiple — boolean; when set, multiple items can be open simultaneously
+ *
+ * @example
+ * <bds-accordion>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 1</span>
+ *     <p>Answer 1</p>
+ *   </bds-accordion-item>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 2</span>
+ *     <p>Answer 2</p>
+ *   </bds-accordion-item>
+ * </bds-accordion>
+ */
+declare class BdsAccordion extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        allowMultiple: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    allowMultiple: boolean;
+    private _mo;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _items();
+    private _discoverItems;
+    private _handleItemToggle;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-accordion': BdsAccordion;
+    }
+}
+
+export { BdsAccordion };

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

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

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' | '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;
+    }
+}
+
+export { BdsButton, type ButtonSize, type ButtonVariant };

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

@@ -0,0 +1,7 @@
+import {
+  BdsButton
+} from "../chunk-O4UFI2RX.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-IQGLIQSO.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-CJ5ZOO42.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsDrawer
+};