@reliability-design/web 1.3.0 → 1.4.0

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

@@ -98,25 +98,25 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Font size
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Font size
 
 ### Spacing Tokens
-- `--rel-spacing-space-sm` - Gap between elements
-- `--rel-spacing-space-md` - Padding
-- `--rel-spacing-space-2xs` - Close button padding and margin
+- `--rel-spacing-sm` - Gap between elements
+- `--rel-spacing-md` - Padding
+- `--rel-spacing-2xs` - Close button padding and margin
 
 ### Color Tokens
-- `--rel-surface-toast` - Default background color (dark gray)
-- `--rel-colors-red-secondary` - Error background color
-- `--rel-colors-white` - Text and focus outline color
-- `--rel-colors-green-primary` - Action button text color
+- `--rel-bg-neutral-inverse-1` - Default background color (dark gray)
+- `--rel-text-danger` - Error background color
+- `--rel-bg-surface` - Text and focus outline color
+- `--rel-bg-brand` - Action button text color
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-300` - Drop shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius
+- `--rel-border-radius-sm` - Border radius
 
 ## Accessibility
 - Uses `role="status"` and `aria-live="polite"` for screen reader announcements
@@ -144,5 +144,5 @@ None exposed.
 - The component includes a `fadeInUp` animation (20px translateY → 0, opacity 0 → 1) on appearance
 - Animation disabled when `prefers-reduced-motion: reduce` is set
 - When `visible` is false, `hidden` class applies `display: none`
-- **Type variants**: `default` uses `--rel-surface-toast`, `error` uses `--rel-colors-red-secondary` 
+- **Type variants**: `default` uses `--rel-bg-neutral-inverse-1`, `error` uses `--rel-text-danger` 
 - The toast appears inline-flex, so it sizes to content width

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 export type ToastType = "default" | "error";
 
@@ -17,6 +16,7 @@ export class RelToast extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       position: fixed;
       bottom: 24px;
       left: 50%;
@@ -26,27 +26,31 @@ export class RelToast extends LitElement {
       width: 100%;
       pointer-events: none;
       z-index: var(--rel-z-toast, 9000);
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     /* Toast container */
     .toast {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-sm);
-      background-color: var(--rel-color-text-primary);
-      color: var(--rel-color-bg-primary);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-md);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      padding: var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-xs);
+      background-color: var(--rel-bg-neutral-inverse-1);
+      color: var(--rel-text-inverse);
+      border-radius: var(--rel-border-radius-sm);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
       box-shadow: var(--rel-shadows-shadow-300);
       pointer-events: all;
       animation: fadeInUp 0.25s 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);
     }
 
     .toast.error {
-      background-color: var(--rel-error-surface-default);
+      background-color: var(--rel-bg-danger);
+      color: var(--rel-text-static-light);
     }
 
     .toast.hidden {
@@ -62,34 +66,39 @@ export class RelToast extends LitElement {
     .toast-action {
       background: transparent;
       border: none;
-      color: inherit;
-      font-weight: 600;
-      font-size: 0.85rem;
+      color: var(--rel-action-neutral-label-icons-fill-inverse);
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
       cursor: pointer;
       transition: opacity 0.2s;
-      font-family: var(--rel-fontFamilies-primary);
     }
 
     .toast-action:hover {
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-default);
       opacity: 0.75;
     }
 
     .toast-action:focus-visible {
-      outline: 2px solid #FFFFFF;
+      outline: 2px solid var(--rel-text-static-light);
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     /* Close button */
     .toast-close {
       background: transparent;
+      color: var(--rel-action-neutral-label-icons-ghost);
       border: none;
       color: inherit;
       font-size: 1rem;
       cursor: pointer;
       line-height: 1;
-      padding: var(--rel-spacing-space-2xs);
-      margin-left: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-2xs);
+      margin-left: var(--rel-spacing-2xs);
     }
 
     .toast-close:hover {
@@ -97,17 +106,11 @@ export class RelToast extends LitElement {
     }
 
     .toast-close:focus-visible {
-      outline: 2px solid #FFFFFF;
+      outline: 2px solid var(--rel-text-static-light);
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
-    /* Dark mode overrides */
-    :host-context([data-theme="dark"]) .toast.error,
-    :host-context(.dark) .toast.error {
-      background-color: var(--rel-error-surface-default);
-      color: #ffffff;
-    }
 
     @media (prefers-reduced-motion: reduce) {
       .toast {
@@ -182,19 +185,19 @@ export class RelToast extends LitElement {
 
   render() {
     return html`
