@reliability-design/web 1.0.6 → 1.1.1

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

@@ -0,0 +1,248 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.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.
+ *
+ * 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 {
+      --_profile-radius: var(--rel-borders-radius-border-radius-500, 1000px);
+      --_avatar-size: 36px;
+      --_avatar-size-sm: 28px;
+      --_avatar-bg: var(--rel-colors-green-primary, #00f49c);
+      --_avatar-color: var(--rel-colors-gray-primary, #333);
+
+      /* Reward tier colours (reference existing token palette) */
+      --rel-topbar-reward-gold: var(--rel-colors-gold, #d6ba00);
+      --rel-topbar-reward-gold-bg: var(--rel-colors-gold-light, #f6efd7);
+      --rel-topbar-reward-silver: var(--rel-colors-silver, #bababa);
+      --rel-topbar-reward-silver-bg: var(--rel-colors-silver-secondary, #f0f0f0);
+      --rel-topbar-reward-platinum: var(--rel-colors-platinum, #8392c9);
+      --rel-topbar-reward-platinum-bg: var(--rel-colors-platinum-secondary, #e4e6f2);
+      --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);
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      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;
+      flex-direction: column;
+      gap: 0;
+      min-width: 0;
+    }
+
+    :host([compact]) .text-stack {
+      display: none;
+    }
+
+    .name {
+      font-size: var(--rel-fontSizes-md, 14px);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-text-primary, #333);
+      line-height: var(--rel-lineHeights-md, 20px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .subtitle {
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-weight: var(--rel-fontWeights-regular, 400);
+      color: var(--rel-text-placeholder, #a9a9a9);
+      line-height: var(--rel-lineHeights-sm, 18px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* ─── Carrier reward badge ──────────────────────────────────────── */
+    .reward-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-3xs, 2px);
+      padding: 2px var(--rel-spacing-space-2xs, 4px);
+      border-radius: var(--rel-borders-radius-border-radius-100, 2px);
+      font-size: var(--rel-fontSizes-xs, 10px);
+      font-weight: var(--rel-fontWeights-bold, 700);
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      flex-shrink: 0;
+    }
+
+    /* 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);
+    }
+
+    /* ─── Carrier tile shell ────────────────────────────────────────── */
+    .carrier-tile {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+      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);
+    }
+
+    :host([compact]) .carrier-tile {
+      padding: var(--rel-spacing-space-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`
+      <div class="avatar" aria-hidden="true">
+        ${this.initials ?? ""}
+      </div>
+      ${!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 _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>
+        <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

@@ -0,0 +1,23 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-topbar-utilities")
+export class RelTopbarUtilities extends LitElement {
+  static styles = css`
+    .utilities {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+    }
+  `;
+
+  render() {
+    return html`<div class="utilities"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-utilities": RelTopbarUtilities;
+  }
+}

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

@@ -0,0 +1,329 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./rel-topbar-brand";
+import "./rel-topbar-actions";
+import "./rel-topbar-utilities";
+import "./rel-topbar-mobile-panel";
+
+export type TopbarVariant = "customer" | "carrier";
+export type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
+
+/**
+ * `rel-topbar` — Application-level top navigation / header shell.
+ *
+ * Slots:
+ *   brand        — Logo / wordmark region (left)
+ *   (default)    — Primary nav items (rel-topbar-item elements)
+ *   actions      — CTA / action buttons (customer) or dark-pill area (carrier)
+ *   utilities    — Utility icon buttons (notifications, search, etc.)
+ *   profile      — rel-topbar-profile tile
+ *   mobile-panel — Collapsed nav panel shown when mobileOpen is true
+ *
+ * Events:
+ *   rel-menu-toggle        — fired when hamburger is clicked  { open: boolean }
+ *   rel-mobile-open-change — alias of rel-menu-toggle for convenience
+ *   rel-nav-select         — bubbled from child rel-topbar-item  { value, label }
+ */
+@customElement("rel-topbar")
+export class RelTopbar extends LitElement {
+  /** Visual variant — affects action/profile region styling */
+  @property({ type: String, reflect: true }) variant: TopbarVariant = "customer";
+
+  /** Whether the mobile nav panel is currently open */
+  @property({ type: Boolean, reflect: true }) mobileOpen = false;
+
+  /** Whether to render the hamburger / close toggle button */
+  @property({ type: Boolean, reflect: true }) showMenuToggle = false;
+
+  /** Reduce height to compact (48 px) mode */
+  @property({ type: Boolean, reflect: true }) compact = false;
+
+  /** Stick topbar to top of viewport while scrolling */
+  @property({ type: Boolean, reflect: true }) sticky = false;
+
+  /**
+   * Override the responsive layout for demos / storybook.
+   * 'auto' respects CSS media queries.
+   */
+  @property({ type: String }) forceLayout: TopbarForceLayout = "auto";
+
+  static styles = css`
+    /* ─── Component tokens ─────────────────────────────────────────── */
+    :host {
+      --rel-topbar-height: 64px;
+      --rel-topbar-height-compact: 48px;
+      --rel-topbar-bg: var(--rel-colors-white, #fff);
+      --rel-topbar-border-color: var(--rel-border-default, #ddd);
+      --rel-topbar-item-color: var(--rel-text-primary, #333);
+      --rel-topbar-item-active-color: var(--rel-colors-green-tertiary, #00a86b);
+      --rel-topbar-item-active-indicator: var(--rel-colors-green-primary, #00f49c);
+      --rel-topbar-item-hover-bg: var(--rel-surface-secondary, #fafafa);
+      --rel-topbar-divider-color: var(--rel-border-divider, #bdbdbd);
+      --rel-topbar-carrier-action-bg: var(--rel-colors-gray-primary, #333);
+      --rel-topbar-carrier-action-color: var(--rel-colors-white, #fff);
+      --rel-topbar-z: 100;
+
+      display: block;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+    }
+
+    /* ─── Sticky host ───────────────────────────────────────────────── */
+    :host([sticky]) {
+      position: sticky;
+      top: 0;
+      z-index: var(--rel-topbar-z);
+    }
+
+    /* ─── Bar shell ─────────────────────────────────────────────────── */
+    .topbar {
+      display: flex;
+      align-items: center;
+      height: var(--rel-topbar-height);
+      background: var(--rel-topbar-bg);
+      border-bottom: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-topbar-border-color);
+      padding: 0 var(--rel-spacing-space-xl, 24px);
+      box-sizing: border-box;
+      gap: var(--rel-spacing-space-md, 16px);
+    }
+
+    :host([compact]) .topbar {
+      height: var(--rel-topbar-height-compact);
+    }
+
+    /* ─── Brand ─────────────────────────────────────────────────────── */
+    .brand-region {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    /* ─── Nav (primary, desktop) ────────────────────────────────────── */
+    .nav-region {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      gap: var(--rel-spacing-space-2xs, 4px);
+      min-width: 0;
+    }
+
+    /* ─── Right side cluster ────────────────────────────────────────── */
+    .right-region {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: var(--rel-spacing-space-xs, 8px);
+    }
+
+    .actions-region,
+    .utilities-region,
+    .profile-region {
+      display: contents;
+    }
+
+    /* Vertical divider between util/profile when both are populated */
+    .divider {
+      width: var(--rel-borders-width-stroke-100, 1px);
+      height: 24px;
+      background: var(--rel-topbar-divider-color);
+      flex-shrink: 0;
+    }
+
+    /* ─── Carrier action pill wrapper ───────────────────────────────── */
+    :host([variant="carrier"]) .actions-region ::slotted(*) {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+      background: var(--rel-topbar-carrier-action-bg);
+      color: var(--rel-topbar-carrier-action-color);
+      padding: var(--rel-spacing-space-2xs, 4px) var(--rel-spacing-space-sm, 12px);
+      border-radius: var(--rel-borders-radius-border-radius-500, 1000px);
+    }
+
+    /* ─── Mobile toggle button ──────────────────────────────────────── */
+    .menu-toggle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      cursor: pointer;
+      color: var(--rel-topbar-item-color);
+      flex-shrink: 0;
+    }
+
+    .menu-toggle:focus-visible {
+      outline: 2px solid var(--rel-topbar-item-active-indicator);
+      outline-offset: 2px;
+    }
+
+    .menu-toggle:hover {
+      background: var(--rel-topbar-item-hover-bg);
+    }
+
+    .menu-toggle svg {
+      display: block;
+    }
+
+    /* ─── Mobile panel ──────────────────────────────────────────────── */
+    .mobile-panel {
+      display: none;
+      background: var(--rel-topbar-bg);
+      border-bottom: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-topbar-border-color);
+    }
+
+    .mobile-panel.open {
+      display: block;
+    }
+
+    /* ─── Responsive: auto mode (CSS media queries) ─────────────────── */
+    @media (max-width: 768px) {
+      .topbar:not(.force-desktop) .nav-region {
+        display: none;
+      }
+
+      .topbar:not(.force-desktop) .menu-toggle {
+        display: flex;
+      }
+    }
+
+    @media (min-width: 769px) {
+      .topbar:not(.force-mobile):not(.force-tablet) .menu-toggle {
+        display: none;
+      }
+    }
+
+    /* ─── forceLayout overrides ─────────────────────────────────────── */
+    .topbar.force-mobile .nav-region,
+    .topbar.force-tablet .nav-region {
+      display: none;
+    }
+
+    .topbar.force-mobile .menu-toggle,
+    .topbar.force-tablet .menu-toggle {
+      display: flex;
+    }
+
+    .topbar.force-desktop .nav-region {
+      display: flex;
+    }
+
+    .topbar.force-desktop .menu-toggle {
+      display: none;
+    }
+  `;
+
+  private onRouterSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    for (const el of slot.assignedElements({ flatten: true })) {
+      const tag = (el as HTMLElement).tagName.toLowerCase();
+      const targetSlot =
+        tag === "rel-topbar-brand" ? "brand" :
+        tag === "rel-topbar-actions" ? "actions" :
+        tag === "rel-topbar-utilities" ? "utilities" :
+        tag === "rel-topbar-profile" ? "profile" :
+        tag === "rel-topbar-mobile-panel" ? "mobile-panel" :
+        "nav";
+      if ((el as HTMLElement).slot !== targetSlot) {
+        (el as HTMLElement).slot = targetSlot;
+      }
+    }
+  }
+
+  private get layoutClass(): string {
+    if (this.forceLayout === "auto") return "";
+    return `force-${this.forceLayout}`;
+  }
+
+  private handleMenuToggle() {
+    this.mobileOpen = !this.mobileOpen;
+    const detail = { open: this.mobileOpen };
+    this.dispatchEvent(
+      new CustomEvent("rel-menu-toggle", { detail, bubbles: true, composed: true })
+    );
+    this.dispatchEvent(
+      new CustomEvent("rel-mobile-open-change", { detail, bubbles: true, composed: true })
+    );
+  }
+
+  render() {
+    const topbarClass = ["topbar", this.layoutClass].filter(Boolean).join(" ");
+    const menuLabel = this.mobileOpen ? "Close menu" : "Open menu";
+
+    return html`
+      <!-- router: auto-assigns slot names by tagName; stays empty after redistribution -->
+      <slot style="display:none" @slotchange=${this.onRouterSlotChange}></slot>
+
+      <header>
+        <div class=${topbarClass} role="banner">
+          <div class="brand-region">
+            <slot name="brand"></slot>
+          </div>
+
+          <nav class="nav-region" aria-label="Primary">
+            <slot name="nav"></slot>
+          </nav>
+
+          <div class="right-region">
+            <div class="actions-region">
+              <slot name="actions"></slot>
+            </div>
+            <div class="utilities-region">
+              <slot name="utilities"></slot>
+            </div>
+            <div class="profile-region">
+              <slot name="profile"></slot>
+            </div>
+
+            ${this.showMenuToggle
+              ? html`
+                  <button
+                    class="menu-toggle"
+                    aria-label=${menuLabel}
+                    aria-expanded=${this.mobileOpen}
+                    aria-controls="mobile-panel"
+                    @click=${this.handleMenuToggle}
+                  >
+                    ${this.mobileOpen ? _iconClose() : _iconMenu()}
+                  </button>
+                `
+              : null}
+          </div>
+        </div>
+      </header>
+
+      <div
+        class="mobile-panel ${this.mobileOpen ? "open" : ""}"
+        id="mobile-panel"
+        role="region"
+        aria-label="Mobile navigation"
+      >
+        <slot name="mobile-panel"></slot>
+      </div>
+    `;
+  }
+}
+
+/* ─── Inline SVG helpers ──────────────────────────────────────────────── */
+
+function _iconMenu() {
+  return html`
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
+      <rect x="2" y="5" width="16" height="1.5" rx="0.75" fill="currentColor"/>
+      <rect x="2" y="9.25" width="16" height="1.5" rx="0.75" fill="currentColor"/>
+      <rect x="2" y="13.5" width="16" height="1.5" rx="0.75" fill="currentColor"/>
+    </svg>
+  `;
+}
+
+function _iconClose() {
+  return html`
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
+      <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>
+  `;
+}