@reliability-design/web 1.2.0 → 1.3.1

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

@@ -1,17 +1,38 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+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";
 
-  // "yellow" renamed to "orange" — existing serialized "yellow" values will fall through to chip-yellow class (no match) and render unstyled
-  @property({ type: String })
-  tone: "default" | "blue" | "orange" | "red" | "green" = "default";
+  @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 }) leadingIcon?: string;
-  @property({ type: String }) trailingIcon?: string;
+  @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;
 
@@ -20,6 +41,15 @@ export class RelChip extends LitElement {
   /** 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;
@@ -34,108 +64,184 @@ export class RelChip extends LitElement {
     .chip {
       display: inline-flex;
       align-items: center;
+      box-sizing: border-box;
       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-100);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
-      gap: var(--rel-spacing-space-2xs);
+      font-weight: 500;
+      letter-spacing: -0.6px;
+      gap: 8px;
       cursor: pointer;
-      border: var(--rel-borders-width-stroke-100) solid transparent;
       user-select: none;
       white-space: nowrap;
+      outline: none;
       background: transparent;
+      transition: background-color 0.15s ease;
     }
 
-    .chip:hover {
-      filter: brightness(0.88);
-      box-shadow: var(--rel-shadows-shadow-100);
+    /* ── Size ── */
+    :host([size="lg"]) .chip {
+      height: 32px;
+      padding: 4px 8px;
+      font-size: 16px;
+      line-height: 24px;
     }
 
-    .chip:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
-      outline-offset: 2px;
+    :host([size="md"]) .chip {
+      height: 28px;
+      padding: 4px 8px;
+      font-size: 14px;
+      line-height: 22px;
     }
 
-    .chip:active {
-      filter: brightness(0.80);
-      box-shadow: var(--rel-shadows-shadow-200);
+    :host([size="sm"]) .chip {
+      height: 24px;
+      padding: 4px 8px;
+      font-size: 12px;
+      line-height: 20px;
     }
 
-    /* TONES — light (default) */
-    /* NOTE: #717171 has no exact vars-v2 token; nearest candidates are
-       --rel-colors-gray-toast-bg (#404040) and --rel-colors-gray-divider (#BDBDBD) */
-    .chip-default {
-      background: #717171;
-      color: var(--rel-colors-white);
+    /* ── 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;
     }
 
-    .chip-blue {
-      background: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-white);
+    :host([border="rounded"]) .chip {
+      border-radius: 1000px;
+      padding-left: 12px;
+      padding-right: 12px;
     }
 
-    .chip-orange {
-      background: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-white);
+    /* ── 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;
     }
 
-    .chip-red {
-      background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+    /* ── 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;
     }
 
-    .chip-green {
-      background: var(--rel-colors-green-tertiary);
-      color: var(--rel-colors-white);
+    :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);
     }
 
-    /* AVATAR — light mode (all tones)
-       rel-avatar uses background-color: var(--rel-colors-gray-disabled-text).
-       Overriding that custom property here pins avatar bg to white across all tones.
-       NOTE: rel-avatar hardcodes color: #ffffff — text color (#000000) cannot be
-       overridden from outside the shadow DOM without ::part() or a custom property
-       in rel-avatar itself. */
-    .chip rel-avatar {
-      display: inline-flex;
-      width: 20px !important;
-      height: 20px !important;
-      flex-shrink: 0;
-      font-size: 10px;
+    :host([dragging]) .chip {
+      cursor: grabbing;
     }
 
-    .chip-default rel-avatar,
-    .chip-blue rel-avatar,
-    .chip-orange rel-avatar,
-    .chip-red rel-avatar,
-    .chip-green rel-avatar {
-      --rel-colors-gray-disabled-text: #ffffff;
-      --rel-avatar-color: #000000;
+    /* ── 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;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
       flex-shrink: 0;
     }
 
-    .chip-icon * {
-      width: 100%;
-      height: 100%;
+    :host([variant="fill"]) .chip rel-avatar {
+      --rel-avatar-bg-fill: rgba(255, 255, 255, 0.25);
+      --rel-avatar-color-fill: #ffffff;
     }
 
-    .chip-icon ::slotted(svg),
-    .chip-icon svg {
-      width: 16px;
-      height: 16px;
-      fill: currentColor;
+    :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 {
-      margin-left: var(--rel-spacing-space-3xs);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
       cursor: pointer;
       opacity: 0.7;
       background: none;
@@ -151,78 +257,68 @@ export class RelChip extends LitElement {
     }
 
     .chip-remove:focus-visible {
-      outline: 2px solid var(--rel-colors-white);
+      outline: 1.5px solid currentColor;
       outline-offset: 1px;
       border-radius: 2px;
     }
 
-    /* DARK THEME */
-    /* NOTE: #717171 (chip-default dark color) has no exact vars-v2 token        */
-    /* NOTE: #FFFBF5 (chip-orange dark bg) has no exact vars-v2 token;
-       nearest is --rel-colors-gray-light (#FAFAFA)                              */
-
-    /* Reinforce layout — external dark-mode stylesheets can override display/width on the host */
-    :host-context([data-theme="dark"]) .chip {
-      display: inline-flex;
-      width: auto;
+    :host([size="lg"]) .chip-remove {
+      --rel-icon-size: 16px;
     }
-
-    :host-context([data-theme="dark"]) .chip-default {
-      /* --rel-colors-gray-screen-bg flips to #262626 in dark — hardcoded to preserve #EEEEEE */
-      background: #EEEEEE;
-      color: #717171;
+    :host([size="md"]) .chip-remove {
+      --rel-icon-size: 14px;
     }
-
-    :host-context([data-theme="dark"]) .chip-blue {
-      /* --rel-colors-blue-bg flips to #0f1e2c in dark mode — hardcoded to preserve #E1F2FF */
-      background: #E1F2FF;
-      color: var(--rel-colors-blue-tertiary);
+    :host([size="sm"]) .chip-remove {
+      --rel-icon-size: 12px;
     }
 
-    :host-context([data-theme="dark"]) .chip-orange {
-      background: #FFFBF5;
-      color: var(--rel-colors-yellow-pending);
+    /* ── 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"]) .chip-red {
-      background: var(--rel-colors-red-light);
-      color: var(--rel-colors-red-primary);
+    :host-context([data-theme="dark"])[tone="danger"][variant="subtle"] .chip {
+      background: #3d1414;
+      color: #ff8080;
     }
 
-    :host-context([data-theme="dark"]) .chip-green {
-      background: var(--rel-colors-green-bg-light);
-      color: var(--rel-colors-green-tertiary);
+    :host-context([data-theme="dark"])[tone="warning"][variant="subtle"] .chip {
+      background: #3d2e0a;
+      color: #ffd980;
     }
 
-    /* AVATAR — dark mode (per tone: bg = light fill color, text = white) */
-    :host-context([data-theme="dark"]) .chip-default rel-avatar {
-      --rel-colors-gray-disabled-text: #717171;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="success"][variant="subtle"] .chip {
+      background: #0d2e22;
+      color: #4ddba3;
     }
 
-    :host-context([data-theme="dark"]) .chip-blue rel-avatar {
-      --rel-colors-gray-disabled-text: #0059F4;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="info"][variant="subtle"] .chip {
+      background: #0a2e45;
+      color: #66c2ff;
     }
 
-    :host-context([data-theme="dark"]) .chip-orange rel-avatar {
-      --rel-colors-gray-disabled-text: #FFBF43;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="neutral"][variant="fill"] .chip {
+      background: #f5f5f5;
+      color: #0b0b0b;
     }
 
-    :host-context([data-theme="dark"]) .chip-red rel-avatar {
-      --rel-colors-gray-disabled-text: #CC0000;
-      --rel-avatar-color: #ffffff;
-    }
-
-    :host-context([data-theme="dark"]) .chip-green rel-avatar {
-      --rel-colors-gray-disabled-text: #00A86B;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"]) .chip-remove:focus-visible {
+      outline-color: currentColor;
     }
   `;
 
   private get classes() {
-    return ["chip", `chip-${this.tone}`].join(" ");
+    return "chip";
   }
 
   private handleRemove(event: Event) {
@@ -237,6 +333,34 @@ export class RelChip extends LitElement {
     );
   }
 
+  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;
@@ -258,17 +382,13 @@ export class RelChip extends LitElement {
           ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
           : null}
         ${showLeadingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.leadingIcon!)}
-            </span>`
+          ? html`<rel-icon class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
           : null}
 
         <span class="chip-label">${this.label}</span>
 
         ${this.trailingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.trailingIcon)}
-            </span>`
+          ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
           : null}
         ${this.removable
           ? html`<button
@@ -276,16 +396,16 @@ export class RelChip extends LitElement {
               aria-label="Remove ${this.label}"
               @click=${this.handleRemove}
             >
-              ✕
+              <rel-icon name="close"></rel-icon>
             </button>`
           : null}
       </span>
     `;
   }
+}
 
-  private renderIcon(iconString: string) {
-    const template = document.createElement("template");
-    template.innerHTML = iconString.trim();
-    return template.content.cloneNode(true);
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-chip": RelChip;
   }
 }