@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -14,12 +14,20 @@ import { LitElement } from 'lit';
  *   checked  — boolean; whether the switch is on
  *   required — boolean
  *   disabled — boolean
+ *   error    — error message; when set the track shows the error colour and
+ *              the input reports `aria-invalid="true"`
+ *   size     — "small" | "medium" (default) | "large"
  *
  * Slots:
  *   (default) — label text
  *
+ * Events:
+ *   bds-change — composed CustomEvent fired when the switch is toggled
+ *                (crosses the shadow boundary); `detail: { checked: boolean }`
+ *
  * @example
  * <bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+ * <bds-switch name="darkMode" size="small" error="Required">Dark mode</bds-switch>
  */
 declare class BdsSwitch extends LitElement {
     static formAssociated: boolean;
@@ -44,15 +52,27 @@ declare class BdsSwitch extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     name: string;
     value: string;
     checked: boolean;
     required: boolean;
     disabled: boolean;
+    error: string | undefined;
+    size: 'small' | 'medium' | 'large';
     private _internals;
     private readonly _uid;
+    private _initialChecked;
     constructor();
+    connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;
     private _handleChange;

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

@@ -1,6 +1,6 @@
 import {
   BdsSwitch
-} from "../../chunk-Y3POAKGS.js";
+} from "../../chunk-3AY2YKCM.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSwitch

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

@@ -12,15 +12,18 @@ import { LitElement } from 'lit';
  *   value       — text value
  *   placeholder — placeholder text
  *   rows        — number of visible rows (default: 4)
+ *   label       — visible label text
+ *   hint        — helper text shown below the textarea
+ *   error       — error message; when set the textarea enters error state
  *   required    — boolean
  *   disabled    — boolean
  *
  * Events:
- *   input  — native input event
- *   change — native change event
+ *   bds-input  — fired on every keystroke; `detail: { value: string }`
+ *   bds-change — fired when the value is committed; `detail: { value: string }`
  *
  * @example
- * <bds-textarea name="message" placeholder="Enter message…" rows="6"></bds-textarea>
+ * <bds-textarea name="message" label="Message" placeholder="Enter message…" rows="6"></bds-textarea>
  */
 declare class BdsTextarea extends LitElement {
     static formAssociated: boolean;
@@ -39,6 +42,16 @@ declare class BdsTextarea extends LitElement {
         rows: {
             type: NumberConstructor;
         };
+        label: {
+            type: StringConstructor;
+        };
+        hint: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         required: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -52,13 +65,20 @@ declare class BdsTextarea extends LitElement {
     value: string;
     placeholder: string;
     rows: number;
+    label: string;
+    hint: string | undefined;
+    error: string | undefined;
     required: boolean;
     disabled: boolean;
     private _internals;
+    private readonly _uid;
+    private _initialValue;
     constructor();
+    connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;
     private _handleInput;
+    private _handleChange;
     render(): lit.TemplateResult<1>;
 }
 declare global {

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

@@ -1,6 +1,6 @@
 import {
   BdsTextarea
-} from "../../chunk-QBB6ZX4R.js";
+} from "../../chunk-2OLVQUBU.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsTextarea

package/dist/web-components/layout/bds-grid-item.d.ts

@@ -0,0 +1,63 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
+/**
+ * `<bds-grid-item>` — grid cell for `<bds-grid>`.
+ *
+ * Attributes:
+ *   column-span   — 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number
+ *                   `'auto'` derives the span from the intrinsic aspect ratio of the first
+ *                   `<img>` or `<video>` child (see Grid.mdx for thresholds).
+ *                   If the parent `<bds-grid>` sets `auto-span-media` and this element has
+ *                   no `column-span`, the item behaves as if `column-span="auto"`.
+ *   row-span      — number
+ *   start-column  — number (escape hatch; overrides column-span)
+ *   end-column    — number (escape hatch; overrides column-span)
+ *
+ * @example
+ * <bds-grid-item column-span="three-quarters">Content</bds-grid-item>
+ */
+declare class BdsGridItem extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        columnSpan: {
+            attribute: string;
+        };
+        rowSpan: {
+            attribute: string;
+            type: NumberConstructor;
+        };
+        startColumn: {
+            attribute: string;
+            type: NumberConstructor;
+        };
+        endColumn: {
+            attribute: string;
+            type: NumberConstructor;
+        };
+    };
+    columnSpan: GridItemSpanValue | undefined;
+    rowSpan: number | undefined;
+    startColumn: number | undefined;
+    endColumn: number | undefined;
+    private _autoSpan;
+    private _mediaCleanup?;
+    private _slotObserver?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _effectiveColumnSpan;
+    private _teardownMedia;
+    private _resolveAutoSpan;
+    private _setAutoSpan;
+    updated(): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-grid-item': BdsGridItem;
+    }
+}
+
+export { BdsGridItem, type GridItemSpanValue };

