@reliability-design/web 1.3.0 → 1.4.0

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

@@ -1,16 +1,42 @@
-import "../../styles/vars-v2.css";
+import "../rel-badge/rel-badge";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
+/**
+ * Style axis. Canonical values are the historical ones; "outline"/"ghost" are
+ * accepted Figma-vocabulary aliases for "secondary"/"text". "static" is the
+ * Figma Style=Static treatment (transparent, static-light label — for use on
+ * colored/dark surfaces). Legacy "icon" is the pre-2.0 collapsed icon-button
+ * variant and keeps its exact behavior; prefer icon-only + a style instead.
+ */
+export type ButtonVariant =
+  | "default" | "primary" | "secondary" | "text" | "link" | "icon" | "static"
+  | "outline" | "ghost";
+
+/** Tone axis. "neutral"/"brand"/"danger" are Figma-vocabulary aliases. */
+export type ButtonTone =
+  | "default" | "primary" | "secondary" | "critical" | "success"
+  | "neutral" | "brand" | "danger";
+
 @customElement("rel-button")
 export class RelButton extends LitElement {
   @property({ type: String })
-  variant: "default" | "primary" | "secondary" | "text" | "link" | "icon" =
-    "default";
+  variant: ButtonVariant = "default";
 
   @property({ type: String })
-  tone: "default" | "primary" | "secondary" | "critical" | "success" = "default";
+  tone: ButtonTone = "default";
+
+  /**
+   * Figma "Type=Icon Only" as an independent axis: a square button of the
+   * current style/tone. Unlike legacy variant="icon", this composes with
+   * every style (outline/ghost/link included).
+   */
+  @property({ type: Boolean, reflect: true, attribute: "icon-only" })
+  iconOnly = false;
+
+  /** Figma "State=Loading": shows a spinner, blocks interaction. */
+  @property({ type: Boolean, reflect: true }) loading = false;
 
   @property({ type: String })
   size: "small" | "medium" | "large" = "medium";
@@ -23,124 +49,260 @@ export class RelButton extends LitElement {
 
   @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
 
+  /** Numeric/overflow text shown in a corner badge (e.g. "3", "999+"). Ignored when badgeDot is set. */
+  @property({ type: String }) badge = "";
+
+  /** Shows a small corner dot instead of a numbered badge — takes precedence over `badge`. */
+  @property({ type: Boolean, attribute: "badge-dot" }) badgeDot = false;
+
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
+      position: relative;
+    }
+
+    .btn-badge {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      pointer-events: none;
+    }
+
+    /* Icon buttons are a 40px circle (radius 20). An 8px dot's center needs to
+       land ON that circle's edge at the 45° corner point — which works out to
+       roughly 2px inward from each edge (R - R/√2 - dot-radius ≈ 1.9px), not
+       outside it like the numbered badge. Negative offsets here would float
+       the dot in the empty bounding-box corner outside the visible circle. */
+    .btn-badge[variant="dot"] {
+      top: 2px;
+      right: 2px;
     }
 
     button {
-      font-family: var(--rel-fontFamilies-primary);
-      font-weight: var(--rel-fontWeights-semibold);
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
       cursor: pointer;
       border: none;
       transition: all 0.15s ease;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
       outline: none;
+      position: relative;
+    }
+
+    /* Content wrapper mirrors the button's flex so slotted icon+label keep
+       their gap; it exists so loading can hide the label without collapsing
+       the button's width. */
+    .content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: inherit;
+    }
+
+    /* Loading (Figma State=Loading): spinner replaces the label in place */
+    :host([loading]) {
+      pointer-events: none;
+    }
+
+    :host([loading]) .content {
+      visibility: hidden;
+    }
+
+    .spinner {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 16px;
+      height: 16px;
+      margin: -8px 0 0 -8px;
+      border-radius: 50%;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      animation: rel-btn-spin 0.8s linear infinite;
+    }
+
+    @keyframes rel-btn-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 2s;
+      }
     }
 
     /* Sizes */
     .size-small {
       height: 32px;
-      padding: 0 var(--rel-spacing-space-md);
-      font-size: var(--rel-fontSizes-sm);
+      padding: 0 var(--rel-spacing-sm);
+      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);
     }
 
     .size-medium {
       height: 40px;
-      padding: 0 var(--rel-spacing-space-lg);
-      font-size: var(--rel-fontSizes-md);
+      gap: var(--rel-spacing-xs);
+      padding: 0 var(--rel-spacing-md);
+      font-family: var(--rel-action-lg-font-family);
+      font-weight: var(--rel-action-lg-font-weight);
+      font-size: var(--rel-action-lg-font-size);
+      line-height: var(--rel-action-lg-line-height);
+      letter-spacing: var(--rel-action-lg-letter-spacing);
     }
 
     .size-large {
       height: 48px;
-      padding: 0 var(--rel-spacing-space-xl);
-      font-size: var(--rel-fontSizes-lg);
+      padding: 0 var(--rel-spacing-lg);
+      font-family: var(--rel-action-xl-font-family);
+      font-weight: var(--rel-action-xl-font-weight);
+      font-size: var(--rel-action-xl-font-size);
+      line-height: var(--rel-action-xl-line-height);
+      letter-spacing: var(--rel-action-xl-letter-spacing);
     }
 
     /* Borders */
     .border-corner-radius {
-      border-radius: var(--rel-borders-radius-border-radius-500);
+      border-radius: var(--rel-border-radius-full-rounded);
     }
 
     .border-small-corner-radius {
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
     }
 
     .border-no-corner-radius {
-      border-radius: var(--rel-borders-radius-border-radius-0);
+      border-radius: var(--rel-border-radius-square);
     }
 
     /* Disabled */
     :host([disabled]) {
+      /* not-allowed must stay VISIBLE: the host keeps pointer-events so the
+         cursor renders. Clicks are neutralised two ways — the inner button's
+         pointer-events:none (below) and the capture-phase handleHostClick
+         guard (which also stops programmatic .click()). Putting
+         pointer-events:none on the HOST would make it transparent to the
+         pointer and suppress the cursor entirely. */
       cursor: not-allowed;
-      /* Without this, clicks on a disabled button hit-test fall through the
-         inner button's pointer-events:none straight onto the host, which still
-         dispatches a normal click to any externally-attached listener. */
-      pointer-events: none;
     }
 
     :host([disabled]) button {
       cursor: not-allowed;
-      background-color: var(--rel-color-bg-tertiary) !important;
-      color: var(--rel-color-text-disabled) !important;
+      background-color: var(--rel-action-brand-fill-disabled) !important;
+      color: var(--rel-action-brand-label-icons-primary-disabled) !important;
       border: none !important;
       pointer-events: none;
       filter: none !important;
     }
 
