@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,560 +0,0 @@
-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: ButtonVariant = "default";
-
-  @property({ type: String })
-  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";
-
-  @property({ type: String })
-  border: "corner-radius" | "small-corner-radius" | "no-corner-radius" =
-    "corner-radius";
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @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-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-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. Min-widths come from the Figma Button master (S/M/L =
-       80/100/120) so short labels like "OK" keep a proper pill shape;
-       --rel-button-min-width lets a consumer override per instance. */
-    .size-small {
-      height: 32px;
-      min-width: var(--rel-button-min-width, 80px);
-      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;
-      min-width: var(--rel-button-min-width, 100px);
-      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;
-      min-width: var(--rel-button-min-width, 120px);
-      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-border-radius-full-rounded);
-    }
-
-    .border-small-corner-radius {
-      border-radius: var(--rel-border-radius-sm);
-    }
-
-    .border-no-corner-radius {
-      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;
-      /* The disabled tokens are full-contrast pairs (light: near-black on
-         gray-300, dark: white on gray-700), so on their own they render a
-         crisp button that reads as enabled. Dulling happens here instead —
-         same opacity mechanism the rest of the library uses. */
-      opacity: 0.5;
-    }
-
-    /* Only styles that actually carry a fill flatten to the neutral disabled
-       fill. Ghost/link/outline/static stay transparent so a disabled one
-       keeps its own shape rather than becoming a solid pill — which is what
-       made them look like ordinary enabled buttons. */
-    :host([disabled]) button.btn-primary,
-    :host([disabled]) button.btn-default,
-    :host([disabled]) button.btn-icon {
-      background-color: var(--rel-action-brand-fill-disabled) !important;
-      color: var(--rel-action-brand-label-icons-primary-disabled) !important;
-      border: none !important;
-    }
-
-    :host([disabled]) button {
-      cursor: not-allowed;
-      pointer-events: none;
-      filter: none !important;
-    }
-
-    /* Variants & tones — V2 action tokens (auto light/dark) */
-    .btn-default.tone-default {
-      background: var(--rel-action-neutral-fill);
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-    }
-    .btn-default.tone-critical {
-      background: var(--rel-action-danger-fill);
-      color: var(--rel-action-danger-label-icons-fill);
-    }
-    .btn-default.tone-success {
-      background: var(--rel-action-success-fill);
-      color: var(--rel-text-static-light);
-    }
-
-    .btn-primary.tone-default {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-    }
-    .btn-primary.tone-critical {
-      background: var(--rel-action-danger-fill);
-      color: var(--rel-action-danger-label-icons-fill);
-    }
-    .btn-primary.tone-success {
-      background: var(--rel-action-success-fill);
-      color: var(--rel-action-success-label-icons-fill);
-    }
-
-    .btn-secondary {
-      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-action-neutral-label-icons-ghost);
-    }
-
-    /* Figma master: ghost S has a narrower 56px min than primary/outline. */
-    .btn-text.size-small {
-      min-width: var(--rel-button-min-width, 56px);
-    }
-
-    .btn-text.tone-critical {
-      color: var(--rel-action-danger-label-icons-ghost);
-    }
-
-    .btn-link {
-      background: transparent;
-      color: var(--rel-action-neutral-label-icons-link);
-      text-decoration: underline;
-      /* Links are inline actions — no minimum footprint in the Figma master. */
-      min-width: 0;
-    }
-
-    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;
-      min-width: 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;
-      padding: 0;
-      min-width: 0;
-      border-radius: 50%;
-    }
-    .btn-icon.tone-default {
-      background: var(--rel-action-neutral-subtle);
-      color: var(--rel-action-neutral-label-icons-ghost);
-      border: none;
-    }
-    .btn-icon.tone-primary {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      border: none;
-    }
-    .btn-icon.tone-secondary {
-      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-action-success-fill);
-      color: var(--rel-action-success-label-icons-fill);
-      border: none;
-    }
-    .btn-icon.tone-critical {
-      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-action-brand-fill-hover);
-    }
-
-    button.btn-primary.tone-critical:hover:not(:disabled) {
-      background: var(--rel-action-danger-fill-hover);
-    }
-
-    button.btn-primary.tone-success:hover:not(:disabled) {
-      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). */
-    /* Link buttons change label color only (rule above) — the overlay fill
-       here would make a hovered link read as a ghost button. */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text):not(.btn-link) {
-      background: var(--rel-action-overlay-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);
-    }
-
-    /* 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) {
-      background: var(--rel-action-neutral-subtle-hover);
-    }
-    button.btn-icon.tone-primary:hover:not(:disabled) {
-      background: var(--rel-action-brand-fill-hover);
-    }
-    button.btn-icon.tone-secondary:hover:not(:disabled) {
-      background: var(--rel-action-neutral-ghost-hover);
-      border-color: var(--rel-action-neutral-border-outline-hover);
-    }
-    button.btn-icon.tone-success:hover:not(:disabled) {
-      background: var(--rel-action-success-fill-hover);
-    }
-    button.btn-icon.tone-critical:hover:not(:disabled) {
-      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) {
-      transform: scale(0.97);
-    }
-
-    button:focus-visible {
-      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);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Capture-phase, on the host itself: blocks programmatic el.click() calls
-    // and any other path that bypasses the inner button's pointer-events:none
-    // (e.g. CSS pointer-events doesn't stop .click(), which targets the host
-    // directly regardless of hit-testing).
-    this.addEventListener("click", this.handleHostClick, { capture: true });
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleHostClick, { capture: true });
-    super.disconnectedCallback();
-  }
-
-  private handleHostClick = (e: MouseEvent) => {
-    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-${style}`,
-      this.iconOnly && style !== "icon" ? "btn-icon-only" : "",
-      `tone-${this.effectiveTone}`,
-      `size-${this.size}`,
-      `border-${this.border}`,
-    ]
-      .filter(Boolean)
-      .join(" ");
-  }
-
-  private handleClick(e: MouseEvent) {
-    if (this.disabled || this.loading) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      return;
-    }
-
-    // Native click events are already composed: true, so this bubbles
-    // through the shadow boundary to the host on its own — no re-dispatch
-    // needed. (A manual re-dispatch here previously caused every @click
-    // listener on <rel-button> to fire twice per real click.)
-  }
-
-  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)}
-      >
-        ${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/index.ts

@@ -1 +0,0 @@
-export * from "./rel-calendar";