@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-slider/rel-slider.ts

@@ -1,673 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-/**
- * "continuous"/"discrete" are the legacy tick-mode values; Figma's Type axis
- * adds "default" (alias of continuous) and "range" (dual-thumb interval).
- */
-export type SliderType = "continuous" | "discrete" | "default" | "range";
-export type TrackStyle = "solid" | "dotted";
-
-@customElement("rel-slider")
-export class RelSlider extends LitElement {
-  @property({ type: String, reflect: true }) type: SliderType = "continuous";
-
-  /** Figma Size axis (S/M/L): scales track, thumb and ticks. */
-  @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
-
-  @property({ type: Number }) min: number = 0;
-
-  @property({ type: Number }) max: number = 100;
-
-  @property({ type: Number }) step: number = 1;
-
-  @property({ type: Boolean }) disabled: boolean = false;
-
-  @property({ type: String }) track: TrackStyle = "solid";
-
-  @property({ type: Boolean }) showTickLabels: boolean = false;
-
-  @property({ type: Boolean }) showBubble: boolean = true;
-
-  @property({ type: Number }) value: number = 0;
-
-  /** Upper value when type="range" (attribute value-end). */
-  @property({ type: Number, attribute: "value-end" }) valueEnd: number = 100;
-
-  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
-
-  @state() private ticks: number[] = [];
-
-  private _onChange: (value: number) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      --track-height: 8px;
-      --thumb-size: 20px;
-      --thumb-stroke: 7px;
-      --thumb-halo-color: var(--rel-border-default);
-      --tick-size: 4px;
-      --shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-      --halo: 0 2px 0 var(--rel-bg-neutral-elevated-1), 0 6px 10px rgba(0, 0, 0, 0.07);
-      --marker-width: 24px;
-      --marker-height: 28px;
-
-      display: block;
-      font-family: var(--rel-label-md-font-family);
-      font-weight: var(--rel-label-md-font-weight);
-      font-size: var(--rel-label-md-font-size);
-      line-height: var(--rel-label-md-line-height);
-      letter-spacing: var(--rel-label-md-letter-spacing);
-    }
-
-    /* Figma Size axis: S = 6px track / 16px thumb · M = 8/20 · L = 10/24 */
-    :host([size="sm"]) {
-      --track-height: 6px;
-      --thumb-size: 16px;
-      --tick-size: 4px;
-    }
-
-    :host([size="md"]) {
-      --track-height: 8px;
-      --thumb-size: 20px;
-      --tick-size: 5px;
-    }
-
-    :host([size="lg"]) {
-      --track-height: 10px;
-      --thumb-size: 24px;
-      --tick-size: 6px;
-    }
-
-    .rel-slider {
-      position: relative;
-      width: 100%;
-      height: 60px;
-      user-select: none;
-    }
-
-    /* Track */
-    .track {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      height: var(--track-height);
-      background: var(--rel-bg-neutral-elevated-3);
-      border-radius: 2px;
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .track-active {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      height: var(--track-height);
-      background: var(--rel-text-default);
-      border-radius: 2px;
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .track-active.dotted {
-      background: radial-gradient(
-        circle,
-        var(--rel-text-default) 0 2px,
-        transparent 2px
-      ) 0 50%/var(--rel-spacing-sm) 5px repeat-x;
-    }
-
-    /* Range mode: pointer interaction is handled by the container so each
-       thumb can be grabbed; the native inputs stay for keyboard/AT. */
-    .rel-slider.range .slider-input {
-      pointer-events: none;
-    }
-
-    .rel-slider.range {
-      touch-action: none;
-    }
-
-    /* Input */
-    .slider-input {
-      -webkit-appearance: none;
-      appearance: none;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      left: 0;
-      height: 100%;
-      background: transparent;
-      outline: none;
-      cursor: pointer;
-      z-index: 2;
-      margin: 0;
-      padding: 0;
-    }
-
-    .slider-input::-webkit-slider-runnable-track {
-      background: transparent;
-      height: 100%;
-      border: none;
-    }
-
-    .slider-input::-moz-range-track {
-      background: transparent;
-      height: 100%;
-      border: none;
-    }
-
-    .slider-input::slider-track {
-      background: transparent;
-      height: 100%;
-      border: none;
-    }
-
-    /* Hide native thumb */
-    .slider-input::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 1px;
-      height: 1px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-    }
-
-    .slider-input::-moz-range-thumb {
-      width: 1px;
-      height: 1px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-    }
-
-    .slider-input::slider-thumb {
-      width: 1px;
-      height: 1px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-    }
-
-    .slider-input:focus-visible ~ .thumb-container .custom-thumb {
-      box-shadow: 0 0 0 var(--thumb-stroke) var(--thumb-halo-color),
-        var(--shadow), var(--halo);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .custom-thumb,
-      .tick {
-        transition: none;
-      }
-    }
-
-    /* Custom Thumb Container */
-    .thumb-container {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translate(-50%, calc(-100% + var(--thumb-size) / 2));
-      pointer-events: none;
-      z-index: 5;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0;
-    }
-
-    /* Value Marker */
-    .value-marker {
-      width: var(--marker-width);
-      height: var(--marker-height);
-      margin-bottom: var(--rel-spacing-3xs);
-    }
-
-    .value-marker text {
-      font-family: var(--rel-label-sm-font-family);
-      font-weight: var(--rel-label-sm-font-weight);
-      font-size: var(--rel-label-sm-font-size);
-      line-height: var(--rel-label-sm-line-height);
-    }
-
-    .value-marker svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    /* Custom Thumb */
-    .custom-thumb {
-      width: var(--thumb-size);
-      height: var(--thumb-size);
-      background: var(--rel-border-strong);
-      border-radius: 50%;
-      transition: box-shadow 0.15s ease;
-    }
-
-    .slider-input:hover:not(:disabled) ~ .thumb-container .custom-thumb {
-      box-shadow: 0 0 0 var(--thumb-stroke) var(--rel-action-overlay-hover),
-        var(--shadow), var(--halo);
-    }
-
-    .slider-input:active ~ .thumb-container .custom-thumb {
-      box-shadow: 0 0 0 var(--thumb-stroke) var(--rel-action-overlay-pressed),
-        var(--shadow), var(--halo);
-    }
-
-    /* Ticks */
-    .ticks {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .tick {
-      position: absolute;
-      width: var(--tick-size);
-      height: var(--tick-size);
-      background: var(--rel-text-default);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      transition: background 0.2s;
-      z-index: 3;
-    }
-
-    .tick.active {
-      background: var(--rel-bg-neutral);
-    }
-
-    /* Tick labels */
-    .tick-labels {
-      position: absolute;
-      top: calc(50% + var(--tick-size) + var(--rel-spacing-2xs));
-      left: 0;
-      width: 100%;
-      color: var(--rel-text-label);
-      pointer-events: none;
-      font-family: var(--rel-label-xs-font-family);
-      font-weight: var(--rel-label-xs-font-weight);
-      font-size: var(--rel-label-xs-font-size);
-      line-height: var(--rel-label-xs-line-height);
-      letter-spacing: var(--rel-label-xs-letter-spacing);
-    }
-
-    .tick-label {
-      position: absolute;
-      transform: translateX(-50%);
-    }
-
-    /* Disabled State */
-    .rel-slider.disabled .track {
-      background: var(--rel-border-default);
-    }
-
-    .rel-slider.disabled .track-active {
-      background: var(--rel-text-placeholder);
-    }
-
-    .rel-slider.disabled .track-active.dotted {
-      background: radial-gradient(
-            circle,
-            var(--rel-bg-neutral-elevated-1) 0 1px,
-            transparent 1px
-          )
-          center/var(--rel-spacing-sm) 4px repeat-x,
-        var(--rel-text-placeholder);
-    }
-
-    .rel-slider.disabled .tick {
-      background: var(--rel-text-placeholder);
-    }
-
-    .rel-slider.disabled .tick-label {
-      color: var(--rel-text-placeholder);
-    }
-
-    .rel-slider.disabled .slider-input {
-      cursor: not-allowed;
-    }
-
-    .rel-slider.disabled .custom-thumb {
-      background: var(--rel-text-placeholder);
-      box-shadow: none;
-    }
-
-    .rel-slider.disabled .slider-input:active ~ .thumb-container .custom-thumb,
-    .rel-slider.disabled .slider-input:focus-visible ~ .thumb-container .custom-thumb {
-      box-shadow: none;
-    }
-
-    .rel-slider.disabled .value-marker svg path {
-      fill: var(--rel-text-placeholder);
-    }
-
-    /* Dark mode overrides */
-    :host-context([data-theme="dark"]),
-    :host-context(.dark) {
-      --thumb-halo-color: var(--rel-border-default);
-      --halo: 0 2px 0 var(--rel-bg-neutral-elevated-2),
-              0 6px 10px rgba(0, 0, 0, 0.3);
-    }
-
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setupTicks();
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    if (
-      changedProperties.has("type") ||
-      changedProperties.has("min") ||
-      changedProperties.has("max") ||
-      changedProperties.has("step")
-    ) {
-      this.setupTicks();
-    }
-    if (
-      changedProperties.has("value") ||
-      changedProperties.has("valueEnd") ||
-      changedProperties.has("type")
-    ) {
-      this.updateActiveWidth();
-    }
-  }
-
-  private get isRange(): boolean {
-    return this.type === "range";
-  }
-
-  private get percentage(): number {
-    if (this.max === this.min) return 0;
-    return ((this.value - this.min) / (this.max - this.min)) * 100;
-  }
-
-  private get percentageEnd(): number {
-    if (this.max === this.min) return 0;
-    return ((this.valueEnd - this.min) / (this.max - this.min)) * 100;
-  }
-
-  private dragThumb: "start" | "end" | null = null;
-
-  private valueFromPointer(e: PointerEvent): number {
-    const el = this.shadowRoot?.querySelector(".rel-slider") as HTMLElement;
-    if (!el) return this.min;
-    const rect = el.getBoundingClientRect();
-    const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
-    let v = this.min + pct * (this.max - this.min);
-    v = Math.round(v / this.step) * this.step;
-    return Math.min(this.max, Math.max(this.min, v));
-  }
-
-  private onRangePointerDown(e: PointerEvent) {
-    if (!this.isRange || this.disabled) return;
-    const v = this.valueFromPointer(e);
-    this.dragThumb =
-      Math.abs(v - this.value) <= Math.abs(v - this.valueEnd) ? "start" : "end";
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-    this.applyRangeValue(v);
-  }
-
-  private onRangePointerMove(e: PointerEvent) {
-    if (!this.dragThumb) return;
-    this.applyRangeValue(this.valueFromPointer(e));
-  }
-
-  private onRangePointerUp() {
-    this.dragThumb = null;
-  }
-
-  private applyRangeValue(v: number) {
-    if (this.dragThumb === "start") {
-      this.value = Math.min(v, this.valueEnd);
-    } else if (this.dragThumb === "end") {
-      this.valueEnd = Math.max(v, this.value);
-    }
-    this.updateActiveWidth();
-    this.emitRangeChange();
-  }
-
-  private emitRangeChange() {
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: this.value, valueEnd: this.valueEnd },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this._onChange(this.value);
-  }
-
-  private onRangeInputStart(ev: Event) {
-    const next = Number((ev.target as HTMLInputElement).value);
-    this.value = Math.min(next, this.valueEnd);
-    this.updateActiveWidth();
-    this.emitRangeChange();
-  }
-
-  private onRangeInputEnd(ev: Event) {
-    const next = Number((ev.target as HTMLInputElement).value);
-    this.valueEnd = Math.max(next, this.value);
-    this.updateActiveWidth();
-    this.emitRangeChange();
-  }
-
-  private setupTicks() {
-    if (this.type !== "discrete") {
-      this.ticks = [];
-      return;
-    }
-
-    const step = Math.max(1, this.step);
-    const ticks: number[] = [];
-    for (let v = this.min; v <= this.max; v += step) {
-      ticks.push(v);
-    }
-    if (ticks[ticks.length - 1] !== this.max) {
-      ticks.push(this.max);
-    }
-    this.ticks = ticks;
-  }
-
-  private getTickLeftPct(tick: number): number {
-    const pct = ((tick - this.min) / (this.max - this.min)) * 100;
-    return Math.round(pct * 1000) / 1000;
-  }
-
-  private isTickActive(tick: number): boolean {
-    return tick <= this.value;
-  }
-
-  private onInput(ev: Event) {
-    const el = ev.target as HTMLInputElement;
-    let next = Number(el.value);
-
-    if (this.type === "discrete") {
-      const snapped =
-        Math.round((next - this.min) / this.step) * this.step + this.min;
-      next = Math.min(this.max, Math.max(this.min, snapped));
-      el.value = String(next);
-    }
-
-    this.value = next;
-    this.updateActiveWidth();
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this._onChange(this.value);
-  }
-
-  registerOnChange(fn: (value: number) => void): void { this._onChange = fn; }
-  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
-  writeValue(value: number): void { this.value = value; }
-
-  private updateActiveWidth() {
-    const activeEl = this.shadowRoot?.querySelector(".track-active") as HTMLDivElement;
-    if (!activeEl) return;
-
-    if (this.isRange) {
-      activeEl.style.left = `${this.percentage}%`;
-      activeEl.style.width = `${Math.max(0, this.percentageEnd - this.percentage)}%`;
-    } else if (this.type === "discrete") {
-      const stepPercent = (this.step / (this.max - this.min)) * 100;
-      const snappedPct = Math.round(this.percentage / stepPercent) * stepPercent;
-      activeEl.style.width = `${snappedPct}%`;
-    } else {
-      activeEl.style.width = `${this.percentage}%`;
-    }
-  }
-
-  private renderThumbContainer(pct: number = this.percentage, val: number = this.value) {
-    return html`
-      <div class="thumb-container" style="left: ${pct}%">
-        ${this.showBubble ? html`
-          <div class="value-marker">
-            <svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M12 0C18.6274 0 24 5.37258 24 12C24 21 12 32 12 32C12 32 0 21 0 12C0 5.37258 5.37258 0 12 0Z"
-                fill="var(--rel-bg-neutral-inverse-2)" />
-              <text
-                x="12"
-                y="16"
-                text-anchor="middle"
-                fill="var(--rel-text-inverse)"
-                font-size="12"
-                font-family="Poppins"
-                font-weight="600">
-                ${val}
-              </text>
-            </svg>
-          </div>
-        ` : ""}
-        <div part="thumb" class="custom-thumb"></div>
-      </div>
-    `;
-  }
-
-  private renderTicks() {
-    if (this.type !== "discrete") return "";
-
-    return html`
-      <div class="ticks">
-        ${this.ticks.map(
-          (tick) => html`
-            <div
-              class="tick ${this.isTickActive(tick) ? "active" : ""}"
-              style="left: ${this.getTickLeftPct(tick)}%"></div>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  private renderTickLabels() {
-    if (this.type !== "discrete" || !this.showTickLabels) return "";
-
-    return html`
-      <div class="tick-labels">
-        ${this.ticks.map(
-          (tick) => html`
-            <div
-              class="tick-label"
-              style="left: ${this.getTickLeftPct(tick)}%">
-              ${tick}
-            </div>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    const sliderClasses = [
-      "rel-slider",
-      this.disabled ? "disabled" : "",
-      this.type === "discrete" ? "has-ticks" : "",
-      this.isRange ? "range" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const trackActiveClasses = [
-      "track-active",
-      this.track === "dotted" ? "dotted" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    if (this.isRange) {
-      return html`
-        <div
-          class="${sliderClasses}"
-          @pointerdown="${this.onRangePointerDown}"
-          @pointermove="${this.onRangePointerMove}"
-          @pointerup="${this.onRangePointerUp}"
-          @pointercancel="${this.onRangePointerUp}"
-        >
-          <div part="track" class="track"></div>
-          <div class="${trackActiveClasses}"></div>
-
-          <input
-            class="slider-input"
-            type="range"
-            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} minimum` : "Minimum value"}"
-            .min="${String(this.min)}"
-            .max="${String(this.max)}"
-            .step="${String(this.step)}"
-            .value="${String(this.value)}"
-            ?disabled="${this.disabled}"
-            @input="${this.onRangeInputStart}"
-            @blur="${() => this._onTouched()}" />
-          <input
-            class="slider-input"
-            type="range"
-            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} maximum` : "Maximum value"}"
-            .min="${String(this.min)}"
-            .max="${String(this.max)}"
-            .step="${String(this.step)}"
-            .value="${String(this.valueEnd)}"
-            ?disabled="${this.disabled}"
-            @input="${this.onRangeInputEnd}"
-            @blur="${() => this._onTouched()}" />
-
-          ${this.renderThumbContainer(this.percentage, this.value)}
-          ${this.renderThumbContainer(this.percentageEnd, this.valueEnd)}
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="${sliderClasses}">
-        <div part="track" class="track"></div>
-        <div class="${trackActiveClasses}"></div>
-
-        <input
-          class="slider-input"
-          type="range"
-          aria-label="${this.fieldAriaLabel || nothing}"
-          .min="${String(this.min)}"
-          .max="${String(this.max)}"
-          .step="${this.type === 'discrete' ? String(this.step) : '1'}"
-          .value="${String(this.value)}"
-          ?disabled="${this.disabled}"
-          @input="${this.onInput}"
-          @blur="${() => this._onTouched()}" />
-
-        ${this.renderThumbContainer()}
-        ${this.renderTicks()}
-        ${this.renderTickLabels()}
-      </div>
-    `;
-  }
-}