-    :host([disabled]):host-context([data-theme="dark"]) button,
-    :host([disabled]):host-context(.dark) button {
-      background-color: var(--rel-color-bg-tertiary) !important;
-      color: var(--rel-color-text-disabled) !important;
-    }
-
-    /* Variants & tones (unchanged) */
+    /* Variants & tones — V2 action tokens (auto light/dark) */
     .btn-default.tone-default {
-      background: var(--rel-colors-gray-primary);
-      color: var(--rel-colors-white);
+      background: var(--rel-action-neutral-fill);
+      color: var(--rel-action-neutral-label-icons-fill-inverse);
     }
     .btn-default.tone-critical {
-      background: var(--rel-error-surface-default);
-      color: #ffffff;
+      background: var(--rel-action-danger-fill);
+      color: var(--rel-action-danger-label-icons-fill);
     }
     .btn-default.tone-success {
-      background: var(--rel-colors-green-tertiary);
-      color: #ffffff;
+      background: var(--rel-action-success-fill);
+      color: var(--rel-text-static-light);
     }
 
     .btn-primary.tone-default {
-      background: var(--rel-colors-green-primary);
-      color: #000000;
+      background: var(--rel-action-brand-fill);
+      color: var(--rel-action-brand-label-icons-primary);
     }
     .btn-primary.tone-critical {
-      background: var(--rel-error-surface-default);
-      color: #ffffff;
+      background: var(--rel-action-danger-fill);
+      color: var(--rel-action-danger-label-icons-fill);
     }
     .btn-primary.tone-success {
-      background: var(--rel-colors-green-tertiary);
-      color: #ffffff;
+      background: var(--rel-action-success-fill);
+      color: var(--rel-action-success-label-icons-fill);
     }
 
     .btn-secondary {
-      background: var(--rel-colors-white);
-      border: 1px solid var(--rel-color-border-strong);
-      color: var(--rel-colors-black);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-action-neutral-border-outline);
+      color: var(--rel-action-neutral-label-icons-outline);
+    }
+
+    /* Secondary critical / success tones. The danger outline border is
+       deliberately the SUBTLE red at rest (red-100) and only goes solid
+       (red-600) on hover/pressed — verified against the Figma design nodes,
+       not just the variable names. Do not "fix" it to a solid red. */
+    .btn-secondary.tone-critical {
+      border-color: var(--rel-action-danger-border-outline);
+      color: var(--rel-action-danger-label-icons-outline);
+    }
+    .btn-secondary.tone-success {
+      border-color: var(--rel-border-success);
+      color: var(--rel-text-success);
     }
 
     .btn-text {
       background: transparent;
-      color: var(--rel-colors-black);
+      color: var(--rel-action-neutral-label-icons-ghost);
+    }
+
+    .btn-text.tone-critical {
+      color: var(--rel-action-danger-label-icons-ghost);
     }
 
     .btn-link {
       background: transparent;
-      color: var(--rel-colors-blue-primary);
+      color: var(--rel-action-neutral-label-icons-link);
       text-decoration: underline;
     }
 
