@reliability-design/web 1.3.1 → 1.4.1

package/dist/components/rel-nav-menu/README.md

@@ -165,33 +165,33 @@ Full keyboard accessibility support:
 The component uses design tokens from the Reliability Design System:
 
 ### Colors
-- `--rel-colors-gray-light` - Nav container background
-- `--rel-colors-gray-background` - Trigger hover/active state, panel item hover
-- `--rel-colors-gray-border` - Borders
-- `--rel-colors-gray-heading` - Text color
-- `--rel-colors-gray-placeholder` - Description text
-- `--rel-colors-white` - Panel background
-- `--rel-colors-blue-primary` - Focus outline
+- `--rel-bg-surface-elevated` - Nav container background
+- `--rel-bg-neutral-elevated-1` - Trigger hover/active state, panel item hover
+- `--rel-border-default` - Borders
+- `--rel-text-label` - Text color
+- `--rel-text-placeholder` - Description text
+- `--rel-bg-surface` - Panel background
+- `--rel-bg-info` - Focus outline
 
 ### Typography
-- `--rel-fontFamilies-primary` - Font family (Poppins)
-- `--rel-fontWeights-medium` - Trigger text weight
-- `--rel-fontWeights-semibold` - Panel item title weight
-- `--rel-fontSizes-sm` - Trigger and title text size
-- `--rel-fontSizes-xs` - Description text size
-- `--rel-lineHeights-xs` - Description line height
+- `--rel-fonts-font-family` - Font family (Poppins)
+- `--rel-fonts-weight-body-medium` - Trigger text weight
+- `--rel-fonts-weight-body-semibold` - Panel item title weight
+- `--rel-body-sm-regular-font-size` - Trigger and title text size
+- `--rel-body-xs-regular-font-size` - Description text size
+- `--rel-body-xs-regular-line-height` - Description line height
 
 ### Spacing
-- `--rel-spacing-space-3xs` (2px) - Compact spacing
-- `--rel-spacing-space-2xs` (4px) - Container padding, panel gaps
-- `--rel-spacing-space-xs` (8px) - Trigger padding, panel padding
-- `--rel-spacing-space-sm` (12px) - Panel item padding
-- `--rel-spacing-space-md` (16px) - Trigger horizontal padding
+- `--rel-spacing-3xs` (2px) - Compact spacing
+- `--rel-spacing-2xs` (4px) - Container padding, panel gaps
+- `--rel-spacing-xs` (8px) - Trigger padding, panel padding
+- `--rel-spacing-sm` (12px) - Panel item padding
+- `--rel-spacing-md` (16px) - Trigger horizontal padding
 
 ### Borders & Effects
-- `--rel-borders-width-stroke-100` (1px) - Border width
-- `--rel-borders-radius-border-radius-100` (2px) - Panel item radius
-- `--rel-borders-radius-border-radius-200` (8px) - Container and panel radius
+- `--rel-stroke-sm` (1px) - Border width
+- `--rel-border-radius-xs` (2px) - Panel item radius
+- `--rel-border-radius-sm` (8px) - Container and panel radius
 - `--rel-shadows-shadow-300` - Panel drop shadow
 
 ### Z-Index

package/dist/components/rel-nav-menu/rel-nav-menu-item.ts

@@ -17,41 +17,44 @@ export class RelNavMenuItem extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-block;
     }
 
     .trigger {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
+      gap: var(--rel-spacing-2xs);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-md);
+      color: var(--rel-text-label);
       background: transparent;
       border: none;
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       cursor: pointer;
       transition: all 0.15s ease;
       text-decoration: none;
       outline: none;
       user-select: none;
+      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);
     }
 
     .trigger:hover:not(:disabled) {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .trigger:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     /* Active state driven by :host([open]) — no external class manipulation needed */
     :host([open]) .trigger,
     .trigger.active {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .trigger:disabled {
@@ -69,11 +72,11 @@ export class RelNavMenuItem extends LitElement {
       position: fixed;
       min-width: 320px;
       max-width: 600px;
-      background: var(--rel-colors-white);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-bg-surface);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-xs);
       z-index: 1000;
       display: none;
     }

package/dist/components/rel-nav-menu/rel-nav-menu-panel.ts

@@ -5,6 +5,7 @@ import { customElement } from "lit/decorators.js";
 export class RelNavMenuPanel extends LitElement {
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
       width: 100%;
     }
@@ -12,34 +13,52 @@ export class RelNavMenuPanel extends LitElement {
     .panel-content {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
-      padding: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-2xs);
+      padding: var(--rel-spacing-xs);
     }
 
     ::slotted(a[data-nav-item]) {
       display: block;
-      padding: var(--rel-spacing-space-sm);
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      padding: var(--rel-spacing-sm);
+      border-radius: var(--rel-border-radius-xs);
       transition: background 0.15s ease;
       text-decoration: none;
       color: inherit;
     }
 
     ::slotted(a[data-nav-item]:hover) {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-bg-surface-elevated);
     }
 
