@reliability-design/web 1.2.0 → 1.3.1

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

@@ -1,96 +1,138 @@
-import "../../styles/vars-v2.css";
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-avatar")
-export class RelAvatar extends LitElement {
-  @property({ type: String, reflect: true })
-  size: "lg" | "md" | "sm" | "xs" = "md";
-
-  @property({ type: String, reflect: true })
-  type: "image" | "text" | "icon" = "image";
-
-  @property({ type: String }) src = "";
-  @property({ type: String }) text = "";
-  @property({ type: String }) alt = "Avatar";
-  @property({ type: String }) bg: string = "";
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-      font-family: var(--rel-fontFamilies-primary);
-    }
-
-    .avatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      overflow: hidden;
-
-      background-color: var(--rel-colors-gray-disabled-text);
-      color: var(--rel-avatar-color, #ffffff);
-      font-weight: var(--rel-fontWeights-bold);
-
-      user-select: none;
-      text-transform: uppercase;
-    }
-
-    /* Sizes */
-    .avatar-lg {
-      width: 40px;
-      height: 40px;
-      font-size: var(--rel-fontSizes-xl);
-    }
-
-    .avatar-md {
-      width: 32px;
-      height: 32px;
-      font-size: var(--rel-fontSizes-lg);
-    }
-
-    .avatar-sm {
-      width: 24px;
-      height: 24px;
-      font-size: var(--rel-fontSizes-md);
-    }
-
-    .avatar-xs {
-      width: 18px;
-      height: 18px;
-      font-size: var(--rel-fontSizes-xs);
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .icon-slot {
-      width: 100%;
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: #ffffff;
-    }
-
-    .icon-slot ::slotted(svg) {
-      width: 50%;
-      height: 50%;
-    }
-  `;
-
-  render() {
-    return html`
-      <div class="avatar avatar-${this.size}" style=${this.bg ? `background-color: ${this.bg}` : ""}>
-        ${this.type === "image" && this.src
-          ? html`<img src=${this.src} alt=${this.alt} />`
-          : this.type === "text"
-          ? html`<span>${this.text}</span>`
-          : html`<span class="icon-slot"><slot></slot></span>`}
-      </div>
-    `;
-  }
-}
+import "../../styles/vars-v2.css";
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-avatar")
+export class RelAvatar extends LitElement {
+  @property({ type: String, reflect: true })
+  size: "lg" | "md" | "sm" | "xs" = "md";
+
+  @property({ type: String, reflect: true })
+  type: "image" | "text" | "icon" = "image";
+
+  @property({ type: String, reflect: true })
+  variant: "fill" | "subtle" | "outline" = "fill";
+
+  @property({ type: String }) src = "";
+  @property({ type: String }) text = "";
+  @property({ type: String }) alt = "Avatar";
+  @property({ type: String }) bg: string = "";
+  @property({ type: String }) color: string = "";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+      box-sizing: border-box;
+      border: var(--rel-borders-width-stroke-100, 1px) solid transparent;
+      font-weight: var(--rel-fontWeights-semibold);
+      user-select: none;
+      text-transform: uppercase;
+    }
+
+    /* ── Variants ─────────────────────────────────────────────── */
+
+    :host([variant="fill"]) .avatar {
+      background-color: var(--rel-avatar-bg-fill, #0b0b0b);
+      color: var(--rel-avatar-color-fill, #ffffff);
+    }
+
+    :host([variant="subtle"]) .avatar {
+      background-color: var(--rel-avatar-bg-subtle, #f5f5f5);
+      color: var(--rel-avatar-color-subtle, #0b0b0b);
+    }
+
+    :host([variant="outline"]) .avatar {
+      background-color: transparent;
+      border-color: var(--rel-avatar-border-outline, var(--rel-color-border-default));
+      color: var(--rel-avatar-color-outline, #0b0b0b);
+    }
+
+    /* ── Sizes ────────────────────────────────────────────────── */
+
+    .avatar-lg {
+      width: 40px;
+      height: 40px;
+      font-size: var(--rel-fontSizes-lg); /* 20px */
+    }
+
+    .avatar-md {
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+    }
+
+    .avatar-sm {
+      width: 24px;
+      height: 24px;
+      font-size: var(--rel-fontSizes-sm); /* 12px */
+    }
+
+    .avatar-xs {
+      width: 20px;
+      height: 20px;
+      font-size: var(--rel-fontSizes-xs); /* 10px */
+    }
+
+    /* ── Image ────────────────────────────────────────────────── */
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* ── Icon slot ────────────────────────────────────────────── */
+
+    .icon-slot {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+    }
+
+    .icon-slot ::slotted(svg) {
+      width: 50%;
+      height: 50%;
+    }
+
+    /* ── Dark mode ────────────────────────────────────────────────
+       :host() can never be preceded by a combinator inside a shadow-tree
+       stylesheet, so ":host-context(dark) :host([variant=...]) .avatar"
+       (the previous approach) is invalid and silently matches nothing.
+       Instead, redefine the same custom properties the variant rules
+       above already read via var(--token, fallback) — a plain
+       :host-context() selector with no compounding, guaranteed valid. ── */
+
+    :host-context([data-theme="dark"]) {
+      --rel-avatar-bg-fill: #ffffff;
+      --rel-avatar-color-fill: #0b0b0b;
+      --rel-avatar-bg-subtle: #2b2b2b;
+      --rel-avatar-color-subtle: #f5f5f5;
+      --rel-avatar-border-outline: #525252;
+      --rel-avatar-color-outline: #f5f5f5;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="avatar avatar-${this.size}" style=${[this.bg ? `background-color:${this.bg}` : "", this.color ? `color:${this.color}` : ""].filter(Boolean).join(";")}>
+        ${this.type === "image" && this.src
+          ? html`<img src=${this.src} alt=${this.alt} />`
+          : this.type === "text"
+          ? html`<span>${this.text}</span>`
+          : html`<span class="icon-slot"><slot></slot></span>`}
+      </div>
+    `;
+  }
+}

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

