@reliability-design/web 1.0.2 → 1.0.6

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>`;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-table-head")
+export class RelTableHead extends LitElement {
+  @property({ type: String, reflect: true }) align: "left" | "center" | "right" = "left";
+
+  static styles = css`
+    :host {
+      display: table-cell;
+      font-family: var(--rel-fontFamilies-primary);
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
+      text-align: left;
+      font-weight: var(--rel-fontWeights-medium, 500);
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-placeholder);
+      vertical-align: middle;
+      height: 48px;
+    }
+
+    :host([align="center"]) {
+      text-align: center;
+    }
+
+    :host([align="right"]) {
+      text-align: right;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-table-row")
+export class RelTableRow extends LitElement {
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  static styles = css`
+    :host {
+      display: table-row;
+      font-family: var(--rel-fontFamilies-primary);
+      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      transition: background-color 0.15s ease;
+    }
+
+    :host(:hover) {
+      background-color: var(--rel-colors-gray-light);
+    }
+
+    :host([selected]) {
+      background-color: var(--rel-colors-gray-surface);
+    }
+
+    :host([selected]:hover) {
+      background-color: var(--rel-colors-gray-warm);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-table")
+export class RelTable extends LitElement {
+  @property({ type: Boolean, reflect: true }) bordered = false;
+  @property({ type: Boolean, reflect: true }) compact = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      position: relative;
+      width: 100%;
+    }
+
+    .table-wrapper {
+      position: relative;
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    :host([bordered]) .table-wrapper {
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+    }
+
+    table {
+      width: 100%;
+      caption-side: bottom;
+      border-collapse: collapse;
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-primary);
+      font-family: var(--rel-fontFamilies-primary);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="table-wrapper">
+        <table>
+          <slot></slot>
+        </table>
+      </div>
+    `;
+  }
+}

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

@@ -21,22 +21,22 @@ export class RelTextfield extends LitElement {
   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 +44,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 +60,23 @@ export class RelTextfield extends LitElement {
       flex: 1;
       border: none;
       outline: none;
-      font-size: 0.9rem;
+      font-size: var(--rel-fontSizes-md, 14px);
       padding: 0.5rem 0.75rem;
       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 {
@@ -112,25 +113,40 @@ export class RelTextfield extends LitElement {
 
     /* 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);
+    }
+
+    /* Placeholder */
+    .textfield-input::placeholder {
+      color: var(--rel-text-placeholder, #a9a9a9);
     }
   `;
 
@@ -154,8 +170,8 @@ export class RelTextfield extends LitElement {
     const input = e.target as HTMLInputElement;
     this.value = input.value;
     this.dispatchEvent(
-      new CustomEvent("input-change", {
-        detail: { value: this.value },
+      new CustomEvent<string>("input-change", {
+        detail: this.value,
         bubbles: true,
         composed: true,
       })