@reliability-design/web 1.4.4 → 1.4.6

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

@@ -1,243 +1,243 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "../rel-avatar/rel-avatar.js";
-
-export type TopbarProfileType = "avatar" | "carrier";
-export type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
-
-/**
- * `rel-topbar-profile` — Profile / user tile for the topbar right region.
- *
- * @deprecated Part of the deprecated rel-topbar family. Compose `rel-avatar`
- * directly inside the "App Topbar" recipe at /docs/recipes/app-topbar.
- *
- * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
- * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
- */
-@customElement("rel-topbar-profile")
-export class RelTopbarProfile extends LitElement {
-  /** Visual mode */
-  @property({ type: String, reflect: true }) type: TopbarProfileType = "avatar";
-
-  /** One or two initials shown in the avatar circle */
-  @property({ type: String }) initials?: string;
-
-  /** Primary display name */
-  @property({ type: String }) name?: string;
-
-  /** Secondary line (role, plan, etc.) */
-  @property({ type: String }) subtitle?: string;
-
-  /** Reward tier — only meaningful when type="carrier" */
-  @property({ type: String, reflect: true }) reward: TopbarRewardTier = "regular";
-
-  /** Compact mode — avatar only, no text */
-  @property({ type: Boolean, reflect: true }) compact = false;
-
-  static styles = css`
-    /* ─── Component tokens (reward tier palette) ────────────────────── */
-    :host {
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../rel-avatar/rel-avatar.js";
+
+export type TopbarProfileType = "avatar" | "carrier";
+export type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
+
+/**
+ * `rel-topbar-profile` — Profile / user tile for the topbar right region.
+ *
+ * @deprecated Part of the deprecated rel-topbar family. Compose `rel-avatar`
+ * directly inside the "Navbar" recipe at /docs/recipes/navbar.
+ *
+ * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
+ * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
+ */
+@customElement("rel-topbar-profile")
+export class RelTopbarProfile extends LitElement {
+  /** Visual mode */
+  @property({ type: String, reflect: true }) type: TopbarProfileType = "avatar";
+
+  /** One or two initials shown in the avatar circle */
+  @property({ type: String }) initials?: string;
+
+  /** Primary display name */
+  @property({ type: String }) name?: string;
+
+  /** Secondary line (role, plan, etc.) */
+  @property({ type: String }) subtitle?: string;
+
+  /** Reward tier — only meaningful when type="carrier" */
+  @property({ type: String, reflect: true }) reward: TopbarRewardTier = "regular";
+
+  /** Compact mode — avatar only, no text */
+  @property({ type: Boolean, reflect: true }) compact = false;
+
+  static styles = css`
+    /* ─── Component tokens (reward tier palette) ────────────────────── */
+    :host {
+      color: var(--rel-text-default);
+      --_profile-radius: var(--rel-border-radius-full-rounded, 1000px);
+      --_avatar-size: 36px;
+      --_avatar-size-sm: 28px;
+      --_avatar-bg: var(--rel-bg-brand);
+      --_avatar-color: var(--rel-text-default);
+
+      /* Reward tier colours (reference existing token palette) */
+      --rel-topbar-reward-gold: var(--rel-bg-warning);
+      --rel-topbar-reward-gold-bg: var(--rel-bg-warning-light);
+      --rel-topbar-reward-silver: var(--rel-text-caption);
+      --rel-topbar-reward-silver-bg: var(--rel-bg-neutral-elevated-1);
+      --rel-topbar-reward-platinum: var(--rel-text-info);
+      --rel-topbar-reward-platinum-bg: var(--rel-bg-info-light);
+      --rel-topbar-reward-bronze: var(--rel-text-warning);
+      --rel-topbar-reward-bronze-bg: var(--rel-bg-warning-light);
+      --rel-topbar-reward-regular: var(--rel-border-default);
+      --rel-topbar-reward-regular-bg: var(--rel-bg-surface-elevated);
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs, 8px);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
+      cursor: pointer;
+    }
+
+    /* ─── Name / subtitle stack ─────────────────────────────────────── */
+    .text-stack {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      min-width: 0;
+    }
+
+    :host([compact]) .text-stack {
+      display: none;
+    }
+
+    .name {
       color: var(--rel-text-default);
-      --_profile-radius: var(--rel-border-radius-full-rounded, 1000px);
-      --_avatar-size: 36px;
-      --_avatar-size-sm: 28px;
-      --_avatar-bg: var(--rel-bg-brand);
-      --_avatar-color: var(--rel-text-default);
-
-      /* Reward tier colours (reference existing token palette) */
-      --rel-topbar-reward-gold: var(--rel-bg-warning);
-      --rel-topbar-reward-gold-bg: var(--rel-bg-warning-light);
-      --rel-topbar-reward-silver: var(--rel-text-caption);
-      --rel-topbar-reward-silver-bg: var(--rel-bg-neutral-elevated-1);
-      --rel-topbar-reward-platinum: var(--rel-text-info);
-      --rel-topbar-reward-platinum-bg: var(--rel-bg-info-light);
-      --rel-topbar-reward-bronze: var(--rel-text-warning);
-      --rel-topbar-reward-bronze-bg: var(--rel-bg-warning-light);
-      --rel-topbar-reward-regular: var(--rel-border-default);
-      --rel-topbar-reward-regular-bg: var(--rel-bg-surface-elevated);
-
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
-      cursor: pointer;
-    }
-
-    /* ─── Name / subtitle stack ─────────────────────────────────────── */
-    .text-stack {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      min-width: 0;
-    }
-
-    :host([compact]) .text-stack {
-      display: none;
-    }
-
-    .name {
-      color: var(--rel-text-default);
-      white-space: nowrap;
-      overflow: hidden;
+      white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
-
+
       font-family: var(--rel-body-md-medium-font-family);
-
+
       font-weight: var(--rel-body-md-medium-font-weight);
-
+
       font-size: var(--rel-body-md-medium-font-size);
-
+
       line-height: var(--rel-body-md-medium-line-height);
-
+
       letter-spacing: var(--rel-body-md-medium-letter-spacing);
-
-    }
-
-    .subtitle {
-      color: var(--rel-text-placeholder);
-      white-space: nowrap;
-      overflow: hidden;
+
+    }
+
+    .subtitle {
+      color: var(--rel-text-placeholder);
+      white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
-
+
       font-family: var(--rel-body-sm-regular-font-family);
-
+
       font-weight: var(--rel-body-sm-regular-font-weight);
-
+
       font-size: var(--rel-body-sm-regular-font-size);
-
+
       line-height: var(--rel-body-sm-regular-line-height);
-
+
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-
-    }
-
-    /* ─── Carrier reward badge ──────────────────────────────────────── */
-    .reward-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-3xs, 2px);
-      padding: 2px var(--rel-spacing-2xs, 4px);
-      border-radius: var(--rel-border-radius-xs, 2px);
-      text-transform: uppercase;
+
+    }
+
+    /* ─── Carrier reward badge ──────────────────────────────────────── */
+    .reward-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-3xs, 2px);
+      padding: 2px var(--rel-spacing-2xs, 4px);
+      border-radius: var(--rel-border-radius-xs, 2px);
+      text-transform: uppercase;
       flex-shrink: 0;
       font-family: var(--rel-body-xs-semibold-font-family);
       font-weight: var(--rel-body-xs-semibold-font-weight);
       font-size: var(--rel-body-xs-semibold-font-size);
       line-height: var(--rel-body-xs-semibold-line-height);
       letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    /* Gold */
