@boostdev/design-system-components 2.15.0 → 2.16.0

package/dist/web-components/index.js

@@ -1,36 +1,42 @@
+import {
+  BdsGridItem
+} from "./chunk-W6H5ID2U.js";
+import {
+  BdsRadio
+} from "./chunk-3FSGP35V.js";
 import {
   BdsRadioGroup
-} from "./chunk-JV5QT2OU.js";
+} from "./chunk-YLDQOESI.js";
 import {
   BdsSegmentedControl
 } from "./chunk-NTQ4TCUT.js";
 import {
   BdsSelect
-} from "./chunk-JH6LQKLK.js";
+} from "./chunk-XJU7KITO.js";
 import {
   BdsSlider
-} from "./chunk-FEDABOR5.js";
+} from "./chunk-LHFUXZ52.js";
 import {
   BdsSwitch
-} from "./chunk-3AY2YKCM.js";
+} from "./chunk-CKCPV347.js";
 import {
   BdsTextarea
-} from "./chunk-2OLVQUBU.js";
+} from "./chunk-EYCW7TKB.js";
 import {
   BdsGrid
 } from "./chunk-ITD2MV5K.js";
 import {
-  BdsGridItem
-} from "./chunk-W6H5ID2U.js";
+  BdsTooltip
+} from "./chunk-RBF7WPLI.js";
 import {
   BdsCheckbox
-} from "./chunk-KA3VPKMY.js";
+} from "./chunk-4MB2ICSK.js";
 import {
   BdsCheckboxGroup
-} from "./chunk-VANAKB6D.js";
+} from "./chunk-GPJWLAKU.js";
 import {
   BdsCombobox
-} from "./chunk-J3HVUIUH.js";
+} from "./chunk-XI2U6U26.js";
 import {
   BdsFieldGroup
 } from "./chunk-SEO2F5KJ.js";
@@ -39,16 +45,17 @@ import {
 } from "./chunk-KZPRFY5P.js";
 import {
   BdsFormInput
-} from "./chunk-CUKQ2L5B.js";
+} from "./chunk-AGI6YQRC.js";
 import {
   BdsNumberInput
-} from "./chunk-VED2DFJ6.js";
-import {
-  BdsRadio
-} from "./chunk-3WAV6MDN.js";
+} from "./chunk-GQNQBEYR.js";
+import "./chunk-SRKQ6GST.js";
 import {
   BdsDropdownMenuItem
-} from "./chunk-QZAIRJ75.js";
+} from "./chunk-2DHW2WJZ.js";
+import {
+  BdsDropdownMenuGroup
+} from "./chunk-BDRV452N.js";
 import {
   BdsPopover
 } from "./chunk-PLWCDDP6.js";
@@ -57,7 +64,7 @@ import {
 } from "./chunk-66M6ETWD.js";
 import {
   BdsTab
-} from "./chunk-RSZ3BWBK.js";
+} from "./chunk-KSK4RZZQ.js";
 import {
   BdsTabPanel
 } from "./chunk-WIBAN7KP.js";
@@ -67,9 +74,6 @@ import {
 import {
   BdsToastProvider
 } from "./chunk-HRD3NOA3.js";
-import {
-  BdsTooltip
-} from "./chunk-M3ECULRH.js";
 import {
   BdsTypography
 } from "./chunk-IPGHUCJT.js";
@@ -93,7 +97,7 @@ import {
 } from "./chunk-SOYAOLKR.js";
 import {
   BdsDropdownMenu
-} from "./chunk-IDSM74LM.js";
+} from "./chunk-6XL5P76D.js";
 import {
   BdsPagination
 } from "./chunk-TMWXRHGF.js";
