@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/chunk-2OLVQUBU.js

@@ -0,0 +1,193 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-textarea.ts
+var BdsTextarea = 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;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      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);
+    }
+
+    .textarea {
+      inline-size: 100%;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+      padding: var(--bds-space_s);
+      border: var(--textarea_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bdc-outline_radius--l);
+
+      border-radius: var(--textarea_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));
+      background-color: var(--textarea_color_bg, var(--bds-color_bg));
+      color: var(--textarea_color, var(--bds-color_on-bg));
+      resize: vertical;
+      min-block-size: calc(var(--bds-space_m) * 5);
+      box-sizing: border-box;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .textarea:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .textarea:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .textarea:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      resize: none;
+    }
+
+    :host([error]) .textarea {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    :host([error]) .textarea:focus {
+      --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;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    rows: { type: Number },
+    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);
+  _initialValue = "";
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.rows = 4;
+    this.label = "";
+    this.required = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialValue = this.value;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = this._initialValue;
+    this._internals.setFormValue?.(this.value || null);
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("bds-input", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleChange(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const id = `bds-textarea-${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}
+              ${this.required ? T`<span class="required" aria-hidden="true">*</span>` : ""}
+            </label>
+          ` : ""}
+      <textarea
+        id=${id}
+        class="textarea"
+        name=${this.name}
+        .value=${this.value}
+        placeholder=${this.placeholder}
+        rows=${this.rows}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${describedBy ?? ""}
+        aria-required=${this.required ? "true" : "false"}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+      ></textarea>
+      ${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>` : ""}
+    `;
+  }
+};
+customElements.define("bds-textarea", BdsTextarea);
+
+export {
+  BdsTextarea
+};

package/dist/web-components/{chunk-OF6FFGOT.js → chunk-3AY2YKCM.js}

@@ -8,6 +8,16 @@ import {
 var BdsSwitch = 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: inline-flex;
       align-items: center;
@@ -16,6 +26,19 @@ var BdsSwitch = class extends i2 {
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
       color: var(--switch_color, var(--bds-color_on-bg));
+
+      --switch_thumb-size: 1.25em;
+      --switch_track-pad: var(--bds-space_xxxs);
+      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
+      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
+    }
+
+    :host([size='small']) {
+      --switch_thumb-size: 1em;
+    }
+
+    :host([size='large']) {
+      --switch_thumb-size: 1.5em;
     }
 
     :host([disabled]) {
@@ -31,6 +54,19 @@ var BdsSwitch = class extends i2 {
       cursor: pointer;
     }
 
+    /* Positioned ancestor for the invisible overlay input — without this the
+       input's position:absolute + inset:0 climbs to the nearest positioned
+       ancestor outside the component (often the whole page), so clicks
+       anywhere would toggle the switch. Matches React's .trackWrapper. */
+    .track-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      inline-size: var(--switch_track-width);
+      block-size: var(--switch_track-height);
+    }
+
     .input {
       position: absolute;
       inset: 0;
@@ -48,12 +84,10 @@ var BdsSwitch = class extends i2 {
     }
 
     .track {
-      --switch_thumb-size: 1.25em;
-      --switch_track-pad: var(--bds-space_xxxs);
-      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
-      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
-
-      position: relative;
+      /* Shadow DOM does not inherit the global box-sizing reset — without this
+         the padding-inline is added on top of inline-size (content-box), so the
+         thumb's checked translate falls short of the track end. */
+      box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       inline-size: var(--switch_track-width);
@@ -80,6 +114,12 @@ var BdsSwitch = class extends i2 {
       transform: translateX(0);
     }
 
+    /* Error state — lower specificity than :checked below, so a checked
+       switch still shows the active colour even when it also has an error. */
+    :host([error]) .track {
+      --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
+    }
+
     .input:checked + .track {
       background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
       --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
@@ -112,10 +152,13 @@ var BdsSwitch = class extends i2 {
     value: { type: String },
     checked: { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true }
+    disabled: { type: Boolean, reflect: true },
+    error: { type: String, reflect: true },
+    size: { type: String, reflect: true }
   };
   _internals;
   _uid = Math.random().toString(36).slice(2, 8);
+  _initialChecked = false;
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -124,6 +167,11 @@ var BdsSwitch = class extends i2 {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.size = "medium";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialChecked = this.checked;
   }
   updated(changed) {
     super.updated(changed);
@@ -132,28 +180,36 @@ var BdsSwitch = class extends i2 {
     }
   }
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue?.(null);
+    this.checked = this._initialChecked;
+    this._internals.setFormValue?.(this.checked ? this.value : null);
   }
   _handleChange(e) {
     this.checked = e.target.checked;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true
+    }));
   }
   render() {
     const id = `bds-switch-${this._uid}`;
     return T`
       <label for=${id}>
-        <input
-          id=${id}
-          type="checkbox"
-          role="switch"
-          class="input"
-          .checked=${this.checked}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @change=${this._handleChange}
-        />
-        <span class="track">
-          <span class="thumb"></span>
+        <span class="track-wrapper">
+          <input
+            id=${id}
+            type="checkbox"
+            role="switch"
+            class="input"
+            .checked=${this.checked}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-invalid=${this.error ? "true" : "false"}
+            @change=${this._handleChange}
+          />
+          <span class="track">
+            <span class="thumb"></span>
+          </span>
         </span>
         <slot></slot>
       </label>

package/dist/web-components/chunk-3WAV6MDN.js

@@ -0,0 +1,212 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-radio.ts
+var BdsRadio = 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: inline-flex;
+      align-items: flex-start;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .input {
+      box-sizing: border-box;
+      --inputSize: calc(var(--bds-space_s) * 2);
+      margin-block-start: var(--radio_offset, 0.2em);
+      inline-size: var(--inputSize);
+      block-size: var(--inputSize);
+      flex-shrink: 0;
+      color: var(--radio_color, var(--radio_border-color, var(--bds-color_on-bg)));
+      border: var(--radio_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--circle);
+
+      border-radius: var(--radio_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
+      appearance: none;
+      background-color: var(--radio_color_bg, var(--bds-color_bg));
+      cursor: pointer;
+      position: relative;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .input:checked {
+      background: radial-gradient(
+        circle,
+        var(--radio_color-active, var(--bdc-color_active)) 35%,
+        var(--radio_color_bg, var(--bds-color_bg)) 42%
+      );
+      --bdc_color: var(--radio_color-active, var(--bdc-color_active));
+    }
+
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .textWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xxxs);
+      flex: 1;
+    }
+
+    label {
+      cursor: pointer;
+    }
+
+    .description {
+      font-size: var(--bds-font_size--body--s);
+      color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
+      line-height: var(--bds-font_line-height--body);
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    checked: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    error: { type: Boolean, reflect: true },
+    description: { type: String }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  _initialChecked = false;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+    this.error = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialChecked = this.hasAttribute("checked");
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue?.(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this._internals.setFormValue?.(this._initialChecked ? this.value : null);
+  }
+  /** All `<bds-radio>` elements sharing this radio's `name`, in document order (including this one). */
+  _getGroupMembers() {
+    if (!this.name) return [this];
+    const root = this.getRootNode();
+    return Array.from(root.querySelectorAll("bds-radio")).filter((radio) => radio.name === this.name);
+  }
+  /** Marks `radio` as the sole checked member of its group and notifies listeners. */
+  _selectRadio(radio) {
+    this._getGroupMembers().forEach((member) => {
+      if (member !== radio) member.checked = false;
+    });
+    radio.checked = true;
+    radio.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: radio.value, checked: true },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleChange(e) {
+    const isChecked = e.target.checked;
+    if (isChecked) {
+      this._selectRadio(this);
+    } else {
+      this.checked = false;
+    }
+  }
+  _handleKeydown = (e) => {
+    if (this.disabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    const group = this._getGroupMembers().filter((member) => !member.disabled);
+    if (group.length < 2) return;
+    e.preventDefault();
+    const currentIndex = group.indexOf(this);
+    const direction = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
+    const next = group[(currentIndex + direction + group.length) % group.length];
+    this._selectRadio(next);
+    void next.updateComplete.then(() => {
+      next.shadowRoot?.querySelector("input")?.focus();
+    });
+  };
+  /** Roving tabindex: only the checked member (or the first member if none is checked) is tabbable. */
+  _isTabbable() {
+    const group = this._getGroupMembers();
+    if (group.length <= 1) return true;
+    const checkedMember = group.find((member) => member.checked);
+    return checkedMember ? checkedMember === this : group[0] === this;
+  }
+  render() {
+    const id = `bds-radio-${this._uid}`;
+    const descriptionId = `${id}-description`;
+    return T`
+      <input
+        id=${id}
+        type="radio"
+        class="input"
+        name=${this.name}
+        value=${this.value}
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        tabindex=${this._isTabbable() ? 0 : -1}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.description ? descriptionId : A}
+        @change=${this._handleChange}
+        @keydown=${this._handleKeydown}
+      />
+      <div class="textWrapper">
+        <label for=${id}><slot></slot></label>
+        ${this.description ? T`<span id=${descriptionId} class="description">${this.description}</span>` : ""}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-radio", BdsRadio);
+
+export {
+  BdsRadio
+};