@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -7,7 +7,18 @@ import {
 
 // src/web-components/interaction/bds-button.ts
 var BdsButton = class extends i2 {
+  static formAssociated = true;
   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;
+    }
+
     @keyframes fadeZoom {
       0%, 100% { opacity: 1; transform: scale(1); }
       50%       { opacity: 0.75; transform: scale(1.15); }
@@ -96,7 +107,7 @@ var BdsButton = class extends i2 {
       animation: pulse 3s infinite;
     }
 
-    /* Icon-only: square (1:1), equal xs padding on both axes — composes with
+    /* Icon-only: square (1:1), equal xxs padding on both axes — composes with
        any variant/size. box-sizing: border-box keeps the outer box at
        --button_height; without it, all: unset reverts to content-box and
        padding-block would stretch the button past its declared height.
@@ -113,8 +124,11 @@ var BdsButton = class extends i2 {
       block-size: 100%;
     }
 
-    /* SVG icon colour */
-    .button svg {
+    /* SVG icon colour — icons are slotted (light DOM), so a shadow-tree
+       descendant selector like ".button svg" can never match them; ::slotted()
+       is required to reach content projected through a <slot>. */
+    .icon-start ::slotted(svg),
+    .icon-end ::slotted(svg) {
       --icon__stroke: currentcolor;
       fill: currentcolor;
       color: currentcolor;
@@ -146,10 +160,10 @@ var BdsButton = class extends i2 {
       margin-inline: 0;
     }
 
-    /* Hover icon animation */
+    /* Hover icon animation — same ::slotted() requirement as the colour rule above */
     @media (hover: hover) and (pointer: fine) {
-      .button:hover .icon-start svg,
-      .button:hover .icon-end svg {
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
         animation: fadeZoom 2s ease-out infinite;
       }
 
@@ -170,6 +184,16 @@ var BdsButton = class extends i2 {
       }
     }
 
+    /* Reduced motion — the pulse ring and hover icon animation both loop
+       indefinitely; disable them for users who opt out of motion. */
+    @media (prefers-reduced-motion: reduce) {
+      .button.has-pulse,
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
+        animation: none;
+      }
+    }
+
     /* Focus visible */
     .button:focus-visible {
       outline: var(--bds-outline_default);
@@ -199,8 +223,10 @@ var BdsButton = class extends i2 {
     _iconStartFilled: { state: true },
     _iconEndFilled: { state: true }
   };
+  _internals;
   constructor() {
     super();
+    this._internals = this.attachInternals();
     this.variant = "default";
     this.size = "medium";
     this.disabled = false;
@@ -228,6 +254,18 @@ var BdsButton = class extends i2 {
       e.preventDefault();
     }
   }
+  // The shadow-DOM <button> below has no native <form> ancestor of its own
+  // (the light-DOM form, if any, lives outside the shadow tree), so its
+  // type="submit"/"reset" attribute is inert on its own. Drive the real
+  // behaviour through ElementInternals, which resolves the form this
+  // *custom element* participates in.
+  _handleButtonClick() {
+    if (this.type === "submit") {
+      this._internals.form?.requestSubmit();
+    } else if (this.type === "reset") {
+      this._internals.form?.reset();
+    }
+  }
   _iconSlot(position) {
     const filled = position === "start" ? this._iconStartFilled : this._iconEndFilled;
     return T`
@@ -261,6 +299,7 @@ var BdsButton = class extends i2 {
         type=${this.type}
         ?disabled=${this.disabled}
         aria-label=${this.ariaLabel ?? A}
+        @click=${this._handleButtonClick}
       >
         ${this._iconSlot("start")}
         <slot></slot>

package/dist/web-components/{chunk-FXURM6D5.js → chunk-YFAXGRPR.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-accordion-item.ts
 var BdsAccordionItem = 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;
       border-block-end: 1px solid var(--bds-color_bg--subtle);

package/dist/web-components/globals.js

@@ -1 +1 @@
-import "./chunk-3S42DZ7W.js";
+import "./chunk-P24JYC5V.js";