@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,105 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-progress.ts
+var BdsProgress = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xxs);
+      inline-size: 100%;
+    }
+
+    .label-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg);
+    }
+
+    .value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .track {
+      inline-size: 100%;
+      block-size: var(--progress_height, var(--bds-space_xs));
+      background-color: var(--bds-color_bg--subtle);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+
+    :host([size='small'])  .track { --progress_height: var(--bds-space_xxs); }
+    :host([size='medium']) .track { --progress_height: var(--bds-space_xs); }
+    :host([size='large'])  .track { --progress_height: var(--bds-space_s); }
+
+    .fill {
+      block-size: 100%;
+      background-color: var(--progress_color-active, var(--bdc-color_active));
+      border-radius: 999px;
+      transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    value: { type: Number },
+    max: { type: Number },
+    label: { type: String },
+    showLabel: { type: Boolean, attribute: "show-label", reflect: true },
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.label = "";
+    this.showLabel = false;
+    this.size = "medium";
+  }
+  get _percentage() {
+    return Math.min(100, Math.max(0, this.value / this.max * 100));
+  }
+  render() {
+    const pct = this._percentage;
+    return T`
+      <div class="container">
+        ${this.showLabel ? T`
+              <div class="label-row">
+                <span class="label">${this.label}</span>
+                <span class="value">${Math.round(pct)}%</span>
+              </div>
+            ` : A}
+        <div
+          class="track"
+          role="progressbar"
+          aria-label=${this.label}
+          aria-valuenow=${this.value}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+        >
+          <div class="fill" style="inline-size: ${pct}%"></div>
+        </div>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-progress", BdsProgress);
+
+export {
+  BdsProgress
+};

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

@@ -0,0 +1,169 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-segmented-control.ts
+var BdsSegmentedControl = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .control {
+      display: inline-flex;
+      position: relative;
+      border-radius: var(--bds-border_radius--s);
+      background-color: var(--segmented_color_bg, var(--bds-color_bg--subtle));
+      padding: 0.25rem;
+      gap: 0;
+    }
+
+    /* Sliding thumb */
+    .thumb {
+      position: absolute;
+      inset-block: 0.25rem;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      background-color: var(--segmented_thumb-color, var(--bds-color_bg));
+      box-shadow: var(--bds-shadow_m);
+      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      pointer-events: none;
+      /* Position set via JS in updated() */
+    }
+
+    .radio {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      margin: 0;
+    }
+
+    .item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--bds-space_xs) var(--bds-space_m);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--segmented_color, var(--bds-color_on-bg));
+      cursor: pointer;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .item.--active {
+      color: var(--segmented_color--active, var(--bds-color_interactive_on-bg));
+    }
+
+    .item.--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .radio:focus-visible + .item-label {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    options: { type: String },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.options = "[]";
+    this.disabled = false;
+  }
+  get _options() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value") || changed.has("options")) {
+      this._internals.setFormValue?.(this.value || null);
+      this._updateThumb();
+    }
+  }
+  _updateThumb() {
+    const opts = this._options;
+    const selectedIndex = Math.max(0, opts.findIndex((o) => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll(".item");
+    const thumb = this.shadowRoot?.querySelector(".thumb");
+    if (!items || !thumb || items.length === 0) return;
+    const item = items[selectedIndex];
+    if (!item) return;
+    const controlRect = item.parentElement.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    thumb.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
+    thumb.style.inlineSize = `${itemRect.width}px`;
+  }
+  formResetCallback() {
+    const firstOption = this._options[0];
+    this.value = firstOption?.value ?? "";
+    this._internals.setFormValue?.(this.value || null);
+  }
+  _handleChange(optionValue) {
+    this.value = optionValue;
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  render() {
+    const opts = this._options;
+    return T`
+      <div class="control" role="group">
+        <span class="thumb" aria-hidden="true"></span>
+        ${opts.map((opt, i3) => {
+      const id = `bds-seg-${this._uid}-${i3}`;
+      const isActive = opt.value === this.value;
+      const isDisabled = this.disabled || opt.disabled;
+      return T`
+            <label
+              class="item ${isActive ? "--active" : ""} ${isDisabled ? "--disabled" : ""}"
+              for=${id}
+            >
+              <input
+                id=${id}
+                type="radio"
+                class="radio"
+                name=${this.name || this._uid}
+                value=${opt.value}
+                .checked=${isActive}
+                ?disabled=${isDisabled}
+                @change=${() => this._handleChange(opt.value)}
+              />
+              ${opt.label}
+            </label>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-segmented-control", BdsSegmentedControl);
+
+export {
+  BdsSegmentedControl
+};

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

@@ -0,0 +1,111 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tabs.ts
+var BdsTabs = class extends i2 {
+  static styles = i`
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tablist {
+      display: flex;
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      gap: var(--bds-space_xxs);
+    }
+  `;
+  _activeIndex = 0;
+  _mo = null;
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("bds-tab-select", this._handleTabSelect);
+    this.addEventListener("keydown", this._handleKeydown);
+    this._mo = new MutationObserver(() => {
+      this._applyState();
+    });
+    this._mo.observe(this, { childList: true, subtree: false });
+    Promise.resolve().then(() => this._applyState());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("bds-tab-select", this._handleTabSelect);
+    this.removeEventListener("keydown", this._handleKeydown);
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+  get _tabs() {
+    return [...this.querySelectorAll("bds-tab")];
+  }
+  get _panels() {
+    return [...this.querySelectorAll("bds-tab-panel")];
+  }
+  get _enabledIndexes() {
+    return this._tabs.map((tab, i3) => ({ tab, i: i3 })).filter(({ tab }) => !tab.disabled).map(({ i: i3 }) => i3);
+  }
+  _applyState() {
+    const tabs = this._tabs;
+    const panels = this._panels;
+    if (this._activeIndex >= tabs.length) {
+      this._activeIndex = Math.max(0, tabs.length - 1);
+    }
+    tabs.forEach((tab, i3) => {
+      tab.selected = i3 === this._activeIndex;
+    });
+    panels.forEach((panel, i3) => {
+      if (i3 === this._activeIndex) {
+        panel.removeAttribute("hidden");
+      } else {
+        panel.setAttribute("hidden", "");
+      }
+    });
+  }
+  _handleTabSelect = (e) => {
+    const tab = e.target;
+    const index = this._tabs.indexOf(tab);
+    if (index !== -1 && !tab.disabled) {
+      this._activeIndex = index;
+      this._applyState();
+    }
+  };
+  _handleKeydown = (e) => {
+    const enabled = this._enabledIndexes;
+    if (!enabled.length) return;
+    const pos = enabled.indexOf(this._activeIndex);
+    let next = -1;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      next = enabled[(pos + 1) % enabled.length];
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      next = enabled[(pos - 1 + enabled.length) % enabled.length];
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      next = enabled[0];
+    } else if (e.key === "End") {
+      e.preventDefault();
+      next = enabled[enabled.length - 1];
+    }
+    if (next !== -1) {
+      this._activeIndex = next;
+      this._applyState();
+      this._tabs[next]?.focusButton?.();
+    }
+  };
+  render() {
+    return T`
+      <div class="tablist" role="tablist">
+        <slot name="tab"></slot>
+      </div>
+      <slot name="panel"></slot>
+    `;
+  }
+};
+customElements.define("bds-tabs", BdsTabs);
+
+export {
+  BdsTabs
+};