@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,90 @@
+# rel-textfield
+
+## Overview
+
+A text input field component with support for labels, icons, validation states, and supporting text. Used for single-line text entry in forms and user interfaces.
+
+## Usage
+
+```html
+<!-- Basic usage -->
+<rel-textfield label="Email" placeholder="Enter your email"></rel-textfield>
+
+<!-- With icons and supporting text -->
+<rel-textfield
+  label="Password"
+  type="password"
+  leftIcon="🔒"
+  supportingText="Must be at least 8 characters">
+</rel-textfield>
+
+<!-- Setting value via JavaScript -->
+<rel-textfield id="myField" label="Username"></rel-textfield>
+<script>
+  const field = document.getElementById('myField');
+  field.value = 'john.doe';
+</script>
+```
+
+## API
+
+### Attributes/Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text displayed above the input |
+| `placeholder` | `string` | `""` | Placeholder text |
+| `type` | `string` | `"text"` | Input type (text, email, password, etc.) |
+| `value` | `string` | `""` | Current input value |
+| `leftIcon` | `string` | - | Icon content on the left side |
+| `rightIcon` | `string` | - | Icon content on the right side |
+| `supportingText` | `string` | - | Helper or error text below input |
+| `state` | `"default" \| "focused" \| "error" \| "disabled"` | `"default"` | Visual state |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size variant |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `input-change` | `string` (the current value) | Fires when the input value changes through user interaction |
+
+## Slots
+
+Default slot not used. All content controlled via properties.
+
+## CSS Parts
+
+None exposed.
+
+## Tokens / CSS Variables
+
+- `--rel-fontFamilies-primary`: Font family
+- `--rel-fontSizes-sm`, `--rel-fontSizes-md`: Font sizes
+- `--rel-fontWeights-medium`: Font weight for label
+- `--rel-text-heading`: Label color
+- `--rel-text-primary`: Input text color
+- `--rel-text-placeholder`: Placeholder and icon color
+- `--rel-text-disabled`: Disabled text color
+- `--rel-border-default`: Default border color
+- `--rel-colors-primary-500`: Focus border color
+- `--rel-border-error`: Error state border color
+- `--rel-colors-white`: Input background (light mode)
+- `--rel-surface-surface`: Disabled background
+- `--rel-spacing-space-*`: Spacing tokens
+- `--rel-borders-radius-border-radius-200`: Border radius
+
+## Accessibility
+
+- Associates `<label>` with input via `for`/`id`
+- Supports native HTML5 input attributes (`required`, `disabled`, `readonly`, `maxlength`)
+- Focus ring visible on keyboard navigation (`:focus-visible`)
+- Error state communicated visually via border color
+- Supporting text can provide `aria-describedby` context
+
+## Notes / Edge Cases
+
+- The `state` prop overrides internal focus state if set explicitly
+- Icons are decorative (text content, not `<img>` elements)
+- Input type `password` does not auto-toggle visibility (use `rightIcon` for toggle button)
+- Error state must be set programmatically; no built-in validation
+- Disabled inputs cannot be focused or edited

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

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-export type TextFieldState = "default" | "focused" | "error" | "disabled";
+export type TextFieldState = "default" | "error" | "disabled";
 export type TextFieldSize = "small" | "medium" | "large";
 
 @customElement("rel-textfield")
@@ -16,27 +16,29 @@ export class RelTextfield extends LitElement {
   @property({ type: String }) state: TextFieldState = "default";
   @property({ type: String }) size: TextFieldSize = "medium";
 
-  @state() private internalState: TextFieldState = "default";
+  @state() private internalState: "default" | "focused" = "default";
+
+  private uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
 
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
 
     /* Wrapper */
     .textfield-wrapper {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--rel-spacing-space-2xs, 4px);
       width: 100%;
     }
 
     /* Label */
     .textfield-label {
-      font-size: 0.85rem;
-      font-weight: 500;
-      color: #111;
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-text-heading, #2b2b2b);
     }
 
     /* Container */
