@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/{chunk-YLVTEY23.js → chunk-BTCMJQKB.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)));
+      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?.();

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

@@ -0,0 +1,245 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/if-defined.js
+var o = (o2) => o2 ?? A;
+
+// src/web-components/interaction/form/bds-form-input.ts
+var BdsFormInput = 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 {
+      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);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      border: var(--formInput_border, var(--input_border, none));
+      /* deprecated: --formInput_border-color kept as a legacy override for the frame colour */
+      --bdc_color: var(--formInput_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
+
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--input_shadow, var(--bdc-outline_shadow)));
+      background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .wrapper {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .wrapper:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .wrapper:focus-within {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .input {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      background: transparent;
+      padding: var(--bds-space_s);
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--formInput_color, var(--input_color, var(--bds-color_on-bg)));
+      outline: none;
+    }
+
+    .input::placeholder {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .input:focus-visible {
+      outline: none;
+    }
+
+    .wrapper:focus-within:has(:focus-visible) {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
+    }
+
+    .prefix,
+    .suffix {
+      display: flex;
+      align-items: center;
+      color: var(--bds-color_on-bg--subtle);
+      flex-shrink: 0;
+    }
+
+    .prefix {
+      padding-inline-start: var(--bds-space_s);
+    }
+
+    .suffix {
+      padding-inline-end: var(--bds-space_s);
+    }
+
+    .prefix:empty,
+    .suffix:empty {
+      display: none;
+    }
+
+    .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;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.type = "text";
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.disabled = false;
+    this.required = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value);
+    }
+    if (changed.has("required") || changed.has("value")) {
+      if (this.required && !this.value) {
+        this._internals.setValidity?.({ valueMissing: true }, "Required");
+      } else {
+        this._internals.setValidity?.({});
+      }
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.("");
+  }
+  _handleInput(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("bds-input", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleChange(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const id = `bds-form-input-${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`
+            <label class="label" for=${id}>
+              ${this.label}
+              ${this.required ? T`<span class="required" aria-hidden="true">*</span>` : ""}
+            </label>
+          ` : ""}
+      <div class="wrapper">
+        <span class="prefix"><slot name="prefix"></slot></span>
+        <input
+          id=${id}
+          class="input"
+          type=${this.type}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${o(describedBy)}
+          aria-required=${this.required ? "true" : "false"}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        />
+        <span class="suffix"><slot name="suffix"></slot></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>` : ""}
+    `;
+  }
+};
+customElements.define("bds-form-input", BdsFormInput);
+
+export {
+  BdsFormInput
+};
+/*! Bundled license information:
+
+lit-html/node/directives/if-defined.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

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

@@ -0,0 +1,14 @@
+import {
+  BdsButtonContainer
+} from "./chunk-4A2YYTYN.js";
+
+// src/web-components/ui/bds-button-group.ts
+var BdsButtonGroup = class extends BdsButtonContainer {
+};
+if (!customElements.get("bds-button-group")) {
+  customElements.define("bds-button-group", BdsButtonGroup);
+}
+
+export {
+  BdsButtonGroup
+};

package/dist/web-components/{chunk-PC3IOQAH.js → chunk-DV5T43ZC.js}

@@ -8,6 +8,16 @@ import {
 // src/web-components/ui/bds-card.ts
 var BdsCard = 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;
     }
@@ -24,7 +34,6 @@ var BdsCard = class extends i2 {
       text-align: inherit;
       font: inherit;
       border: none;
-      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -38,18 +47,26 @@ var BdsCard = class extends i2 {
       box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
     }
 
-    .card.--text-start  { text-align: start; }
-    .card.--text-center { text-align: center; }
-    .card.--text-end    { text-align: end; }
-
     .card.--clickable {
       cursor: pointer;
       display: block;
     }
 
+    /* Padding variants — consumers can override the resolved value via --card_padding
+       (applies whichever scale token the active padding variant resolves to). */
+    .card.--padding-none         { padding: var(--card_padding, 0); }
+    .card.--padding-small        { padding: var(--card_padding, var(--bds-space_s)); }
+    .card.--padding-medium       { padding: var(--card_padding, var(--bds-space_m)); }
+    .card.--padding-large        { padding: var(--card_padding, var(--bds-space_l)); }
+    .card.--padding-extra-large  { padding: var(--card_padding, var(--bds-space_xl)); }
+
+    .card.--text-start  { text-align: start; }
+    .card.--text-center { text-align: center; }
+    .card.--text-end    { text-align: end; }
+
     .card.--clickable:focus-visible {
-      outline: 2px solid var(--color_focus, currentcolor);
-      outline-offset: 2px;
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .card.--clickable:active {
@@ -70,6 +87,7 @@ var BdsCard = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
+    padding: { type: String, reflect: true },
     textAlign: { type: String, attribute: "text-align", reflect: true },
     clickable: { type: Boolean, reflect: true },
     ariaLabel: { type: String, attribute: "aria-label" }
@@ -77,6 +95,7 @@ var BdsCard = class extends i2 {
   constructor() {
     super();
     this.variant = "default";
+    this.padding = "medium";
     this.textAlign = "start";
     this.clickable = false;
     this.ariaLabel = "";
@@ -88,6 +107,7 @@ var BdsCard = class extends i2 {
     const classes = [
       "card",
       `--${this.variant}`,
+      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? "--clickable" : ""
     ].filter(Boolean).join(" ");

package/dist/web-components/{chunk-2QA62WCQ.js → chunk-EF7IVYTY.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/ui/bds-skeleton.ts
 var BdsSkeleton = 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;
     }

package/dist/web-components/{chunk-L3XHOMN6.js → chunk-F3ZDNHZZ.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-tabs.ts
 var BdsTabs = 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: flex;
       flex-direction: column;
@@ -20,6 +30,7 @@ var BdsTabs = class extends i2 {
   `;
   _activeIndex = 0;
   _mo = null;
+  _uid = Math.random().toString(36).slice(2, 8);
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("bds-tab-select", this._handleTabSelect);
@@ -44,7 +55,7 @@ var BdsTabs = class extends i2 {
     return [...this.querySelectorAll("bds-tab-panel")];
   }
   get _enabledIndexes() {
-    return this._tabs.map((tab, i3) => ({ tab, i: i3 })).filter(({ tab }) => !tab.disabled).map(({ i: i3 }) => i3);
+    return this._tabs.map((tab, i3) => ({ tab, i: i3 })).filter(({ tab }) => !tab.disabled && !tab.hasAttribute("disabled")).map(({ i: i3 }) => i3);
   }
   _applyState() {
     const tabs = this._tabs;
@@ -52,8 +63,20 @@ var BdsTabs = class extends i2 {
     if (this._activeIndex >= tabs.length) {
       this._activeIndex = Math.max(0, tabs.length - 1);
     }
+    if (this._enabledIndexes.length && !this._enabledIndexes.includes(this._activeIndex)) {
+      this._activeIndex = this._enabledIndexes[0];
+    }
     tabs.forEach((tab, i3) => {
+      const panel = panels[i3];
       tab.selected = i3 === this._activeIndex;
+      tab.setAttribute("role", "tab");
+      if (!tab.id) tab.id = `bds-tabs-${this._uid}-tab-${i3}`;
+      if (panel) {
+        if (!panel.id) panel.id = `bds-tabs-${this._uid}-panel-${i3}`;
+        tab.setAttribute("aria-controls", panel.id);
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-labelledby", tab.id);
+      }
     });
     panels.forEach((panel, i3) => {
       if (i3 === this._activeIndex) {
@@ -72,6 +95,8 @@ var BdsTabs = class extends i2 {
     }
   };
   _handleKeydown = (e) => {
+    const origin = e.target;
+    if (!origin?.closest("bds-tab")) return;
     const enabled = this._enabledIndexes;
     if (!enabled.length) return;
     const pos = enabled.indexOf(this._activeIndex);