-    :host([reward="gold"]) .reward-badge {
-      background: var(--rel-topbar-reward-gold-bg);
-      color: var(--rel-topbar-reward-gold);
-    }
-
-    /* Silver */
-    :host([reward="silver"]) .reward-badge {
-      background: var(--rel-topbar-reward-silver-bg);
-      color: var(--rel-text-default);
-    }
-
-    /* Platinum */
-    :host([reward="platinum"]) .reward-badge {
-      background: var(--rel-topbar-reward-platinum-bg);
-      color: var(--rel-topbar-reward-platinum);
-    }
-
-    /* Bronze */
-    :host([reward="bronze"]) .reward-badge {
-      background: var(--rel-topbar-reward-bronze-bg);
-      color: var(--rel-topbar-reward-bronze);
-    }
-
-    /* Regular */
-    :host([reward="regular"]) .reward-badge {
-      background: var(--rel-topbar-reward-regular-bg);
-      color: var(--rel-text-default);
-    }
-
-    /* ─── Carrier tile shell ────────────────────────────────────────── */
-    .carrier-tile {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-xs, 8px);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      background: var(--rel-bg-surface-elevated);
-      border: var(--rel-stroke-sm, 1px) solid var(--rel-border-default);
-    }
-
-    :host([compact]) .carrier-tile {
-      padding: var(--rel-spacing-2xs, 4px);
-    }
-
-    .carrier-meta {
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-      min-width: 0;
-    }
-
-    :host([compact]) .carrier-meta {
-      display: none;
-    }
-  `;
-
-  render() {
-    if (this.type === "carrier") {
-      return this._renderCarrier();
-    }
-    return this._renderAvatar();
-  }
-
-  private _renderAvatar() {
-    return html`
-      <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">
-              ${this.name ? html`<span class="name">${this.name}</span>` : null}
-              ${this.subtitle ? html`<span class="subtitle">${this.subtitle}</span>` : null}
-            </div>
-          `
-        : null}
-    `;
-  }
-
-  private _avatarBg(): string {
-    const map: Record<string, string> = {
-      gold:     "var(--rel-bg-warning)",
-      platinum: "var(--rel-text-info)",
-      silver:   "var(--rel-text-caption)",
-      bronze:   "var(--rel-text-warning)",
-      regular:  "var(--rel-bg-brand)",
-    };
-    return map[this.reward] ?? "var(--rel-bg-brand)";
-  }
-
-  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">
-        <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>
-          ${this.subtitle ? html`<span class="subtitle">${this.subtitle}</span>` : null}
-        </div>
-      </div>
-    `;
-  }
-}
+    }
+
+    /* Gold */
+    :host([reward="gold"]) .reward-badge {
+      background: var(--rel-topbar-reward-gold-bg);
+      color: var(--rel-topbar-reward-gold);
+    }
+
+    /* Silver */
+    :host([reward="silver"]) .reward-badge {
+      background: var(--rel-topbar-reward-silver-bg);
+      color: var(--rel-text-default);
+    }
+
+    /* Platinum */
+    :host([reward="platinum"]) .reward-badge {
+      background: var(--rel-topbar-reward-platinum-bg);
+      color: var(--rel-topbar-reward-platinum);
+    }
+
+    /* Bronze */
+    :host([reward="bronze"]) .reward-badge {
+      background: var(--rel-topbar-reward-bronze-bg);
+      color: var(--rel-topbar-reward-bronze);
+    }
+
+    /* Regular */
+    :host([reward="regular"]) .reward-badge {
+      background: var(--rel-topbar-reward-regular-bg);
+      color: var(--rel-text-default);
+    }
+
+    /* ─── Carrier tile shell ────────────────────────────────────────── */
+    .carrier-tile {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs, 8px);
+      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-xs, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      background: var(--rel-bg-surface-elevated);
+      border: var(--rel-stroke-sm, 1px) solid var(--rel-border-default);
+    }
+
+    :host([compact]) .carrier-tile {
+      padding: var(--rel-spacing-2xs, 4px);
+    }
+
+    .carrier-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      min-width: 0;
+    }
+
+    :host([compact]) .carrier-meta {
+      display: none;
+    }
+  `;
+
+  render() {
+    if (this.type === "carrier") {
+      return this._renderCarrier();
+    }
+    return this._renderAvatar();
+  }
+
+  private _renderAvatar() {
+    return html`
+      <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">
+              ${this.name ? html`<span class="name">${this.name}</span>` : null}
+              ${this.subtitle ? html`<span class="subtitle">${this.subtitle}</span>` : null}
+            </div>
+          `
+        : null}
+    `;
+  }
+
+  private _avatarBg(): string {
+    const map: Record<string, string> = {
+      gold:     "var(--rel-bg-warning)",
+      platinum: "var(--rel-text-info)",
+      silver:   "var(--rel-text-caption)",
+      bronze:   "var(--rel-text-warning)",
+      regular:  "var(--rel-bg-brand)",
+    };
+    return map[this.reward] ?? "var(--rel-bg-brand)";
+  }
+
+  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">
+        <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>
+          ${this.subtitle ? html`<span class="subtitle">${this.subtitle}</span>` : null}
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` (icon variant) elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-button` (icon variant) elements inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 @customElement("rel-topbar-utilities")
 export class RelTopbarUtilities extends LitElement {