@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,135 @@
+# rel-slider
+
+## Overview
+A highly customizable range slider component supporting continuous and discrete modes. Features include tick marks, value bubble display, solid/dotted track styles, custom theming via CSS properties, and full accessibility support. Automatically snaps to steps in discrete mode.
+
+## Usage
+```html
+<!-- Basic continuous slider -->
+<rel-slider value="50" min="0" max="100"></rel-slider>
+
+<!-- Discrete slider with ticks -->
+<rel-slider
+  type="discrete"
+  value="25"
+  min="0"
+  max="100"
+  step="25">
+</rel-slider>
+
+<!-- Discrete slider with tick labels -->
+<rel-slider
+  type="discrete"
+  value="3"
+  min="1"
+  max="5"
+  step="1"
+  showTickLabels>
+</rel-slider>
+
+<!-- Dotted track without value bubble -->
+<rel-slider
+  value="60"
+  min="0"
+  max="100"
+  track="dotted"
+  showBubble="false">
+</rel-slider>
+
+<!-- Disabled slider -->
+<rel-slider value="30" disabled></rel-slider>
+
+<!-- Listen for value changes -->
+<rel-slider id="volumeSlider" value="75" min="0" max="100"></rel-slider>
+<script>
+  const slider = document.getElementById('volumeSlider');
+  slider.addEventListener('valueChange', (e) => {
+    console.log('New value:', e.detail.value);
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `"continuous" \| "discrete"` | `"continuous"` | Slider mode: continuous allows any value, discrete snaps to steps |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `step` | `number` | `1` | Step increment (used in discrete mode for snapping and ticks) |
+| `value` | `number` | `0` | Current slider value |
+| `disabled` | `boolean` | `false` | Disables the slider |
+| `track` | `"solid" \| "dotted"` | `"solid"` | Visual style of the active track |
+| `showTickLabels` | `boolean` | `false` | Show numeric labels at each tick (discrete mode only) |
+| `showBubble` | `boolean` | `true` | Show value bubble marker above the thumb |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `valueChange` | `{ value: number }` | Fired when the slider value changes through user interaction |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Component-Level Custom Properties
+The component defines these CSS custom properties on `:host` which can be overridden:
+
+- `--track-height` - Height of the slider track (default: `5px`)
+- `--thumb-size` - Diameter of the thumb (default: `10px`)
+- `--thumb-stroke` - Thickness of focus/active halo around thumb (default: `7px`)
+- `--thumb-halo-color` - Color of thumb halo (default: `--rel-border-default`)
+- `--tick-size` - Diameter of tick marks (default: `4px`)
+- `--shadow` - Thumb drop shadow (default: `0 2px 4px rgba(0,0,0,0.25)`)
+- `--halo` - Additional halo shadow (default: `0 2px 0 var(--rel-surface-surface), 0 6px 10px rgba(0,0,0,0.07)`)
+- `--marker-width` - Width of value bubble (default: `24px`)
+- `--marker-height` - Height of value bubble (default: `28px`)
+
+### Design Token References
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-colors-gray-border` - Inactive track color
+- `--rel-colors-black` - Active track and thumb color
+- `--rel-colors-white` - Used in dotted track and tick marks
+- `--rel-colors-gray-primary` - Tick mark color (inactive)
+- `--rel-colors-gray-heading` - Tick label color
+- `--rel-colors-gray-placeholder` - Disabled active track and tick colors
+- `--rel-border-default` - Default thumb halo color
+- `--rel-surface-surface` - Disabled track background, used in dotted pattern
+- `--rel-fontSizes-xs` - Tick label font size
+
+## Accessibility
+- Uses native `<input type="range">` for full keyboard and screen reader support
+- Native input is transparent overlay, custom visuals beneath are purely decorative
+- Focus visible state shows halo around custom thumb
+- Disabled state prevents interaction with styled cursor and reduced contrast
+- Respects `prefers-reduced-motion` media query (disables transitions)
+
+### Keyboard Interactions
+- `Arrow Left/Down` - Decrease value
+- `Arrow Right/Up` - Increase value
+- `Home` - Jump to minimum value
+- `End` - Jump to maximum value
+- `Page Up/Down` - Larger increments (browser-dependent)
+
+### Focus Behavior
+- Focus shows halo around custom thumb using `--thumb-halo-color`
+- Active (mouse down) state also shows the halo
+
+## Notes / Edge Cases
+- In **discrete mode**, the slider automatically snaps to the nearest step value as the user drags
+- Tick marks are generated automatically in discrete mode based on `min`, `max`, and `step`
+- If the range doesn't divide evenly by step, a final tick is added at `max`
+- Ticks change color (become white) when the value passes them (active state)
+- **showTickLabels** only has effect in discrete mode
+- **showBubble** displays a pin-drop shaped SVG marker with the current value as text
+- The value bubble uses the "Poppins" font (you may need to load this separately or it will fall back)
+- **Dotted track** uses a `radial-gradient` pattern with white dots over the active color
+- The component has a fixed height of `60px` to accommodate the value bubble
+- When disabled, all interactive colors become muted gray tones
+- Active track width updates dynamically based on the percentage value
+- The component respects `prefers-reduced-motion` and disables all transitions when requested

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

