@boostdev/design-system-components 2.8.0 → 2.12.0

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);
     }
 

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

@@ -0,0 +1,174 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tooltip.ts
+var BdsTooltip = 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-flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: var(--bds-z-index_popover);
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+      background-color: var(--tooltip_bg, var(--bds-color_on-bg));
+      color: var(--tooltip_text, var(--bds-color_bg));
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+      white-space: nowrap;
+      pointer-events: none;
+
+      /* Hidden by default */
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Show on hover and keyboard focus */
+    :host(:hover) .tooltip,
+    :host(:focus-within) .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Placement: top (default) */
+    .tooltip.--placement_top {
+      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: bottom */
+    .tooltip.--placement_bottom {
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: left */
+    .tooltip.--placement_left {
+      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Placement: right */
+    .tooltip.--placement_right {
+      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    content: { type: String },
+    placement: { type: String, reflect: true }
+  };
+  _uid = Math.random().toString(36).slice(2, 8);
+  /** Visually-hidden light-DOM node holding `content`, referenced by the trigger's aria-describedby. */
+  _descEl = null;
+  constructor() {
+    super();
+    this.content = "";
+    this.placement = "top";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(this._syncDescription);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownDescription();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("content")) {
+      this._syncDescription();
+    }
+  }
+  get _descId() {
+    return `bds-tooltip-desc-${this._uid}`;
+  }
+  /** Ensures the hidden description node exists (or is torn down) and re-wires the trigger. */
+  _syncDescription = () => {
+    if (!this.isConnected) return;
+    if (!this.content) {
+      this._teardownDescription();
+      return;
+    }
+    let desc = this._descEl;
+    if (!desc) {
+      desc = document.createElement("span");
+      desc.id = this._descId;
+      desc.style.cssText = "position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;";
+      this.append(desc);
+      this._descEl = desc;
+    }
+    desc.textContent = this.content;
+    this._describeTrigger();
+  };
+  _describeTrigger() {
+    const id = this._descId;
+    for (const el of Array.from(this.children)) {
+      if (el === this._descEl) continue;
+      const existing = el.getAttribute("aria-describedby");
+      const ids = existing ? existing.split(/\s+/).filter(Boolean) : [];
+      if (!ids.includes(id)) {
+        el.setAttribute("aria-describedby", [...ids, id].join(" "));
+      }
+    }
+  }
+  _teardownDescription() {
+    const id = this._descId;
+    for (const el of Array.from(this.children)) {
+      if (el === this._descEl) continue;
+      const existing = el.getAttribute("aria-describedby");
+      if (!existing) continue;
+      const ids = existing.split(/\s+/).filter((part) => part && part !== id);
+      if (ids.length) {
+        el.setAttribute("aria-describedby", ids.join(" "));
+      } else {
+        el.removeAttribute("aria-describedby");
+      }
+    }
+    this._descEl?.remove();
+    this._descEl = null;
+  }
+  render() {
+    return T`
+      <slot @slotchange=${this._syncDescription}></slot>
+      <span
+        class="tooltip --placement_${this.placement}"
+        role="tooltip"
+        aria-hidden="true"
+      >${this.content}</span>
+    `;
+  }
+};
+customElements.define("bds-tooltip", BdsTooltip);
+
+export {
+  BdsTooltip
+};

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

@@ -0,0 +1,90 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-description-list.ts
+var BdsDescriptionList = 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;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      padding: 0;
+      font-size: var(--bds-font_size--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    /* Style slotted dt/dd elements. Stacked spacing is asymmetric: a tight
+       xxs gap between a term and its own detail(s), and a looser "s" gap
+       before the next term — mirrors DescriptionList.module.css's
+       .group (xxs) nested inside .list (s), without a wrapper element. */
+    ::slotted(dt) {
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin: 0;
+      margin-block-start: var(--bds-space_s);
+    }
+
+    ::slotted(dt:first-child) {
+      margin-block-start: 0;
+    }
+
+    ::slotted(dd) {
+      margin: 0;
+      margin-block-start: var(--bds-space_xxs);
+      color: var(--bds-color_on-bg);
+    }
+
+    /* Inline layout: pair each dt/dd side by side. <slot> defaults to
+       display: contents, so slotted dt/dd become direct grid items of
+       .list and the browser's row-by-row auto-placement pairs each term
+       with the detail(s) that follow it. */
+    :host([layout='inline']) .list {
+      display: grid;
+      grid-template-columns: minmax(8rem, 1fr) 2fr;
+      gap: var(--bds-space_xs);
+      align-items: baseline;
+    }
+
+    :host([layout='inline']) ::slotted(dt) {
+      grid-column: 1;
+      margin-block-start: 0;
+    }
+
+    :host([layout='inline']) ::slotted(dd) {
+      grid-column: 2;
+      margin-block-start: 0;
+    }
+  `;
+  static properties = {
+    layout: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.layout = "stacked";
+  }
+  render() {
+    return T`<dl class="list"><slot></slot></dl>`;
+  }
+};
+customElements.define("bds-description-list", BdsDescriptionList);
+
+export {
+  BdsDescriptionList
+};