@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
 
 export type SidebarVariant = "sidebar" | "floating" | "inset";
 export type SidebarSide = "left" | "right";
@@ -31,6 +32,11 @@ export class RelSidebarProvider extends LitElement {
 
   private mediaQuery: MediaQueryList | null = null;
   private isInitialized = false;
+  private _uid = Math.random().toString(36).slice(2);
+
+  private get _storageKey(): string {
+    return `rel-sidebar:${this.id || this._uid}`;
+  }
 
   static styles = css`
     :host {
@@ -154,7 +160,7 @@ export class RelSidebarProvider extends LitElement {
 
   private getPersistedState(): { open?: boolean; collapsed?: boolean } | null {
     try {
-      const stored = localStorage.getItem(this.persistKey);
+      const stored = localStorage.getItem(this._storageKey);
       if (stored) {
         return JSON.parse(stored);
       }
@@ -184,7 +190,7 @@ export class RelSidebarProvider extends LitElement {
       : { open: this.activeOpen, collapsed: this.activeCollapsed };
 
     try {
-      localStorage.setItem(this.persistKey, JSON.stringify(stateToPersist));
+      localStorage.setItem(this._storageKey, JSON.stringify(stateToPersist));
     } catch (e) {
       // Silently fail if localStorage is unavailable
     }
@@ -309,7 +315,8 @@ export class RelSidebar extends LitElement {
       left: 0;
       right: 0;
       bottom: 0;
-      background: var(--rel-overlay-scrim, rgba(0, 0, 0, 0.5));
+      /* TODO: replace scrim fallback with a proper dark-aware token in vars.css */
+      background: var(--rel-overlay-scrim, rgba(0, 0, 0, 0.6));
       z-index: 999;
       opacity: 0;
       pointer-events: none;
@@ -982,6 +989,7 @@ export class RelSidebarMenuButton extends LitElement {
   @property({ type: Boolean }) active = false;
   @property({ type: Boolean }) disabled = false;
   @property({ type: String }) tooltip = "";
+  @property({ type: String }) icon: string = "";
 
   @state() private isCollapsed = false;
 
@@ -1147,7 +1155,7 @@ export class RelSidebarMenuButton extends LitElement {
         part="button"
       >
         <span class="icon" part="icon">
-          <slot name="icon"></slot>
+          ${this.icon ? html`<rel-icon name="${this.icon}"></rel-icon>` : nothing}
         </span>
         <span class="label" part="label">
           <slot></slot>

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type SliderType = "continuous" | "discrete";
 export type TrackStyle = "solid" | "dotted";
@@ -26,20 +27,23 @@ export class RelSlider extends LitElement {
 
   @state() private ticks: number[] = [];
 
+  private _onChange: (value: number) => void = () => {};
+  private _onTouched: () => void = () => {};
+
   static styles = css`
     :host {
       --track-height: 5px;
       --thumb-size: 10px;
       --thumb-stroke: 7px;
-      --thumb-halo-color: var(--rel-border-default);
+      --thumb-halo-color: var(--rel-color-border-default);
       --tick-size: 4px;
       --shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-      --halo: 0 2px 0 var(--rel-surface-surface), 0 6px 10px rgba(0, 0, 0, 0.07);
+      --halo: 0 2px 0 var(--rel-color-bg-tertiary), 0 6px 10px rgba(0, 0, 0, 0.07);
       --marker-width: 24px;
       --marker-height: 28px;
 
       display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fontFamilies-primary);
     }
 
     .rel-slider {
@@ -56,7 +60,7 @@ export class RelSlider extends LitElement {
       left: 0;
       width: 100%;
       height: var(--track-height);
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
       border-radius: 2px;
       transform: translateY(-50%);
       pointer-events: none;
@@ -67,7 +71,7 @@ export class RelSlider extends LitElement {
       top: 50%;
       left: 0;
       height: var(--track-height);
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-primary);
       border-radius: 2px;
       transform: translateY(-50%);
       pointer-events: none;
@@ -75,12 +79,10 @@ export class RelSlider extends LitElement {
 
     .track-active.dotted {
       background: radial-gradient(
-            circle,
-            var(--rel-colors-white) 0 1px,
-            transparent 1px
-          )
-          center/12px 4px repeat-x,
-        var(--rel-colors-black);
+        circle,
+        var(--rel-color-text-primary) 0 2px,
+        transparent 2px
+      ) 0 50%/12px 5px repeat-x;
     }
 
     /* Input */
@@ -112,6 +114,12 @@ export class RelSlider extends LitElement {
       border: none;
     }
 
+    .slider-input::slider-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
     /* Hide native thumb */
     .slider-input::-webkit-slider-thumb {
       -webkit-appearance: none;
@@ -131,6 +139,14 @@ export class RelSlider extends LitElement {
       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);
@@ -147,8 +163,8 @@ export class RelSlider extends LitElement {
     .thumb-container {
       position: absolute;
       left: 0;
-      top: 23.5%;
-      transform: translate(-50%, -50%);
+      top: 50%;
+      transform: translate(-50%, calc(-100% + var(--thumb-size) / 2));
       pointer-events: none;
       z-index: 5;
       display: flex;
@@ -174,7 +190,7 @@ export class RelSlider extends LitElement {
     .custom-thumb {
       width: var(--thumb-size);
       height: var(--thumb-size);
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-primary);
       border-radius: 50%;
       transition: box-shadow 0.15s ease;
     }
@@ -198,7 +214,7 @@ export class RelSlider extends LitElement {
       position: absolute;
       width: var(--tick-size);
       height: var(--tick-size);
-      background: var(--rel-colors-gray-primary);
+      background: var(--rel-color-text-primary);
       border-radius: 50%;
       transform: translate(-50%, -50%);
       transition: background 0.2s;
@@ -206,7 +222,7 @@ export class RelSlider extends LitElement {
     }
 
     .tick.active {
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
     }
 
     /* Tick labels */
@@ -216,7 +232,7 @@ export class RelSlider extends LitElement {
       left: 0;
       width: 100%;
       font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-color-text-heading);
       pointer-events: none;
     }
 
@@ -227,29 +243,29 @@ export class RelSlider extends LitElement {
 
     /* Disabled State */
     .rel-slider.disabled .track {
-      background: var(--rel-colors-gray-primary);
+      background: var(--rel-color-border-default);
     }
 
     .rel-slider.disabled .track-active {
-      background: var(--rel-colors-gray-placeholder);
+      background: var(--rel-color-text-placeholder);
     }
 
     .rel-slider.disabled .track-active.dotted {
       background: radial-gradient(
             circle,
-            var(--rel-surface-surface) 0 1px,
+            var(--rel-color-bg-tertiary) 0 1px,
             transparent 1px
           )
           center/12px 4px repeat-x,
-        var(--rel-colors-gray-placeholder);
+        var(--rel-color-text-placeholder);
     }
 
     .rel-slider.disabled .tick {
-      background: var(--rel-colors-gray-placeholder);
+      background: var(--rel-color-text-placeholder);
     }
 
     .rel-slider.disabled .tick-label {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
     }
 
     .rel-slider.disabled .slider-input {
@@ -257,13 +273,36 @@ export class RelSlider extends LitElement {
     }
 
     .rel-slider.disabled .custom-thumb {
-      background: var(--rel-colors-gray-placeholder);
-      box-shadow: 0 0 0 var(--thumb-stroke) var(--rel-surface-surface);
+      background: var(--rel-color-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-colors-gray-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),
+              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() {
@@ -330,14 +369,19 @@ export class RelSlider extends LitElement {
     this.value = next;
     this.updateActiveWidth();
     this.dispatchEvent(
-      new CustomEvent("valueChange", {
+      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) {
@@ -359,12 +403,12 @@ export class RelSlider extends LitElement {
             <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-colors-black)" />
+                fill="var(--rel-color-text-primary)" />
               <text
                 x="12"
                 y="16"
                 text-anchor="middle"
-                fill="var(--rel-colors-white)"
+                fill="var(--rel-color-bg-primary)"
                 font-size="12"
                 font-family="Poppins"
                 font-weight="600">
@@ -441,7 +485,8 @@ export class RelSlider extends LitElement {
           .step="${this.type === 'discrete' ? String(this.step) : '1'}"
           .value="${String(this.value)}"
           ?disabled="${this.disabled}"
-          @input="${this.onInput}" />
+          @input="${this.onInput}"
+          @blur="${() => this._onTouched()}" />
 
         ${this.renderThumbContainer()}
         ${this.renderTicks()}

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

@@ -1,5 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
 
 export type SnackbarLines = "single" | "double";
 export type SnackbarType = "default" | "success" | "error" | "warning";
@@ -19,10 +21,11 @@ export class RelSnackbar extends LitElement {
   @property({ type: Number }) duration: number = 4000;
 
   @property({ type: String }) type: SnackbarType = "default";
+  @property({ type: Boolean, reflect: true }) show = false;
 
-  @state() private visible: boolean = true;
+  @state() private visible: boolean = false;
 
-  private timeout: number | null = null;
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -37,10 +40,10 @@ export class RelSnackbar extends LitElement {
       min-width: 280px;
       max-width: 500px;
       margin: 0;
-      padding: 12px 16px;
+      padding: 12px 16px 12px 10px;
       border-radius: var(--rel-borders-radius-border-radius-200);
-      background-color: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background-color: var(--rel-surface-toast);
+      color: #FFFFFF;
       font-family: var(--rel-fontFamilies-primary);
       box-shadow: var(--rel-shadows-shadow-300);
       animation: slide-up 0.3s ease-out;
@@ -56,17 +59,30 @@ export class RelSnackbar extends LitElement {
       display: none;
     }
 
-    /* Type variants */
+    /* Type variants — border accent using semantic DS tokens */
     .snackbar.type-success {
-      border-left-color: var(--rel-colors-green-secondary, #4ade80);
+      border-left-color: var(--rel-colors-green-tertiary);
     }
 
     .snackbar.type-error {
-      border-left-color: var(--rel-colors-red-primary, #f87171);
+      border-left-color: var(--rel-colors-red-primary);
     }
 
     .snackbar.type-warning {
-      border-left-color: var(--rel-colors-amber-primary, #fbbf24);
+      border-left-color: var(--rel-colors-orange-warning);
+    }
+
+    /* Icon color matches type accent */
+    .snackbar.type-success .snackbar-icon {
+      color: var(--rel-colors-green-primary);
+    }
+
+    .snackbar.type-error .snackbar-icon {
+      color: var(--rel-colors-red-secondary);
+    }
+
+    .snackbar.type-warning .snackbar-icon {
+      color: var(--rel-colors-yellow-pending);
     }
 
     .snackbar-icon {
@@ -74,7 +90,6 @@ export class RelSnackbar extends LitElement {
       align-items: center;
       margin-right: 10px;
       flex-shrink: 0;
-      font-size: 14px;
     }
 
     .snackbar-body {
@@ -112,12 +127,14 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-colors-green-secondary);
+      color: var(--rel-colors-green-primary);
       font-weight: var(--rel-fontWeights-semibold);
       font-size: var(--rel-fontSizes-sm);
       font-family: var(--rel-fontFamilies-primary);
       cursor: pointer;
       padding: 0;
+      display: flex;
+      align-items: center;
       transition: opacity 0.2s ease;
     }
 
@@ -130,7 +147,7 @@ export class RelSnackbar extends LitElement {
     }
 
     .snackbar-action:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
+      outline: 2px solid #FFFFFF;
       outline-offset: 2px;
       border-radius: 2px;
     }
@@ -138,12 +155,9 @@ export class RelSnackbar extends LitElement {
     .snackbar-close {
       background: none;
       border: none;
-      color: var(--rel-colors-white, #fff);
+      color: #FFFFFF;
       cursor: pointer;
-      font-size: 16px;
       padding: 0;
-      width: 20px;
-      height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -159,11 +173,16 @@ export class RelSnackbar extends LitElement {
     }
 
     .snackbar-close:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
+      outline: 2px solid #FFFFFF;
       outline-offset: 2px;
       border-radius: 2px;
     }
 
+    /* Prevent any inherited transform from firing on button click */
+    .snackbar button:active {
+      transform: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .snackbar {
         animation: none;
@@ -184,32 +203,42 @@ export class RelSnackbar extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAutoDismiss();
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (!changed.has('show')) return;
+    if (this.show) {
+      this.visible = true;
+      this.setAutoDismiss();
+    } else {
+      this.visible = false;
+      this.clearDismissTimer();
+    }
   }
 
   updated(changed: Map<string, unknown>) {
-    if (changed.has("duration") || changed.has("longerAction")) {
+    if ((changed.has("duration") || changed.has("longerAction")) && this.show) {
       this.setAutoDismiss();
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.clearTimeout();
+    this.clearDismissTimer();
   }
 
   private setAutoDismiss() {
     if (this.duration > 0) {
-      this.clearTimeout();
+      this.clearDismissTimer();
       const delay = this.longerAction ? this.duration * 2 : this.duration;
-      this.timeout = window.setTimeout(() => this.dismiss(), delay);
+      this._dismissTimer = setTimeout(() => this.dismiss(), delay);
     }
   }
 
-  private clearTimeout() {
-    if (this.timeout !== null) {
-      window.clearTimeout(this.timeout);
-      this.timeout = null;
+  private clearDismissTimer() {
+    if (this._dismissTimer !== null) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
     }
   }
 
@@ -224,6 +253,7 @@ export class RelSnackbar extends LitElement {
   }
 
   private dismiss() {
+    this.show = false;
     this.visible = false;
     this.dispatchEvent(
       new CustomEvent("close", {
@@ -233,13 +263,15 @@ export class RelSnackbar extends LitElement {
     );
   }
 
-  private getIcon(): string {
-    switch (this.type) {
-      case "success": return "✓";
-      case "error":   return "✕";
-      case "warning": return "⚠";
-      default:        return "";
-    }
+  private renderIcon() {
+    const iconMap: Record<string, string> = {
+      success: "check-circle",
+      error: "error",
+      warning: "warning",
+    };
+    const name = iconMap[this.type];
+    if (!name) return html``;
+    return html`<rel-icon name="${name}" size="lg" class="snackbar-icon"></rel-icon>`;
   }
 
   render() {
@@ -252,12 +284,10 @@ export class RelSnackbar extends LitElement {
       .filter(Boolean)
       .join(" ");
 
-    const icon = this.getIcon();
-
     return html`
       <div class="${snackbarClasses}">
         <div class="snackbar-body">
-          ${icon ? html`<span class="snackbar-icon">${icon}</span>` : ""}
+          ${this.type !== "default" ? this.renderIcon() : ""}
           <div class="snackbar-message">${this.message}</div>
         </div>
 
@@ -272,7 +302,7 @@ export class RelSnackbar extends LitElement {
           ${this.iconClose
             ? html`
                 <button class="snackbar-close" @click="${this.dismiss}">
-                  ✖
+                  <rel-icon name="close" size="md"></rel-icon>
                 </button>
               `
             : ""}