@reliability-design/web 1.0.2 → 1.0.6

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

@@ -0,0 +1,148 @@
+# rel-toast
+
+## Overview
+A fixed-position toast notification component for brief feedback messages. Features default and error type variants, optional action buttons, auto-dismiss functionality, and slide-up animation. Positioned at the bottom-center of the viewport with `z-index: 1000`.
+
+## Usage
+```html
+<!-- Basic toast (must be shown programmatically) -->
+<rel-toast id="toast1" message="File saved successfully" type="default"></rel-toast>
+<script>
+  const toast = document.getElementById('toast1');
+  toast.show(); // Show the toast
+</script>
+
+<!-- Error toast -->
+<rel-toast id="errorToast" message="Failed to upload file" type="error"></rel-toast>
+<script>
+  document.getElementById('errorToast').show();
+</script>
+
+<!-- With action button -->
+<rel-toast
+  id="actionToast"
+  message="Connection lost"
+  actionLabel="RETRY"
+  type="default">
+</rel-toast>
+<script>
+  const actionToast = document.getElementById('actionToast');
+  actionToast.addEventListener('action', () => {
+    console.log('Retry clicked');
+    // Perform retry logic
+  });
+  actionToast.show();
+</script>
+
+<!-- Custom duration (7 seconds) -->
+<rel-toast
+  id="customDuration"
+  message="Download complete"
+  duration="7000">
+</rel-toast>
+<script>
+  document.getElementById('customDuration').show();
+</script>
+
+<!-- No auto-dismiss -->
+<rel-toast
+  id="persist"
+  message="Manual dismiss required"
+  duration="0">
+</rel-toast>
+<script>
+  const persist = document.getElementById('persist');
+  persist.show();
+  // Manually close later: persist.close();
+</script>
+
+<!-- Listen for dismiss -->
+<rel-toast id="notif" message="Update available"></rel-toast>
+<script>
+  const notif = document.getElementById('notif');
+  notif.addEventListener('dismissed', () => {
+    console.log('Toast was dismissed');
+  });
+  notif.show();
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | `string` | `""` | Toast message text |
+| `type` | `"default" \| "error"` | `"default"` | Visual style (default: dark gray, error: red) |
+| `actionLabel` | `string` | - | Optional action button label (e.g., "UNDO", "RETRY") |
+| `duration` | `number` | `4000` | Auto-dismiss duration in milliseconds (0 = no auto-dismiss) |
+
+### Methods
+| Method | Description |
+|--------|-------------|
+| `show()` | Display the toast and start auto-dismiss timer |
+| `close()` | Manually dismiss the toast and clear timer |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `action` | None | Fired when the action button is clicked (toast auto-closes after) |
+| `dismissed` | None | Fired when toast is dismissed (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-md` - Font size
+
+### Spacing Tokens
+- `--rel-spacing-space-sm` - Gap between elements
+- `--rel-spacing-space-md` - Padding
+- `--rel-spacing-space-2xs` - Close button padding and margin
+
+### Color Tokens
+- `--rel-surface-toast` - Default background color (dark gray)
+- `--rel-colors-red-secondary` - Error background color
+- `--rel-colors-white` - Text and focus outline color
+- `--rel-colors-green-primary` - Action button text color
+
+### Shadow Tokens
+- `--rel-shadows-shadow-300` - Drop shadow
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius
+
+## Accessibility
+- Uses `role="status"` and `aria-live="polite"` for screen reader announcements
+- Focus styles on action and close buttons
+- Animation respects `prefers-reduced-motion` media query
+- Close button has `aria-label="Dismiss"`
+
+### 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
+- **Important:** Toasts are hidden by default; you must call `show()` to display them
+- The component uses `:host` with `position: fixed`, `bottom: 24px`, `left: 50%`, `transform: translateX(-50%)` for bottom-center positioning
+- `z-index: 1000` ensures toasts appear above most content
+- The toast container is `display: inline-flex` with `pointer-events: all` (while`:host` has `pointer-events: none`)
+- Auto-dismiss timer starts when `show()` is called
+- Calling `close()` sets `visible = false`, dispatches `dismissed`, and clears the timeout
+- Clicking the action button dispatches `action` then automatically calls `close()`
+- Setting `duration="0"` disables auto-dismiss
+- The component includes a `fadeInUp` animation (20px translateY → 0, opacity 0 → 1) on appearance
+- Animation disabled when `prefers-reduced-motion: reduce` is set
+- When `visible` is false, `hidden` class applies `display: none`
+- **Type variants**: `default` uses `--rel-surface-toast`, `error` uses `--rel-colors-red-secondary` 
+- The toast appears inline-flex, so it sizes to content width

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