@@ -44,14 +46,14 @@ export class RelTextfield extends LitElement {
       display: flex;
       align-items: center;
       position: relative;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-      background: white;
+      border: 1px solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      background: var(--rel-colors-white, #fff);
       transition: border 0.2s;
     }
 
     .textfield-container.disabled {
-      background: #f5f5f5;
+      background: var(--rel-surface-surface, #f5f5f5);
       cursor: not-allowed;
     }
 
@@ -60,22 +62,23 @@ export class RelTextfield extends LitElement {
       flex: 1;
       border: none;
       outline: none;
-      font-size: 0.9rem;
-      padding: 0.5rem 0.75rem;
+      font-size: var(--rel-fontSizes-md, 14px);
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
       background: transparent;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      color: var(--rel-text-primary, #333);
     }
 
     .textfield-input:disabled {
       cursor: not-allowed;
-      color: #999;
+      color: var(--rel-text-disabled, #9e9e9e);
     }
 
     .icon {
       position: absolute;
       display: flex;
       pointer-events: none;
-      color: #7e8186;
+      color: var(--rel-text-placeholder, #a9a9a9);
     }
 
     .icon.left {
@@ -87,59 +90,70 @@ export class RelTextfield extends LitElement {
     }
 
     .textfield-wrapper.small .textfield-input {
-      padding: 0.5rem 1rem;
-      font-size: 0.9rem;
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      font-size: var(--rel-fontSizes-sm, 12px);
     }
 
     .textfield-wrapper.medium .textfield-input {
-      padding: 0.688rem 1rem;
-      font-size: 1rem;
+      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
+      font-size: var(--rel-fontSizes-md, 14px);
     }
 
     .textfield-wrapper.large .textfield-input {
-      padding: 0.875rem 1rem;
-      font-size: 1.1rem;
+      padding: var(--rel-spacing-space-md, 16px) var(--rel-spacing-space-md, 16px);
+      font-size: var(--rel-fontSizes-lg, 20px);
     }
 
     /* Adjust padding when icons are present */
     .textfield-wrapper .textfield-input.has-left-icon {
-      padding-left: 2.5rem;
+      padding-left: var(--rel-spacing-space-2xl, 32px);
     }
 
     .textfield-wrapper .textfield-input.has-right-icon {
-      padding-right: 2.5rem;
+      padding-right: var(--rel-spacing-space-2xl, 32px);
     }
 
     /* States */
     .textfield-wrapper.focused .textfield-container {
-      border-color: #111;
+      border-color: var(--rel-colors-primary-500, #0091ea);
+    }
+
+    .textfield-input:focus-visible {
+      outline: none;
+    }
+
+    .textfield-wrapper.focused .textfield-container,
+    .textfield-container:focus-within {
+      border-color: var(--rel-colors-primary-500, #0091ea);
+      box-shadow: 0 0 0 1px var(--rel-colors-primary-500, #0091ea);
     }
 
     .textfield-wrapper.error .textfield-container {
-      border-color: #d50000;
+      border-color: var(--rel-border-error, #cc0000);
     }
 
     .textfield-wrapper.disabled .textfield-container {
-      border-color: #d7d9db;
+      border-color: var(--rel-border-default, #ddd);
     }
 
     /* Supporting text */
     .textfield-support {
-      font-size: 0.75rem;
-      color: #666;
+      font-size: var(--rel-fontSizes-xs, 10px);
+      color: var(--rel-text-placeholder, #a9a9a9);
     }
 
     .textfield-support.error {
-      color: #d50000;
+      color: var(--rel-text-error, #cc0000);
     }
-  `;
 
-  private get currentState(): TextFieldState {
-    return this.state !== "default" ? this.state : this.internalState;
-  }
+    /* Placeholder */
+    .textfield-input::placeholder {
+      color: var(--rel-text-placeholder, #a9a9a9);
+    }
+  `;
 
   private handleFocus() {
-    if (this.state !== "disabled" && this.state !== "error") {
+    if (this.state !== "disabled") {
       this.internalState = "focused";
     }
   }
@@ -154,7 +168,7 @@ export class RelTextfield extends LitElement {
     const input = e.target as HTMLInputElement;
     this.value = input.value;
     this.dispatchEvent(
-      new CustomEvent<string>("input-change", {
+      new CustomEvent<string>("rel-change", {
         detail: this.value,
         bubbles: true,
         composed: true,
@@ -166,8 +180,9 @@ export class RelTextfield extends LitElement {
     const wrapperClasses = [
       "textfield-wrapper",
       this.size,
-      this.currentState,
-    ].join(" ");
+      this.state,
+      this.internalState === "focused" ? "focused" : "",
+    ].filter(Boolean).join(" ");
 
     const inputClasses = [
       "textfield-input",
@@ -180,7 +195,7 @@ export class RelTextfield extends LitElement {
     return html`
       <div class="${wrapperClasses}">
         ${this.label
-          ? html`<label class="textfield-label">${this.label}</label>`
+          ? html`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>`
           : ""}
 
         <div
@@ -194,6 +209,7 @@ export class RelTextfield extends LitElement {
 
           <input
             type="${this.type}"
+            id="${this.uniqueId}"
             class="${inputClasses}"
             placeholder="${this.placeholder}"
             .value="${this.value}"

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

@@ -9,9 +9,10 @@ export class RelToast extends LitElement {
   @property({ type: String }) type: ToastType = "default";
   @property({ type: String }) actionLabel?: string;
   @property({ type: Number }) duration: number = 4000;
+  @property({ type: Boolean, reflect: true }) show = false;
 
   @state() private visible: boolean = false;
-  private timeoutId?: number;
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -23,7 +24,7 @@ export class RelToast extends LitElement {
       justify-content: center;
       width: 100%;
       pointer-events: none;
-      z-index: 1000;
+      z-index: var(--rel-z-toast, 9000);
       font-family: var(--rel-fontFamilies-primary);
     }
 
@@ -31,20 +32,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 +61,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 +73,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 +87,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 {
@@ -101,25 +120,45 @@ export class RelToast extends LitElement {
     }
   `;
 
-  show() {
-    this.visible = true;
-
-    if (this.duration > 0) {
-      this.timeoutId = window.setTimeout(() => this.close(), this.duration);
+  willUpdate(changed: Map<string, unknown>) {
+    if (!changed.has('show')) return;
+    if (this.show) {
+      this.visible = true;
+      if (this._dismissTimer) clearTimeout(this._dismissTimer);
+      if (this.duration > 0) {
+        this._dismissTimer = setTimeout(() => this.close(), this.duration);
+      }
+    } else {
+      this.visible = false;
+      if (this._dismissTimer) {
+        clearTimeout(this._dismissTimer);
+        this._dismissTimer = null;
+      }
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._dismissTimer) clearTimeout(this._dismissTimer);
+  }
+
+  open() {
+    this.show = true;
+  }
+
   close() {
+    this.show = false;
     this.visible = false;
+    if (this._dismissTimer) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
+    }
     this.dispatchEvent(
       new CustomEvent("dismissed", {
         bubbles: true,
         composed: true,
       })
     );
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
   }
 
   private handleActionClick(event: Event) {
@@ -135,7 +174,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 +186,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>
     `;
   }