@reliability-design/web 1.3.0 → 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;
@@ -17,17 +18,57 @@ export class RelDatePicker extends LitElement {
   @property({ type: String }) label: string | null = null;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: Boolean }) required = false;
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  // Date bounds. minDate/maxDate are the standard names; min/max are kept as
+  // deprecated aliases (minDate/maxDate win when both are set).
+  @property({ type: String, attribute: "min-date" }) minDate: string | null = null;
+  @property({ type: String, attribute: "max-date" }) maxDate: string | null = null;
+  /** @deprecated use minDate */
   @property({ type: String }) min: string | null = null;
+  /** @deprecated use maxDate */
   @property({ type: String }) max: string | null = null;
+
   @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;
 
+  // ── Standardized input API (mirrors rel-textfield) ──
+  @property({ type: Boolean }) error = false;
+  @property({ type: String, attribute: "error-message" }) errorMessage?: string;
+  @property({ type: String, attribute: "helper-text" }) helperText?: string;
+  @property({ type: String }) name?: string;
+  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
+  @property({ type: String, reflect: true }) variant: "outlined" = "outlined";
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
+
   // Custom disabled predicate (not settable via attribute)
   public isDateDisabled?: (date: Date) => boolean;
 
+  // minDate/maxDate supersede the deprecated min/max aliases
+  private get minBound(): string | null {
+    return this.minDate ?? this.min;
+  }
+  private get maxBound(): string | null {
+    return this.maxDate ?? this.max;
+  }
+
   @state() private viewYear: number = new Date().getFullYear();
   @state() private viewMonth: number = new Date().getMonth();
   @state() private focusedDate: Date | null = null;
@@ -40,11 +81,18 @@ export class RelDatePicker extends LitElement {
 
   static styles = css`
     :host {
-      display: inline-block;
-      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-text-default);
+      display: block;
+      font-family: var(--rel-fonts-font-family);
       position: relative;
     }
 
+    /* Intrinsic width by default; set fullWidth to fill the parent. */
+    :host(:not([fullwidth])) {
+      display: inline-block;
+      width: auto;
+    }
+
     :host([disabled]) {
       opacity: 0.6;
       cursor: not-allowed;
@@ -54,16 +102,54 @@ export class RelDatePicker extends LitElement {
       pointer-events: none;
     }
 
+    :host([readonly]) .trigger-button {
+      cursor: default;
+    }
+
     .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-text-danger);
+      margin-left: 2px;
+    }
+
+    /* Support text (helperText / errorMessage) */
+    .date-picker-support {
+      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-text-danger);
     }
 
     .trigger-button {
@@ -72,65 +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-border-danger);
+    }
+
+    .trigger-button.error:focus-visible {
+      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-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-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 {
@@ -143,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;
     }
@@ -160,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 {
@@ -169,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;
     }
 
@@ -194,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;
     }
 
@@ -222,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;
@@ -236,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;
     }
 
@@ -410,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",
@@ -428,13 +573,13 @@ export class RelDatePicker extends LitElement {
   private isDateDisabledInternal(date: Date): boolean {
     if (this.disabled) return true;
 
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate && date < minDate) return true;
     }
 
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate && date > maxDate) return true;
     }
 
@@ -535,13 +680,13 @@ export class RelDatePicker extends LitElement {
     let startYear = currentYear - 100;
     let endYear = currentYear + 10;
 
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate) startYear = Math.max(startYear, minDate.getFullYear() - 5);
     }
 
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate) endYear = Math.min(endYear, maxDate.getFullYear() + 5);
     }
 
@@ -553,7 +698,7 @@ export class RelDatePicker extends LitElement {
   }
 
   private toggleCalendarPopover() {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
     this.open = !this.open;
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
@@ -597,7 +742,7 @@ export class RelDatePicker extends LitElement {
   }
 
   private selectDay(day: CalendarDay) {
-    if (day.isDisabled || this.disabled) return;
+    if (day.isDisabled || this.disabled || this.readonly) return;
 
     const newValue = this.formatISODate(day.date);
     this.value = newValue;
@@ -746,14 +891,34 @@ export class RelDatePicker extends LitElement {
     const months = this.getMonthsList();
     const years = this.getYearsList();
 
+    const isError = this.error;
+    const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
+    const describedById = belowText ? "date-picker-desc" : undefined;
+    const wrapperClasses = [
+      "date-picker-wrapper",
+      this.size,
+      isError ? "error" : "",
+      this.readonly ? "readonly" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
     return html`
-      <div class="date-picker-wrapper">
+      <div part="base" class="${wrapperClasses}">
         ${this.label
-          ? html`<label class="label" id="date-picker-label">${this.label}</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
+            >`
+          : nothing}
+
+        ${this.name
+          ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
           : nothing}
 
         <button
-          class="trigger-button"
+          class="trigger-button ${isError ? "error" : ""}"
           type="button"
           ?disabled=${this.disabled}
           @click=${this.toggleCalendarPopover}
@@ -762,6 +927,9 @@ export class RelDatePicker extends LitElement {
           aria-haspopup="dialog"
           aria-expanded=${this.open}
           aria-required=${this.required}
+          aria-invalid=${isError}
+          aria-readonly=${this.readonly}
+          aria-describedby=${describedById ?? nothing}
           aria-labelledby=${this.label ? "date-picker-label" : nothing}
         >
           <span class="trigger-content ${this.value ? "" : "placeholder"}">
@@ -914,6 +1082,12 @@ export class RelDatePicker extends LitElement {
             )}
           </div>
         </div>
+
+        ${belowText
+          ? html`<div class="date-picker-support ${isError ? "error" : ""}" id=${describedById}>
+              ${belowText}
+            </div>`
+          : nothing}
       </div>
     `;
   }