@boostdev/design-system-components 2.15.0 → 2.16.0

package/dist/web-components/chunk-2DHW2WJZ.js

@@ -0,0 +1,154 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dropdown-menu-item.ts
+var BdsDropdownMenuItem = class extends i2 {
+  static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: var(--dropdown_item-opacity--disabled, 0.4);
+      pointer-events: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      inline-size: 100%;
+      padding: var(--dropdown_item-padding, var(--bds-space_xs) var(--bds-space_s));
+      font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
+      font-family: var(--bds-font_family--body);
+      color: inherit;
+      background: none;
+      border: none;
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--dropdown_item-radius, var(--bds-border_radius--xs));
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([destructive]) .item {
+      color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
+    }
+
+    .item:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    .item:not(:disabled):focus-visible {
+      background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([destructive]) .item:not(:disabled):focus-visible {
+      background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+      color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .item:not(:disabled):hover {
+        background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+        color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+      }
+
+      :host([destructive]) .item:not(:disabled):hover {
+        background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+        color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
+      }
+    }
+
+    .icon[hidden] {
+      display: none;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .label {
+      flex: 1;
+    }
+
+    .shortcut {
+      flex-shrink: 0;
+      color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+      font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
+    }
+  `;
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    destructive: { type: Boolean, reflect: true },
+    shortcut: { type: String, reflect: true },
+    _hasIcon: { state: true }
+  };
+  constructor() {
+    super();
+    this.value = "";
+    this.disabled = false;
+    this.destructive = false;
+    this.shortcut = "";
+    this._hasIcon = false;
+  }
+  _onIconSlotChange(e) {
+    this._hasIcon = e.target.assignedNodes().length > 0;
+  }
+  _handleClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent("bds-select", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+  render() {
+    return T`
+      <button
+        class="item"
+        type="button"
+        role="menuitem"
+        tabindex=${this.disabled ? "-1" : "0"}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="icon" aria-hidden="true" ?hidden=${!this._hasIcon}>
+          <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        </span>
+        <span class="label"><slot></slot></span>
+        ${this.shortcut ? T`<span class="shortcut" aria-hidden="true">${this.shortcut}</span>` : A}
+      </button>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu-item", BdsDropdownMenuItem);
+
+export {
+  BdsDropdownMenuItem
+};

package/dist/web-components/{chunk-LDIPCTRN.js → chunk-2MJTO2IW.js}

@@ -29,7 +29,7 @@ var BdsNotificationBanner = class extends i2 {
       padding: var(--bds-space_s) var(--bds-space_m);
       background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
       color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
-      border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
+      border-block-end: var(--banner_border-width, 3px) solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       inline-size: 100%;
@@ -60,6 +60,41 @@ var BdsNotificationBanner = class extends i2 {
       --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
+    /* Gradient appearance: the variant background stays the base colour and a
+       gradient fades it to the surface. The accent line uses a per-variant
+       accent slot; --banner_border still wins over it. */
+    :host([appearance='gradient']) .banner {
+      background-image: var(--banner_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+      box-shadow: var(--banner_shadow, var(--bds-shadow_s));
+    }
+
+    :host([appearance='gradient'][variant='info']) .banner {
+      --banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='success']) .banner {
+      --banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='warning']) .banner {
+      --banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
+    }
+
+    :host([appearance='gradient'][variant='error']) .banner {
+      --banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
+    }
+
+    /* Icon slot wrapper — hidden unless slot has content */
+    .icon {
+      display: none;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .icon.has-content {
+      display: flex;
+    }
+
     .content {
       flex: 1;
     }
@@ -113,16 +148,24 @@ var BdsNotificationBanner = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
+    appearance: { type: String, reflect: true },
     dismissible: { type: Boolean, reflect: true },
     dismissLabel: { type: String, attribute: "dismiss-label" },
-    _actionFilled: { state: true }
+    _actionFilled: { state: true },
+    _iconFilled: { state: true }
   };
   constructor() {
     super();
     this.variant = "info";
+    this.appearance = "default";
     this.dismissible = false;
     this.dismissLabel = "Dismiss notification";
     this._actionFilled = false;
+    this._iconFilled = false;
+  }
+  _onIconSlotChange(e) {
+    const slot = e.target;
+    this._iconFilled = slot.assignedNodes({ flatten: true }).length > 0;
   }
   _onActionSlotChange(e) {
     const slot = e.target;
@@ -142,6 +185,9 @@ var BdsNotificationBanner = class extends i2 {
         aria-live=${this._isUrgent ? "assertive" : "polite"}
         aria-atomic="true"
       >
+        <span class="icon ${this._iconFilled ? "has-content" : ""}" aria-hidden="true">
+          <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        </span>
         <div class="content"><slot></slot></div>
         <div class="action ${this._actionFilled ? "has-content" : ""}">
           <slot name="action" @slotchange=${this._onActionSlotChange}></slot>

package/dist/web-components/{chunk-3WAV6MDN.js → chunk-3FSGP35V.js}

@@ -77,6 +77,7 @@ var BdsRadio = class extends i2 {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .textWrapper {

package/dist/web-components/{chunk-KA3VPKMY.js → chunk-4MB2ICSK.js}

@@ -83,6 +83,7 @@ var BdsCheckbox = class extends i2 {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     label {

package/dist/web-components/{chunk-IDSM74LM.js → chunk-6XL5P76D.js}

@@ -28,15 +28,15 @@ var BdsDropdownMenu = class extends i2 {
       inset-inline-start: 0;
       min-inline-size: 10rem;
       border: var(--dropdown_border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dropdown_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
       --bdc-outline_radius: var(--bds-border_radius--s);
 
       border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
       background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
       color: var(--dropdown_on-color, var(--bds-color_on-bg));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
-        var(--dropdown_shadow, var(--bds-shadow_m));
-      padding: var(--bds-space_xxs);
+        var(--dropdown_shadow, var(--bds-shadow_l));
+      padding: var(--dropdown_padding, var(--bds-space_xxs));
       z-index: var(--bds-z-index_dropdown);
       display: none;
       flex-direction: column;

package/dist/web-components/{chunk-P24JYC5V.js → chunk-7VXRMCAL.js}

@@ -8,7 +8,7 @@ var bdcCss = `
 
   @property --bdc-outline_width {
     syntax: '<length>';
-    inherits: false;
+    inherits: true;
     initial-value: 1px;
   }
 
@@ -30,7 +30,7 @@ var bdcCss = `
     initial-value: 0 0 0 0 transparent;
   }
 
-  @layer boostdev.component {
+  @layer boostdev.tokens.semantic {
     :root {
       --bdc-outline_border: none;
 
@@ -41,14 +41,20 @@ var bdcCss = `
       /* Active / selected state colours \u2014 override these to theme all filled form controls globally */
       --bdc-color_active:          var(--bds-color_interactive);
       --bdc-color_on-active:       var(--bds-color_on-interactive);
-      --bdc-color_active--subtle:  var(--bds-color_blue--subtle);
-      --bdc-color_active--strong:  var(--bds-color_interactive_on-bg);
+      --bdc-color_active--subtle:    var(--bds-color_blue--subtle);
+      --bdc-color_on-active--subtle: var(--bds-color_on-blue--subtle);
+      --bdc-color_active--strong:    var(--bds-color_interactive_on-bg);
+      --bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
 
       --bdc-outline_width:  1px;
+      --bdc-outline_width--error: 2px;
       --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
       --bdc-outline_radius: var(--bds-border_radius--xs);
       --bdc-outline_radius--l: 1.5em;
       --bdc-outline_shadow: 0 0 0 0 transparent;
+
+      --bds-outline_default: 2px solid var(--bds-color_interactive);
+      --bds-outline_offset:  2px;
     }
   }
 `;

package/dist/web-components/{chunk-CUKQ2L5B.js → chunk-AGI6YQRC.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   A,
   T,
@@ -63,6 +67,7 @@ var BdsFormInput = class extends i2 {
 
     :host([error]) .wrapper {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .wrapper:focus-within {
@@ -71,6 +76,7 @@ var BdsFormInput = class extends i2 {
 
     :host([error]) .wrapper:focus-within {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .input {
@@ -120,20 +126,7 @@ var BdsFormInput = class extends i2 {
       display: none;
     }
 
-    .message {
-      margin-block-start: var(--bds-space_xxs);
-      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;
-    }
+    ${fieldMessageStyles}
   `;
   static properties = {
     name: { type: String, reflect: true },
@@ -224,8 +217,8 @@ var BdsFormInput = class extends i2 {
         />
         <span class="suffix"><slot name="suffix"></slot></span>
       </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) : ""}
     `;
   }
 };

package/dist/web-components/chunk-BDRV452N.js

@@ -0,0 +1,51 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dropdown-menu-group.ts
+var BdsDropdownMenuGroup = class extends i2 {
+  static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it here. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .label {
+      padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
+      font-family: var(--bds-font_family--body);
+      font-size: var(--dropdown_group-label-font-size, var(--bds-font_size--body--s));
+      font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
+      color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+    }
+  `;
+  static properties = {
+    label: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.label = "";
+  }
+  render() {
+    return T`
+      <div role="group" aria-labelledby=${this.label ? "label" : A}>
+        ${this.label ? T`<div id="label" class="label">${this.label}</div>` : A}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu-group", BdsDropdownMenuGroup);
+
+export {
+  BdsDropdownMenuGroup
+};

package/dist/web-components/{chunk-3AY2YKCM.js → chunk-CKCPV347.js}

@@ -118,6 +118,7 @@ var BdsSwitch = class extends i2 {
        switch still shows the active colour even when it also has an error. */
     :host([error]) .track {
       --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .input:checked + .track {

package/dist/web-components/{chunk-HBLJ4SLY.js → chunk-DD3OUXNG.js}

@@ -9,15 +9,15 @@ import {
 var tableLightDomCss = `
   @layer boostdev.component {
     bds-table > table thead {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
     }
 
     bds-table > table th {
       padding: var(--bds-space_s) var(--bds-space_m);
-      font-weight: var(--bds-font_weight--semibold);
-      font-size: var(--bds-font_size--body--s);
+      font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+      font-size: var(--table_header-font-size, var(--bds-font_size--body));
       text-align: start;
-      color: var(--bds-color_on-bg--subtle);
+      color: var(--table_header-color, var(--bds-color_on-bg--subtle));
       border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
       white-space: nowrap;
     }
@@ -35,7 +35,7 @@ var tableLightDomCss = `
     bds-table[sticky-header] > table thead th {
       position: sticky;
       inset-block-start: 0;
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
     }
 
     @media (hover: hover) and (pointer: fine) {

package/dist/web-components/{chunk-RVF7W653.js → chunk-DGOCPKHI.js}

@@ -37,11 +37,11 @@ var BdsSectionHeader = class extends i2 {
       /* --sectionHeader-title-color (kebab delimiter) is deprecated -- use --sectionHeader_title-color */
       color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
       margin: 0;
-      font-family: var(--bds-font_family--body);
+      font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
     }
 
     .subtitle {
-      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
       margin: 0;
       font-family: var(--bds-font_family--body);
       font-weight: var(--bds-font_weight--medium);
@@ -52,17 +52,35 @@ var BdsSectionHeader = class extends i2 {
     .header.--end    { align-items: flex-end;    text-align: end; }
 
     /* medium first -- default size, so MCP extraction picks up its fallbacks */
-    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
-    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
+    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
+    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
 
-    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
-    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
+    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
 
-    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
     .header.--small  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
 
-    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--display)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); letter-spacing: var(--bds-font_tracking--tight); }
-    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+
+    /* Gradient only where background-clip: text is supported; elsewhere the title keeps its normal colour */
+    @supports (background-clip: text) {
+      .header.--gradient .title {
+        inline-size: fit-content;
+        max-inline-size: 100%;
+        background-image: var(--sectionHeader_title-gradient, linear-gradient(90deg, var(--bds-color_primary--strong, var(--bds-color_blue--strong)), var(--bds-color_accent-3--strong, var(--bds-color_blue--strong))));
+        background-clip: text;
+        color: transparent;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .header.--gradient .title {
+        background-image: none;
+        color: CanvasText;
+      }
+    }
   `;
   static properties = {
     heading: { type: String },
@@ -70,6 +88,7 @@ var BdsSectionHeader = class extends i2 {
     subtitle: { type: String },
     alignment: { type: String, reflect: true },
     size: { type: String, reflect: true },
+    appearance: { type: String, reflect: true },
     titleAs: { type: String, attribute: "title-as" }
   };
   constructor() {
@@ -79,6 +98,7 @@ var BdsSectionHeader = class extends i2 {
     this.subtitle = "";
     this.alignment = "start";
     this.size = "medium";
+    this.appearance = "default";
     this.titleAs = "h2";
   }
   get _headingText() {
@@ -87,7 +107,7 @@ var BdsSectionHeader = class extends i2 {
   render() {
     const tag = s(this.titleAs || "h2");
     return T`
-      <div class="header --${this.alignment} --${this.size}">
+      <div class="header --${this.alignment} --${this.size}${this.appearance === "gradient" ? " --gradient" : ""}">
         ${u`<${tag} class="title">${this._headingText}</${tag}>`}
         ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
       </div>

package/dist/web-components/{chunk-2OLVQUBU.js → chunk-EYCW7TKB.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   T,
   i,
@@ -79,26 +83,15 @@ var BdsTextarea = class extends i2 {
 
     :host([error]) .textarea {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     :host([error]) .textarea:focus {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
-    .message {
-      margin-block-start: var(--bds-space_xxs);
-      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;
-    }
+    ${fieldMessageStyles}
   `;
   static properties = {
     name: { type: String, reflect: true },
@@ -182,7 +175,7 @@ var BdsTextarea = class extends i2 {
         @input=${this._handleInput}
         @change=${this._handleChange}
       ></textarea>
-      ${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) : ""}
     `;
   }
 };

package/dist/web-components/{chunk-VANAKB6D.js → chunk-GPJWLAKU.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   A,
   T,
@@ -68,19 +72,10 @@ var BdsCheckboxGroup = 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_on-bg);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
     }
   `;
   static properties = {
@@ -117,14 +112,36 @@ var BdsCheckboxGroup = class extends i2 {
       }
     });
   };
+  /**
+   * 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.
+   */
+  _propagateError = () => {
+    this.querySelectorAll("bds-checkbox").forEach((checkbox) => {
+      const el = checkbox;
+      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");
+      }
+    });
+  };
+  _propagateToCheckboxes = () => {
+    this._propagateDisabled();
+    this._propagateError();
+  };
   connectedCallback() {
     super.connectedCallback();
-    Promise.resolve().then(this._propagateDisabled);
+    Promise.resolve().then(this._propagateToCheckboxes);
   }
   updated(changed) {
     super.updated(changed);
-    if (changed.has("disabled")) {
-      this._propagateDisabled();
+    if (changed.has("disabled") || changed.has("error")) {
+      this._propagateToCheckboxes();
     }
   }
   render() {
@@ -138,9 +155,9 @@ var BdsCheckboxGroup = class extends i2 {
           ${this.required ? T`<span class="required" aria-hidden="true"> *</span> <span class="requiredLabel">(required)</span>` : ""}
         </legend>
         <div class="items">
-          <slot @slotchange=${this._propagateDisabled}></slot>
+          <slot @slotchange=${this._propagateToCheckboxes}></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>
     `;
   }