@reliability-design/web 1.3.0 → 1.4.0

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

@@ -55,13 +55,13 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontWeights-semibold` - Font weight (number variant)
-- `--rel-fontSizes-xs`, `--rel-fontSizes-sm`, `--rel-fontSizes-lg` - Font sizes for number variant sizes
+- `--rel-fonts-font-family` - Font family
+- `--rel-fonts-weight-body-semibold` - Font weight (number variant)
+- `--rel-body-xs-regular-font-size`, `--rel-body-sm-regular-font-size`, `--rel-body-xl-regular-font-size` - Font sizes for number variant sizes
 
 ### Color Tokens
-- `--rel-colors-red-primary` - Background color
-- `--rel-colors-white` - Text color
+- `--rel-bg-danger` - Background color
+- `--rel-bg-surface` - Text color
 
 ## Accessibility
 - Purely visual indicator (no ARIA roles)

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

@@ -1,4 +1,3 @@
-import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -11,7 +10,7 @@ export class RelBadge extends LitElement {
   @property({ type: String }) suffix: string = "notifications";
 
   @property({ type: String, reflect: true })
-  size: "sm" | "md" | "lg" = "md";
+  size: "sm" | "md" | "lg" | "xl" = "md";
 
   @property({ type: String, reflect: true })
   variant: "dot" | "number" = "number";
@@ -36,53 +35,106 @@ export class RelBadge extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
     }
 
     .badge {
+      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);
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
-      color: var(--rel-badge-color, #ffffff);
-      border-radius: 50%;
+      box-sizing: border-box;
+      font-family: var(--rel-fonts-font-family, sans-serif);
+      background-color: var(--rel-badge-bg, var(--rel-bg-danger));
+      color: var(--rel-badge-color, var(--rel-text-static-light));
+      /* Large fixed radius (not 50%) — stays a perfect circle for 1-2 digits,
+         but becomes a pill instead of clipping when content like "999+"
+         is wider than the minimum circle. */
+      border-radius: 999px;
+      white-space: nowrap;
     }
 
-    /* NUMBER BADGES */
+    /* NUMBER BADGES — min-width (not width) lets multi-character content
+       like "999+" grow the badge into a pill instead of overflowing a fixed circle. */
     .badge-sm {
-      width: 20px;
+      min-width: 20px;
       height: 20px;
-      font-size: var(--rel-fontSizes-xs, 12px);
+      padding: 0 4px;
+      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);
     }
 
+    /* Size tiers follow Figma Badge S/M/L/XL (20/24/28/40px).
+       Figma binds a *-regular family with *-semibold metrics on S/M/L. */
     .badge-md {
-      width: 28px;
-      height: 28px;
-      font-size: var(--rel-fontSizes-sm, 14px);
+      min-width: 24px;
+      height: 24px;
+      padding: 0 6px;
+      font-family: var(--rel-body-sm-regular-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);
     }
 
     .badge-lg {
-      width: 40px;
+      min-width: 28px;
+      height: 28px;
+      padding: 0 6px;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-semibold-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);
+    }
+
+    .badge-xl {
+      min-width: 40px;
       height: 40px;
-      font-size: var(--rel-fontSizes-lg, 20px);
+      padding: 0 8px;
+      font-family: var(--rel-body-xl-semibold-font-family);
+      font-weight: var(--rel-body-xl-semibold-font-weight);
+      font-size: var(--rel-body-xl-semibold-font-size);
+      line-height: var(--rel-body-xl-semibold-line-height);
+      letter-spacing: var(--rel-body-xl-semibold-letter-spacing);
     }
 
-    /* DOT BADGES */
+    /* DOT BADGES — explicitly reset min-width/padding inherited from the
+       number-badge size rules above; otherwise min-width wins over this
+       smaller width and the dot gets stretched into a squashed pill. */
     .badge-dot.badge-sm {
       width: 8px;
       height: 8px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-md {
       width: 10px;
       height: 10px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-lg {
       width: 12px;
       height: 12px;
+      min-width: 0;
+      padding: 0;
+    }
+
+    .badge-dot.badge-xl {
+      width: 12px;
+      height: 12px;
+      min-width: 0;
+      padding: 0;
     }
   `;
 
