@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/{chunk-KUI55GFB.js → chunk-JUPCZVVW.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;
     }
@@ -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-JV5QT2OU.js

@@ -0,0 +1,146 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-radio-group.ts
+var BdsRadioGroup = 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;
+    }
+
+    fieldset {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .legend {
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--medium);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xs);
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xs);
+      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 = {
+    label: { type: String },
+    name: { type: String, reflect: true },
+    error: { type: String },
+    hint: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true }
+  };
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this.label = "";
+    this.name = "";
+    this.disabled = false;
+    this.required = false;
+  }
+  _propagateName = () => {
+    if (!this.name) return;
+    this.querySelectorAll("bds-radio").forEach((radio) => {
+      radio.setAttribute("name", this.name);
+    });
+  };
+  /**
+   * Propagates `disabled` to slotted `<bds-radio>` elements. Only radios that were
+   * enabled before the group disabled them are re-enabled when the group re-enables —
+   * a radio individually marked `disabled` in markup stays disabled.
+   */
+  _propagateDisabled = () => {
+    this.querySelectorAll("bds-radio").forEach((radio) => {
+      const el = radio;
+      if (this.disabled) {
+        if (!el.hasAttribute("disabled")) {
+          el.setAttribute("data-bds-group-disabled", "");
+        }
+        el.setAttribute("disabled", "");
+      } else if (el.hasAttribute("data-bds-group-disabled")) {
+        el.removeAttribute("disabled");
+        el.removeAttribute("data-bds-group-disabled");
+      }
+    });
+  };
+  _propagateToRadios = () => {
+    this._propagateName();
+    this._propagateDisabled();
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(this._propagateToRadios);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("name") || changed.has("disabled")) {
+      this._propagateToRadios();
+    }
+  }
+  render() {
+    const errorId = `bds-radio-group-${this._uid}-error`;
+    const hintId = `bds-radio-group-${this._uid}-hint`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    return T`
+      <fieldset
+        ?disabled=${this.disabled}
+        aria-required=${this.required ? "true" : A}
+        aria-describedby=${describedBy ?? A}
+      >
+        <legend class="legend">
+          ${this.label}
+          ${this.required ? T`<span class="required" aria-hidden="true"> *</span>` : ""}
+        </legend>
+        <div class="items">
+          <slot @slotchange=${this._propagateToRadios}></slot>
+        </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>` : ""}
+      </fieldset>
+    `;
+  }
+};
+customElements.define("bds-radio-group", BdsRadioGroup);
+
+export {
+  BdsRadioGroup
+};

package/dist/web-components/{chunk-3GFWLSLS.js → chunk-KA3VPKMY.js}

@@ -8,10 +8,20 @@ import {
 var BdsCheckbox = 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: inline-flex;
       align-items: flex-start;
-      gap: var(--bds-space_xs);
+      gap: var(--checkbox_gap, var(--bds-space_m));
       cursor: pointer;
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
@@ -26,16 +36,18 @@ var BdsCheckbox = class extends i2 {
 
     .input {
       --inputSize: calc(var(--bds-space_s) * 2);
-      margin-block-start: 0.25em;
+      margin-block-start: var(--checkbox_offset, 0.25em);
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: var(--checkbox_border-color, currentcolor);
+      /* --checkbox_border-color is a deprecated alias — prefer --checkbox_color (matches React) */
+      color: var(--checkbox_color, var(--checkbox_border-color, var(--bds-color_on-bg)));
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
-      border: none;
+      border: var(--checkbox_border, none);
       appearance: none;
       background-color: var(--checkbox_color_bg, var(--bds-color_bg));
       cursor: pointer;
@@ -60,11 +72,19 @@ var BdsCheckbox = class extends i2 {
       transform: rotate(45deg);
     }
 
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
     label {
       cursor: pointer;
       flex: 1;
@@ -75,7 +95,8 @@ var BdsCheckbox = class extends i2 {
     value: { type: String },
     checked: { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true }
+    disabled: { type: Boolean, reflect: true },
+    error: { type: Boolean, reflect: true }
   };
   _internals;
   _uid = Math.random().toString(36).slice(2, 8);
@@ -87,13 +108,14 @@ var BdsCheckbox = class extends i2 {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.error = false;
   }
   updated(changed) {
     super.updated(changed);
     if (changed.has("checked") || changed.has("value")) {
       this._internals.setFormValue?.(this.checked ? this.value : null);
     }
-    if (changed.has("required")) {
+    if (changed.has("required") || changed.has("checked")) {
       if (this.required && !this.checked) {
         this._internals.setValidity?.({ valueMissing: true }, "Required");
       } else {
@@ -118,6 +140,7 @@ var BdsCheckbox = class extends i2 {
         .checked=${this.checked}
         ?required=${this.required}
         ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
         @change=${this._handleChange}
       />
       <label for=${id}><slot></slot></label>

package/dist/web-components/{chunk-CR5PGUHV.js → chunk-KJGRFDFI.js}

@@ -8,12 +8,27 @@ import {
 // src/web-components/ui/bds-link.ts
 var BdsLink = 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: inline;
     }
 
+    /* Layered cascade (mirrors Link.module.css): public override (--link_color)
+       wins over per-variant defaults. Variants write to the inner
+       --link_color--variant slot. Resting and hover have INDEPENDENT public
+       tokens — setting --link_color on an ancestor themes only resting;
+       setting --link_color-hover themes only hover. */
     .link {
-      color: var(--link_color, var(--bds-color_interactive_on-bg));
+      color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
       text-decoration: underline;
       text-underline-offset: 0.2em;
       transition: var(--bds-animation_transition);
@@ -28,23 +43,23 @@ var BdsLink = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .link:hover {
-        --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
+        color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
       }
     }
 
-    .link.--variant_default {
-      --link_color:       var(--bds-color_interactive_on-bg);
-      --link_color-hover: var(--bds-color_blue--strong);
+    .--variant_default {
+      --link_color--variant:       var(--link_color--default, var(--bds-color_interactive_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
     }
 
-    .link.--variant_subtle {
-      --link_color:       var(--bds-color_on-bg);
-      --link_color-hover: var(--bds-color_interactive_on-bg);
+    .--variant_subtle {
+      --link_color--variant:       var(--link_color--subtle, var(--bds-color_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
     }
 
-    .link.--variant_standalone {
-      --link_color:       var(--bds-color_interactive_on-bg);
-      --link_color-hover: var(--bds-color_blue--strong);
+    .--variant_standalone {
+      --link_color--variant:       var(--link_color--standalone, var(--bds-color_interactive_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
       display: inline-flex;
       align-items: center;
       gap: var(--bds-space_xxs);

package/dist/web-components/{chunk-PY62FTRW.js → chunk-KZPRFY5P.js}

@@ -8,6 +8,16 @@ import {
 var BdsFileInput = 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;
     }
@@ -22,12 +32,14 @@ var BdsFileInput = class extends i2 {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: var(--bds-space_s);
-      padding: var(--bds-space_xl);
-      border-radius: var(--bds-border_radius--m);
-      border: 2px dashed var(--file-input_border-color, var(--bds-color_bg--subtle));
-      background-color: var(--file-input_color_bg, var(--bds-color_bg));
-      color: var(--bds-color_on-bg);
+      gap: var(--bds-space_xs);
+      padding: var(--bds-space_l) var(--bds-space_m);
+      border: 2px dashed currentcolor;
+      border-radius: var(--bds-border_radius--s);
+      /* --file-input_color_bg is a deprecated alias — React declares no base background (transparent is its effective default) */
+      background-color: var(--file-input_color_bg, transparent);
+      /* --fileInput_color drives the currentcolor dashed border (matches React) */
+      color: var(--fileInput_color, var(--bds-color_on-bg));
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       cursor: pointer;
@@ -35,17 +47,26 @@ var BdsFileInput = class extends i2 {
       transition: var(--bds-animation_transition);
     }
 
+    .zone:focus-within {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      /* --file-input_border-color is a deprecated alias — prefer --fileInput_border-color (matches React) */
+      border-color: var(--fileInput_border-color, var(--file-input_border-color, currentcolor));
+    }
+
     .zone.--dragging {
-      border-color: var(--bds-color_interactive);
-      background-color: var(--bds-color_bg--subtle);
+      border-color: currentcolor;
+      background-color: rgb(from currentcolor r g b / 8%);
     }
 
     .zone-input {
       position: absolute;
-      opacity: 0;
-      inline-size: 0;
-      block-size: 0;
+      inline-size: 1px;
+      block-size: 1px;
       overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
 
     .zone-label {
@@ -74,8 +95,8 @@ var BdsFileInput = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .zone:hover {
-        border-color: var(--bds-color_interactive);
-        background-color: var(--bds-color_bg--subtle);
+        border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
+        background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
       }
     }
   `;
