@reliability-design/web 1.0.3 → 1.1.1

package/dist/components/rel-tooltip/README.md

@@ -0,0 +1,103 @@
+# rel-tooltip
+
+## Overview
+A simple tooltip component that displays contextual text on hover. Supports above/below positioning and optional tail (arrow pointer). Uses CSS opacity transitions for smooth fade-in/out effects. Content is provided via a `<slot>` for flexible trigger elements.
+
+## Usage
+```html
+<!-- Basic tooltip (above) -->
+<rel-tooltip text="This is a helpful tooltip">
+  <button>Hover me</button>
+</rel-tooltip>
+
+<!-- Tooltip positioned below -->
+<rel-tooltip text="Information appears below" position="below">
+  <span>Hover for info</span>
+</rel-tooltip>
+
+<!-- With tail/arrow -->
+<rel-tooltip text="Tooltip with pointer" position="above" showTail>
+  <button>Hover me</button>
+</rel-tooltip>
+
+<!-- Tooltip on icon -->
+<rel-tooltip text="Edit item" showTail>
+  <img src="edit-icon.svg" alt="Edit">
+</rel-tooltip>
+
+<!-- Multiple elements in trigger -->
+<rel-tooltip text="Profile options" position="below">
+  <div class="user-avatar">
+    <img src="avatar.jpg" alt="User">
+    <span>John Doe</span>
+  </div>
+</rel-tooltip>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | `""` | Tooltip text content |
+| `position` | `"above" \| "below"` | `"above"` | Vertical position relative to trigger |
+| `showTail` | `boolean` | `false` | Whether to show the arrow/pointer |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Trigger element(s) that activate the tooltip on hover |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-sm` - Font size
+
+### Spacing Tokens
+- `--rel-spacing-space-xs` - Vertical padding
+- `--rel-spacing-space-sm` - Horizontal padding
+
+### Color Tokens
+- `--rel-surface-toast` - Background color (dark gray)
+- `--rel-colors-white` - Text color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius
+
+## Accessibility
+- Uses `role="tooltip"` on the tooltip bubble
+- `aria-hidden="true"` on tooltip (content is supplemental, not critical)
+- Tooltip does not receive focus (purely decorative on hover)
+- For critical information, consider alternative patterns (e.g., visible labels or expandable sections)
+
+### Keyboard Interactions
+- No keyboard interactions (hover-only)
+- For keyboard accessibility, ensure slotted content is focusable and consider showing tooltip on focus
+
+### Focus Behavior
+- Tooltip activation is hover-only by default
+- Does not interfere with focus on slotted content
+
+## Notes / Edge Cases
+- The tooltip appears on `:host(:hover)` via CSS `opacity: 1` transition
+- By default, tooltip has `opacity: 0` and `pointer-events: none`
+- **Position "above"**: tooltip is positioned at `bottom: calc(100% + 8px)` (8px gap above trigger)
+- **Position "below"**: tooltip is positioned at `top: calc(100% + 8px)` (8px gap below trigger)
+- The tooltip uses `left: 50%` and `transform: translateX(-50%)` for horizontal centering
+- `white-space: nowrap` prevents text wrapping (tooltip width adjusts to content)
+- **Tail/arrow** is a CSS triangle created with transparent borders:
+  - Above pointer: 6px border-top, positioned at `bottom: -6px`
+  - Below pointer: 6px border-bottom, positioned at `top: -6px`
+  - Tail uses `left: 50%` and `transform: translateX(-50%)` for centering
+- The tooltip has `z-index: 1000` to appear above most content
+- The tooltip is `position: absolute` relative to `:host` (which is `position: relative`)
+- `:host` is `display: inline-block` to size to slotted content
+- Transition duration is `0.2s ease` for opacity changes
+- For very long tooltip text, consider wrapping or alternative UI patterns (max-width not set by default)

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: #111;
-      color: #fff;
-      padding: 0.5rem 0.75rem;
-      border-radius: 6px;
-      font-size: 0.875rem;
-      font-family: var(--rel-fontFamilies-primary);
-      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 #111;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid #111;
-    }
-  `;
-
-  render() {
-    return html`
-      <slot></slot>
-      <div class="tooltip-bubble ${this.position}">
-        ${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;
+  }
+}