@boostdev/design-system-components 2.8.0 → 2.12.0

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

@@ -0,0 +1,189 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dropdown-menu.ts
+var BdsDropdownMenu = 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-block;
+      position: relative;
+    }
+
+    .panel {
+      position: absolute;
+      inset-block-start: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+      min-inline-size: 10rem;
+      border: var(--dropdown_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+
+      border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
+      background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
+      color: var(--dropdown_on-color, var(--bds-color_on-bg));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--dropdown_shadow, var(--bds-shadow_m));
+      padding: var(--bds-space_xxs);
+      z-index: var(--bds-z-index_dropdown);
+      display: none;
+      flex-direction: column;
+    }
+
+    :host([placement='bottom-end']) .panel {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([placement='top-start']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+    }
+
+    :host([placement='top-end']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([open]) .panel {
+      display: flex;
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true }
+  };
+  // Stable id for aria-controls wiring from the slotted trigger to the panel
+  _uid = Math.random().toString(36).slice(2, 8);
+  get _panelId() {
+    return `bds-dropdown-panel-${this._uid}`;
+  }
+  constructor() {
+    super();
+    this.open = false;
+    this.placement = "bottom-start";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._handleOutsideClick);
+    this.addEventListener("keydown", this._handleKeydown);
+    this.addEventListener("bds-select", this._handleItemSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._handleOutsideClick);
+    this.removeEventListener("keydown", this._handleKeydown);
+    this.removeEventListener("bds-select", this._handleItemSelect);
+  }
+  get _items() {
+    return [...this.querySelectorAll("bds-dropdown-menu-item")].filter(
+      (item) => !item.disabled
+    );
+  }
+  get _trigger() {
+    const slot = this.shadowRoot?.querySelector('slot[name="trigger"]');
+    return slot?.assignedElements()[0] ?? null;
+  }
+  _open() {
+    if (this.open) return;
+    this.open = true;
+    this._trigger?.setAttribute("aria-expanded", "true");
+    this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
+    this.updateComplete.then(() => {
+      this._items[0]?.shadowRoot?.querySelector("button")?.focus();
+    });
+  }
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this._trigger?.setAttribute("aria-expanded", "false");
+    this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
+    this._trigger?.focus();
+  }
+  _handleTriggerClick = (e) => {
+    e.stopPropagation();
+    if (this.open) {
+      this._close();
+    } else {
+      this._open();
+    }
+  };
+  _handleOutsideClick = (e) => {
+    if (this.open && !this.contains(e.target)) {
+      this._close();
+    }
+  };
+  _handleKeydown = (e) => {
+    if (!this.open) return;
+    const items = this._items;
+    const focused = items.findIndex(
+      (item) => item.shadowRoot?.activeElement !== null && item.shadowRoot?.querySelector("button") === item.shadowRoot?.activeElement
+    );
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this._close();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = (focused + 1) % items.length;
+      items[next]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = (focused - 1 + items.length) % items.length;
+      items[prev]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      items[0]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      items[items.length - 1]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "Tab") {
+      this._close();
+    }
+  };
+  _handleItemSelect = () => {
+    this._close();
+  };
+  _onTriggerSlotChange() {
+    const trigger = this._trigger;
+    if (trigger) {
+      trigger.removeEventListener("click", this._handleTriggerClick);
+      trigger.addEventListener("click", this._handleTriggerClick);
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-controls", this._panelId);
+      trigger.setAttribute("aria-expanded", String(this.open));
+    }
+  }
+  render() {
+    return T`
+      <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+      <div
+        id=${this._panelId}
+        class="panel"
+        role="menu"
+        aria-hidden=${!this.open ? "true" : "false"}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu", BdsDropdownMenu);
+
+export {
+  BdsDropdownMenu
+};

package/dist/web-components/{chunk-SOQQ7RVJ.js → chunk-IPGHUCJT.js}

@@ -17,10 +17,26 @@ var VARIANT_TAG = {
 };
 var BdsTypography = 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;
     }
 
+    /* component="span" (or any inline tag) should flow inline, matching the
+       React counterpart which has no host wrapper to force block layout. */
+    :host([component='span']) {
+      display: inline;
+    }
+
     .typography {
       margin: 0;
       font-family: var(--bds-font_family--body);
@@ -29,38 +45,38 @@ var BdsTypography = class extends i2 {
 
     .typography.--h1 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-1);
+      font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
       font-weight: var(--bds-font_weight--bold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h2 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-2);
+      font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h3 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-3);
+      font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--body {
-      font-size: var(--bds-font_size--body);
+      font-size: var(--typography_font-size--body, var(--bds-font_size--body));
       line-height: var(--bds-font_line-height--body);
     }
 
     .typography.--body_s {
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
       line-height: var(--bds-font_line-height--body);
     }
   `;
   static properties = {
     variant: { type: String, reflect: true },
-    component: { type: String }
+    component: { type: String, reflect: true }
   };
   constructor() {
     super();
@@ -73,9 +89,8 @@ var BdsTypography = class extends i2 {
   }
   render() {
     const tag = s(this._tag);
-    const variant = s(this.variant);
     return u`
-      <${tag} class="typography --${variant}">
+      <${tag} class="typography --${this.variant}">
         <slot></slot>
       </${tag}>
     `;

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