@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,324 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "./rel-topbar-dropdown";
-import "./rel-topbar-dropdown-item";
-import "@reliability-design/icons/rel-icon";
-
-/**
- * `rel-topbar-item` — A navigation item within rel-topbar.
- *
- * @deprecated Part of the deprecated rel-topbar family. Use the "Navbar" recipe at /docs/recipes/navbar, which composes nav links and
- * `rel-menu`/`rel-popover` dropdowns directly instead of a dedicated item component.
- *
- * Renders as an `<a>` when `href` is supplied, otherwise a `<button>`.
- *
- * Slots:
- *   (default)  — Label text / icon (overrides `label` property)
- *   prefix     — Icon/content before the label
- *   suffix     — Icon/content after the label (e.g. badge)
- *   dropdown   — Expandable panel content shown below the item
- *
- * Events:
- *   rel-select — fired when a non-disabled, non-expandable item is activated
- *   rel-toggle — fired when an expandable item is opened/closed  { open: boolean }
- */
-@customElement("rel-topbar-item")
-export class RelTopbarItem extends LitElement {
-  /** Accessible label — also shown as text when no default slot content */
-  @property({ type: String }) label?: string;
-
-  /** Navigation href — renders an anchor element when set */
-  @property({ type: String }) href?: string;
-
-  /** Marks this item as the current/active page */
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  /** Prevents interaction */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Shows a chevron and enables dropdown panel */
-  @property({ type: Boolean, reflect: true }) expandable = false;
-
-  /** Controlled open state of the dropdown panel */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** Optional string value forwarded in rel-select / rel-toggle events */
-  @property({ type: String }) value?: string;
-
-  /** @internal tracks whether dropdown slot has content */
-  @state() private _hasDropdown = false;
-
-  static styles = css`
-    /* ─── Component tokens ──────────────────────────────────────────── */
-    :host {
-      color: var(--rel-text-default);
-      --_item-color: var(--rel-topbar-item-color, var(--rel-text-default));
-      --_item-active-color: var(--rel-topbar-item-active-color, var(--rel-text-success));
-      --_item-active-indicator: var(--rel-topbar-item-active-indicator, var(--rel-bg-brand));
-      --_item-hover-bg: var(--rel-topbar-item-hover-bg, var(--rel-bg-surface-elevated));
-
-      display: inline-block;
-      position: relative;
-      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    /* ─── Trigger (shared for <a> and <button>) ─────────────────────── */
-    .trigger {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs, 4px);
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-sm, 12px);
-      border: none;
-      background: transparent;
-      border-radius: var(--rel-border-radius-sm, 8px);
-      cursor: pointer;
-      color: var(--_item-color);
-      text-decoration: none;
-      white-space: nowrap;
-      position: relative;
-      transition: background 0.15s ease, color 0.15s ease;
-      box-sizing: border-box;
-      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);
-    }
-
-    .trigger::after {
-      content: "";
-      position: absolute;
-      bottom: -2px;
-      left: var(--rel-spacing-sm, 12px);
-      right: var(--rel-spacing-sm, 12px);
-      height: 2px;
-      border-radius: 1px;
-      background: transparent;
-      transition: background 0.15s ease;
-    }
-
-    /* Active state */
-    :host([active]) .trigger {
-      color: var(--_item-active-color);
-      font-weight: var(--rel-fonts-weight-body-semibold, 600);
-    }
-
-    :host([active]) .trigger::after {
-      background: var(--_item-active-indicator);
-    }
-
-    /* Hover */
-    .trigger:hover:not(:disabled) {
-      background: var(--_item-hover-bg);
-    }
-
-    /* Focus */
-    .trigger:focus-visible {
-      outline: 2px solid var(--_item-active-indicator);
-      outline-offset: 2px;
-    }
-
-    /* Disabled */
-    :host([disabled]) {
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) .trigger {
-      opacity: 0.45;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    /* Open state (expandable) */
-    :host([open]) .trigger {
-      background: var(--_item-hover-bg);
-    }
-
-    /* ─── Prefix / suffix slots ─────────────────────────────────────── */
-    .prefix,
-    .suffix {
-      display: contents;
-    }
-
-    /* ─── Chevron icon ──────────────────────────────────────────────── */
-    .chevron {
-      display: inline-flex;
-      align-items: center;
-      flex-shrink: 0;
-      transition: transform 0.2s ease;
-      color: inherit;
-    }
-
-    :host([open]) .chevron {
-      transform: rotate(180deg);
-    }
-
-    /* ─── Dropdown panel ────────────────────────────────────────────── */
-    .dropdown {
-      position: absolute;
-      top: calc(100% + 6px);
-      left: 0;
-      min-width: 200px;
-      background: var(--rel-bg-surface);
-      border: var(--rel-stroke-sm, 1px) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-2xs, 4px);
-      z-index: 200;
-      display: none;
-    }
-
-    :host([open]) .dropdown {
-      display: block;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this._handleOutsideClick);
-    document.addEventListener("keydown", this._handleDocKeydown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this._handleOutsideClick);
-    document.removeEventListener("keydown", this._handleDocKeydown);
-  }
-
-  private _handleOutsideClick = (e: MouseEvent) => {
-    if (!this.open) return;
-    const path = e.composedPath() as Node[];
-    if (!path.includes(this)) {
-      this._setOpen(false);
-    }
-  };
-
-  private _handleDocKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
-      this._setOpen(false);
-      (this.shadowRoot?.querySelector(".trigger") as HTMLElement)?.focus();
-    }
-  };
-
-  private _setOpen(value: boolean) {
-    this.open = value;
-    this.dispatchEvent(
-      new CustomEvent("rel-toggle", {
-        detail: { open: this.open, value: this.value },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private _handleTriggerClick(e: MouseEvent) {
-    if (this.disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if (this.expandable || this._hasDropdown) {
-      e.preventDefault();
-      this._setOpen(!this.open);
-      return;
-    }
-
-    if (!this.href) {
-      e.preventDefault();
-    }
-
-    this.dispatchEvent(
-      new CustomEvent("rel-select", {
-        detail: { value: this.value, label: this.label },
-        bubbles: true,
-        composed: true,
-      })
-    );
-
-    // Bubble up to topbar
-    this.dispatchEvent(
-      new CustomEvent("rel-nav-select", {
-        detail: { value: this.value, label: this.label },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private _routeSlots(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    for (const el of slot.assignedElements({ flatten: true })) {
-      const targetSlot = (el as HTMLElement).tagName.toLowerCase() === "rel-topbar-dropdown" ? "dropdown" : "";
-      if ((el as HTMLElement).slot !== targetSlot) {
-        (el as HTMLElement).slot = targetSlot;
-      }
-    }
-  }
-
-  private _handleDropdownSlotChange(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    const nodes = slot.assignedElements();
-    this._hasDropdown = nodes.length > 0;
-  }
-
-  render() {
-    const isLink = !!this.href && !this.disabled;
-    const showChevron = this.expandable || this._hasDropdown;
-    const ariaCurrent = this.active ? "page" : undefined;
-    const ariaExpanded = showChevron ? (this.open ? "true" : "false") : undefined;
-    const ariaHasPopup = showChevron ? "true" : undefined;
-
-    const triggerContent = html`
-      <span class="prefix"><slot name="prefix"></slot></span>
-      <slot>${this.label ?? ""}</slot>
-      <span class="suffix"><slot name="suffix"></slot></span>
-      ${showChevron
-        ? html`<span class="chevron" aria-hidden="true">
-            <rel-icon name="chevron-down" size="sm"></rel-icon>
-          </span>`
-        : null}
-    `;
-
-    const trigger = isLink
-      ? html`
-          <a
-            class="trigger"
-            href=${this.href!}
-            aria-current=${ariaCurrent as string}
-            aria-expanded=${ariaExpanded as string}
-            aria-haspopup=${ariaHasPopup as string}
-            @click=${this._handleTriggerClick}
-          >
-            ${triggerContent}
-          </a>
-        `
-      : html`
-          <button
-            class="trigger"
-            type="button"
-            ?disabled=${this.disabled}
-            aria-current=${ariaCurrent as string}
-            aria-expanded=${ariaExpanded as string}
-            aria-haspopup=${ariaHasPopup as string}
-            @click=${this._handleTriggerClick}
-          >
-            ${triggerContent}
-          </button>
-        `;
-
-    return html`
-      <!-- router: auto-assigns slot="dropdown" for rel-topbar-dropdown children -->
-      <slot style="display:none" @slotchange=${this._routeSlots}></slot>
-
-      ${trigger}
-      <div class="dropdown" role="region">
-        <slot name="dropdown" @slotchange=${this._handleDropdownSlotChange}></slot>
-      </div>
-    `;
-  }
-}
-

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

@@ -1,27 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`
- * for the mobile nav panel in the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-mobile-panel")
-export class RelTopbarMobilePanel extends LitElement {
-  static styles = css`
-    .mobile-panel {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-  `;
-
-  render() {
-    return html`<div class="mobile-panel"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-mobile-panel": RelTopbarMobilePanel;
-  }
-}

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

@@ -1,243 +0,0 @@
-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);
-      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;
-      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;
-      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>
-    `;
-  }
-}

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

@@ -1,27 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` (icon variant) elements inside the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-utilities")
-export class RelTopbarUtilities extends LitElement {
-  static styles = css`
-    .utilities {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-  `;
-
-  render() {
-    return html`<div class="utilities"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-utilities": RelTopbarUtilities;
-  }
-}