@reliability-design/web 1.3.0 → 1.4.0

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

@@ -110,24 +110,24 @@ None exposed.
 ### Component-Level Custom Properties
 The component defines CSS custom properties on `:host`:
 
-- `--tab-active-color` - Active tab underline color (default: `--rel-colors-green-primary`)
-- `--tab-text-default` - Default tab text color (default: `--rel-text-primary`)
+- `--tab-active-color` - Active tab underline color (default: `--rel-bg-brand`)
+- `--tab-text-default` - Default tab text color (default: `--rel-text-default`)
 - `--tab-text-disabled` - Disabled tab text color (default: `--rel-text-disabled`)
-- `--tab-text-hover` - Hover tab text color (default: `--rel-text-heading`)
+- `--tab-text-hover` - Hover tab text color (default: `--rel-text-label`)
 - `--tab-underline-height` - Height of active underline (default: `3px`)
-- `--tab-hover-color` - Background color on hover (default: `--rel-surface-surface`)
+- `--tab-hover-color` - Background color on hover (default: `--rel-bg-neutral-elevated-1`)
 
 ### Design Token References
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Font size
-- `--rel-fontWeights-medium` - Font weight
-- `--rel-spacing-space-sm`, `--rel-spacing-space-md` - Tab padding
-- `--rel-spacing-space-2xs` - Gap between label and badge
-- `--rel-border-tab` - Bottom border color (default: `#c4c4c4`)
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Font size
+- `--rel-fonts-weight-body-medium` - Font weight
+- `--rel-spacing-sm`, `--rel-spacing-md` - Tab padding
+- `--rel-spacing-2xs` - Gap between label and badge
+- `--rel-border-accent` - Bottom border color (default: `#c4c4c4`)
 - `--rel-border-info` - Focus outline color
-- `--rel-borders-radius-border-radius-100` - Focus outline border radius
-- `--rel-colors-red-primary` - Badge background color
-- `--rel-colors-white` - Badge text color
+- `--rel-border-radius-xs` - Focus outline border radius
+- `--rel-bg-danger` - Badge background color
+- `--rel-bg-surface` - Badge text color
 
 ## Accessibility
 - Uses `role="tablist"` on container and `role="tab"` on each tab

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

@@ -1,11 +1,11 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "../rel-badge/rel-badge";
 
 export interface TabItem {
   label: string;
   badge?: number;
+  badgeDot?: boolean;
   disabled?: boolean;
 }
 