@@ -25,6 +25,11 @@ A simple notification badge component displaying numeric counts or dot indicator
 <rel-badge number="1" size="sm"></rel-badge>
 <rel-badge number="2" size="md"></rel-badge>
 <rel-badge number="3" size="lg"></rel-badge>
+
+<!-- Custom colors -->
+<rel-badge number="3" color="#7d7d7d"></rel-badge>
+<rel-badge number="3" color="teal" text-color="#1a1a1a"></rel-badge>
+<rel-badge variant="dot" color="lavender"></rel-badge>
 ```
 
 ## API
@@ -35,6 +40,8 @@ A simple notification badge component displaying numeric counts or dot indicator
 | `number` | `string` | `""` | Text to display in number variant (can be numeric or text like "99+") |
 | `size` | `"sm" \| "md" \| "lg"` (reflected) | `"md"` | Size variant |
 | `variant` | `"dot" \| "number"` (reflected) | `"number"` | Display mode (number shows text, dot shows indicator only) |
+| `color` | `string` (reflected) | `""` | Direct CSS color override for the badge background. Accepts any valid CSS color (hex, rgb, hsl, named, `var(...)`). Falls back to the default token when empty |
+| `text-color` | `string` (reflected) | `""` | Direct CSS color override for the badge text/icon color. Accepts any valid CSS color. Falls back to white when empty |
 
 ## Events
 None.

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

@@ -16,6 +16,24 @@ export class RelBadge extends LitElement {
   @property({ type: String, reflect: true })
   variant: "dot" | "number" = "number";
 
+  /**
+   * Direct CSS color override for the badge background. Accepts any valid
+   * CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
+   *
+   * Clear it (set to `''`) to fall back to the default token.
+   */
+  @property({ type: String, reflect: true })
+  color = "";
+
+  /**
+   * Direct CSS color override for the badge text/icon color. Accepts any
+   * valid CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
+   *
+   * Clear it (set to `''`) to fall back to the default (white).
+   */
+  @property({ type: String, reflect: true, attribute: "text-color" })
+  textColor = "";
+
   static styles = css`
     :host {
       display: inline-flex;
@@ -25,46 +43,63 @@ export class RelBadge extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      box-sizing: border-box;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-error-surface-default);
-      color: #ffffff;
-      border-radius: 50%;
+      background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
+      color: var(--rel-badge-color, #ffffff);
+      /* Large fixed radius (not 50%) — stays a perfect circle for 1-2 digits,
+         but becomes a pill instead of clipping when content like "999+"
+         is wider than the minimum circle. */
+      border-radius: 999px;
+      white-space: nowrap;
     }
 