package/dist/web-components/layout/bds-grid-item.js

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

package/dist/web-components/layout/bds-grid.d.ts

@@ -0,0 +1,108 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
+/**
+ * `<bds-grid>` — framework-agnostic Grid layout custom element.
+ *
+ * Attributes:
+ *   variant     — "main" (default) | "page" | "funnel" | "custom"
+ *   columns     — number; column count when variant="custom"
+ *   is-centered — boolean; centers the grid and caps width via --bds-container_max-width
+ *   is-masonry  — boolean; enables masonry layout per CSS Grid Level 3.
+ *                 Uses native `display: grid-lanes` / `grid-template-rows: masonry`
+ *                 when supported, otherwise runs a JS polyfill.
+ *   auto-span-media — boolean; child `<bds-grid-item>`s without a `column-span`
+ *                     attribute resolve their span from the intrinsic aspect
+ *                     ratio of their first `<img>`/`<video>` child.
+ *   masonry-preferred-column-span — named span or number; masonry only. Child
+ *                     items without a `column-span` attribute try to span this
+ *                     value (e.g. `"half"`, `"one-third"`). Named values adapt
+ *                     across breakpoints via the foundation's responsive column
+ *                     tokens. An item at row-end is demoted to the remaining
+ *                     column count. Numeric values are literal and don't adapt.
+ *   masonry-row-unit-px — number; masonry only. Manual override for the
+ *                     row-track unit (px) the polyfill uses for
+ *                     `grid-auto-rows` and as the ceil() granularity of each
+ *                     item's row span. Omit to let the polyfill auto-pick the
+ *                     smallest unit that keeps the implicit row count under
+ *                     any browser cap.
+ *
+ * Slots:
+ *   (default) — grid content; typically `<bds-grid-item>` children
+ */
+declare class BdsGrid extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        columns: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        isCentered: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        isMasonry: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        autoSpanMedia: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        masonryPreferredColumnSpan: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        masonryRowUnitPx: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    variant: GridVariant;
+    columns: number | undefined;
+    isCentered: boolean;
+    isMasonry: boolean;
+    autoSpanMedia: boolean;
+    masonryPreferredColumnSpan: string | undefined;
+    masonryRowUnitPx: number | undefined;
+    private _ro?;
+    private _mo?;
+    private _frame;
+    private _engaged;
+    private _scrolling;
+    private _pendingResize;
+    private _scrollTimer?;
+    private _onResize;
+    private _onMutate;
+    private _onScroll;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private _gridEl;
+    private _items;
+    private _observeDescendants;
+    private _setupMasonry;
+    private _apply;
+    private _scheduleMasonry;
+    private _resolvePreferredColumnSpan;
+    private _teardownMasonry;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-grid': BdsGrid;
+    }
+}
+
+export { BdsGrid, type GridVariant };

package/dist/web-components/layout/bds-grid.js

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

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

@@ -7,7 +7,11 @@ type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  *
  * Attributes:
  *   variant     — "info" (default) | "success" | "warning" | "error"
