@boostdev/design-system-components 2.8.0 → 2.11.0

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

package/dist/web-components/{chunk-PXZWYO6Z.js → chunk-VED2DFJ6.js}

@@ -8,6 +8,16 @@ import {
 var BdsNumberInput = 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,42 +27,67 @@ var BdsNumberInput = 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);
+    }
+
     .row {
       display: flex;
-      align-items: center;
+      align-items: stretch;
+      border: var(--numberInput_border, none);
+      /* deprecated: --number-input_border-color kept as a legacy override for the frame colour */
+      --bdc_color: var(--number-input_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
+
+      /* deprecated: --number-input_radius kept as a legacy fallback below --numberInput_radius */
+      --_radius: var(--numberInput_radius, var(--number-input_radius, var(--bdc-outline_radius)));
+
+      border-radius: var(--_radius);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--number-input_shadow, var(--bdc-outline_shadow)));
+      overflow: hidden;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .row {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .row:focus-within {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within:has(:focus-visible) {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .input {
       flex: 1;
-      font-family: var(--bds-font_family--body);
-      font-size: var(--bds-font_size--body);
-      padding: var(--bds-space_s);
       border: none;
-      --bdc_color: var(--number-input_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
-
-      border-radius: var(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
-      background-color: var(--number-input_color_bg, var(--bds-color_bg));
-      color: var(--number-input_color, var(--bds-color_on-bg));
+      outline: none;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--numberInput_font-size, var(--bds-font_size--body));
+      padding: var(--numberInput_padding, var(--bds-space_s));
+      /* deprecated: --number-input_color_bg kept as a legacy override; React default is transparent */
+      background: var(--number-input_color_bg, transparent);
+      color: var(--numberInput_color, var(--number-input_color, var(--bds-color_on-bg)));
       text-align: center;
-      -moz-appearance: textfield;
+      appearance: textfield;
       min-inline-size: 0;
     }
 
     .input::-webkit-inner-spin-button,
     .input::-webkit-outer-spin-button {
       appearance: none;
-      margin: 0;
-    }
-
-    .input:focus {
-      --bdc_color: var(--bdc_color--focus);
-    }
-
-    .input:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
     }
 
     .stepper {
@@ -60,16 +95,25 @@ var BdsNumberInput = class extends i2 {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 1px;
-      inline-size: 2rem;
-      block-size: 2rem;
-      border-radius: var(--bds-border_radius--xs);
+      padding: var(--numberInput_stepper-padding, var(--bds-space_xs));
+      margin: var(--bdc-outline_width);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_interactive);
+      background-color: var(--numberInput_stepper-bg, var(--bds-color_bg--subtle));
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
       transition: var(--bds-animation_transition);
     }
 
+    .stepper:first-child {
+      border-start-start-radius: var(--_radius);
+      border-end-start-radius: var(--_radius);
+    }
+
+    .stepper:last-child {
+      border-start-end-radius: var(--_radius);
+      border-end-end-radius: var(--_radius);
+    }
+
     .stepper:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
@@ -82,13 +126,30 @@ var BdsNumberInput = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .stepper:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
+        opacity: var(--numberInput_stepper-opacity--hover, 0.7);
       }
     }
 
     .stepper svg {
       inline-size: 1rem;
       block-size: 1rem;
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
+    }
+
+    .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 = {
@@ -97,9 +158,13 @@ var BdsNumberInput = class extends i2 {
     min: { type: Number },
     max: { type: Number },
     step: { type: Number },
-    disabled: { type: Boolean, reflect: true }
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true }
   };
   _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -109,6 +174,9 @@ var BdsNumberInput = class extends i2 {
     this.max = void 0;
     this.step = 1;
     this.disabled = false;
+    this.label = "";
+    this.hint = void 0;
+    this.error = void 0;
   }
   updated(changed) {
     super.updated(changed);
@@ -138,12 +206,18 @@ var BdsNumberInput = class extends i2 {
   render() {
     const atMin = this.min !== void 0 && this.value <= this.min;
     const atMax = this.max !== void 0 && this.value >= this.max;
+    const id = `bds-number-input-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
     return T`
+      ${this.label ? T`<label class="label" for=${id}>${this.label}</label>` : ""}
       <div class="row">
         <button
           type="button"
           class="stepper"
           aria-label="Decrease"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMin}
           @click=${() => this._adjust(-this.step)}
@@ -153,6 +227,7 @@ var BdsNumberInput = class extends i2 {
           </svg>
         </button>
         <input
+          id=${id}
           type="number"
           class="input"
           name=${this.name}
@@ -161,12 +236,15 @@ var BdsNumberInput = class extends i2 {
           max=${this.max ?? ""}
           step=${this.step}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${describedBy ?? ""}
           @change=${this._handleChange}
         />
         <button
           type="button"
           class="stepper"
           aria-label="Increase"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMax}
           @click=${() => this._adjust(this.step)}
@@ -176,6 +254,7 @@ var BdsNumberInput = class extends i2 {
           </svg>
         </button>
       </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-W6H5ID2U.js

@@ -0,0 +1,161 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/components/layout/Grid/autoSpan.ts
+function aspectToColumnSpan(ratio) {
+  if (!Number.isFinite(ratio) || ratio <= 0) return "one-quarter";
+  if (ratio > 3.5) return "full";
+  if (ratio > 2.2) return "three-quarters";
+  if (ratio > 1.5) return "half";
+  return "one-quarter";
+}
+function findMediaChild(root) {
+  return root.querySelector("img, video");
+}
+function readMediaAspect(media) {
+  if (media instanceof HTMLImageElement) {
+    if (media.naturalWidth > 0 && media.naturalHeight > 0) {
+      return media.naturalWidth / media.naturalHeight;
+    }
+    return null;
+  }
+  if (media.videoWidth > 0 && media.videoHeight > 0) {
+    return media.videoWidth / media.videoHeight;
+  }
+  return null;
+}
+function mediaReadyEvent(media) {
+  if (media instanceof HTMLImageElement) return media.complete ? null : "load";
+  if (media.readyState < 1) return "loadedmetadata";
+  return null;
+}
+
+// src/web-components/layout/bds-grid-item.ts
+var SPAN_VAR = {
+  full: "var(--bds-grid_span-100)",
+  "three-quarters": "span var(--bds-grid_columns-75)",
+  "two-thirds": "span var(--bds-grid_columns-66)",
+  half: "span var(--bds-grid_columns-50)",
+  "one-third": "span var(--bds-grid_columns-33)",
+  "one-quarter": "span var(--bds-grid_columns-25)"
+};
+function resolveSpan(value) {
+  if (value === void 0 || value === null) return SPAN_VAR.full;
+  if (typeof value === "number") return `span ${value}`;
+  if (!(value in SPAN_VAR)) {
+    const n = Number(value);
+    if (Number.isFinite(n)) return `span ${n}`;
+    return SPAN_VAR.full;
+  }
+  return SPAN_VAR[value];
+}
+var BdsGridItem = 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;
+      min-inline-size: 0;
+    }
+  `;
+  static properties = {
+    columnSpan: { attribute: "column-span" },
+    rowSpan: { attribute: "row-span", type: Number },
+    startColumn: { attribute: "start-column", type: Number },
+    endColumn: { attribute: "end-column", type: Number }
+  };
+  _autoSpan = "one-quarter";
+  _mediaCleanup;
+  _slotObserver;
+  constructor() {
+    super();
+    this.columnSpan = void 0;
+    this.rowSpan = void 0;
+    this.startColumn = void 0;
+    this.endColumn = void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof MutationObserver !== "undefined") {
+      this._slotObserver = new MutationObserver(() => this._resolveAutoSpan());
+      this._slotObserver.observe(this, { childList: true, subtree: true });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownMedia();
+    this._slotObserver?.disconnect();
+    this._slotObserver = void 0;
+  }
+  _effectiveColumnSpan() {
+    if (this.columnSpan !== void 0 && this.columnSpan !== null) return this.columnSpan;
+    const parent = this.closest("bds-grid");
+    if (parent?.autoSpanMedia) return "auto";
+    return "full";
+  }
+  _teardownMedia() {
+    this._mediaCleanup?.();
+    this._mediaCleanup = void 0;
+  }
+  _resolveAutoSpan() {
+    this._teardownMedia();
+    if (this._effectiveColumnSpan() !== "auto") return;
+    const media = findMediaChild(this);
+    if (!media) {
+      this._setAutoSpan("one-quarter");
+      return;
+    }
+    const aspect = readMediaAspect(media);
+    if (aspect !== null) {
+      this._setAutoSpan(aspectToColumnSpan(aspect));
+      return;
+    }
+    const event = mediaReadyEvent(media);
+    if (!event) {
+      this._setAutoSpan("one-quarter");
+      return;
+    }
+    const handler = () => {
+      const a = readMediaAspect(media);
+      if (a !== null) this._setAutoSpan(aspectToColumnSpan(a));
+    };
+    media.addEventListener(event, handler, { once: true });
+    this._mediaCleanup = () => media.removeEventListener(event, handler);
+  }
+  _setAutoSpan(next) {
+    if (this._autoSpan === next) return;
+    this._autoSpan = next;
+    this.requestUpdate();
+  }
+  updated() {
+    const effective = this._effectiveColumnSpan();
+    if (effective === "auto") this._resolveAutoSpan();
+    const hasExplicitRange = this.startColumn != null || this.endColumn != null;
+    const resolved = effective === "auto" ? this._autoSpan : effective;
+    const gridColumn = hasExplicitRange ? `${this.startColumn ?? "auto"} / ${this.endColumn ?? "auto"}` : resolveSpan(resolved);
+    this.style.gridColumn = gridColumn;
+    this.style.gridRow = this.rowSpan != null ? `span ${this.rowSpan}` : "";
+    const isColumnSpanAuto = (this.columnSpan === void 0 || this.columnSpan === null) && !hasExplicitRange;
+    if (isColumnSpanAuto) this.setAttribute("data-column-span-auto", "");
+    else this.removeAttribute("data-column-span-auto");
+  }
+  render() {
+    return T`<slot></slot>`;
+  }
+};
+customElements.define("bds-grid-item", BdsGridItem);
+
+export {
+  BdsGridItem
+};

package/dist/web-components/{chunk-FSZRP43R.js → chunk-WFVKU4GX.js}

@@ -8,20 +8,34 @@ import {
 // src/web-components/ui/bds-avatar.ts
 var BdsAvatar = 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;
       align-items: center;
       justify-content: center;
-      inline-size: var(--avatar_size, 3em);
-      block-size: var(--avatar_size, 3em);
+      /* Layered cascade (mirrors the React Avatar): a public --avatar_size
+         override wins over the per-size-variant default. Size selectors
+         below write --avatar_size--variant only, so an ancestor setting
+         --avatar_size still cascades correctly. */
+      inline-size: var(--avatar_size, var(--avatar_size--variant, 3em));
+      block-size: var(--avatar_size, var(--avatar_size--variant, 3em));
       border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
       overflow: hidden;
       flex-shrink: 0;
     }
 
-    :host([size='small'])  { --avatar_size: 2em; }
-    :host([size='medium']) { --avatar_size: 3em; }
-    :host([size='large'])  { --avatar_size: 4.5em; }
+    :host([size='small'])  { --avatar_size--variant: 2em; }
+    :host([size='medium']) { --avatar_size--variant: 3em; }
+    :host([size='large'])  { --avatar_size--variant: 4.5em; }
 
     .fallback {
       display: inline-flex;
@@ -69,11 +83,8 @@ var BdsAvatar = class extends i2 {
   }
   render() {
     if (this.src) {
-      return T`<img
-        class="image"
-        src=${this.src}
-        alt=${this.alt || this.name || "User avatar"}
-      />`;
+      const altText = this.hasAttribute("alt") ? this.alt : this.name || "User avatar";
+      return T`<img class="image" src=${this.src} alt=${altText} />`;
     }
     return T`
       <span

package/dist/web-components/{chunk-OQTRTMAB.js → chunk-WIBAN7KP.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-tab-panel.ts
 var BdsTabPanel = 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;
       padding-block-start: var(--bds-space_m);

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

@@ -0,0 +1,54 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-icon-wrapper.ts
+var BdsIconWrapper = 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;
+    }
+
+    /* --icon-wrapper-radius / --icon-wrapper-color (hyphen-delimited) are deprecated
+       aliases for --icon-wrapper_radius / --icon-wrapper_color, kept working for one major. */
+    .wrapper {
+      inline-size: 2em;
+      block-size: 2em;
+      font-size: 3em;
+      border-radius: var(--icon-wrapper_radius, var(--icon-wrapper-radius, var(--bds-border_radius--circle)));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: var(--bds-space_l) auto var(--bds-space_m);
+      background: var(--icon-wrapper_color, var(--icon-wrapper-color, var(--bds-color_bg)));
+      color: var(--icon-wrapper_on-color, var(--bds-color_on-bg));
+      fill: currentcolor;
+      position: relative;
+      transition: var(--bds-animation_transition);
+    }
+
+    .wrapper svg {
+      fill: currentcolor;
+    }
+  `;
+  render() {
+    return T`<div class="wrapper"><slot></slot></div>`;
+  }
+};
+customElements.define("bds-icon-wrapper", BdsIconWrapper);
+
+export {
+  BdsIconWrapper
+};