@reliability-design/web 1.0.3 → 1.0.6

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-colors-blue-primary);
+    }
+
+    .day-button.selected {
+      background: var(--rel-colors-green-primary);
+      color: var(--rel-colors-black);
+      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>
+    `;
+  }
+}

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

@@ -0,0 +1,94 @@
+# rel-card
+
+## Overview
+A simple, versatile card container component with built-in elevation shadow and hover lift effect. Provides a clean, elevated surface for grouping related content. Respects user motion preferences by disabling animations when requested.
+
+## Usage
+```html
+<!-- Basic card with text content -->
+<rel-card>
+  <h3>Card Title</h3>
+  <p>This is some content inside the card.</p>
+</rel-card>
+
+<!-- Card with mixed content -->
+<rel-card>
+  <h2>Product Name</h2>
+  <img src="product.jpg" alt="Product" style="width: 100%; border-radius: 8px;">
+  <p>Product description goes here.</p>
+  <button>Add to Cart</button>
+</rel-card>
+
+<!-- Multiple cards in a grid -->
+<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+  <rel-card>
+    <h4>Feature 1</h4>
+    <p>Description of feature 1</p>
+  </rel-card>
+  <rel-card>
+    <h4>Feature 2</h4>
+    <p>Description of feature 2</p>
+  </rel-card>
+  <rel-card>
+    <h4>Feature 3</h4>
+    <p>Description of feature 3</p>
+  </rel-card>
+</div>
+```
+
+## API
+
+### Attributes/Properties
+None. This component is purely presentational and controlled via slots.
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Card content (any HTML elements) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+
+### Color Tokens
+- `--rel-colors-white` - Card background color
+- `--rel-text-primary` - Text color
+
+### Shadow Tokens
+- `--rel-shadows-shadow-200` - Default elevation shadow
+- `--rel-shadows-shadow-300` - Hover elevation shadow (larger)
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Card border radius
+
+### Spacing Tokens
+- `--rel-spacing-space-md` - Internal padding
+
+## Accessibility
+- The card itself has no specific ARIA role (it's a generic container)
+- Ensure slotted content includes proper semantic HTML and ARIA attributes where needed
+- Hover effect is purely visual and does not affect accessibility
+
+### Keyboard Interactions
+- None (purely presentational container)
+
+### Focus Behavior
+- Does not receive focus (container only)
+- Ensure slotted interactive elements are keyboard accessible
+
+## Notes / Edge Cases
+- The card is `display: block` and takes full width of its container by default
+- **Hover effect**: Translates the card upward by 3px (`translateY(-3px)`) and increases shadow depth
+- **Animation**: Uses `transition: transform 0.2s ease, box-shadow 0.2s ease`
+- **Motion preferences**: When `prefers-reduced-motion: reduce`, both hover transform and transitions are disabled
+- The card has consistent padding on all sides via `--rel-spacing-space-md`
+- The internal `.card` wrapper is where all styling is applied
+- The component provides no default content styling—you control the layout of slotted elements
+- Works well with CSS Grid or Flexbox for creating card layouts

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

@@ -6,14 +6,14 @@ export class RelCard extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
 
     .card {
-      background-color: var(--rel-colors-white);
+      background-color: var(--rel-colors-white, #fff);
+      color: var(--rel-text-primary, #333);
       border-radius: var(--rel-borders-radius-border-radius-300);
       padding: var(--rel-spacing-space-md);
-
       box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
@@ -22,6 +22,15 @@ export class RelCard extends LitElement {
       transform: translateY(-3px);
       box-shadow: var(--rel-shadows-shadow-300);
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card {
+        transition: none;
+      }
+      .card:hover {
+        transform: none;
+      }
+    }
   `;
 
   render() {