@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,281 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-combobox.ts
+var BdsCombobox = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrapper {
+      position: relative;
+    }
+
+    .input {
+      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);
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: var(--combobox_radius, var(--bdc-outline_radius));
+      box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
+      background-color: var(--combobox_color_bg, var(--bds-color_bg));
+      color: var(--combobox_color, var(--bds-color_on-bg));
+      box-sizing: border-box;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .input: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: currentcolor;
+    }
+
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    .listbox {
+      position: absolute;
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 0;
+      inline-size: 100%;
+      max-block-size: 15rem;
+      overflow-y: auto;
+      background-color: var(--combobox_list-bg, var(--bds-color_bg));
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_m);
+      z-index: var(--combobox_z-index, 100);
+      padding-block: var(--bds-space_xs);
+    }
+
+    .option {
+      display: block;
+      padding: var(--bds-space_s) var(--bds-space_m);
+      cursor: pointer;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      color: var(--bds-color_on-bg);
+      transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .option:hover,
+    .option[aria-selected='true'] {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    .option[aria-disabled='true'] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .option.--focused {
+      background-color: var(--bds-color_bg--subtle);
+      outline: none;
+    }
+
+    .no-results {
+      padding: var(--bds-space_s) var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg--subtle);
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    options: { type: String },
+    placeholder: { type: String },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _open = false;
+  _query = "";
+  _focusedIndex = -1;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.options = "[]";
+    this.placeholder = "";
+    this.disabled = false;
+  }
+  get _options() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  get _filtered() {
+    const q = this._query.toLowerCase();
+    return q ? this._options.filter((o) => o.label.toLowerCase().includes(q)) : this._options;
+  }
+  get _displayLabel() {
+    if (this.value) {
+      return this._options.find((o) => o.value === this.value)?.label ?? "";
+    }
+    return "";
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._query = "";
+    this._open = false;
+    this._internals.setFormValue?.(null);
+    this.requestUpdate();
+  }
+  _openList() {
+    this._open = true;
+    this._focusedIndex = this._filtered.findIndex((o) => o.value === this.value);
+    this.requestUpdate();
+  }
+  _closeList() {
+    this._open = false;
+    this._query = "";
+    this._focusedIndex = -1;
+    this.requestUpdate();
+  }
+  _selectOption(opt) {
+    if (opt.disabled) return;
+    this.value = opt.value;
+    this._closeList();
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      bubbles: true,
+      composed: true,
+      detail: { value: opt.value, label: opt.label }
+    }));
+  }
+  _handleInput(e) {
+    this._query = e.target.value;
+    this._open = true;
+    this._focusedIndex = -1;
+    this.requestUpdate();
+  }
+  _handleFocus() {
+    this._openList();
+  }
+  _handleBlur() {
+    setTimeout(() => {
+      this._closeList();
+    }, 150);
+  }
+  _handleKeydown(e) {
+    const filtered = this._filtered;
+    if (!this._open) {
+      if (e.key === "ArrowDown" || e.key === "Enter") {
+        e.preventDefault();
+        this._openList();
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      let next = this._focusedIndex + 1;
+      while (next < filtered.length && filtered[next].disabled) next++;
+      if (next < filtered.length) this._focusedIndex = next;
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      let prev = this._focusedIndex - 1;
+      while (prev >= 0 && filtered[prev].disabled) prev--;
+      if (prev >= 0) this._focusedIndex = prev;
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (this._focusedIndex >= 0 && this._focusedIndex < filtered.length) {
+        this._selectOption(filtered[this._focusedIndex]);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this._closeList();
+    }
+    this.requestUpdate();
+  }
+  render() {
+    const filtered = this._filtered;
+    const inputValue = this._open ? this._query : this._displayLabel;
+    return T`
+      <div class="wrapper">
+        <input
+          type="text"
+          class="input"
+          role="combobox"
+          aria-expanded=${this._open}
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          name=${this.name}
+          placeholder=${this.placeholder}
+          .value=${inputValue}
+          ?disabled=${this.disabled}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          @keydown=${this._handleKeydown}
+        />
+        <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>
+        ${this._open ? T`
+          <ul class="listbox" role="listbox" aria-label="Options">
+            ${filtered.length === 0 ? T`<li class="no-results">No results</li>` : filtered.map((opt, i3) => T`
+                  <li
+                    class="option ${i3 === this._focusedIndex ? "--focused" : ""}"
+                    role="option"
+                    aria-selected=${opt.value === this.value}
+                    aria-disabled=${opt.disabled ?? false}
+                    @mousedown=${(e) => {
+      e.preventDefault();
+      this._selectOption(opt);
+    }}
+                  >${opt.label}</li>
+                `)}
+          </ul>
+        ` : ""}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-combobox", BdsCombobox);
+
+export {
+  BdsCombobox
+};

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

@@ -0,0 +1,119 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-progress-circle.ts
+var SIZE_PX = { small: 40, medium: 64, large: 96 };
+var STROKE_WIDTH = 4;
+var BdsProgressCircle = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .svg {
+      display: block;
+    }
+
+    .track {
+      stroke: var(--bds-color_bg--subtle);
+    }
+
+    .fill {
+      stroke: var(--progressCircle_color-active, var(--bdc-color_active));
+      transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .value {
+      position: absolute;
+      font-size: var(--bds-font_size--body--s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-variant-numeric: tabular-nums;
+      color: var(--bds-color_on-bg);
+      line-height: 1;
+    }
+
+    :host([size='small'])  .value { font-size: 0.5rem; }
+    :host([size='large'])  .value { font-size: var(--bds-font_size--body); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    value: { type: Number },
+    max: { type: Number },
+    label: { type: String },
+    showValue: { type: Boolean, attribute: "show-value", reflect: true },
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.label = "";
+    this.showValue = false;
+    this.size = "medium";
+  }
+  render() {
+    const percentage = Math.min(100, Math.max(0, this.value / this.max * 100));
+    const px = SIZE_PX[this.size] ?? SIZE_PX.medium;
+    const radius = (px - STROKE_WIDTH * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - percentage / 100 * circumference;
+    const cx = px / 2;
+    return T`
+      <div
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        style="position: relative; display: inline-flex; align-items: center; justify-content: center;"
+      >
+        <svg
+          class="svg"
+          width=${px}
+          height=${px}
+          viewBox="0 0 ${px} ${px}"
+          aria-hidden="true"
+        >
+          <circle
+            class="track"
+            cx=${cx}
+            cy=${cx}
+            r=${radius}
+            stroke-width=${STROKE_WIDTH}
+            fill="none"
+          />
+          <circle
+            class="fill"
+            cx=${cx}
+            cy=${cx}
+            r=${radius}
+            stroke-width=${STROKE_WIDTH}
+            fill="none"
+            stroke-dasharray=${circumference}
+            stroke-dashoffset=${offset}
+            stroke-linecap="round"
+            transform="rotate(-90 ${cx} ${cx})"
+          />
+        </svg>
+        ${this.showValue ? T`<span class="value" aria-hidden="true">${Math.round(percentage)}%</span>` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-progress-circle", BdsProgressCircle);
+
+export {
+  BdsProgressCircle
+};

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

@@ -0,0 +1,45 @@
+import {
+  T,
+  b,
+  w
+} from "./chunk-LGEZYFUU.js";
+
+// node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/static.js
+var a = /* @__PURE__ */ Symbol.for("");
+var o = (t) => {
+  if (t?.r === a) return t?._$litStatic$;
+};
+var s = (t) => ({ _$litStatic$: t, r: a });
+var l = /* @__PURE__ */ new Map();
+var n = (t) => (r, ...e) => {
+  const a2 = e.length;
+  let s2, i;
+  const n2 = [], u2 = [];
+  let c2, $2 = 0, f = false;
+  for (; $2 < a2; ) {
+    for (c2 = r[$2]; $2 < a2 && void 0 !== (i = e[$2], s2 = o(i)); ) c2 += s2 + r[++$2], f = true;
+    $2 !== a2 && u2.push(i), n2.push(c2), $2++;
+  }
+  if ($2 === a2 && n2.push(r[a2]), f) {
+    const t2 = n2.join("$$lit$$");
+    void 0 === (r = l.get(t2)) && (n2.raw = n2, l.set(t2, r = n2)), e = u2;
+  }
+  return t(r, ...e);
+};
+var u = n(T);
+var c = n(b);
+var $ = n(w);
+
+export {
+  s,
+  u
+};
+/*! Bundled license information:
+
+lit-html/node/static.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

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

@@ -0,0 +1,88 @@
+import {
+  s,
+  u
+} from "./chunk-QPOKHLMQ.js";
+import {
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-typography.ts
+var VARIANT_TAG = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  body: "p",
+  body_s: "p"
+};
+var BdsTypography = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .typography {
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      color: var(--typography_color, var(--bds-color_on-bg));
+    }
+
+    .typography.--h1 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-1);
+      font-weight: var(--bds-font_weight--bold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h2 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-2);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h3 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-3);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--body {
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    .typography.--body_s {
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    component: { type: String }
+  };
+  constructor() {
+    super();
+    this.variant = "body";
+    this.component = "";
+  }
+  get _tag() {
+    if (this.component) return this.component;
+    return VARIANT_TAG[this.variant] ?? "p";
+  }
+  render() {
+    const tag = s(this._tag);
+    const variant = s(this.variant);
+    return u`
+      <${tag} class="typography --${variant}">
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+};
+customElements.define("bds-typography", BdsTypography);
+
+export {
+  BdsTypography
+};

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