@@ -108,17 +112,17 @@ import {
 } from "./chunk-SYNLFKD3.js";
 import {
   BdsSectionHeader
-} from "./chunk-RVF7W653.js";
+} from "./chunk-DGOCPKHI.js";
 import "./chunk-QPOKHLMQ.js";
 import {
   BdsSeparator
-} from "./chunk-5HUAFCU6.js";
+} from "./chunk-TJV7UIXC.js";
 import {
   BdsSkeleton
 } from "./chunk-EF7IVYTY.js";
 import {
   BdsTable
-} from "./chunk-HBLJ4SLY.js";
+} from "./chunk-DD3OUXNG.js";
 import {
   BdsCalendar,
   buildMonthGrid,
@@ -154,14 +158,14 @@ import {
 } from "./chunk-AIBOHNDU.js";
 import {
   BdsNotificationBanner
-} from "./chunk-LDIPCTRN.js";
-import "./chunk-P24JYC5V.js";
+} from "./chunk-2MJTO2IW.js";
+import "./chunk-7VXRMCAL.js";
 import {
   BdsAlert
-} from "./chunk-6G22I2CK.js";
+} from "./chunk-RZH5IVB5.js";
 import {
   BdsAvatar
-} from "./chunk-WFVKU4GX.js";
+} from "./chunk-IKAJLROF.js";
 import {
   BdsBadge
 } from "./chunk-BPYKZVDK.js";
