@reliability-design/web 1.0.3 → 1.0.6

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,6 +100,13 @@ 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(ev: Event) {
@@ -148,6 +155,8 @@ export class RelSwitch extends LitElement {
       <label class="${wrapperClasses}">
         <input
           type="checkbox"
+          role="switch"
+          aria-checked="${this.checked}"
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @change=${(e: Event) => this.toggle(e)}

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

@@ -14,34 +14,40 @@ export class RelTab extends LitElement {
 
   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;
@@ -107,10 +113,26 @@ 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();
+      });
     }
   }
 

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

@@ -0,0 +1,178 @@
+# rel-table
+
+## Overview
+A simple table wrapper component providing optional border and compact mode styling. Uses slots to accept standard HTML table content (thead, tbody, tfoot). Features horizontal scrolling for overflow and semantic table structure.
+
+## Usage
+```html
+<!-- Basic table -->
+<rel-table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+      <td>Admin</td>
+    </tr>
+    <tr>
+      <td>Jane Smith</td>
+      <td>jane@example.com</td>
+      <td>User</td>
+    </tr>
+  </tbody>
+</rel-table>
+
+<!-- Bordered table -->
+<rel-table bordered>
+  <thead>
+    <tr>
+      <th>Product</th>
+      <th>Price</th>
+      <th>Quantity</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Widget</td>
+      <td>$10.00</td>
+      <td>5</td>
+    </tr>
+    <tr>
+      <td>Gadget</td>
+      <td>$25.00</td>
+      <td>2</td>
+    </tr>
+  </tbody>
+</rel-table>
+
+<!-- Compact table -->
+<rel-table compact>
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>001</td>
+      <td>Active</td>
+    </tr>
+    <tr>
+      <td>002</td>
+      <td>Pending</td>
+    </tr>
+  </tbody>
+</rel-table>
+
+<!-- Bordered and compact -->
+<rel-table bordered compact>
+  <thead>
+    <tr>
+      <th>Date</th>
+      <th>Event</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>2024-01-15</td>
+      <td>Launch</td>
+    </tr>
+    <tr>
+      <td>2024-02-20</td>
+      <td>Update</td>
+    </tr>
+  </tbody>
+</rel-table>
+
+<!-- Responsive table with horizontal scroll -->
+<rel-table bordered>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+      <td>Data 3</td>
+      <td>Data 4</td>
+      <td>Data 5</td>
+      <td>Data 6</td>
+      <td>Data 7</td>
+      <td>Data 8</td>
+    </tr>
+  </tbody>
+</rel-table>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `bordered` (reflected) | `boolean` | `false` | Adds border and border-radius to the table wrapper |
+| `compact` (reflected) | `boolean` | `false` | Applies compact spacing (currently defined but not styled in component) |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Standard HTML table content (`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`, etc.) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Table font size
+
+### Color Tokens
+- `--rel-colors-gray-primary` - Table text color
+- `--rel-colors-gray-border` - Border color (when bordered is true)
+
+### Border Tokens
+- `--rel-borders-width-stroke-100` - Border width
+- `--rel-borders-radius-border-radius-200` - Table wrapper border radius
+
+## Accessibility
+- Uses semantic native `<table>` element for proper screen reader support
+- Ensure slotted table content includes proper `<thead>`, `<th>`, and `scope` attributes
+- `caption-side: bottom` allows captions to be read after table content
+
+### Keyboard Interactions
+- Standard browser table navigation
+- Focusable elements within cells can be tabbed to
+
+### Focus Behavior
+- No specific focus handling (standard table behavior)
+
+## Notes / Edge Cases
+- The component wraps the table in a `.table-wrapper` div with `overflow-x: auto` for horizontal scrolling
+- The inner `<table>` element uses `border-collapse: collapse` for standard table rendering
+- **bordered mode**: Applies a border with `--rel-borders-width-stroke-100` and rounded corners to the wrapper
+- The `bordered` and `compact` attributes are reflected in HTML (appear as actual attributes when set)
+- **compact mode**: Currently reflected but no styling is applied in the component (may be intended for future use or external styling)
+- The table is `width: 100%` by default
+- The component is `display: block` and takes full width of its container
+- The table uses `caption-side: bottom` for any `<caption>` elements
+- You must provide your own cell padding, row styling, and hover effects via global CSS or inline styles
+- The component provides minimal structural styling; most table appearance is controlled by the browser and your custom CSS

package/dist/components/rel-table/rel-table-body.ts

@@ -0,0 +1,16 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-table-body")
+export class RelTableBody extends LitElement {
+  static styles = css`
+    :host {
+      display: table-row-group;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/dist/components/rel-table/rel-table-caption.ts

@@ -0,0 +1,22 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-table-caption")
+export class RelTableCaption extends LitElement {
+  static styles = css`
+    :host {
+      display: table-caption;
+      caption-side: bottom;
+      font-family: var(--rel-fontFamilies-primary);
+      margin-top: var(--rel-spacing-space-md);
+      padding-top: var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-placeholder);
+      text-align: center;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/dist/components/rel-table/rel-table-cell.ts

@@ -0,0 +1,49 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-table-cell")
+export class RelTableCell extends LitElement {
+  @property({ type: String, reflect: true }) align: "left" | "center" | "right" = "left";
+  @property({ type: Number, reflect: true }) colspan?: number;
+
+  static styles = css`
+    :host {
+      display: table-cell;
+      font-family: var(--rel-fontFamilies-primary);
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-primary);
+      vertical-align: middle;
+      text-align: left;
+    }
+
+    :host([align="center"]) {
+      text-align: center;
+    }
+
+    :host([align="right"]) {
+      text-align: right;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    // Handle colspan attribute
+    if (changedProperties.has("colspan") && this.colspan) {
+      // Apply colspan to the host element since it's display: table-cell
+      this.style.setProperty("--colspan", this.colspan.toString());
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Set colspan attribute on the host element for table layout
+    if (this.colspan) {
+      this.setAttribute("colspan", this.colspan.toString());
+    }
+  }
+}

package/dist/components/rel-table/rel-table-footer.ts

@@ -0,0 +1,18 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-table-footer")
+export class RelTableFooter extends LitElement {
+  static styles = css`
+    :host {
+      display: table-footer-group;
+      font-family: var(--rel-fontFamilies-primary);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      background-color: var(--rel-colors-gray-light);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}