@reliability-design/web 1.3.1 → 1.4.0

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

@@ -0,0 +1,47 @@
+/**
+ * Token-based date formatting for rel-date-picker's selected-value display.
+ *
+ * Pure (Date + Intl only, no DOM) so it is unit-testable in Node. Tokens are
+ * matched longest-first; anything else (separators like `-` `/` `.` and spaces)
+ * passes through literally. Wrap literal text that contains token letters in
+ * square brackets, e.g. `[Week of] YYYY-MM-DD`.
+ *
+ * | 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                   |
+ */
+export function formatDatePattern(
+  date: Date,
+  pattern: string,
+  locale = "en-US"
+): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  const tokens: Record<string, string> = {
+    YYYY: String(year),
+    YY: String(year).slice(-2),
+    MMMM: new Intl.DateTimeFormat(locale, { month: "long" }).format(date),
+    MMM: new Intl.DateTimeFormat(locale, { month: "short" }).format(date),
+    MM: pad(month),
+    M: String(month),
+    DD: pad(day),
+    D: String(day),
+  };
+
+  // `\[([^\]]*)\]` captures a bracketed literal (emitted without the brackets);
+  // otherwise the matched token is substituted from the map.
+  return pattern.replace(
+    /\[([^\]]*)\]|YYYY|YY|MMMM|MMM|MM|M|DD|D/g,
+    (match, literal) => (literal !== undefined ? literal : tokens[match])
+  );
+}

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { formatDatePattern } from "./date-format";
 
 interface CalendarDay {
   date: Date;
@@ -30,6 +31,20 @@ export class RelDatePicker extends LitElement {
 
   @property({ type: String, attribute: "week-start" }) weekStart: "sun" | "mon" = "sun";
   @property({ type: String }) locale = "en-US";
+
+  // ── Display formatting of the SELECTED value ──
+  // `displayFormat` is a token pattern (YYYY-MM-DD, MM/DD/YYYY, DD/MM/YYYY, …);
+  // see date-format.ts for the token table. `formatDate` is a full callback and
+  // takes precedence. When neither is set the locale long date is used, so
+  // existing consumers are unaffected. Neither affects parsing, the popup
+  // calendar, or accessibility — only the visible trigger text.
+  @property({ type: String, attribute: "display-format" }) displayFormat: string | null = null;
+  /**
+   * Full control over the selected-value display; wins over `displayFormat`.
+   * Reactive (attribute:false) so assigning it after render re-renders the
+   * trigger — frameworks set callbacks as properties post-creation.
+   */
+  @property({ attribute: false }) formatDate?: (date: Date) => string;
   @property({ type: Boolean, reflect: true }) open = false;
   @property({ type: Boolean, attribute: "close-on-select" }) closeOnSelect = true;
   @property({ type: Boolean }) clearable = false;
@@ -66,8 +81,9 @@ export class RelDatePicker 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;
     }
 
@@ -93,28 +109,47 @@ export class RelDatePicker extends LitElement {
     .date-picker-wrapper {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-xs);
     }
 
     .label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-heading);
+      color: var(--rel-text-label);
+
+      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);
+
     }
 
     .required-mark {
-      color: var(--rel-error-surface-default, #cc0000);
+      color: var(--rel-text-danger);
       margin-left: 2px;
     }
 
     /* Support text (helperText / errorMessage) */
     .date-picker-support {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-color-text-placeholder);
+      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);
+
     }
 
     .date-picker-support.error {
-      color: var(--rel-error-surface-default, #cc0000);
+      color: var(--rel-text-danger);
     }
 
     .trigger-button {
@@ -123,87 +158,98 @@ export class RelDatePicker extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-space-xs);
-      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
-      background: var(--rel-color-bg-primary);
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
+      background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-md);
-      color: var(--rel-text-primary);
+      border-radius: var(--rel-border-radius-sm);
+      color: var(--rel-text-default);
       cursor: pointer;
       transition: all 0.15s ease;
       text-align: left;
+      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);
     }
 
     .trigger-button:hover:not(:disabled) {
-      border-color: var(--rel-color-border-strong);
+      border-color: var(--rel-border-strong);
     }
 
     .trigger-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
