@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,123 +1,123 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type TooltipPosition = "above" | "below";
-
-@customElement("rel-tooltip")
-export class RelTooltip extends LitElement {
-  @property({ type: String }) text: string = "";
-  @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
-    false;
-
-  // Stable id so aria-describedby can reference the bubble across renders.
-  private uniqueId = Math.random().toString(36).slice(2);
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: #1a1a1a;
-      color: #ffffff;
-      padding: var(--rel-spacing-space-xs, 8px)
-        var(--rel-spacing-space-sm, 12px);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      overflow: visible;
-    }
-
-    :host(:hover) .tooltip-bubble,
-    :host(:focus-within) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 8px);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 8px);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      display: block;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid #1a1a1a;
-      border-bottom: none;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid #1a1a1a;
-      border-top: none;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble,
-    :host-context(.dark) .tooltip-bubble {
-      background-color: #ffffff;
-      color: #000000;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble.above .tooltip-tail,
-    :host-context(.dark) .tooltip-bubble.above .tooltip-tail {
-      border-top-color: #ffffff;
-    }
-
-    :host-context([data-theme="dark"]) .tooltip-bubble.below .tooltip-tail,
-    :host-context(.dark) .tooltip-bubble.below .tooltip-tail {
-      border-bottom-color: #ffffff;
-    }
-  `;
-
-  firstUpdated() {
-    this.linkTrigger();
-  }
-
-  private linkTrigger() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) return;
-    const trigger = slot.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
-    }
-  }
-
-  render() {
-    return html`
-      <slot @slotchange="${this.linkTrigger}"></slot>
-      <div
-        class="tooltip-bubble ${this.position}"
-        id="tooltip-${this.uniqueId}"
-        role="tooltip"
-      >
-        ${this.text}
-        ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type TooltipPosition = "above" | "below";
+
+@customElement("rel-tooltip")
+export class RelTooltip extends LitElement {
+  @property({ type: String }) text: string = "";
+  @property({ type: String }) position: TooltipPosition = "above";
+  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
+    false;
+
+  // Stable id so aria-describedby can reference the bubble across renders.
+  private uniqueId = Math.random().toString(36).slice(2);
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    /* Tooltip container */
+    .tooltip-bubble {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #1a1a1a;
+      color: #ffffff;
+      padding: var(--rel-spacing-space-xs, 8px)
+        var(--rel-spacing-space-sm, 12px);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+      overflow: visible;
+    }
+
+    :host(:hover) .tooltip-bubble,
+    :host(:focus-within) .tooltip-bubble {
+      opacity: 1;
+    }
+
+    /* Positioning */
+    .tooltip-bubble.above {
+      bottom: calc(100% + 8px);
+    }
+
+    .tooltip-bubble.below {
+      top: calc(100% + 8px);
+    }
+
+    /* Tail/Arrow */
+    .tooltip-tail {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      display: block;
+    }
+
+    .tooltip-bubble.above .tooltip-tail {
+      bottom: -6px;
+      border-top: 6px solid #1a1a1a;
+      border-bottom: none;
+    }
+
+    .tooltip-bubble.below .tooltip-tail {
+      top: -6px;
+      border-bottom: 6px solid #1a1a1a;
+      border-top: none;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble,
+    :host-context(.dark) .tooltip-bubble {
+      background-color: #ffffff;
+      color: #000000;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.above .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.above .tooltip-tail {
+      border-top-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.below .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.below .tooltip-tail {
+      border-bottom-color: #ffffff;
+    }
+  `;
+
+  firstUpdated() {
+    this.linkTrigger();
+  }
+
+  private linkTrigger() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const trigger = slot.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+    }
+  }
+
+  render() {
+    return html`
+      <slot @slotchange="${this.linkTrigger}"></slot>
+      <div
+        class="tooltip-bubble ${this.position}"
+        id="tooltip-${this.uniqueId}"
+        role="tooltip"
+      >
+        ${this.text}
+        ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
+      </div>
+    `;
+  }
+}

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-actions")
 export class RelTopbarActions extends LitElement {

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-brand")
 export class RelTopbarBrand extends LitElement {

package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts

@@ -1,15 +1,17 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-dropdown-item")
 export class RelTopbarDropdownItem extends LitElement {
   @property({ type: String }) label: string = "";
   @property({ type: String }) href: string = "#";
+  @property({ type: Boolean, reflect: true }) active = false;
 
   static styles = css`
     .dropdown-item {
       display: block;
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);
       color: var(--rel-color-text-primary);
       text-decoration: none;
       font-size: var(--rel-fontSizes-md);
@@ -18,11 +20,39 @@ export class RelTopbarDropdownItem extends LitElement {
 
     .dropdown-item:hover {
       background: var(--rel-color-bg-hover);
+      border-radius: 0;
     }
+
+    :host([active]) .dropdown-item {
+      color: var(--rel-topbar-item-active-color, var(--rel-colors-green-tertiary, #00a86b));
+      font-weight: var(--rel-fontWeights-semibold, 600);
+    }
+
   `;
 
+  private _handleClick(e: MouseEvent) {
+    if (this.hasAttribute("disabled")) {
+      e.preventDefault();
+      return;
+    }
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent("rel-select", {
+      detail: { value: this.href, label: this.label },
+      bubbles: true,
+      composed: true,
+    }));
+    this.dispatchEvent(new CustomEvent("rel-nav-select", {
+      detail: { value: this.href, label: this.label },
+      bubbles: true,
+      composed: true,
+    }));
+    this.active = true;
+    const siblings = this.parentElement?.querySelectorAll("rel-topbar-dropdown-item");
+    siblings?.forEach(s => { if (s !== this) (s as any).active = false; });
+  }
+
   render() {
-    return html`<a href="${this.href}" class="dropdown-item">${this.label}</a>`;
+    return html`<a href="${this.href}" class="dropdown-item" @click=${this._handleClick}>${this.label}</a>`;
   }
 }
 

package/dist/components/rel-topbar/rel-topbar-dropdown.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-dropdown")
 export class RelTopbarDropdown extends LitElement {
@@ -9,7 +10,6 @@ export class RelTopbarDropdown extends LitElement {
       flex-direction: column;
       min-width: 160px;
       background: var(--rel-color-bg-primary);
-      border: 1px solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadow-200);
       padding: var(--rel-spacing-space-2xs) 0;

package/dist/components/rel-topbar/rel-topbar-item.ts

@@ -2,6 +2,8 @@ import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "./rel-topbar-dropdown";
 import "./rel-topbar-dropdown-item";
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
 
 /**
  * `rel-topbar-item` — A navigation item within rel-topbar.
@@ -57,6 +59,10 @@ export class RelTopbarItem extends LitElement {
       font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
     }
 
+    :host([hidden]) {
+      display: none !important;
+    }
+
     /* ─── Trigger (shared for <a> and <button>) ─────────────────────── */
     .trigger {
       display: inline-flex;
@@ -113,6 +119,10 @@ export class RelTopbarItem extends LitElement {
     }
 
     /* Disabled */
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
     :host([disabled]) .trigger {
       opacity: 0.45;
       cursor: not-allowed;
@@ -149,8 +159,8 @@ export class RelTopbarItem extends LitElement {
       top: calc(100% + 6px);
       left: 0;
       min-width: 200px;
-      background: var(--rel-colors-white, #fff);
-      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-border-default, #ddd);
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: var(--rel-spacing-space-2xs, 4px);
@@ -263,7 +273,9 @@ export class RelTopbarItem extends LitElement {
       <slot>${this.label ?? ""}</slot>
       <span class="suffix"><slot name="suffix"></slot></span>
       ${showChevron
-        ? html`<span class="chevron" aria-hidden="true">${_iconChevron()}</span>`
+        ? html`<span class="chevron" aria-hidden="true">
+            <rel-icon name="chevron-down" size="sm"></rel-icon>
+          </span>`
         : null}
     `;
 
@@ -306,10 +318,3 @@ export class RelTopbarItem extends LitElement {
   }
 }
 
-function _iconChevron() {
-  return html`
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
-      <path d="M3 5L7 9L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  `;
-}

package/dist/components/rel-topbar/rel-topbar-mobile-panel.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-mobile-panel")
 export class RelTopbarMobilePanel extends LitElement {

package/dist/components/rel-topbar/rel-topbar-profile.ts

@@ -1,5 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "../rel-avatar/rel-avatar.js";
 
 export type TopbarProfileType = "avatar" | "carrier";
 export type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
@@ -37,7 +39,7 @@ export class RelTopbarProfile extends LitElement {
       --_avatar-size: 36px;
       --_avatar-size-sm: 28px;
       --_avatar-bg: var(--rel-colors-green-primary, #00f49c);
-      --_avatar-color: var(--rel-colors-gray-primary, #333);
+      --_avatar-color: var(--rel-color-text-primary);
 
       /* Reward tier colours (reference existing token palette) */
       --rel-topbar-reward-gold: var(--rel-colors-gold, #d6ba00);
@@ -49,7 +51,7 @@ export class RelTopbarProfile extends LitElement {
       --rel-topbar-reward-bronze: var(--rel-colors-bronze, #7d5300);
       --rel-topbar-reward-bronze-bg: var(--rel-colors-bronze-secondary, #e2dac7);
       --rel-topbar-reward-regular: var(--rel-colors-gray-divider, #bdbdbd);
-      --rel-topbar-reward-regular-bg: var(--rel-surface-secondary, #fafafa);
+      --rel-topbar-reward-regular-bg: var(--rel-color-bg-secondary);
 
       display: inline-flex;
       align-items: center;
@@ -58,27 +60,6 @@ export class RelTopbarProfile extends LitElement {
       cursor: pointer;
     }
 
-    /* ─── Avatar circle ─────────────────────────────────────────────── */
-    .avatar {
-      width: var(--_avatar-size);
-      height: var(--_avatar-size);
-      border-radius: var(--_profile-radius);
-      background: var(--_avatar-bg);
-      color: var(--_avatar-color);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      flex-shrink: 0;
-      user-select: none;
-    }
-
-    :host([compact]) .avatar {
-      width: var(--_avatar-size-sm);
-      height: var(--_avatar-size-sm);
-    }
-
     /* ─── Name / subtitle stack ─────────────────────────────────────── */
     .text-stack {
       display: flex;
@@ -94,7 +75,7 @@ export class RelTopbarProfile extends LitElement {
     .name {
       font-size: var(--rel-fontSizes-md, 14px);
       font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-color-text-primary);
       line-height: var(--rel-lineHeights-md, 20px);
       white-space: nowrap;
       overflow: hidden;
@@ -104,7 +85,7 @@ export class RelTopbarProfile extends LitElement {
     .subtitle {
       font-size: var(--rel-fontSizes-sm, 12px);
       font-weight: var(--rel-fontWeights-regular, 400);
-      color: var(--rel-text-placeholder, #a9a9a9);
+      color: var(--rel-color-text-placeholder);
       line-height: var(--rel-lineHeights-sm, 18px);
       white-space: nowrap;
       overflow: hidden;
@@ -126,56 +107,30 @@ export class RelTopbarProfile extends LitElement {
     }
 
     /* Gold */
-    :host([reward="gold"]) .avatar {
-      background: var(--rel-topbar-reward-gold-bg);
-      color: var(--rel-topbar-reward-gold);
-      border: 1.5px solid var(--rel-topbar-reward-gold);
-    }
     :host([reward="gold"]) .reward-badge {
       background: var(--rel-topbar-reward-gold-bg);
       color: var(--rel-topbar-reward-gold);
     }
 
     /* Silver */
-    :host([reward="silver"]) .avatar {
-      background: var(--rel-topbar-reward-silver-bg);
-      color: var(--rel-colors-gray-primary, #333);
-      border: 1.5px solid var(--rel-topbar-reward-silver);
-    }
     :host([reward="silver"]) .reward-badge {
       background: var(--rel-topbar-reward-silver-bg);
       color: var(--rel-colors-gray-primary, #333);
     }
 
     /* Platinum */
-    :host([reward="platinum"]) .avatar {
-      background: var(--rel-topbar-reward-platinum-bg);
-      color: var(--rel-topbar-reward-platinum);
-      border: 1.5px solid var(--rel-topbar-reward-platinum);
-    }
     :host([reward="platinum"]) .reward-badge {
       background: var(--rel-topbar-reward-platinum-bg);
       color: var(--rel-topbar-reward-platinum);
     }
 
     /* Bronze */
-    :host([reward="bronze"]) .avatar {
-      background: var(--rel-topbar-reward-bronze-bg);
-      color: var(--rel-topbar-reward-bronze);
-      border: 1.5px solid var(--rel-topbar-reward-bronze);
-    }
     :host([reward="bronze"]) .reward-badge {
       background: var(--rel-topbar-reward-bronze-bg);
       color: var(--rel-topbar-reward-bronze);
     }
 
     /* Regular */
-    :host([reward="regular"]) .avatar,
-    :host(:not([reward])) .avatar {
-      background: var(--rel-topbar-reward-regular-bg);
-      color: var(--rel-colors-gray-primary, #333);
-      border: 1.5px solid var(--rel-topbar-reward-regular);
-    }
     :host([reward="regular"]) .reward-badge {
       background: var(--rel-topbar-reward-regular-bg);
       color: var(--rel-colors-gray-primary, #333);
@@ -189,7 +144,7 @@ export class RelTopbarProfile extends LitElement {
       padding: var(--rel-spacing-space-2xs, 4px) var(--rel-spacing-space-xs, 8px);
       border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       background: var(--rel-surface-secondary, #fafafa);
-      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-border-default, #ddd);
+      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-color-border-default);
     }
 
     :host([compact]) .carrier-tile {
@@ -217,9 +172,12 @@ export class RelTopbarProfile extends LitElement {
 
   private _renderAvatar() {
     return html`
-      <div class="avatar" aria-hidden="true">
-        ${this.initials ?? ""}
-      </div>
+      <rel-avatar
+        type="text"
+        text=${this.initials ?? ""}
+        size=${this.compact ? "xs" : "sm"}
+        bg=${this._avatarBg()}
+      ></rel-avatar>
       ${!this.compact && (this.name || this.subtitle)
         ? html`
             <div class="text-stack">
@@ -231,12 +189,28 @@ export class RelTopbarProfile extends LitElement {
     `;
   }
 
+  private _avatarBg(): string {
+    const map: Record<string, string> = {
+      gold:     "var(--rel-colors-gold)",
+      platinum: "var(--rel-colors-platinum)",
+      silver:   "var(--rel-colors-silver)",
+      bronze:   "var(--rel-colors-bronze)",
+      regular:  "var(--rel-colors-green-primary)",
+    };
+    return map[this.reward] ?? "var(--rel-colors-green-primary)";
+  }
+
   private _renderCarrier() {
     const rewardLabel = this.reward.charAt(0).toUpperCase() + this.reward.slice(1);
 
     return html`
       <div class="carrier-tile" role="img" aria-label="${this.name ?? "Profile"} – ${rewardLabel} member">
-        <div class="avatar">${this.initials ?? ""}</div>
+        <rel-avatar
+          type="text"
+          text=${this.initials ?? ""}
+          size="sm"
+          bg=${this._avatarBg()}
+        ></rel-avatar>
         <div class="carrier-meta">
           ${this.name ? html`<span class="name">${this.name}</span>` : null}
           <span class="reward-badge">${rewardLabel}</span>

package/dist/components/rel-topbar/rel-topbar-utilities.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-topbar-utilities")
 export class RelTopbarUtilities extends LitElement {