-    ::slotted([data-title]) {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-heading);
-      margin-bottom: var(--rel-spacing-space-3xs);
+    ::slotted([data-title]) {
+      color: var(--rel-text-label);
+      margin-bottom: var(--rel-spacing-3xs);
+
+      font-family: var(--rel-body-sm-semibold-font-family);
+
+      font-weight: var(--rel-body-sm-semibold-font-weight);
+
+      font-size: var(--rel-body-sm-semibold-font-size);
+
+      line-height: var(--rel-body-sm-semibold-line-height);
+
+      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
+
     }
 
-    ::slotted([data-desc]) {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-placeholder);
-      line-height: var(--rel-lineHeights-xs);
+    ::slotted([data-desc]) {
+      color: var(--rel-text-placeholder);
+
+      font-family: var(--rel-body-xs-regular-font-family);
+
+      font-weight: var(--rel-body-xs-regular-font-weight);
+
+      font-size: var(--rel-body-xs-regular-font-size);
+
+      line-height: var(--rel-body-xs-regular-line-height);
+
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+
     }
   `;
 

package/dist/components/rel-nav-menu/rel-nav-menu.ts

@@ -4,6 +4,12 @@ import { RelNavMenuItem } from "./rel-nav-menu-item";
 
 type DensityType = "comfortable" | "compact";
 
+/**
+ * @deprecated rel-nav-menu has no Figma design in RelDS 2.0 and is excluded
+ * from the parity contract. Use rel-menu (with the select-option/fixed/fit
+ * types) or the App Topbar recipe instead. It remains exported for
+ * compatibility but will be removed in a future major version.
+ */
 @customElement("rel-nav-menu")
 export class RelNavMenu extends LitElement {
   @property({ type: String, reflect: true }) open = "";
@@ -18,22 +24,23 @@ export class RelNavMenu 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);
     }
 
     .nav-container {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-3xs);
-      padding: var(--rel-spacing-space-2xs);
-      background: var(--rel-colors-gray-light);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      gap: var(--rel-spacing-3xs);
+      padding: var(--rel-spacing-2xs);
+      background: var(--rel-bg-surface-elevated);
+      border-radius: var(--rel-border-radius-sm);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
     }
 
     .nav-container.compact {
-      padding: var(--rel-spacing-space-3xs);
+      padding: var(--rel-spacing-3xs);
       gap: 0;
     }
 

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

@@ -85,20 +85,20 @@ None.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ### Color Tokens
-- `--rel-colors-white` - Background color
-- `--rel-text-primary` - Text color
+- `--rel-bg-surface` - Background color
+- `--rel-text-default` - Text color
 - `--rel-border-default` - Bottom border color
 
 ### Spacing Tokens
-- `--rel-spacing-space-lg` - Desktop horizontal padding
-- `--rel-spacing-space-md` - Tablet/mobile horizontal padding, brand-actions gap, content padding
-- `--rel-spacing-space-sm` - Action items gap, mobile padding
+- `--rel-spacing-lg` - Desktop horizontal padding
+- `--rel-spacing-md` - Tablet/mobile horizontal padding, brand-actions gap, content padding
+- `--rel-spacing-sm` - Action items gap, mobile padding
 
 ### Custom Properties
-- `--rel-spacing-space-xl` - Content area horizontal padding
+- `--rel-spacing-xl` - Content area horizontal padding
 
 ## Accessibility
 - Uses `role="navigation"` on the main navbar container

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

@@ -24,6 +24,7 @@ export class RelNavbar extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
       width: 100%;
     }
@@ -38,47 +39,47 @@ export class RelNavbar extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
-      border-bottom: 1px solid var(--rel-border-default, #ddd);
+      background: var(--rel-bg-surface);
+      color: var(--rel-text-default);
+      border-bottom: 1px solid var(--rel-border-default);
       height: 64px;
-      padding: 0 var(--rel-spacing-space-lg);
+      padding: 0 var(--rel-spacing-lg);
       box-sizing: border-box;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fonts-font-family, sans-serif);
     }
 
     .brand {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-md);
       flex-shrink: 0;
     }
 
     .content {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-sm);
+      gap: var(--rel-spacing-sm);
       flex: 1;
       justify-content: flex-start;
-      padding: 0 var(--rel-spacing-space-xl);
+      padding: 0 var(--rel-spacing-xl);
     }
 
     .actions {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-sm);
+      gap: var(--rel-spacing-sm);
       flex-shrink: 0;
     }
 
     /* Mobile/Tablet variants */
     :host([device="tablet"]) .navbar {
       height: 56px;
-      padding: 0 var(--rel-spacing-space-md);
+      padding: 0 var(--rel-spacing-md);
     }
 
     :host([device="mobile"]) .navbar {
       height: 56px;
-      padding: 0 var(--rel-spacing-space-sm);
+      padding: 0 var(--rel-spacing-sm);
     }
 
     :host([device="mobile"]) .content {

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

@@ -251,7 +251,7 @@ The OTP component uses design system tokens for all styling. Customize via CSS p
 
 ```css
 rel-otp::part(cell) {
-  border-color: var(--rel-colors-blue-primary);
+  border-color: var(--rel-bg-info);
 }
 
 rel-otp::part(cell):focus {
@@ -259,12 +259,12 @@ rel-otp::part(cell):focus {
 }
 
 rel-otp::part(separator) {
-  color: var(--rel-colors-blue-secondary);
+  color: var(--rel-bg-info-light);
 }
 
 /* Custom invalid styling */
 rel-otp[invalid]::part(cell) {
-  border-color: var(--rel-colors-red-secondary);
+  border-color: var(--rel-text-danger);
   animation: shake 0.3s;
 }
 

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

@@ -21,7 +21,9 @@ export class RelOtp extends LitElement {
   @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
   @property({ type: Boolean, reflect: true }) invalid = false;
   @property({ type: Boolean, attribute: "show-separator" }) showSeparator = true;
-  @property({ type: String }) size: "sm" | "md" | "lg" = "md";
+  // reflect: CSS targets :host([size="sm"|"lg"]) — without reflection,
+  // setting `el.size = "lg"` as a property silently applies no styles.
+  @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
 
   @state() private cells: string[] = [];
   @query(".hidden-input") private hiddenInput?: HTMLInputElement;
@@ -30,8 +32,9 @@ export class RelOtp extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     :host([disabled]) {
@@ -42,24 +45,27 @@ export class RelOtp extends LitElement {
     .otp-root {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-xs);
       position: relative;
     }
 
     .otp-group {
       display: flex;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     .otp-separator {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--rel-gray-divider-default);
-      font-size: var(--rel-fontSizes-lg);
-      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-border-default);
       user-select: none;
-      padding: 0 var(--rel-spacing-space-3xs);
+      padding: 0 var(--rel-spacing-3xs);
+      font-family: var(--rel-action-xl-font-family);
+      font-weight: var(--rel-action-xl-font-weight);
+      font-size: var(--rel-action-xl-font-size);
+      line-height: var(--rel-action-xl-line-height);
+      letter-spacing: var(--rel-action-xl-letter-spacing);
     }
 
     .otp-separator.hidden {
@@ -69,49 +75,59 @@ export class RelOtp extends LitElement {
     .otp-cell {
       width: 40px;
       height: 48px;
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      background: var(--rel-color-bg-primary);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-lg);
-      font-weight: var(--rel-fontWeights-medium);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
+      background: var(--rel-bg-neutral);
       text-align: center;
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-default);
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
-      caret-color: var(--rel-color-text-primary);
+      caret-color: var(--rel-text-default);
+      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);
     }
 
     /* Size variants */
     :host([size="sm"]) .otp-cell {
       width: 36px;
       height: 40px;
-      font-size: var(--rel-fontSizes-md);
+      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);
     }
 
     :host([size="lg"]) .otp-cell {
       width: 48px;
       height: 56px;
-      font-size: var(--rel-fontSizes-xl);
+      font-family: var(--rel-body-xl-regular-font-family);
+      font-weight: var(--rel-body-xl-regular-font-weight);
+      font-size: var(--rel-body-xl-regular-font-size);
+      line-height: var(--rel-body-xl-regular-line-height);
+      letter-spacing: var(--rel-body-xl-regular-letter-spacing);
     }
 
     .otp-cell::placeholder {
-      color: var(--rel-color-text-placeholder);
+      color: var(--rel-text-body);
       opacity: 0.6;
     }
 
     .otp-cell:hover:not(:disabled):not(:read-only) {
-      border-color: var(--rel-color-text-primary);
+      border-color: var(--rel-border-strong);
     }
 
     .otp-cell:focus-visible {
-      border-color: var(--rel-color-text-heading);
-      box-shadow: 0 0 0 2px var(--rel-color-border-default);
+      border-color: var(--rel-border-accent);
+      box-shadow: 0 0 0 2px var(--rel-border-default);
     }
 
     .otp-cell:disabled {
-      background: var(--rel-color-bg-secondary);
-      color: var(--rel-color-text-disabled);
+      background: var(--rel-bg-surface-elevated);
+      color: var(--rel-text-disabled);
       cursor: not-allowed;
     }
 