-      <div class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
-        <span class="toast-message">${this.message}</span>
+      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
+        <span part="label" class="toast-message">${this.message}</span>
 
         ${this.actionLabel
           ? html`<button
-              class="toast-action"
+              part="action" class="toast-action"
               @click="${this.handleActionClick}"
             >
               ${this.actionLabel}
             </button>`
           : ""}
 
-        <button class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
+        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
       </div>
     `;
   }

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

@@ -57,19 +57,19 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-sm` - Font size
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-sm-regular-font-size` - Font size
 
 ### Spacing Tokens
-- `--rel-spacing-space-xs` - Vertical padding
-- `--rel-spacing-space-sm` - Horizontal padding
+- `--rel-spacing-xs` - Vertical padding
+- `--rel-spacing-sm` - Horizontal padding
 
 ### Color Tokens
-- `--rel-surface-toast` - Background color (dark gray)
-- `--rel-colors-white` - Text color
+- `--rel-bg-neutral-inverse-1` - Background color (dark gray)
+- `--rel-bg-surface` - Text color
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius
+- `--rel-border-radius-sm` - Border radius
 
 ## Accessibility
 - Uses `role="tooltip"` on the tooltip bubble

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

@@ -1,123 +1,160 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type TooltipPosition = "above" | "below";
-
-@customElement("rel-tooltip")
-export class RelTooltip extends LitElement {
-  @property({ type: String }) text: string = "";
-  @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
-    false;
-
-  // Stable id so aria-describedby can reference the bubble across renders.
-  private uniqueId = Math.random().toString(36).slice(2);
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: #1a1a1a;
-      color: #ffffff;
-      padding: var(--rel-spacing-space-xs, 8px)
-        var(--rel-spacing-space-sm, 12px);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      overflow: visible;
-    }
-
-    :host(:hover) .tooltip-bubble,
-    :host(:focus-within) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 8px);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 8px);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      display: block;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid #1a1a1a;
-      border-bottom: none;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid #1a1a1a;
-      border-top: none;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble,
-    :host-context(.dark) .tooltip-bubble {
-      background-color: #ffffff;
-      color: #000000;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble.above .tooltip-tail,
-    :host-context(.dark) .tooltip-bubble.above .tooltip-tail {
-      border-top-color: #ffffff;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble.below .tooltip-tail,
-    :host-context(.dark) .tooltip-bubble.below .tooltip-tail {
-      border-bottom-color: #ffffff;
-    }
-  `;
-
-  firstUpdated() {
-    this.linkTrigger();
-  }
-
-  private linkTrigger() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) return;
-    const trigger = slot.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
-    }
-  }
-
-  render() {
-    return html`
-      <slot @slotchange="${this.linkTrigger}"></slot>
-      <div
-        class="tooltip-bubble ${this.position}"
-        id="tooltip-${this.uniqueId}"
-        role="tooltip"
-      >
-        ${this.text}
-        ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type TooltipPosition = "above" | "below" | "left" | "right";
+export type TooltipType = "single-line" | "multi-line";
+
+@customElement("rel-tooltip")
+export class RelTooltip extends LitElement {
+  @property({ type: String }) text: string = "";
+  @property({ type: String }) position: TooltipPosition = "above";
+  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
+    false;
+
+  /** Figma "Type": single-line stays on one line; multi-line wraps at a max width. */
+  @property({ type: String, reflect: true }) type: TooltipType = "single-line";
+
+  // Stable id so aria-describedby can reference the bubble across renders.
+  private uniqueId = Math.random().toString(36).slice(2);
+
+  static styles = css`
+    :host {
+      color: var(--rel-text-default);
+      display: inline-block;
+      position: relative;
+    }
+
+    /* Tooltip container */
+    .tooltip-bubble {
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-medium-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);
+      position: absolute;
+      background-color: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
+      padding: var(--rel-spacing-xs, 8px)
+        var(--rel-spacing-sm, 12px);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+      overflow: visible;
+    }
+
+    /* Figma Type=Multi Line: wrap inside a bounded bubble */
+    :host([type="multi-line"]) .tooltip-bubble {
+      white-space: normal;
+      max-width: 220px;
+      width: max-content;
+    }
+
+    :host(:hover) .tooltip-bubble,
+    :host(:focus-within) .tooltip-bubble {
+      opacity: 1;
+    }
+
+    /* Positioning */
+    .tooltip-bubble.above {
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip-bubble.below {
+      top: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip-bubble.left {
+      right: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .tooltip-bubble.right {
+      left: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Tail/Arrow */
+    .tooltip-tail {
+      position: absolute;
+      width: 0;
+      height: 0;
+      display: block;
+    }
+
+    .tooltip-bubble.above .tooltip-tail,
+    .tooltip-bubble.below .tooltip-tail {
+      left: 50%;
+      transform: translateX(-50%);
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    .tooltip-bubble.above .tooltip-tail {
+      bottom: -6px;
+      border-top: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-bottom: none;
+    }
+
+    .tooltip-bubble.below .tooltip-tail {
+      top: -6px;
+      border-bottom: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-top: none;
+    }
+
+    .tooltip-bubble.left .tooltip-tail,
+    .tooltip-bubble.right .tooltip-tail {
+      top: 50%;
+      transform: translateY(-50%);
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+    }
+
+    .tooltip-bubble.left .tooltip-tail {
+      right: -6px;
+      border-left: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-right: none;
+    }
+
+    .tooltip-bubble.right .tooltip-tail {
+      left: -6px;
+      border-right: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-left: none;
+    }
+  `;
+
+  firstUpdated() {
+    this.linkTrigger();
+  }
+
+  private linkTrigger() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const trigger = slot.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+    }
+  }
+
+  render() {
+    return html`
+      <slot @slotchange="${this.linkTrigger}"></slot>
+      <div
+        part="panel" class="tooltip-bubble ${this.position}"
+        id="tooltip-${this.uniqueId}"
+        role="tooltip"
+      >
+        ${this.text}
+        ${this.showTail ? html`<span part="indicator" class="tooltip-tail"></span>` : ""}
+      </div>
+    `;
+  }
+}

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -1,14 +1,17 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use plain
+ * `rel-button` elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-actions")
 export class RelTopbarActions extends LitElement {
   static styles = css`
     .actions {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-xs, 8px);
     }
   `;
 

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use a plain
+ * `<a>`/logo markup inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-brand")
 export class RelTopbarBrand extends LitElement {
   @property({ type: String }) src: string = "";
@@ -10,6 +13,7 @@ export class RelTopbarBrand extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
       align-items: center;
     }
@@ -17,11 +21,14 @@ export class RelTopbarBrand extends LitElement {
     a {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-xs);
       text-decoration: none;
-      color: var(--rel-color-text-primary);
-      font-weight: var(--rel-fontWeights-semibold);
-      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-text-default);
+      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);
     }
 
     img {

package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
+ * item slots or `rel-popover` content in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-dropdown-item")
 export class RelTopbarDropdownItem extends LitElement {
   @property({ type: String }) label: string = "";
@@ -11,21 +14,24 @@ export class RelTopbarDropdownItem extends LitElement {
   static styles = css`
     .dropdown-item {
       display: block;
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);
-      color: var(--rel-color-text-primary);
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
+      color: var(--rel-text-default);
       text-decoration: none;
-      font-size: var(--rel-fontSizes-md);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      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);
     }
 
     .dropdown-item:hover {
-      background: var(--rel-color-bg-hover);
+      background: var(--rel-action-overlay-hover);
       border-radius: 0;
     }
 
     :host([active]) .dropdown-item {
-      color: var(--rel-topbar-item-active-color, var(--rel-colors-green-tertiary, #00a86b));
-      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-topbar-item-active-color, var(--rel-text-success));
+      font-weight: var(--rel-fonts-weight-body-semibold, 600);
     }
 
   `;

package/dist/components/rel-topbar/rel-topbar-dropdown.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
+ * `rel-popover` for nav dropdowns in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-dropdown")
 export class RelTopbarDropdown extends LitElement {
   static styles = css`
@@ -9,10 +12,10 @@ export class RelTopbarDropdown extends LitElement {
       display: flex;
       flex-direction: column;
       min-width: 160px;
-      background: var(--rel-color-bg-primary);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      box-shadow: var(--rel-shadow-200);
-      padding: var(--rel-spacing-space-2xs) 0;
+      background: var(--rel-bg-surface);
+      border-radius: var(--rel-border-radius-sm);
+      box-shadow: var(--rel-shadows-shadow-200);
+      padding: var(--rel-spacing-2xs) 0;
     }
   `;