@@ -31,20 +31,20 @@ export class RelToast extends LitElement {
     .toast {
       display: inline-flex;
       align-items: center;
-      gap: 12px;
-      background-color: #111;
-      color: #fff;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: 0.9rem;
-      border-radius: 8px;
-      padding: 1rem 1rem;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      gap: var(--rel-spacing-space-sm, 12px);
+      background-color: var(--rel-surface-toast, #404040);
+      color: var(--rel-colors-white, #fff);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-size: var(--rel-fontSizes-md, 14px);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      padding: var(--rel-spacing-space-md, 16px);
+      box-shadow: var(--rel-shadows-shadow-300);
       pointer-events: all;
       animation: fadeInUp 0.25s ease;
     }
 
     .toast.error {
-      background-color: #d50000;
+      background-color: var(--rel-colors-red-secondary);
     }
 
     .toast.hidden {
@@ -60,7 +60,7 @@ export class RelToast extends LitElement {
     .toast-action {
       background: transparent;
       border: none;
-      color: #0edb90;
+      color: var(--rel-colors-green-primary);
       font-weight: 600;
       font-size: 0.85rem;
       cursor: pointer;
@@ -72,6 +72,12 @@ export class RelToast extends LitElement {
       opacity: 0.75;
     }
 
+    .toast-action:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
     /* Close button */
     .toast-close {
       background: transparent;
@@ -80,14 +86,26 @@ export class RelToast extends LitElement {
       font-size: 1rem;
       cursor: pointer;
       line-height: 1;
-      padding: 0;
-      margin-left: 4px;
+      padding: var(--rel-spacing-space-2xs, 4px);
+      margin-left: var(--rel-spacing-space-2xs, 4px);
     }
 
     .toast-close:hover {
       opacity: 0.75;
     }
 
+    .toast-close:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .toast {
+        animation: none;
+      }
+    }
+
     /* Animations */
     @keyframes fadeInUp {
       from {
@@ -135,7 +153,7 @@ export class RelToast extends LitElement {
 
   render() {
     return html`
-      <div class="toast ${this.type} ${this.visible ? "" : "hidden"}">
+      <div class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
         <span class="toast-message">${this.message}</span>
 
         ${this.actionLabel
@@ -147,7 +165,7 @@ export class RelToast extends LitElement {
             </button>`
           : ""}
 
-        <button class="toast-close" @click="${this.close}">✕</button>
+        <button class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
       </div>
     `;
   }

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

@@ -0,0 +1,103 @@
+# rel-tooltip
+
+## Overview
+A simple tooltip component that displays contextual text on hover. Supports above/below positioning and optional tail (arrow pointer). Uses CSS opacity transitions for smooth fade-in/out effects. Content is provided via a `<slot>` for flexible trigger elements.
+
+## Usage
+```html
+<!-- Basic tooltip (above) -->
+<rel-tooltip text="This is a helpful tooltip">
+  <button>Hover me</button>
+</rel-tooltip>
+
+<!-- Tooltip positioned below -->
+<rel-tooltip text="Information appears below" position="below">
+  <span>Hover for info</span>
+</rel-tooltip>
+
+<!-- With tail/arrow -->
+<rel-tooltip text="Tooltip with pointer" position="above" showTail>
+  <button>Hover me</button>
+</rel-tooltip>
+
+<!-- Tooltip on icon -->
+<rel-tooltip text="Edit item" showTail>
+  <img src="edit-icon.svg" alt="Edit">
+</rel-tooltip>
+
+<!-- Multiple elements in trigger -->
+<rel-tooltip text="Profile options" position="below">
+  <div class="user-avatar">
+    <img src="avatar.jpg" alt="User">
+    <span>John Doe</span>
+  </div>
+</rel-tooltip>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | `""` | Tooltip text content |
+| `position` | `"above" \| "below"` | `"above"` | Vertical position relative to trigger |
+| `showTail` | `boolean` | `false` | Whether to show the arrow/pointer |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Trigger element(s) that activate the tooltip on hover |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-sm` - Font size
+
+### Spacing Tokens
+- `--rel-spacing-space-xs` - Vertical padding
+- `--rel-spacing-space-sm` - Horizontal padding
+
+### Color Tokens
+- `--rel-surface-toast` - Background color (dark gray)
+- `--rel-colors-white` - Text color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius
+
+## Accessibility
+- Uses `role="tooltip"` on the tooltip bubble
+- `aria-hidden="true"` on tooltip (content is supplemental, not critical)
+- Tooltip does not receive focus (purely decorative on hover)
+- For critical information, consider alternative patterns (e.g., visible labels or expandable sections)
+
+### Keyboard Interactions
+- No keyboard interactions (hover-only)
+- For keyboard accessibility, ensure slotted content is focusable and consider showing tooltip on focus
+
+### Focus Behavior
+- Tooltip activation is hover-only by default
+- Does not interfere with focus on slotted content
+
+## Notes / Edge Cases
+- The tooltip appears on `:host(:hover)` via CSS `opacity: 1` transition
+- By default, tooltip has `opacity: 0` and `pointer-events: none`
+- **Position "above"**: tooltip is positioned at `bottom: calc(100% + 8px)` (8px gap above trigger)
+- **Position "below"**: tooltip is positioned at `top: calc(100% + 8px)` (8px gap below trigger)
+- The tooltip uses `left: 50%` and `transform: translateX(-50%)` for horizontal centering
+- `white-space: nowrap` prevents text wrapping (tooltip width adjusts to content)
+- **Tail/arrow** is a CSS triangle created with transparent borders:
+  - Above pointer: 6px border-top, positioned at `bottom: -6px`
+  - Below pointer: 6px border-bottom, positioned at `top: -6px`
+  - Tail uses `left: 50%` and `transform: translateX(-50%)` for centering
+- The tooltip has `z-index: 1000` to appear above most content
+- The tooltip is `position: absolute` relative to `:host` (which is `position: relative`)
+- `:host` is `display: inline-block` to size to slotted content
+- Transition duration is `0.2s ease` for opacity changes
+- For very long tooltip text, consider wrapping or alternative UI patterns (max-width not set by default)

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

@@ -20,12 +20,12 @@ export class RelTooltip extends LitElement {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      background-color: #111;
-      color: #fff;
-      padding: 0.5rem 0.75rem;
-      border-radius: 6px;
-      font-size: 0.875rem;
-      font-family: var(--rel-fontFamilies-primary);
+      background-color: var(--rel-surface-toast, #404040);
+      color: var(--rel-colors-white, #fff);
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
       white-space: nowrap;
       z-index: 1000;
       opacity: 0;
@@ -59,19 +59,19 @@ export class RelTooltip extends LitElement {
 
     .tooltip-bubble.above .tooltip-tail {
       bottom: -6px;
-      border-top: 6px solid #111;
+      border-top: 6px solid var(--rel-surface-toast, #404040);
     }
 
     .tooltip-bubble.below .tooltip-tail {
       top: -6px;
-      border-bottom: 6px solid #111;
+      border-bottom: 6px solid var(--rel-surface-toast, #404040);
     }
   `;
 
   render() {
     return html`
       <slot></slot>
-      <div class="tooltip-bubble ${this.position}">
+      <div class="tooltip-bubble ${this.position}" role="tooltip" aria-hidden="true">
         ${this.text}
         ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
       </div>