@boostdev/design-system-components 1.1.1 → 1.2.0

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

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

@@ -0,0 +1,32 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-separator>` — framework-agnostic Separator custom element.
+ *
+ * Attributes:
+ *   orientation — "horizontal" (default) | "vertical"
+ *
+ * @example
+ * <bds-separator></bds-separator>
+ * <bds-separator orientation="vertical"></bds-separator>
+ */
+declare class BdsSeparator extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    orientation: 'horizontal' | 'vertical';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-separator': BdsSeparator;
+    }
+}
+
+export { BdsSeparator };

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

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

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

@@ -0,0 +1,22 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-skeleton>` — framework-agnostic Skeleton loading placeholder custom element.
+ *
+ * No attributes. The host inherits width/height from its container or inline styles.
+ *
+ * @example
+ * <bds-skeleton style="width: 200px; height: 1rem;"></bds-skeleton>
+ */
+declare class BdsSkeleton extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-skeleton': BdsSkeleton;
+    }
+}
+
+export { BdsSkeleton };

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

@@ -0,0 +1,7 @@
+import {
+  BdsSkeleton
+} from "../chunk-2QA62WCQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsSkeleton
+};

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

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+/**
+ * `<bds-typography>` — framework-agnostic Typography custom element.
+ *
+ * Renders slotted content inside the appropriate semantic HTML element.
+ *
+ * Attributes:
+ *   variant   — "h1" | "h2" | "h3" | "body" (default) | "body_s"
+ *   component — override the rendered tag name (e.g. "span", "label")
+ *
+ * Slots:
+ *   (default) — text content
+ *
+ * @example
+ * <bds-typography variant="h1">Page title</bds-typography>
+ * <bds-typography variant="body_s" component="span">Small text</bds-typography>
+ */
+declare class BdsTypography extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        component: {
+            type: StringConstructor;
+        };
+    };
+    variant: TypographyVariant;
+    component: string;
+    constructor();
+    private get _tag();
+    render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-typography': BdsTypography;
+    }
+}
+
+export { BdsTypography, type TypographyVariant };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -37,8 +37,171 @@
       "require": "./dist/client.cjs"
     },
     "./web-components": {
-      "types": "./dist/web-components.d.ts",
-      "import": "./dist/web-components.js"
+      "types": "./dist/web-components/index.d.ts",
+      "import": "./dist/web-components/index.js"
+    },
+    "./web-components/globals": {
+      "import": "./dist/web-components/globals.js"
+    },
+    "./web-components/ui/bds-alert": {
+      "types": "./dist/web-components/ui/bds-alert.d.ts",
+      "import": "./dist/web-components/ui/bds-alert.js"
+    },
+    "./web-components/ui/bds-avatar": {
+      "types": "./dist/web-components/ui/bds-avatar.d.ts",
+      "import": "./dist/web-components/ui/bds-avatar.js"
+    },
+    "./web-components/ui/bds-badge": {
+      "types": "./dist/web-components/ui/bds-badge.d.ts",
+      "import": "./dist/web-components/ui/bds-badge.js"
+    },
+    "./web-components/ui/bds-breadcrumb": {
+      "types": "./dist/web-components/ui/bds-breadcrumb.d.ts",
+      "import": "./dist/web-components/ui/bds-breadcrumb.js"
+    },
+    "./web-components/ui/bds-card": {
+      "types": "./dist/web-components/ui/bds-card.d.ts",
+      "import": "./dist/web-components/ui/bds-card.js"
+    },
+    "./web-components/ui/bds-description-list": {
+      "types": "./dist/web-components/ui/bds-description-list.d.ts",
+      "import": "./dist/web-components/ui/bds-description-list.js"
+    },
+    "./web-components/ui/bds-icon-wrapper": {
+      "types": "./dist/web-components/ui/bds-icon-wrapper.d.ts",
+      "import": "./dist/web-components/ui/bds-icon-wrapper.js"
+    },
+    "./web-components/ui/bds-link": {
+      "types": "./dist/web-components/ui/bds-link.d.ts",
+      "import": "./dist/web-components/ui/bds-link.js"
+    },
+    "./web-components/ui/bds-loading": {
+      "types": "./dist/web-components/ui/bds-loading.d.ts",
+      "import": "./dist/web-components/ui/bds-loading.js"
+    },
+    "./web-components/ui/bds-notification-banner": {
+      "types": "./dist/web-components/ui/bds-notification-banner.d.ts",
+      "import": "./dist/web-components/ui/bds-notification-banner.js"
+    },
+    "./web-components/ui/bds-progress": {
+      "types": "./dist/web-components/ui/bds-progress.d.ts",
+      "import": "./dist/web-components/ui/bds-progress.js"
+    },
+    "./web-components/ui/bds-progress-circle": {
+      "types": "./dist/web-components/ui/bds-progress-circle.d.ts",
+      "import": "./dist/web-components/ui/bds-progress-circle.js"
+    },
+    "./web-components/ui/bds-rating": {
+      "types": "./dist/web-components/ui/bds-rating.d.ts",
+      "import": "./dist/web-components/ui/bds-rating.js"
+    },
+    "./web-components/ui/bds-section-header": {
+      "types": "./dist/web-components/ui/bds-section-header.d.ts",
+      "import": "./dist/web-components/ui/bds-section-header.js"
+    },
+    "./web-components/ui/bds-separator": {
+      "types": "./dist/web-components/ui/bds-separator.d.ts",
+      "import": "./dist/web-components/ui/bds-separator.js"
+    },
+    "./web-components/ui/bds-skeleton": {
+      "types": "./dist/web-components/ui/bds-skeleton.d.ts",
+      "import": "./dist/web-components/ui/bds-skeleton.js"
+    },
+    "./web-components/ui/bds-typography": {
+      "types": "./dist/web-components/ui/bds-typography.d.ts",
+      "import": "./dist/web-components/ui/bds-typography.js"
+    },
+    "./web-components/interaction/bds-accordion": {
+      "types": "./dist/web-components/interaction/bds-accordion.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion.js"
+    },
+    "./web-components/interaction/bds-accordion-item": {
+      "types": "./dist/web-components/interaction/bds-accordion-item.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion-item.js"
+    },
+    "./web-components/interaction/bds-button": {
+      "types": "./dist/web-components/interaction/bds-button.d.ts",
+      "import": "./dist/web-components/interaction/bds-button.js"
+    },
+    "./web-components/interaction/bds-collapsible": {
+      "types": "./dist/web-components/interaction/bds-collapsible.d.ts",
+      "import": "./dist/web-components/interaction/bds-collapsible.js"
+    },
+    "./web-components/interaction/bds-dialog": {
+      "types": "./dist/web-components/interaction/bds-dialog.d.ts",
+      "import": "./dist/web-components/interaction/bds-dialog.js"
+    },
+    "./web-components/interaction/bds-drawer": {
+      "types": "./dist/web-components/interaction/bds-drawer.d.ts",
+      "import": "./dist/web-components/interaction/bds-drawer.js"
+    },
+    "./web-components/interaction/bds-popover": {
+      "types": "./dist/web-components/interaction/bds-popover.d.ts",
+      "import": "./dist/web-components/interaction/bds-popover.js"
+    },
+    "./web-components/interaction/bds-skip-link": {
+      "types": "./dist/web-components/interaction/bds-skip-link.d.ts",
+      "import": "./dist/web-components/interaction/bds-skip-link.js"
+    },
+    "./web-components/interaction/bds-tab": {
+      "types": "./dist/web-components/interaction/bds-tab.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab.js"
+    },
+    "./web-components/interaction/bds-tab-panel": {
+      "types": "./dist/web-components/interaction/bds-tab-panel.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab-panel.js"
+    },
+    "./web-components/interaction/bds-tabs": {
+      "types": "./dist/web-components/interaction/bds-tabs.d.ts",
+      "import": "./dist/web-components/interaction/bds-tabs.js"
+    },
+    "./web-components/interaction/bds-toast-provider": {
+      "types": "./dist/web-components/interaction/bds-toast-provider.d.ts",
+      "import": "./dist/web-components/interaction/bds-toast-provider.js"
+    },
+    "./web-components/interaction/bds-tooltip": {
+      "types": "./dist/web-components/interaction/bds-tooltip.d.ts",
+      "import": "./dist/web-components/interaction/bds-tooltip.js"
+    },
+    "./web-components/interaction/form/bds-checkbox": {
+      "types": "./dist/web-components/interaction/form/bds-checkbox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-checkbox.js"
+    },
+    "./web-components/interaction/form/bds-combobox": {
+      "types": "./dist/web-components/interaction/form/bds-combobox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-combobox.js"
+    },
+    "./web-components/interaction/form/bds-file-input": {
+      "types": "./dist/web-components/interaction/form/bds-file-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-file-input.js"
+    },
+    "./web-components/interaction/form/bds-number-input": {
+      "types": "./dist/web-components/interaction/form/bds-number-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-number-input.js"
+    },
+    "./web-components/interaction/form/bds-radio": {
+      "types": "./dist/web-components/interaction/form/bds-radio.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-radio.js"
+    },
+    "./web-components/interaction/form/bds-segmented-control": {
+      "types": "./dist/web-components/interaction/form/bds-segmented-control.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-segmented-control.js"
+    },
+    "./web-components/interaction/form/bds-select": {
+      "types": "./dist/web-components/interaction/form/bds-select.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-select.js"
+    },
+    "./web-components/interaction/form/bds-slider": {
+      "types": "./dist/web-components/interaction/form/bds-slider.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-slider.js"
+    },
+    "./web-components/interaction/form/bds-switch": {
+      "types": "./dist/web-components/interaction/form/bds-switch.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-switch.js"
+    },
+    "./web-components/interaction/form/bds-textarea": {
+      "types": "./dist/web-components/interaction/form/bds-textarea.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-textarea.js"
     },
     "./css": "./dist/index.css",
     "./css/bdc": "./src/css/bdc.css",
@@ -108,7 +271,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:css": "stylelint \"src/**/*.css\"",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-manager-cache",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -168,7 +331,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "sideEffects": [
-    "src/css/**/*.css"
+    "src/css/**/*.css",
+    "src/web-components/globals.ts",
+    "dist/web-components/**/*.js"
   ],
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.9.0"