@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,150 +1,289 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-accordion")
-export class RelAccordion extends LitElement {
-  @property({ type: String }) title = "Accordion";
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-    }
-
-    .accordion {
-      background: var(--rel-colors-white, #fff);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      box-shadow: var(--rel-shadows-shadow-100);
-      overflow: hidden;
-    }
-
-    /* HEADER --------------------------------------------------- */
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: var(--rel-spacing-space-md, 16px);
-      cursor: pointer;
-      user-select: none;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-    }
-
-    .header:hover {
-      background: var(--rel-surface-surface, #f5f5f5);
-    }
-
-    :host([open]) .header:hover {
-      background: transparent;
-    }
-
-    .header:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
-      outline-offset: -2px;
-    }
-
-    .title {
-      font-size: var(--rel-fontSizes-lg, 20px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-heading, #2b2b2b);
-    }
-
-    /* ICON ----------------------------------------------------- */
-    .icon {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: transform 0.25s ease;
-    }
-
-    .icon svg {
-      width: 20px;
-      height: 20px;
-      stroke: var(--rel-text-primary, #333);
-      stroke-width: 2;
-      fill: none;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-
-    .icon.rotated {
-      transform: rotate(180deg);
-    }
-
-    /* BODY ------------------------------------------------------ */
-    .body {
-      overflow: hidden;
-      max-height: 0;
-      padding: 0 var(--rel-spacing-space-md, 16px);
-      font-size: var(--rel-fontSizes-md, 14px);
-      color: var(--rel-text-primary, #333);
-      transition: max-height 0.25s ease, padding 0.2s ease;
-    }
-
-    .body.open {
-      max-height: 1000px;
-      padding: var(--rel-spacing-space-xl, 24px) var(--rel-spacing-space-md, 16px)
-        var(--rel-spacing-space-lg, 20px);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .icon,
-      .body {
-        transition: none;
-      }
-    }
-  `;
-
-  private toggle() {
-    this.open = !this.open;
-
-    this.dispatchEvent(
-      new CustomEvent<boolean>("open-change", {
-        detail: this.open,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private chevron() {
-    return html`
-      <svg viewBox="0 0 24 24">
-        <polyline points="6 9 12 15 18 9"></polyline>
-      </svg>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="accordion">
-        <div class="header"
-          role="button"
-          tabindex="0"
-          aria-expanded="${this.open}"
-          @click=${this.toggle}
-          @keydown=${(e: KeyboardEvent) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              this.toggle();
-            }
-          }}>
-          <div class="title">${this.title}</div>
-
-          <div class="icon ${this.open ? "rotated" : ""}">
-            ${this.chevron()}
-          </div>
-        </div>
-
-        <!-- IMPORTANT: slot is ALWAYS rendered -->
-        <div class="body ${this.open ? "open" : ""}">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-accordion")
+export class RelAccordion extends LitElement {
+  @property({ type: String }) title = "Accordion";
+  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: String, reflect: true }) size: "md" | "sm" = "md";
+  @property({ type: String, reflect: true }) type: "default" | "action" = "default";
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+    }
+
+    .accordion {
+      background: var(--rel-color-bg-primary, #ffffff);
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(11, 11, 11, 0.1);
+    }
+
+    /* ── Header ───────────────────────────────────────────────── */
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      box-sizing: border-box;
+      /* matches .accordion's radius so the focus-visible outline isn't clipped square at the corners by the parent's overflow:hidden */
+      border-radius: 8px;
+    }
+
+    :host([size="md"]) .header {
+      padding: 8px 8px 8px 16px;
+      min-height: 56px;
+    }
+
+    :host([size="sm"]) .header {
+      padding: 8px 8px 8px 12px;
+      min-height: 48px;
+    }
+
+    .header:hover {
+      background: var(--rel-color-bg-secondary, #f5f5f5);
+    }
+
+    .header:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: -2px;
+    }
+
+    /* ── Title row ────────────────────────────────────────────── */
+
+    .title-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    .title {
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-color-text-default, #0b0b0b);
+      letter-spacing: -0.3px;
+    }
+
+    :host([size="md"]) .title {
+      font-size: var(--rel-fontSizes-lg, 20px);
+      line-height: 28px;
+    }
+
+    :host([size="sm"]) .title {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    /* ── Leading icon (action type) ───────────────────────────── */
+
+    .leading-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--rel-color-text-default, #0b0b0b);
+    }
+
+    .leading-icon ::slotted(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    .leading-icon rel-icon,
+    .leading-icon ::slotted(rel-icon) {
+      --rel-icon-size: 24px;
+    }
+
+    :host([size="sm"]) .leading-icon ::slotted(svg) {
+      width: 20px;
+      height: 20px;
+    }
+
+    :host([size="sm"]) .leading-icon rel-icon,
+    :host([size="sm"]) .leading-icon ::slotted(rel-icon) {
+      --rel-icon-size: 20px;
+    }
+
+    /* ── Chevron ──────────────────────────────────────────────── */
+
+    .chevron {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    :host([size="md"]) .chevron {
+      width: 40px;
+      height: 40px;
+    }
+
+    :host([size="sm"]) .chevron {
+      width: 32px;
+      height: 32px;
+    }
+
+    .chevron ::slotted(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    .chevron rel-icon,
+    .chevron ::slotted(rel-icon) {
+      --rel-icon-size: 24px;
+      color: var(--rel-color-text-default, #0b0b0b);
+    }
+
+    :host([size="sm"]) .chevron ::slotted(svg) {
+      width: 20px;
+      height: 20px;
+    }
+
+    :host([size="sm"]) .chevron rel-icon,
+    :host([size="sm"]) .chevron ::slotted(rel-icon) {
+      --rel-icon-size: 20px;
+    }
+
+    /* ── Icon rotation ────────────────────────────────────────── */
+    /* Only the shadow-DOM fallback wrappers rotate on open.
+       Slotted (light-DOM) icons are never targeted, so they stay static. */
+
+    .icon-rotate-on-open,
+    .chevron-rotate {
+      display: inline-flex;
+      align-items: center;
+      transition: transform 0.25s ease;
+    }
+
+    /* Leading fallback chevron: 90° (points right when open) */
+    :host([open]) .icon-rotate-on-open {
+      transform: rotate(90deg);
+    }
+
+    /* Trailing fallback chevron (type="default" only): 180° flip */
+    :host([open]) .chevron-rotate {
+      transform: rotate(180deg);
+    }
+
+    /* ── Body ─────────────────────────────────────────────────── */
+
+    .body {
+      overflow: hidden;
+      max-height: 0;
+      padding: 0 16px;
+      font-size: var(--rel-fontSizes-md, 14px);
+      line-height: 22px;
+      /* Figma spec value — --rel-color-text-secondary resolves to #9e9e9e (gray-disabled-text), not this */
+      color: var(--rel-accordion-body-color, #525252);
+      transition:
+        max-height 0.25s ease,
+        padding 0.2s ease;
+    }
+
+    :host([size="sm"]) .body {
+      font-size: var(--rel-fontSizes-sm, 12px);
+      line-height: 20px;
+    }
+
+    .body.open {
+      max-height: 1000px;
+      padding: 4px 16px 16px;
+    }
+
+    /* ── Dark mode ────────────────────────────────────────────── */
+
+    :host-context([data-theme="dark"]) .accordion,
+    [data-theme="dark"] .accordion {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    :host-context([data-theme="dark"]) .title,
+    [data-theme="dark"] .title {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .chevron rel-icon,
+    [data-theme="dark"] .chevron rel-icon,
+    :host-context([data-theme="dark"]) .chevron ::slotted(rel-icon),
+    [data-theme="dark"] .chevron ::slotted(rel-icon) {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .leading-icon,
+    [data-theme="dark"] .leading-icon {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .body,
+    [data-theme="dark"] .body {
+      color: var(--rel-accordion-body-color-dark, #a3a3a3);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .icon-rotate-on-open,
+      .chevron-rotate,
+      .body {
+        transition: none;
+      }
+    }
+  `;
+
+  private toggle() {
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent<boolean>("open-change", {
+        detail: this.open,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <div class="accordion">
+        <div
+          class="header"
+          role="button"
+          tabindex="0"
+          aria-expanded="${this.open}"
+          @click=${this.toggle}
+          @keydown=${(e: KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              this.toggle();
+            }
+          }}
+        >
+          <div class="title-row">
+            ${this.type === "action"
+              ? html`<span class="leading-icon">
+                  <slot name="icon">
+                    <span class="icon-rotate-on-open"><rel-icon name="chevron-right"></rel-icon></span>
+                  </slot>
+                </span>`
+              : ""}
+            <span class="title">${this.title}</span>
+          </div>
+          <div class="chevron">
+            <slot name="trailing-icon">
+              ${this.type === "default"
+                ? html`<span class="chevron-rotate"><rel-icon name="chevron-down"></rel-icon></span>`
+                : html`<rel-icon name="arrow-expansion"></rel-icon>`}
+            </slot>
+          </div>
+        </div>
+        <div class="body ${this.open ? "open" : ""}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -89,101 +90,100 @@ export class RelAlert extends LitElement {
       opacity: 1;
     }
 
-    /* COLORS — light mode (pinned Figma hex) */
+    /* COLORS — light mode */
     .alert-neutral {
-      background: #ffffff;
-      color: #000000;
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
     }
 
     .alert-info {
-      background: #E1F2FF;
-      color: #000000;
-      --rel-icon-info: #0059F4;
+      background: var(--rel-background-info);
+      color: var(--rel-color-text-primary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
     }
 
     .alert-success {
-      background: #E2FEEE;
-      color: #000000;
-      --rel-icon-success: #00A86B;
+      background: var(--rel-background-success);
+      color: var(--rel-color-text-primary);
+      --rel-icon-success: var(--rel-success-surface-dark);
     }
 
     .alert-warning {
-      background: #F6EFD7;
-      color: #000000;
-      --rel-icon-warning: #F2915C;
+      background: var(--rel-colors-gold-light);
+      color: var(--rel-color-text-primary);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
     }
 
     .alert-error {
-      background: #FFDEDE;
-      color: #9C1E33;
-      --rel-icon-error: #9C1E33;
+      background: var(--rel-background-error-light);
+      color: var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
     }
 
     .alert-error .rel-close {
-      color: #000000;
+      color: var(--rel-color-text-primary);
     }
 
-    /* COLORS — dark mode (pinned Figma hex) */
+    /* COLORS — dark mode */
     :host-context([data-theme="dark"]) .rel-alert,
     :host-context(.dark) .rel-alert {
-      background: #2B2B2B;
-      color: #ffffff;
+      background: var(--rel-color-bg-tertiary);
+      color: var(--rel-color-text-primary);
       border: none;
     }
 
     :host-context([data-theme="dark"]) .rel-close,
     :host-context(.dark) .rel-close {
-      color: #ffffff;
+      color: var(--rel-color-text-primary);
     }
 
     :host-context([data-theme="dark"]) .alert-neutral,
     :host-context(.dark) .alert-neutral {
-      border: 1px solid #ffffff;
-      --rel-colors-black: #ffffff;
+      border: 1px solid var(--rel-color-border-strong);
     }
 
     :host-context([data-theme="dark"]) .alert-info,
     :host-context(.dark) .alert-info {
-      border: 1px solid #0059F4;
-      --rel-icon-info: #0059F4;
+      border: 1px solid var(--rel-colors-blue-tertiary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
     }
 
     :host-context([data-theme="dark"]) .alert-info .rel-message2,
     :host-context(.dark) .alert-info .rel-message2 {
-      color: #0059F4;
+      color: var(--rel-colors-blue-tertiary);
     }
 
     :host-context([data-theme="dark"]) .alert-warning,
     :host-context(.dark) .alert-warning {
-      border: 1px solid #F2915C;
-      --rel-icon-warning: #F2915C;
+      border: 1px solid var(--rel-warning-surface-dark);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-warning .rel-message2,
     :host-context(.dark) .alert-warning .rel-message2 {
-      color: #F2915C;
+      color: var(--rel-warning-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-success,
     :host-context(.dark) .alert-success {
-      border: 1px solid #00A86B;
-      --rel-icon-success: #00A86B;
+      border: 1px solid var(--rel-success-surface-dark);
+      --rel-icon-success: var(--rel-success-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-success .rel-message2,
     :host-context(.dark) .alert-success .rel-message2 {
-      color: #00A86B;
+      color: var(--rel-success-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-error,
     :host-context(.dark) .alert-error {
-      border: 1px solid #9C1E33;
-      --rel-icon-error: #9C1E33;
+      border: 1px solid var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-error .rel-message2,
     :host-context(.dark) .alert-error .rel-message2 {
-      color: #9C1E33;
+      color: var(--rel-error-surface-dark);
     }
   `;
 

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

@@ -1,7 +1,7 @@
 # rel-avatar
 
 ## Overview
-A circular avatar component supporting three display types: image, text initials, or custom icon content. Provides four size variants with automatic text transformation and SVG sizing for icons.
+A circular avatar component supporting three display types: image, text initials, or custom icon content. Provides four size variants and three style variants (fill, subtle, outline), with automatic text transformation and SVG sizing for icons.
 
 ## Usage
 ```html
@@ -31,6 +31,11 @@ A circular avatar component supporting three display types: image, text initials
 <rel-avatar type="text" text="MD" size="md"></rel-avatar>
 <rel-avatar type="text" text="LG" size="lg"></rel-avatar>
 
+<!-- Style variants -->
+<rel-avatar type="text" text="AA" variant="fill"></rel-avatar>
+<rel-avatar type="text" text="AA" variant="subtle"></rel-avatar>
+<rel-avatar type="text" text="AA" variant="outline"></rel-avatar>
+
 <!-- User list with avatars -->
 <div style="display: flex; gap: 8px; align-items: center;">
   <rel-avatar type="image" src="user1.jpg" size="sm"></rel-avatar>
@@ -52,9 +57,11 @@ A circular avatar component supporting three display types: image, text initials
 |------|------|---------|-------------|
 | `size` (reflected) | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` | Avatar size variant |
 | `type` (reflected) | `"image" \| "text" \| "icon"` | `"image"` | Display type |
+| `variant` (reflected) | `"fill" \| "subtle" \| "outline"` | `"fill"` | Style variant |
 | `src` | `string` | `""` | Image URL (for `type="image"`) |
 | `text` | `string` | `""` | Text content (for `type="text"`, usually initials) |
 | `alt` | `string` | `"Avatar"` | Alt text for the image |
+| `bg` | `string` | `""` | Direct CSS background-color override (any valid CSS color), takes precedence over `variant` |
 
 ## Events
 None.
@@ -79,9 +86,13 @@ None exposed.
 - `--rel-fontSizes-xs` - Extra small avatar text size
 - `--rel-fontWeights-bold` - Text font weight
 
-### Color Tokens
-- `--rel-colors-gray-heading` - Avatar background color
-- `--rel-colors-white` - Text/icon color
+### Color Tokens (by variant)
+- **fill** (default): `--rel-avatar-bg-fill` (default `--rel-colors-gray-disabled-text`), `--rel-avatar-color-fill` (default `#ffffff`)
+- **subtle**: `--rel-avatar-bg-subtle` (default `--rel-color-bg-tertiary`), `--rel-avatar-color-subtle` (default `--rel-color-text-heading`)
+- **outline**: `--rel-avatar-bg-outline` (default `--rel-color-bg-primary`), `--rel-avatar-border-outline` (default `--rel-color-border-default`), `--rel-avatar-color-outline` (default `--rel-color-text-heading`)
+- `--rel-borders-width-stroke-100` - Border width (all variants; `fill`/`subtle` use a transparent border to keep sizing consistent)
+
+All of the above semantic tokens (`--rel-color-bg-*`, `--rel-color-text-heading`, `--rel-color-border-*`, `--rel-colors-gray-disabled-text`) have dark-mode overrides defined in `vars-v2.css` under `:root[data-theme="dark"]`, so all three variants automatically adapt to dark mode with no extra configuration.
 
 ## Accessibility
 - Image avatars include `alt` attribute for screen readers