@reliability-design/web 1.1.1 → 1.3.0

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

@@ -0,0 +1,139 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type SkeletonShape = "line" | "circle" | "block";
+export type SkeletonAnimation = "pulse" | "shimmer" | "none";
+
+@customElement("rel-skeleton")
+export class RelSkeleton extends LitElement {
+  @property({ type: String, reflect: true }) shape: SkeletonShape = "block";
+  @property({ type: Number }) lines = 1;
+  @property({ type: String }) width = "";
+  @property({ type: String }) height = "";
+  @property({ type: String, reflect: true }) animation: SkeletonAnimation = "pulse";
+  @property({ type: Boolean, reflect: true }) loaded = false;
+
+  protected override updated(changed: Map<string, unknown>) {
+    if (changed.has("width") && this.width) this.style.width = this.width;
+    if (changed.has("height") && this.height) this.style.height = this.height;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([loaded]) {
+      display: none;
+    }
+
+    /* ── Circle: aspect-ratio keeps it square without requiring explicit height ── */
+    :host([shape="circle"]) {
+      aspect-ratio: 1 / 1;
+    }
+
+    /* ── Base skeleton surface ── */
+    .skeleton-shape,
+    .skeleton-bar {
+      background: var(--rel-skeleton-color, #c8c8c8);
+      border-radius: 4px;
+    }
+
+    /* ── Lines layout ── */
+    .skeleton-lines {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .skeleton-bar {
+      height: 14px;
+      width: 100%;
+    }
+
+    /* Last line shortens to 65% — mimics real paragraph text that doesn't reach the edge */
+    .skeleton-bar.is-last {
+      width: 65%;
+    }
+
+    /* ── Shape (circle / block) ── */
+    .skeleton-shape {
+      width: 100%;
+      height: 100%;
+      min-height: 16px;
+    }
+
+    :host([shape="circle"]) .skeleton-shape {
+      border-radius: 50%;
+      /* No min-height — circle is sized entirely by host width + aspect-ratio */
+      min-height: unset;
+    }
+
+    /* ── Pulse animation ── */
+    @keyframes rel-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50%       { opacity: 0.4; }
+    }
+
+    :host([animation="pulse"]) .skeleton-shape,
+    :host([animation="pulse"]) .skeleton-bar {
+      animation: rel-skeleton-pulse 1.5s ease-in-out infinite;
+    }
+
+    /* ── Shimmer animation ── */
+    @keyframes rel-skeleton-shimmer {
+      0%   { background-position: 200% center; }
+      100% { background-position: -200% center; }
+    }
+
+    :host([animation="shimmer"]) .skeleton-shape,
+    :host([animation="shimmer"]) .skeleton-bar {
+      background: linear-gradient(
+        90deg,
+        var(--rel-skeleton-color, #c8c8c8) 25%,
+        var(--rel-skeleton-highlight, #e2e2e2) 50%,
+        var(--rel-skeleton-color, #c8c8c8) 75%
+      );
+      background-size: 200% 100%;
+      animation: rel-skeleton-shimmer 1.5s linear infinite;
+    }
+
+    /* ── Dark mode ── */
+    :host-context([data-theme="dark"]) {
+      --rel-skeleton-color: #2a2a2a;
+      --rel-skeleton-highlight: #3d3d3d;
+    }
+
+    /* ── Respect reduced-motion preference ── */
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton-shape,
+      .skeleton-bar {
+        animation: none !important;
+      }
+    }
+  `;
+
+  render() {
+    if (this.loaded) return html``;
+
+    if (this.shape === "line") {
+      const count = Math.max(1, this.lines);
+      return html`
+        <div class="skeleton-lines">
+          ${Array.from({ length: count }, (_, i) => html`
+            <div class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
+          `)}
+        </div>
+      `;
+    }
+
+    return html`<div class="skeleton-shape"></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-skeleton": RelSkeleton;
+  }
+}

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";
@@ -34,15 +35,15 @@ export class RelSlider extends LitElement {
       --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 {
@@ -59,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;
@@ -70,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;
@@ -78,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 */
@@ -164,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;
@@ -191,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;
     }
@@ -215,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;
@@ -223,7 +222,7 @@ export class RelSlider extends LitElement {
     }
 
     .tick.active {
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
     }
 
     /* Tick labels */
@@ -233,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;
     }
 
@@ -244,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 {
@@ -274,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() {
@@ -381,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">

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";
@@ -38,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;
@@ -59,28 +61,28 @@ export class RelSnackbar extends LitElement {
 
     /* Type variants — border accent using semantic DS tokens */
     .snackbar.type-success {
-      border-left-color: var(--rel-colors-green-600, #16a34a);
+      border-left-color: var(--rel-colors-green-tertiary);
     }
 
     .snackbar.type-error {
-      border-left-color: var(--rel-colors-red-600, #dc2626);
+      border-left-color: var(--rel-colors-red-primary);
     }
 
     .snackbar.type-warning {
-      border-left-color: var(--rel-colors-amber-600, #d97706);
+      border-left-color: var(--rel-colors-orange-warning);
     }
 
     /* Icon color matches type accent */
     .snackbar.type-success .snackbar-icon {
-      color: var(--rel-colors-green-400, #4ade80);
+      color: var(--rel-colors-green-primary);
     }
 
     .snackbar.type-error .snackbar-icon {
-      color: var(--rel-colors-red-400, #f87171);
+      color: var(--rel-colors-red-secondary);
     }
 
     .snackbar.type-warning .snackbar-icon {
-      color: var(--rel-colors-amber-400, #fbbf24);
+      color: var(--rel-colors-yellow-pending);
     }
 
     .snackbar-icon {
@@ -88,7 +90,6 @@ export class RelSnackbar extends LitElement {
       align-items: center;
       margin-right: 10px;
       flex-shrink: 0;
-      font-size: 14px;
     }
 
     .snackbar-body {
@@ -126,12 +127,14 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-colors-green-400, #4ade80);
+      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;
     }
 
@@ -144,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;
     }
@@ -152,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;
@@ -173,7 +173,7 @@ 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;
     }
@@ -263,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() {
@@ -282,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>
 
@@ -302,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>
               `
             : ""}

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type StepStatus = "done" | "progress" | "disabled";
 export type TextAlign = "right" | "below";
@@ -128,14 +129,14 @@ export class RelStepper extends LitElement {
       justify-content: center;
       width: var(--rel-stepper-indicator-size, 22px);
       height: var(--rel-stepper-indicator-size, 22px);
-      border: 2px solid var(--rel-colors-gray-border);
-      background: var(--rel-colors-white);
+      border: 2px solid var(--rel-color-border-default);
+      background: var(--rel-color-bg-primary);
       border-radius: 50%;
       font-size: var(--rel-fontSizes-sm);
       font-weight: var(--rel-fontWeights-medium);
       position: relative;
       z-index: 2;
-      transition: all 0.2s ease;
+      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
       flex-shrink: 0;
     }
 
@@ -151,7 +152,7 @@ export class RelStepper extends LitElement {
     .step-label {
       white-space: nowrap;
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-color-text-primary);
     }
 
     /* Horizontal text-below specific */
@@ -187,7 +188,7 @@ export class RelStepper extends LitElement {
      ********************************************/
     .connector {
       position: absolute;
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
       z-index: 1;
     }
 
@@ -198,7 +199,7 @@ export class RelStepper extends LitElement {
       transform: translateY(-50%);
       height: 2px;
       position: absolute;
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
     }
 
     .rel-stepper.horizontal .rel-step:last-child .connector {
@@ -249,9 +250,9 @@ export class RelStepper extends LitElement {
     }
 
     .rel-step.disabled .indicator {
-      background: var(--rel-colors-gray-light, #fafafa);
-      border-color: var(--rel-colors-gray-border, #ddd);
-      color: var(--rel-text-disabled, #9e9e9e);
+      background: var(--rel-color-bg-secondary);
+      border-color: var(--rel-color-border-default);
+      color: var(--rel-color-text-disabled);
     }
 
     .rel-step.done .connector {
@@ -273,7 +274,7 @@ export class RelStepper extends LitElement {
     }
 
     .rel-step.disabled .step-label {
-      color: var(--rel-text-disabled, #9e9e9e);
+      color: var(--rel-color-text-disabled);
     }
 
     /* Dark mode: ensure progress/done indicator and labels stay readable */

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-switch")
 export class RelSwitch extends LitElement {
@@ -15,11 +16,11 @@ export class RelSwitch extends LitElement {
 
   static styles = css`
     :host {
-      --switch-track: var(--rel-text-placeholder);
-      --switch-knob-on: var(--rel-colors-black);
-      --switch-knob-off: var(--rel-colors-white);
-      --switch-halo: var(--rel-border-default);
-      --switch-disabled: var(--rel-text-disabled);
+      --switch-track: var(--rel-color-text-placeholder);
+      --switch-knob-on: var(--rel-color-text-primary);
+      --switch-knob-off: var(--rel-color-bg-primary);
+      --switch-halo: var(--rel-color-border-default);
+      --switch-disabled: var(--rel-color-text-disabled);
       display: inline-block;
     }
 
@@ -81,7 +82,7 @@ export class RelSwitch extends LitElement {
 
     /* Hover */
     .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: var(--rel-text-dark-placeholder);
+      background-color: var(--rel-color-text-placeholder);
     }
 
     /* Focus halo */

package/dist/components/rel-tab/rel-tab.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 "../rel-badge/rel-badge";
 
 export interface TabItem {
   label: string;
@@ -28,39 +30,39 @@ export class RelTab extends LitElement {
   static styles = css`
     :host {
       --tab-active-color: var(--rel-colors-green-primary);
-      --tab-text-default: var(--rel-text-primary);
-      --tab-text-disabled: var(--rel-text-disabled);
-      --tab-text-hover: var(--rel-text-heading);
+      --tab-text-default: var(--rel-color-text-primary);
+      --tab-text-disabled: var(--rel-color-text-disabled);
+      --tab-text-hover: var(--rel-color-text-heading);
       --tab-underline-height: 3px;
-      --tab-hover-color: var(--rel-surface-surface);
+      --tab-hover-color: var(--rel-color-bg-tertiary);
       display: block;
       font-family: var(--rel-fontFamilies-primary);
     }
 
     .tabs-wrapper {
       display: flex;
-      border-bottom: 1px solid var(--rel-border-tab, #c4c4c4);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      border-bottom: 1px solid var(--rel-border-tab);
+      font-family: var(--rel-fontFamilies-primary);
       user-select: none;
     }
 
     .tab {
       position: relative;
-      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
       cursor: pointer;
       color: var(--tab-text-default);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-medium);
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs, 4px);
+      gap: var(--rel-spacing-space-2xs);
     }
 
     .tab:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
-      border-radius: var(--rel-borders-radius-border-radius-100, 2px);
+      border-radius: var(--rel-borders-radius-border-radius-100);
     }
 
     .tab:hover:not(.disabled) .tab-label {
@@ -91,22 +93,6 @@ export class RelTab extends LitElement {
       background-color: var(--tab-hover-color);
     }
 
-    /* Badge */
-    .tab-badge {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      background: var(--rel-color-brand);
-      color: #000000;
-      border-radius: var(--rel-tab-badge-radius, 50%);
-      font-size: var(--rel-fontSizes-xs);
-      font-weight: 600;
-      min-width: var(--rel-tab-badge-min-width, 16px);
-      text-align: center;
-      height: var(--rel-tab-badge-height, 16px);
-      padding: var(--rel-spacing-space-3xs, 2px);
-    }
-
     /* Tab content */
     .tab-content {
       padding: 1rem 0;
@@ -188,7 +174,7 @@ export class RelTab extends LitElement {
             >
               <span class="tab-label">${tab.label}</span>
               ${tab.badge
-                ? html`<span class="tab-badge">${tab.badge}</span>`
+                ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
                 : ""}
               <span class="tab-underline"></span>
             </div>