-      border-color: var(--rel-color-border-focus);
+      border-color: var(--rel-border-focus);
     }
 
     .trigger-button:disabled {
       cursor: not-allowed;
-      background: var(--rel-surface-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     /* Error state */
     .trigger-button.error,
     .trigger-button.error:hover:not(:disabled) {
-      border-color: var(--rel-error-surface-default, #cc0000);
+      border-color: var(--rel-border-danger);
     }
 
     .trigger-button.error:focus-visible {
-      outline-color: var(--rel-error-surface-default, #cc0000);
-      border-color: var(--rel-error-surface-default, #cc0000);
+      outline-color: var(--rel-border-danger);
+      border-color: var(--rel-border-danger);
     }
 
     /* Size variants (medium is the base .trigger-button style) */
     .date-picker-wrapper.small .trigger-button {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+      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);
     }
 
     .date-picker-wrapper.large .trigger-button {
-      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-md);
-      font-size: var(--rel-fontSizes-lg);
+      padding: var(--rel-spacing-md) var(--rel-spacing-md);
+      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);
     }
 
     .trigger-content {
       flex: 1;
-      color: var(--rel-text-primary);
+      color: var(--rel-text-default);
     }
 
     .trigger-content.placeholder {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-text-placeholder);
     }
 
     .trigger-icons {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     .icon-button {
       background: none;
       border: none;
-      padding: var(--rel-spacing-space-3xs);
+      padding: var(--rel-spacing-3xs);
       cursor: pointer;
-      color: var(--rel-color-text-placeholder);
+      color: var(--rel-text-placeholder);
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs);
       transition: all 0.15s ease;
     }
 
     .icon-button:hover {
-      background: var(--rel-surface-secondary);
-      color: var(--rel-color-text-primary);
+      background: var(--rel-bg-surface-elevated);
+      color: var(--rel-text-default);
     }
 
     .icon-button svg {
@@ -216,11 +262,11 @@ export class RelDatePicker extends LitElement {
       top: calc(100% + 4px);
       left: 0;
       z-index: 1000;
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-md);
       min-width: 280px;
       display: none;
     }
@@ -233,8 +279,8 @@ export class RelDatePicker extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: var(--rel-spacing-space-md);
-      gap: var(--rel-spacing-space-xs);
+      margin-bottom: var(--rel-spacing-md);
+      gap: var(--rel-spacing-xs);
     }
 
     .nav-button {
@@ -242,21 +288,21 @@ export class RelDatePicker extends LitElement {
       border: none;
       width: 32px;
       height: 32px;
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-default);
       transition: background-color 0.15s ease;
     }
 
     .nav-button:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -267,25 +313,27 @@ export class RelDatePicker extends LitElement {
 
     .dropdown-trigger {
       width: 100%;
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      background: var(--rel-color-bg-primary);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+      background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-heading);
+      border-radius: var(--rel-border-radius-sm);
+      color: var(--rel-text-label);
       cursor: pointer;
       text-align: center;
       transition: all 0.15s ease;
+      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);
     }
 
     .dropdown-trigger:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .dropdown-trigger:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -295,9 +343,9 @@ export class RelDatePicker extends LitElement {
       left: 0;
       right: 0;
       z-index: 10;
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-200);
       max-height: 200px;
       overflow-y: auto;
@@ -309,81 +357,90 @@ export class RelDatePicker extends LitElement {
     }
 
     .dropdown-item {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       cursor: pointer;
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-text-primary);
+      color: var(--rel-text-default);
       transition: background-color 0.15s ease;
+      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);
     }
 
     .dropdown-item:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .dropdown-item.selected {
-      background: var(--rel-background-info);
+      background: var(--rel-bg-info-light);
       color: var(--rel-text-info);
-      font-weight: var(--rel-fontWeights-semibold);
+      font-weight: var(--rel-body-md-semibold-font-weight);
     }
 
     .weekdays {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-space-3xs);
-      margin-bottom: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-3xs);
+      margin-bottom: var(--rel-spacing-xs);
     }
 
     .weekday {
       text-align: center;
-      font-size: var(--rel-fontSizes-xs);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-color-text-placeholder);
-      padding: var(--rel-spacing-space-xs);
+      color: var(--rel-text-placeholder);
+      padding: var(--rel-spacing-xs);
       text-transform: uppercase;
+      font-family: var(--rel-body-xs-semibold-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);
     }
 
     .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-3xs);
     }
 
     .day-button {
       aspect-ratio: 1;
       border: none;
       background: transparent;
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-primary);
+      border-radius: var(--rel-border-radius-sm);
+      color: var(--rel-text-default);
       cursor: pointer;
       position: relative;
       transition: all 0.15s ease;
-      font-family: var(--rel-fontFamilies-primary);
+      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);
     }
 
     .day-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .day-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-colors-green-primary);
+      border: 2px solid var(--rel-border-brand);
     }
 
     .day-button.selected {
-      background: var(--rel-colors-green-primary);
-      color: var(--rel-color-text-inverse);
-      font-weight: var(--rel-fontWeights-semibold);
+      background: var(--rel-action-brand-fill);
+      color: var(--rel-action-brand-label-icons-primary);
+      font-weight: var(--rel-body-md-semibold-font-weight);
     }
 
     .day-button.other-month {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-text-placeholder);
       opacity: 0.5;
     }
 