@@ -120,18 +136,18 @@ export class RelOtp extends LitElement {
     }
 
     .otp-cell:read-only {
-      background: var(--rel-color-bg-tertiary);
+      background: var(--rel-bg-neutral-elevated-1);
       cursor: default;
     }
 
     /* Invalid state */
     :host([invalid]) .otp-cell {
-      border-color: var(--rel-border-error);
+      border-color: var(--rel-border-danger);
     }
 
     :host([invalid]) .otp-cell:focus {
-      border-color: var(--rel-border-error);
-      box-shadow: 0 0 0 2px var(--rel-background-error-light);
+      border-color: var(--rel-border-danger);
+      box-shadow: 0 0 0 2px var(--rel-bg-danger-light);
     }
 
     .hidden-input {
@@ -440,7 +456,7 @@ export class RelOtp extends LitElement {
 
     return html`
       <div
-        part="root"
+        part="base root"
         class="otp-root"
         role="group"
         aria-label="${this.ariaLabel || "One-time password input"}">
@@ -450,7 +466,7 @@ export class RelOtp extends LitElement {
               ${group.map(
                 (index) => html`
                   <input
-                    part="cell"
+                    part="input cell"
                     class="otp-cell"
                     data-index="${index}"
                     type="${this.mask ? "password" : "text"}"

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

@@ -226,30 +226,30 @@ The component follows ARIA best practices:
 The component uses design tokens from the Reliability Design System:
 
 ### Colors
-- `--rel-colors-white` - Button/link background
-- `--rel-colors-gray-heading` - Text color and active page background
-- `--rel-colors-gray-border` - Border color
-- `--rel-colors-gray-primary` - Hover border color
-- `--rel-colors-gray-background` - Hover background
-- `--rel-colors-gray-placeholder` - Ellipsis color
-- `--rel-colors-blue-primary` - Focus outline
+- `--rel-bg-surface` - Button/link background
+- `--rel-text-label` - Text color and active page background
+- `--rel-border-default` - Border color
+- `--rel-text-default` - Hover border color
+- `--rel-bg-neutral-elevated-1` - Hover background
+- `--rel-text-placeholder` - Ellipsis color
+- `--rel-bg-info` - Focus outline
 
 ### Typography
-- `--rel-fontFamilies-primary` - Font family (Poppins)
-- `--rel-fontWeights-medium` - Default text weight
-- `--rel-fontWeights-semibold` - Active page weight
-- `--rel-fontSizes-sm` - Comfortable mode font size
-- `--rel-fontSizes-xs` - Compact mode font size
+- `--rel-fonts-font-family` - Font family (Poppins)
+- `--rel-fonts-weight-body-medium` - Default text weight
+- `--rel-fonts-weight-body-semibold` - Active page weight
+- `--rel-body-sm-regular-font-size` - Comfortable mode font size
+- `--rel-body-xs-regular-font-size` - Compact mode font size
 
 ### Spacing
-- `--rel-spacing-space-3xs` (2px) - Compact gap
-- `--rel-spacing-space-2xs` (4px) - Comfortable gap
-- `--rel-spacing-space-xs` (8px) - Compact padding
-- `--rel-spacing-space-sm` (12px) - Comfortable padding
+- `--rel-spacing-3xs` (2px) - Compact gap
+- `--rel-spacing-2xs` (4px) - Comfortable gap
+- `--rel-spacing-xs` (8px) - Compact padding
+- `--rel-spacing-sm` (12px) - Comfortable padding
 
 ### Borders
-- `--rel-borders-width-stroke-100` (1px) - Border width
-- `--rel-borders-radius-border-radius-200` (8px) - Border radius
+- `--rel-stroke-sm` (1px) - Border width
+- `--rel-border-radius-sm` (8px) - Border radius
 
 ## Complete Examples