@boostdev/design-system-components 2.14.1 → 2.16.0

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-6G22I2CK.js → chunk-RZH5IVB5.js}

@@ -33,9 +33,12 @@ var BdsAlert = class extends i2 {
          defaults. Variants write to the inner --alert_*--variant slot. */
       background-color:    var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
       color:               var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
-      border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
+      border-inline-start: var(--alert_border-width, var(--alert_border-width--variant, var(--bds-space_s))) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
+
+      /* Reset the slot so a nested default alert does not inherit a parent's gradient width. */
+      --alert_border-width--variant: initial;
     }
 
     /* Per-variant resting overrides — consumers can theme per-variant via
@@ -64,6 +67,31 @@ var BdsAlert = class extends i2 {
       --alert_border--variant: var(--alert_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 is thinner and uses a
+       per-variant accent slot; --alert_border still wins over it. */
+    :host([appearance='gradient']) .alert {
+      --alert_border-width--variant: 3px;
+      background-image: var(--alert_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+      box-shadow: var(--alert_shadow, var(--bds-shadow_s));
+    }
+
+    :host([appearance='gradient'][variant='info']) .alert {
+      --alert_border--variant: var(--alert_border--info, var(--alert_accent--info, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='success']) .alert {
+      --alert_border--variant: var(--alert_border--success, var(--alert_accent--success, var(--bds-color_on-success--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='warning']) .alert {
+      --alert_border--variant: var(--alert_border--warning, var(--alert_accent--warning, var(--bds-color_warning)));
+    }
+
+    :host([appearance='gradient'][variant='error']) .alert {
+      --alert_border--variant: var(--alert_border--error, var(--alert_accent--error, var(--bds-color_error)));
+    }
+
     /* Icon slot wrapper — hidden unless slot has content */
     .icon {
       display: none;
@@ -123,6 +151,7 @@ var BdsAlert = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
+    appearance: { type: String, reflect: true },
     heading: { type: String },
     title: { type: String },
     dismissible: { type: Boolean, reflect: true },
@@ -131,6 +160,7 @@ var BdsAlert = class extends i2 {
   constructor() {
     super();
     this.variant = "info";
+    this.appearance = "default";
     this.heading = "";
     this.title = "";
     this.dismissible = false;

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-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) : ""}
     `;
   }
 };

package/dist/web-components/{chunk-XIZWAWMJ.js → chunk-XTPUKUN5.js}

@@ -39,7 +39,9 @@ var BdsButton = class extends i2 {
       all: unset;
       position: relative;
       font: inherit;
-      padding-inline: var(--bds-space_l);
+      --button_padding-inline--size: var(--bds-space_l);
+
+      padding-inline: var(--button_padding-inline--size);
       display: inline-flex;
       gap: var(--bds-space_xs);
       border-radius: var(--button_radius, var(--bds-border_radius--full));
@@ -89,17 +91,17 @@ var BdsButton = class extends i2 {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      padding-inline: var(--bds-space_m);
+      --button_padding-inline--size: var(--bds-space_m);
     }
 
     .button.medium {
       --button_height: 3em;
-      padding-inline: var(--bds-space_l);
+      --button_padding-inline--size: var(--bds-space_l);
     }
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      padding-inline: var(--bds-space_xl);
+      --button_padding-inline--size: var(--bds-space_xl);
     }
 
     /* Pulse */
@@ -142,15 +144,23 @@ var BdsButton = class extends i2 {
       align-items: center;
     }
 
+    /* Icon offset — pulls the icon into the padding so the optical gap between
+       icon and edge matches the gap between label and edge. Defaults to half
+       the size's inline padding (--button_padding-inline--size, set above per
+       size), so it scales automatically with size and with the responsive
+       space tokens. --button_icon-offset is the public override; it is read
+       only as a var() fallback here, never declared on .button, so a value
+       set on the host or an ancestor inherits through the shadow boundary
+       instead of being shadowed by a same-element declaration. */
     .icon-start.has-content {
       display: flex;
-      margin-inline-start: calc(var(--bds-space_s) * -1);
+      margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
       transition: var(--bds-animation_transition);
     }
 
     .icon-end.has-content {
       display: flex;
-      margin-inline-end: calc(var(--bds-space_s) * -1);
+      margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
       transition: var(--bds-animation_transition);
     }