@reliability-design/web 1.3.0 → 1.4.0

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

@@ -2,12 +2,15 @@ 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.
  *
+ * @deprecated Part of the deprecated rel-topbar family. Use the "App
+ * Topbar" recipe at /docs/recipes/app-topbar, 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:
@@ -49,14 +52,15 @@ export class RelTopbarItem extends LitElement {
   static styles = css`
     /* ─── Component tokens ──────────────────────────────────────────── */
     :host {
-      --_item-color: var(--rel-topbar-item-color, var(--rel-text-primary, #333));
-      --_item-active-color: var(--rel-topbar-item-active-color, var(--rel-colors-green-tertiary, #00a86b));
-      --_item-active-indicator: var(--rel-topbar-item-active-indicator, var(--rel-colors-green-primary, #00f49c));
-      --_item-hover-bg: var(--rel-topbar-item-hover-bg, var(--rel-surface-secondary, #fafafa));
+      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-fontFamilies-primary, Poppins, sans-serif);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
     }
 
     :host([hidden]) {
@@ -67,30 +71,31 @@ export class RelTopbarItem extends LitElement {
     .trigger {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs, 4px);
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      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-borders-radius-border-radius-200, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
       cursor: pointer;
-      color: var(--_item-color);
-      font-family: inherit;
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      line-height: var(--rel-lineHeights-md, 20px);
+      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;
+      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-space-sm, 12px);
-      right: var(--rel-spacing-space-sm, 12px);
+      left: var(--rel-spacing-sm, 12px);
+      right: var(--rel-spacing-sm, 12px);
       height: 2px;
       border-radius: 1px;
       background: transparent;
@@ -100,7 +105,7 @@ export class RelTopbarItem extends LitElement {
     /* Active state */
     :host([active]) .trigger {
       color: var(--_item-active-color);
-      font-weight: var(--rel-fontWeights-semibold, 600);
+      font-weight: var(--rel-fonts-weight-body-semibold, 600);
     }
 
     :host([active]) .trigger::after {
@@ -159,11 +164,11 @@ export class RelTopbarItem extends LitElement {
       top: calc(100% + 6px);
       left: 0;
       min-width: 200px;
-      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);
+      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-space-2xs, 4px);
+      padding: var(--rel-spacing-2xs, 4px);
       z-index: 200;
       display: none;
     }

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

@@ -1,7 +1,10 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`
+ * for the mobile nav panel in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-mobile-panel")
 export class RelTopbarMobilePanel extends LitElement {
   static styles = css`

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

@@ -1,6 +1,5 @@
 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";
@@ -9,6 +8,9 @@ export type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regu
 /**
  * `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.
  */
@@ -35,28 +37,29 @@ export class RelTopbarProfile extends LitElement {
   static styles = css`
     /* ─── Component tokens (reward tier palette) ────────────────────── */
     :host {
-      --_profile-radius: var(--rel-borders-radius-border-radius-500, 1000px);
+      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-colors-green-primary, #00f49c);
-      --_avatar-color: var(--rel-color-text-primary);
+      --_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-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-color-bg-secondary);
+      --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-space-xs, 8px);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      gap: var(--rel-spacing-xs, 8px);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
       cursor: pointer;
     }
 
@@ -72,38 +75,56 @@ export class RelTopbarProfile extends LitElement {
       display: none;
     }
 
-    .name {
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-color-text-primary);
-      line-height: var(--rel-lineHeights-md, 20px);
+    .name {
+      color: var(--rel-text-default);
       white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
+      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 {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-regular, 400);
-      color: var(--rel-color-text-placeholder);
-      line-height: var(--rel-lineHeights-sm, 18px);
+    .subtitle {
+      color: var(--rel-text-placeholder);
       white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
+      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-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;
+      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 */
@@ -115,7 +136,7 @@ export class RelTopbarProfile extends LitElement {
     /* Silver */
     :host([reward="silver"]) .reward-badge {
       background: var(--rel-topbar-reward-silver-bg);
-      color: var(--rel-colors-gray-primary, #333);
+      color: var(--rel-text-default);
     }
 
     /* Platinum */
@@ -133,22 +154,22 @@ export class RelTopbarProfile extends LitElement {
     /* Regular */
     :host([reward="regular"]) .reward-badge {
       background: var(--rel-topbar-reward-regular-bg);
-      color: var(--rel-colors-gray-primary, #333);
+      color: var(--rel-text-default);
     }
 
     /* ─── 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-color-border-default);
+      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-space-2xs, 4px);
+      padding: var(--rel-spacing-2xs, 4px);
     }
 
     .carrier-meta {
@@ -191,13 +212,13 @@ 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)",
+      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-colors-green-primary)";
+    return map[this.reward] ?? "var(--rel-bg-brand)";
   }
 
   private _renderCarrier() {

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

@@ -1,14 +1,17 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
+/**
+ * @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.
+ */
 @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);
+      gap: var(--rel-spacing-xs, 8px);
     }
   `;
 

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 import "./rel-topbar-brand";
 import "./rel-topbar-actions";
@@ -15,6 +14,12 @@ export type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
 /**
  * `rel-topbar` — Application-level top navigation / header shell.
  *
+ * @deprecated This component's fixed slot structure, hardcoded breakpoint,
+ * and built-in overflow logic are too rigid for most real layouts. Use the
+ * "App Topbar" recipe at /docs/recipes/app-topbar instead, composed from
+ * rel-menu/rel-popover, rel-drawer, and rel-button. Still supported, but
+ * will be removed in a future major version.
+ *
  * Slots:
  *   brand        — Logo / wordmark region (left)
  *   (default)    — Primary nav items (rel-topbar-item elements)
@@ -62,22 +67,23 @@ export class RelTopbar extends LitElement {
   static styles = css`
     /* ─── Component tokens ─────────────────────────────────────────── */
     :host {
+      color: var(--rel-text-default);
       --rel-topbar-height: 64px;
       --rel-topbar-height-compact: 48px;
-      --rel-topbar-bg: var(--rel-color-bg-primary);
-      --rel-topbar-border-color: var(--rel-border-default, #ddd);
-      --rel-topbar-item-color: var(--rel-color-text-primary);
-      --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-color-bg-secondary);
-      --rel-topbar-divider-color: var(--rel-border-divider, #bdbdbd);
-      --rel-topbar-carrier-action-bg: var(--rel-color-text-primary);
-      --rel-topbar-carrier-action-color: var(--rel-color-bg-primary);
+      --rel-topbar-bg: var(--rel-bg-surface);
+      --rel-topbar-border-color: var(--rel-border-default);
+      --rel-topbar-item-color: var(--rel-text-default);
+      --rel-topbar-item-active-color: var(--rel-text-success);
+      --rel-topbar-item-active-indicator: var(--rel-bg-brand);
+      --rel-topbar-item-hover-bg: var(--rel-bg-surface-elevated);
+      --rel-topbar-divider-color: var(--rel-border-default);
+      --rel-topbar-carrier-action-bg: var(--rel-text-default);
+      --rel-topbar-carrier-action-color: var(--rel-bg-surface);
       --rel-topbar-z: 100;
 
       display: block;
       width: 100%;
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
     }
 
     /* ─── Sticky host ───────────────────────────────────────────────── */
@@ -93,10 +99,10 @@ export class RelTopbar extends LitElement {
       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);
+      border-bottom: var(--rel-stroke-sm, 1px) solid var(--rel-topbar-border-color);
+      padding: 0 var(--rel-spacing-xl, 24px);
       box-sizing: border-box;
-      gap: var(--rel-spacing-space-md, 16px);
+      gap: var(--rel-spacing-md, 16px);
     }
 
     :host([compact]) .topbar {
@@ -115,7 +121,7 @@ export class RelTopbar extends LitElement {
       display: flex;
       align-items: center;
       flex: 1 1 0;
-      gap: var(--rel-spacing-space-2xs, 4px);
+      gap: var(--rel-spacing-2xs, 4px);
       min-width: 0;
     }
 
@@ -125,7 +131,7 @@ export class RelTopbar extends LitElement {
       align-items: center;
       flex-shrink: 0;
       margin-left: auto;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-xs, 8px);
     }
 
     .actions-region,
@@ -136,7 +142,7 @@ export class RelTopbar extends LitElement {
 
     /* Vertical divider between util/profile when both are populated */
     .divider {
-      width: var(--rel-borders-width-stroke-100, 1px);
+      width: var(--rel-stroke-sm, 1px);
       height: 24px;
       background: var(--rel-topbar-divider-color);
       flex-shrink: 0;
@@ -146,11 +152,11 @@ export class RelTopbar extends LitElement {
     :host([variant="carrier"]) .actions-region ::slotted(*) {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-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);
+      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-sm, 12px);
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
     }
 
     /* ─── Mobile toggle button ──────────────────────────────────────── */
@@ -163,7 +169,7 @@ export class RelTopbar extends LitElement {
       padding: 0;
       border: none;
       background: transparent;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
       cursor: pointer;
       color: var(--rel-topbar-item-color);
       flex-shrink: 0;
@@ -186,7 +192,7 @@ export class RelTopbar extends LitElement {
     .mobile-panel {
       display: none;
       background: var(--rel-topbar-bg);
-      border-bottom: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-topbar-border-color);
+      border-bottom: var(--rel-stroke-sm, 1px) solid var(--rel-topbar-border-color);
     }
 
     .mobile-panel.open {
@@ -196,18 +202,20 @@ export class RelTopbar extends LitElement {
     .mobile-overflow-nav {
       display: flex;
       flex-direction: column;
-      padding: var(--rel-spacing-space-xs, 8px) 0;
+      padding: var(--rel-spacing-xs, 8px) 0;
       border-top: 1px solid var(--rel-topbar-border-color);
     }
 
     .mobile-overflow-item {
       display: block;
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-xl, 24px);
-      color: var(--rel-topbar-item-color);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      text-decoration: none;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-xl, 24px);
+      color: var(--rel-topbar-item-color);
+      text-decoration: none;
+      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);
     }
 
     .mobile-overflow-item:hover {