@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,94 +1,138 @@
-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";
-
-  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: #9E9E9E;
-      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}">
-        ${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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -15,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;
@@ -26,8 +45,8 @@ export class RelBadge extends LitElement {
       justify-content: center;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-colors-red-primary);
-      color: #ffffff;
+      background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
+      color: var(--rel-badge-color, #ffffff);
       border-radius: 50%;
     }
 
@@ -71,6 +90,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-breadcrumb/rel-breadcrumb.ts

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -38,25 +39,24 @@ export class RelBreadcrumbs extends LitElement {
 
     a {
       text-decoration: none;
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-heading, #2b2b2b);
-      transition: color 0.2s ease;
+      font-weight: var(--rel-fontWeights-regular);
+      color: var(--rel-color-text-primary);
     }
 
     a:hover {
       text-decoration: underline;
-      color: var(--rel-colors-blue-primary, #0091ea);
+      color: var(--rel-color-text-primary);
     }
 
     a:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
       border-radius: 2px;
     }
 
     .current {
       font-weight: var(--rel-fontWeights-bold);
-      color: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-color-text-primary);
       cursor: default;
     }
 

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -9,7 +10,7 @@ export class RelButton extends LitElement {
     "default";
 
   @property({ type: String })
-  tone: "default" | "critical" | "success" = "default";
+  tone: "default" | "primary" | "secondary" | "critical" | "success" = "default";
 
   @property({ type: String })
   size: "small" | "medium" | "large" = "medium";
@@ -75,13 +76,17 @@ 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 {
       cursor: not-allowed;
       background-color: var(--rel-color-bg-tertiary) !important;
       color: var(--rel-color-text-disabled) !important;
-      border: 1px solid var(--rel-color-border-default) !important;
+      border: none !important;
       pointer-events: none;
       filter: none !important;
     }
@@ -90,7 +95,6 @@ export class RelButton extends LitElement {
     :host([disabled]):host-context(.dark) button {
       background-color: var(--rel-color-bg-tertiary) !important;
       color: var(--rel-color-text-disabled) !important;
-      border-color: var(--rel-color-border-default) !important;
     }
 
     /* Variants & tones (unchanged) */
@@ -99,12 +103,12 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
     .btn-default.tone-critical {
-      background: var(--rel-colors-red-primary);
+      background: var(--rel-error-surface-default);
       color: #ffffff;
     }
     .btn-default.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-primary.tone-default {
@@ -112,12 +116,12 @@ export class RelButton extends LitElement {
       color: #000000;
     }
     .btn-primary.tone-critical {
-      background: var(--rel-colors-red-primary);
+      background: var(--rel-error-surface-default);
       color: #ffffff;
     }
     .btn-primary.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-secondary {
@@ -142,8 +146,31 @@ export class RelButton extends LitElement {
       height: 40px;
       padding: 0;
       border-radius: 50%;
+    }
+    .btn-icon.tone-default {
       background: var(--rel-colors-gray-light);
       color: var(--rel-colors-black);
+      border: none;
+    }
+    .btn-icon.tone-primary {
+      background: var(--rel-colors-green-primary);
+      color: #000000;
+      border: none;
+    }
+    .btn-icon.tone-secondary {
+      background: var(--rel-colors-white);
+      color: var(--rel-colors-black);
+      border: 1px solid var(--rel-color-border-strong);
+    }
+    .btn-icon.tone-success {
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
+      border: none;
+    }
+    .btn-icon.tone-critical {
+      background: var(--rel-error-surface-default);
+      color: #ffffff;
+      border: none;
     }
 
     button.btn-primary.tone-default:hover:not(:disabled) {
@@ -158,7 +185,8 @@ export class RelButton extends LitElement {
       filter: brightness(0.9);
     }
 
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default) {
+    /* 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);
     }
 
@@ -166,39 +194,82 @@ export class RelButton extends LitElement {
       filter: brightness(0.85);
     }
 
+    /* Icon hover — each tone matches its corresponding button variant */
+    button.btn-icon.tone-default:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-primary:hover:not(:disabled) {
+      background: var(--rel-color-brand-hover);
+    }
+    button.btn-icon.tone-secondary:hover:not(:disabled) {
+      background: var(--rel-color-bg-hover);
+    }
+    button.btn-icon.tone-success:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-critical:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
     button:active:not(:disabled) {
       transform: scale(0.97);
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
     /* 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: #ffffff;
+      outline-color: var(--rel-color-text-primary);
     }
 
     :host-context([data-theme="dark"]) button.btn-secondary,
-    :host-context(.dark) button.btn-secondary {
-      background: #000000;
-      border-color: #ffffff;
-      color: #ffffff;
+    :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: #ffffff;
+      color: var(--rel-color-text-primary);
     }
 
-    :host-context([data-theme="dark"]) button.btn-link,
-    :host-context(.dark) button.btn-link {
-      color: #ffffff;
-    }
+    /* 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}`,
@@ -215,13 +286,10 @@ 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() {

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 interface CalendarDay {
   date: Date;
@@ -69,16 +70,16 @@ export class RelCalendar extends LitElement {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--rel-colors-gray-primary);
+      color: var(--rel-color-text-primary);
       transition: background-color 0.15s ease;
     }
 
     .nav-button:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-color-bg-secondary);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -92,7 +93,7 @@ export class RelCalendar extends LitElement {
       text-align: center;
       font-size: var(--rel-fontSizes-xs);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       padding: var(--rel-spacing-space-xs);
       text-transform: uppercase;
     }
@@ -116,23 +117,23 @@ export class RelCalendar extends LitElement {
     }
 
     .day-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-color-border-focus);
+      border: 2px solid var(--rel-color-brand);
     }
 
     .day-button.selected {
       background: var(--rel-color-brand);
-      color: var(--rel-color-text-inverse);
+      color: #000000;
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .day-button.other-month {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       opacity: 0.5;
     }
 
@@ -145,6 +146,12 @@ export class RelCalendar extends LitElement {
     .day-button:disabled:hover {
       background: transparent;
     }
+
+    :host-context([data-theme="dark"]) :host,
+    :host-context(.dark) :host {
+      background: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
+    }
   `;
 
   connectedCallback() {