@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/tooltip/index.js

@@ -47,20 +47,39 @@ var tooltipStyles = css`
     --lt-tooltip-offset: 8px;
   }
 
+  /* The bubble is a "manual" popover so it renders in the top layer — above an open lt-dialog/lt-sidepanel
+     regardless of z-index, and never clipped by an overflow:hidden ancestor. Its position is set from JS (see
+     _reposition in tooltip.ts), since a top-layer element is positioned against the viewport, not the host.
+     display/overlay need allow-discrete so hidePopover() doesn't cut the exit fade short — same as lt-snackbar. */
   .tooltip {
     background: var(--lt-tooltip-bg, var(--lt-bg-inverse));
+    border: 0;
     border-radius: 4px;
     color: var(--lt-tooltip-color, var(--lt-text-inverse));
+    inset: auto;
+    margin: 0;
     opacity: 0;
+    overflow: visible;
     padding: var(--lt-spacing-1) var(--lt-spacing-2);
     pointer-events: none;
-    position: absolute;
+    position: fixed;
     transition:
       opacity 150ms ease,
-      visibility 150ms ease;
-    visibility: hidden;
+      display 150ms allow-discrete,
+      overlay 150ms allow-discrete;
     white-space: nowrap;
-    z-index: 1000;
+  }
+
+  .tooltip:popover-open {
+    opacity: 1;
+  }
+
+  /* A newly-shown popover has no earlier rendered frame to transition from — @starting-style supplies one so the
+     fade-in actually animates instead of snapping straight to the open state. */
+  @starting-style {
+    .tooltip:popover-open {
+      opacity: 0;
+    }
   }
 
   .arrow {
@@ -70,78 +89,60 @@ var tooltipStyles = css`
     width: 0;
   }
 
-  :host(:hover) .tooltip,
-  :host(:focus-within) .tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-
   :host([disabled]) .tooltip,
   :host(:not([content])) .tooltip,
   :host([content='']) .tooltip {
     display: none;
   }
 
-  /* ── Top (default) ──────────────────────────── */
+  /* ── Arrows ─────────────────────────────────────────────────────────────── The bubble's own position is set
+     from JS; each arrow sits on the bubble edge facing the host. Centering is direction-symmetric, so
+     inset-inline-start:50% + translateX(-50%) is correct in both LTR and RTL. Start/end use logical properties, so
+     they flip with the page direction without a custom-property trick. ─────────────────────────── */
 
-  :host(:not([placement])) .tooltip,
-  :host([placement='top']) .tooltip {
-    bottom: calc(100% + var(--lt-tooltip-offset));
-    left: 50%;
-    transform: translateX(-50%);
-  }
+  /* ── Top (default) ──────────────────────────── */
 
   :host(:not([placement])) .arrow,
   :host([placement='top']) .arrow {
     border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    left: 50%;
+    inset-inline-start: 50%;
     top: 100%;
     transform: translateX(-50%);
   }
 
   /* ── Bottom ─────────────────────────────────── */
 
