@boostdev/design-system-components 2.7.1 → 2.11.0

package/dist/web-components/{chunk-6I3CFC26.js → chunk-RSZ3BWBK.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-tab.ts
 var BdsTab = 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;
     }
@@ -19,8 +29,13 @@ var BdsTab = class extends i2 {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       font-weight: var(--bds-font_weight--semibold);
-      color: var(--tab_color, var(--bds-color_on-bg));
-      border-block-end: 2px solid var(--tab_border-color, transparent);
+
+      /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
+         per-state defaults. Active/hover write to the inner --tab_*--state slot —
+         mirrors the React Tabs.module.css pattern so a consumer's --tab_color
+         override is never shadowed by the selected/hover rules below. */
+      color:            var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
+      border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
       margin-block-end: -1px;
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -28,8 +43,8 @@ var BdsTab = class extends i2 {
     }
 
     :host([selected]) .tab {
-      --tab_color:        var(--bds-color_interactive_on-bg);
-      --tab_border-color: var(--bds-color_interactive);
+      --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+      --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
     }
 
     .tab:disabled {
@@ -45,7 +60,7 @@ var BdsTab = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .tab:not(:disabled, [aria-selected='true']):hover {
-        --tab_color: var(--bds-color_interactive_on-bg);
+        --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
       }
     }
   `;

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

@@ -0,0 +1,101 @@
+import {
+  s,
+  u
+} from "./chunk-QPOKHLMQ.js";
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-section-header.ts
+var BdsSectionHeader = 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;
+      grid-column: var(--bds-grid_span-100);
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sectionHeader_gap, var(--bds-space_m));
+    }
+
+    .title {
+      /* --sectionHeader-title-color (kebab delimiter) is deprecated -- use --sectionHeader_title-color */
+      color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+    }
+
+    .subtitle {
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--medium);
+    }
+
+    .header.--start  { align-items: flex-start; text-align: start; }
+    .header.--center { align-items: center;      text-align: center; }
+    .header.--end    { align-items: flex-end;    text-align: end; }
+
+    /* medium first -- default size, so MCP extraction picks up its fallbacks */
+    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
+
+    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+
+    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--small  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+
+    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--display)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+  `;
+  static properties = {
+    heading: { type: String },
+    title: { type: String },
+    subtitle: { type: String },
+    alignment: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    titleAs: { type: String, attribute: "title-as" }
+  };
+  constructor() {
+    super();
+    this.heading = "";
+    this.title = "";
+    this.subtitle = "";
+    this.alignment = "start";
+    this.size = "medium";
+    this.titleAs = "h2";
+  }
+  get _headingText() {
+    return this.heading || this.title;
+  }
+  render() {
+    const tag = s(this.titleAs || "h2");
+    return T`
+      <div class="header --${this.alignment} --${this.size}">
+        ${u`<${tag} class="title">${this._headingText}</${tag}>`}
+        ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-section-header", BdsSectionHeader);
+
+export {
+  BdsSectionHeader
+};

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

@@ -0,0 +1,234 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-field-group.ts
+var BdsFieldGroup = 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;
+
+      /* Auto-derived collapse threshold (mirror of the React component).
+         --fieldGroup_field-count is set inline by _onSlotChange; the other
+         tokens use foundation-default fallbacks so the calc rebuilds when
+         a consumer overrides --fieldGroup_min-field-width or _gap. Read by
+         .probe's inline-size below — see the class doc comment for why a
+         direct @container condition can't use this. */
+      --fieldGroup_collapse-threshold:
+        calc(
+          var(--fieldGroup_field-count, 1)
+          * var(--fieldGroup_min-field-width, 12rem)
+          + (var(--fieldGroup_field-count, 1) - 1)
+          * var(--fieldGroup_gap, var(--bds-space_m))
+        );
+    }
+
+    fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      min-inline-size: 0;
+    }
+
+    .legend {
+      inline-size: 100%;
+      padding-inline: 0;
+
+      padding-block:
+        var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
+      margin-block-end:
+        var(--fieldGroup_legend-gap, var(--bds-space_m));
+      border-block-end:
+        var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
+
+      color:
+        var(--fieldGroup_legend-color, var(--bds-color_on-bg));
+      font-family:
+        var(--fieldGroup_legend-font-family, var(--bds-font_family--body));
+      font-size:
+        var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
+      font-weight:
+        var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
+      line-height:
+        var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
+    }
+
+    /* Disabled group: dim the legend. Slotted fields dim via their own
+       :host([disabled]) rule. Parity with the React FieldGroup. */
+    :host([disabled]) .legend {
+      opacity: 0.5;
+    }
+
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fieldGroup_gap, var(--bds-space_m));
+    }
+
+    :host([variant='horizontal']) .fields {
+      flex-flow: row wrap;
+    }
+
+    :host([variant='horizontal']) .fields ::slotted(*) {
+      flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
+      min-inline-size: 0;
+    }
+
+    /* Zero-size, overflow-clipped box housing .probe. .probe's inline-size
+       is intentionally larger than the fieldset whenever the layout should
+       collapse, so it must be fully contained here — never left to poke
+       into the page — but clipping only affects paint/scroll, not .probe's
+       own resolved box size, so ResizeObserver still reports its true
+       width. */
+    .probeContainer {
+      position: relative;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+    }
+
+    .probe {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      block-size: 0;
+      inline-size: var(--fieldGroup_collapse-threshold);
+      visibility: hidden;
+    }
+
+    /* JS (see _onResize/_updateCollapsed) toggles data-collapsed on the host
+       once the fieldset's own inline-size can no longer fit a complete
+       horizontal row. Threshold scales with the actual slotted-element
+       count (see :host calc above). */
+    :host([variant='horizontal'][data-collapsed='true']) .fields {
+      flex-direction: column;
+    }
+
+    :host([variant='horizontal'][data-collapsed='true']) .fields ::slotted(*) {
+      flex: 1 1 auto;
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    legend: { type: String },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _ro;
+  _fieldsetEl;
+  _probeEl;
+  _fieldsetSize = 0;
+  _thresholdSize = 0;
+  // Slotted controls this instance disabled on the group's behalf, so
+  // re-enabling the group never overrides a control the consumer had
+  // individually disabled beforehand.
+  _groupDisabledEls = /* @__PURE__ */ new WeakSet();
+  constructor() {
+    super();
+    this.variant = "horizontal";
+    this.legend = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) this._setupObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._ro?.disconnect();
+    this._ro = void 0;
+  }
+  firstUpdated() {
+    this._fieldsetEl = this.renderRoot.querySelector("fieldset") ?? void 0;
+    this._probeEl = this.renderRoot.querySelector(".probe") ?? void 0;
+    this._setupObserver();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("variant")) {
+      this._updateCollapsed();
+    }
+    if (changed.has("disabled")) {
+      this._syncDisabledToSlotted();
+    }
+  }
+  _setupObserver() {
+    if (this._ro || typeof ResizeObserver === "undefined") return;
+    if (!this._fieldsetEl || !this._probeEl) return;
+    this._ro = new ResizeObserver(this._onResize);
+    this._ro.observe(this._fieldsetEl);
+    this._ro.observe(this._probeEl);
+  }
+  // Arrow-bound for stable identity across connect/disconnect cycles.
+  _onResize = (entries) => {
+    for (const entry of entries) {
+      const size = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+      if (entry.target === this._fieldsetEl) this._fieldsetSize = size;
+      else if (entry.target === this._probeEl) this._thresholdSize = size;
+    }
+    this._updateCollapsed();
+  };
+  _updateCollapsed() {
+    const shouldCollapse = this.variant === "horizontal" && this._fieldsetSize < this._thresholdSize;
+    this.toggleAttribute("data-collapsed", shouldCollapse);
+  }
+  // Arrow-bound for stable identity, matching the bds-popover/bds-button
+  // convention for handlers attached in render.
+  _onSlotChange = (e) => {
+    const slot = e.target;
+    const count = slot.assignedElements().length;
+    this.style.setProperty("--fieldGroup_field-count", String(count));
+    this._syncDisabledToSlotted();
+  };
+  // Propagates `disabled` to each directly-slotted form control. Only
+  // touches controls this instance disabled itself (tracked in
+  // _groupDisabledEls) when re-enabling, so a control the consumer
+  // individually disabled stays disabled after the group re-enables.
+  _syncDisabledToSlotted() {
+    const slot = this.renderRoot.querySelector("slot");
+    if (!slot) return;
+    for (const el of slot.assignedElements({ flatten: true })) {
+      if (!("disabled" in el)) continue;
+      const field = el;
+      if (this.disabled) {
+        if (!field.disabled) {
+          field.disabled = true;
+          this._groupDisabledEls.add(field);
+        }
+      } else if (this._groupDisabledEls.has(field)) {
+        field.disabled = false;
+        this._groupDisabledEls.delete(field);
+      }
+    }
+  }
+  render() {
+    return T`
+      <fieldset ?disabled=${this.disabled}>
+        ${this.legend ? T`<legend class="legend">${this.legend}</legend>` : A}
+        <div class="fields">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+        <div class="probeContainer">
+          <div class="probe"></div>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+customElements.define("bds-field-group", BdsFieldGroup);
+
+export {
+  BdsFieldGroup
+};

package/dist/web-components/{chunk-VMMVWLXL.js → chunk-SFZ6Q4BP.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/ui/bds-separator.ts
 var BdsSeparator = 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;
     }

package/dist/web-components/{chunk-LY62SAVN.js → chunk-SYNLFKD3.js}

@@ -8,6 +8,16 @@ import {
 var STAR_PATH = "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z";
 var BdsRating = 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;
     }
@@ -15,7 +25,7 @@ var BdsRating = class extends i2 {
     .rating {
       display: inline-flex;
       gap: var(--bds-space_xxxs);
-      color: var(--bds-color_bg);
+      color: var(--rating_color, var(--bds-color_bg));
     }
 
     .star {
@@ -24,7 +34,7 @@ var BdsRating = class extends i2 {
     }
 
     .star.--filled {
-      color: var(--bds-color_warning);
+      color: var(--rating_color--filled, var(--bds-color_warning));
     }
   `;
   static properties = {

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

@@ -0,0 +1,192 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-pagination.ts
+function getPageRange(current, total) {
+  const delta = 1;
+  const range = [];
+  for (let i3 = 1; i3 <= total; i3++) {
+    if (i3 === 1 || i3 === total || i3 >= current - delta && i3 <= current + delta) {
+      range.push(i3);
+    } else if (range[range.length - 1] !== "...") {
+      range.push("...");
+    }
+  }
+  return range;
+}
+var BdsPagination = 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;
+    }
+
+    .pagination {
+      display: flex;
+      justify-content: center;
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2.75rem;
+      block-size: 2.75rem;
+      padding-inline: var(--bds-space_xs);
+      border-radius: var(--pagination_radius, var(--bds-border_radius--full));
+
+      /* Layered cascade: public overrides (--pagination_item-bg, --pagination_item-color,
+         --pagination_item-border) win over per-state defaults. The old --btn_* names are
+         kept as deprecated aliases. Hover/active write to the inner --btn_*--state slot. */
+      background-color: var(--pagination_item-bg, var(--btn_bg, var(--btn_bg--state, transparent)));
+      color: var(--pagination_item-color, var(--btn_color, var(--btn_color--state, var(--bds-color_on-bg))));
+      --bdc_color: var(--pagination_item-border, var(--btn_border, var(--btn_border--state, var(--bds-color_bg--subtle))));
+
+      border: none;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-variant-numeric: tabular-nums;
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      box-sizing: border-box;
+    }
+
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .button:not(:disabled, .--active):hover {
+        --btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
+        --btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
+      }
+    }
+
+    .button.--active {
+      --btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
+      --btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
+      --btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .button.--nav {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2.75rem;
+      block-size: 2.75rem;
+      color: var(--bds-color_on-bg--subtle);
+      font-size: var(--bds-font_size--body);
+      user-select: none;
+    }
+
+    .nav-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+  `;
+  static properties = {
+    currentPage: { type: Number, attribute: "current-page", reflect: true },
+    totalPages: { type: Number, attribute: "total-pages", reflect: true }
+  };
+  constructor() {
+    super();
+    this.currentPage = 1;
+    this.totalPages = 1;
+  }
+  _navigate(page) {
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    this.currentPage = page;
+    this.dispatchEvent(new CustomEvent("bds-page-change", {
+      detail: { page },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const pages = getPageRange(this.currentPage, this.totalPages);
+    return T`
+      <nav class="pagination" aria-label="Pagination">
+        <ul class="list">
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage <= 1}
+              aria-label="Previous page"
+              @click=${() => this._navigate(this.currentPage - 1)}
+            >
+              <svg class="nav-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+          </li>
+          ${pages.map(
+      (page) => page === "..." ? T`<li><span class="ellipsis" aria-hidden="true">…</span></li>` : T`
+                  <li>
+                    <button
+                      type="button"
+                      class="button ${page === this.currentPage ? "--active" : ""}"
+                      aria-label="Page ${page}"
+                      aria-current=${page === this.currentPage ? "page" : A}
+                      @click=${() => this._navigate(page)}
+                    >${page}</button>
+                  </li>
+                `
+    )}
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage >= this.totalPages}
+              aria-label="Next page"
+              @click=${() => this._navigate(this.currentPage + 1)}
+            >
+              <svg class="nav-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+};
+customElements.define("bds-pagination", BdsPagination);
+
+export {
+  BdsPagination
+};