@reliability-design/web 1.0.6 → 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,10 +7,23 @@ 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 {
@@ -83,15 +96,15 @@ export class RelTab extends LitElement {
       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;
+      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 */
@@ -100,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,
@@ -114,7 +145,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 +154,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 +169,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

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">

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

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-export type TextFieldState = "default" | "focused" | "error" | "disabled";
+export type TextFieldState = "default" | "error" | "disabled";
 export type TextFieldSize = "small" | "medium" | "large";
 
 @customElement("rel-textfield")
@@ -16,7 +16,9 @@ export class RelTextfield extends LitElement {
   @property({ type: String }) state: TextFieldState = "default";
   @property({ type: String }) size: TextFieldSize = "medium";
 
-  @state() private internalState: TextFieldState = "default";
+  @state() private internalState: "default" | "focused" = "default";
+
+  private uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
 
   static styles = css`
     :host {
@@ -61,7 +63,7 @@ export class RelTextfield extends LitElement {
       border: none;
       outline: none;
       font-size: var(--rel-fontSizes-md, 14px);
-      padding: 0.5rem 0.75rem;
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
       background: transparent;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       color: var(--rel-text-primary, #333);
@@ -88,27 +90,27 @@ export class RelTextfield extends LitElement {
     }
 
     .textfield-wrapper.small .textfield-input {
-      padding: 0.5rem 1rem;
-      font-size: 0.9rem;
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      font-size: var(--rel-fontSizes-sm, 12px);
     }
 
     .textfield-wrapper.medium .textfield-input {
-      padding: 0.688rem 1rem;
-      font-size: 1rem;
+      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
+      font-size: var(--rel-fontSizes-md, 14px);
     }
 
     .textfield-wrapper.large .textfield-input {
-      padding: 0.875rem 1rem;
-      font-size: 1.1rem;
+      padding: var(--rel-spacing-space-md, 16px) var(--rel-spacing-space-md, 16px);
+      font-size: var(--rel-fontSizes-lg, 20px);
     }
 
     /* Adjust padding when icons are present */
     .textfield-wrapper .textfield-input.has-left-icon {
-      padding-left: 2.5rem;
+      padding-left: var(--rel-spacing-space-2xl, 32px);
     }
 
     .textfield-wrapper .textfield-input.has-right-icon {
-      padding-right: 2.5rem;
+      padding-right: var(--rel-spacing-space-2xl, 32px);
     }
 
     /* States */
@@ -150,12 +152,8 @@ export class RelTextfield extends LitElement {
     }
   `;
 
-  private get currentState(): TextFieldState {
-    return this.state !== "default" ? this.state : this.internalState;
-  }
-
   private handleFocus() {
-    if (this.state !== "disabled" && this.state !== "error") {
+    if (this.state !== "disabled") {
       this.internalState = "focused";
     }
   }
@@ -170,7 +168,7 @@ export class RelTextfield extends LitElement {
     const input = e.target as HTMLInputElement;
     this.value = input.value;
     this.dispatchEvent(
-      new CustomEvent<string>("input-change", {
+      new CustomEvent<string>("rel-change", {
         detail: this.value,
         bubbles: true,
         composed: true,
@@ -182,8 +180,9 @@ export class RelTextfield extends LitElement {
     const wrapperClasses = [
       "textfield-wrapper",
       this.size,
-      this.currentState,
-    ].join(" ");
+      this.state,
+      this.internalState === "focused" ? "focused" : "",
+    ].filter(Boolean).join(" ");
 
     const inputClasses = [
       "textfield-input",
@@ -196,7 +195,7 @@ export class RelTextfield extends LitElement {
     return html`
       <div class="${wrapperClasses}">
         ${this.label
-          ? html`<label class="textfield-label">${this.label}</label>`
+          ? html`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>`
           : ""}
 
         <div
@@ -210,6 +209,7 @@ export class RelTextfield extends LitElement {
 
           <input
             type="${this.type}"
+            id="${this.uniqueId}"
             class="${inputClasses}"
             placeholder="${this.placeholder}"
             .value="${this.value}"

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

@@ -9,9 +9,10 @@ export class RelToast extends LitElement {
   @property({ type: String }) type: ToastType = "default";
   @property({ type: String }) actionLabel?: string;
   @property({ type: Number }) duration: number = 4000;
+  @property({ type: Boolean, reflect: true }) show = false;
 
   @state() private visible: boolean = false;
-  private timeoutId?: number;
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -23,7 +24,7 @@ export class RelToast extends LitElement {
       justify-content: center;
       width: 100%;
       pointer-events: none;
-      z-index: 1000;
+      z-index: var(--rel-z-toast, 9000);
       font-family: var(--rel-fontFamilies-primary);
     }
 
@@ -119,25 +120,45 @@ export class RelToast extends LitElement {
     }
   `;
 
-  show() {
-    this.visible = true;
-
-    if (this.duration > 0) {
-      this.timeoutId = window.setTimeout(() => this.close(), this.duration);
+  willUpdate(changed: Map<string, unknown>) {
+    if (!changed.has('show')) return;
+    if (this.show) {
+      this.visible = true;
+      if (this._dismissTimer) clearTimeout(this._dismissTimer);
+      if (this.duration > 0) {
+        this._dismissTimer = setTimeout(() => this.close(), this.duration);
+      }
+    } else {
+      this.visible = false;
+      if (this._dismissTimer) {
+        clearTimeout(this._dismissTimer);
+        this._dismissTimer = null;
+      }
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._dismissTimer) clearTimeout(this._dismissTimer);
+  }
+
+  open() {
+    this.show = true;
+  }
+
   close() {
+    this.show = false;
     this.visible = false;
+    if (this._dismissTimer) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
+    }
     this.dispatchEvent(
       new CustomEvent("dismissed", {
         bubbles: true,
         composed: true,
       })
     );
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
   }
 
   private handleActionClick(event: Event) {