@boostdev/design-system-components 2.15.0 → 2.17.0

package/dist/web-components/{chunk-JV5QT2OU.js → chunk-YLDQOESI.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   A,
   T,
@@ -47,19 +51,10 @@ var BdsRadioGroup = class extends i2 {
       gap: var(--bds-space_xs);
     }
 
+    ${fieldMessageStyles}
+
     .message {
       margin-block-start: var(--bds-space_xs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-    }
-
-    .message--error {
-      color: var(--bds-color_error);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
     }
   `;
   static properties = {
@@ -103,9 +98,28 @@ var BdsRadioGroup = class extends i2 {
       }
     });
   };
+  /**
+   * 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.
+   */
+  _propagateError = () => {
+    this.querySelectorAll("bds-radio").forEach((radio) => {
+      const el = radio;
+      if (this.error) {
+        if (!el.hasAttribute("error")) {
+          el.setAttribute("data-bds-group-error", "");
+        }
+        el.setAttribute("error", "");
+      } else if (el.hasAttribute("data-bds-group-error")) {
+        el.removeAttribute("error");
+        el.removeAttribute("data-bds-group-error");
+      }
+    });
+  };
   _propagateToRadios = () => {
     this._propagateName();
     this._propagateDisabled();
+    this._propagateError();
   };
   connectedCallback() {
     super.connectedCallback();
@@ -113,7 +127,7 @@ var BdsRadioGroup = class extends i2 {
   }
   updated(changed) {
     super.updated(changed);
-    if (changed.has("name") || changed.has("disabled")) {
+    if (changed.has("name") || changed.has("disabled") || changed.has("error")) {
       this._propagateToRadios();
     }
   }
@@ -134,7 +148,7 @@ var BdsRadioGroup = class extends i2 {
         <div class="items">
           <slot @slotchange=${this._propagateToRadios}></slot>
         </div>
-        ${this.error ? T`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>` : this.hint ? T`<p id=${hintId} class="message message--hint">${this.hint}</p>` : ""}
+        ${this.error ? renderFieldMessage("error", errorId, this.error) : this.hint ? renderFieldMessage("hint", hintId, this.hint) : ""}
       </fieldset>
     `;
   }

package/dist/web-components/globals.js

@@ -1 +1 @@
-import "./chunk-P24JYC5V.js";
+import "./chunk-7VXRMCAL.js";

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

@@ -54,6 +54,7 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 export { BdsDropdownMenu } from './interaction/bds-dropdown-menu.js';
 export { BdsDropdownMenuItem } from './interaction/bds-dropdown-menu-item.js';
+export { BdsDropdownMenuGroup } from './interaction/bds-dropdown-menu-group.js';
 
 /**
  * `<bds-calendar-range>` — form-associated range date picker.

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";
@@ -105,20 +109,20 @@ import {
 } from "./chunk-7ZOJ7N4E.js";
 import {
   BdsRating
-} from "./chunk-SYNLFKD3.js";
+} from "./chunk-3LQKFSMR.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,17 +158,17 @@ import {
 } from "./chunk-AIBOHNDU.js";
 import {
   BdsNotificationBanner
-} from "./chunk-LDIPCTRN.js";
-import "./chunk-P24JYC5V.js";
+} from "./chunk-WWWJCSXN.js";
+import "./chunk-7VXRMCAL.js";
 import {
   BdsAlert
-} from "./chunk-6G22I2CK.js";
+} from "./chunk-5ATTKUCP.js";
 import {
   BdsAvatar
-} from "./chunk-WFVKU4GX.js";
+} from "./chunk-IKAJLROF.js";
 import {
   BdsBadge
-} from "./chunk-BPYKZVDK.js";
+} from "./chunk-SJLMW2VR.js";
 import {
   BdsBreadcrumb
 } from "./chunk-62NK3ZSC.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-5ATTKUCP.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-badge.js

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