@reliability-design/web 1.3.0 → 1.4.0

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

@@ -64,17 +64,17 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ### Font Tokens
-- `--rel-fontSizes-lg` - Title font size (20px)
-- `--rel-fontSizes-md` - Body font size (14px)
-- `--rel-fontWeights-medium` - Title font weight (500)
+- `--rel-body-xl-regular-font-size` - Title font size (20px)
+- `--rel-body-md-regular-font-size` - Body font size (14px)
+- `--rel-fonts-weight-body-medium` - Title font weight (500)
 
 ### Color Tokens
-- `--rel-colors-white` - Background color
-- `--rel-text-heading` - Title text color
-- `--rel-text-primary` - Body text color, icon stroke color
+- `--rel-bg-surface` - Background color
+- `--rel-text-label` - Title text color
+- `--rel-text-default` - Body text color, icon stroke color
 - `--rel-border-default` - Border color
 - `--rel-border-info` - Focus outline color
 
@@ -82,12 +82,12 @@ None exposed.
 - `--rel-shadows-shadow-100` - Shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius (8px)
+- `--rel-border-radius-sm` - Border radius (8px)
 
 ### Spacing Tokens
-- `--rel-spacing-space-md` - Header horizontal padding, body horizontal padding in closed state (16px)
-- `--rel-spacing-space-xl` - Body top padding when open (24px)
-- `--rel-spacing-space-lg` - Body bottom padding when open (20px)
+- `--rel-spacing-md` - Header horizontal padding, body horizontal padding in closed state (16px)
+- `--rel-spacing-xl` - Body top padding when open (24px)
+- `--rel-spacing-lg` - Body bottom padding when open (20px)
 
 ## Accessibility
 - Header uses `role="button"` and `aria-expanded` attribute
@@ -117,7 +117,7 @@ None exposed.
 
 - **Body rendering**: The slotted content is always in the DOM (not conditionally rendered), but hidden via `max-height: 0` and `overflow: hidden` when closed
 
-- The header has hover styling (`background: --rel-surface-surface`)
+- The header has hover styling (`background: --rel-bg-neutral-elevated-1`)
 
 - The component is `display: block` and `width: 100%`
 
@@ -125,7 +125,7 @@ None exposed.
 
 - The chevron icon is an inline SVG (9-point downward-pointing chevron)
 
-- When closed, the body has `padding: 0 var(--rel-spacing-space-md)` to maintain horizontal padding
+- When closed, the body has `padding: 0 var(--rel-spacing-md)` to maintain horizontal padding
 
 - The `open` attribute is reflected in HTML when set
 

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

@@ -1,4 +1,3 @@
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -10,18 +9,35 @@ export class RelAccordion extends LitElement {
   @property({ type: String, reflect: true }) size: "md" | "sm" = "md";
   @property({ type: String, reflect: true }) type: "default" | "action" = "default";
 
+  /** Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. */
+  @property({ type: String, reflect: true }) appearance: "shadow" | "plain" = "shadow";
+
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
       width: 100%;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fonts-font-family, sans-serif);
     }
 
     .accordion {
-      background: var(--rel-color-bg-primary, #ffffff);
-      border-radius: 8px;
+      background: var(--rel-bg-neutral);
+      border-radius: var(--rel-border-radius-sm);
+      border: 1px solid var(--rel-border-subtle);
       overflow: hidden;
-      box-shadow: 0 2px 4px rgba(11, 11, 11, 0.1);
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    /* Figma Style=Shadow: elevation only, no visible border */
+    :host([appearance="shadow"]) .accordion {
+      border-color: transparent;
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    /* Figma Style=Plain: flat — border, no elevation */
+    :host([appearance="plain"]) .accordion {
+      border-color: var(--rel-border-subtle);
+      box-shadow: none;
     }
 
     /* ── Header ───────────────────────────────────────────────── */
@@ -38,21 +54,21 @@ export class RelAccordion extends LitElement {
     }
 
     :host([size="md"]) .header {
-      padding: 8px 8px 8px 16px;
+      padding: var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-md);
       min-height: 56px;
     }
 
     :host([size="sm"]) .header {
-      padding: 8px 8px 8px 12px;
+      padding: var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-sm);
       min-height: 48px;
     }
 
     .header:hover {
-      background: var(--rel-color-bg-secondary, #f5f5f5);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .header:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
     }
 
@@ -61,24 +77,41 @@ export class RelAccordion extends LitElement {
     .title-row {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--rel-spacing-xs);
       flex: 1;
     }
 
     .title {
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-color-text-default, #0b0b0b);
-      letter-spacing: -0.3px;
+      font-weight: var(--rel-headings-md-font-weight);
+      color: var(--rel-text-default);
     }
 
     :host([size="md"]) .title {
-      font-size: var(--rel-fontSizes-lg, 20px);
-      line-height: 28px;
+
+      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);
+
     }
 
     :host([size="sm"]) .title {
-      font-size: 16px;
-      line-height: 24px;
+
+      font-family: var(--rel-headings-sm-font-family);
+
+      font-weight: var(--rel-headings-sm-font-weight);
+
+      font-size: var(--rel-headings-sm-font-size);
+
+      line-height: var(--rel-headings-sm-line-height);
+
+      letter-spacing: var(--rel-headings-sm-letter-spacing);
+
     }
 
     /* ── Leading icon (action type) ───────────────────────────── */
@@ -88,7 +121,7 @@ export class RelAccordion extends LitElement {
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      color: var(--rel-color-text-default, #0b0b0b);
+      color: var(--rel-text-default);
     }
 
     .leading-icon ::slotted(svg) {
@@ -138,7 +171,7 @@ export class RelAccordion extends LitElement {
     .chevron rel-icon,
     .chevron ::slotted(rel-icon) {
       --rel-icon-size: 24px;
-      color: var(--rel-color-text-default, #0b0b0b);
+      color: var(--rel-action-neutral-label-icons-ghost);
     }
 
     :host([size="sm"]) .chevron ::slotted(svg) {
@@ -177,53 +210,55 @@ export class RelAccordion extends LitElement {
     .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);
+      padding: 0 var(--rel-spacing-md);
+      color: var(--rel-text-body);
       transition:
         max-height 0.25s ease,
         padding 0.2s 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);
     }
 
     :host([size="sm"]) .body {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      line-height: 20px;
+
+      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);
+
     }
 
     .body.open {
       max-height: 1000px;
-      padding: 4px 16px 16px;
+      scroll-margin-top: var(--rel-spacing-xl);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-md) var(--rel-spacing-lg);
     }
 
     /* ── 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);
+      color: var(--rel-text-default);
     }
 
     :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);
+      color: var(--rel-text-default);
     }
 
     :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);
+      color: var(--rel-text-default);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -248,9 +283,9 @@ export class RelAccordion extends LitElement {
 
   render() {
     return html`
-      <div class="accordion">
+      <div part="base" class="accordion">
         <div
-          class="header"
+          part="trigger" class="header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
@@ -262,7 +297,7 @@ export class RelAccordion extends LitElement {
             }
           }}
         >
-          <div class="title-row">
+          <div part="label" class="title-row">
             ${this.type === "action"
               ? html`<span class="leading-icon">
                   <slot name="icon">
@@ -272,7 +307,7 @@ export class RelAccordion extends LitElement {
               : ""}
             <span class="title">${this.title}</span>
           </div>
-          <div class="chevron">
+          <div part="icon" class="chevron">
             <slot name="trailing-icon">
               ${this.type === "default"
                 ? html`<span class="chevron-rotate"><rel-icon name="chevron-down"></rel-icon></span>`
@@ -280,7 +315,7 @@ export class RelAccordion extends LitElement {
             </slot>
           </div>
         </div>
-        <div class="body ${this.open ? "open" : ""}">
+        <div part="content" class="body ${this.open ? "open" : "closed"}">
           <slot></slot>
         </div>
       </div>

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

@@ -92,27 +92,27 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Primary message font size
-- `--rel-fontSizes-sm` - Secondary message and link font size
-- `--rel-fontWeights-medium` - Primary message and link font weight
-- `--rel-fontWeights-semibold` - Used implicitly in link styling
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Primary message font size
+- `--rel-body-sm-regular-font-size` - Secondary message and link font size
+- `--rel-fonts-weight-body-medium` - Primary message and link font weight
+- `--rel-fonts-weight-body-semibold` - Used implicitly in link styling
 
 ### Spacing Tokens
-- `--rel-spacing-space-xs` - Gap between icon and content
-- `--rel-spacing-space-sm` - Vertical padding
-- `--rel-spacing-space-md` - Horizontal padding
-- `--rel-spacing-space-2xs` - Close button padding
+- `--rel-spacing-xs` - Gap between icon and content
+- `--rel-spacing-sm` - Vertical padding
+- `--rel-spacing-md` - Horizontal padding
+- `--rel-spacing-2xs` - Close button padding
 
 ### Color Tokens (by type)
-- **info**: `--rel-background-info` (background), `--rel-text-info` (text), `--rel-icon-info` (icon)
-- **success**: `--rel-background-success`, `--rel-text-success`, `--rel-icon-success`
-- **warning**: `--rel-background-warning`, `--rel-text-warning`, `--rel-icon-warning`
-- **error**: `--rel-background-error`, `--rel-text-error`, `--rel-icon-error`
-- **neutral**: `--rel-colors-white` (background), `--rel-text-primary` (text), `--rel-colors-black` (icon), `--rel-border-default` (border)
+- **info**: `--rel-bg-info-light` (background), `--rel-text-info` (text), `--rel-text-info` (icon)
+- **success**: `--rel-bg-success-light`, `--rel-text-success`, `--rel-text-success`
+- **warning**: `--rel-bg-warning-light`, `--rel-text-warning`, `--rel-text-warning`
+- **error**: `--rel-bg-danger-light`, `--rel-text-error`, `--rel-text-danger`
+- **neutral**: `--rel-bg-surface` (background), `--rel-text-default` (text), `--rel-text-default` (icon), `--rel-border-default` (border)
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius
+- `--rel-border-radius-sm` - Border radius
 
 ## Accessibility
 - Uses `role="alert"` for screen reader announcements