@reliability-design/web 1.0.2 → 1.0.6

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

@@ -151,7 +151,7 @@ export class RelStepper extends LitElement {
     .step-label {
       white-space: nowrap;
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-colors-gray-paragraph);
+      color: var(--rel-text-primary, #333);
     }
 
     /* Horizontal text-below specific */
@@ -226,7 +226,10 @@ export class RelStepper extends LitElement {
       display: none;
     }
 
-    .rel-stepper.vertical.text-right .rel-step:last-child .indicator-wrapper .connector {
+    .rel-stepper.vertical.text-right
+      .rel-step:last-child
+      .indicator-wrapper
+      .connector {
       display: none;
     }
 
@@ -246,9 +249,9 @@ export class RelStepper extends LitElement {
     }
 
     .rel-step.disabled .indicator {
-      background: var(--rel-colors-gray-bg-subtle);
-      border-color: var(--rel-colors-gray-border);
-      color: var(--rel-colors-gray-disabled);
+      background: var(--rel-colors-gray-light, #fafafa);
+      border-color: var(--rel-colors-gray-border, #ddd);
+      color: var(--rel-text-disabled, #9e9e9e);
     }
 
     .rel-step.done .connector {
@@ -270,7 +273,7 @@ export class RelStepper extends LitElement {
     }
 
     .rel-step.disabled .step-label {
-      color: var(--rel-colors-gray-disabled);
+      color: var(--rel-text-disabled, #9e9e9e);
     }
 
     /********************************************
@@ -331,6 +334,21 @@ export class RelStepper extends LitElement {
     return classes.join(" ");
   }
 
+  private onStepClick(step: Step, index: number) {
+    if (step.status === "disabled") return;
+
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        detail: {
+          index,
+          step,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private renderIndicator(step: Step, index: number) {
     if (step.status === "done") {
       return html`
@@ -344,7 +362,7 @@ export class RelStepper extends LitElement {
         >
           <path
             d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
-            fill="white"
+            fill="currentColor"
           />
         </svg>
       `;
@@ -369,7 +387,10 @@ export class RelStepper extends LitElement {
       <div class="${stepperClasses}">
         ${this.steps.map(
           (step, idx) => html`
-            <div class="${this.getStepClasses(step)}">
+            <div
+              class="${this.getStepClasses(step)}"
+              @click="${() => this.onStepClick(step, idx)}"
+            >
               ${isVertical && isTextRight
                 ? html`
                     <!-- Indicator with connector below -->

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

@@ -0,0 +1,102 @@
+# rel-switch
+
+## Overview
+A toggle switch component for binary on/off states. Features smooth animations, focus halo effects, pressed states, and respects user motion preferences. Built with custom visual styling while maintaining native checkbox accessibility.
+
+## Usage
+```html
+<!-- Basic switch -->
+<rel-switch></rel-switch>
+
+<!-- Pre-checked switch -->
+<rel-switch checked></rel-switch>
+
+<!-- Disabled switch -->
+<rel-switch disabled></rel-switch>
+<rel-switch checked disabled></rel-switch>
+
+<!-- With event listener -->
+<rel-switch id="notifications"></rel-switch>
+<script>
+  const toggle = document.getElementById('notifications');
+  toggle.addEventListener('changed', (e) => {
+    console.log('Switch state:', e.detail); // boolean: true/false
+  });
+</script>
+
+<!-- Programmatically control -->
+<rel-switch id="darkMode"></rel-switch>
+<script>
+  const darkModeSwitch = document.getElementById('darkMode');
+  darkModeSwitch.checked = true;
+  darkModeSwitch.disabled = false;
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Whether the switch is in the ON position |
+| `disabled` | `boolean` | `false` | Disables the switch and reduces opacity |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | `boolean` (the new checked state) | Fired when the switch is toggled by 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:
+
+- `--switch-track` - Track color when unchecked (default: `--rel-text-placeholder`)
+- `--switch-knob-on` - Knob color when checked (default: `--rel-colors-black`)
+- `--switch-knob-off` - Knob color when unchecked (default: `--rel-colors-white`)
+- `--switch-halo` - Focus halo color (default: `--rel-border-default`)
+- `--switch-disabled` - Color for disabled state (default: `--rel-text-disabled`)
+
+### Design Token References
+- `--rel-text-placeholder` - Default track color
+- `--rel-text-dark-placeholder` - Hover track color
+- `--rel-colors-black` - ON knob color
+- `--rel-colors-white` - OFF knob color
+- `--rel-border-default` - Focus halo
+- `--rel-text-disabled` - Disabled state color
+- `--rel-surface-surface` - Used in disabled styling
+
+## Accessibility
+- Uses native checkbox input with `role="switch"` and `aria-checked`
+- Visually hidden checkbox maintains keyboard and screen reader support
+- Focus visible state shows prominent halo around knob
+- Disabled state prevents interaction and reduces opacity to 0.5
+- Smooth transitions respect `prefers-reduced-motion` media query
+
+### Keyboard Interactions
+- `Space` - Toggle switch on/off
+- `Tab` - Move focus to/from switch
+
+### Focus Behavior
+- Focus ring appears as a 6px halo around the knob using `--switch-halo` color
+- Halo uses box-shadow for smooth visual feedback
+
+### Motion Support
+- Animations disabled when `prefers-reduced-motion: reduce` is set
+- Transitions apply to track color, knob position, knob color, and box-shadow
+
+## Notes / Edge Cases
+- The switch is 42px wide × 22px tall with a 12px tall track and 18px diameter knob
+- Visual knob animates 22px horizontally when toggling from OFF to ON
+- Hover effect only applies when not disabled (track darkens slightly)
+- Pressed state applies a `scale(0.9)` transform to the knob for tactile feedback
+- The knob includes a subtle drop shadow (`0 1px 3px rgba(0,0,0,0.3)`) for depth
+- When disabled, both track and knob use `--switch-disabled` color
+- The component is `display: inline-block` by default
+- Focus halo appears on keyboard focus only (`:focus-visible`), not on mouse click

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

@@ -11,11 +11,11 @@ export class RelSwitch extends LitElement {
 
   static styles = css`
     :host {
-      --switch-track: #7e8186;
-      --switch-knob-on: #000000;
-      --switch-knob-off: #ffffff;
-      --switch-halo: rgba(224, 224, 224, 0.8);
-      --switch-disabled: #d1d5db;
+      --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);
       display: inline-block;
     }
 
@@ -77,7 +77,7 @@ export class RelSwitch extends LitElement {
 
     /* Hover */
     .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: #666;
+      background-color: var(--rel-text-dark-placeholder);
     }
 
     /* Focus halo */
@@ -100,14 +100,23 @@ export class RelSwitch extends LitElement {
     .switch-disabled .switch-slider::before {
       background-color: var(--switch-disabled);
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .switch-slider,
+      .switch-slider::before {
+        transition: none;
+      }
+    }
   `;
 
-  private toggle() {
+  private toggle(ev: Event) {
     if (this.disabled) return;
-    this.checked = !this.checked;
-    this.requestUpdate();
+
+    const input = ev.target as HTMLInputElement;
+    this.checked = input.checked;
+
     this.dispatchEvent(
-      new CustomEvent("changed", {
+      new CustomEvent<boolean>("changed", {
         detail: this.checked,
         bubbles: true,
         composed: true,
@@ -146,9 +155,11 @@ export class RelSwitch extends LitElement {
       <label class="${wrapperClasses}">
         <input
           type="checkbox"
+          role="switch"
+          aria-checked="${this.checked}"
           ?disabled=${this.disabled}
           .checked=${this.checked}
-          @change=${this.toggle}
+          @change=${(e: Event) => this.toggle(e)}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
           @mousedown=${this.handleMouseDown}

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

@@ -0,0 +1,163 @@
+# rel-tab
+
+## Overview
+A tabbed interface component with automatic underline indicator, keyboard navigation, optional badge counts, and disabled states. Features ARIA-compliant navigation with roving tabindex and arrow key support.
+
+## Usage
+```html
+<!-- Basic tabs -->
+<rel-tab id="basicTabs"></rel-tab>
+<script>
+  const tabs = document.getElementById('basicTabs');
+  tabs.tabs = [
+    { label: 'Overview' },
+    { label: 'Details' },
+    { label: 'Settings' }
+  ];
+  tabs.activeIndex = 0;
+</script>
+
+<!-- With badges (notification counts) -->
+<rel-tab id="badgeTabs"></rel-tab>
+<script>
+  const badgeTabs = document.getElementById('badgeTabs');
+  badgeTabs.tabs = [
+    { label: 'Inbox', badge: 5 },
+    { label: 'Drafts', badge: 2 },
+    { label: 'Sent' }
+  ];
+</script>
+
+<!-- With disabled tab -->
+<rel-tab id="disabledTabs"></rel-tab>
+<script>
+  const disabledTabs = document.getElementById('disabledTabs');
+  disabledTabs.tabs = [
+    { label: 'Available' },
+    { label: 'Coming Soon', disabled: true },
+    { label: 'Active' }
+  ];
+</script>
+
+<!-- Listen for tab changes -->
+<rel-tab id="tabsWithListener"></rel-tab>
+<script>
+  const listener = document.getElementById('tabsWithListener');
+  listener.tabs = [
+    { label: 'Tab 1' },
+    { label: 'Tab 2' },
+    { label: 'Tab 3' }
+  ];
+  listener.addEventListener('tab-change', (e) => {
+    console.log('Active tab index:', e.detail);
+  });
+</script>
+
+<!-- Tab content controlled externally -->
+<rel-tab id="contentTabs" activeIndex="0"></rel-tab>
+<div id="tabContent">
+  <div class="panel" data-index="0">Content for Tab 1</div>
+  <div class="panel" data-index="1" style="display:none;">Content for Tab 2</div>
+  <div class="panel" data-index="2" style="display:none;">Content for Tab 3</div>
+</div>
+<script>
+  const contentTabs = document.getElementById('contentTabs');
+  contentTabs.tabs = [
+    { label: 'Tab 1' },
+    { label: 'Tab 2' },
+    { label: 'Tab 3' }
+  ];
+  contentTabs.addEventListener('tab-change', (e) => {
+    document.querySelectorAll('#tabContent .panel').forEach((panel, i) => {
+      panel.style.display = i === e.detail ? 'block' : 'none';
+    });
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `TabItem[]` | `[]` | Array of tab items (see TabItem interface below) |
+| `activeIndex` (reflected) | `number` | `0` | Index of the currently active tab |
+
+### TabItem Interface
+```typescript
+interface TabItem {
+  label: string;       // Display text
+  badge?: number;      // Optional notification count
+  disabled?: boolean;  // Disables interaction
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `tab-change` | `number` (the new active index) | Fired when a different tab is selected |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Tab panel content (rendered in `.tab-content` wrapper below tabs) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Component-Level Custom Properties
+The component defines CSS custom properties on `:host`:
+
+- `--tab-active-color` - Active tab underline color (default: `--rel-colors-green-primary`)
+- `--tab-text-default` - Default tab text color (default: `--rel-text-primary`)
+- `--tab-text-disabled` - Disabled tab text color (default: `--rel-text-disabled`)
+- `--tab-text-hover` - Hover tab text color (default: `--rel-text-heading`)
+- `--tab-underline-height` - Height of active underline (default: `3px`)
+- `--tab-hover-color` - Background color on hover (default: `--rel-surface-surface`)
+
+### Design Token References
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Font size
+- `--rel-fontWeights-medium` - Font weight
+- `--rel-spacing-space-sm`, `--rel-spacing-space-md` - Tab padding
+- `--rel-spacing-space-2xs` - Gap between label and badge
+- `--rel-border-tab` - Bottom border color (default: `#c4c4c4`)
+- `--rel-border-info` - Focus outline color
+- `--rel-borders-radius-border-radius-100` - Focus outline border radius
+- `--rel-colors-red-primary` - Badge background color
+- `--rel-colors-white` - Badge text color
+
+## Accessibility
+- Uses `role="tablist"` on container and `role="tab"` on each tab
+- Tabs have `aria-selected` and `aria-disabled` attributes
+- Implements roving tabindex (only active tab is focusable via Tab key)
+- Arrow key navigation between tabs
+- Focus visible states with blue outline
+
+### Keyboard Interactions
+- `Tab` - Focus the active tab (or first non-disabled tab)
+- `Arrow Right` - Navigate to next tab (wraps to first, skips disabled)
+- `Arrow Left` - Navigate to previous tab (wraps to last, skips disabled)
+- `Enter / Space` - Activate focused tab
+
+### Focus Behavior
+- Focus outline: 2px blue with -2px offset (inside boundary)
+- Border radius applied to focus outline
+- Focus automatically moves when navigating with arrow keys
+
+## Notes / Edge Cases
+- The **active tab** has a colored underline (3px high by default) at the bottom
+- **Hover effect** (non-active, non-disabled): light gray background
+- **Badges** are circular (16px height, min 16px width) with red background and white text
+- Clicking a disabled tab does nothing (no event dispatched, no index change)
+- Arrow key navigation wraps around (after last tab, goes to first, and vice versa)
+- Arrow key navigation skips disabled tabs
+- When a tab is activated via arrow keys, focus is programmatically moved to that tab
+- The component includes a `.tab-content` wrapper (with 1rem vertical padding) that renders slotted content
+- The `.tab-content` is always visible; consumers must manually show/hide panel content based on `activeIndex`
+- Tabs have a bottom border (1px solid) via `border-bottom` on `.tabs-wrapper`
+- Active tab underline (`position: absolute`, `bottom: 0`) overlays the border
+- Transitions: color (0.2s), background-color (0.2s), transform (0.2s) for smooth interactions
+- The `activeIndex` property is reflected in HTML as an attribute

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

@@ -10,38 +10,44 @@ export interface TabItem {
 @customElement("rel-tab")
 export class RelTab extends LitElement {
   @property({ type: Array }) tabs: TabItem[] = [];
-  @property({ type: Number }) activeIndex: number = 0;
+  @property({ type: Number, reflect: true }) activeIndex = 0;
 
   static styles = css`
     :host {
-      --tab-active-color: #00f49c;
-      --tab-text-default: #111;
-      --tab-text-disabled: #a5a7aa;
-      --tab-text-hover: #000;
+      --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-underline-height: 3px;
-      --tab-hover-color: #f3f3f3;
+      --tab-hover-color: var(--rel-surface-surface);
       display: block;
       font-family: var(--rel-fontFamilies-primary);
     }
 
     .tabs-wrapper {
       display: flex;
-      border-bottom: 1px solid #e5e5e5;
-      font-family: var(--rel-fontFamilies-primary);
+      border-bottom: 1px solid var(--rel-border-tab, #c4c4c4);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
       user-select: none;
     }
 
     .tab {
       position: relative;
-      padding: 0.75rem 1rem;
+      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
       cursor: pointer;
       color: var(--tab-text-default);
-      font-size: 0.9rem;
-      font-weight: 500;
+      font-size: var(--rel-fontSizes-md, 14px);
+      font-weight: var(--rel-fontWeights-medium, 500);
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: var(--rel-spacing-space-2xs, 4px);
+    }
+
+    .tab:focus-visible {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: -2px;
+      border-radius: var(--rel-borders-radius-border-radius-100, 2px);
     }
 
     .tab:hover:not(.disabled) .tab-label {
@@ -77,8 +83,8 @@ export class RelTab extends LitElement {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      background: #ff0400;
-      color: #fff;
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
       border-radius: 50%;
       font-size: 11px;
       font-weight: 600;
@@ -98,8 +104,8 @@ export class RelTab extends LitElement {
     if (this.tabs[index]?.disabled) return;
     this.activeIndex = index;
     this.dispatchEvent(
-      new CustomEvent("tab-change", {
-        detail: { index },
+      new CustomEvent<number>("tab-change", {
+        detail: index,
         bubbles: true,
         composed: true,
       })
@@ -107,24 +113,42 @@ export class RelTab extends LitElement {
   }
 
   private onKeyDown(event: KeyboardEvent, index: number) {
-    if (this.tabs[index]?.disabled) return;
     if (event.key === "Enter" || event.key === " ") {
+      if (this.tabs[index]?.disabled) return;
       event.preventDefault();
       this.selectTab(index);
+      return;
+    }
+
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      const dir = event.key === "ArrowRight" ? 1 : -1;
+      let next = index;
+      for (let i = 0; i < this.tabs.length; i++) {
+        next = (next + dir + this.tabs.length) % this.tabs.length;
+        if (!this.tabs[next]?.disabled) break;
+      }
+      this.selectTab(next);
+      this.updateComplete.then(() => {
+        const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
+        (tabEls?.[next] as HTMLElement)?.focus();
+      });
     }
   }
 
   render() {
     return html`
-      <div class="tabs-wrapper">
+      <div class="tabs-wrapper" role="tablist">
         ${this.tabs.map(
           (tab, i) => html`
             <div
-              class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled
-                ? "disabled"
-                : ""}"
+              class="tab ${i === this.activeIndex
+                ? "active"
+                : ""} ${tab.disabled ? "disabled" : ""}"
               role="tab"
-              tabindex="${tab.disabled ? -1 : 0}"
+              aria-selected="${i === this.activeIndex}"
+              aria-disabled="${tab.disabled ?? false}"
+              tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
             >