@@ -115,8 +136,14 @@ var BdsFileInput = class extends i2 {
   _handleInputChange(e) {
     this._handleFiles(e.target.files);
   }
-  _handleClick() {
-    this.shadowRoot?.querySelector("input")?.click();
+  _isFileAccepted(file) {
+    if (!this.accept) return true;
+    return this.accept.split(",").some((token) => {
+      const t = token.trim();
+      if (t.startsWith(".")) return file.name.toLowerCase().endsWith(t.toLowerCase());
+      if (t.endsWith("/*")) return file.type.startsWith(t.slice(0, -1));
+      return file.type === t;
+    });
   }
   _handleDragover(e) {
     e.preventDefault();
@@ -133,28 +160,26 @@ var BdsFileInput = class extends i2 {
     e.preventDefault();
     this._isDragging = false;
     this.requestUpdate();
-    this._handleFiles(e.dataTransfer?.files ?? null);
+    if (this.disabled) return;
+    const dropped = e.dataTransfer?.files;
+    if (!dropped) return;
+    const accepted = Array.from(dropped).filter((file) => this._isFileAccepted(file));
+    const input = this.shadowRoot?.querySelector("input");
+    if (input && typeof DataTransfer !== "undefined") {
+      const dt = new DataTransfer();
+      accepted.forEach((file) => dt.items.add(file));
+      input.files = dt.files;
+      this._handleFiles(input.files);
+    } else {
+      this._handleFiles(accepted);
+    }
   }
   render() {
     const id = `bds-file-${this._uid}`;
     return T`
-      <input
-        id=${id}
-        type="file"
-        class="zone-input"
-        name=${this.name}
-        accept=${this.accept}
-        ?multiple=${this.multiple}
-        ?disabled=${this.disabled}
-        @change=${this._handleInputChange}
-      />
-      <div
+      <label
+        for=${id}
         class="zone ${this._isDragging ? "--dragging" : ""}"
-        role="button"
-        tabindex=${this.disabled ? "-1" : "0"}
-        aria-label="Upload file"
-        @click=${this._handleClick}
-        @keydown=${(e) => (e.key === "Enter" || e.key === " ") && this._handleClick()}
         @dragover=${this._handleDragover}
         @dragleave=${this._handleDragleave}
         @drop=${this._handleDrop}
@@ -168,7 +193,17 @@ var BdsFileInput = class extends i2 {
           <slot>Drag &amp; drop or click to browse</slot>
         </span>
         <span class="hint">${this.accept ? `Accepted: ${this.accept}` : "Any file type"}</span>
-      </div>
+        <input
+          id=${id}
+          type="file"
+          class="zone-input"
+          name=${this.name}
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this._handleInputChange}
+        />
+      </label>
     `;
   }
 };

package/dist/web-components/{chunk-X46KL5BK.js → chunk-LDIPCTRN.js}

@@ -8,6 +8,16 @@ import {
 // src/web-components/ui/bds-notification-banner.ts
 var BdsNotificationBanner = 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;
     }
@@ -71,10 +81,17 @@ var BdsNotificationBanner = class extends i2 {
       flex-shrink: 0;
       cursor: pointer;
       color: currentcolor;
+
+      /* WCAG 2.5.5: minimum 44x44px interactive area — the visible icon stays
+         1rem; the hit area grows around it via min-inline-size/min-block-size. */
+      min-inline-size: var(--banner_dismiss-size, 2.75rem);
+      min-block-size: var(--banner_dismiss-size, 2.75rem);
       border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
       border: var(--banner_dismiss-border, none);
       transition: var(--bds-animation_transition);
-      --bdc_color: var(--notification-banner_dismiss-border-color, currentcolor);
+      /* --notification-banner_dismiss-border-color kept as a deprecated alias;
+         --banner_dismiss-border-color matches the --banner_* token family. */
+      --bdc_color: var(--banner_dismiss-border-color, var(--notification-banner_dismiss-border-color, currentcolor));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }