@reliability-design/web 1.3.1 → 1.4.1

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 interface CalendarDay {
   date: Date;
@@ -9,6 +8,7 @@ interface CalendarDay {
   isToday: boolean;
   isSelected: boolean;
   isDisabled: boolean;
+  isWeekend: boolean;
 }
 
 @customElement("rel-calendar")
@@ -30,17 +30,24 @@ export class RelCalendar extends LitElement {
   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);
+      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-primary, #333);
+      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;
     }
 
@@ -48,16 +55,19 @@ export class RelCalendar extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: var(--rel-spacing-space-md);
+      margin-bottom: var(--rel-spacing-sm);
     }
 
     .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);
+      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 {
@@ -65,75 +75,85 @@ export class RelCalendar 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-action-neutral-label-icons-ghost);
       transition: background-color 0.15s ease;
     }
 
     .nav-button:hover {
-      background: var(--rel-color-bg-secondary);
+      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     .weekday {
       text-align: center;
-      font-size: var(--rel-fontSizes-xs);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-gray-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-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-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-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-surface-secondary);
+      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-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-color-brand);
+      border: 2px solid var(--rel-border-brand);
     }
 
     .day-button.selected {
-      background: var(--rel-color-brand);
-      color: #000000;
-      font-weight: var(--rel-fontWeights-semibold);
+      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-gray-text-placeholder);
+      color: var(--rel-text-placeholder);
       opacity: 0.5;
     }
 
@@ -149,8 +169,8 @@ export class RelCalendar extends LitElement {
 
     :host-context([data-theme="dark"]) :host,
     :host-context(.dark) :host {
-      background: var(--rel-color-bg-primary);
-      border-color: var(--rel-color-border-default);
+      background: var(--rel-bg-neutral);
+      border-color: var(--rel-border-default);
     }
   `;
 
@@ -239,6 +259,7 @@ export class RelCalendar extends LitElement {
         isToday: this.isSameDay(date, today),
         isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
         isDisabled: this.isDateDisabledInternal(date),
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -252,6 +273,7 @@ export class RelCalendar extends LitElement {
         isToday: this.isSameDay(date, today),
         isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
         isDisabled: this.isDateDisabledInternal(date),
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -266,6 +288,7 @@ export class RelCalendar extends LitElement {
         isToday: this.isSameDay(date, today),
         isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
         isDisabled: this.isDateDisabledInternal(date),
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -409,9 +432,9 @@ export class RelCalendar extends LitElement {
 
     return html`
       <div role="grid" aria-label="Calendar">
-        <div class="header">
+        <div part="header" class="header">
           <button
-            class="nav-button"
+            part="action" class="nav-button"
             @click=${this.previousMonth}
             aria-label="Previous month"
             ?disabled=${this.disabled}
@@ -421,13 +444,13 @@ export class RelCalendar extends LitElement {
             </svg>
           </button>
 
-          <div class="header-center">
+          <div part="label" class="header-center">
             <span>${this.getMonthName()}</span>
             <span>${this.viewYear}</span>
           </div>
 
           <button
-            class="nav-button"
+            part="action" class="nav-button"
             @click=${this.nextMonth}
             aria-label="Next month"
             ?disabled=${this.disabled}
@@ -438,27 +461,27 @@ export class RelCalendar extends LitElement {
           </button>
         </div>
 
-        <div class="calendar-grid" role="row">
+        <div part="list" class="calendar-grid" role="row">
           ${weekdayLabels.map(
             (label) => html`
-              <div class="weekday" role="columnheader" aria-label="${label}">
+              <div part="label" class="weekday" role="columnheader" aria-label="${label}">
                 ${label}
               </div>
             `
           )}
         </div>
 
-        <div class="calendar-grid">
+        <div part="list" class="calendar-grid">
           ${days.map(
             (day, index) => html`
               <button
-                class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
+                part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
                   ? "today"
-                  : ""} ${!day.isCurrentMonth ? "other-month" : ""}"
+                  : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
                 role="gridcell"
                 aria-label="${this.formatISODate(day.date)}"
                 aria-selected="${day.isSelected}"
-                ?disabled=${day.isDisabled || (!day.isCurrentMonth && day.isDisabled)}
+                ?disabled=${day.isDisabled}
                 @click=${() => this.selectDay(day)}
                 @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
                 tabindex="${day.isSelected || (index === 0 && !this.focusedDate) ? 0 : -1}"

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

@@ -55,21 +55,21 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ### Color Tokens
-- `--rel-colors-white` - Card background color
-- `--rel-text-primary` - Text color
+- `--rel-bg-surface` - Card background color
+- `--rel-text-default` - 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
+- `--rel-border-radius-md` - Card border radius
 
 ### Spacing Tokens
-- `--rel-spacing-space-md` - Internal padding
+- `--rel-spacing-md` - Internal padding
 
 ## Accessibility
 - The card itself has no specific ARIA role (it's a generic container)
@@ -88,7 +88,7 @@ None exposed.
 - **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 card has consistent padding on all sides via `--rel-spacing-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

@@ -1,35 +1,88 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
-
-@customElement("rel-card")
-export class RelCard extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-    }
-
-    .card {
-      background-color: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      border: 1px solid var(--rel-color-border-default);
-      padding: var(--rel-spacing-space-md);
-    }
-
-    :host-context([data-theme="dark"]) .card,
-    :host-context(.dark) .card {
-      background-color: var(--rel-color-bg-primary);
-      border-color: var(--rel-color-border-default);
-    }
-  `;
-
-  render() {
-    return html`
-      <div class="card">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
+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>
+    `;
+  }
+}

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

@@ -79,25 +79,25 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Title font size
-- `--rel-fontSizes-sm` - Subtitle font size
-- `--rel-fontWeights-semibold` - Title font weight
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Title font size
+- `--rel-body-sm-regular-font-size` - Subtitle font size
+- `--rel-fonts-weight-body-semibold` - Title font weight
 
 ### Color Tokens
-- `--rel-colors-white` - Card background color
-- `--rel-text-primary` - General text color
-- `--rel-text-heading` - Title color
+- `--rel-bg-surface` - Card background color
+- `--rel-text-default` - General text color
+- `--rel-text-label` - Title 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
+- `--rel-border-radius-md` - Card border radius
 
 ### Spacing Tokens
-- `--rel-spacing-space-md` - Content area padding
+- `--rel-spacing-md` - Content area padding
 
 ## Accessibility
 - Image has `alt` attribute for screen reader support

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-card-media")
 export class RelCardMedia extends LitElement {
@@ -11,15 +10,16 @@ export class RelCardMedia extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fonts-font-family, sans-serif);
     }
 
     .card-media {
-      background-color: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      border: 1px solid var(--rel-color-border-default);
+      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);
       overflow: hidden;
     }
 
@@ -31,46 +31,53 @@ export class RelCardMedia extends LitElement {
     }
 
     .card-content {
-      padding: var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-md);
     }
 
     .card-content h3 {
-      margin: 0 0 4px 0;
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-color-text-heading);
+      margin: 0 0 4px 0;
+      color: var(--rel-text-label);
+      font-family: var(--rel-body-md-semibold-font-family);
+      font-weight: var(--rel-body-md-semibold-font-weight);
+      font-size: var(--rel-body-md-semibold-font-size);
+      line-height: var(--rel-body-md-semibold-line-height);
+      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
     }
 
     .card-content p {
-      margin: 0 0 8px 0;
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-color-text-primary);
+      margin: 0 0 8px 0;
+      color: var(--rel-text-default);
+      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);
     }
 
     :host-context([data-theme="dark"]) .card-media,
     :host-context(.dark) .card-media {
-      background-color: var(--rel-color-bg-primary);
-      border-color: var(--rel-color-border-default);
+      background-color: var(--rel-bg-surface);
+      border-color: var(--rel-border-default);
     }
 
     :host-context([data-theme="dark"]) .card-content h3,
     :host-context(.dark) .card-content h3 {
-      color: var(--rel-color-text-heading);
+      color: var(--rel-text-label);
     }
   `;
 
   render() {
     return html`
-      <div class="card-media">
+      <div part="base" class="card-media">
         ${this.imageSrc
           ? html`
-              <div class="card-image">
+              <div part="icon" class="card-image">
                 <img src=${this.imageSrc} alt=${this.imageAlt} />
               </div>
             `
           : null}
 
-        <div class="card-content">
+        <div part="content" class="card-content">
           ${this.title ? html`<h3>${this.title}</h3>` : null}
           ${this.subtitle ? html`<p>${this.subtitle}</p>` : null}
           <slot></slot>

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

@@ -140,12 +140,12 @@ Available parts:
 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-bg-*` / `--rel-text-*` / `--rel-border-*` semantic colors
 - `--rel-spacing-*` for spacing
 - `--rel-shadows-*` for shadows
 - `--rel-border-*` for borders
-- Focus outline uses `--rel-colors-blue-primary`
-- Active dot uses `--rel-colors-green-primary`
+- Focus outline uses `--rel-bg-info`
+- Active dot uses `--rel-bg-brand`
 
 ## Interaction