+    button.btn-link:hover:not(:disabled) {
+      color: var(--rel-action-neutral-label-icons-link-hover);
+    }
+
+    .btn-link.tone-critical {
+      color: var(--rel-action-danger-label-icons-link);
+    }
+
+    button.btn-link.tone-critical:hover:not(:disabled) {
+      color: var(--rel-action-danger-label-icons-link-hover);
+    }
+
+    /* Static style (Figma Style=Static, Tone=Neutral only): transparent with a
+       static-light label, for placement on colored or dark surfaces */
+    .btn-static {
+      background: transparent;
+      color: var(--rel-text-static-light);
+    }
+
+    button.btn-static:hover:not(:disabled) {
+      background: var(--rel-action-neutral-static-hover);
+    }
+
+    /* Icon Only as an independent axis: square button of the current style */
+    .btn-icon-only {
+      padding: 0;
+    }
+
+    .btn-icon-only.size-small {
+      width: 32px;
+    }
+
+    .btn-icon-only.size-medium {
+      width: 40px;
+    }
+
+    .btn-icon-only.size-large {
+      width: 48px;
+    }
+
     .btn-icon {
       width: 40px;
       height: 40px;
@@ -148,67 +310,118 @@ export class RelButton extends LitElement {
       border-radius: 50%;
     }
     .btn-icon.tone-default {
-      background: var(--rel-colors-gray-light);
-      color: var(--rel-colors-black);
+      background: var(--rel-action-neutral-subtle);
+      color: var(--rel-action-neutral-label-icons-ghost);
       border: none;
     }
     .btn-icon.tone-primary {
-      background: var(--rel-colors-green-primary);
-      color: #000000;
+      background: var(--rel-action-brand-fill);
+      color: var(--rel-action-brand-label-icons-primary);
       border: none;
     }
     .btn-icon.tone-secondary {
-      background: var(--rel-colors-white);
-      color: var(--rel-colors-black);
-      border: 1px solid var(--rel-color-border-strong);
+      background: var(--rel-bg-surface);
+      color: var(--rel-action-neutral-label-icons-outline);
+      border: 1px solid var(--rel-action-neutral-border-outline);
     }
     .btn-icon.tone-success {
-      background: var(--rel-colors-green-tertiary);
-      color: #ffffff;
+      background: var(--rel-action-success-fill);
+      color: var(--rel-action-success-label-icons-fill);
       border: none;
     }
     .btn-icon.tone-critical {
-      background: var(--rel-error-surface-default);
-      color: #ffffff;
+      background: var(--rel-action-danger-fill);
+      color: var(--rel-action-danger-label-icons-fill);
       border: none;
     }
 
     button.btn-primary.tone-default:hover:not(:disabled) {
-      background: var(--rel-color-brand-hover);
+      background: var(--rel-action-brand-fill-hover);
     }
 
     button.btn-primary.tone-critical:hover:not(:disabled) {
-      filter: brightness(0.9);
+      background: var(--rel-action-danger-fill-hover);
     }
 
     button.btn-primary.tone-success:hover:not(:disabled) {
-      filter: brightness(0.9);
+      background: var(--rel-action-success-fill-hover);
+    }
+
+    /* Generic hover — excludes styles handled per-style. Now also excludes
+       .btn-text: ghost gets tone-accent hovers below (this generic grey overlay
+       has higher specificity than the per-tone ghost rules and was overriding
+       them, which is why every ghost hover looked grey). */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text) {
+      background: var(--rel-action-overlay-hover);
     }
 
