@boostdev/design-system-components 2.15.0 → 2.17.0

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>
     `;
   }

package/dist/web-components/{chunk-VED2DFJ6.js → chunk-GQNQBEYR.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   T,
   i,
@@ -55,6 +59,7 @@ var BdsNumberInput = class extends i2 {
 
     :host([error]) .row {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .row:focus-within {
@@ -63,6 +68,7 @@ var BdsNumberInput = class extends i2 {
 
     :host([error]) .row:focus-within {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .row:focus-within:has(:focus-visible) {
@@ -137,20 +143,7 @@ var BdsNumberInput = class extends i2 {
       color: var(--numberInput_stepper-color, var(--bds-color_interactive));
     }
 
-    .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 },
@@ -254,7 +247,7 @@ var BdsNumberInput = class extends i2 {
           </svg>
         </button>
       </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-WFVKU4GX.js → chunk-IKAJLROF.js}

@@ -5,6 +5,22 @@ import {
   i2
 } from "./chunk-LGEZYFUU.js";
 
+// src/components/ui/Avatar/avatarTone.ts
+var AVATAR_TONES = ["primary", "accent-1", "accent-2", "accent-3", "secondary"];
+function toneFromName(name) {
+  const normalised = (name ?? "").trim().toLowerCase();
+  if (!normalised) return "primary";
+  const hash = [...normalised].reduce(
+    (h, ch) => Math.imul(h, 31) + (ch.codePointAt(0) ?? 0) >>> 0,
+    0
+  );
+  return AVATAR_TONES[hash % AVATAR_TONES.length];
+}
+function resolveAvatarTone(tone, name) {
+  const isKnownTone = (value) => AVATAR_TONES.some((known) => known === value);
+  return tone && isKnownTone(tone) ? tone : toneFromName(name);
+}
+
 // src/web-components/ui/bds-avatar.ts
 var BdsAvatar = class extends i2 {
   static styles = i`
@@ -43,11 +59,38 @@ var BdsAvatar = class extends i2 {
       justify-content: center;
       inline-size: 100%;
       block-size: 100%;
-      background-color: var(--avatar_bg, var(--bds-color_blue));
-      color: var(--avatar_text, var(--bds-color_on-blue));
+      background-color: var(--avatar_bg, var(--avatar_bg--variant));
+      color: var(--avatar_text, var(--avatar_text--variant));
       font-weight: var(--bds-font_weight--semibold);
     }
 