-  :host([placement='bottom']) .tooltip {
-    left: 50%;
-    top: calc(100% + var(--lt-tooltip-offset));
-    transform: translateX(-50%);
-  }
-
   :host([placement='bottom']) .arrow {
     border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
     bottom: 100%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
-  /* ── Left ───────────────────────────────────── */
+  /* ── Start ──────────────────────────────────── */
 
-  :host([placement='left']) .tooltip {
-    right: calc(100% + var(--lt-tooltip-offset));
+  :host([placement='start']) .arrow {
+    border-inline-start-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    inset-inline-start: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([placement='left']) .arrow {
-    border-left-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
+  /* ── End ────────────────────────────────────── */
 
-  /* ── Right ──────────────────────────────────── */
-
-  :host([placement='right']) .tooltip {
-    left: calc(100% + var(--lt-tooltip-offset));
+  :host([placement='end']) .arrow {
+    border-inline-end-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    inset-inline-end: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([placement='right']) .arrow {
-    border-right-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none;
+    }
   }
 `;
 
@@ -317,6 +318,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -341,7 +356,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -362,17 +378,117 @@ var Tooltip = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this._tooltipId = `lt-tooltip-${++_tooltipIdCounter}`;
+    this._hovered = false;
+    this._focused = false;
     this.content = "";
     this.placement = "top";
     this.disabled = false;
     this.background = "";
     this.color = "";
-  }
-  firstUpdated() {
+    // A top-layer popover is positioned against the viewport, not the host, so the bubble's fixed coordinates are
+    // computed here from the host's rect. Fixed coordinates need a physical side, so the logical start/end placements
+    // are resolved against the host's computed direction (start is the left side in LTR, the right side in RTL).
+    this._reposition = () => {
+      if (!this._isShown()) return;
+      const host = this.getBoundingClientRect();
+      const { width, height } = this._tooltipEl.getBoundingClientRect();
+      const style = getComputedStyle(this);
+      const offset = parseFloat(style.getPropertyValue("--lt-tooltip-offset")) || 8;
+      const rtl = style.direction === "rtl";
+      let left;
+      let top;
+      switch (this.placement) {
+        case "bottom":
+          left = host.left + host.width / 2 - width / 2;
+          top = host.bottom + offset;
+          break;
+        case "start":
+        case "end": {
+          const onLeft = this.placement === "start" !== rtl;
+          left = onLeft ? host.left - offset - width : host.right + offset;
+          top = host.top + host.height / 2 - height / 2;
+          break;
+        }
+        default:
+          left = host.left + host.width / 2 - width / 2;
+          top = host.top - offset - height;
+      }
+      this._tooltipEl.style.left = `${left}px`;
+      this._tooltipEl.style.top = `${top}px`;
+    };
+    this._onPointerEnter = () => {
+      this._hovered = true;
+      this._sync();
+    };
+    this._onPointerLeave = () => {
+      this._hovered = false;
+      this._sync();
+    };
+    this._onFocusIn = () => {
+      this._focused = true;
+      this._sync();
+    };
+    this._onFocusOut = (e) => {
+      if (this.contains(e.relatedTarget)) return;
+      this._focused = false;
+      this._sync();
+    };
+  }
+  // aria-describedby's id lookup only works within one tree: the tooltip bubble lives in this element's own
+  // shadow root, but the trigger the id is set on is the slotted (light DOM) element — an id reference can't
+  // cross that boundary, so no AT ever actually announces it (verified: resolves to nothing in the accessibility
+  // tree). aria-description carries the text itself, so there's no id, and nothing to fail to resolve.
+  _describeTrigger() {
     const trigger = this._slot?.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", this._tooltipId);
+    trigger?.setAttribute("aria-description", this.content);
+  }
+  _isShown() {
+    return this._tooltipEl?.matches(":popover-open") ?? false;
+  }
+  _sync() {
+    const shouldShow = (this._hovered || this._focused) && !this.disabled && !!this.content;
+    if (shouldShow) this._show();
+    else this._hide();
+  }
+  _show() {
+    if (!this._isShown()) {
+      this._tooltipEl.showPopover();
+      window.addEventListener("scroll", this._reposition, true);
+      window.addEventListener("resize", this._reposition);
     }
+    this._reposition();
+  }
+  _hide() {
+    if (!this._isShown()) return;
+    this._tooltipEl.hidePopover();
+    window.removeEventListener("scroll", this._reposition, true);
+    window.removeEventListener("resize", this._reposition);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerenter", this._onPointerEnter);
+    this.addEventListener("pointerleave", this._onPointerLeave);
+    this.addEventListener("focusin", this._onFocusIn);
+    this.addEventListener("focusout", this._onFocusOut);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerenter", this._onPointerEnter);
+    this.removeEventListener("pointerleave", this._onPointerLeave);
+    this.removeEventListener("focusin", this._onFocusIn);
+    this.removeEventListener("focusout", this._onFocusOut);
+    this._hovered = false;
+    this._focused = false;
+    this._hide();
+  }
+  firstUpdated() {
+    this._describeTrigger();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("content")) this._describeTrigger();
+    if (changed.has("content") || changed.has("disabled")) this._sync();
+    else if (changed.has("placement")) this._reposition();
   }
   render() {
     const tooltipStyle = styleMap({
@@ -381,7 +497,15 @@ var Tooltip = class extends ThemeableElement {
     });
     return html2`
       <slot></slot>
-      <div class="tooltip" id=${this._tooltipId} role="tooltip" part="tooltip" aria-hidden="true" style=${tooltipStyle}>
+      <div
+        class="tooltip"
+        id=${this._tooltipId}
+        popover="manual"
+        role="tooltip"
+        part="tooltip"
+        aria-hidden="true"
+        style=${tooltipStyle}
+      >
         <lt-text variant="caption" as="span">${this.content}</lt-text>
         <span class="arrow" part="arrow"></span>
       </div>
@@ -392,6 +516,9 @@ Tooltip.styles = tooltipStyles;
 __decorateClass([
   query("slot")
 ], Tooltip.prototype, "_slot", 2);
+__decorateClass([
+  query(".tooltip")
+], Tooltip.prototype, "_tooltipEl", 2);
 __decorateClass([
   property3({ reflect: true })
 ], Tooltip.prototype, "content", 2);

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,4 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
 import type { TooltipPlacement } from './tooltip.types';
 import '../text/text';
@@ -27,6 +28,9 @@ export declare class Tooltip extends ThemeableElement {
     static styles: import("lit").CSSResult;
     private _tooltipId;
     private _slot;
+    private _tooltipEl;
+    private _hovered;
+    private _focused;
     /** Tooltip label text. */
     content: string;
     /** Placement of the tooltip relative to the trigger: top, bottom, left, or right. */
@@ -37,6 +41,19 @@ export declare class Tooltip extends ThemeableElement {
     background: string;
     /** Text color override. Accepts a hex value (#ffffff) or a CSS token name (--lt-color-neutral-50). */
     color: string;
+    private _describeTrigger;
+    private _isShown;
+    private _sync;
+    private _show;
+    private _hide;
+    private _reposition;
+    private _onPointerEnter;
+    private _onPointerLeave;
+    private _onFocusIn;
+    private _onFocusOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/tooltip/tooltip.types.d.ts

@@ -1 +1,5 @@
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Side the tooltip appears on. `'start'`/`'end'` are logical — they resolve to the left/right side based on the
+ * page's reading direction (left/right in LTR, right/left in RTL), not a fixed physical side.
+ */
+export type TooltipPlacement = 'top' | 'bottom' | 'start' | 'end';