@boostdev/design-system-components 2.8.0 → 2.12.0

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

@@ -0,0 +1,248 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-slider.ts
+var BdsSlider = 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;
+    }
+
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .label-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-block-end: var(--bds-space_xxs);
+    }
+
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+    }
+
+    .value {
+      font-size: var(--bds-font_size--body--s);
+      font-variant-numeric: tabular-nums;
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .track-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .input {
+      color: var(--slider_color, var(--bds-color_on-bg));
+      inline-size: 100%;
+      appearance: none;
+      block-size: var(--slider_track-height, var(--bds-space_xxs));
+      border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
+      background: linear-gradient(
+        to right,
+        var(--slider_color-active, var(--bdc-color_active)) 0%,
+        var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
+      );
+      outline: none;
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([error]) .input {
+      background: linear-gradient(
+        to right,
+        var(--slider_color--error, var(--bds-color_error)) 0%,
+        var(--slider_color--error, var(--bds-color_error)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
+      );
+    }
+
+    .input::-webkit-slider-thumb {
+      appearance: none;
+      inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--slider_color-active, var(--bdc-color_active));
+      box-shadow: var(--bds-shadow_s);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([error]) .input::-webkit-slider-thumb {
+      background-color: var(--slider_color--error, var(--bds-color_error));
+    }
+
+    .input::-moz-range-thumb {
+      inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      border: none;
+      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--slider_color-active, var(--bdc-color_active));
+      box-shadow: var(--bds-shadow_s);
+      cursor: pointer;
+    }
+
+    :host([error]) .input::-moz-range-thumb {
+      background-color: var(--slider_color--error, var(--bds-color_error));
+    }
+
+    .input:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      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,
+      .input::-webkit-slider-thumb,
+      .input::-moz-range-thumb {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
+    showValue: { type: Boolean, attribute: "show-value", reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  _initialValue = 0;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.label = "";
+    this.hint = void 0;
+    this.error = void 0;
+    this.showValue = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialValue = this._clamp(this.value);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(String(this.value));
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+    this._internals.setFormValue?.(String(this.value));
+  }
+  _clamp(v) {
+    return Math.min(this.max, Math.max(this.min, v));
+  }
+  get _fillPct() {
+    const range = this.max - this.min;
+    if (range === 0) return 0;
+    return (this.value - this.min) / range * 100;
+  }
+  _handleInput(e) {
+    this.value = parseFloat(e.target.value);
+  }
+  _handleChange(e) {
+    this.value = parseFloat(e.target.value);
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const id = `bds-slider-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    return T`
+      ${this.label ? T`
+            <div class="label-row">
+              <label class="label" for=${id}>${this.label}</label>
+              ${this.showValue ? T`<span class="value">${this.value}</span>` : ""}
+            </div>
+          ` : ""}
+      <div class="track-wrapper">
+        <input
+          type="range"
+          class="input"
+          id=${id}
+          name=${this.name}
+          .value=${String(this.value)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${describedBy ?? ""}
+          style="--slider_fill: ${this._fillPct}%"
+          @input=${this._handleInput}
+          @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>` : ""}
+    `;
+  }
+};
+customElements.define("bds-slider", BdsSlider);
+
+export {
+  BdsSlider
+};

package/dist/web-components/{chunk-KUI55GFB.js → chunk-FUQEFHRC.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 var BdsDrawer = 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: contents;
     }
@@ -24,7 +35,7 @@ var BdsDrawer = class extends i2 {
       padding: 0;
       display: flex;
       flex-direction: column;
-      background-color: var(--drawer_color, var(--bds-color_bg));
+      background-color: var(--drawer_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
       color: var(--drawer_on-color, var(--bds-color_on-bg));
       border: none;
       box-shadow: var(--bds-shadow_xl);
@@ -36,6 +47,13 @@ var BdsDrawer = class extends i2 {
         overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
     }
 
+    /* Closed native <dialog> must be display:none — the flex layout above would
+       otherwise keep it rendered (off-screen, focusable, causing overflow). The
+       display/overlay allow-discrete transitions above animate the none↔flex. */
+    .drawer:not([open]) {
+      display: none;
+    }
+
     :host([side='left']) .drawer {
       inset-inline: 0 auto;
       translate: -100% 0;
@@ -61,8 +79,8 @@ var BdsDrawer = class extends i2 {
       opacity: 0;
       transition:
         opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
-        display var(--bds-animation_transition-duration) allow-discrete,
-        overlay var(--bds-animation_transition-duration) allow-discrete;
+        display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+        overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
     }
 
     .drawer[open]::backdrop {
@@ -94,8 +112,8 @@ var BdsDrawer = class extends i2 {
       display: flex;
       align-items: center;
       justify-content: center;
-      inline-size: 2rem;
-      block-size: 2rem;
+      inline-size: 2.75rem;
+      block-size: 2.75rem;
       border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -134,13 +152,15 @@ var BdsDrawer = class extends i2 {
   `;
   static properties = {
     open: { type: Boolean, reflect: true },
-    side: { type: String, reflect: true }
+    side: { type: String, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
   };
   _triggerEl = null;
   constructor() {
     super();
     this.open = false;
     this.side = "right";
+    this.ariaLabel = null;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -149,6 +169,7 @@ var BdsDrawer = class extends i2 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("command", this._onCommand);
+    if (this.open) document.body.style.overflow = "";
   }
   updated(changed) {
     super.updated(changed);
@@ -172,8 +193,8 @@ var BdsDrawer = class extends i2 {
   }
   _onCommand = (e) => {
     const command = e.command;
-    if (command === "show-modal") this._openDrawer();
-    else if (command === "close") this._closeDrawer();
+    if (command === "--show-modal") this._openDrawer();
+    else if (command === "--close") this._closeDrawer();
   };
   _openDrawer() {
     if (this.open) return;
@@ -186,12 +207,12 @@ var BdsDrawer = class extends i2 {
     this.open = false;
     this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
   }
+  // Close on backdrop click. The dialog element's own box is only the visible
+  // panel — clicking the ::backdrop dispatches with e.target === the dialog
+  // itself, so this correctly ignores clicks (including keyboard-activated
+  // synthetic clicks at 0,0) on controls inside the panel.
   _handleBackdropClick(e) {
-    const dialog = this._dialog;
-    if (!dialog) return;
-    const rect = dialog.getBoundingClientRect();
-    const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
-    if (outside) this._closeDrawer();
+    if (e.target === this._dialog) this._closeDrawer();
   }
   _handleCancel(e) {
     e.preventDefault();
@@ -202,16 +223,25 @@ var BdsDrawer = class extends i2 {
     const dialog = this._dialog;
     if (!dialog) return;
     const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE));
-    if (focusable.length === 0) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
+    const slots = Array.from(dialog.querySelectorAll("slot"));
+    const slottedFocusable = slots.flatMap(
+      (slot) => slot.assignedElements({ flatten: true }).flatMap((el) => [
+        ...el.matches(FOCUSABLE) ? [el] : [],
+        ...Array.from(el.querySelectorAll(FOCUSABLE))
+      ])
+    );
+    const all = [...focusable, ...slottedFocusable];
+    if (all.length === 0) return;
+    const first = all[0];
+    const last = all[all.length - 1];
+    const active = this.shadowRoot?.activeElement ?? document.activeElement;
     if (e.shiftKey) {
-      if (document.activeElement === first) {
+      if (active === first) {
         e.preventDefault();
         last.focus();
       }
     } else {
-      if (document.activeElement === last) {
+      if (active === last) {
         e.preventDefault();
         first.focus();
       }
@@ -222,12 +252,14 @@ var BdsDrawer = class extends i2 {
       <dialog
         class="drawer"
         aria-modal="true"
+        aria-label=${this.ariaLabel ?? A}
+        aria-labelledby=${this.ariaLabel ? A : "title"}
         @click=${this._handleBackdropClick}
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}
       >
         <div class="header">
-          <span class="title"><slot name="title"></slot></span>
+          <span class="title" id="title"><slot name="title"></slot></span>
           <button
             type="button"
             class="close-button"

package/dist/web-components/{chunk-6I2DBFQ7.js → chunk-HGFCJXOQ.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-collapsible.ts
 var BdsCollapsible = 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;
     }
@@ -72,7 +82,9 @@ var BdsCollapsible = class extends i2 {
 
     .content {
       padding: var(--bds-space_m);
-      background-color: var(--collapsible_content-bg, var(--bds-color_bg));
+      /* React counterpart leaves the content panel transparent; keep the override
+         hook for consumers but default it to match, not to --bds-color_bg. */
+      background-color: var(--collapsible_content-bg, transparent);
       color: var(--collapsible_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
@@ -105,18 +117,37 @@ var BdsCollapsible = class extends i2 {
         }
       }
     }
+    if (changed.has("open") && this.open && this.name) {
+      this._closeOtherGroupMembers();
+    }
   }
-  _onToggle(e) {
-    const details = e.currentTarget;
-    this.open = details.open;
+  _closeOtherGroupMembers() {
+    const groupName = this.name;
+    document.querySelectorAll("bds-collapsible").forEach((el) => {
+      if (el !== this && el.name === groupName && el.open) {
+        el._setOpen(false);
+      }
+    });
+  }
+  // State-guarded setter: returns early once already in the target state so a
+  // native <details> "toggle" event re-fired by the browser after a script-driven
+  // attribute change (see the toggle event spec's coalescing note) never dispatches
+  // a redundant bds-toggle.
+  _setOpen(newOpen) {
+    if (this.open === newOpen) return;
+    this.open = newOpen;
     this.dispatchEvent(
       new CustomEvent("bds-toggle", {
         bubbles: true,
         composed: true,
-        detail: { open: this.open }
+        detail: { open: newOpen }
       })
     );
   }
+  _onToggle(e) {
+    const details = e.currentTarget;
+    this._setOpen(details.open);
+  }
   render() {
     return T`
       <details

package/dist/web-components/{chunk-YLVTEY23.js → chunk-HRD3NOA3.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-toast-provider.ts
 var BdsToastProvider = 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: contents;
     }
@@ -15,8 +25,8 @@ var BdsToastProvider = class extends i2 {
       /* Reset UA popover defaults */
       position: fixed;
       inset: unset;
-      bottom: var(--bds-space_xl, 2rem);
-      right: var(--bds-space_xl, 2rem);
+      inset-block-end: var(--bds-space_xl, 2rem);
+      inset-inline-end: var(--bds-space_xl, 2rem);
       display: flex;
       flex-direction: column;
       gap: var(--bds-space_m, 1rem);
@@ -27,34 +37,36 @@ var BdsToastProvider = class extends i2 {
 
     .toast {
       padding: var(--bds-space_m) var(--bds-space_l);
-      background-color: var(--toast_color, var(--bds-color_bg));
-      color: var(--toast_on-color, var(--bds-color_on-bg));
-      border-radius: var(--bds-border_radius--s);
-      box-shadow: var(--bds-shadow_s);
+      /* Layered cascade: public overrides (--toast_color, --toast_on-color) win
+         over per-variant defaults. Variants write to the inner --toast_*--variant slot. */
+      background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
+      color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
+      border-radius: var(--toast_radius, var(--bds-border_radius--s));
+      box-shadow: var(--toast_shadow, var(--bds-shadow_s));
       display: flex;
       align-items: center;
       gap: var(--bds-space_m);
-      min-width: 300px;
+      min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
     }
 
     .toast.--variant_success {
-      --toast_color:    var(--bds-color_success);
-      --toast_on-color: var(--bds-color_on-success);
+      --toast_color--variant:    var(--toast_color--success, var(--bds-color_success));
+      --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
     }
 
     .toast.--variant_warning {
-      --toast_color:    var(--bds-color_warning);
-      --toast_on-color: var(--bds-color_on-warning);
+      --toast_color--variant:    var(--toast_color--warning, var(--bds-color_warning));
+      --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
     }
 
     .toast.--variant_info {
-      --toast_color:    var(--bds-color_bg--subtle);
-      --toast_on-color: var(--bds-color_on-bg--subtle);
+      --toast_color--variant:    var(--toast_color--info, var(--bds-color_bg--subtle));
+      --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
     }
 
     .toast.--variant_error {
-      --toast_color:    var(--bds-color_error);
-      --toast_on-color: var(--bds-color_on-error);
+      --toast_color--variant:    var(--toast_color--error, var(--bds-color_error));
+      --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
     }
 
     .message {
@@ -62,22 +74,35 @@ var BdsToastProvider = class extends i2 {
     }
 
     .close {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      width: 1.25rem;
-      height: 1.25rem;
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
       padding: 0;
       background: none;
       border: none;
       cursor: pointer;
-      color: var(--toast_on-color);
+      color: currentcolor;
+    }
+
+    /* Expands the hit area to >=44px (WCAG 2.5.5) without growing the visible icon. */
+    .close::after {
+      content: '';
+      position: absolute;
+      inset: -0.75rem;
+    }
+
+    .close:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .close svg {
-      width: 1rem;
-      height: 1rem;
+      inline-size: 1rem;
+      block-size: 1rem;
     }
   `;
   static properties = {
@@ -97,11 +122,18 @@ var BdsToastProvider = class extends i2 {
   }
   // Sync the popover's top-layer visibility with the toast queue —
   // mirrors Toast.tsx's useEffect([toasts.length]).
+  // Both showPopover() and hidePopover() throw an InvalidStateError when called
+  // in a redundant state (e.g. showPopover() while a 2nd/3rd toast is queued and
+  // the popover is already open, or hidePopover() before any toast has shown) —
+  // catch silently in both directions.
   updated() {
     const container = this.shadowRoot?.querySelector("[popover]");
     if (!container) return;
     if (this._toasts.length > 0) {
-      container.showPopover?.();
+      try {
+        container.showPopover?.();
+      } catch {
+      }
     } else {
       try {
         container.hidePopover?.();