@boostdev/design-system-components 2.8.0 → 2.12.0

package/dist/web-components/{chunk-UUKSDCYS.js → chunk-J3HVUIUH.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var BdsCombobox = 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;
       position: relative;
@@ -18,6 +29,15 @@ var BdsCombobox = class extends i2 {
       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);
+    }
+
     .wrapper {
       position: relative;
     }
@@ -27,8 +47,8 @@ var BdsCombobox = class extends i2 {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
-      padding-inline-end: var(--bds-space_xl);
-      border: none;
+      padding-inline-end: var(--bds-space_xxl);
+      border: var(--combobox_border, none);
       --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--full);
 
@@ -49,6 +69,14 @@ var BdsCombobox = class extends i2 {
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    :host([error]) .input:focus {
+      --bdc_color: var(--bdc_color--error);
+    }
+
     .chevron {
       position: absolute;
       inset-inline-end: var(--bds-space_s);
@@ -67,31 +95,39 @@ var BdsCombobox = class extends i2 {
 
     .listbox {
       position: absolute;
-      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: calc(100% + var(--bds-space_xxs));
       inset-inline-start: 0;
       inline-size: 100%;
       max-block-size: 15rem;
-      overflow-y: auto;
-      background-color: var(--combobox_list-bg, var(--bds-color_bg));
-      border-radius: var(--bds-border_radius--s);
-      box-shadow: var(--bds-shadow_m);
-      z-index: var(--combobox_z-index, 100);
-      padding-block: var(--bds-space_xs);
+      overflow-block: auto;
+      list-style: none;
+      margin: 0;
+      border: var(--combobox_listbox-border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+
+      border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
+      background-color: var(--combobox_color_bg, var(--bds-color_bg--strong, var(--bds-color_bg)));
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
+      z-index: var(--combobox_z-index, var(--bds-z-index_dropdown));
+      padding: var(--bds-space_xxs) 0;
     }
 
     .option {
       display: block;
-      padding: var(--bds-space_s) var(--bds-space_m);
+      padding: var(--bds-space_xs) var(--bds-space_m);
       cursor: pointer;
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
-      color: var(--bds-color_on-bg);
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
       transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .option:hover,
     .option[aria-selected='true'] {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
     }
 
     .option[aria-disabled='true'] {
@@ -100,7 +136,8 @@ var BdsCombobox = class extends i2 {
     }
 
     .option.--focused {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
       outline: none;
     }
 
@@ -110,15 +147,34 @@ var BdsCombobox = class extends i2 {
       font-size: var(--bds-font_size--body--s);
       color: var(--bds-color_on-bg--subtle);
     }
+
+    .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 },
     value: { type: String },
     options: { type: String },
     placeholder: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
     disabled: { type: Boolean, reflect: true }
   };
   _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
   _open = false;
   _query = "";
   _focusedIndex = -1;
@@ -129,6 +185,7 @@ var BdsCombobox = class extends i2 {
     this.value = "";
     this.options = "[]";
     this.placeholder = "";
+    this.label = "";
     this.disabled = false;
   }
   get _options() {
@@ -229,15 +286,28 @@ var BdsCombobox = class extends i2 {
   render() {
     const filtered = this._filtered;
     const inputValue = this._open ? this._query : this._displayLabel;
+    const id = `bds-combobox-${this._uid}`;
+    const listboxId = `${id}-listbox`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    const activeDescendant = this._focusedIndex >= 0 && this._focusedIndex < filtered.length ? `${id}-option-${this._focusedIndex}` : void 0;
     return T`
+      ${this.label ? T`<label class="label" for=${id}>${this.label}</label>` : ""}
       <div class="wrapper">
         <input
+          id=${id}
           type="text"
           class="input"
           role="combobox"
           aria-expanded=${this._open}
           aria-autocomplete="list"
           aria-haspopup="listbox"
+          aria-controls=${listboxId}
+          aria-activedescendant=${activeDescendant ?? A}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${describedBy ?? A}
+          autocomplete="off"
           name=${this.name}
           placeholder=${this.placeholder}
           .value=${inputValue}
@@ -253,9 +323,10 @@ var BdsCombobox = class extends i2 {
           </svg>
         </span>
         ${this._open ? T`
-          <ul class="listbox" role="listbox" aria-label="Options">
-            ${filtered.length === 0 ? T`<li class="no-results">No results</li>` : filtered.map((opt, i3) => T`
+          <ul id=${listboxId} class="listbox" role="listbox" aria-label="Options">
+            ${filtered.length === 0 ? T`<li class="no-results" role="presentation">No results</li>` : filtered.map((opt, i3) => T`
                   <li
+                    id="${id}-option-${i3}"
                     class="option ${i3 === this._focusedIndex ? "--focused" : ""}"
                     role="option"
                     aria-selected=${opt.value === this.value}
@@ -269,6 +340,7 @@ var BdsCombobox = class extends i2 {
           </ul>
         ` : ""}
       </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>` : ""}
     `;
   }
 };

package/dist/web-components/{chunk-ARMKC4BQ.js → chunk-JH6LQKLK.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var BdsSelect = 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;
     }
@@ -17,6 +28,20 @@ var BdsSelect = class extends i2 {
       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: block;
@@ -26,10 +51,10 @@ var BdsSelect = class extends i2 {
       inline-size: 100%;
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
-      padding: var(--bds-space_s);
-      padding-inline-end: var(--bds-space_xl);
-      border: none;
-      --bdc_color: var(--select_border-color, currentcolor);
+      padding: var(--select_padding, var(--bds-space_s));
+      padding-inline-end: var(--select_padding-end, var(--bds-space_xxl));
+      border: var(--select_border, none);
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--full);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));
@@ -38,7 +63,8 @@ var BdsSelect = class extends i2 {
       color: var(--select_color, var(--bds-color_on-bg));
       appearance: none;
       cursor: pointer;
-      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .select:focus {
@@ -50,6 +76,25 @@ var BdsSelect = class extends i2 {
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .select {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .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;
+    }
+
     .chevron {
       position: absolute;
       inset-inline-end: var(--bds-space_s);
@@ -71,10 +116,14 @@ var BdsSelect = class extends i2 {
     value: { type: String },
     options: { type: String },
     placeholder: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
     required: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true }
   };
   _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -82,6 +131,7 @@ var BdsSelect = class extends i2 {
     this.value = "";
     this.options = "[]";
     this.placeholder = "";
+    this.label = "";
     this.required = false;
     this.disabled = false;
   }
@@ -104,17 +154,38 @@ var BdsSelect = class extends i2 {
   }
   _handleChange(e) {
     this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
   }
   render() {
     const opts = this._options;
+    const id = `bds-select-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    const hostAriaLabel = this.getAttribute("aria-label");
     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">
         <select
+          id=${id}
           class="select"
           name=${this.name}
           .value=${this.value}
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-required=${this.required ? "true" : "false"}
+          aria-describedby=${describedBy ?? ""}
+          aria-label=${this.label ? A : hostAriaLabel ?? A}
           @change=${this._handleChange}
         >
           ${this.placeholder ? T`
@@ -134,6 +205,7 @@ var BdsSelect = class extends i2 {
           </svg>
         </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>` : ""}
     `;
   }
 };

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

@@ -0,0 +1,120 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-table.ts
+var tableLightDomCss = `
+  @layer boostdev.component {
+    bds-table > table thead {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    bds-table > table th {
+      padding: var(--bds-space_s) var(--bds-space_m);
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body--s);
+      text-align: start;
+      color: var(--bds-color_on-bg--subtle);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      white-space: nowrap;
+    }
+
+    bds-table > table td {
+      padding: var(--bds-space_s) var(--bds-space_m);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      vertical-align: middle;
+    }
+
+    bds-table > table tr:last-child td {
+      border-block-end: none;
+    }
+
+    bds-table[sticky-header] > table thead th {
+      position: sticky;
+      inset-block-start: 0;
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      bds-table > table tbody tr:hover {
+        background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+  }
+`;
+if (!("__bdsTableStylesInjected" in document)) {
+  Object.defineProperty(document, "__bdsTableStylesInjected", { value: true });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(tableLightDomCss);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets ?? [], sheet];
+}
+var BdsTable = 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;
+    }
+
+    .wrapper {
+      overflow-inline: auto;
+      -webkit-overflow-scrolling: touch;
+      border: var(--table_border, none);
+      --bdc_color: var(--bds-color_bg--subtle);
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--table_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    }
+
+    .wrapper:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    ::slotted(table) {
+      inline-size: 100%;
+      border-collapse: collapse;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+  `;
+  static properties = {
+    stickyHeader: { type: Boolean, attribute: "sticky-header", reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
+  };
+  constructor() {
+    super();
+    this.stickyHeader = false;
+    this.ariaLabel = null;
+  }
+  render() {
+    return T`
+      <div
+        class="wrapper"
+        tabindex="0"
+        role=${this.ariaLabel ? "region" : A}
+        aria-label=${this.ariaLabel ?? A}
+        style=${this.stickyHeader ? "max-block-size: 100%; overflow-block: auto;" : ""}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-table", BdsTable);
+
+export {
+  BdsTable
+};

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