@@ -14,6 +14,8 @@ 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() {
@@ -25,44 +27,89 @@ export class RelTabItem extends LitElement {
 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[] = [];
 
   static styles = css`
     :host {
-      --tab-active-color: var(--rel-colors-green-primary);
-      --tab-text-default: var(--rel-color-text-primary);
-      --tab-text-disabled: var(--rel-color-text-disabled);
-      --tab-text-hover: var(--rel-color-text-heading);
+      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-color-bg-tertiary);
+      --tab-hover-color: var(--rel-bg-neutral-elevated-1);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     .tabs-wrapper {
       display: flex;
-      border-bottom: 1px solid var(--rel-border-tab);
-      font-family: var(--rel-fontFamilies-primary);
+      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-space-sm) var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
       cursor: pointer;
-      color: var(--tab-text-default);
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-text-body);
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      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-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .tab:hover:not(.disabled) .tab-label {
@@ -106,11 +153,12 @@ export class RelTab extends LitElement {
       .filter((el): el is RelTabItem => el instanceof RelTabItem);
   }
 
-  private get _effectiveTabs(): Array<{ label: string; badge?: number; disabled?: boolean }> {
+  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,
       }));
     }
@@ -158,11 +206,11 @@ export class RelTab extends LitElement {
     const tabs = this._effectiveTabs;
     return html`
       <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
-      <div class="tabs-wrapper" role="tablist">
+      <div part="list" class="tabs-wrapper" role="tablist">
         ${tabs.map(
           (tab, i) => html`
             <div
-              class="tab ${i === this.activeIndex
+              part="item" class="tab ${i === this.activeIndex
                 ? "active"
                 : ""} ${tab.disabled ? "disabled" : ""}"
               role="tab"
@@ -172,10 +220,12 @@ export class RelTab extends LitElement {
               @click="${() => this.selectTab(i)}"
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
             >
-              <span class="tab-label">${tab.label}</span>
-              ${tab.badge
-                ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
-                : ""}
+              <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>
           `

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

@@ -142,16 +142,16 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Table font size
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Table font size
 
 ### Color Tokens
-- `--rel-colors-gray-primary` - Table text color
-- `--rel-colors-gray-border` - Border color (when bordered is true)
+- `--rel-text-default` - Table text color
+- `--rel-border-default` - 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
+- `--rel-stroke-sm` - Border width
+- `--rel-border-radius-sm` - Table wrapper border radius
 
 ## Accessibility
 - Uses semantic native `<table>` element for proper screen reader support
@@ -168,7 +168,7 @@ None exposed.
 ## 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
+- **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

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

@@ -5,8 +5,9 @@ import { customElement } from "lit/decorators.js";
 export class RelTableBody extends LitElement {
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: table-row-group;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
   `;
 

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

@@ -6,13 +6,16 @@ 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;
+      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);
     }
   `;
 

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

@@ -8,11 +8,12 @@ export class RelTableCell extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: contents;
     }
 
     td {
-      border-right: 1px solid var(--rel-colors-gray-border, #e0e0e0);
+      border-right: 1px solid var(--rel-border-default);
     }
 
     :host(:last-child) td {
@@ -27,12 +28,12 @@ export class RelTableCell extends LitElement {
         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);
+          font-family: var(--rel-fonts-font-family);
+          padding: var(--rel-spacing-sm) var(--rel-spacing-md);
+          font-size: var(--rel-body-md-regular-font-size);
+          color: var(--rel-text-default);
           vertical-align: middle;
-          border-bottom: 1px solid var(--rel-colors-gray-border, #e0e0e0);
+          border-bottom: 1px solid var(--rel-border-default);
         "
       >
         <slot></slot>

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

@@ -5,10 +5,11 @@ import { customElement } from "lit/decorators.js";
 export class RelTableFooter extends LitElement {
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: table-footer-group;
-      font-family: var(--rel-fontFamilies-primary);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      background-color: var(--rel-colors-gray-light);
+      font-family: var(--rel-fonts-font-family);
+      font-weight: var(--rel-fonts-weight-body-medium, 500);
+      background-color: var(--rel-bg-surface-elevated);
     }
   `;
 

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

@@ -7,17 +7,19 @@ export class RelTableHead extends LitElement {
 
   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);
+      display: table-cell;
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
+      text-align: left;
+      color: var(--rel-text-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);
+      border-bottom: 1px solid var(--rel-border-default);
+      border-right: 1px solid var(--rel-border-default);
+      font-family: var(--rel-body-sm-medium-font-family);
+      font-weight: var(--rel-body-sm-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);
     }
 
     :host(:last-child) {

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

@@ -5,8 +5,9 @@ import { customElement } from "lit/decorators.js";
 export class RelTableHeader extends LitElement {
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: table-header-group;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
   `;
 

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

@@ -7,21 +7,22 @@ export class RelTableRow extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: table-row;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       transition: background-color 0.15s ease;
     }
 
     :host(:hover) {
-      background-color: var(--rel-colors-gray-light);
+      background-color: var(--rel-bg-surface-elevated);
     }
 
     :host([selected]) {
-      background-color: var(--rel-color-bg-selected);
+      background-color: var(--rel-bg-neutral-elevated-2);
     }
 
     :host([selected]:hover) {
-      background-color: var(--rel-color-bg-hover);
+      background-color: var(--rel-action-overlay-hover);
     }
   `;
 

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

@@ -1,6 +1,11 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+/**
+ * @deprecated rel-table has no Figma design in RelDS 2.0 and is excluded from
+ * the parity contract. It remains exported for compatibility but will be
+ * removed in a future major version.
+ */
 @customElement("rel-table")
 export class RelTable extends LitElement {
   @property({ type: Boolean, reflect: true }) bordered = false;
@@ -8,8 +13,9 @@ export class RelTable extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       position: relative;
       width: 100%;
     }
@@ -21,18 +27,21 @@ export class RelTable extends LitElement {
     }
 
     :host([bordered]) {
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       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);
+      border-collapse: collapse;
+      color: var(--rel-text-default);
+      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);
     }
   `;
 

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

@@ -58,20 +58,20 @@ 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-fonts-font-family`: Font family
+- `--rel-body-sm-regular-font-size`, `--rel-body-md-regular-font-size`: Font sizes
+- `--rel-fonts-weight-body-medium`: Font weight for label
+- `--rel-text-label`: Label color
+- `--rel-text-default`: 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
+- `--rel-bg-info`: Focus border color
+- `--rel-border-danger`: Error state border color
+- `--rel-bg-surface`: Input background (light mode)
+- `--rel-bg-neutral-elevated-1`: Disabled background
+- `--rel-spacing-*`: Spacing tokens
+- `--rel-border-radius-sm`: Border radius
 
 ## Accessibility