@@ -460,6 +464,7 @@ export {
   BdsDialog,
   BdsDrawer,
   BdsDropdownMenu,
+  BdsDropdownMenuGroup,
   BdsDropdownMenuItem,
   BdsFieldGroup,
   BdsFileInput,

package/dist/web-components/interaction/bds-dropdown-menu-group.d.ts

@@ -0,0 +1,41 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-dropdown-menu-group>` — a labelled group of `<bds-dropdown-menu-item>`
+ * elements inside a `<bds-dropdown-menu>`.
+ *
+ * The shadow root renders a `role="group"` element named by the visible label
+ * (`aria-labelledby` inside the same shadow root). The label is not focusable;
+ * keyboard navigation in the menu only visits the items.
+ *
+ * Attributes:
+ *   label — visible group label, also the accessible name of the group
+ *
+ * Slots:
+ *   (default) — `<bds-dropdown-menu-item>` elements
+ *
+ * @example
+ * <bds-dropdown-menu-group label="Edit">
+ *   <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+ * </bds-dropdown-menu-group>
+ */
+declare class BdsDropdownMenuGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-dropdown-menu-group': BdsDropdownMenuGroup;
+    }
+}
+
+export { BdsDropdownMenuGroup };

package/dist/web-components/interaction/bds-dropdown-menu-group.js

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

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

@@ -7,9 +7,12 @@ import { LitElement } from 'lit';
  * Attributes:
  *   value       — value associated with this item
  *   disabled    — disables this item
- *   destructive — renders the item in a destructive (red) style
+ *   destructive — renders the item in a destructive (error colour) style
+ *   shortcut    — keyboard shortcut as display text (decorative, `aria-hidden`);
+ *                 the consumer wires the actual key
  *
  * Slots:
+ *   icon      — optional icon shown before the label (decorative)
  *   (default) — item label text
  *
  * Events:
@@ -33,11 +36,21 @@ declare class BdsDropdownMenuItem extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        shortcut: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        _hasIcon: {
+            state: boolean;
+        };
     };
     value: string;
     disabled: boolean;
     destructive: boolean;
+    shortcut: string;
+    _hasIcon: boolean;
     constructor();
+    private _onIconSlotChange;
     private _handleClick;
     private _handleKeydown;
     render(): lit.TemplateResult<1>;

package/dist/web-components/interaction/bds-dropdown-menu-item.js

@@ -1,6 +1,6 @@
 import {
   BdsDropdownMenuItem
-} from "../chunk-QZAIRJ75.js";
+} from "../chunk-2DHW2WJZ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDropdownMenuItem

package/dist/web-components/interaction/bds-dropdown-menu.d.ts

@@ -18,7 +18,8 @@ type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-
  *
  * Slots:
  *   trigger   — the activating element (button or similar)
- *   (default) — `<bds-dropdown-menu-item>` elements
+ *   (default) — `<bds-dropdown-menu-item>` elements, optionally wrapped in
+ *               `<bds-dropdown-menu-group label="...">`
  *
  * Events:
  *   bds-open  — fired when the menu opens

package/dist/web-components/interaction/bds-dropdown-menu.js

@@ -1,6 +1,6 @@
 import {
   BdsDropdownMenu
-} from "../chunk-IDSM74LM.js";
+} from "../chunk-6XL5P76D.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDropdownMenu

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

@@ -27,12 +27,17 @@ declare class BdsTab extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        _label: {
+            state: boolean;
+        };
     };
     selected: boolean;
     disabled: boolean;
+    private _label;
     constructor();
     /** Called by `bds-tabs` to focus the inner button for keyboard navigation. */
     focusButton(): void;
+    private _handleSlotChange;
     private _handleClick;
     render(): lit.TemplateResult<1>;
 }

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

@@ -1,6 +1,6 @@
 import {
   BdsTab
-} from "../chunk-RSZ3BWBK.js";
+} from "../chunk-KSK4RZZQ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTab

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

@@ -1,6 +1,6 @@
 import {
   BdsTooltip
-} from "../chunk-M3ECULRH.js";
+} from "../chunk-RBF7WPLI.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTooltip

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

@@ -70,6 +70,12 @@ declare class BdsCheckboxGroup extends LitElement {
      * stays disabled.
      */
     private _propagateDisabled;
+    /**
+     * Propagates the group's `error` to slotted `<bds-checkbox>` elements so they
+     * show the error ring. A checkbox individually marked `error` in markup keeps it.
+     */
+    private _propagateError;
+    private _propagateToCheckboxes;
     connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     render(): lit.TemplateResult<1>;

package/dist/web-components/interaction/form/bds-checkbox-group.js

@@ -1,6 +1,7 @@
 import {
   BdsCheckboxGroup
-} from "../../chunk-VANAKB6D.js";
+} from "../../chunk-GPJWLAKU.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckboxGroup

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

@@ -1,6 +1,6 @@
 import {
   BdsCheckbox
-} from "../../chunk-KA3VPKMY.js";
+} from "../../chunk-4MB2ICSK.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckbox

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

@@ -1,6 +1,7 @@
 import {
   BdsCombobox
-} from "../../chunk-J3HVUIUH.js";
+} from "../../chunk-XI2U6U26.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCombobox

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

@@ -1,6 +1,7 @@
 import {
   BdsFormInput
-} from "../../chunk-CUKQ2L5B.js";
+} from "../../chunk-AGI6YQRC.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsFormInput

package/dist/web-components/interaction/form/bds-number-input.js

@@ -1,6 +1,7 @@
 import {
   BdsNumberInput
-} from "../../chunk-VED2DFJ6.js";
+} from "../../chunk-GQNQBEYR.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsNumberInput

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

@@ -67,6 +67,11 @@ declare class BdsRadioGroup extends LitElement {
      * a radio individually marked `disabled` in markup stays disabled.
      */
     private _propagateDisabled;
+    /**
+     * Propagates the group's `error` to slotted `<bds-radio>` elements so they show
+     * the error ring. A radio individually marked `error` in markup keeps it.
+     */
+    private _propagateError;
     private _propagateToRadios;
     connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;

package/dist/web-components/interaction/form/bds-radio-group.js

@@ -1,6 +1,7 @@
 import {
   BdsRadioGroup
-} from "../../chunk-JV5QT2OU.js";
+} from "../../chunk-YLDQOESI.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadioGroup

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

@@ -1,6 +1,6 @@
 import {
   BdsRadio
-} from "../../chunk-3WAV6MDN.js";
+} from "../../chunk-3FSGP35V.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadio

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

@@ -1,6 +1,7 @@
 import {
   BdsSelect
-} from "../../chunk-JH6LQKLK.js";
+} from "../../chunk-XJU7KITO.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

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

@@ -1,6 +1,7 @@
 import {
   BdsSlider
-} from "../../chunk-FEDABOR5.js";
+} from "../../chunk-LHFUXZ52.js";
+import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSlider

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

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

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

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

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

@@ -2,11 +2,13 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+type AlertAppearance = 'default' | 'gradient';
 /**
  * `<bds-alert>` — framework-agnostic Alert custom element.
  *
  * Attributes:
  *   variant     — "info" (default) | "success" | "warning" | "error"
+ *   appearance  — "default" | "gradient" (fades the tint to the surface, 3px accent line, shadow)
  *   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
@@ -40,6 +42,10 @@ declare class BdsAlert extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         heading: {
             type: StringConstructor;
         };
@@ -55,6 +61,7 @@ declare class BdsAlert extends LitElement {
         };
     };
     variant: AlertVariant;
+    appearance: AlertAppearance;
     heading: string;
     /**
      * @deprecated Use `heading` instead. Sharing the name with the global HTML
@@ -77,4 +84,4 @@ declare global {
     }
 }
 
-export { type AlertVariant, BdsAlert };
+export { type AlertAppearance, type AlertVariant, BdsAlert };

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

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

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

@@ -1,6 +1,10 @@
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 
+declare const AVATAR_TONES: readonly ["primary", "accent-1", "accent-2", "accent-3", "secondary"];
+type AvatarToneName = (typeof AVATAR_TONES)[number];
+type AvatarTone = 'auto' | AvatarToneName;
+
 /**
  * `<bds-avatar>` — framework-agnostic Avatar custom element.
  *
@@ -12,6 +16,8 @@ import { LitElement } from 'lit';
  *          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"
+ *   tone — "auto" (default, picked from `name`) | "primary" | "secondary" |
+ *          "accent-1" | "accent-2" | "accent-3"; colours the initials fallback
  *
  * @example
  * <bds-avatar src="/photo.jpg" name="Jane Doe"></bds-avatar>
@@ -33,11 +39,16 @@ declare class BdsAvatar extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     src: string;
     alt: string;
     name: string;
     size: 'small' | 'medium' | 'large';
+    tone: AvatarTone;
     constructor();
     private get _initials();
     render(): lit.TemplateResult<1>;

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

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

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

@@ -2,16 +2,19 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error';
+type NotificationBannerAppearance = 'default' | 'gradient';
 /**
  * `<bds-notification-banner>` — framework-agnostic Notification Banner custom element.
  *
  * Attributes:
  *   variant       — "info" (default) | "success" | "warning" | "error"
+ *   appearance    — "default" | "gradient" (fades the tint to the surface, accent line, shadow)
  *   dismissible   — boolean; shows a dismiss button when present
  *   dismiss-label — aria-label for the dismiss button (default: "Dismiss notification")
  *
  * Slots:
  *   (default) — banner body content
+ *   icon      — optional icon displayed before the content
  *   action    — optional action area (e.g. a button)
  *
  * Events:
@@ -30,6 +33,10 @@ declare class BdsNotificationBanner extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         dismissible: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -41,12 +48,18 @@ declare class BdsNotificationBanner extends LitElement {
         _actionFilled: {
             state: boolean;
         };
+        _iconFilled: {
+            state: boolean;
+        };
     };
     variant: NotificationBannerVariant;
+    appearance: NotificationBannerAppearance;
     dismissible: boolean;
     dismissLabel: string;
     private _actionFilled;
+    private _iconFilled;
     constructor();
+    private _onIconSlotChange;
     private _onActionSlotChange;
     private get _isUrgent();
     private _handleDismiss;
@@ -58,4 +71,4 @@ declare global {
     }
 }
 
-export { BdsNotificationBanner, type NotificationBannerVariant };
+export { BdsNotificationBanner, type NotificationBannerAppearance, type NotificationBannerVariant };

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

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

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

@@ -13,6 +13,7 @@ import { LitElement } from 'lit';
  *   subtitle  — optional subheading text
  *   alignment — "start" (default) | "center" | "end"
  *   size      — "xs" | "small" | "medium" (default) | "large"
+ *   appearance — "default" | "gradient" (gradient-filled title)
  *   title-as  — tag name for the title element (default: "h2")
  *
  * @example
@@ -38,6 +39,10 @@ declare class BdsSectionHeader extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         titleAs: {
             type: StringConstructor;
             attribute: string;
@@ -53,6 +58,7 @@ declare class BdsSectionHeader extends LitElement {
     subtitle: string;
     alignment: 'start' | 'center' | 'end';
     size: 'xs' | 'small' | 'medium' | 'large';
+    appearance: 'default' | 'gradient';
     titleAs: string;
     constructor();
     private get _headingText();

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

@@ -1,6 +1,6 @@
 import {
   BdsSectionHeader
-} from "../chunk-RVF7W653.js";
+} from "../chunk-DGOCPKHI.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-5HUAFCU6.js";
+} from "../chunk-TJV7UIXC.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsSeparator

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

@@ -1,6 +1,6 @@
 import {
   BdsTable
-} from "../chunk-HBLJ4SLY.js";
+} from "../chunk-DD3OUXNG.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTable