@boostdev/design-system-components 2.8.0 → 2.11.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-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-SOQQ7RVJ.js → chunk-IPGHUCJT.js}

@@ -17,10 +17,26 @@ var VARIANT_TAG = {
 };
 var BdsTypography = 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;
     }
 
+    /* component="span" (or any inline tag) should flow inline, matching the
+       React counterpart which has no host wrapper to force block layout. */
+    :host([component='span']) {
+      display: inline;
+    }
+
     .typography {
       margin: 0;
       font-family: var(--bds-font_family--body);
@@ -29,38 +45,38 @@ var BdsTypography = class extends i2 {
 
     .typography.--h1 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-1);
+      font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
       font-weight: var(--bds-font_weight--bold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h2 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-2);
+      font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h3 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-3);
+      font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--body {
-      font-size: var(--bds-font_size--body);
+      font-size: var(--typography_font-size--body, var(--bds-font_size--body));
       line-height: var(--bds-font_line-height--body);
     }
 
     .typography.--body_s {
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
       line-height: var(--bds-font_line-height--body);
     }
   `;
   static properties = {
     variant: { type: String, reflect: true },
-    component: { type: String }
+    component: { type: String, reflect: true }
   };
   constructor() {
     super();
@@ -73,9 +89,8 @@ var BdsTypography = class extends i2 {
   }
   render() {
     const tag = s(this._tag);
-    const variant = s(this.variant);
     return u`
-      <${tag} class="typography --${variant}">
+      <${tag} class="typography --${this.variant}">
         <slot></slot>
       </${tag}>
     `;