@reliability-design/web 1.0.2 → 1.0.6

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

@@ -31,15 +31,15 @@ export class RelSlider extends LitElement {
       --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 {
@@ -131,6 +131,18 @@ export class RelSlider extends LitElement {
       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 +237,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 +258,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 {
@@ -347,12 +359,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">

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,6 +18,8 @@ export class RelSnackbar extends LitElement {
 
   @property({ type: Number }) duration: number = 4000;
 
+  @property({ type: String }) type: SnackbarType = "default";
+
   @state() private visible: boolean = true;
 
   private timeout: number | null = null;
@@ -41,6 +44,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 +56,34 @@ export class RelSnackbar extends LitElement {
       display: none;
     }
 
+    /* Type variants */
+    .snackbar.type-success {
+      border-left-color: var(--rel-colors-green-secondary, #4ade80);
+    }
+
+    .snackbar.type-error {
+      border-left-color: var(--rel-colors-red-primary, #f87171);
+    }
+
+    .snackbar.type-warning {
+      border-left-color: var(--rel-colors-amber-primary, #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);
@@ -97,10 +129,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 +158,18 @@ 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;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .snackbar {
+        animation: none;
+      }
+    }
+
     @keyframes slide-up {
       from {
         transform: translateY(50px);
@@ -137,6 +187,12 @@ export class RelSnackbar extends LitElement {
     this.setAutoDismiss();
   }
 
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("duration") || changed.has("longerAction")) {
+      this.setAutoDismiss();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.clearTimeout();
@@ -177,18 +233,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

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

@@ -0,0 +1,160 @@
+# rel-stepper
+
+## Overview
+A comprehensive stepper component for visualizing multi-step processes. Supports horizontal and vertical orientations, text positioning (below or right of indicator), two size variants, and three step states (done, progress, disabled). Features clickable steps, automatic connector lines, and checkmark icons for completed steps.
+
+## Usage
+```html
+<!-- Basic horizontal stepper -->
+<rel-stepper id="checkout"></rel-stepper>
+<script>
+  const stepper = document.getElementById('checkout');
+  stepper.steps = [
+    { title: 'Cart', status: 'done' },
+    { title: 'Shipping', status: 'progress' },
+    { title: 'Payment', status: 'disabled' },
+    { title: 'Confirmation', status: 'disabled' }
+  ];
+</script>
+
+<!-- Vertical stepper with text to the right -->
+<rel-stepper
+  id="onboarding"
+  orientation="vertical"
+  textAlign="right">
+</rel-stepper>
+<script>
+  const onboarding = document.getElementById('onboarding');
+  onboarding.steps = [
+    { title: 'Create Account', status: 'done' },
+    { title: 'Verify Email', status: 'done' },
+    { title: 'Profile Setup', status: 'progress' },
+    { title: 'Complete', status: 'disabled' }
+  ];
+</script>
+
+<!-- Small size horizontal stepper -->
+<rel-stepper
+  id="wizard"
+  size="small"
+  textAlign="below">
+</rel-stepper>
+<script>
+  const wizard = document.getElementById('wizard');
+  wizard.steps = [
+    { title: 'Select', status: 'done' },
+    { title: 'Configure', status: 'progress' },
+    { title: 'Review', status: 'disabled' }
+  ];
+</script>
+
+<!-- Listen for step clicks -->
+<rel-stepper id="interactive"></rel-stepper>
+<script>
+  const interactive = document.getElementById('interactive');
+  interactive.steps = [
+    { title: 'Step 1', status: 'done' },
+    { title: 'Step 2', status: 'progress' },
+    { title: 'Step 3', status: 'disabled' }
+  ];
+  interactive.addEventListener('step-change', (e) => {
+    console.log('Clicked step:', e.detail.index, e.detail.step);
+    // Update step statuses or navigate to step content
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `Step[]` | `[]` | Array of step items (see Step interface below) |
+| `textAlign` | `"right" \| "below"` | `"below"` | Position of step labels relative to indicators |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction |
+| `size` | `"small" \| "large"` | `"large"` | Size variant (controls connector line length and spacing) |
+
+### Step Interface
+```typescript
+interface Step {
+  title: string;                               // Step label text
+  status: "done" | "progress" | "disabled";   // Step state
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `step-change` | `{ index: number, step: Step }` | Fired when a non-disabled step is clicked |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-sm` - Label font size
+- `--rel-fontWeights-medium` - Default label font weight
+- `--rel-fontWeights-semibold` - Active/done label font weight
+
+### Spacing Tokens
+- `--rel-spacing-space-2xs` - Gap between indicators and labels (text-right mode)
+
+### Color Tokens
+- `--rel-colors-white` - Indicator background (progress, disabled states)
+- `--rel-colors-black` - Active/done indicator background, text, and connector color
+- `--rel-colors-gray-border` - Disabled indicator border and inactive connector
+- `--rel-colors-gray-light` - Disabled indicator background
+- `--rel-text-disabled` - Disabled label text color
+- `--rel-text-primary` - Default label text color
+
+## Accessibility
+- Steps can be clicked unless in disabled state
+- Checkmark SVG uses `currentColor` for proper theming
+- Focus states could be enhanced with keyboard navigation (not currently implemented)
+
+### Keyboard Interactions
+- Click-based interaction only (no keyboard navigation implemented)
+
+### Focus Behavior
+- No specific focus handling (steps are div elements, not buttons)
+
+## Notes / Edge Cases
+- **Indicator states**:
+  - **done**: Black circle with white checkmark SVG icon
+  - **progress**: White circle with black border and step number
+  - **disabled**: Light gray circle with gray border and step number
+  
+- **Connector lines**:
+  - Positioned absolutely relative to the indicator
+  - **Horizontal**: 2px height, extends from indicator to next step
+  - **Vertical**: 2px width, extends from indicator to next step
+  - **done/progress** connectors are black; **disabled** connectors are gray
+  - Last step has no connector
+
+- **Size variants** (control connector length and gap):
+  - **large horizontal**: 86px connector, 86px gap
+  - **small horizontal**: 60px connector, 60px gap
+  - **large vertical**: 86px connector, 86px gap
+  - **small vertical**: 42px connector, 42px gap
+
+- **Text positioning**:
+  - **below**: Labels appear centered below indicators
+  - **right**: Labels appear to the right of indicators with a small gap
+
+- **Layout combinations**:
+  - **horizontal + text-below**: Steps arranged in a row, labels centered below
+  - **horizontal + text-right**: Steps in a row, labels to the right of each indicator
+  - **vertical + text-below**: Steps stacked vertically, labels centered below each indicator
+  - **vertical + text-right**: Steps stacked vertically, labels to the right with indicators on the left
+
+- The indicator is 22px × 22px with a 2px border
+- Step numbers are 1-indexed (displayed as `index + 1`)
+- Clicking a disabled step does nothing (no event dispatched)
+- All transitions use `0.2s ease`
+- The component uses flexbox extensively for layout management
+- The stepper is `display: block` and `width: 100%`