@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,197 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-@customElement("rel-switch")
-export class RelSwitch extends LitElement {
-  @property({ type: Boolean }) checked = false;
-  @property({ type: Boolean }) disabled = false;
-  @property({ type: String }) value = "";
-
-  private _onChange: (value: boolean) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  @state() private isFocused = false;
-  @state() private isPressed = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      --switch-track: var(--rel-bg-neutral-elevated-2);
-      --switch-knob-on: var(--rel-bg-neutral-inverse-2);
-      --switch-knob-off: var(--rel-text-static-light);
-      --switch-halo: var(--rel-action-overlay-hover-strong);
-      --switch-disabled: var(--rel-bg-neutral-elevated-1);
-      display: inline-block;
-    }
-
-    /* Wrapper */
-    .switch-wrapper {
-      position: relative;
-      display: inline-block;
-      width: var(--rel-switch-track-width, 42px);
-      height: var(--rel-switch-track-height, 22px);
-      cursor: pointer;
-    }
-
-    .switch-wrapper.switch-disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    /* Hide native checkbox */
-    .switch-wrapper input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    /* Track */
-    .switch-slider {
-      position: absolute;
-      top: 50%;
-      left: var(--rel-spacing-3xs);
-      right: var(--rel-spacing-3xs);
-      height: 12px;
-      background-color: var(--switch-track);
-      border-radius: 999px;
-      transform: translateY(-50%);
-      transition: background-color 0.25s ease;
-    }
-
-    /* Knob */
-    .switch-slider::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: -2px;
-      transform: translateY(-50%);
-      height: var(--rel-switch-thumb-size, 18px);
-      width: var(--rel-switch-thumb-size, 18px);
-      background-color: var(--switch-knob-off);
-      border-radius: 50%;
-      transition: transform 0.25s ease, background-color 0.25s ease,
-        box-shadow 0.2s ease;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-    }
-
-    /* ON state */
-    input:checked + .switch-slider::before {
-      background-color: var(--switch-knob-on);
-      transform: translateY(-50%) translateX(22px);
-    }
-
-    /* Hover */
-    .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: var(--rel-bg-neutral);
-    }
-
-    /* Hover halo — inverse overlay when checked (dark knob), strong overlay otherwise */
-    .switch-wrapper:hover:not(.switch-disabled) .switch-slider::before {
-      box-shadow: 0 0 0 6px var(--rel-action-overlay-hover-strong);
-    }
-
-    .switch-wrapper:hover:not(.switch-disabled) input:checked + .switch-slider::before {
-      box-shadow: 0 0 0 6px var(--rel-action-overlay-hover-inverse);
-    }
-
-    /* Focus halo */
-    .switch-focused .switch-slider::before {
-      box-shadow: 0 0 0 2px var(--rel-border-focus-inner), 0 0 0 4px var(--rel-border-focus);
-    }
-
-    /* Pressed */
-    .switch-pressed .switch-slider::before {
-      transform: scale(0.9) translateY(-50%);
-      box-shadow: 0 0 0 6px var(--rel-action-overlay-pressed);
-    }
-    .switch-pressed input:checked + .switch-slider::before {
-      transform: scale(0.9) translateY(-50%) translateX(22px);
-      box-shadow: 0 0 0 6px var(--rel-action-overlay-dragged);
-    }
-
-    /* Disabled */
-    .switch-disabled .switch-slider {
-      background-color: var(--switch-disabled);
-    }
-    .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) {
-    if (this.disabled) return;
-
-    const input = ev.target as HTMLInputElement;
-    this.checked = input.checked;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: {
-          checked: this.checked,
-          value: this.value,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this._onChange(this.checked);
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void { this._onChange = fn; }
-  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
-  writeValue(checked: boolean): void { this.checked = checked; }
-
-  private handleFocus() {
-    this.isFocused = true;
-  }
-
-  private handleBlur() {
-    this.isFocused = false;
-    this.isPressed = false;
-    this._onTouched();
-  }
-
-  private handleMouseDown() {
-    if (!this.disabled) this.isPressed = true;
-  }
-
-  private handleMouseUp() {
-    if (!this.disabled) this.isPressed = false;
-  }
-
-  render() {
-    const wrapperClasses = [
-      "switch-wrapper",
-      this.disabled && "switch-disabled",
-      this.isFocused && "switch-focused",
-      this.isPressed && "switch-pressed",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return html`
-      <label part="base" class="${wrapperClasses}">
-        <input
-          type="checkbox"
-          role="switch"
-          aria-checked="${this.checked}"
-          ?disabled=${this.disabled}
-          .checked=${this.checked}
-          @change=${(e: Event) => this.toggle(e)}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @mousedown=${this.handleMouseDown}
-          @mouseup=${this.handleMouseUp}
-        />
-        <span part="track" class="switch-slider"></span>
-      </label>
-    `;
-  }
-}

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

@@ -1,264 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "../rel-badge/rel-badge";
-
-export interface TabItem {
-  label: string;
-  badge?: number;
-  badgeDot?: boolean;
-  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;
-  /** Shows a small dot instead of a numbered badge — takes precedence over `badge`. */
-  @property({ type: Boolean, attribute: "badge-dot" }) badgeDot: boolean = false;
-  @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;
-
-  /** Tab size — styled via :host([size]) rules. */
-  @property({ type: String, reflect: true })
-  size: "sm" | "md" | "lg" = "md";
-  @state() private _tabItems: RelTabItem[] = [];
-
-  /** Stable id prefix linking tabs to the shared tabpanel. */
-  private tabsId = `rel-tab-${Math.random().toString(36).slice(2)}`;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      --tab-active-color: var(--rel-bg-brand);
-      --tab-text-default: var(--rel-text-default);
-      --tab-text-disabled: var(--rel-text-disabled);
-      --tab-text-hover: var(--rel-text-label);
-      --tab-underline-height: 3px;
-      --tab-hover-color: var(--rel-bg-neutral-elevated-1);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .tabs-wrapper {
-      display: flex;
-      border-bottom: 1px solid var(--rel-border-accent);
-      font-family: var(--rel-fonts-font-family);
-      user-select: none;
-    }
-
-    .tab {
-      position: relative;
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      cursor: pointer;
-      color: var(--rel-text-body);
-      transition: color 0.2s ease;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .tab.active {
-      color: var(--tab-text-default);
-      font-weight: var(--rel-body-md-medium-font-weight);
-    }
-
-    /* Size variants (CSS-only, Figma tab sizes) */
-    :host([size="lg"]) .tab {
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    :host([size="lg"]) .tab.active {
-      font-weight: var(--rel-body-lg-medium-font-weight);
-    }
-
-    :host([size="sm"]) .tab {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-xs-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    /* Badge tones — pass through rel-badge custom-prop API */
-    .tab rel-badge {
-      --rel-badge-bg: var(--rel-bg-danger);
-      --rel-badge-color: var(--rel-text-static-light);
-    }
-
-    .tab.disabled rel-badge {
-      --rel-badge-bg: var(--rel-bg-neutral-inverse-2);
-      --rel-badge-color: var(--rel-text-inverse);
-    }
-
-    .tab:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    .tab:hover:not(.disabled) .tab-label {
-      color: var(--tab-text-hover);
-    }
-
-    .tab.disabled {
-      color: var(--tab-text-disabled);
-      cursor: not-allowed;
-    }
-
-    /* Underline */
-    .tab-underline {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      height: var(--tab-underline-height);
-      width: 100%;
-      background-color: transparent;
-      transition: background-color 0.2s ease, transform 0.2s ease;
-    }
-
-    .tab.active .tab-underline {
-      background-color: var(--tab-active-color);
-    }
-
-    .tab:hover:not(.disabled):not(.active) {
-      background-color: var(--tab-hover-color);
-    }
-
-    /* Tab content */
-    .tab-content {
-      padding: 1rem 0;
-    }
-  `;
-
-  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; badgeDot?: boolean; disabled?: boolean }> {
-    if (this._tabItems.length > 0) {
-      return this._tabItems.map((item) => ({
-        label: item.label,
-        badge: item.badge || 0,
-        badgeDot: item.badgeDot,
-        disabled: item.disabled,
-      }));
-    }
-    return this.tabs;
-  }
-
-  private selectTab(index: number) {
-    if (this._effectiveTabs[index]?.disabled) return;
-    this.activeIndex = index;
-    this.dispatchEvent(
-      new CustomEvent<number>("rel-tab-change", {
-        detail: index,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private onKeyDown(event: KeyboardEvent, index: number) {
-    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.selectAndFocusTab(next);
-      return;
-    }
-
-    if (event.key === "Home" || event.key === "End") {
-      event.preventDefault();
-      const tabs = this._effectiveTabs;
-      const order = [...tabs.keys()];
-      if (event.key === "End") order.reverse();
-      const next = order.find((i) => !tabs[i]?.disabled);
-      if (next !== undefined) this.selectAndFocusTab(next);
-    }
-  }
-
-  private selectAndFocusTab(index: number) {
-    this.selectTab(index);
-    this.updateComplete.then(() => {
-      const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
-      (tabEls?.[index] as HTMLElement)?.focus();
-    });
-  }
-
-  render() {
-    const tabs = this._effectiveTabs;
-    return html`
-      <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
-      <div part="list" class="tabs-wrapper" role="tablist">
-        ${tabs.map(
-          (tab, i) => html`
-            <div
-              part="item" class="tab ${i === this.activeIndex
-                ? "active"
-                : ""} ${tab.disabled ? "disabled" : ""}"
-              id="${this.tabsId}-tab-${i}"
-              role="tab"
-              aria-selected="${i === this.activeIndex}"
-              aria-disabled="${tab.disabled ?? false}"
-              aria-controls="${this.tabsId}-panel"
-              tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
-              @click="${() => this.selectTab(i)}"
-              @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
-            >
-              <span part="label" class="tab-label">${tab.label}</span>
-              ${tab.badgeDot
-                ? html`<rel-badge variant="dot" size="sm"></rel-badge>`
-                : tab.badge
-                  ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
-                  : ""}
-              <span class="tab-underline"></span>
-            </div>
-          `
-        )}
-      </div>
-      <div
-        class="tab-content"
-        id="${this.tabsId}-panel"
-        role="tabpanel"
-        aria-labelledby="${this.tabsId}-tab-${this.activeIndex}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}

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

@@ -1,178 +0,0 @@
-# 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-fonts-font-family` - Font family
-- `--rel-body-md-regular-font-size` - Table font size
-
-### Color Tokens
-- `--rel-text-default` - Table text color
-- `--rel-border-default` - Border color (when bordered is true)
-
-### Border Tokens
-- `--rel-stroke-sm` - Border width
-- `--rel-border-radius-sm` - 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-stroke-sm` 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

@@ -1,22 +0,0 @@
-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 {
-      color: var(--rel-text-default);
-      display: table-row-group;
-      font-family: var(--rel-fonts-font-family);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "rowgroup");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}

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

@@ -1,30 +0,0 @@
-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;
-      margin-top: var(--rel-spacing-md);
-      padding-top: var(--rel-spacing-sm);
-      color: var(--rel-text-placeholder);
-      text-align: left;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "caption");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}