@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,446 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-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";
-
-/**
- * `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
- * "Navbar" recipe at /docs/recipes/navbar 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)
- *   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";
-
-  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 {
-      color: var(--rel-text-default);
-      --rel-topbar-height: 64px;
-      --rel-topbar-height-compact: 48px;
-      --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-fonts-font-family, 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-stroke-sm, 1px) solid var(--rel-topbar-border-color);
-      padding: 0 var(--rel-spacing-xl, 24px);
-      box-sizing: border-box;
-      gap: var(--rel-spacing-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 1 0;
-      gap: var(--rel-spacing-2xs, 4px);
-      min-width: 0;
-    }
-
-    /* ─── Right side cluster ────────────────────────────────────────── */
-    .right-region {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      margin-left: auto;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-
-    .actions-region,
-    .utilities-region,
-    .profile-region {
-      display: contents;
-    }
-
-    /* Vertical divider between util/profile when both are populated */
-    .divider {
-      width: var(--rel-stroke-sm, 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-xs, 8px);
-      background: var(--rel-topbar-carrier-action-bg);
-      color: var(--rel-topbar-carrier-action-color);
-      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-sm, 12px);
-      border-radius: var(--rel-border-radius-full-rounded, 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-border-radius-sm, 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-stroke-sm, 1px) solid var(--rel-topbar-border-color);
-    }
-
-    .mobile-panel.open {
-      display: block;
-    }
-
-    .mobile-overflow-nav {
-      display: flex;
-      flex-direction: column;
-      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-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 {
-      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 {
-        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;
-    }
-  `;
-
-  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 })) {
-      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" @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">
-            <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
-                      ? html`<rel-icon name="close" size="md"></rel-icon>`
-                      : html`<rel-icon name="hamburger" size="md"></rel-icon>`}
-                  </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>
-        ${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>
-    `;
-  }
-}
-

package/dist/components/rel-upload/UPLOAD-DESIGN-CHANGES.md

@@ -1,134 +0,0 @@
-# rel-upload — implementation vs. Figma, and what to update in the design
-
-**For:** design team · **From:** engineering · **Date:** 2026-08-09
-**Figma reference:** Reliability DS V1.0 → "↳ File Upload" page (node `8160:917`)
-— `Upload Dropzone` (`8160:2615`), `Upload File Row` (`8160:2566`), `Upload Modal` (`8160:2622`)
-**Shipped:** `<rel-upload>` + `<rel-upload-actions>` in `packages/web/src/components/rel-upload/`
-
-This replaces the previous version of this doc, which was written against the
-outdated sandbox design. Per our agreement, engineering adapted the design where
-it had gaps or conflicted with how the design system already works — everything
-that differs is listed here so the Figma file can be brought in line.
-
----
-
-## What matches the Figma exactly
-
-- **Dropzone**: 16px radius, dashed border, 32/24 padding, circular icon badge,
-  "Drag and drop your files here" (16/24 medium) over the format/size hint
-  (12/20), pill "Browse files" button.
-- **File rows**: 8px radius, 12/16 padding, document icon → name (14/22) + meta
-  (12/20) → trailing status icon + remove. All four states (Ready, Uploading,
-  Success, Error) including the tinted error row.
-- **Progress bar**: 4px, fully rounded, green fill, with the
-  `45% - 2.4 MB of 5.1 MB` meta line.
-- **Modal**: composed from the existing `<rel-modal>` — title, supporting text,
-  close ×, scrolling body, pinned footer. All six variants are reproduced.
-- **Copy**: every string in the design ships verbatim, including
-  `Selected files (3)`, `Uploading 3 files`, `3 files - 2 failed`,
-  `Upload 3 files`, `Retry upload`, and both alert messages.
-
-The hint row is driven by real props: formats come from `accept`, the size limit
-from `max-size`. The design's "PDF, PNG or JPG" / "10 MB" are example values.
-
-## Colour changes the design should adopt
-
-All three are contrast or token-layer corrections. Every hex in the design
-already exists in `vars.css`, but three of them are used at the wrong layer.
-
-### 1. Secondary text `#7D7D7D` → `--rel-text-caption` `#525252`
-
-`#7D7D7D` (gray-400) scores **4.12:1 on white — below the 4.5:1 gate**, and in
-the token system gray-400 is not a body-text token at all. Used for the dropzone
-hint and the file-row meta line. `--rel-text-caption` (`#525252`) scores
-**7.81:1**.
-
-### 2. Success text `#008655` → `--rel-text-success` `#006440`
-
-Green-600 passes (4.62:1) but the system's success-text token is green-700
-(**7.25:1**), and the green rule fixes success text/icons at `#006440`. Affects
-the "…- Uploaded" meta line and the success check icon.
-
-### 3. Dashed dropzone border `#C2C2C2` → `--rel-border-accent` `#8C8C8C`
-
-`#C2C2C2` scores **1.78:1**, under the 3:1 gate for UI boundaries, and gray-200
-has no border token. `--rel-border-accent` (gray-350) scores **3.36:1**.
-
-Also note: the error row border uses `--rel-border-danger` (`#CE3131`, 5.11:1)
-rather than the design's `#FF5252` (3.19:1) — red-500 has no border token.
-And the error meta on the tinted row (`#CE3131` on `#FFEBEB`) lands at
-**4.46:1**, marginally under. That pairing is inherited from the existing
-`rel-alert` subtle-error style, so it is a system-wide question rather than
-something this component introduced — flagging it, not changing it here.
-
-## Structural changes
-
-### 4. The footer is a separate element, not part of the upload body
-
-In the Figma the Cancel/Upload row sits in the Modal Sheet, outside the slot
-holding the upload body. We matched that: `<rel-upload>` renders the alert,
-dropzone and file list; `<rel-upload-actions>` renders the buttons and goes in
-`<rel-modal>`'s footer slot. This is what keeps the footer **pinned while the
-file list scrolls** — with five files the body scrolls and the buttons stay put.
-The actions element finds its `<rel-upload>` sibling automatically.
-
-### 5. The dropzone is not itself a button
-
-The design puts a "Browse files" button inside the dropzone. Making the whole
-dropzone clickable *and* focusable would nest interactive controls inside each
-other, which is an accessibility violation. The dropzone stays a drag-and-drop
-target and a mouse click affordance, but "Browse files" is the only focusable
-control — so keyboard and screen-reader users get exactly one clear action.
-
-### 6. Buttons and the alert are the standard DS components
-
-Cancel/Upload are `rel-button`, and both alerts are `rel-alert` (warning and
-error, subtle). They inherit the system's colours, states and focus rings rather
-than the frame's local styles. One visible consequence: the design draws the
-buttons as pills, which `rel-button` supports, but the disabled Upload uses the
-system's disabled fill rather than the frame's dimmed grey. If design prefers the
-dimmed look, that is a change to the *button* spec, not to upload.
-
-## Behaviour the design doesn't specify
-
-### 7. Validation failures render as error rows
-
-The Figma Failure state shows rows reading "Upload failed - file exceeds the
-10 MB limit" and "Upload failed - unsupported file type". Both are knowable
-*before* any transfer, so we surface rejected files as error rows immediately on
-drop rather than silently discarding them. The wording is unchanged.
-
-### 8. Retry only re-sends what can succeed
-
-A file rejected for format or size will fail identically every time, so
-"Retry upload" skips it — and if *every* failure is of that kind the button is
-disabled. Removing the offending row returns the card to the normal Upload state.
-
-### 9. "Upload" wins over "Retry" while anything is still pending
-
-If some rows failed but others are still ready, the primary action stays
-"Upload N files". Retry only appears once there is nothing left to send. The
-Figma Multi-upload and Failure frames are both consistent with this.
-
-## States still missing from the Figma
-
-These are implemented, but no frame specs them:
-
-| State | What ships today |
-| ----- | ---------------- |
-| **Drag-over** | Dashed border becomes solid brand green, surface takes an 8% brand tint |
-| **Disabled** | Whole card at 60% opacity, nothing interactive |
-| **Dark mode** | Works automatically — every colour is a semantic token |
-
-A frame for each (drag-over especially) would make the set complete.
-
-## Suggested Figma additions
-
-1. Drag-over variant
-2. Disabled variant
-3. Dark reference frame
-4. Apply the three colour corrections above to the shared styles
-
-Questions and pushback welcome — none of this is precious, but items 1–3 and 5
-fix measurable contrast or accessibility problems, so if the design goes a
-different way it needs to solve those rather than reverting.