@reliability-design/web 1.3.1 → 1.4.0

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

@@ -1,13 +1,19 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
-export type SliderType = "continuous" | "discrete";
+/**
+ * "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 }) type: SliderType = "continuous";
+  @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;
 
@@ -21,10 +27,13 @@ export class RelSlider extends LitElement {
 
   @property({ type: Boolean }) showTickLabels: boolean = false;
 
-  @property({ type: Boolean }) showBubble: boolean = true;  
+  @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;
+
   @state() private ticks: number[] = [];
 
   private _onChange: (value: number) => void = () => {};
@@ -32,18 +41,42 @@ export class RelSlider extends LitElement {
 
   static styles = css`
     :host {
-      --track-height: 5px;
-      --thumb-size: 10px;
+      color: var(--rel-text-default);
+      --track-height: 8px;
+      --thumb-size: 20px;
       --thumb-stroke: 7px;
-      --thumb-halo-color: var(--rel-color-border-default);
+      --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-color-bg-tertiary), 0 6px 10px rgba(0, 0, 0, 0.07);
+      --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-fontFamilies-primary);
+      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 {
@@ -60,7 +93,7 @@ export class RelSlider extends LitElement {
       left: 0;
       width: 100%;
       height: var(--track-height);
-      background: var(--rel-color-border-default);
+      background: var(--rel-bg-neutral-elevated-3);
       border-radius: 2px;
       transform: translateY(-50%);
       pointer-events: none;
@@ -71,7 +104,7 @@ export class RelSlider extends LitElement {
       top: 50%;
       left: 0;
       height: var(--track-height);
-      background: var(--rel-color-text-primary);
+      background: var(--rel-text-default);
       border-radius: 2px;
       transform: translateY(-50%);
       pointer-events: none;
@@ -80,9 +113,19 @@ export class RelSlider extends LitElement {
     .track-active.dotted {
       background: radial-gradient(
         circle,
-        var(--rel-color-text-primary) 0 2px,
+        var(--rel-text-default) 0 2px,
         transparent 2px
-      ) 0 50%/12px 5px repeat-x;
+      ) 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 */
@@ -177,7 +220,14 @@ export class RelSlider extends LitElement {
     .value-marker {
       width: var(--marker-width);
       height: var(--marker-height);
-      margin-bottom: 4px;
+      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 {
@@ -190,13 +240,18 @@ export class RelSlider extends LitElement {
     .custom-thumb {
       width: var(--thumb-size);
       height: var(--thumb-size);
-      background: var(--rel-color-text-primary);
+      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(--thumb-halo-color),
+      box-shadow: 0 0 0 var(--thumb-stroke) var(--rel-action-overlay-pressed),
         var(--shadow), var(--halo);
     }
 
@@ -214,7 +269,7 @@ export class RelSlider extends LitElement {
       position: absolute;
       width: var(--tick-size);
       height: var(--tick-size);
-      background: var(--rel-color-text-primary);
+      background: var(--rel-text-default);
       border-radius: 50%;
       transform: translate(-50%, -50%);
       transition: background 0.2s;
@@ -222,18 +277,22 @@ export class RelSlider extends LitElement {
     }
 
     .tick.active {
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-neutral);
     }
 
     /* Tick labels */
     .tick-labels {
       position: absolute;
-      top: calc(50% + var(--tick-size) + 6px);
+      top: calc(50% + var(--tick-size) + var(--rel-spacing-2xs));
       left: 0;
       width: 100%;
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-color-text-heading);
+      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 {
@@ -243,29 +302,29 @@ export class RelSlider extends LitElement {
 
     /* Disabled State */
     .rel-slider.disabled .track {
-      background: var(--rel-color-border-default);
+      background: var(--rel-border-default);
     }
 
     .rel-slider.disabled .track-active {
-      background: var(--rel-color-text-placeholder);
+      background: var(--rel-text-placeholder);
     }
 
     .rel-slider.disabled .track-active.dotted {
       background: radial-gradient(
             circle,
-            var(--rel-color-bg-tertiary) 0 1px,
+            var(--rel-bg-neutral-elevated-1) 0 1px,
             transparent 1px
           )
-          center/12px 4px repeat-x,
-        var(--rel-color-text-placeholder);
+          center/var(--rel-spacing-sm) 4px repeat-x,
+        var(--rel-text-placeholder);
     }
 
     .rel-slider.disabled .tick {
-      background: var(--rel-color-text-placeholder);
+      background: var(--rel-text-placeholder);
     }
 
     .rel-slider.disabled .tick-label {
-      color: var(--rel-color-text-placeholder);
+      color: var(--rel-text-placeholder);
     }
 
     .rel-slider.disabled .slider-input {
@@ -273,7 +332,7 @@ export class RelSlider extends LitElement {
     }
 
     .rel-slider.disabled .custom-thumb {
-      background: var(--rel-color-text-placeholder);
+      background: var(--rel-text-placeholder);
       box-shadow: none;
     }
 
@@ -283,26 +342,17 @@ export class RelSlider extends LitElement {
     }
 
     .rel-slider.disabled .value-marker svg path {
-      fill: var(--rel-colors-gray-placeholder);
+      fill: var(--rel-text-placeholder);
     }
 
     /* Dark mode overrides */
     :host-context([data-theme="dark"]),
     :host-context(.dark) {
-      --thumb-halo-color: var(--rel-color-border-default);
-      --halo: 0 2px 0 var(--rel-color-bg-selected),
+      --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);
     }
 
-    :host-context([data-theme="dark"]) .value-marker svg path,
-    :host-context(.dark) .value-marker svg path {
-      fill: #2B2B2B;
-    }
-
-    :host-context([data-theme="dark"]) .value-marker text,
-    :host-context(.dark) .value-marker text {
-      fill: #FFFFFF;
-    }
   `;
 
   connectedCallback() {
@@ -319,16 +369,94 @@ export class RelSlider extends LitElement {
     ) {
       this.setupTicks();
     }
-    if (changedProperties.has("value")) {
+    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 = [];
@@ -384,40 +512,43 @@ export class RelSlider extends LitElement {
 
   private updateActiveWidth() {
     const activeEl = this.shadowRoot?.querySelector(".track-active") as HTMLDivElement;
-    if (activeEl) {
-      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}%`;
-      }
+    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() {
+  private renderThumbContainer(pct: number = this.percentage, val: number = this.value) {
     return html`
-      <div class="thumb-container" style="left: ${this.percentage}%">
+      <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-color-text-primary)" />
+                fill="var(--rel-bg-neutral-inverse-2)" />
               <text
                 x="12"
                 y="16"
                 text-anchor="middle"
-                fill="var(--rel-color-bg-primary)"
+                fill="var(--rel-text-inverse)"
                 font-size="12"
                 font-family="Poppins"
                 font-weight="600">
-                ${this.value}
+                ${val}
               </text>
             </svg>
           </div>
         ` : ""}
-        <div class="custom-thumb"></div>
+        <div part="thumb" class="custom-thumb"></div>
       </div>
     `;
   }
@@ -461,6 +592,7 @@ export class RelSlider extends LitElement {
       "rel-slider",
       this.disabled ? "disabled" : "",
       this.type === "discrete" ? "has-ticks" : "",
+      this.isRange ? "range" : "",
     ]
       .filter(Boolean)
       .join(" ");
@@ -472,9 +604,50 @@ export class RelSlider extends LitElement {
       .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="Range start"
+            .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="Range end"
+            .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 class="track"></div>
+        <div part="track" class="track"></div>
         <div class="${trackActiveClasses}"></div>
 
         <input

package/dist/components/rel-snackbar/README.md

@@ -87,24 +87,24 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-sm` - Font size
-- `--rel-fontWeights-semibold` - Action button font weight
-- `--rel-lineHeights-lineheight-200` - Message line height
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-sm-regular-font-size` - Font size
+- `--rel-fonts-weight-body-semibold` - Action button font weight
+- `--rel-body-md-regular-line-height` - Message line height
 
 ### Spacing Tokens
-- `--rel-spacing-space-2xs` - Action button gap, close button padding
+- `--rel-spacing-2xs` - Action button gap, close button padding
 
 ### Color Tokens
-- `--rel-colors-black` - Background color
-- `--rel-colors-white` - Text and focus outline color
-- `--rel-colors-green-secondary` - Action button text color
+- `--rel-text-default` - Background color
+- `--rel-bg-surface` - Text and focus outline color
+- `--rel-bg-success-light` - Action button text color
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-300` - Drop shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius
+- `--rel-border-radius-sm` - Border radius
 
 ## Accessibility
 - Snackbars are informational and do not interrupt workflows