@reliability-design/web 1.3.0 → 1.4.0

package/dist/components/rel-segmented-button/README.md

@@ -92,24 +92,24 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-xs`, `--rel-fontSizes-sm` - Font sizes for small and medium variants
-- `--rel-fontWeights-medium` - Font weight for segment labels
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-xs-regular-font-size`, `--rel-body-sm-regular-font-size` - Font sizes for small and medium variants
+- `--rel-fonts-weight-body-medium` - Font weight for segment labels
 
 ### Spacing Tokens
-- `--rel-spacing-space-3xs`, `--rel-spacing-space-2xs` - Vertical padding for sizes
-- `--rel-spacing-space-xs`, `--rel-spacing-space-sm` - Horizontal padding for sizes
+- `--rel-spacing-3xs`, `--rel-spacing-2xs` - Vertical padding for sizes
+- `--rel-spacing-xs`, `--rel-spacing-sm` - Horizontal padding for sizes
 
 ### Color Tokens
-- `--rel-colors-white` - Default segment background
-- `--rel-colors-gray-border` - Outer border and segment dividers
-- `--rel-text-heading` - Active segment background and default text color
-- `--rel-surface-surface` - Hover and disabled background
+- `--rel-bg-surface` - Default segment background
+- `--rel-border-default` - Outer border and segment dividers
+- `--rel-text-label` - Active segment background and default text color
+- `--rel-bg-neutral-elevated-1` - Hover and disabled background
 - `--rel-text-disabled` - Disabled text color
 - `--rel-border-info` - Focus outline color
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-300` - Border radius for the group
+- `--rel-border-radius-md` - Border radius for the group
 
 ## Accessibility
 - Uses native `<button>` elements for proper keyboard navigation

package/dist/components/rel-segmented-button/rel-segmented-button.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 export type SegmentSize = "small" | "medium";
 export type SegmentAlign = "left" | "middle" | "right";
@@ -23,14 +22,15 @@ export class RelSegmentedButton 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);
     }
 
     .segmented-buttons {
       display: inline-flex;
-      border: 1px solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-xs);
       overflow: hidden;
     }
 
@@ -49,60 +49,51 @@ export class RelSegmentedButton extends LitElement {
 
     /* Base segment styling */
     .segment {
-      background: var(--rel-color-bg-primary);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-sm);
+      background: var(--rel-bg-neutral);
       border: none;
       border-radius: 0;
       cursor: pointer;
-      font-weight: var(--rel-fontWeights-medium);
-      border-right: 1px solid var(--rel-color-border-default);
+      border-right: 1px solid var(--rel-border-default);
       transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-      color: var(--rel-color-text-heading);
-      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-action-neutral-label-icons-ghost);
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
     }
 
     .segment:first-child {
-      border-radius: var(--rel-borders-radius-border-radius-100) 0 0 var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs) 0 0 var(--rel-border-radius-xs);
     }
 
     .segment:last-child {
-      border-radius: 0 var(--rel-borders-radius-border-radius-100) var(--rel-borders-radius-border-radius-100) 0;
+      border-radius: 0 var(--rel-border-radius-xs) var(--rel-border-radius-xs) 0;
       border-right: none;
     }
 
     .segment:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     /* Hover */
     .segment:hover:not(.disabled):not(.active) {
-      background: var(--rel-color-bg-hover);
+      background: var(--rel-action-overlay-hover);
     }
 
-    /* Active */
+    /* Active — action-neutral tokens flip automatically in dark mode */
     .segment.active {
-      background: #2B2B2B;
-      color: #FFFFFF;
-      border-radius: var(--rel-borders-radius-border-radius-100) !important;
+      background: var(--rel-action-neutral-fill);
+      color: var(--rel-text-inverse);
+      border-radius: var(--rel-border-radius-xs) !important;
     }
 
     .segment.active:hover:not(.disabled) {
-      background: #333333;
-      color: #FFFFFF;
-    }
-
-    /* Dark mode active override */
-    :host-context([data-theme="dark"]) .segment.active,
-    :host-context(.dark) .segment.active {
-      background: #F5F5F5;
-      color: #1A1A1A;
-    }
-
-    :host-context([data-theme="dark"]) .segment.active:hover,
-    :host-context(.dark) .segment.active:hover {
-      background: #D4D4D4;
-      color: #1A1A1A;
+      background: var(--rel-action-neutral-fill-hover);
+      color: var(--rel-action-neutral-label-icons-fill-inverse);
     }
 
     /* Disabled */
@@ -111,19 +102,27 @@ export class RelSegmentedButton extends LitElement {
       cursor: not-allowed;
       pointer-events: auto;
       opacity: 0.5;
-      background: var(--rel-color-bg-tertiary);
-      color: var(--rel-color-text-disabled);
+      background: var(--rel-bg-neutral-elevated-1);
+      color: var(--rel-text-disabled);
     }
 
     /* Sizes */
     .segmented-buttons.small .segment {
-      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
-      font-size: var(--rel-fontSizes-xs);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-semibold-font-weight);
+      font-size: var(--rel-body-xs-semibold-font-size);
+      line-height: var(--rel-body-xs-semibold-line-height);
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
     }
 
     .segmented-buttons.medium .segment {
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
-      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
+      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);
     }
   `;
 
