@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -2,17 +2,21 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type CardVariant = 'default' | 'elevated' | 'outlined';
+type CardPadding = 'none' | 'small' | 'medium' | 'large' | 'extra-large';
 type CardTextAlign = 'start' | 'center' | 'end';
 /**
  * `<bds-card>` — framework-agnostic Card layout custom element.
  *
  * Attributes:
  *   variant    — "default" (default) | "elevated" | "outlined"
- *   --card_padding — CSS custom property to override padding (default: var(--bds-space_m))
+ *   padding    — "none" | "small" | "medium" (default) | "large" | "extra-large"
  *   text-align — "start" (default) | "center" | "end"
  *   clickable  — boolean; renders as a <button> with hover/active effects
  *   aria-label — accessible label (useful when clickable)
  *
+ * CSS Custom Properties:
+ *   --card_padding — overrides the padding value applied by the active padding variant
+ *
  * Slots:
  *   (default) — card content
  *
@@ -20,7 +24,7 @@ type CardTextAlign = 'start' | 'center' | 'end';
  *   bds-click — fired (bubbles, composed) when the card button is clicked
  *
  * @example
- * <bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
+ * <bds-card variant="elevated" padding="large">
  *   <p>Card content</p>
  * </bds-card>
  *
@@ -35,6 +39,10 @@ declare class BdsCard extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        padding: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         textAlign: {
             type: StringConstructor;
             attribute: string;
@@ -50,6 +58,7 @@ declare class BdsCard extends LitElement {
         };
     };
     variant: CardVariant;
+    padding: CardPadding;
     textAlign: CardTextAlign;
     clickable: boolean;
     ariaLabel: string;
@@ -63,4 +72,4 @@ declare global {
     }
 }
 
-export { BdsCard, type CardTextAlign, type CardVariant };
+export { BdsCard, type CardPadding, type CardTextAlign, type CardVariant };

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

@@ -1,6 +1,6 @@
 import {
   BdsCard
-} from "../chunk-PC3IOQAH.js";
+} from "../chunk-DV5T43ZC.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCard

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

@@ -0,0 +1,98 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-carousel>` — scroll-snap based carousel/slider.
+ *
+ * Attributes:
+ *   current-index — active slide index (0-based, default: 0); setting it scrolls the track
+ *   indicators    — show dot indicators
+ *   loop          — wrap from last slide back to first and vice versa
+ *   label         — accessible name for the slide region (default: "Carousel")
+ *   prev-label    — accessible name for the previous button (default: "Previous slide")
+ *   next-label    — accessible name for the next button (default: "Next slide")
+ *
+ * Slots:
+ *   (default) — slide content elements (each direct child with no `slot` attribute = one slide)
+ *   prev      — custom previous button (renders a default button if omitted); clicks anywhere
+ *               inside this slot navigate to the previous slide
+ *   next      — custom next button (renders a default button if omitted); clicks anywhere
+ *               inside this slot navigate to the next slide
+ *
+ * Methods:
+ *   goTo(index) — navigate to a specific slide (clamped, or wrapped when `loop` is set)
+ *   next()      — navigate to the next slide
+ *   prev()      — navigate to the previous slide
+ *
+ * Events:
+ *   bds-slide-change — fired when active slide changes (navigation or manual scroll/swipe);
+ *                      `detail: { index: number }`
+ *
+ * @example
+ * <bds-carousel indicators loop>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </bds-carousel>
+ */
+declare class BdsCarousel extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        currentIndex: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        indicators: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        prevLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        nextLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    currentIndex: number;
+    indicators: boolean;
+    loop: boolean;
+    label: string;
+    prevLabel: string;
+    nextLabel: string;
+    private _slideCount;
+    private _io;
+    private _skipNextScroll;
+    constructor();
+    private get _track();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /** Navigate to a specific slide (clamped, or wrapped when `loop` is set). */
+    goTo(index: number): void;
+    /** Navigate to the next slide. */
+    next(): void;
+    /** Navigate to the previous slide. */
+    prev(): void;
+    private _updateSlideCount;
+    private _scrollToIndex;
+    private _setIndex;
+    private _onSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-carousel': BdsCarousel;
+    }
+}
+
+export { BdsCarousel };

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

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

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

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

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

@@ -19,15 +19,6 @@ import { LitElement } from 'lit';
  */
 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 {

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-X46KL5BK.js";
+} from "../chunk-LDIPCTRN.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

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

@@ -0,0 +1,47 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-pagination>` — pagination navigation control.
+ *
+ * Attributes:
+ *   current-page  — active page number (1-based, default: 1)
+ *   total-pages   — total number of pages (default: 1)
+ *
+ * Events:
+ *   bds-page-change — fired when the user navigates; `detail: { page: number }`
+ *
+ * @example
+ * <bds-pagination current-page="3" total-pages="10"></bds-pagination>
+ * <script>
+ *   document.querySelector('bds-pagination')
+ *     .addEventListener('bds-page-change', e => console.log(e.detail.page));
+ * </script>
+ */
+declare class BdsPagination extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        currentPage: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        totalPages: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    currentPage: number;
+    totalPages: number;
+    constructor();
+    private _navigate;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-pagination': BdsPagination;
+    }
+}
+
+export { BdsPagination };

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

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

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

@@ -7,7 +7,9 @@ import { LitElement } from 'lit';
  * Attributes:
  *   value      — current progress value (required)
  *   max        — maximum value (default: 100)
- *   label      — accessible label for the progress bar
+ *   label      — accessible label for the progress bar (required — the host
+ *                renders role="progressbar" and is nameless to assistive
+ *                technology without it)
  *   show-value — boolean; when set, displays the percentage in the centre
  *   size       — "small" | "medium" (default) | "large"
  *

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

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

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

@@ -7,7 +7,9 @@ import { LitElement } from 'lit';
  * Attributes:
  *   value      — current progress value (required)
  *   max        — maximum value (default: 100)
- *   label      — accessible label for the progress bar
+ *   label      — accessible label for the progress bar (required — without it the
+ *                progressbar has no accessible name; aria-label is omitted, not
+ *                rendered empty, when unset)
  *   show-label — boolean; when set, displays the label and percentage above the bar
  *   size       — "small" | "medium" (default) | "large"
  *

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

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

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

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

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

@@ -5,18 +5,25 @@ import { LitElement } from 'lit';
  * `<bds-section-header>` — framework-agnostic Section Header custom element.
  *
  * Attributes:
- *   title     — heading text (required)
+ *   heading   — heading text (required)
+ *   title     — deprecated alias for `heading`. Collides with the global HTML
+ *               `title` attribute, which triggers a native browser tooltip on
+ *               hover — use `heading` instead. Kept working for backwards
+ *               compatibility; will be removed in a later major.
  *   subtitle  — optional subheading text
  *   alignment — "start" (default) | "center" | "end"
- *   size      — "small" | "medium" (default) | "large"
+ *   size      — "xs" | "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>
+ * <bds-section-header heading="Our Products" subtitle="Browse the full range" size="large"></bds-section-header>
  */
 declare class BdsSectionHeader extends LitElement {
     static styles: lit.CSSResult;
     static properties: {
+        heading: {
+            type: StringConstructor;
+        };
         title: {
             type: StringConstructor;
         };
@@ -36,12 +43,19 @@ declare class BdsSectionHeader extends LitElement {
             attribute: string;
         };
     };
+    heading: string;
+    /**
+     * @deprecated Use `heading` instead. Sharing the name with the global HTML
+     * `title` attribute makes the browser show a native tooltip on hover.
+     * Still read as a fallback for the heading text when `heading` is unset.
+     */
     title: string;
     subtitle: string;
     alignment: 'start' | 'center' | 'end';
-    size: 'small' | 'medium' | 'large';
+    size: 'xs' | 'small' | 'medium' | 'large';
     titleAs: string;
     constructor();
+    private get _headingText();
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-table>` — scrollable table wrapper with design-system styles.
+ *
+ * Slotted content should be a standard `<table>` with `<thead>` / `<tbody>`.
+ * The `<table>` itself is styled via `::slotted(table)` inside the shadow root; its
+ * `thead`/`th`/`td` descendants are styled from a document-level stylesheet (adopted once by
+ * this module) scoped to `bds-table > table …`, since `::slotted()` cannot reach descendants
+ * of the slotted node.
+ *
+ * Attributes:
+ *   sticky-header — freezes `<thead>` at the top when the table overflows vertically
+ *   aria-label    — accessible name for the scrollable region (also enables `role="region"`)
+ *
+ * Slots:
+ *   (default) — a `<table>` element
+ *
+ * @example
+ * <bds-table sticky-header aria-label="Team members">
+ *   <table>
+ *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
+ *     <tbody><tr><td>Alpha</td><td>1</td></tr></tbody>
+ *   </table>
+ * </bds-table>
+ */
+declare class BdsTable extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        stickyHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    stickyHeader: boolean;
+    ariaLabel: string | null;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-table': BdsTable;
+    }
+}
+
+export { BdsTable };

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

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

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

@@ -27,6 +27,7 @@ declare class BdsTypography extends LitElement {
         };
         component: {
             type: StringConstructor;
+            reflect: boolean;
         };
     };
     variant: TypographyVariant;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.7.1",
+  "version": "2.11.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -63,10 +63,26 @@
       "types": "./dist/web-components/ui/bds-breadcrumb.d.ts",
       "import": "./dist/web-components/ui/bds-breadcrumb.js"
     },
+    "./web-components/ui/bds-button-container": {
+      "types": "./dist/web-components/ui/bds-button-container.d.ts",
+      "import": "./dist/web-components/ui/bds-button-container.js"
+    },
+    "./web-components/ui/bds-button-group": {
+      "types": "./dist/web-components/ui/bds-button-group.d.ts",
+      "import": "./dist/web-components/ui/bds-button-group.js"
+    },
+    "./web-components/ui/bds-calendar": {
+      "types": "./dist/web-components/ui/bds-calendar.d.ts",
+      "import": "./dist/web-components/ui/bds-calendar.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-carousel": {
+      "types": "./dist/web-components/ui/bds-carousel.d.ts",
+      "import": "./dist/web-components/ui/bds-carousel.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"
@@ -87,6 +103,10 @@
       "types": "./dist/web-components/ui/bds-notification-banner.d.ts",
       "import": "./dist/web-components/ui/bds-notification-banner.js"
     },
+    "./web-components/ui/bds-pagination": {
+      "types": "./dist/web-components/ui/bds-pagination.d.ts",
+      "import": "./dist/web-components/ui/bds-pagination.js"
+    },
     "./web-components/ui/bds-progress": {
       "types": "./dist/web-components/ui/bds-progress.d.ts",
       "import": "./dist/web-components/ui/bds-progress.js"
@@ -111,6 +131,10 @@
       "types": "./dist/web-components/ui/bds-skeleton.d.ts",
       "import": "./dist/web-components/ui/bds-skeleton.js"
     },
+    "./web-components/ui/bds-table": {
+      "types": "./dist/web-components/ui/bds-table.d.ts",
+      "import": "./dist/web-components/ui/bds-table.js"
+    },
     "./web-components/ui/bds-typography": {
       "types": "./dist/web-components/ui/bds-typography.d.ts",
       "import": "./dist/web-components/ui/bds-typography.js"
@@ -139,6 +163,14 @@
       "types": "./dist/web-components/interaction/bds-drawer.d.ts",
       "import": "./dist/web-components/interaction/bds-drawer.js"
     },
+    "./web-components/interaction/bds-dropdown-menu": {
+      "types": "./dist/web-components/interaction/bds-dropdown-menu.d.ts",
+      "import": "./dist/web-components/interaction/bds-dropdown-menu.js"
+    },
+    "./web-components/interaction/bds-dropdown-menu-item": {
+      "types": "./dist/web-components/interaction/bds-dropdown-menu-item.d.ts",
+      "import": "./dist/web-components/interaction/bds-dropdown-menu-item.js"
+    },
     "./web-components/interaction/bds-popover": {
       "types": "./dist/web-components/interaction/bds-popover.d.ts",
       "import": "./dist/web-components/interaction/bds-popover.js"
@@ -171,14 +203,26 @@
       "types": "./dist/web-components/interaction/form/bds-checkbox.d.ts",
       "import": "./dist/web-components/interaction/form/bds-checkbox.js"
     },
+    "./web-components/interaction/form/bds-checkbox-group": {
+      "types": "./dist/web-components/interaction/form/bds-checkbox-group.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-checkbox-group.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-field-group": {
+      "types": "./dist/web-components/interaction/form/bds-field-group.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-field-group.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-form-input": {
+      "types": "./dist/web-components/interaction/form/bds-form-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-form-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"
@@ -187,6 +231,10 @@
       "types": "./dist/web-components/interaction/form/bds-radio.d.ts",
       "import": "./dist/web-components/interaction/form/bds-radio.js"
     },
+    "./web-components/interaction/form/bds-radio-group": {
+      "types": "./dist/web-components/interaction/form/bds-radio-group.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-radio-group.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"
@@ -207,6 +255,14 @@
       "types": "./dist/web-components/interaction/form/bds-textarea.d.ts",
       "import": "./dist/web-components/interaction/form/bds-textarea.js"
     },
+    "./web-components/layout/bds-grid": {
+      "types": "./dist/web-components/layout/bds-grid.d.ts",
+      "import": "./dist/web-components/layout/bds-grid.js"
+    },
+    "./web-components/layout/bds-grid-item": {
+      "types": "./dist/web-components/layout/bds-grid-item.d.ts",
+      "import": "./dist/web-components/layout/bds-grid-item.js"
+    },
     "./css": "./dist/index.css",
     "./css/bdc": "./src/css/bdc.css",
     "./css/accordion": "./src/components/ui/Accordion/Accordion.module.css",
@@ -282,7 +338,8 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^2.0.0",
+    "@boostdev/design-system-foundation": "^2.1.0",
+    "@boostdev/design-system-react-native": "0.2.0",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
@@ -331,7 +388,7 @@
   },
   "sideEffects": [
     "src/css/**/*.css",
-    "src/web-components/globals.ts",
+    "src/web-components/**/*.ts",
     "dist/web-components/**/*.js"
   ],
   "dependencies": {