-    /* Generic hover — excludes icon (handled per-tone below) */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon) {
-      background: var(--rel-color-bg-hover);
+    /* Outline (secondary): fill stays on the surface (white) on hover AND
+       pressed — only the border reacts. Matches Figma (transparent outline fill). */
+    button.btn-secondary:hover:not(:disabled),
+    button.btn-secondary:active:not(:disabled) {
+      background: var(--rel-bg-surface);
+      border-color: var(--rel-action-neutral-border-outline-hover);
+    }
+    button.btn-secondary.tone-critical:hover:not(:disabled),
+    button.btn-secondary.tone-critical:active:not(:disabled) {
+      background: var(--rel-bg-surface);
+      border-color: var(--rel-action-danger-border-outline-hover);
+    }
+    button.btn-secondary.tone-success:hover:not(:disabled),
+    button.btn-secondary.tone-success:active:not(:disabled) {
+      background: var(--rel-bg-surface);
+      border-color: var(--rel-border-success-strong);
     }
 
-    button.btn-default:hover:not(:disabled) {
-      filter: brightness(0.85);
+    /* Ghost (text): tone-accent fill on hover AND pressed — the same tint the
+       outline used to carry (neutral = subtle overlay, danger = red-50,
+       success = green-50). Matches Figma. */
+    button.btn-text:hover:not(:disabled),
+    button.btn-text:active:not(:disabled) {
+      background: var(--rel-action-neutral-ghost-hover);
+    }
+    button.btn-text.tone-critical:hover:not(:disabled),
+    button.btn-text.tone-critical:active:not(:disabled) {
+      background: var(--rel-action-danger-ghost-hover);
+    }
+    button.btn-text.tone-success:hover:not(:disabled),
+    button.btn-text.tone-success:active:not(:disabled) {
+      background: var(--rel-action-success-ghost-hover);
+    }
+
+    button.btn-default.tone-default:hover:not(:disabled) {
+      background: var(--rel-action-neutral-fill-hover);
+    }
+    button.btn-default.tone-critical:hover:not(:disabled) {
+      background: var(--rel-action-danger-fill-hover);
+    }
+    button.btn-default.tone-success:hover:not(:disabled) {
+      background: var(--rel-action-success-fill-hover);
     }
 
     /* Icon hover — each tone matches its corresponding button variant */
     button.btn-icon.tone-default:hover:not(:disabled) {
-      filter: brightness(0.9);
+      background: var(--rel-action-neutral-subtle-hover);
     }
     button.btn-icon.tone-primary:hover:not(:disabled) {
-      background: var(--rel-color-brand-hover);
+      background: var(--rel-action-brand-fill-hover);
     }
     button.btn-icon.tone-secondary:hover:not(:disabled) {
-      background: var(--rel-color-bg-hover);
+      background: var(--rel-action-neutral-ghost-hover);
+      border-color: var(--rel-action-neutral-border-outline-hover);
     }
     button.btn-icon.tone-success:hover:not(:disabled) {
-      filter: brightness(0.9);
+      background: var(--rel-action-success-fill-hover);
     }
     button.btn-icon.tone-critical:hover:not(:disabled) {
-      filter: brightness(0.9);
+      background: var(--rel-action-danger-fill-hover);
+    }
+
+    button.btn-default.tone-default:active:not(:disabled) {
+      background-image: linear-gradient(
+        var(--rel-action-neutral-static-hover),
+        var(--rel-action-neutral-static-hover)
+      );
     }
 
     button:active:not(:disabled) {
@@ -216,37 +429,12 @@ export class RelButton extends LitElement {
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
+      box-shadow:
+        0 0 0 2px var(--rel-border-focus-inner),
+        0 0 0 8px var(--rel-border-focus-subtle);
     }
-
-    /* Dark mode overrides */
-    :host-context([data-theme="dark"]) button.btn-default.tone-default,
-    :host-context(.dark) button.btn-default.tone-default {
-      background: var(--rel-gray-text-primary);
-      color: #000000;
-    }
-
-    :host-context([data-theme="dark"]) button:focus-visible,
-    :host-context(.dark) button:focus-visible {
-      outline-color: var(--rel-color-text-primary);
-    }
-
-    :host-context([data-theme="dark"]) button.btn-secondary,
-    :host-context(.dark) button.btn-secondary,
-    :host-context([data-theme="dark"]) button.btn-icon.tone-secondary,
-    :host-context(.dark) button.btn-icon.tone-secondary {
-      background: var(--rel-color-bg-primary);
-      border-color: var(--rel-color-border-strong);
-      color: var(--rel-color-text-primary);
-    }
-
-    :host-context([data-theme="dark"]) button.btn-text,
-    :host-context(.dark) button.btn-text {
-      color: var(--rel-color-text-primary);
-    }
-
-    /* btn-link: blue in both modes — no dark override */
   `;
 
   connectedCallback() {
@@ -264,23 +452,42 @@ export class RelButton extends LitElement {
   }
 
   private handleHostClick = (e: MouseEvent) => {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault();
       e.stopImmediatePropagation();
     }
   };
 
+  /** Style axis with Figma-vocabulary aliases folded onto canonical values. */
+  private get styleVariant(): string {
+    if (this.variant === "outline") return "secondary";
+    if (this.variant === "ghost") return "text";
+    return this.variant;
+  }
+
+  /** Tone axis with Figma-vocabulary aliases folded onto canonical values. */
+  private get effectiveTone(): string {
+    if (this.tone === "neutral") return "default";
+    if (this.tone === "brand") return "primary";
+    if (this.tone === "danger") return "critical";
+    return this.tone;
+  }
+
   private get classes() {
+    const style = this.styleVariant;
     return [
-      `btn-${this.variant}`,
-      `tone-${this.tone}`,
+      `btn-${style}`,
+      this.iconOnly && style !== "icon" ? "btn-icon-only" : "",
+      `tone-${this.effectiveTone}`,
       `size-${this.size}`,
       `border-${this.border}`,
-    ].join(" ");
+    ]
+      .filter(Boolean)
+      .join(" ");
   }
 
   private handleClick(e: MouseEvent) {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault();
       e.stopImmediatePropagation();
       return;
@@ -293,16 +500,31 @@ export class RelButton extends LitElement {
   }
 
   render() {
+    const showBadge = this.badgeDot || !!this.badge;
+
     return html`
       <button
+        part="base"
         class="${this.classes}"
         ?disabled=${this.disabled}
         @click=${this.handleClick}
         aria-disabled=${this.disabled}
+        aria-busy=${this.loading}
         aria-label=${ifDefined(this.ariaLabel ?? undefined)}
       >
-        <slot></slot>
+        ${this.loading
+          ? html`<span part="indicator" class="spinner" aria-hidden="true"></span>`
+          : null}
+        <span class="content"><slot></slot></span>
       </button>
+      ${showBadge
+        ? html`<rel-badge
+            class="btn-badge"
+            variant=${this.badgeDot ? "dot" : "number"}
+            number=${this.badge}
+            size="sm"
+          ></rel-badge>`
+        : null}
     `;
   }
 }

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

@@ -101,9 +101,9 @@ calendar.addEventListener('rel-change', (e) => {
 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-fontSizes-*`, `--rel-fontWeights-*` for typography
-- `--rel-borders-radius-*` for border radius
-- Focus outline uses `--rel-colors-blue-primary`
-- Selected state uses `--rel-colors-green-primary`
+- `--rel-body-*` / `--rel-headings-*` composite typography roles
+- `--rel-border-radius-*` for border radius
+- Focus outline uses `--rel-bg-info`
+- Selected state uses `--rel-bg-brand`