@reliability-design/web 1.0.6 → 1.1.1

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

@@ -1,80 +1,123 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type TooltipPosition = "above" | "below";
-
-@customElement("rel-tooltip")
-export class RelTooltip extends LitElement {
-  @property({ type: String }) text: string = "";
-  @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean }) showTail: boolean = false;
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: var(--rel-surface-toast, #404040);
-      color: var(--rel-colors-white, #fff);
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-    }
-
-    :host(:hover) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 8px);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 8px);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid var(--rel-surface-toast, #404040);
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid var(--rel-surface-toast, #404040);
-    }
-  `;
-
-  render() {
-    return html`
-      <slot></slot>
-      <div class="tooltip-bubble ${this.position}" role="tooltip" aria-hidden="true">
-        ${this.text}
-        ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type TooltipPosition = "above" | "below";
+
+@customElement("rel-tooltip")
+export class RelTooltip extends LitElement {
+  @property({ type: String }) text: string = "";
+  @property({ type: String }) position: TooltipPosition = "above";
+  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
+    false;
+
+  // Stable id so aria-describedby can reference the bubble across renders.
+  private uniqueId = Math.random().toString(36).slice(2);
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    /* Tooltip container */
+    .tooltip-bubble {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #1a1a1a;
+      color: #ffffff;
+      padding: var(--rel-spacing-space-xs, 8px)
+        var(--rel-spacing-space-sm, 12px);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+      overflow: visible;
+    }
+
+    :host(:hover) .tooltip-bubble,
+    :host(:focus-within) .tooltip-bubble {
+      opacity: 1;
+    }
+
+    /* Positioning */
+    .tooltip-bubble.above {
+      bottom: calc(100% + 8px);
+    }
+
+    .tooltip-bubble.below {
+      top: calc(100% + 8px);
+    }
+
+    /* Tail/Arrow */
+    .tooltip-tail {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      display: block;
+    }
+
+    .tooltip-bubble.above .tooltip-tail {
+      bottom: -6px;
+      border-top: 6px solid #1a1a1a;
+      border-bottom: none;
+    }
+
+    .tooltip-bubble.below .tooltip-tail {
+      top: -6px;
+      border-bottom: 6px solid #1a1a1a;
+      border-top: none;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble,
+    :host-context(.dark) .tooltip-bubble {
+      background-color: #ffffff;
+      color: #000000;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.above .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.above .tooltip-tail {
+      border-top-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.below .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.below .tooltip-tail {
+      border-bottom-color: #ffffff;
+    }
+  `;
+
+  firstUpdated() {
+    this.linkTrigger();
+  }
+
+  private linkTrigger() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const trigger = slot.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+    }
+  }
+
+  render() {
+    return html`
+      <slot @slotchange="${this.linkTrigger}"></slot>
+      <div
+        class="tooltip-bubble ${this.position}"
+        id="tooltip-${this.uniqueId}"
+        role="tooltip"
+      >
+        ${this.text}
+        ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
+      </div>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,46 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-topbar-brand")
+export class RelTopbarBrand extends LitElement {
+  @property({ type: String }) src: string = "";
+  @property({ type: String }) href: string = "/";
+  @property({ type: String }) label: string = "";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      text-decoration: none;
+      color: var(--rel-color-text-primary);
+      font-weight: var(--rel-fontWeights-semibold);
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    img {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`
+      <a href="${this.href}" aria-label="${this.label || "Home"}">
+        ${this.src
+          ? html`<img src="${this.src}" alt="${this.label}" />`
+          : html`<slot>${this.label}</slot>`}
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-brand": RelTopbarBrand;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-topbar-dropdown-item")
+export class RelTopbarDropdownItem extends LitElement {
+  @property({ type: String }) label: string = "";
+  @property({ type: String }) href: string = "#";
+
+  static styles = css`
+    .dropdown-item {
+      display: block;
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      color: var(--rel-color-text-primary);
+      text-decoration: none;
+      font-size: var(--rel-fontSizes-md);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+    }
+
+    .dropdown-item:hover {
+      background: var(--rel-color-bg-hover);
+    }
+  `;
+
+  render() {
+    return html`<a href="${this.href}" class="dropdown-item">${this.label}</a>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-dropdown-item": RelTopbarDropdownItem;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-topbar-dropdown")
+export class RelTopbarDropdown extends LitElement {
+  static styles = css`
+    .dropdown {
+      display: flex;
+      flex-direction: column;
+      min-width: 160px;
+      background: var(--rel-color-bg-primary);
+      border: 1px solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadow-200);
+      padding: var(--rel-spacing-space-2xs) 0;
+    }
+  `;
+
+  render() {
+    return html`<div class="dropdown"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-dropdown": RelTopbarDropdown;
+  }
+}

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

@@ -0,0 +1,315 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "./rel-topbar-dropdown";
+import "./rel-topbar-dropdown-item";
+
+/**
+ * `rel-topbar-item` — A navigation item within rel-topbar.
+ *
+ * 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 {
+      --_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));
+
+      display: inline-block;
+      position: relative;
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+    }
+
+    /* ─── Trigger (shared for <a> and <button>) ─────────────────────── */
+    .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);
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-borders-radius-border-radius-200, 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);
+      text-decoration: none;
+      white-space: nowrap;
+      position: relative;
+      transition: background 0.15s ease, color 0.15s ease;
+      box-sizing: border-box;
+    }
+
+    .trigger::after {
+      content: "";
+      position: absolute;
+      bottom: -2px;
+      left: var(--rel-spacing-space-sm, 12px);
+      right: var(--rel-spacing-space-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-fontWeights-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]) .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-colors-white, #fff);
+      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-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">${_iconChevron()}</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>
+    `;
+  }
+}
+
+function _iconChevron() {
+  return html`
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+      <path d="M3 5L7 9L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `;
+}

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

@@ -0,0 +1,23 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@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;
+  }
+}