@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type StepStatus = "done" | "progress" | "disabled";
 export type TextAlign = "right" | "below";
@@ -126,16 +127,16 @@ export class RelStepper extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 22px;
-      height: 22px;
-      border: 2px solid var(--rel-colors-gray-border);
-      background: var(--rel-colors-white);
+      width: var(--rel-stepper-indicator-size, 22px);
+      height: var(--rel-stepper-indicator-size, 22px);
+      border: 2px solid var(--rel-color-border-default);
+      background: var(--rel-color-bg-primary);
       border-radius: 50%;
       font-size: var(--rel-fontSizes-sm);
       font-weight: var(--rel-fontWeights-medium);
       position: relative;
       z-index: 2;
-      transition: all 0.2s ease;
+      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
       flex-shrink: 0;
     }
 
@@ -151,7 +152,7 @@ export class RelStepper extends LitElement {
     .step-label {
       white-space: nowrap;
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-color-text-primary);
     }
 
     /* Horizontal text-below specific */
@@ -187,7 +188,7 @@ export class RelStepper extends LitElement {
      ********************************************/
     .connector {
       position: absolute;
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
       z-index: 1;
     }
 
@@ -198,7 +199,7 @@ export class RelStepper extends LitElement {
       transform: translateY(-50%);
       height: 2px;
       position: absolute;
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
     }
 
     .rel-stepper.horizontal .rel-step:last-child .connector {
@@ -237,43 +238,54 @@ export class RelStepper extends LitElement {
      * Step States
      ********************************************/
     .rel-step.done .indicator {
-      background: var(--rel-colors-black);
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background: var(--rel-color-text-heading);
+      border-color: var(--rel-color-text-heading);
+      color: var(--rel-color-text-inverse);
     }
 
     .rel-step.progress .indicator {
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-black);
-      background: var(--rel-colors-white);
+      border-color: var(--rel-color-text-heading);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-heading);
     }
 
     .rel-step.disabled .indicator {
-      background: var(--rel-colors-gray-light, #fafafa);
-      border-color: var(--rel-colors-gray-border, #ddd);
-      color: var(--rel-text-disabled, #9e9e9e);
+      background: var(--rel-color-bg-secondary);
+      border-color: var(--rel-color-border-default);
+      color: var(--rel-color-text-disabled);
     }
 
     .rel-step.done .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.progress .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.done .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .rel-step.progress .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .rel-step.disabled .step-label {
-      color: var(--rel-text-disabled, #9e9e9e);
+      color: var(--rel-color-text-disabled);
+    }
+
+    /* Dark mode: ensure progress/done indicator and labels stay readable */
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .step-label,
+    :host-context(.dark) .rel-step.progress .step-label {
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .indicator,
+    :host-context(.dark) .rel-step.progress .indicator {
+      color: #ffffff;
     }
 
     /********************************************
@@ -281,36 +293,36 @@ export class RelStepper extends LitElement {
      ********************************************/
     /* Horizontal */
     .rel-stepper.large.horizontal {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal {
-      gap: 60px;
+      gap: var(--rel-stepper-connector-length-md, 60px);
     }
 
     .rel-stepper.large.horizontal .connector {
-      width: 86px;
+      width: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal .connector {
-      width: 60px;
+      width: var(--rel-stepper-connector-length-md, 60px);
     }
 
     /* Vertical */
     .rel-stepper.large.vertical .connector {
-      height: 86px;
+      height: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.large.vertical {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.vertical .connector {
-      height: 42px;
+      height: var(--rel-stepper-connector-length-sm, 42px);
     }
 
     .rel-stepper.small.vertical {
-      gap: 42px;
+      gap: var(--rel-stepper-connector-length-sm, 42px);
     }
   `;
 
@@ -338,7 +350,7 @@ export class RelStepper extends LitElement {
     if (step.status === "disabled") return;
 
     this.dispatchEvent(
-      new CustomEvent("step-change", {
+      new CustomEvent("rel-step-change", {
         detail: {
           index,
           step,

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

@@ -1,21 +1,26 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @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 {
-      --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);
+      --switch-track: var(--rel-color-text-placeholder);
+      --switch-knob-on: var(--rel-color-text-primary);
+      --switch-knob-off: var(--rel-color-bg-primary);
+      --switch-halo: var(--rel-color-border-default);
+      --switch-disabled: var(--rel-color-text-disabled);
       display: inline-block;
     }
 
@@ -23,8 +28,8 @@ export class RelSwitch extends LitElement {
     .switch-wrapper {
       position: relative;
       display: inline-block;
-      width: 42px;
-      height: 22px;
+      width: var(--rel-switch-track-width, 42px);
+      height: var(--rel-switch-track-height, 22px);
       cursor: pointer;
     }
 
@@ -60,8 +65,8 @@ export class RelSwitch extends LitElement {
       top: 50%;
       left: -2px;
       transform: translateY(-50%);
-      height: 18px;
-      width: 18px;
+      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,
@@ -77,7 +82,7 @@ export class RelSwitch extends LitElement {
 
     /* Hover */
     .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: var(--rel-text-dark-placeholder);
+      background-color: var(--rel-color-text-placeholder);
     }
 
     /* Focus halo */
@@ -116,14 +121,22 @@ export class RelSwitch extends LitElement {
     this.checked = input.checked;
 
     this.dispatchEvent(
-      new CustomEvent<boolean>("changed", {
-        detail: this.checked,
+      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;
   }
@@ -131,6 +144,7 @@ export class RelSwitch extends LitElement {
   private handleBlur() {
     this.isFocused = false;
     this.isPressed = false;
+    this._onTouched();
   }
 
   private handleMouseDown() {

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

@@ -1,5 +1,7 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "../rel-badge/rel-badge";
 
 export interface TabItem {
   label: string;
@@ -7,47 +9,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: 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-text-default: var(--rel-color-text-primary);
+      --tab-text-disabled: var(--rel-color-text-disabled);
+      --tab-text-hover: var(--rel-color-text-heading);
       --tab-underline-height: 3px;
-      --tab-hover-color: var(--rel-surface-surface);
+      --tab-hover-color: var(--rel-color-bg-tertiary);
       display: block;
       font-family: var(--rel-fontFamilies-primary);
     }
 
     .tabs-wrapper {
       display: flex;
-      border-bottom: 1px solid var(--rel-border-tab, #c4c4c4);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      border-bottom: 1px solid var(--rel-border-tab);
+      font-family: var(--rel-fontFamilies-primary);
       user-select: none;
     }
 
     .tab {
       position: relative;
-      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
       cursor: pointer;
       color: var(--tab-text-default);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-medium);
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs, 4px);
+      gap: var(--rel-spacing-space-2xs);
     }
 
     .tab:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
-      border-radius: var(--rel-borders-radius-border-radius-100, 2px);
+      border-radius: var(--rel-borders-radius-border-radius-100);
     }
 
     .tab:hover:not(.disabled) .tab-label {
@@ -78,33 +93,35 @@ export class RelTab extends LitElement {
       background-color: var(--tab-hover-color);
     }
 
-    /* Badge */
-    .tab-badge {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
-      border-radius: 50%;
-      font-size: 11px;
-      font-weight: 600;
-      min-width: 16px;
-      text-align: center;
-      height: 16px;
-      padding: 2px;
-    }
-
     /* 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; 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,
@@ -114,7 +131,7 @@ export class RelTab extends LitElement {
 
   private onKeyDown(event: KeyboardEvent, index: number) {
     if (event.key === "Enter" || event.key === " ") {
-      if (this.tabs[index]?.disabled) return;
+      if (this._effectiveTabs[index]?.disabled) return;
       event.preventDefault();
       this.selectTab(index);
       return;
@@ -123,10 +140,11 @@ export class RelTab extends LitElement {
     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 < this.tabs.length; i++) {
-        next = (next + dir + this.tabs.length) % this.tabs.length;
-        if (!this.tabs[next]?.disabled) break;
+      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(() => {
@@ -137,9 +155,11 @@ export class RelTab extends LitElement {
   }
 
   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
@@ -154,7 +174,7 @@ export class RelTab extends LitElement {
             >
               <span class="tab-label">${tab.label}</span>
               ${tab.badge
-                ? html`<span class="tab-badge">${tab.badge}</span>`
+                ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
                 : ""}
               <span class="tab-underline"></span>
             </div>

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

@@ -10,6 +10,11 @@ export class RelTableBody extends LitElement {
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
   render() {
     return html`<slot></slot>`;
   }

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

@@ -12,10 +12,15 @@ export class RelTableCaption extends LitElement {
       padding-top: var(--rel-spacing-space-sm);
       font-size: var(--rel-fontSizes-sm);
       color: var(--rel-colors-gray-placeholder);
-      text-align: center;
+      text-align: left;
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "caption");
+  }
+
   render() {
     return html`<slot></slot>`;
   }

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

@@ -1,49 +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: 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());
-    }
-  }
-}
+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

@@ -12,6 +12,11 @@ export class RelTableFooter extends LitElement {
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
   render() {
     return html`<slot></slot>`;
   }

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

@@ -15,7 +15,13 @@ export class RelTableHead extends LitElement {
       font-size: var(--rel-fontSizes-sm);
       color: var(--rel-colors-gray-placeholder);
       vertical-align: middle;
-      height: 48px;
+      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"]) {
@@ -27,6 +33,12 @@ export class RelTableHead extends LitElement {
     }
   `;
 
+  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

@@ -10,6 +10,11 @@ export class RelTableHeader extends LitElement {
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "rowgroup");
+  }
+
   render() {
     return html`<slot></slot>`;
   }

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

@@ -9,7 +9,6 @@ export class RelTableRow extends LitElement {
     :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;
     }
 
@@ -18,14 +17,19 @@ export class RelTableRow extends LitElement {
     }
 
     :host([selected]) {
-      background-color: var(--rel-colors-gray-surface);
+      background-color: var(--rel-color-bg-selected);
     }
 
     :host([selected]:hover) {
-      background-color: var(--rel-colors-gray-warm);
+      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

@@ -20,9 +20,10 @@ export class RelTable extends LitElement {
       overflow-x: auto;
     }
 
-    :host([bordered]) .table-wrapper {
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+    :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 {
@@ -35,6 +36,11 @@ export class RelTable extends LitElement {
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "table");
+  }
+
   render() {
     return html`
       <div class="table-wrapper">