- *   title       — optional heading above the body text
+ *   heading     — optional heading above the body text
+ *   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.
  *   dismissible — boolean; shows a dismiss button when present
  *
  * Slots:
@@ -22,7 +26,7 @@ type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  *   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="success" heading="Saved!">Your changes have been saved.</bds-alert>
  *
  * <bds-alert variant="error" dismissible>
  *   <svg slot="icon">…</svg>
@@ -36,6 +40,9 @@ declare class BdsAlert extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        heading: {
+            type: StringConstructor;
+        };
         title: {
             type: StringConstructor;
         };
@@ -48,10 +55,17 @@ declare class BdsAlert extends LitElement {
         };
     };
     variant: AlertVariant;
+    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;
     dismissible: boolean;
     private _iconFilled;
     constructor();
+    private get _headingText();
     private _onIconSlotChange;
     private get _isUrgent();
     private _handleDismiss;

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

@@ -1,6 +1,6 @@
 import {
   BdsAlert
-} from "../chunk-NCPQ7AF3.js";
+} from "../chunk-6G22I2CK.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAlert

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

@@ -8,7 +8,8 @@ import { LitElement } from 'lit';
  *
  * Attributes:
  *   src  — image URL
- *   alt  — image alt text (defaults to `name` or "User avatar")
+ *   alt  — image alt text (defaults to `name` or "User avatar"). Set alt=""
+ *          explicitly to mark the image as decorative (silences the accessible name).
  *   name — full name; used to compute initials and as fallback aria-label
  *   size — "small" | "medium" (default) | "large"
  *

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

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

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

@@ -1,6 +1,6 @@
 import {
   BdsBadge
-} from "../chunk-QWPACK5L.js";
+} from "../chunk-BPYKZVDK.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsBadge

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

@@ -10,7 +10,9 @@ interface BreadcrumbItem {
  *
  * Attributes:
  *   items — JSON string array of `{ label: string, href?: string }` objects.
- *           The last item is treated as the current page (no link).
+ *           The last item is treated as the current page (no link). Any other
+ *           item without an `href` renders as plain text instead of a link.
+ *           Malformed JSON (or a removed attribute) falls back to `[]`.
  *
  * @example
  * <bds-breadcrumb items='[{"label":"Home","href":"/"},{"label":"Products","href":"/products"},{"label":"Item"}]'></bds-breadcrumb>

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

@@ -1,6 +1,6 @@
 import {
   BdsBreadcrumb
-} from "../chunk-Q4T5BJT6.js";
+} from "../chunk-62NK3ZSC.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsBreadcrumb

package/dist/web-components/ui/bds-button-container.d.ts

@@ -0,0 +1,52 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type ButtonContainerVariant = 'flow' | 'card' | 'modal' | 'content';
+/**
+ * `<bds-button-container>` — responsive layout wrapper for a row of action
+ * buttons (Cancel / Confirm, Back / Next, …). Web-component port of the React
+ * `ButtonContainer`.
+ *
+ * Buttons stack vertically (primary on top via `column-reverse`) on narrow
+ * containers and lay out in a row once the container is at least 30rem wide.
+ * The `variant` controls alignment:
+ *   - `flow`    — multi-step navigation (Back / Next); single child pushed to the end
+ *   - `card`    — single-form submit; centered / full-width
+ *   - `modal`   — dialog actions; aligned to the end
+ *   - `content` — inline content actions; aligned to the start
+ *
+ * Attributes:
+ *   variant     — `"flow"` | `"card"` | `"modal"` | `"content"`
+ *   aria-label  — accessible label for the group
+ *
+ * Slots:
+ *   (default) — `<bds-button>` elements
+ *
+ * @example
+ * <bds-button-container variant="modal" aria-label="Dialog actions">
+ *   <bds-button variant="outline">Cancel</bds-button>
+ *   <bds-button>Confirm</bds-button>
+ * </bds-button-container>
+ */
+declare class BdsButtonContainer extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        'aria-label': {
+            type: StringConstructor;
+        };
+    };
+    variant: ButtonContainerVariant | undefined;
+    ['aria-label']: string | undefined;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-button-container': BdsButtonContainer;
+    }
+}
+
+export { BdsButtonContainer, type ButtonContainerVariant };

