@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,565 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { announce } from "../../utils/announce";
-
-interface CalendarDay {
-  date: Date;
-  day: number;
-  isCurrentMonth: boolean;
-  isToday: boolean;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isWeekend: 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-fonts-font-family, sans-serif);
-      background: var(--rel-bg-neutral);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      padding: var(--rel-spacing-md, 16px);
-      max-width: 320px;
-      color: var(--rel-text-default);
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    /* Block interaction on the inner controls (JS also guards clicks), but keep
-       pointer-events on the host so its not-allowed cursor shows through. */
-    :host([disabled]) .day-button,
-    :host([disabled]) .nav-button {
-      pointer-events: none;
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--rel-spacing-sm);
-    }
-
-    .header-center {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      color: var(--rel-text-label);
-      font-family: var(--rel-body-lg-semibold-font-family);
-      font-weight: var(--rel-body-lg-semibold-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);
-    }
-
-    .nav-button {
-      background: transparent;
-      border: none;
-      width: 32px;
-      height: 32px;
-      border-radius: var(--rel-border-radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      transition: background-color 0.15s ease;
-    }
-
-    .nav-button:hover {
-      background: var(--rel-bg-neutral-elevated-2);
-    }
-
-    .nav-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .calendar-week {
-      grid-column: 1 / -1;
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .weekday {
-      text-align: center;
-      color: var(--rel-text-placeholder);
-      padding: var(--rel-spacing-xs);
-      text-transform: uppercase;
-      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);
-    }
-
-    .day-button {
-      aspect-ratio: 1;
-      border: none;
-      background: transparent;
-      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-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);
-    }
-
-    .day-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    /* Weekend (Figma Day of a week=Weekend): same color at 70% — full opacity when selected */
-    .day-button.weekend:not(.selected) {
-      opacity: 0.7;
-    }
-
-    .day-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
-    .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-border-brand);
-    }
-
-    .day-button.selected {
-      background: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-    }
-
-    .day-button.other-month {
-      color: var(--rel-text-placeholder);
-      opacity: 0.5;
-    }
-
-    .day-button:disabled {
-      color: var(--rel-text-disabled);
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .day-button:disabled:hover {
-      background: transparent;
-    }
-
-    :host-context([data-theme="dark"]) :host,
-    :host-context(.dark) :host {
-      background: var(--rel-bg-neutral);
-      border-color: var(--rel-border-default);
-    }
-  `;
-
-  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),
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    // 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),
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    // 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),
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    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 dayLabelFormatter: Intl.DateTimeFormat | null = null;
-  private dayLabelLocale = "";
-
-  private formatDayLabel(date: Date): string {
-    if (!this.dayLabelFormatter || this.dayLabelLocale !== this.locale) {
-      this.dayLabelLocale = this.locale;
-      this.dayLabelFormatter = new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-      });
-    }
-    return this.dayLabelFormatter.format(date);
-  }
-
-  private announceMonth() {
-    announce(`${this.getMonthName()} ${this.viewYear}`);
-  }
-
-  private previousMonth() {
-    if (this.viewMonth === 0) {
-      this.viewMonth = 11;
-      this.viewYear--;
-    } else {
-      this.viewMonth--;
-    }
-    this.announceMonth();
-  }
-
-  private nextMonth() {
-    if (this.viewMonth === 11) {
-      this.viewMonth = 0;
-      this.viewYear++;
-    } else {
-      this.viewMonth++;
-    }
-    this.announceMonth();
-  }
-
-  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--;
-          this.announceMonth();
-        } else {
-          this.previousMonth();
-        }
-        return;
-      case "PageDown":
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.viewYear++;
-          this.announceMonth();
-        } 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();
-        }
-      });
-    }
-  }
-
-  /**
-   * Index of the single grid cell carrying tabindex="0". The old expression
-   * (`isSelected || (index === 0 && !focusedDate)`) left the grid with ZERO
-   * tab stops once the user arrowed around without a selection — Tab could
-   * never re-enter the calendar.
-   */
-  private getRovingIndex(days: CalendarDay[]): number {
-    const candidates = [
-      this.focusedDate
-        ? days.findIndex(
-            (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate!)
-          )
-        : -1,
-      days.findIndex((d) => d.isSelected),
-      days.findIndex((d) => d.isCurrentMonth && d.isToday),
-      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled),
-    ];
-    const found = candidates.find((i) => i >= 0);
-    return found ?? 0;
-  }
-
-  render() {
-    const days = this.getCalendarDays();
-    const weekdayLabels = this.getWeekdayLabels();
-    const rovingIndex = this.getRovingIndex(days);
-    const weeks: CalendarDay[][] = [];
-    for (let i = 0; i < days.length; i += 7) {
-      weeks.push(days.slice(i, i + 7));
-    }
-
-    return html`
-      <div>
-        <div part="header" class="header">
-          <button
-            part="action" 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 part="label" class="header-center">
-            <span>${this.getMonthName()}</span>
-            <span>${this.viewYear}</span>
-          </div>
-
-          <button
-            part="action" 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 role="grid" aria-label="${this.getMonthName()} ${this.viewYear}">
-        <div part="list" class="calendar-grid" role="row">
-          ${weekdayLabels.map(
-            (label) => html`
-              <div part="label" class="weekday" role="columnheader" aria-label="${label}">
-                ${label}
-              </div>
-            `
-          )}
-        </div>
-
-        <div part="list" class="calendar-grid" role="rowgroup">
-          ${weeks.map(
-            (week, weekIndex) => html`
-              <div class="calendar-week" role="row">
-                ${week.map((day, dayIndex) => {
-                  const index = weekIndex * 7 + dayIndex;
-                  return html`
-                    <button
-                      part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
-                        ? "today"
-                        : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
-                      role="gridcell"
-                      aria-label="${this.formatDayLabel(day.date)}"
-                      aria-selected="${day.isSelected}"
-                      aria-current=${day.isToday ? "date" : nothing}
-                      ?disabled=${day.isDisabled}
-                      @click=${() => this.selectDay(day)}
-                      @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
-                      tabindex="${index === rovingIndex ? 0 : -1}"
-                    >
-                      ${day.day}
-                    </button>
-                  `;
-                })}
-              </div>
-            `
-          )}
-        </div>
-        </div>
-      </div>
-    `;
-  }
-}

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

@@ -1,88 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-card")
-export class RelCard extends LitElement {
-  /**
-   * Figma "Type" axis: custom (default) renders slotted content with card
-   * padding; media adds a flush media region (slot name="media") above the
-   * content — pair it with <rel-card-media>.
-   */
-  @property({ type: String, reflect: true })
-  type: "custom" | "media" = "custom";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-body-lg-regular-font-family);
-    }
-
-    /* Default typography for slotted card content (Figma card roles) */
-    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
-      font-family: var(--rel-headings-md-font-family);
-      font-weight: var(--rel-headings-md-font-weight);
-      font-size: var(--rel-headings-md-font-size);
-      line-height: var(--rel-headings-md-line-height);
-      letter-spacing: var(--rel-headings-md-letter-spacing);
-      color: var(--rel-text-default);
-      margin: 0 0 var(--rel-spacing-2xs) 0;
-    }
-
-    ::slotted(p) {
-      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);
-      color: var(--rel-text-body);
-      margin: 0 0 var(--rel-spacing-xs) 0;
-    }
-
-    .card {
-      background-color: var(--rel-bg-surface);
-      color: var(--rel-text-default);
-      border-radius: var(--rel-border-radius-sm);
-      border: 1px solid var(--rel-border-default);
-      padding: var(--rel-spacing-lg) var(--rel-spacing-md);
-    }
-
-    /* Media type: media sits flush against the card edges, content keeps padding */
-    :host([type="media"]) .card {
-      padding: 0;
-      overflow: hidden;
-    }
-
-    .media {
-      display: block;
-    }
-
-    .media ::slotted(*) {
-      display: block;
-      width: 100%;
-    }
-
-    :host([type="media"]) .content {
-      padding: var(--rel-spacing-lg) var(--rel-spacing-md);
-    }
-
-    :host-context([data-theme="dark"]) .card,
-    :host-context(.dark) .card {
-      background-color: var(--rel-bg-surface);
-      border-color: var(--rel-border-default);
-    }
-  `;
-
-  render() {
-    return html`
-      <div part="base" class="card">
-        ${this.type === "media"
-          ? html`<div part="header" class="media"><slot name="media"></slot></div>`
-          : nothing}
-        <div part="content" class="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}