@@ -483,6 +540,21 @@ export class RelDatePicker extends LitElement {
     const date = this.parseISODate(iso);
     if (!date) return iso;
 
+    // 1) explicit callback wins (fall back on error so a bad callback can't
+    //    blank the field)
+    if (typeof this.formatDate === "function") {
+      try {
+        const out = this.formatDate(date);
+        if (typeof out === "string") return out;
+      } catch {
+        /* fall through to the default */
+      }
+    }
+    // 2) token pattern (e.g. "YYYY-MM-DD")
+    if (this.displayFormat) {
+      return formatDatePattern(date, this.displayFormat, this.locale);
+    }
+    // 3) backward-compatible locale long date
     return new Intl.DateTimeFormat(this.locale, {
       year: "numeric",
       month: "long",
@@ -832,9 +904,9 @@ export class RelDatePicker extends LitElement {
       .join(" ");
 
     return html`
-      <div class="${wrapperClasses}">
+      <div part="base" class="${wrapperClasses}">
         ${this.label
-          ? html`<label class="label" id="date-picker-label"
+          ? html`<label part="label" class="label" id="date-picker-label"
               >${this.label}${this.required
                 ? html`<span class="required-mark" aria-hidden="true">*</span>`
                 : nothing}</label

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

@@ -59,17 +59,17 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-colors-gray-primary` - Text color (not used visually, but set)
+- `--rel-fonts-font-family` - Font family
+- `--rel-text-default` - Text color (not used visually, but set)
 
 ### Color Tokens
-- `--rel-colors-gray-border` - Divider line color
+- `--rel-border-default` - Divider line color
 
 ### Border Tokens
-- `--rel-borders-width-stroke-100` - Line thickness (width/height)
+- `--rel-stroke-sm` - Line thickness (width/height)
 
 ### Spacing Tokens
-- `--rel-spacing-space-md` - Margin around divider
+- `--rel-spacing-md` - Margin around divider
 
 ## Accessibility
 - Uses `role="separator"` for proper ARIA semantics
@@ -84,13 +84,13 @@ None exposed.
 ## Notes / Edge Cases
 - **Horizontal orientation**:
   - `width: 100%`
-  - `height: var(--rel-borders-width-stroke-100)`
-  - `margin: var(--rel-spacing-space-md) 0` (vertical margin)
+  - `height: var(--rel-stroke-sm)`
+  - `margin: var(--rel-spacing-md) 0` (vertical margin)
   
 - **Vertical orientation**:
-  - `width: var(--rel-borders-width-stroke-100)`
+  - `width: var(--rel-stroke-sm)`
   - `height: 100%`
-  - `margin: 0 var(--rel-spacing-space-md)` (horizontal margin)
+  - `margin: 0 var(--rel-spacing-md)` (horizontal margin)
   - Uses `align-self: stretch` to fill parent height
 
 - The divider is purely visual and has `background: transparent` on the host element

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

@@ -7,6 +7,7 @@
 
     static styles = css`
       :host {
+        color: var(--rel-text-default);
         display: block;
       }
 
@@ -14,23 +15,23 @@
         position: relative;
         display: flex;
         background: transparent;
-        font-family: var(--rel-fontFamilies-primary);
-        color: var(--rel-color-text-primary);
+        font-family: var(--rel-fonts-font-family);
+        color: var(--rel-text-default);
       }
 
       /* Horizontal */
       .rel-divider.horizontal {
         width: 100%;
-        height: var(--rel-borders-width-stroke-100);
-        background-color: var(--rel-color-border-divider);
-        margin: var(--rel-spacing-space-md) 0;
+        height: var(--rel-stroke-sm);
+        background-color: var(--rel-bg-neutral-elevated-2);
+        margin: var(--rel-spacing-md) 0;
       }
 
       /* Vertical */
       .rel-divider.vertical {
-        width: var(--rel-borders-width-stroke-100);
-        background-color: var(--rel-color-border-divider);
-        margin: 0 var(--rel-spacing-space-md);
+        width: var(--rel-stroke-sm);
+        background-color: var(--rel-bg-neutral-elevated-2);
+        margin: 0 var(--rel-spacing-md);
         align-self: stretch;
         height: 100%;
       }
@@ -47,7 +48,7 @@
 
     render() {
       return html`
-        <div class="rel-divider ${this.orientation}" role="separator"></div>
+        <div part="base" class="rel-divider ${this.orientation}" role="separator"></div>
       `;
     }
   }

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

@@ -154,7 +154,7 @@ rel-drawer::part(panel) {
 }
 
 rel-drawer::part(handle) {
-  background: var(--rel-colors-blue-primary);
+  background: var(--rel-bg-info);
 }
 ```
 

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

@@ -7,7 +7,7 @@ export class RelDrawerFooter extends LitElement {
     .drawer-footer {
       display: flex;
       justify-content: flex-end;
-      gap: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-xs);
     }
   `;