@reliability-design/web 1.0.3 → 1.1.1

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 export interface TabItem {
   label: string;
@@ -7,41 +7,60 @@ export interface TabItem {
   disabled?: boolean;
 }
 
+@customElement("rel-tab-item")
+export class RelTabItem extends LitElement {
+  @property({ type: String }) label: string = "";
+  @property({ type: String }) value: string = "";
+  @property({ type: Number }) badge: number = 0;
+  @property({ type: Boolean }) disabled: boolean = false;
+
+  render() {
+    return html``;
+  }
+}
+
 @customElement("rel-tab")
 export class RelTab extends LitElement {
   @property({ type: Array }) tabs: TabItem[] = [];
   @property({ type: Number, reflect: true }) activeIndex = 0;
+  @state() private _tabItems: RelTabItem[] = [];
 
   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,15 +96,15 @@ export class RelTab extends LitElement {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      background: #ff0400;
-      color: #fff;
-      border-radius: 50%;
-      font-size: 11px;
+      background: var(--rel-color-brand);
+      color: #000000;
+      border-radius: var(--rel-tab-badge-radius, 50%);
+      font-size: var(--rel-fontSizes-xs);
       font-weight: 600;
-      min-width: 16px;
+      min-width: var(--rel-tab-badge-min-width, 16px);
       text-align: center;
-      height: 16px;
-      padding: 2px;
+      height: var(--rel-tab-badge-height, 16px);
+      padding: var(--rel-spacing-space-3xs, 2px);
     }
 
     /* Tab content */
@@ -94,11 +113,29 @@ export class RelTab extends LitElement {
     }
   `;
 
+  private _onSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this._tabItems = slot
+      .assignedElements()
+      .filter((el): el is RelTabItem => el instanceof RelTabItem);
+  }
+
+  private get _effectiveTabs(): Array<{ label: string; badge?: number; disabled?: boolean }> {
+    if (this._tabItems.length > 0) {
+      return this._tabItems.map((item) => ({
+        label: item.label,
+        badge: item.badge || 0,
+        disabled: item.disabled,
+      }));
+    }
+    return this.tabs;
+  }
+
   private selectTab(index: number) {
-    if (this.tabs[index]?.disabled) return;
+    if (this._effectiveTabs[index]?.disabled) return;
     this.activeIndex = index;
     this.dispatchEvent(
-      new CustomEvent<number>("tab-change", {
+      new CustomEvent<number>("rel-tab-change", {
         detail: index,
         bubbles: true,
         composed: true,
@@ -107,17 +144,36 @@ 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._effectiveTabs[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;
+      const tabs = this._effectiveTabs;
+      let next = index;
+      for (let i = 0; i < tabs.length; i++) {
+        next = (next + dir + tabs.length) % tabs.length;
+        if (!tabs[next]?.disabled) break;
+      }
+      this.selectTab(next);
+      this.updateComplete.then(() => {
+        const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
+        (tabEls?.[next] as HTMLElement)?.focus();
+      });
     }
   }
 
   render() {
+    const tabs = this._effectiveTabs;
     return html`
+      <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
       <div class="tabs-wrapper" role="tablist">
-        ${this.tabs.map(
+        ${tabs.map(
           (tab, i) => html`
             <div
               class="tab ${i === this.activeIndex

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,21 @@
+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);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,27 @@
+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: left;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "caption");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,42 @@
+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: contents;
+    }
+
+    td {
+      border-right: 1px solid var(--rel-colors-gray-border, #e0e0e0);
+    }
+
+    :host(:last-child) td {
+      border-right: none;
+    }
+  `;
+
+  render() {
+    return html`
+      <td
+        role="cell"
+        colspan="${this.colspan ?? 1}"
+        style="
+          text-align: ${this.align};
+          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;
+          border-bottom: 1px solid var(--rel-colors-gray-border, #e0e0e0);
+        "
+      >
+        <slot></slot>
+      </td>
+    `;
+  }
+}

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

@@ -0,0 +1,23 @@
+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);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,45 @@
+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: var(--rel-table-head-height, 48px);
+      border-bottom: 1px solid var(--rel-colors-gray-divider, #bdbdbd);
+      border-right: 1px solid var(--rel-colors-gray-border, #e0e0e0);
+    }
+
+    :host(:last-child) {
+      border-right: none;
+    }
+
+    :host([align="center"]) {
+      text-align: center;
+    }
+
+    :host([align="right"]) {
+      text-align: right;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "columnheader");
+    this.setAttribute("scope", "col");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,21 @@
+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);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,36 @@
+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);
+      transition: background-color 0.15s ease;
+    }
+
+    :host(:hover) {
+      background-color: var(--rel-colors-gray-light);
+    }
+
+    :host([selected]) {
+      background-color: var(--rel-color-bg-selected);
+    }
+
+    :host([selected]:hover) {
+      background-color: var(--rel-color-bg-hover);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "row");
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,53 @@
+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]) {
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      overflow: hidden;
+    }
+
+    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);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "table");
+  }
+
+  render() {
+    return html`
+      <div class="table-wrapper">
+        <table>
+          <slot></slot>
+        </table>
+      </div>
+    `;
+  }
+}