@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,186 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-number-input.ts
+var BdsNumberInput = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+    }
+
+    .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: 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));
+      text-align: center;
+      -moz-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 {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 1px;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border-radius: var(--bds-border_radius--xs);
+      cursor: pointer;
+      flex-shrink: 0;
+      color: var(--bds-color_interactive);
+      transition: var(--bds-animation_transition);
+    }
+
+    .stepper:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .stepper:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .stepper:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .stepper svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = 0;
+    this.min = void 0;
+    this.max = void 0;
+    this.step = 1;
+    this.disabled = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(String(this.value));
+    }
+  }
+  formResetCallback() {
+    this.value = 0;
+    this._internals.setFormValue?.("0");
+  }
+  _clamp(v) {
+    let result = v;
+    if (this.min !== void 0) result = Math.max(this.min, result);
+    if (this.max !== void 0) result = Math.min(this.max, result);
+    return result;
+  }
+  _adjust(delta) {
+    const next = this._clamp(this.value + delta);
+    this.value = next;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  }
+  _handleChange(e) {
+    const v = parseFloat(e.target.value);
+    this.value = this._clamp(isNaN(v) ? 0 : v);
+  }
+  render() {
+    const atMin = this.min !== void 0 && this.value <= this.min;
+    const atMax = this.max !== void 0 && this.value >= this.max;
+    return T`
+      <div class="row">
+        <button
+          type="button"
+          class="stepper"
+          aria-label="Decrease"
+          tabindex="-1"
+          ?disabled=${this.disabled || atMin}
+          @click=${() => this._adjust(-this.step)}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+          </svg>
+        </button>
+        <input
+          type="number"
+          class="input"
+          name=${this.name}
+          .value=${String(this.value)}
+          min=${this.min ?? ""}
+          max=${this.max ?? ""}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        />
+        <button
+          type="button"
+          class="stepper"
+          aria-label="Increase"
+          tabindex="-1"
+          ?disabled=${this.disabled || atMax}
+          @click=${() => this._adjust(this.step)}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-number-input", BdsNumberInput);
+
+export {
+  BdsNumberInput
+};

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