@@ -26,20 +26,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: rgba(224, 222, 222, 0.8);
+      --thumb-halo-color: var(--rel-border-default);
       --tick-size: 4px;
       --shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-      --halo: 0 2px 0 #e9e9e9, 0 6px 10px rgba(0, 0, 0, 0.07);
+      --halo: 0 2px 0 var(--rel-surface-surface), 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-fontFamilies-primary, sans-serif);
     }
 
     .rel-slider {
@@ -112,6 +115,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 +140,26 @@ 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);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .custom-thumb,
+      .tick {
+        transition: none;
+      }
+    }
+
     /* Custom Thumb Container */
     .thumb-container {
       position: absolute;
@@ -225,7 +254,7 @@ export class RelSlider extends LitElement {
     .rel-slider.disabled .track-active.dotted {
       background: radial-gradient(
             circle,
-            #eaeaea 0 1px,
+            var(--rel-surface-surface) 0 1px,
             transparent 1px
           )
           center/12px 4px repeat-x,
@@ -246,7 +275,7 @@ export class RelSlider extends LitElement {
 
     .rel-slider.disabled .custom-thumb {
       background: var(--rel-colors-gray-placeholder);
-      box-shadow: 0 0 0 var(--thumb-stroke) #f5f5f5;
+      box-shadow: 0 0 0 var(--thumb-stroke) var(--rel-surface-surface);
     }
 
     .rel-slider.disabled .value-marker svg path {
@@ -318,14 +347,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) {
@@ -347,12 +381,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="black" />
+                fill="var(--rel-colors-black)" />
               <text
                 x="12"
                 y="16"
                 text-anchor="middle"
-                fill="white"
+                fill="var(--rel-colors-white)"
                 font-size="12"
                 font-family="Poppins"
                 font-weight="600">
@@ -429,7 +463,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/README.md

@@ -0,0 +1,134 @@
+# rel-snackbar
+
+## Overview
+A bottom-anchored notification component for brief messages with optional action buttons. Supports single/double line layouts, configurable auto-dismiss duration, longer action mode (2x duration), and optional close icon. Features slide-up animation respecting user motion preferences.
+
+## Usage
+```html
+<!-- Basic snackbar -->
+<rel-snackbar message="File uploaded successfully"></rel-snackbar>
+
+<!-- With action button -->
+<rel-snackbar
+  id="undoSnackbar"
+  message="Item deleted"
+  action="UNDO">
+</rel-snackbar>
+<script>
+  const snackbar = document.getElementById('undoSnackbar');
+  snackbar.addEventListener('actionClick', () => {
+    console.log('Undo action clicked');
+    // Perform undo logic
+  });
+</script>
+
+<!-- Two-line layout -->
+<rel-snackbar
+  message="Your message is too long to fit on a single line, so we'll use two."
+  lines="double"
+  action="DISMISS">
+</rel-snackbar>
+
+<!-- Longer action (2x duration) -->
+<rel-snackbar
+  message="Changes saved"
+  action="VIEW"
+  longerAction>
+</rel-snackbar>
+
+<!-- Without close icon -->
+<rel-snackbar
+  message="Processing..."
+  iconClose="false"
+  duration="0">
+</rel-snackbar>
+
+<!-- Custom duration (10 seconds) -->
+<rel-snackbar
+  message="Important notification"
+  duration="10000"
+  action="GOT IT">
+</rel-snackbar>
+
+<!-- Listen for close event -->
+<rel-snackbar id="notif" message="Update available"></rel-snackbar>
+<script>
+  const notif = document.getElementById('notif');
+  notif.addEventListener('close', () => {
+    console.log('Snackbar closed');
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | `string` | `"This is a snackbar message"` | Primary message text |
+| `action` | `string` | - | Optional action button label (e.g., "UNDO", "RETRY") |
+| `longerAction` | `boolean` | `false` | If true, doubles the auto-dismiss duration |
+| `iconClose` | `boolean` | `true` | Whether to show the close (✖) icon button |
+| `lines` | `"single" \| "double"` | `"single"` | Layout mode (single-line flex-row, double-line flex-column) |
+| `duration` | `number` | `4000` | Auto-dismiss duration in milliseconds (0 = no auto-dismiss) |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `actionClick` | None | Fired when the action button is clicked |
+| `close` | None | Fired when snackbar is closed (via action, close button, or auto-dismiss) |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+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
+
+### Spacing Tokens
+- `--rel-spacing-space-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
+
+### Shadow Tokens
+- `--rel-shadows-shadow-300` - Drop shadow
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius
+
+## Accessibility
+- Snackbars are informational and do not interrupt workflows
+- Close and action buttons have proper focus styles
+- Animation respects `prefers-reduced-motion` media query
+
+### Keyboard Interactions
+- `Tab` - Focus action button or close button
+- `Space/Enter` - Activate focused button
+
+### Focus Behavior
+- Buttons show 2px white outline with 2px offset when focused
+- Border radius applied to maintain visual consistency
+
+## Notes / Edge Cases
+- Snackbar has a minimum width of `280px` and maximum width of `500px`
+- **Single-line mode** (`lines="single"`): message and actions are flex-row with `justify-content: space-between`
+- **Double-line mode** (`lines="double"`): layout switches to flex-column with actions aligned to the right
+- Auto-dismiss timer starts in `connectedCallback()` and resets when `duration` or `longerAction` changes
+- If `longerAction` is true, the effective duration is `duration * 2`
+- Setting `duration="0"` disables auto-dismiss
+- Clicking the action button automatically closes the snackbar after dispatching `actionClick`
+- Clicking the close icon dispatches `close` and hides the snackbar (`visible = false`)
+- When `visible` is false, `hidden` class applies `display: none`
+- The component includes a `slide-up` animation (50px translateY → 0) on appearance
+- Animation disabled when `prefers-reduced-motion: reduce` is set
+- Snackbar is `display: block` by default (should be positioned by parent or global styles)

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

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 export type SnackbarLines = "single" | "double";
+export type SnackbarType = "default" | "success" | "error" | "warning";
 
 @customElement("rel-snackbar")
 export class RelSnackbar extends LitElement {
@@ -17,9 +18,12 @@ export class RelSnackbar extends LitElement {
 
   @property({ type: Number }) duration: number = 4000;
 
-  @state() private visible: boolean = true;
+  @property({ type: String }) type: SnackbarType = "default";
+  @property({ type: Boolean, reflect: true }) show = false;
 
-  private timeout: number | null = null;
+  @state() private visible: boolean = false;
+
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -41,6 +45,7 @@ export class RelSnackbar extends LitElement {
       font-family: var(--rel-fontFamilies-primary);
       box-shadow: var(--rel-shadows-shadow-300);
       animation: slide-up 0.3s ease-out;
+      border-left: 4px solid transparent;
     }
 
     .snackbar.two-line {
@@ -52,6 +57,47 @@ export class RelSnackbar extends LitElement {
       display: none;
     }
 
+    /* Type variants — border accent using semantic DS tokens */
+    .snackbar.type-success {
+      border-left-color: var(--rel-colors-green-600, #16a34a);
+    }
+
+    .snackbar.type-error {
+      border-left-color: var(--rel-colors-red-600, #dc2626);
+    }
+
+    .snackbar.type-warning {
+      border-left-color: var(--rel-colors-amber-600, #d97706);
+    }
+
+    /* Icon color matches type accent */
+    .snackbar.type-success .snackbar-icon {
+      color: var(--rel-colors-green-400, #4ade80);
+    }
+
+    .snackbar.type-error .snackbar-icon {
+      color: var(--rel-colors-red-400, #f87171);
+    }
+
+    .snackbar.type-warning .snackbar-icon {
+      color: var(--rel-colors-amber-400, #fbbf24);
+    }
+
+    .snackbar-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      flex-shrink: 0;
+      font-size: 14px;
+    }
+
+    .snackbar-body {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+
     .snackbar-message {
       font-size: var(--rel-fontSizes-sm);
       line-height: var(--rel-lineHeights-lineheight-200);
@@ -80,7 +126,7 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-colors-green-secondary);
+      color: var(--rel-colors-green-400, #4ade80);
       font-weight: var(--rel-fontWeights-semibold);
       font-size: var(--rel-fontSizes-sm);
       font-family: var(--rel-fontFamilies-primary);
@@ -97,10 +143,16 @@ export class RelSnackbar extends LitElement {
       opacity: 0.6;
     }
 
+    .snackbar-action:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
     .snackbar-close {
       background: none;
       border: none;
-      color: var(--rel-colors-white);
+      color: var(--rel-colors-white, #fff);
       cursor: pointer;
       font-size: 16px;
       padding: 0;
@@ -120,6 +172,23 @@ export class RelSnackbar extends LitElement {
       opacity: 0.6;
     }
 
+    .snackbar-close:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      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;
+      }
+    }
+
     @keyframes slide-up {
       from {
         transform: translateY(50px);
@@ -134,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;
     }
   }
 
@@ -174,6 +253,7 @@ export class RelSnackbar extends LitElement {
   }
 
   private dismiss() {
+    this.show = false;
     this.visible = false;
     this.dispatchEvent(
       new CustomEvent("close", {
@@ -183,18 +263,33 @@ export class RelSnackbar extends LitElement {
     );
   }
 
+  private getIcon(): string {
+    switch (this.type) {
+      case "success": return "✓";
+      case "error":   return "✕";
+      case "warning": return "⚠";
+      default:        return "";
+    }
+  }
+
   render() {
     const snackbarClasses = [
       "snackbar",
       this.lines === "double" ? "two-line" : "",
       !this.visible ? "hidden" : "",
+      this.type !== "default" ? `type-${this.type}` : "",
     ]
       .filter(Boolean)
       .join(" ");
 
+    const icon = this.getIcon();
+
     return html`
       <div class="${snackbarClasses}">
-        <div class="snackbar-message">${this.message}</div>
+        <div class="snackbar-body">
+          ${icon ? html`<span class="snackbar-icon">${icon}</span>` : ""}
+          <div class="snackbar-message">${this.message}</div>
+        </div>
 
         <div class="snackbar-actions">
           ${this.action