-    /* NUMBER BADGES */
+    /* NUMBER BADGES — min-width (not width) lets multi-character content
+       like "999+" grow the badge into a pill instead of overflowing a fixed circle. */
     .badge-sm {
-      width: 20px;
+      min-width: 20px;
       height: 20px;
+      padding: 0 4px;
       font-size: var(--rel-fontSizes-xs, 12px);
     }
 
     .badge-md {
-      width: 28px;
+      min-width: 28px;
       height: 28px;
+      padding: 0 6px;
       font-size: var(--rel-fontSizes-sm, 14px);
     }
 
     .badge-lg {
-      width: 40px;
+      min-width: 40px;
       height: 40px;
+      padding: 0 8px;
       font-size: var(--rel-fontSizes-lg, 20px);
     }
 
-    /* DOT BADGES */
+    /* DOT BADGES — explicitly reset min-width/padding inherited from the
+       number-badge size rules above; otherwise min-width wins over this
+       smaller width and the dot gets stretched into a squashed pill. */
     .badge-dot.badge-sm {
       width: 8px;
       height: 8px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-md {
       width: 10px;
       height: 10px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-lg {
       width: 12px;
       height: 12px;
+      min-width: 0;
+      padding: 0;
     }
   `;
 
@@ -72,6 +107,24 @@ export class RelBadge extends LitElement {
     return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
   }
 
+  override updated(changedProperties: Map<PropertyKey, unknown>): void {
+    if (changedProperties.has("color")) {
+      if (this.color) {
+        this.style.setProperty("--rel-badge-bg", this.color);
+      } else {
+        this.style.removeProperty("--rel-badge-bg");
+      }
+    }
+
+    if (changedProperties.has("textColor")) {
+      if (this.textColor) {
+        this.style.setProperty("--rel-badge-color", this.textColor);
+      } else {
+        this.style.removeProperty("--rel-badge-color");
+      }
+    }
+  }
+
   render() {
     return html`
       <span class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>

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

@@ -1,4 +1,5 @@
 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";
@@ -23,9 +24,33 @@ 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 {
       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 {
@@ -76,6 +101,10 @@ export class RelButton extends LitElement {
     /* Disabled */
     :host([disabled]) {
       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 {
@@ -245,6 +274,27 @@ export class RelButton extends LitElement {
     /* btn-link: blue in both modes — no dark override */
   `;
 
+  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) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  };
+
   private get classes() {
     return [
       `btn-${this.variant}`,
@@ -261,16 +311,15 @@ export class RelButton extends LitElement {
       return;
     }
 
-    // Re-emit click from host (Angular-friendly)
-    this.dispatchEvent(
-      new MouseEvent("click", {
-        bubbles: true,
-        composed: true,
-      })
-    );
+    // 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
         class="${this.classes}"
@@ -281,6 +330,14 @@ export class RelButton extends LitElement {
       >
         <slot></slot>
       </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-chip/README.md

@@ -17,6 +17,9 @@ A compact chip component for displaying tags, labels, or selected options. Suppo
 <!-- Outline variant -->
 <rel-chip label="Outline Style" tone="blue" outline></rel-chip>
 
+<!-- Small size variant -->
+<rel-chip label="Small" size="sm" tone="blue"></rel-chip>
+
 <!-- With avatar -->
 <rel-chip id="avatarChip" label="John Doe" avatar="./user.jpg"></rel-chip>
 
@@ -43,6 +46,7 @@ A compact chip component for displaying tags, labels, or selected options. Suppo
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `"Label"` | Text displayed on the chip |
+| `size` (reflected) | `"sm" \| "md"` | `"md"` | Chip size variant |
 | `tone` | `"default" \| "blue" \| "yellow" \| "red" \| "green"` | `"default"` | Color tone variant |
 | `leadingIcon` | `string` | - | SVG or HTML string for leading icon |
 | `trailingIcon` | `string` | - | SVG or HTML string for trailing icon |
@@ -103,6 +107,9 @@ None exposed.
 - Remove button focus: 2px white outline with 1px offset
 
 ## Notes / Edge Cases
+- **Size variants**:
+  - **md** (default): `--rel-fontSizes-md` text, `--rel-spacing-space-2xs`/`--rel-spacing-space-xs` padding, 20px × 20px avatar, 16px × 16px icons
+  - **sm**: `--rel-fontSizes-sm` text, `--rel-spacing-space-3xs`/`--rel-spacing-space-2xs` padding, 16px × 16px avatar, 12px × 12px icons
 - Icons (`leadingIcon`, `trailingIcon`) must be passed as raw HTML/SVG strings via JavaScript (see examples)
 - Icons are injected using `renderIcon()` which creates a template element and clones the content
 - Avatar images are 20px × 20px circular (`border-radius: 50%`, `object-fit: cover`)