@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,244 +1,411 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-chip")
-export class RelChip extends LitElement {
-  @property({ type: String }) label = "Label";
-
-  @property({ type: String })
-  tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
-
-  @property({ type: String }) leadingIcon?: string;
-  @property({ type: String }) trailingIcon?: string;
-  @property({ type: String }) avatar?: string;
-
-  @property({ type: Boolean }) removable = false;
-  @property({ type: Boolean }) outline = false;
-
-  /** IMPORTANT: reflected so CSS + Angular can see it */
-  @property({ type: Boolean, reflect: true }) removed = false;
-
-  static styles = css`
-    :host {
-      display: inline-block;
-    }
-
-    :host([removed]) {
-      display: none;
-    }
-
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
-      border-radius: var(--rel-borders-radius-border-radius-500);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
-      gap: var(--rel-spacing-space-2xs);
-      cursor: pointer;
-      border: var(--rel-borders-width-stroke-100) solid transparent;
-      user-select: none;
-      white-space: nowrap;
-      background: transparent;
-    }
-
-    .chip:hover {
-      filter: brightness(0.92);
-      box-shadow: var(--rel-shadows-shadow-100);
-    }
-
-    .chip:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
-      outline-offset: 2px;
-    }
-
-    /* TONES */
-    .chip-default {
-      background: var(--rel-colors-gray-border);
-      color: #000000;
-    }
-
-    .chip-blue {
-      background: var(--rel-colors-blue-tertiary);
-      color: #ffffff;
-    }
-
-    .chip-yellow {
-      background: var(--rel-colors-yellow-pending);
-      color: #000000;
-    }
-
-    .chip-red {
-      background: var(--rel-colors-red-secondary);
-      color: #ffffff;
-    }
-
-    .chip-green {
-      background: var(--rel-colors-green-success);
-      color: #ffffff;
-    }
-
-    /* OUTLINE */
-    .chip-outline {
-      background: transparent;
-      border-color: var(--rel-color-border-default);
-    }
-
-    .chip-blue.chip-outline {
-      color: #000000;
-      background: transparent;
-      border-color: #0059F4;
-    }
-
-    .chip-red.chip-outline {
-      color: #9C1E33;
-      background: transparent;
-      border-color: #9C1E33;
-    }
-
-    .chip-green.chip-outline {
-      color: #00A86B;
-      background: transparent;
-      border-color: #00A86B;
-    }
-
-    .chip-yellow.chip-outline {
-      color: #92400E;
-      background: transparent;
-      border-color: #F2915C;
-    }
-
-    .chip-avatar {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
-    .chip-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 14px;
-      height: 14px;
-      flex-shrink: 0;
-    }
-
-    .chip-icon * {
-      width: 100%;
-      height: 100%;
-    }
-
-    .chip-icon ::slotted(svg),
-    .chip-icon svg {
-      width: 16px;
-      height: 16px;
-      fill: currentColor;
-    }
-
-    .chip-remove {
-      margin-left: var(--rel-spacing-space-3xs);
-      cursor: pointer;
-      opacity: 0.7;
-      background: none;
-      border: none;
-      color: inherit;
-      font: inherit;
-      padding: 0;
-      line-height: 1;
-    }
-
-    .chip-remove:hover {
-      opacity: 1;
-    }
-
-    .chip-remove:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
-      outline-offset: 1px;
-      border-radius: 2px;
-    }
-
-    /* Dark mode overrides */
-    :host-context([data-theme="dark"]) .chip-default,
-    :host-context(.dark) .chip-default {
-      color: #ffffff;
-      background: var(--rel-color-bg-secondary);
-    }
-
-    :host-context([data-theme="dark"]) .chip-default.chip-outline,
-    :host-context(.dark) .chip-default.chip-outline {
-      color: #ffffff;
-      border-color: #ffffff;
-    }
-
-    :host-context([data-theme="dark"]) .chip-outline,
-    :host-context(.dark) .chip-outline {
-      color: #ffffff;
-      border-color: currentColor;
-    }
-  `;
-
-  private get classes() {
-    return [
-      "chip",
-      `chip-${this.tone}`,
-      this.outline ? "chip-outline" : "",
-    ].join(" ");
-  }
-
-  private handleRemove(event: Event) {
-    event.stopPropagation();
-    this.removed = true;
-
-    this.dispatchEvent(
-      new CustomEvent("removed", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    return html`
-      <span
-        class="${this.classes}"
-        role="button"
-        tabindex="0"
-        aria-label="${this.label}"
-      >
-        ${this.avatar
-          ? html`<img src=${this.avatar} alt="" class="chip-avatar" />`
-          : null}
-        ${this.leadingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.leadingIcon)}
-            </span>`
-          : null}
-
-        <span class="chip-label">${this.label}</span>
-
-        ${this.trailingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.trailingIcon)}
-            </span>`
-          : null}
-        ${this.removable
-          ? html`<button
-              class="chip-remove"
-              aria-label="Remove ${this.label}"
-              @click=${this.handleRemove}
-            >
-              ✕
-            </button>`
-          : null}
-      </span>
-    `;
-  }
-
-  private renderIcon(iconString: string) {
-    const template = document.createElement("template");
-    template.innerHTML = iconString.trim();
-    return template.content.cloneNode(true);
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "../rel-avatar/rel-avatar.js";
+import "@reliability-design/icons/rel-icon";
+
+export type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
+export type ChipVariant = "fill" | "subtle";
+export type ChipSize = "sm" | "md" | "lg";
+export type ChipBorder = "default" | "rounded";
+
+@customElement("rel-chip")
+export class RelChip extends LitElement {
+  // The actually-focusable element is the inner <span tabindex="0">, not the
+  // host. Without delegatesFocus, calling host.focus() (e.g. from a parent
+  // component, or a "focus this" demo button) is a no-op since the host
+  // itself carries no tabindex — only real Tab-key traversal would still
+  // reach the inner span, because that walks the flattened DOM regardless.
+  static override shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  @property({ type: String }) label = "Label";
+
+  @property({ type: String, reflect: true }) tone: ChipTone = "neutral";
+
+  @property({ type: String, reflect: true }) variant: ChipVariant = "fill";
+
+  @property({ type: String, reflect: true }) size: ChipSize = "md";
+
+  @property({ type: String, reflect: true }) border: ChipBorder = "default";
+
+  /** Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon>. */
+  @property({ type: String, attribute: "leading-icon" }) leadingIcon?: string;
+  @property({ type: String, attribute: "trailing-icon" }) trailingIcon?: string;
+  /** Initials text for the avatar (e.g. "JD"). Mutually exclusive with leadingIcon. */
+  @property({ type: String }) avatar?: string;
+
+  @property({ type: Boolean }) removable = false;
+
+  /** IMPORTANT: reflected so CSS + Angular can see it */
+  @property({ type: Boolean, reflect: true }) removed = false;
+
+  /** Opt-in native drag-and-drop — reflects the Figma "Dragged" state automatically during a real drag gesture. */
+  // Explicit attribute mapping — Lit's default attribute name for a camelCase
+  // property is the name fully lowercased (no hyphens), so without this it'd
+  // only respond to draggablechip="", not draggable-chip.
+  @property({ type: Boolean, attribute: "draggable-chip" }) draggableChip = false;
+
+  /** Reflected so CSS can target the Figma "Dragged" visual state. Driven automatically by dragstart/dragend when draggableChip is set. */
+  @state() private dragging = false;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      width: auto;
+      flex: 0 0 auto;
+    }
+
+    :host([removed]) {
+      display: none;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      font-family: var(--rel-fontFamilies-primary);
+      font-weight: 500;
+      letter-spacing: -0.6px;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      outline: none;
+      background: transparent;
+      transition: background-color 0.15s ease;
+    }
+
+    /* ── Size ── */
+    :host([size="lg"]) .chip {
+      height: 32px;
+      padding: 4px 8px;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    :host([size="md"]) .chip {
+      height: 28px;
+      padding: 4px 8px;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    :host([size="sm"]) .chip {
+      height: 24px;
+      padding: 4px 8px;
+      font-size: 12px;
+      line-height: 20px;
+    }
+
+    /* ── Border / shape — "Rounded" also widens horizontal padding to 12px,
+       consistent across all three sizes per the Figma spec. ── */
+    :host([border="default"]) .chip {
+      border-radius: 4px;
+    }
+
+    :host([border="rounded"]) .chip {
+      border-radius: 1000px;
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+
+    /* ── Tone x Variant — Default/Default state colors ── */
+    :host([tone="neutral"][variant="fill"]) .chip {
+      background: #0b0b0b;
+      color: #ffffff;
+    }
+    :host([tone="neutral"][variant="subtle"]) .chip {
+      background: #f5f5f5;
+      color: #0b0b0b;
+    }
+    :host([tone="danger"][variant="fill"]) .chip {
+      background: #f83b3b;
+      color: #ffffff;
+    }
+    :host([tone="danger"][variant="subtle"]) .chip {
+      background: #fff1f1;
+      color: #ce3131;
+    }
+    :host([tone="warning"][variant="fill"]) .chip {
+      background: #ffcb66;
+      color: #0b0b0b;
+    }
+    :host([tone="warning"][variant="subtle"]) .chip {
+      background: #ffefd1;
+      color: #713f12;
+    }
+    :host([tone="success"][variant="fill"]) .chip {
+      background: #00a86b;
+      color: #ffffff;
+    }
+    :host([tone="success"][variant="subtle"]) .chip {
+      background: #edf8f4;
+      color: #008655;
+    }
+    :host([tone="info"][variant="fill"]) .chip {
+      background: #0091ea;
+      color: #ffffff;
+    }
+    :host([tone="info"][variant="subtle"]) .chip {
+      background: #eff7ff;
+      color: #00528d;
+    }
+
+    /* ── Hover / Dragged — Figma only specs explicit color shifts for the
+       "neutral" tone; the other four tones have no hover/dragged sample to
+       match, so a generic brightness dim covers them instead of leaving
+       hover completely inert. Flagged in the handoff notes. ── */
+    :host([tone="neutral"][variant="fill"]) .chip:hover {
+      background: #363636;
+    }
+    :host([tone="neutral"][variant="fill"]) .chip:active,
+    :host([tone="neutral"][variant="fill"][dragging]) .chip {
+      background: #404040;
+    }
+    :host([tone="neutral"][variant="subtle"]) .chip:active,
+    :host([tone="neutral"][variant="subtle"][dragging]) .chip {
+      background: #e5e5e5;
+    }
+
+    :host(:not([tone="neutral"])) .chip:hover {
+      filter: brightness(0.96);
+    }
+    :host(:not([tone="neutral"])) .chip:active,
+    :host(:not([tone="neutral"])[dragging]) .chip {
+      filter: brightness(0.92);
+    }
+
+    :host([dragging]) .chip {
+      cursor: grabbing;
+    }
+
+    /* ── Focused — 1.5px outline, drawn outside (matches Figma's
+       strokeAlign:OUTSIDE) so it never affects layout. Same color
+       regardless of tone, per spec. OUTSIDE alignment means the stroke
+       sits flush against the shape's edge with zero gap, extending
+       outward by strokeWeight — outline-offset must be 0, not a positive
+       gap (a positive offset was the bug: it drew a visible gap that
+       doesn't exist in Figma). ── */
+    .chip:focus-visible {
+      outline: 1.5px solid var(--rel-chip-focus-ring, #0b0b0b);
+      outline-offset: 0;
+    }
+
+    /* ── Icons ── */
+    /* rel-icon renders its SVG inside its own shadow root, so sizing has to
+       go through --rel-icon-size (a custom property — pierces shadow
+       boundaries) rather than a ".chip-icon svg" selector, which can never
+       reach across shadow DOM. */
+    .chip-icon {
+      flex-shrink: 0;
+    }
+
+    :host([size="lg"]) .chip-icon {
+      --rel-icon-size: 16px;
+    }
+
+    :host([size="md"]) .chip-icon {
+      --rel-icon-size: 14px;
+    }
+
+    :host([size="sm"]) .chip-icon {
+      --rel-icon-size: 12px;
+    }
+
+    /* ── Avatar — not shown in the Figma sample. rel-avatar sizes its inner
+       .avatar div directly from its own "size" prop (fixed presets only —
+       no --rel-avatar-size custom property escape hatch like rel-icon has),
+       so a host-level width/height override here would only resize the
+       empty outer wrapper, not the actual painted circle. "xs" (20px) is
+       rel-avatar's smallest preset; used uniformly across all three chip
+       sizes since there's nothing smaller to ask for. ── */
+    .chip rel-avatar {
+      display: inline-flex;
+      flex-shrink: 0;
+    }
+
+    :host([variant="fill"]) .chip rel-avatar {
+      --rel-avatar-bg-fill: rgba(255, 255, 255, 0.25);
+      --rel-avatar-color-fill: #ffffff;
+    }
+
+    :host([variant="subtle"]) .chip rel-avatar {
+      --rel-avatar-bg-fill: rgba(11, 11, 11, 0.12);
+      --rel-avatar-color-fill: currentColor;
+    }
+
+    /* ── Remove (close) button ── */
+    .chip-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      opacity: 0.7;
+      background: none;
+      border: none;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+      line-height: 1;
+    }
+
+    .chip-remove:hover {
+      opacity: 1;
+    }
+
+    .chip-remove:focus-visible {
+      outline: 1.5px solid currentColor;
+      outline-offset: 1px;
+      border-radius: 2px;
+    }
+
+    :host([size="lg"]) .chip-remove {
+      --rel-icon-size: 16px;
+    }
+    :host([size="md"]) .chip-remove {
+      --rel-icon-size: 14px;
+    }
+    :host([size="sm"]) .chip-remove {
+      --rel-icon-size: 12px;
+    }
+
+    /* ── Dark mode — Figma had no dark-mode sample for this new component
+       set. Fill stays unchanged (the saturated tones already read fine on
+       dark surfaces); Subtle gets a dark-tinted background, following the
+       same invert pattern used elsewhere in this design system. Flagged in
+       the handoff notes — adjust if exact values exist.
+       No [data-theme="dark"] :host(...) fallback here — :host() can never
+       be preceded by a combinator, so that form is invalid and silently
+       matches nothing (the exact bug hit and fixed multiple times in
+       rel-avatar/rel-select earlier this session). :host-context() alone
+       has universal modern browser support, so no fallback is needed. ── */
+    :host-context([data-theme="dark"])[tone="neutral"][variant="subtle"] .chip {
+      background: #333333;
+      color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"])[tone="danger"][variant="subtle"] .chip {
+      background: #3d1414;
+      color: #ff8080;
+    }
+
+    :host-context([data-theme="dark"])[tone="warning"][variant="subtle"] .chip {
+      background: #3d2e0a;
+      color: #ffd980;
+    }
+
+    :host-context([data-theme="dark"])[tone="success"][variant="subtle"] .chip {
+      background: #0d2e22;
+      color: #4ddba3;
+    }
+
+    :host-context([data-theme="dark"])[tone="info"][variant="subtle"] .chip {
+      background: #0a2e45;
+      color: #66c2ff;
+    }
+
+    :host-context([data-theme="dark"])[tone="neutral"][variant="fill"] .chip {
+      background: #f5f5f5;
+      color: #0b0b0b;
+    }
+
+    :host-context([data-theme="dark"]) .chip-remove:focus-visible {
+      outline-color: currentColor;
+    }
+  `;
+
+  private get classes() {
+    return "chip";
+  }
+
+  private handleRemove(event: Event) {
+    event.stopPropagation();
+    this.removed = true;
+
+    this.dispatchEvent(
+      new CustomEvent("removed", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private onDragStart = (e: DragEvent) => {
+    if (!this.draggableChip) return;
+    this.dragging = true;
+    e.dataTransfer?.setData("text/plain", this.label);
+  };
+
+  private onDragEnd = () => {
+    this.dragging = false;
+  };
+
+  protected updated(changed: Map<string, unknown>) {
+    if (changed.has("draggableChip")) {
+      if (this.draggableChip) {
+        this.setAttribute("draggable", "true");
+        this.addEventListener("dragstart", this.onDragStart);
+        this.addEventListener("dragend", this.onDragEnd);
+      } else {
+        this.removeAttribute("draggable");
+        this.removeEventListener("dragstart", this.onDragStart);
+        this.removeEventListener("dragend", this.onDragEnd);
+        this.dragging = false;
+      }
+    }
+    if (changed.has("dragging")) {
+      this.toggleAttribute("dragging", this.dragging);
+    }
+  }
+
+  render() {
+    const showAvatar = !!this.avatar;
+    const showLeadingIcon = !showAvatar && !!this.leadingIcon;
+
+    if (this.avatar && this.leadingIcon) {
+      console.warn(
+        "[rel-chip] leadingIcon and avatar are mutually exclusive. avatar takes precedence."
+      );
+    }
+
+    return html`
+      <span
+        class="${this.classes}"
+        role="button"
+        tabindex="0"
+        aria-label="${this.label}"
+      >
+        ${showAvatar
+          ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
+          : null}
+        ${showLeadingIcon
+          ? html`<rel-icon class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
+          : null}
+
+        <span class="chip-label">${this.label}</span>
+
+        ${this.trailingIcon
+          ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
+          : null}
+        ${this.removable
+          ? html`<button
+              class="chip-remove"
+              aria-label="Remove ${this.label}"
+              @click=${this.handleRemove}
+            >
+              <rel-icon name="close"></rel-icon>
+            </button>`
+          : null}
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-chip": RelChip;
+  }
+}

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

@@ -22,11 +22,11 @@ export class RelContainer extends LitElement {
     }
 
     .bg-white {
-      background-color: var(--rel-colors-white);
+      background-color: var(--rel-color-bg-primary);
     }
 
     .bg-light {
-      background-color: var(--rel-colors-gray-light);
+      background-color: var(--rel-color-bg-secondary);
     }
 
     .bg-none {