@reliability-design/web 1.3.0 → 1.4.0

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

@@ -52,6 +52,7 @@ export class RelChip extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
       width: auto;
       flex: 0 0 auto;
@@ -65,10 +66,8 @@ export class RelChip extends LitElement {
       display: inline-flex;
       align-items: center;
       box-sizing: border-box;
-      font-family: var(--rel-fontFamilies-primary);
-      font-weight: 500;
-      letter-spacing: -0.6px;
-      gap: 8px;
+      border: 1px solid transparent;
+      gap: var(--rel-spacing-xs);
       cursor: pointer;
       user-select: none;
       white-space: nowrap;
@@ -80,101 +79,176 @@ export class RelChip extends LitElement {
     /* ── Size ── */
     :host([size="lg"]) .chip {
       height: 32px;
-      padding: 4px 8px;
-      font-size: 16px;
-      line-height: 24px;
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-medium-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="md"]) .chip {
       height: 28px;
-      padding: 4px 8px;
-      font-size: 14px;
-      line-height: 22px;
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-medium-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="sm"]) .chip {
       height: 24px;
-      padding: 4px 8px;
-      font-size: 12px;
-      line-height: 20px;
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
+      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);
     }
 
     /* ── Border / shape — "Rounded" also widens horizontal padding to 12px,
        consistent across all three sizes per the Figma spec. ── */
     :host([border="default"]) .chip {
-      border-radius: 4px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     :host([border="rounded"]) .chip {
-      border-radius: 1000px;
-      padding-left: 12px;
-      padding-right: 12px;
+      border-radius: var(--rel-border-radius-full-rounded);
+      padding-left: var(--rel-spacing-sm);
+      padding-right: var(--rel-spacing-sm);
     }
 
-    /* ── Tone x Variant — Default/Default state colors ── */
+    /* ── Tone x Variant — V2 action tokens (auto light/dark) ── */
     :host([tone="neutral"][variant="fill"]) .chip {
-      background: #0b0b0b;
-      color: #ffffff;
+      background: var(--rel-action-neutral-fill);
+      color: var(--rel-text-inverse);
     }
     :host([tone="neutral"][variant="subtle"]) .chip {
-      background: #f5f5f5;
-      color: #0b0b0b;
+      background: var(--rel-action-neutral-subtle);
+      color: var(--rel-action-neutral-label-icons-subtle);
     }
     :host([tone="danger"][variant="fill"]) .chip {
-      background: #f83b3b;
-      color: #ffffff;
+      background: var(--rel-action-danger-fill);
+      color: var(--rel-text-static-light);
     }
     :host([tone="danger"][variant="subtle"]) .chip {
-      background: #fff1f1;
-      color: #ce3131;
+      background: var(--rel-action-danger-subtle);
+      color: var(--rel-action-danger-label-icons-subtle);
     }
     :host([tone="warning"][variant="fill"]) .chip {
-      background: #ffcb66;
-      color: #0b0b0b;
+      background: var(--rel-action-warning-fill);
+      color: var(--rel-action-warning-label-icons-fill);
     }
     :host([tone="warning"][variant="subtle"]) .chip {
-      background: #ffefd1;
-      color: #713f12;
+      background: var(--rel-action-warning-subtle);
+      color: var(--rel-action-warning-label-icons-subtle);
     }
     :host([tone="success"][variant="fill"]) .chip {
-      background: #00a86b;
-      color: #ffffff;
+      background: var(--rel-action-success-fill);
+      color: var(--rel-action-success-label-icons-fill);
     }
     :host([tone="success"][variant="subtle"]) .chip {
-      background: #edf8f4;
-      color: #008655;
+      background: var(--rel-action-success-subtle);
+      color: var(--rel-action-success-label-icons-subtle);
     }
     :host([tone="info"][variant="fill"]) .chip {
-      background: #0091ea;
-      color: #ffffff;
+      background: var(--rel-action-info-fill);
+      color: var(--rel-action-info-label-icons-fill);
     }
     :host([tone="info"][variant="subtle"]) .chip {
-      background: #eff7ff;
-      color: #00528d;
+      background: var(--rel-action-info-subtle);
+      color: var(--rel-action-info-label-icons-subtle);
     }
 
-    /* ── Hover / Dragged — Figma only specs explicit color shifts for the
-       "neutral" tone; the other four tones have no hover/dragged sample to
-       match, so a generic brightness dim covers them instead of leaving
-       hover completely inert. Flagged in the handoff notes. ── */
+    /* ── Hover / Dragged — per-tone V2 action state tokens ── */
     :host([tone="neutral"][variant="fill"]) .chip:hover {
-      background: #363636;
+      background: var(--rel-action-neutral-fill-hover);
     }
     :host([tone="neutral"][variant="fill"]) .chip:active,
     :host([tone="neutral"][variant="fill"][dragging]) .chip {
-      background: #404040;
+      background: var(--rel-action-neutral-fill-dragged);
+    }
+    :host([tone="neutral"][variant="subtle"]) .chip:hover {
+      border-color: var(--rel-action-neutral-border-subtle-hover);
+      background: var(--rel-action-neutral-subtle-hover);
     }
     :host([tone="neutral"][variant="subtle"]) .chip:active,
     :host([tone="neutral"][variant="subtle"][dragging]) .chip {
-      background: #e5e5e5;
-    }
-
-    :host(:not([tone="neutral"])) .chip:hover {
-      filter: brightness(0.96);
-    }
-    :host(:not([tone="neutral"])) .chip:active,
-    :host(:not([tone="neutral"])[dragging]) .chip {
-      filter: brightness(0.92);
+      border-color: var(--rel-action-neutral-border-subtle-dragged);
+      background: var(--rel-action-neutral-subtle-dragged);
+    }
+    :host([tone="danger"][variant="fill"]) .chip:hover {
+      background: var(--rel-action-danger-fill-hover);
+    }
+    :host([tone="danger"][variant="fill"]) .chip:active,
+    :host([tone="danger"][variant="fill"][dragging]) .chip {
+      background: var(--rel-action-danger-fill-dragged);
+    }
+    :host([tone="danger"][variant="subtle"]) .chip:hover {
+      border-color: var(--rel-action-danger-border-subtle-hover);
+      background: var(--rel-action-danger-subtle-hover);
+      color: var(--rel-action-danger-label-icons-subtle-hover);
+    }
+    :host([tone="danger"][variant="subtle"]) .chip:active,
+    :host([tone="danger"][variant="subtle"][dragging]) .chip {
+      border-color: var(--rel-action-danger-border-subtle-dragged);
+      background: var(--rel-action-danger-subtle-dragged);
+      color: var(--rel-action-danger-label-icons-subtle-dragged);
+    }
+    :host([tone="warning"][variant="fill"]) .chip:hover {
+      background: var(--rel-action-warning-fill-hover);
+    }
+    :host([tone="warning"][variant="fill"]) .chip:active,
+    :host([tone="warning"][variant="fill"][dragging]) .chip {
+      background: var(--rel-action-warning-fill-dragged);
+    }
+    :host([tone="warning"][variant="subtle"]) .chip:hover {
+      border-color: var(--rel-action-warning-border-subtle-hover);
+      background: var(--rel-action-warning-subtle-hover);
+      color: var(--rel-action-warning-label-icons-subtle-hover);
+    }
+    :host([tone="warning"][variant="subtle"]) .chip:active,
+    :host([tone="warning"][variant="subtle"][dragging]) .chip {
+      border-color: var(--rel-action-warning-border-subtle-dragged);
+      background: var(--rel-action-warning-subtle-dragged);
+      color: var(--rel-action-warning-label-icons-subtle-dragged);
+    }
+    :host([tone="success"][variant="fill"]) .chip:hover {
+      background: var(--rel-action-success-fill-hover);
+    }
+    :host([tone="success"][variant="fill"]) .chip:active,
+    :host([tone="success"][variant="fill"][dragging]) .chip {
+      background: var(--rel-action-success-fill-dragged);
+    }
+    :host([tone="success"][variant="subtle"]) .chip:hover {
+      border-color: var(--rel-action-success-border-subtle-hover);
+      background: var(--rel-action-success-subtle-hover);
+      color: var(--rel-action-success-label-icons-subtle-hover);
+    }
+    :host([tone="success"][variant="subtle"]) .chip:active,
+    :host([tone="success"][variant="subtle"][dragging]) .chip {
+      border-color: var(--rel-action-success-border-subtle-dragged);
+      background: var(--rel-action-success-subtle-dragged);
+      color: var(--rel-action-success-label-icons-subtle-dragged);
+    }
+    :host([tone="info"][variant="fill"]) .chip:hover {
+      background: var(--rel-action-info-fill-hover);
+    }
+    :host([tone="info"][variant="fill"]) .chip:active,
+    :host([tone="info"][variant="fill"][dragging]) .chip {
+      background: var(--rel-action-info-fill-dragged);
+    }
+    :host([tone="info"][variant="subtle"]) .chip:hover {
+      border-color: var(--rel-action-info-border-subtle-hover);
+      background: var(--rel-action-info-subtle-hover);
+      color: var(--rel-action-info-label-icons-subtle-hover);
+    }
+    :host([tone="info"][variant="subtle"]) .chip:active,
+    :host([tone="info"][variant="subtle"][dragging]) .chip {
+      border-color: var(--rel-action-info-border-subtle-dragged);
+      background: var(--rel-action-info-subtle-dragged);
+      color: var(--rel-action-info-label-icons-subtle-dragged);
     }
 
     :host([dragging]) .chip {
@@ -189,8 +263,9 @@ export class RelChip extends LitElement {
        gap (a positive offset was the bug: it drew a visible gap that
        doesn't exist in Figma). ── */
     .chip:focus-visible {
-      outline: 1.5px solid var(--rel-chip-focus-ring, #0b0b0b);
-      outline-offset: 0;
+      outline: 1.5px solid var(--rel-chip-focus-ring, var(--rel-border-focus));
+      outline-offset: 1.5px;
+      box-shadow: 0 0 0 1.5px var(--rel-border-focus-inner);
     }
 
     /* ── Icons ── */
@@ -203,15 +278,15 @@ export class RelChip extends LitElement {
     }
 
     :host([size="lg"]) .chip-icon {
-      --rel-icon-size: 16px;
+      --rel-icon-size: 20px;
     }
 
     :host([size="md"]) .chip-icon {
-      --rel-icon-size: 14px;
+      --rel-icon-size: 18px;
     }
 
     :host([size="sm"]) .chip-icon {
-      --rel-icon-size: 12px;
+      --rel-icon-size: 16px;
     }
 
     /* ── Avatar — not shown in the Figma sample. rel-avatar sizes its inner
@@ -227,12 +302,12 @@ export class RelChip extends LitElement {
     }
 
     :host([variant="fill"]) .chip rel-avatar {
-      --rel-avatar-bg-fill: rgba(255, 255, 255, 0.25);
-      --rel-avatar-color-fill: #ffffff;
+      --rel-avatar-bg-fill: var(--rel-action-overlay-hover-inverse);
+      --rel-avatar-color-fill: var(--rel-action-neutral-label-icons-fill-inverse);
     }
 
     :host([variant="subtle"]) .chip rel-avatar {
-      --rel-avatar-bg-fill: rgba(11, 11, 11, 0.12);
+      --rel-avatar-bg-fill: var(--rel-action-overlay-hover-strong);
       --rel-avatar-color-fill: currentColor;
     }
 
@@ -259,62 +334,19 @@ export class RelChip extends LitElement {
     .chip-remove:focus-visible {
       outline: 1.5px solid currentColor;
       outline-offset: 1px;
-      border-radius: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     :host([size="lg"]) .chip-remove {
-      --rel-icon-size: 16px;
+      --rel-icon-size: 20px;
     }
     :host([size="md"]) .chip-remove {
-      --rel-icon-size: 14px;
+      --rel-icon-size: 18px;
     }
     :host([size="sm"]) .chip-remove {
-      --rel-icon-size: 12px;
-    }
-
-    /* ── Dark mode — Figma had no dark-mode sample for this new component
-       set. Fill stays unchanged (the saturated tones already read fine on
-       dark surfaces); Subtle gets a dark-tinted background, following the
-       same invert pattern used elsewhere in this design system. Flagged in
-       the handoff notes — adjust if exact values exist.
-       No [data-theme="dark"] :host(...) fallback here — :host() can never
-       be preceded by a combinator, so that form is invalid and silently
-       matches nothing (the exact bug hit and fixed multiple times in
-       rel-avatar/rel-select earlier this session). :host-context() alone
-       has universal modern browser support, so no fallback is needed. ── */
-    :host-context([data-theme="dark"])[tone="neutral"][variant="subtle"] .chip {
-      background: #333333;
-      color: #f5f5f5;
-    }
-
-    :host-context([data-theme="dark"])[tone="danger"][variant="subtle"] .chip {
-      background: #3d1414;
-      color: #ff8080;
-    }
-
-    :host-context([data-theme="dark"])[tone="warning"][variant="subtle"] .chip {
-      background: #3d2e0a;
-      color: #ffd980;
-    }
-
-    :host-context([data-theme="dark"])[tone="success"][variant="subtle"] .chip {
-      background: #0d2e22;
-      color: #4ddba3;
-    }
-
-    :host-context([data-theme="dark"])[tone="info"][variant="subtle"] .chip {
-      background: #0a2e45;
-      color: #66c2ff;
-    }
-
-    :host-context([data-theme="dark"])[tone="neutral"][variant="fill"] .chip {
-      background: #f5f5f5;
-      color: #0b0b0b;
+      --rel-icon-size: 16px;
     }
 
-    :host-context([data-theme="dark"]) .chip-remove:focus-visible {
-      outline-color: currentColor;
-    }
   `;
 
   private get classes() {
@@ -373,7 +405,7 @@ export class RelChip extends LitElement {
 
     return html`
       <span
-        class="${this.classes}"
+        part="base" class="${this.classes}"
         role="button"
         tabindex="0"
         aria-label="${this.label}"
@@ -382,10 +414,10 @@ export class RelChip extends LitElement {
           ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
           : null}
         ${showLeadingIcon
-          ? html`<rel-icon class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
+          ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
           : null}
 
-        <span class="chip-label">${this.label}</span>
+        <span part="label" class="chip-label">${this.label}</span>
 
         ${this.trailingIcon
           ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`

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

@@ -57,19 +57,19 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Color Tokens
-- `--rel-colors-white` - White background color
-- `--rel-colors-gray-light` - Light background color
+- `--rel-bg-surface` - White background color
+- `--rel-bg-surface-elevated` - Light background color
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-300` - Shadow when `shadow` is true
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Container border radius
+- `--rel-border-radius-sm` - Container border radius
 
 ### Spacing Tokens
-- `--rel-spacing-space-xs` - Small padding
-- `--rel-spacing-space-md` - Medium padding
-- `--rel-spacing-space-2xl` - Large padding
+- `--rel-spacing-xs` - Small padding
+- `--rel-spacing-md` - Medium padding
+- `--rel-spacing-2xl` - Large padding
 
 ## Accessibility
 - Purely presentational container, no specific accessibility features
@@ -83,13 +83,13 @@ None exposed.
 
 ## Notes / Edge Cases
 - **Padding variants**:
-  - **sm**: Uses `--rel-spacing-space-xs`
-  - **md**: Uses `--rel-spacing-space-md`
-  - **lg**: Uses `--rel-spacing-space-2xl`
+  - **sm**: Uses `--rel-spacing-xs`
+  - **md**: Uses `--rel-spacing-md`
+  - **lg**: Uses `--rel-spacing-2xl`
   
 - **Background variants**:
-  - **white**: White background (`--rel-colors-white`)
-  - **light**: Light gray background (`--rel-colors-gray-light`)
+  - **white**: White background (`--rel-bg-surface`)
+  - **light**: Light gray background (`--rel-bg-surface-elevated`)
   - **none**: Transparent background
 
 - The component is `display: block` and `width: 100%` with `box-sizing: border-box`

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

@@ -3,46 +3,72 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-container")
 export class RelContainer extends LitElement {
-  @property({ type: String }) padding: "sm" | "md" | "lg" = "md";
+  @property({ type: String, reflect: true }) padding: "sm" | "md" | "lg" | "xl" = "md";
   @property({ type: Boolean }) shadow = false;
-  @property({ type: String }) background: "light" | "white" | "none" = "white";
+  @property({ type: String, reflect: true }) background: "light" | "white" | "none" = "white";
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
       width: 100%;
       box-sizing: border-box;
     }
 
     .reliability-container {
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       display: block;
       width: 100%;
       box-sizing: border-box;
     }
 
     .bg-white {
-      background-color: var(--rel-color-bg-primary);
+      background-color: var(--rel-bg-surface);
     }
 
     .bg-light {
-      background-color: var(--rel-color-bg-secondary);
+      background-color: var(--rel-bg-surface-elevated);
     }
 
     .bg-none {
       background: transparent;
     }
 
+    /* Default typography for slotted container content (Figma roles) */
+    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
+      font-family: var(--rel-headings-sm-font-family);
+      font-weight: var(--rel-headings-sm-font-weight);
+      font-size: var(--rel-headings-sm-font-size);
+      line-height: var(--rel-headings-sm-line-height);
+      letter-spacing: var(--rel-headings-sm-letter-spacing);
+      color: var(--rel-text-default);
+      margin: 0 0 var(--rel-spacing-lg) 0;
+    }
+
+    ::slotted(p) {
+      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);
+      color: var(--rel-text-body);
+      margin: 0;
+    }
+
     .padding-sm {
-      padding: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-xs);
     }
 
     .padding-md {
-      padding: var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-md);
     }
 
     .padding-lg {
-      padding: var(--rel-spacing-space-2xl);
+      padding: var(--rel-spacing-xl);
+    }
+
+    .padding-xl {
+      padding: var(--rel-spacing-2xl);
     }
 
     .shadow {
@@ -61,7 +87,7 @@ export class RelContainer extends LitElement {
 
   render() {
     return html`
-      <div class="${this.classes}">
+      <div part="base container" class="${this.classes}">
         <slot></slot>
       </div>
     `;

package/dist/components/rel-date-picker/README.md

@@ -97,7 +97,8 @@ picker.addEventListener('rel-open-change', (e) => {
 | `min` | `string \| null` | `null` | Minimum selectable date (ISO format) |
 | `max` | `string \| null` | `null` | Maximum selectable date (ISO format) |
 | `week-start` | `"sun" \| "mon"` | `"sun"` | First day of the week |
-| `locale` | `string` | `"en-US"` | Locale for month names (uses Intl.DateTimeFormat) |
+| `locale` | `string` | `"en-US"` | Locale for weekday labels and named-month display tokens (uses Intl.DateTimeFormat) |
+| `display-format` | `string \| null` | `null` | Token pattern for the selected value (see [Display format](#display-format)). Unset → locale long date |
 | `open` | `boolean` | `false` | Controls popover open state |
 | `close-on-select` | `boolean` | `true` | Close popover after selecting a date |
 | `clearable` | `boolean` | `false` | Show clear button when date is selected |
@@ -107,6 +108,41 @@ picker.addEventListener('rel-open-change', (e) => {
 | Property | Type | Description |
 |----------|------|-------------|
 | `isDateDisabled` | `(date: Date) => boolean` | Custom function to disable specific dates |
+| `formatDate` | `(date: Date) => string` | Full control of the selected-value display; takes precedence over `display-format`. Set via property (not an attribute) |
+
+## Display format
+
+By default the selected date is shown using the locale's long date (e.g. `July 21, 2026`). To render a fixed format instead, set `display-format` to a token pattern, or set the `formatDate` property to a callback for full control. Both affect **only the visible trigger text** — the underlying `value` stays ISO (`YYYY-MM-DD`), and parsing, the calendar, and accessibility are unchanged.
+
+```html
+<rel-date-picker value="2026-07-21" display-format="YYYY-MM-DD"></rel-date-picker> <!-- 2026-07-21 -->
+<rel-date-picker value="2026-07-21" display-format="MM/DD/YYYY"></rel-date-picker> <!-- 07/21/2026 -->
+<rel-date-picker value="2026-07-21" display-format="DD/MM/YYYY"></rel-date-picker> <!-- 21/07/2026 -->
+<rel-date-picker value="2026-07-21" display-format="DD MMM YYYY"></rel-date-picker> <!-- 21 Jul 2026 -->
+```
+
+```js
+// Full control via callback (wins over display-format). Use it for logic a
+// pattern can't express — e.g. relative labels or fiscal periods.
+picker.formatDate = (date) => `Q${Math.floor(date.getMonth() / 3) + 1} ${date.getFullYear()}`;
+```
+
+> **Timezone note:** the `date` passed to `formatDate` is at **local midnight**. Read it with local getters (`getFullYear` / `getMonth` / `getDate`) — as the built-in tokens do. Avoid `toISOString()` / `getUTC*`, which shift the day by the local UTC offset (e.g. `2026-07-21` → `2026-07-20`). For a plain ISO string, prefer `display-format="YYYY-MM-DD"`.
+
+**Tokens** (matched longest-first; other characters pass through; wrap literal text containing token letters in `[ ]`):
+
+| Token | Meaning | Example (2026-07-21) |
+|-------|---------|----------------------|
+| `YYYY` | 4-digit year | `2026` |
+| `YY` | 2-digit year | `26` |
+| `MMMM` | Full month (locale) | `July` |
+| `MMM` | Short month (locale) | `Jul` |
+| `MM` | 2-digit month | `07` |
+| `M` | Month number | `7` |
+| `DD` | 2-digit day | `21` |
+| `D` | Day number | `21` |
+
+Named-month tokens (`MMMM`/`MMM`) respect `locale`; numeric formats are locale-independent. Existing consumers that set neither property are unaffected.
 
 ## Events
 
@@ -230,14 +266,14 @@ picker.isDateDisabled = (date) => {
 The component uses design tokens from the Reliability Design System. All colors, spacing, and typography are inherited from CSS variables.
 
 Key tokens used:
-- `--rel-colors-*` for all colors
+- `--rel-bg-*` / `--rel-text-*` / `--rel-border-*` semantic colors
 - `--rel-spacing-*` for spacing
-- `--rel-fontSizes-*`, `--rel-fontWeights-*` for typography
-- `--rel-borders-*` for borders and radius
+- `--rel-body-*` composite typography roles
+- `--rel-border-*` / `--rel-border-radius-*` tokens
 - `--rel-shadows-*` for popover shadow
-- Selected date: `--rel-colors-green-primary`
-- Today indicator: `--rel-colors-blue-primary`
-- Focus rings: `--rel-colors-blue-primary`
+- Selected date: `--rel-bg-brand`
+- Today indicator: `--rel-bg-info`
+- Focus rings: `--rel-bg-info`
 
 ## Date Format
 

package/dist/components/rel-date-picker/date-format.test.ts

@@ -0,0 +1,43 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { formatDatePattern } from "./date-format";
+
+// Local, DOM-free date (noon avoids any TZ edge on the calendar day).
+const d = new Date(2026, 6, 21, 12, 0, 0); // 2026-07-21 (month is 0-based)
+const single = new Date(2026, 2, 5, 12, 0, 0); // 2026-03-05 → single-digit M/D
+
+test("YYYY-MM-DD (ISO, the primary ask)", () => {
+  assert.equal(formatDatePattern(d, "YYYY-MM-DD"), "2026-07-21");
+});
+
+test("MM/DD/YYYY (US)", () => {
+  assert.equal(formatDatePattern(d, "MM/DD/YYYY"), "07/21/2026");
+});
+
+test("DD/MM/YYYY (EU)", () => {
+  assert.equal(formatDatePattern(d, "DD/MM/YYYY"), "21/07/2026");
+});
+
+test("zero-padding vs single-digit tokens", () => {
+  assert.equal(formatDatePattern(single, "YYYY-MM-DD"), "2026-03-05");
+  assert.equal(formatDatePattern(single, "D/M/YYYY"), "5/3/2026");
+  assert.equal(formatDatePattern(single, "YY"), "26");
+});
+
+test("named-month tokens are locale-aware", () => {
+  assert.equal(formatDatePattern(d, "MMMM D, YYYY", "en-US"), "July 21, 2026");
+  assert.equal(formatDatePattern(d, "MMM DD", "en-US"), "Jul 21");
+  // German locale month name
+  assert.equal(formatDatePattern(d, "MMMM", "de-DE"), "Juli");
+});
+
+test("bracketed literals pass through without token substitution", () => {
+  assert.equal(formatDatePattern(d, "[Week of] YYYY-MM-DD"), "Week of 2026-07-21");
+  // 'M' and 'D' inside a bracketed literal are NOT substituted
+  assert.equal(formatDatePattern(d, "[Manifest Due:] DD/MM"), "Manifest Due: 21/07");
+});
+
+test("arbitrary separators pass through", () => {
+  assert.equal(formatDatePattern(d, "YYYY.MM.DD"), "2026.07.21");
+  assert.equal(formatDatePattern(d, "DD MMM YYYY", "en-US"), "21 Jul 2026");
+});