@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,149 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-accordion-item.ts
+var BdsAccordionItem = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+    }
+
+    :host(:last-child) {
+      border-block-end: none;
+    }
+
+    .heading {
+      margin: 0;
+    }
+
+    .trigger {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      inline-size: 100%;
+      padding: var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      box-sizing: border-box;
+    }
+
+    .trigger:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .trigger:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .trigger:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .trigger-label {
+      flex: 1;
+      text-align: start;
+    }
+
+    .chevron {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      overflow: hidden;
+    }
+
+    .panel-content {
+      padding: 0 var(--bds-space_m) var(--bds-space_m);
+      color: var(--bds-color_on-bg);
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .chevron {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  // Stable IDs for aria-controls / aria-labelledby
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+  }
+  _handleTriggerClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("bds-accordion-item-toggle", { bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const triggerId = `bds-acc-trigger-${this._uid}`;
+    const panelId = `bds-acc-panel-${this._uid}`;
+    return T`
+      <h3 class="heading">
+        <button
+          type="button"
+          id=${triggerId}
+          class="trigger"
+          aria-expanded=${this.open}
+          aria-controls=${panelId}
+          ?disabled=${this.disabled}
+          @click=${this._handleTriggerClick}
+        >
+          <span class="trigger-label"><slot name="header"></slot></span>
+          <svg
+            class="chevron"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+      </h3>
+      <div
+        id=${panelId}
+        class="panel"
+        role="region"
+        aria-labelledby=${triggerId}
+        ?hidden=${!this.open}
+      >
+        <div class="panel-content"><slot></slot></div>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-accordion-item", BdsAccordionItem);
+
+export {
+  BdsAccordionItem
+};

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

@@ -0,0 +1,53 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-separator.ts
+var BdsSeparator = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([orientation='vertical']) {
+      display: inline-block;
+      align-self: stretch;
+    }
+
+    .separator {
+      border: none;
+      background-color: var(--separator_color, var(--bds-color_on-bg));
+      display: block;
+      inline-size: 100%;
+      block-size: var(--separator_thickness, 1px);
+    }
+
+    :host([orientation='vertical']) .separator {
+      inline-size: var(--separator_thickness, 1px);
+      block-size: 100%;
+    }
+  `;
+  static properties = {
+    orientation: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.orientation = "horizontal";
+  }
+  render() {
+    return T`
+      <div
+        class="separator"
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+};
+customElements.define("bds-separator", BdsSeparator);
+
+export {
+  BdsSeparator
+};

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

@@ -0,0 +1,144 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-select.ts
+var BdsSelect = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrapper {
+      position: relative;
+      display: block;
+    }
+
+    .select {
+      inline-size: 100%;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      padding: var(--bds-space_s);
+      padding-inline-end: var(--bds-space_xl);
+      border: none;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+
+      border-radius: var(--select_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
+      background-color: var(--select_color_bg, var(--bds-color_bg));
+      color: var(--select_color, var(--bds-color_on-bg));
+      appearance: none;
+      cursor: pointer;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .select:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .select:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .chevron {
+      position: absolute;
+      inset-inline-end: var(--bds-space_s);
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      inline-size: 1rem;
+      block-size: 1rem;
+      color: var(--select_chevron-color, var(--bds-color_interactive));
+    }
+
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    options: { type: String },
+    placeholder: { type: String },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.options = "[]";
+    this.placeholder = "";
+    this.required = false;
+    this.disabled = false;
+  }
+  get _options() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value") || changed.has("name")) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.(null);
+  }
+  _handleChange(e) {
+    this.value = e.target.value;
+  }
+  render() {
+    const opts = this._options;
+    return T`
+      <div class="wrapper">
+        <select
+          class="select"
+          name=${this.name}
+          .value=${this.value}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        >
+          ${this.placeholder ? T`
+            <option value="" disabled ?selected=${!this.value}>${this.placeholder}</option>
+          ` : ""}
+          ${opts.map((opt) => T`
+            <option
+              value=${opt.value}
+              ?disabled=${opt.disabled}
+              ?selected=${opt.value === this.value}
+            >${opt.label}</option>
+          `)}
+        </select>
+        <span class="chevron" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-select", BdsSelect);
+
+export {
+  BdsSelect
+};

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

@@ -0,0 +1,133 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-switch.ts
+var BdsSwitch = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      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;
+    }
+
+    .track {
+      position: relative;
+      inline-size: 2.75rem;
+      block-size: 1.5rem;
+      border-radius: 999px;
+      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
+      --bdc_color: currentcolor;
+
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      transition: background-color 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .thumb {
+      position: absolute;
+      inset-block-start: 0.2rem;
+      inset-inline-start: 0.2rem;
+      inline-size: 1.1rem;
+      block-size: 1.1rem;
+      border-radius: 50%;
+      background-color: var(--switch_thumb_color, var(--bds-color_interactive));
+      transition: inset-inline-start 0.2s ease;
+    }
+
+    .input {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      margin: 0;
+    }
+
+    .input:checked + .track {
+      background-color: var(--switch_color-active, var(--bdc-color_active--subtle));
+    }
+
+    .input:checked + .track .thumb {
+      inset-inline-start: calc(100% - 1.3rem);
+    }
+
+    .input:focus-visible + .track {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    label {
+      cursor: pointer;
+    }
+  `;
+  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 }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "on";
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue?.(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue?.(null);
+  }
+  _handleChange(e) {
+    this.checked = e.target.checked;
+  }
+  render() {
+    const id = `bds-switch-${this._uid}`;
+    return T`
+      <input
+        id=${id}
+        type="checkbox"
+        role="switch"
+        class="input"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}>
+        <span class="track">
+          <span class="thumb"></span>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+  }
+};
+customElements.define("bds-switch", BdsSwitch);
+
+export {
+  BdsSwitch
+};

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

@@ -0,0 +1,80 @@
+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`
+    :host {
+      display: block;
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_m);
+    }
+
+    .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; }
+
+    .header.--small  .title { font-size: var(--bds-font_size--heading-1); line-height: var(--bds-font_line-height--heading); font-weight: var(--bds-font_weight--bold); }
+    .header.--small  .subtitle { font-size: var(--bds-font_size--body); line-height: 1.4; }
+
+    .header.--medium .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); }
+    .header.--medium .subtitle { font-size: var(--bds-font_size--heading-3); line-height: 1.3; }
+
+    .header.--large  .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--bds-font_size--heading-2); line-height: 1.3; font-weight: var(--bds-font_weight--medium); }
+  `;
+  static properties = {
+    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.title = "";
+    this.subtitle = "";
+    this.alignment = "start";
+    this.size = "medium";
+    this.titleAs = "h2";
+  }
+  render() {
+    const tag = s(this.titleAs || "h2");
+    return T`
+      <div class="header --${this.alignment} --${this.size}">
+        ${u`<${tag} class="title">${this.title}</${tag}>`}
+        ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-section-header", BdsSectionHeader);
+
+export {
+  BdsSectionHeader
+};