@@ -152,7 +151,7 @@ export class RelSegmentedButton extends LitElement {
 
     return html`
       <button
-        class="${classes}"
+        part="option" class="${classes}"
         ?disabled="${option.disabled}"
         @click="${() => this.setActive(option)}">
         ${option.label}
@@ -168,7 +167,7 @@ export class RelSegmentedButton extends LitElement {
     ].join(" ");
 
     return html`
-      <div class="${containerClasses}">
+      <div part="base" class="${containerClasses}">
         ${this.options.map((option) => this.renderSegment(option))}
       </div>
     `;

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

@@ -58,27 +58,27 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-xs`, `--rel-fontSizes-sm`, `--rel-fontSizes-md` - Font sizes for different size variants
-- `--rel-fontWeights-medium` - Font weight for label
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-xs-regular-font-size`, `--rel-body-sm-regular-font-size`, `--rel-body-md-regular-font-size` - Font sizes for different size variants
+- `--rel-fonts-weight-body-medium` - Font weight for label
 
 ### Spacing Tokens
-- `--rel-spacing-space-3xs`, `--rel-spacing-space-2xs`, `--rel-spacing-space-xs` - Internal padding
-- `--rel-spacing-space-sm`, `--rel-spacing-space-md`, `--rel-spacing-space-xl`, `--rel-spacing-space-2xl` - Padding and icon positioning
+- `--rel-spacing-3xs`, `--rel-spacing-2xs`, `--rel-spacing-xs` - Internal padding
+- `--rel-spacing-sm`, `--rel-spacing-md`, `--rel-spacing-xl`, `--rel-spacing-2xl` - Padding and icon positioning
 
 ### Color Tokens
-- `--rel-color-text-heading` - Label and selected-value text color
-- `--rel-color-text-primary` - Icon color, focus border/shadow color
-- `--rel-color-text-placeholder` - Placeholder, supporting text, and ghost-suggestion text color
-- `--rel-color-text-disabled` - Disabled text/icon color
-- `--rel-color-border-default` - Default border color
-- `--rel-color-bg-primary` - Background color (trigger and dropdown panel)
-- `--rel-color-bg-tertiary` - Disabled background, hovered/highlighted option background
-- `--rel-error-surface-default` - Error state border, text, and icon color (light: `#D50000`, dark: `#FF5252`)
+- `--rel-text-label` - Label and selected-value text color
+- `--rel-text-default` - Icon color, focus border/shadow color
+- `--rel-text-placeholder` - Placeholder, supporting text, and ghost-suggestion text color
+- `--rel-text-disabled` - Disabled text/icon color
+- `--rel-border-default` - Default border color
+- `--rel-bg-surface` - Background color (trigger and dropdown panel)
+- `--rel-bg-neutral-elevated-1` - Disabled background, hovered/highlighted option background
+- `--rel-bg-danger` - Error state border, text, and icon color (light: `#D50000`, dark: `#FF5252`)
 - `--rel-shadows-shadow-200` - Dropdown panel shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-100` - Rounded border radius (default `border="rounded"`)
+- `--rel-border-radius-xs` - Rounded border radius (default `border="rounded"`)
 
 ## Accessibility
 - Trigger input uses `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls`