@reliability-design/web 1.1.1 → 1.3.0

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

@@ -1,9 +1,13 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+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";
 import "./rel-topbar-utilities";
 import "./rel-topbar-mobile-panel";
+import "./rel-topbar-dropdown";
+import "./rel-topbar-dropdown-item";
 
 export type TopbarVariant = "customer" | "carrier";
 export type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
@@ -47,20 +51,28 @@ export class RelTopbar extends LitElement {
    */
   @property({ type: String }) forceLayout: TopbarForceLayout = "auto";
 
+  private _overflowItems: Element[] = [];
+  @state() private _overflowCount: number = 0;
+  @state() private _overflowItemsData: Array<{ label: string; href: string; disabled: boolean }> = [];
+  private _resizeObserver?: ResizeObserver;
+  private _resizeTimer?: number;
+  private _measuring = false;
+  private _lastNavWidth = 0;
+
   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-bg: var(--rel-color-bg-primary);
       --rel-topbar-border-color: var(--rel-border-default, #ddd);
-      --rel-topbar-item-color: var(--rel-text-primary, #333);
+      --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-surface-secondary, #fafafa);
+      --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-colors-gray-primary, #333);
-      --rel-topbar-carrier-action-color: var(--rel-colors-white, #fff);
+      --rel-topbar-carrier-action-bg: var(--rel-color-text-primary);
+      --rel-topbar-carrier-action-color: var(--rel-color-bg-primary);
       --rel-topbar-z: 100;
 
       display: block;
@@ -102,7 +114,7 @@ export class RelTopbar extends LitElement {
     .nav-region {
       display: flex;
       align-items: center;
-      flex: 1;
+      flex: 1 1 0;
       gap: var(--rel-spacing-space-2xs, 4px);
       min-width: 0;
     }
@@ -112,6 +124,7 @@ export class RelTopbar extends LitElement {
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      margin-left: auto;
       gap: var(--rel-spacing-space-xs, 8px);
     }
 
@@ -180,6 +193,32 @@ export class RelTopbar extends LitElement {
       display: block;
     }
 
+    .mobile-overflow-nav {
+      display: flex;
+      flex-direction: column;
+      padding: var(--rel-spacing-space-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;
+    }
+
+    .mobile-overflow-item:hover {
+      background: var(--rel-topbar-item-hover-bg);
+    }
+
+    .mobile-overflow-item.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
     /* ─── Responsive: auto mode (CSS media queries) ─────────────────── */
     @media (max-width: 768px) {
       .topbar:not(.force-desktop) .nav-region {
@@ -217,6 +256,69 @@ export class RelTopbar extends LitElement {
     }
   `;
 
+  override firstUpdated() {
+    const navRegion = this.renderRoot.querySelector(".nav-region") as HTMLElement;
+    if (navRegion) {
+      this._resizeObserver = new ResizeObserver(() => {
+        clearTimeout(this._resizeTimer);
+        this._resizeTimer = window.setTimeout(() => this._measureNav(), 150);
+      });
+      this._resizeObserver.observe(navRegion);
+    }
+    requestAnimationFrame(() => this._measureNav());
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    clearTimeout(this._resizeTimer);
+  }
+
+  private _measureNav() {
+    if (this._measuring) return;
+    this._measuring = true;
+    const navRegion = this.renderRoot.querySelector(".nav-region") as HTMLElement;
+    if (!navRegion) return;
+    const navSlot = this.renderRoot.querySelector('slot[name="nav"]') as HTMLSlotElement;
+    if (!navSlot) return;
+    const items = Array.from(navSlot.assignedElements()).filter(
+      el => el.tagName.toLowerCase() !== "rel-topbar-item" || !el.hasAttribute("data-more")
+    );
+    const navWidth = navRegion.getBoundingClientRect().width;
+    if (Math.abs(navWidth - this._lastNavWidth) < 2) return;
+    this._lastNavWidth = navWidth;
+    const available = navWidth - 120;
+
+    let accumulated = 0;
+    let firstOverflowIndex = items.length;
+    for (let i = 0; i < items.length; i++) {
+      accumulated += items[i].getBoundingClientRect().width;
+      if (accumulated > available) {
+        firstOverflowIndex = i;
+        break;
+      }
+    }
+
+    const overflowingElements = Array.from(items).slice(firstOverflowIndex);
+    this._overflowItems = overflowingElements;
+    this._overflowCount = overflowingElements.length;
+    this._overflowItemsData = overflowingElements.map(el => ({
+      label: el.getAttribute("label") ?? "",
+      href: el.getAttribute("href") ?? "",
+      disabled: el.hasAttribute("disabled"),
+    }));
+
+    for (const el of items) {
+      if (overflowingElements.includes(el)) {
+        el.setAttribute("hidden", "");
+      } else {
+        el.removeAttribute("hidden");
+      }
+    }
+
+    this._measuring = false;
+  }
+
   private onRouterSlotChange(e: Event) {
     const slot = e.target as HTMLSlotElement;
     for (const el of slot.assignedElements({ flatten: true })) {
@@ -265,7 +367,20 @@ export class RelTopbar extends LitElement {
           </div>
 
           <nav class="nav-region" aria-label="Primary">
-            <slot name="nav"></slot>
+            <slot name="nav" @slotchange=${this._measureNav}></slot>
+            ${this._overflowCount > 0 ? html`
+              <rel-topbar-item label="More" expandable data-more>
+                <rel-topbar-dropdown slot="dropdown">
+                  ${this._overflowItemsData.map(item => html`
+                    <rel-topbar-dropdown-item
+                      label=${item.label}
+                      href=${item.href}
+                      ?disabled=${item.disabled}
+                    ></rel-topbar-dropdown-item>
+                  `)}
+                </rel-topbar-dropdown>
+              </rel-topbar-item>
+            ` : null}
           </nav>
 
           <div class="right-region">
@@ -288,7 +403,9 @@ export class RelTopbar extends LitElement {
                     aria-controls="mobile-panel"
                     @click=${this.handleMenuToggle}
                   >
-                    ${this.mobileOpen ? _iconClose() : _iconMenu()}
+                    ${this.mobileOpen
+                      ? html`<rel-icon name="close" size="md"></rel-icon>`
+                      : html`<rel-icon name="hamburger" size="md"></rel-icon>`}
                   </button>
                 `
               : null}
@@ -303,27 +420,19 @@ export class RelTopbar extends LitElement {
         aria-label="Mobile navigation"
       >
         <slot name="mobile-panel"></slot>
+        ${this._overflowItemsData.length > 0 ? html`
+          <div class="mobile-overflow-nav">
+            ${this._overflowItemsData.map(item => html`
+              <a
+                class="mobile-overflow-item ${item.disabled ? "disabled" : ""}"
+                href=${item.href}
+                ?aria-disabled=${item.disabled}
+              >${item.label}</a>
+            `)}
+          </div>
+        ` : null}
       </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>
-  `;
-}