@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -0,0 +1,392 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/components/layout/Grid/masonry.ts
+var NAMED_SPAN_VAR = {
+  "three-quarters": "--bds-grid_columns-75",
+  "two-thirds": "--bds-grid_columns-66",
+  half: "--bds-grid_columns-50",
+  "one-third": "--bds-grid_columns-33",
+  "one-quarter": "--bds-grid_columns-25"
+};
+var NAMED_SPAN_FRACTION = {
+  "three-quarters": 0.75,
+  "two-thirds": 2 / 3,
+  half: 0.5,
+  "one-third": 1 / 3,
+  "one-quarter": 0.25
+};
+function resolvePreferredColumns(container, value, totalCols) {
+  if (value === "full") return totalCols;
+  if (typeof value === "number") return Math.max(1, Math.min(totalCols, value));
+  const varName = NAMED_SPAN_VAR[value];
+  const raw = window.getComputedStyle(container).getPropertyValue(varName).trim();
+  const n = parseInt(raw, 10);
+  if (Number.isFinite(n) && n > 0) return Math.min(totalCols, n);
+  return Math.max(1, Math.round(totalCols * NAMED_SPAN_FRACTION[value]));
+}
+var TARGET_MAX_IMPLICIT_ROWS = 5e3;
+function supportsNativeMasonry() {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
+  return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
+}
+var ORIGINAL_COL_ATTR = "data-bds-masonry-original-column";
+var LAST_COL_ATTR = "data-bds-masonry-col";
+var LAST_SPAN_ATTR = "data-bds-masonry-span";
+var UNIT_ATTR = "data-bds-masonry-unit";
+function applyMasonryLayout(container, rawChildren, options = {}) {
+  const cs = window.getComputedStyle(container);
+  const targetGap = parseFloat(cs.columnGap) || 0;
+  container.style.rowGap = "0px";
+  container.style.gridAutoFlow = "dense";
+  container.style.overflowAnchor = "none";
+  const children = rawChildren.filter(
+    (el) => el.nodeType === 1 && window.getComputedStyle(el).display !== "none"
+  );
+  for (const child of children) {
+    child.style.alignSelf = "start";
+    child.style.overflowAnchor = "none";
+  }
+  const preferred = options.preferredColumnSpan;
+  if (preferred !== void 0) {
+    const totalCols = countGridColumns(container);
+    const preferredCols = totalCols > 0 ? resolvePreferredColumns(container, preferred, totalCols) : 0;
+    if (totalCols > 0 && preferredCols > 0) {
+      let col = 0;
+      for (const child of children) {
+        if (child.hasAttribute("data-column-span-auto")) {
+          const currentInline = child.style.gridColumn;
+          const lastWritten = child.getAttribute(LAST_COL_ATTR);
+          if (!child.hasAttribute(ORIGINAL_COL_ATTR) || currentInline !== lastWritten) {
+            child.setAttribute(ORIGINAL_COL_ATTR, currentInline);
+          }
+          const remaining = totalCols - col;
+          const span = Math.max(1, Math.min(preferredCols, remaining));
+          child.style.gridColumn = `span ${span}`;
+          child.setAttribute(LAST_COL_ATTR, child.style.gridColumn);
+          col = (col + span) % totalCols;
+        } else {
+          const consumed = Math.min(totalCols, readExplicitSpan(child, totalCols));
+          if (consumed > totalCols - col) {
+            col = consumed % totalCols;
+          } else {
+            col = (col + consumed) % totalCols;
+          }
+        }
+      }
+    }
+  } else {
+    for (const child of children) {
+      restoreOriginalColumn(child);
+    }
+  }
+  const heights = children.map((child) => child.offsetHeight);
+  const cols = countGridColumns(container) || 1;
+  const projectedRows = children.reduce((sum, child, i3) => {
+    const rowSpan = Math.max(1, Math.ceil(heights[i3] + targetGap));
+    const colSpan = readExplicitSpan(child, cols);
+    return sum + rowSpan * colSpan;
+  }, 0) / cols;
+  const autoUnit = Math.max(
+    1,
+    Math.ceil(projectedRows / TARGET_MAX_IMPLICIT_ROWS)
+  );
+  const rowUnit = options.rowUnitPx !== void 0 && options.rowUnitPx > 0 ? Math.floor(options.rowUnitPx) : autoUnit;
+  container.style.gridAutoRows = `${rowUnit}px`;
+  const prevUnit = container.getAttribute(UNIT_ATTR);
+  if (prevUnit !== String(rowUnit)) {
+    for (const child of children) child.removeAttribute(LAST_SPAN_ATTR);
+    container.setAttribute(UNIT_ATTR, String(rowUnit));
+  }
+  const spans = heights.map(
+    (h) => Math.max(1, Math.ceil((h + targetGap) / rowUnit))
+  );
+  let changed = false;
+  for (let i3 = 0; i3 < children.length; i3++) {
+    const prev = children[i3].getAttribute(LAST_SPAN_ATTR);
+    if (prev !== String(spans[i3])) {
+      changed = true;
+      break;
+    }
+  }
+  if (!changed) return;
+  for (let i3 = 0; i3 < children.length; i3++) {
+    children[i3].style.gridRowEnd = `span ${spans[i3]}`;
+    children[i3].setAttribute(LAST_SPAN_ATTR, String(spans[i3]));
+  }
+}
+function countGridColumns(container) {
+  const value = window.getComputedStyle(container).gridTemplateColumns.trim();
+  if (!value || value === "none") return 0;
+  return value.split(/\s+/).length;
+}
+function readExplicitSpan(el, totalCols) {
+  const inline = el.style.gridColumn || el.style.gridColumnEnd;
+  const fromInline = parseSpan(inline, totalCols);
+  if (fromInline !== null) return fromInline;
+  const computed = window.getComputedStyle(el).gridColumn;
+  return parseSpan(computed, totalCols) ?? 1;
+}
+function parseSpan(value, totalCols) {
+  if (!value) return null;
+  const match = value.match(/^\s*span\s+(\d+)/);
+  if (match) return Math.max(1, Math.min(totalCols, parseInt(match[1], 10)));
+  if (/\/\s*-1\b/.test(value)) return totalCols;
+  return null;
+}
+function clearMasonryLayout(container, rawChildren) {
+  container.style.gridAutoRows = "";
+  container.style.gridAutoFlow = "";
+  container.style.rowGap = "";
+  container.style.overflowAnchor = "";
+  container.removeAttribute(UNIT_ATTR);
+  for (const child of rawChildren) {
+    if (child.nodeType !== 1) continue;
+    child.style.gridRow = "";
+    child.style.gridRowStart = "";
+    child.style.gridRowEnd = "";
+    child.style.alignSelf = "";
+    child.style.overflowAnchor = "";
+    child.removeAttribute(LAST_SPAN_ATTR);
+    restoreOriginalColumn(child);
+  }
+}
+function restoreOriginalColumn(el) {
+  if (!el.hasAttribute(ORIGINAL_COL_ATTR)) return;
+  el.style.gridColumn = el.getAttribute(ORIGINAL_COL_ATTR) ?? "";
+  el.removeAttribute(ORIGINAL_COL_ATTR);
+  el.removeAttribute(LAST_COL_ATTR);
+}
+
+// src/web-components/layout/bds-grid.ts
+var MASONRY_SCROLL_IDLE_MS = 150;
+var BdsGrid = 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;
+    }
+
+    :host([variant='page']) {
+      grid-column: 1 / -1;
+    }
+
+    .grid {
+      display: grid;
+      gap: var(--grid_gap, var(--bds-grid_gap));
+      box-sizing: border-box;
+    }
+
+    .grid.--main {
+      grid-template-columns: var(--bds-grid_template-columns);
+    }
+
+    .grid.--page {
+      grid-template-columns: 1fr;
+    }
+
+    .grid.--funnel {
+      grid-template-columns: var(--bds-grid_template-columns);
+      max-inline-size: var(--bds-container_max-width--narrow);
+      margin-inline: auto;
+    }
+
+    .grid.--custom {
+      grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
+    }
+
+    .grid.--centered {
+      margin-inline: auto;
+      max-inline-size: var(--bds-container_max-width);
+      padding-inline: var(--bds-container_spacing-inline);
+    }
+
+    @supports (grid-template-rows: masonry) {
+      .grid.--masonry {
+        grid-template-rows: masonry;
+      }
+    }
+
+    @supports (display: grid-lanes) {
+      .grid.--masonry {
+        display: grid-lanes;
+      }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    columns: { type: Number, reflect: true },
+    isCentered: { type: Boolean, attribute: "is-centered", reflect: true },
+    isMasonry: { type: Boolean, attribute: "is-masonry", reflect: true },
+    autoSpanMedia: { type: Boolean, attribute: "auto-span-media", reflect: true },
+    masonryPreferredColumnSpan: {
+      type: String,
+      attribute: "masonry-preferred-column-span",
+      reflect: true
+    },
+    masonryRowUnitPx: { type: Number, attribute: "masonry-row-unit-px", reflect: true }
+  };
+  _ro;
+  _mo;
+  _frame = 0;
+  // Tracks whether the masonry observers/listeners are currently wired up.
+  // Guards _teardownMasonry so a grid that never engaged masonry (or already
+  // tore it down) never clears spans it didn't apply.
+  _engaged = false;
+  _scrolling = false;
+  _pendingResize = false;
+  _scrollTimer;
+  // RO-triggered re-runs (an already-laid-out item resizing — image decode, font
+  // swap) apply immediately unless the user is actively scrolling, in which case
+  // they're deferred until scroll idles (see _onScroll) to avoid a compositor
+  // race where `grid-auto-flow: dense` re-packs items mid-scroll. Stable
+  // arrow-function references so connectedCallback/disconnectedCallback can
+  // add/remove the same listener.
+  _onResize = () => {
+    if (this._scrolling) {
+      this._pendingResize = true;
+      return;
+    }
+    this._apply();
+  };
+  // MutationObserver fires when children are added/removed. Newly-added children
+  // (and their media descendants) need to be observed for size, and the run is
+  // deferred to rAF so the browser lays out the new children before measuring.
+  _onMutate = () => {
+    for (const child of this._items()) this._observeDescendants(child);
+    this._scheduleMasonry();
+  };
+  _onScroll = () => {
+    this._scrolling = true;
+    if (this._scrollTimer !== void 0) clearTimeout(this._scrollTimer);
+    this._scrollTimer = setTimeout(() => {
+      this._scrolling = false;
+      this._scrollTimer = void 0;
+      if (this._pendingResize) {
+        this._pendingResize = false;
+        this._apply();
+      }
+    }, MASONRY_SCROLL_IDLE_MS);
+  };
+  constructor() {
+    super();
+    this.variant = "main";
+    this.columns = void 0;
+    this.isCentered = false;
+    this.isMasonry = false;
+    this.autoSpanMedia = false;
+    this.masonryPreferredColumnSpan = void 0;
+    this.masonryRowUnitPx = void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.isMasonry && !supportsNativeMasonry() && !this._engaged) {
+      this._setupMasonry();
+      this._scheduleMasonry();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownMasonry();
+  }
+  updated() {
+    if (this.isMasonry && !supportsNativeMasonry()) {
+      this._setupMasonry();
+      this._scheduleMasonry();
+    } else {
+      this._teardownMasonry();
+    }
+  }
+  _gridEl() {
+    return this.renderRoot.querySelector(".grid");
+  }
+  _items() {
+    return Array.from(this.children).filter((el) => el.nodeType === 1);
+  }
+  _observeDescendants(child) {
+    if (!this._ro) return;
+    this._ro.observe(child);
+    for (const media of Array.from(child.querySelectorAll("img, video"))) {
+      this._ro.observe(media);
+    }
+  }
+  _setupMasonry() {
+    if (this._engaged) return;
+    const container = this._gridEl();
+    if (!container) return;
+    this._engaged = true;
+    if (typeof ResizeObserver !== "undefined") {
+      this._ro = new ResizeObserver(this._onResize);
+      for (const child of this._items()) this._observeDescendants(child);
+    }
+    if (typeof MutationObserver !== "undefined") {
+      this._mo = new MutationObserver(this._onMutate);
+      this._mo.observe(this, { childList: true });
+    }
+    window.addEventListener("scroll", this._onScroll, { passive: true, capture: true });
+  }
+  _apply() {
+    const container = this._gridEl();
+    if (!container) return;
+    applyMasonryLayout(container, this._items(), {
+      preferredColumnSpan: this._resolvePreferredColumnSpan(),
+      rowUnitPx: this.masonryRowUnitPx
+    });
+  }
+  _scheduleMasonry() {
+    cancelAnimationFrame(this._frame);
+    this._frame = requestAnimationFrame(() => this._apply());
+  }
+  _resolvePreferredColumnSpan() {
+    const raw = this.masonryPreferredColumnSpan;
+    if (raw === void 0 || raw === null || raw === "") return void 0;
+    const n = Number(raw);
+    if (Number.isFinite(n) && String(n) === raw) return n;
+    return raw;
+  }
+  _teardownMasonry() {
+    if (!this._engaged) return;
+    cancelAnimationFrame(this._frame);
+    if (this._scrollTimer !== void 0) {
+      clearTimeout(this._scrollTimer);
+      this._scrollTimer = void 0;
+    }
+    this._scrolling = false;
+    this._pendingResize = false;
+    window.removeEventListener("scroll", this._onScroll, { capture: true });
+    this._ro?.disconnect();
+    this._mo?.disconnect();
+    this._ro = void 0;
+    this._mo = void 0;
+    this._engaged = false;
+    const container = this._gridEl();
+    if (container) clearMasonryLayout(container, this._items());
+  }
+  render() {
+    const classes = [
+      "grid",
+      `--${this.variant}`,
+      this.isCentered ? "--centered" : "",
+      this.isMasonry ? "--masonry" : ""
+    ].filter(Boolean).join(" ");
+    const styleAttr = this.variant === "custom" && this.columns != null ? `--grid_columns: ${this.columns}` : "";
+    return T`<div class=${classes} style=${styleAttr}><slot></slot></div>`;
+  }
+};
+customElements.define("bds-grid", BdsGrid);
+
+export {
+  BdsGrid
+};

package/dist/web-components/{chunk-CM3KYZ6Z.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,11 +51,11 @@ 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);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      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));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
@@ -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
+};