@boostdev/design-system-components 2.8.0 → 2.12.0

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

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

@@ -0,0 +1,152 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-checkbox-group.ts
+var BdsCheckboxGroup = 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([disabled]) .legend,
+    :host([disabled]) .message {
+      opacity: 0.5;
+    }
+
+    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);
+    }
+
+    /* Visually hidden but still exposed to assistive tech — carries the
+       "required" state into the fieldset's accessible name, since the
+       visible asterisk above is aria-hidden and aria-required is not
+       supported ARIA on a fieldset (role=group). */
+    .requiredLabel {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+
+    .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_on-bg);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
+    }
+  `;
+  static properties = {
+    label: { type: String },
+    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.disabled = false;
+    this.required = false;
+  }
+  /**
+   * Propagates `disabled` to slotted `<bds-checkbox>` elements. Only checkboxes
+   * that were enabled before the group disabled them are re-enabled when the
+   * group re-enables — a checkbox individually marked `disabled` in markup
+   * stays disabled.
+   */
+  _propagateDisabled = () => {
+    this.querySelectorAll("bds-checkbox").forEach((checkbox) => {
+      const el = checkbox;
+      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");
+      }
+    });
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(this._propagateDisabled);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("disabled")) {
+      this._propagateDisabled();
+    }
+  }
+  render() {
+    const errorId = `bds-checkbox-group-${this._uid}-error`;
+    const hintId = `bds-checkbox-group-${this._uid}-hint`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    return T`
+      <fieldset ?disabled=${this.disabled} aria-describedby=${describedBy ?? A}>
+        <legend class="legend">
+          ${this.label}
+          ${this.required ? T`<span class="required" aria-hidden="true"> *</span> <span class="requiredLabel">(required)</span>` : ""}
+        </legend>
+        <div class="items">
+          <slot @slotchange=${this._propagateDisabled}></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-checkbox-group", BdsCheckboxGroup);
+
+export {
+  BdsCheckboxGroup
+};