+    /* Tone slots (mirrors the React Avatar): outer --avatar_bg / --avatar_text
+       still win, each tone has its own public hook. */
+    .fallback.tone_primary {
+      --avatar_bg--variant: var(--avatar_bg--primary, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--primary, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    .fallback.tone_secondary {
+      --avatar_bg--variant: var(--avatar_bg--secondary, var(--bds-color_secondary--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--secondary, var(--bds-color_on-secondary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    .fallback.tone_accent-1 {
+      --avatar_bg--variant: var(--avatar_bg--accent-1, var(--bds-color_accent-1--subtle, var(--bds-color_green--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-1, var(--bds-color_on-accent-1--subtle, var(--bds-color_on-green--subtle)));
+    }
+
+    .fallback.tone_accent-2 {
+      --avatar_bg--variant: var(--avatar_bg--accent-2, var(--bds-color_accent-2--subtle, var(--bds-color_orange--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-2, var(--bds-color_on-accent-2--subtle, var(--bds-color_on-orange--subtle)));
+    }
+
+    .fallback.tone_accent-3 {
+      --avatar_bg--variant: var(--avatar_bg--accent-3, var(--bds-color_accent-3--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-3, var(--bds-color_on-accent-3--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
     .initials {
       line-height: 1;
       user-select: none;
@@ -68,7 +111,8 @@ var BdsAvatar = class extends i2 {
     src: { type: String },
     alt: { type: String },
     name: { type: String },
-    size: { type: String, reflect: true }
+    size: { type: String, reflect: true },
+    tone: { type: String, reflect: true }
   };
   constructor() {
     super();
@@ -76,6 +120,7 @@ var BdsAvatar = class extends i2 {
     this.alt = "";
     this.name = "";
     this.size = "medium";
+    this.tone = "auto";
   }
   get _initials() {
     if (!this.name) return "";
@@ -88,7 +133,7 @@ var BdsAvatar = class extends i2 {
     }
     return T`
       <span
-        class="fallback"
+        class="fallback tone_${resolveAvatarTone(this.tone, this.name)}"
         role="img"
         aria-label=${this.name || "User avatar"}
       >

package/dist/web-components/{chunk-RSZ3BWBK.js → chunk-KSK4RZZQ.js}

@@ -28,14 +28,14 @@ var BdsTab = class extends i2 {
       padding: var(--bds-space_s) var(--bds-space_m);
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
-      font-weight: var(--bds-font_weight--semibold);
+      font-weight: var(--tab_font-weight, var(--tab_font-weight--state, var(--tab_font-weight--inactive, var(--bds-font_weight--medium))));
 
       /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
          per-state defaults. Active/hover write to the inner --tab_*--state slot —
          mirrors the React Tabs.module.css pattern so a consumer's --tab_color
          override is never shadowed by the selected/hover rules below. */
-      color:            var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
-      border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
+      color:            var(--tab_color, var(--tab_color--state, var(--tab_color--inactive, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)))));
+      border-block-end: var(--tab_indicator-width, 3px) solid var(--tab_border-color, var(--tab_border-color--state, transparent));
       margin-block-end: -1px;
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -43,10 +43,27 @@ var BdsTab = class extends i2 {
     }
 
     :host([selected]) .tab {
-      --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+      --tab_color--state:        var(--tab_color--active, var(--bds-color_on-bg));
+      --tab_font-weight--state:  var(--tab_font-weight--active, var(--bds-font_weight--bold));
       --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
     }
 
+    /* Reserves the width of the bold label so selecting a tab does not shift the row.
+       The hidden ::after repeats the label at the active weight in the same grid cell. */
+    .label {
+      display: inline-grid;
+    }
+
+    .label::after {
+      content: attr(data-label);
+      grid-area: 1 / 1;
+      font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
+      visibility: hidden;
+      pointer-events: none;
+      block-size: 0;
+      overflow: hidden;
+    }
+
     .tab:disabled {
       opacity: 0.4;
       cursor: not-allowed;
@@ -60,23 +77,29 @@ var BdsTab = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .tab:not(:disabled, [aria-selected='true']):hover {
-        --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
+        --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
       }
     }
   `;
   static properties = {
     selected: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true }
+    disabled: { type: Boolean, reflect: true },
+    _label: { state: true }
   };
   constructor() {
     super();
     this.selected = false;
     this.disabled = false;
+    this._label = "";
   }
   /** Called by `bds-tabs` to focus the inner button for keyboard navigation. */
   focusButton() {
     this.shadowRoot?.querySelector("button")?.focus();
   }
+  _handleSlotChange(e) {
+    const slot = e.target;
+    this._label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent ?? "").join("").trim();
+  }
   _handleClick() {
     if (this.disabled) return;
     this.dispatchEvent(new CustomEvent("bds-tab-select", { bubbles: true, composed: true }));
@@ -92,7 +115,7 @@ var BdsTab = class extends i2 {
         ?disabled=${this.disabled}
         @click=${this._handleClick}
       >
-        <slot></slot>
+        <span class="label" data-label=${this._label}><slot @slotchange=${this._handleSlotChange}></slot></span>
       </button>
     `;
   }

package/dist/web-components/{chunk-FEDABOR5.js → chunk-LHFUXZ52.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   T,
   i,
@@ -122,20 +126,6 @@ var BdsSlider = class extends i2 {
       border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     }
 
-    .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;
-    }
 
     @media (prefers-reduced-motion: reduce) {
       .input,
@@ -144,6 +134,8 @@ var BdsSlider = class extends i2 {
         transition: none;
       }
     }
+
+    ${fieldMessageStyles}
   `;
   static properties = {
     name: { type: String, reflect: true },
@@ -237,7 +229,7 @@ var BdsSlider = class extends i2 {
           @change=${this._handleChange}
         />
       </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-M3ECULRH.js → chunk-RBF7WPLI.js}

@@ -26,13 +26,15 @@ var BdsTooltip = class extends i2 {
     .tooltip {
       position: absolute;
       z-index: var(--bds-z-index_popover);
-      padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+      padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
       line-height: var(--bds-font_line-height--body);
-      white-space: nowrap;
+      inline-size: max-content;
+      max-inline-size: var(--tooltip_max-inline-size, 20rem);
+      white-space: normal;
       pointer-events: none;
 
       /* Hidden by default */
@@ -50,28 +52,28 @@ var BdsTooltip = class extends i2 {
 
     /* Placement: top (default) */
     .tooltip.--placement_top {
-      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     /* Placement: bottom */
     .tooltip.--placement_bottom {
-      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     /* Placement: left */
     .tooltip.--placement_left {
-      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-block-start: 50%;
       transform: translateY(-50%);
     }
 
     /* Placement: right */
     .tooltip.--placement_right {
-      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-block-start: 50%;
       transform: translateY(-50%);
     }

package/dist/web-components/{chunk-BPYKZVDK.js → chunk-SJLMW2VR.js}

@@ -45,8 +45,8 @@ var BdsBadge = class extends i2 {
     }
 
     :host([variant='secondary']) .badge {
-      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_bg));
-      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
+      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_grey));
+      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-grey));
     }
 
     :host([variant='success']) .badge {

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

@@ -0,0 +1,40 @@
+import {
+  T,
+  b,
+  i
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/field-message.ts
+var fieldMessageStyles = i`
+  .message {
+    margin-block-start: var(--bds-space_xxs);
+    font-size: var(--formMessage_font-size, var(--bds-font_size--body--s));
+    font-family: var(--bds-font_family--body);
+  }
+
+  .message--error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--formMessage_gap, var(--bds-space_xxs));
+    color: var(--formMessage_color--error, var(--bds-color_error_on-bg));
+    font-weight: var(--formMessage_font-weight--error, var(--bds-font_weight--semibold));
+  }
+
+  .message__icon {
+    flex-shrink: 0;
+    inline-size: var(--formMessage_icon-size, 1.15em);
+    block-size: var(--formMessage_icon-size, 1.15em);
+  }
+
+  .message--hint {
+    color: var(--formMessage_color--hint, inherit);
+    font-style: var(--formMessage_font-style--hint, italic);
+  }
+`;
+var warningIcon = b`<svg class="message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"></path></svg>`;
+var renderFieldMessage = (kind, id, text) => kind === "error" ? T`<p id=${id} class="message message--error" role="alert">${warningIcon}${text}</p>` : T`<p id=${id} class="message message--hint">${text}</p>`;
+
+export {
+  fieldMessageStyles,
+  renderFieldMessage
+};

package/dist/web-components/{chunk-5HUAFCU6.js → chunk-TJV7UIXC.js}

@@ -32,11 +32,18 @@ var BdsSeparator = class extends i2 {
       display: block;
       inline-size: 100%;
       block-size: var(--separator_thickness, 1px);
+      /* The padding is the space around the line; content-box keeps the line at the
+         thickness and background-clip stops the colour from painting into the padding. */
+      box-sizing: content-box;
+      padding-block: var(--separator_spacing, 0);
+      background-clip: content-box;
     }
 
     :host([orientation='vertical']) .separator {
       inline-size: var(--separator_thickness, 1px);
       block-size: 100%;
+      padding-block: 0;
+      padding-inline: var(--separator_spacing, var(--bds-space_s));
     }
   `;
   static properties = {

package/dist/web-components/{chunk-LDIPCTRN.js → chunk-WWWJCSXN.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%;
@@ -55,11 +55,46 @@ var BdsNotificationBanner = class extends i2 {
     }
 
     :host([variant='error']) .banner {
-      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_bg--variant:     var(--banner_bg--error, var(--bds-color_error--subtle));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-error--subtle));
       --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-J3HVUIUH.js → chunk-XI2U6U26.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   A,
   T,
@@ -71,10 +75,12 @@ var BdsCombobox = class extends i2 {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     :host([error]) .input:focus {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .chevron {
@@ -148,20 +154,7 @@ var BdsCombobox = class extends i2 {
       color: var(--bds-color_on-bg--subtle);
     }
 
-    .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 },
@@ -340,7 +333,7 @@ var BdsCombobox = class extends i2 {
           </ul>
         ` : ""}
       </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-JH6LQKLK.js → chunk-XJU7KITO.js}

@@ -1,3 +1,7 @@
+import {
+  fieldMessageStyles,
+  renderFieldMessage
+} from "./chunk-SRKQ6GST.js";
 import {
   A,
   T,
@@ -78,22 +82,9 @@ var BdsSelect = class extends i2 {
 
     :host([error]) .select {
       --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;
-    }
 
     .chevron {
       position: absolute;
@@ -110,6 +101,8 @@ var BdsSelect = class extends i2 {
       inline-size: 100%;
       block-size: 100%;
     }
+
+    ${fieldMessageStyles}
   `;
   static properties = {
     name: { type: String, reflect: true },
@@ -205,7 +198,7 @@ var BdsSelect = class extends i2 {
           </svg>
         </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) : ""}
     `;
   }
 };