@reliability-design/web 1.0.3 → 1.1.1

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("rel-button")
 export class RelButton extends LitElement {
@@ -19,6 +20,8 @@ export class RelButton extends LitElement {
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
+
   static styles = css`
     :host {
       display: inline-flex;
@@ -70,11 +73,24 @@ export class RelButton extends LitElement {
     }
 
     /* Disabled */
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
     :host([disabled]) button {
       cursor: not-allowed;
-      background-color: var(--rel-colors-gray-border) !important;
-      color: var(--rel-colors-gray-disabled-text) !important;
+      background-color: var(--rel-color-bg-tertiary) !important;
+      color: var(--rel-color-text-disabled) !important;
+      border: 1px solid var(--rel-color-border-default) !important;
       pointer-events: none;
+      filter: none !important;
+    }
+
+    :host([disabled]):host-context([data-theme="dark"]) button,
+    :host([disabled]):host-context(.dark) button {
+      background-color: var(--rel-color-bg-tertiary) !important;
+      color: var(--rel-color-text-disabled) !important;
+      border-color: var(--rel-color-border-default) !important;
     }
 
     /* Variants & tones (unchanged) */
@@ -84,7 +100,7 @@ export class RelButton extends LitElement {
     }
     .btn-default.tone-critical {
       background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
     .btn-default.tone-success {
       background: var(--rel-colors-green-success);
@@ -93,11 +109,11 @@ export class RelButton extends LitElement {
 
     .btn-primary.tone-default {
       background: var(--rel-colors-green-primary);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
     .btn-primary.tone-critical {
       background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
     .btn-primary.tone-success {
       background: var(--rel-colors-green-success);
@@ -106,7 +122,7 @@ export class RelButton extends LitElement {
 
     .btn-secondary {
       background: var(--rel-colors-white);
-      border: 1px solid var(--rel-colors-black);
+      border: 1px solid var(--rel-color-border-strong);
       color: var(--rel-colors-black);
     }
 
@@ -130,8 +146,24 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-black);
     }
 
-    button:hover:not(:disabled) {
-      filter: brightness(0.92);
+    button.btn-primary.tone-default:hover:not(:disabled) {
+      background: var(--rel-color-brand-hover);
+    }
+
+    button.btn-primary.tone-critical:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
+    button.btn-primary.tone-success:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default) {
+      background: var(--rel-color-bg-hover);
+    }
+
+    button.btn-default:hover:not(:disabled) {
+      filter: brightness(0.85);
     }
 
     button:active:not(:disabled) {
@@ -142,6 +174,29 @@ export class RelButton extends LitElement {
       outline: 2px solid var(--rel-colors-blue-primary);
       outline-offset: 2px;
     }
+
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) button:focus-visible,
+    :host-context(.dark) button:focus-visible {
+      outline-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-secondary,
+    :host-context(.dark) button.btn-secondary {
+      background: #000000;
+      border-color: #ffffff;
+      color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-text,
+    :host-context(.dark) button.btn-text {
+      color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-link,
+    :host-context(.dark) button.btn-link {
+      color: #ffffff;
+    }
   `;
 
   private get classes() {
@@ -176,6 +231,7 @@ export class RelButton extends LitElement {
         ?disabled=${this.disabled}
         @click=${this.handleClick}
         aria-disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? undefined)}
       >
         <slot></slot>
       </button>

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

@@ -0,0 +1,109 @@
+# rel-calendar
+
+A fully accessible calendar component built with Lit for the Reliability Design System.
+
+## Features
+
+- Single date selection
+- Month navigation
+- Keyboard navigation support (arrow keys, Home/End, PageUp/PageDown)
+- Min/max date constraints
+- Custom disabled date predicate
+- Configurable week start (Sunday or Monday)
+- Locale-aware month names
+- Today indicator
+- Full ARIA support
+
+## Usage
+
+```html
+<rel-calendar></rel-calendar>
+```
+
+### With value
+
+```html
+<rel-calendar value="2026-01-16"></rel-calendar>
+```
+
+### With min/max
+
+```html
+<rel-calendar
+  min="2026-01-01"
+  max="2026-12-31"
+></rel-calendar>
+```
+
+### Week starting Monday
+
+```html
+<rel-calendar week-start="mon"></rel-calendar>
+```
+
+### Disabled
+
+```html
+<rel-calendar disabled></rel-calendar>
+```
+
+### Custom disabled dates (JavaScript)
+
+```javascript
+const calendar = document.querySelector('rel-calendar');
+
+// Disable weekends
+calendar.isDateDisabled = (date) => {
+  const day = date.getDay();
+  return day === 0 || day === 6; // Sunday or Saturday
+};
+
+// Listen to changes
+calendar.addEventListener('rel-change', (e) => {
+  console.log('Selected date:', e.detail.value); // "2026-01-16"
+  console.log('Selected date object:', e.detail.date); // Date object
+});
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `string \| null` | `null` | Selected date in ISO format (YYYY-MM-DD) |
+| `min` | `string \| null` | `null` | Minimum selectable date (ISO format) |
+| `max` | `string \| null` | `null` | Maximum selectable date (ISO format) |
+| `disabled` | `boolean` | `false` | Disables all interaction |
+| `week-start` | `"sun" \| "mon"` | `"sun"` | First day of the week |
+| `locale` | `string` | `"en-US"` | Locale for month names (uses Intl.DateTimeFormat) |
+
+## Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isDateDisabled` | `(date: Date) => boolean` | Custom function to disable specific dates |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rel-change` | `{ value: string \| null, date: Date \| null }` | Fired when selection changes |
+
+## Keyboard Navigation
+
+- **Arrow keys**: Move focus by day (left/right) and week (up/down)
+- **Home/End**: Jump to start/end of current week
+- **PageUp/PageDown**: Change month
+- **Shift + PageUp/PageDown**: Change year
+- **Enter/Space**: Select focused day
+
+## Styling
+
+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 colors
+- `--rel-spacing-*` for spacing
+- `--rel-fontSizes-*`, `--rel-fontWeights-*` for typography
+- `--rel-borders-radius-*` for border radius
+- Focus outline uses `--rel-colors-blue-primary`
+- Selected state uses `--rel-colors-green-primary`

package/dist/components/rel-calendar/index.ts

@@ -0,0 +1 @@
+export * from "./rel-calendar";

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

@@ -0,0 +1,467 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+interface CalendarDay {
+  date: Date;
+  day: number;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+}
+
+@customElement("rel-calendar")
+export class RelCalendar extends LitElement {
+  @property({ type: String, reflect: true }) value: string | null = null;
+  @property({ type: String }) min: string | null = null;
+  @property({ type: String }) max: string | null = null;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String, attribute: "week-start" }) weekStart: "sun" | "mon" = "sun";
+  @property({ type: String }) locale = "en-US";
+
+  // Custom disabled predicate (not settable via attribute)
+  public isDateDisabled?: (date: Date) => boolean;
+
+  @state() private viewYear: number = new Date().getFullYear();
+  @state() private viewMonth: number = new Date().getMonth();
+  @state() private focusedDate: Date | null = null;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      background: var(--rel-colors-white, #fff);
+      border: 1px solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      padding: var(--rel-spacing-space-md, 16px);
+      max-width: 320px;
+      color: var(--rel-text-primary, #333);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--rel-spacing-space-md);
+    }
+
+    .header-center {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-text-heading);
+    }
+
+    .nav-button {
+      background: transparent;
+      border: none;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--rel-colors-gray-primary);
+      transition: background-color 0.15s ease;
+    }
+
+    .nav-button:hover {
+      background: var(--rel-surface-secondary);
+    }
+
+    .nav-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: var(--rel-fontSizes-xs);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-colors-gray-placeholder);
+      padding: var(--rel-spacing-space-xs);
+      text-transform: uppercase;
+    }
+
+    .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);
+      cursor: pointer;
+      position: relative;
+      transition: all 0.15s ease;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .day-button:hover:not(:disabled):not(.selected) {
+      background: var(--rel-surface-secondary);
+    }
+
+    .day-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
+    .day-button.today:not(.selected) {
+      border: 2px solid var(--rel-color-border-focus);
+    }
+
+    .day-button.selected {
+      background: var(--rel-color-brand);
+      color: var(--rel-color-text-inverse);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .day-button.other-month {
+      color: var(--rel-colors-gray-placeholder);
+      opacity: 0.5;
+    }
+
+    .day-button:disabled {
+      color: var(--rel-text-disabled);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .day-button:disabled:hover {
+      background: transparent;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.value) {
+      const date = this.parseISODate(this.value);
+      if (date) {
+        this.viewYear = date.getFullYear();
+        this.viewMonth = date.getMonth();
+      }
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has("value") && this.value) {
+      const date = this.parseISODate(this.value);
+      if (date) {
+        this.viewYear = date.getFullYear();
+        this.viewMonth = date.getMonth();
+      }
+    }
+  }
+
+  private parseISODate(iso: string): Date | null {
+    const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match) return null;
+    const [, year, month, day] = match;
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+  }
+
+  private formatISODate(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  private isSameDay(date1: Date, date2: Date): boolean {
+    return (
+      date1.getFullYear() === date2.getFullYear() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate()
+    );
+  }
+
+  private isDateDisabledInternal(date: Date): boolean {
+    if (this.disabled) return true;
+
+    if (this.min) {
+      const minDate = this.parseISODate(this.min);
+      if (minDate && date < minDate) return true;
+    }
+
+    if (this.max) {
+      const maxDate = this.parseISODate(this.max);
+      if (maxDate && date > maxDate) return true;
+    }
+
+    if (this.isDateDisabled && this.isDateDisabled(date)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private getCalendarDays(): CalendarDay[] {
+    const days: CalendarDay[] = [];
+    const firstDayOfMonth = new Date(this.viewYear, this.viewMonth, 1);
+    const lastDayOfMonth = new Date(this.viewYear, this.viewMonth + 1, 0);
+    const today = new Date();
+    const selectedDate = this.value ? this.parseISODate(this.value) : null;
+
+    let startDay = firstDayOfMonth.getDay();
+    if (this.weekStart === "mon") {
+      startDay = startDay === 0 ? 6 : startDay - 1;
+    }
+
+    // Leading days from previous month
+    for (let i = startDay - 1; i >= 0; i--) {
+      const date = new Date(this.viewYear, this.viewMonth, -i);
+      days.push({
+        date,
+        day: date.getDate(),
+        isCurrentMonth: false,
+        isToday: this.isSameDay(date, today),
+        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
+        isDisabled: this.isDateDisabledInternal(date),
+      });
+    }
+
+    // Current month days
+    for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
+      const date = new Date(this.viewYear, this.viewMonth, day);
+      days.push({
+        date,
+        day,
+        isCurrentMonth: true,
+        isToday: this.isSameDay(date, today),
+        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
+        isDisabled: this.isDateDisabledInternal(date),
+      });
+    }
+
+    // Trailing days from next month
+    const remainingCells = 42 - days.length; // 6 weeks max
+    for (let i = 1; i <= remainingCells; i++) {
+      const date = new Date(this.viewYear, this.viewMonth + 1, i);
+      days.push({
+        date,
+        day: date.getDate(),
+        isCurrentMonth: false,
+        isToday: this.isSameDay(date, today),
+        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
+        isDisabled: this.isDateDisabledInternal(date),
+      });
+    }
+
+    return days;
+  }
+
+  private getWeekdayLabels(): string[] {
+    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const days = [];
+    const baseDate = new Date(2024, 0, 7); // Sunday, Jan 7, 2024
+
+    for (let i = 0; i < 7; i++) {
+      const offset = this.weekStart === "mon" ? i + 1 : i;
+      const date = new Date(baseDate);
+      date.setDate(baseDate.getDate() + offset);
+      days.push(formatter.format(date).substring(0, 2));
+    }
+
+    return days;
+  }
+
+  private getMonthName(): string {
+    const formatter = new Intl.DateTimeFormat(this.locale, { month: "long" });
+    return formatter.format(new Date(this.viewYear, this.viewMonth, 1));
+  }
+
+  private previousMonth() {
+    if (this.viewMonth === 0) {
+      this.viewMonth = 11;
+      this.viewYear--;
+    } else {
+      this.viewMonth--;
+    }
+  }
+
+  private nextMonth() {
+    if (this.viewMonth === 11) {
+      this.viewMonth = 0;
+      this.viewYear++;
+    } else {
+      this.viewMonth++;
+    }
+  }
+
+  private selectDay(day: CalendarDay) {
+    if (day.isDisabled || this.disabled) return;
+
+    const newValue = this.formatISODate(day.date);
+    this.value = newValue;
+    this.focusedDate = day.date;
+
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: {
+          value: newValue,
+          date: new Date(day.date),
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleKeyDown(e: KeyboardEvent, day: CalendarDay, index: number) {
+    const days = this.getCalendarDays();
+    let targetIndex = index;
+
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        targetIndex = index - 1;
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        targetIndex = index + 1;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        targetIndex = index - 7;
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        targetIndex = index + 7;
+        break;
+      case "Home":
+        e.preventDefault();
+        targetIndex = index - (index % 7);
+        break;
+      case "End":
+        e.preventDefault();
+        targetIndex = index - (index % 7) + 6;
+        break;
+      case "PageUp":
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.viewYear--;
+        } else {
+          this.previousMonth();
+        }
+        return;
+      case "PageDown":
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.viewYear++;
+        } else {
+          this.nextMonth();
+        }
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        this.selectDay(day);
+        return;
+      default:
+        return;
+    }
+
+    if (targetIndex >= 0 && targetIndex < days.length) {
+      const targetDay = days[targetIndex];
+      if (!targetDay.isCurrentMonth) {
+        if (targetIndex < index) {
+          this.previousMonth();
+        } else {
+          this.nextMonth();
+        }
+      }
+      this.focusedDate = targetDay.date;
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        const buttons = this.shadowRoot?.querySelectorAll(".day-button");
+        if (buttons && buttons[targetIndex]) {
+          (buttons[targetIndex] as HTMLButtonElement).focus();
+        }
+      });
+    }
+  }
+
+  render() {
+    const days = this.getCalendarDays();
+    const weekdayLabels = this.getWeekdayLabels();
+
+    return html`
+      <div role="grid" aria-label="Calendar">
+        <div class="header">
+          <button
+            class="nav-button"
+            @click=${this.previousMonth}
+            aria-label="Previous month"
+            ?disabled=${this.disabled}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+
+          <div class="header-center">
+            <span>${this.getMonthName()}</span>
+            <span>${this.viewYear}</span>
+          </div>
+
+          <button
+            class="nav-button"
+            @click=${this.nextMonth}
+            aria-label="Next month"
+            ?disabled=${this.disabled}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="calendar-grid" role="row">
+          ${weekdayLabels.map(
+            (label) => html`
+              <div class="weekday" role="columnheader" aria-label="${label}">
+                ${label}
+              </div>
+            `
+          )}
+        </div>
+
+        <div class="calendar-grid">
+          ${days.map(
+            (day, index) => html`
+              <button
+                class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
+                  ? "today"
+                  : ""} ${!day.isCurrentMonth ? "other-month" : ""}"
+                role="gridcell"
+                aria-label="${this.formatISODate(day.date)}"
+                aria-selected="${day.isSelected}"
+                ?disabled=${day.isDisabled || (!day.isCurrentMonth && day.isDisabled)}
+                @click=${() => this.selectDay(day)}
+                @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
+                tabindex="${day.isSelected || (index === 0 && !this.focusedDate) ? 0 : -1}"
+              >
+                ${day.day}
+              </button>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+}