@@ -110,7 +162,7 @@ export class RelBadge extends LitElement {
 
   render() {
     return html`
-      <span class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
+      <span part="base" class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
         ${this.variant === "number" ? this.number : null}
       </span>
     `;

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

@@ -65,15 +65,15 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Font size
-- `--rel-fontWeights-medium` - Font weight for links
-- `--rel-fontWeights-bold` - Font weight for current page
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Font size
+- `--rel-fonts-weight-body-medium` - Font weight for links
+- `--rel-fonts-weight-body-semibold` - Font weight for current page
 
 ### Color Tokens
-- `--rel-text-primary` - Base text color
-- `--rel-text-heading` - Link and current page text color
-- `--rel-colors-blue-primary` - Link hover color and focus outline
+- `--rel-text-default` - Base text color
+- `--rel-text-label` - Link and current page text color
+- `--rel-bg-info` - Link hover color and focus outline
 
 ## Accessibility
 - Uses semantic `<nav>` with `aria-label="Breadcrumb"`

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

@@ -1,4 +1,3 @@
-import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -14,10 +13,13 @@ export class RelBreadcrumbs extends LitElement {
 
   static styles = css`
     :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-size: var(--rel-fontSizes-md);
-      color: var(--rel-text-primary, #333);
+      display: block;
+      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);
     }
 
     nav {
@@ -33,30 +35,31 @@ export class RelBreadcrumbs extends LitElement {
     }
 
     li {
+      gap: var(--rel-spacing-xs);
       display: flex;
       align-items: center;
     }
 
     a {
       text-decoration: none;
-      font-weight: var(--rel-fontWeights-regular);
-      color: var(--rel-color-text-primary);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      color: var(--rel-text-body);
     }
 
     a:hover {
       text-decoration: underline;
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-default);
     }
 
     a:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
       border-radius: 2px;
     }
 
     .current {
-      font-weight: var(--rel-fontWeights-bold);
-      color: var(--rel-color-text-primary);
+      font-weight: var(--rel-body-md-semibold-font-weight);
+      color: var(--rel-text-default);
       cursor: default;
     }
 
@@ -70,7 +73,7 @@ export class RelBreadcrumbs extends LitElement {
 
   render() {
     return html`
-      <nav aria-label="Breadcrumb">
+      <nav part="base" aria-label="Breadcrumb">
         <ol>
           ${this.items.map((item, index) => {
             const isLast = index === this.items.length - 1;
@@ -79,7 +82,7 @@ export class RelBreadcrumbs extends LitElement {
               <li>
                 ${item.url && !isLast
                   ? html`<a href=${item.url}>${item.label}</a>`
-                  : html`<span class="current" aria-current="page">${item.label}</span>`}
+                  : html`<span part="label" class="current" aria-current="page">${item.label}</span>`}
                 ${!isLast
                   ? html`
                       <svg viewBox="0 0 24 24" aria-hidden="true">

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

@@ -75,31 +75,31 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontWeights-semibold` - Font weight
-- `--rel-fontSizes-sm`, `--rel-fontSizes-md`, `--rel-fontSizes-lg` - Font sizes for sizes
+- `--rel-fonts-font-family` - Font family
+- `--rel-fonts-weight-body-semibold` - Font weight
+- `--rel-body-sm-regular-font-size`, `--rel-body-md-regular-font-size`, `--rel-body-xl-regular-font-size` - Font sizes for sizes
 
 ### Spacing Tokens
-- `--rel-spacing-space-2xs` - Internal gap between elements
-- `--rel-spacing-space-md`, `--rel-spacing-space-lg`, `--rel-spacing-space-xl` - Horizontal padding by size
+- `--rel-spacing-2xs` - Internal gap between elements
+- `--rel-spacing-md`, `--rel-spacing-lg`, `--rel-spacing-xl` - Horizontal padding by size
 
 ### Color Tokens (by variant/tone)
-- **default + default tone**: `--rel-colors-gray-primary` (bg), `--rel-colors-white` (text)
-- **default + critical tone**: `--rel-colors-red-primary` (bg), `--rel-colors-white` (text)
-- **default + success tone**: `--rel-colors-green-success` (bg), `--rel-colors-white` (text)
-- **primary + default tone**: `--rel-colors-green-primary` (bg), `--rel-colors-black` (text)
-- **primary + critical tone**: `--rel-colors-red-primary` (bg), `--rel-colors-white` (text)
-- **primary + success tone**: `--rel-colors-green-success` (bg), `--rel-colors-white` (text)
-- **secondary**: `--rel-colors-white` (bg), `--rel-colors-black` (text + border)
-- **text**: transparent (bg), `--rel-colors-black` (text)
-- **link**: transparent (bg), `--rel-colors-blue-primary` (text), underlined
-- **icon**: `--rel-colors-gray-light` (bg), `--rel-colors-black` (text), circular (40px × 40px)
-- **disabled**: `--rel-colors-gray-border` (bg), `--rel-colors-gray-disabled-text` (text)
+- **default + default tone**: `--rel-text-default` (bg), `--rel-bg-surface` (text)
+- **default + critical tone**: `--rel-bg-danger` (bg), `--rel-bg-surface` (text)
+- **default + success tone**: `--rel-text-success` (bg), `--rel-bg-surface` (text)
+- **primary + default tone**: `--rel-bg-brand` (bg), `--rel-text-default` (text)
+- **primary + critical tone**: `--rel-bg-danger` (bg), `--rel-bg-surface` (text)
+- **primary + success tone**: `--rel-text-success` (bg), `--rel-bg-surface` (text)
+- **secondary**: `--rel-bg-surface` (bg), `--rel-text-default` (text + border)
+- **text**: transparent (bg), `--rel-text-default` (text)
+- **link**: transparent (bg), `--rel-bg-info` (text), underlined
+- **icon**: `--rel-bg-surface-elevated` (bg), `--rel-text-default` (text), circular (40px × 40px)
+- **disabled**: `--rel-border-default` (bg), `--rel-text-disabled` (text)
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-500` - Large corner radius
-- `--rel-borders-radius-border-radius-200` - Small corner radius
-- `--rel-borders-radius-border-radius-0` - No corner radius
+- `--rel-border-radius-full-rounded` - Large corner radius
+- `--rel-border-radius-sm` - Small corner radius
+- `--rel-border-radius-square` - No corner radius
 
 ## Accessibility
 - Uses native `<button>` element for proper semantics
@@ -126,5 +126,5 @@ None exposed.
 - Clicking a disabled button prevents default and stops propagation
 - Size variants affect height (32px/40px/48px) and horizontal padding
 - The button has `display: inline-flex` with `align-items: center` and `justify-content: center`
-- Internal gap of `var(--rel-spacing-space-2xs)` allows icons + text combinations
+- Internal gap of `var(--rel-spacing-2xs)` allows icons + text combinations
 - Transitions are `0.15s ease` for all visual changes