package/dist/web-components/ui/bds-button-container.js

@@ -0,0 +1,7 @@
+import {
+  BdsButtonContainer
+} from "../chunk-4A2YYTYN.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsButtonContainer
+};

package/dist/web-components/ui/bds-button-group.d.ts

@@ -0,0 +1,21 @@
+import { BdsButtonContainer, ButtonContainerVariant } from './bds-button-container.js';
+import 'lit';
+
+/**
+ * `<bds-button-group>` — **deprecated** alias of `<bds-button-container>`.
+ *
+ * @deprecated Use `<bds-button-container>` (class `BdsButtonContainer`) instead.
+ * `bds-button-group` is a backwards-compatible alias and will be removed in a
+ * future major version. It behaves identically to `<bds-button-container>`.
+ */
+declare class BdsButtonGroup extends BdsButtonContainer {
+}
+/** @deprecated Use `ButtonContainerVariant` instead. */
+type ButtonGroupVariant = ButtonContainerVariant;
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-button-group': BdsButtonGroup;
+    }
+}
+
+export { BdsButtonGroup, type ButtonGroupVariant };

package/dist/web-components/ui/bds-button-group.js

@@ -0,0 +1,8 @@
+import {
+  BdsButtonGroup
+} from "../chunk-DIZDCL7Z.js";
+import "../chunk-4A2YYTYN.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsButtonGroup
+};

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

@@ -0,0 +1,121 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-calendar>` — form-associated date picker calendar.
+ *
+ * Month grid for selecting a date, keyboard-navigable via the WAI-ARIA grid
+ * pattern (roving tabindex). Participates in forms via the Form-Associated
+ * Custom Elements API. Shares all date logic with the React <Calendar> through
+ * calendar-core.
+ *
+ * Attributes: name, value (YYYY-MM-DD), min, max, disabled, months,
+ *   page-by ("months"|"single"), first-day-of-week (0–6, default 1),
+ *   locale, previous-label, next-label.
+ * Properties (JS only): isDateDisallowed, formatWeekday, formatMonth, formatDay.
+ * Events: bds-date-select — detail: { date: string } (ISO 8601).
+ */
+declare class BdsCalendar extends LitElement {
+    static formAssociated: boolean;
+    static styles: lit.CSSResult;
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        months: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        pageBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        firstDayOfWeek: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        locale: {
+            type: StringConstructor;
+        };
+        previousLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        nextLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        isDateDisallowed: {
+            attribute: boolean;
+        };
+        formatWeekday: {
+            attribute: boolean;
+        };
+        formatMonth: {
+            attribute: boolean;
+        };
+        formatDay: {
+            attribute: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    min: string;
+    max: string;
+    disabled: boolean;
+    months: number;
+    pageBy: 'months' | 'single';
+    firstDayOfWeek: number;
+    locale: string;
+    previousLabel: string;
+    nextLabel: string;
+    isDateDisallowed?: (date: Date) => boolean;
+    formatWeekday?: (date: Date) => string;
+    formatMonth?: (date: Date) => string;
+    formatDay?: (date: Date) => string;
+    private _internals;
+    private _viewYear;
+    private _viewMonth;
+    private _focusedIso;
+    constructor();
+    willUpdate(changed: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private get _localeOrUndefined();
+    private get _count();
+    private _monthVisible;
+    private _setView;
+    private _page;
+    private _isDisabledDate;
+    private _selectDate;
+    private _handleKeydown;
+    private _weekdayNames;
+    private _monthLabel;
+    private _dayLabel;
+    private _tabbableIso;
+    private _renderMonth;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-calendar': BdsCalendar;
+    }
+}
+
+export { BdsCalendar };

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

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