@justeattakeaway/pie-tooltip 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,27 +1,275 @@
-import { LitElement as f, unsafeCSS as h, html as v } from "lit";
-import { safeCustomElement as c } from "@justeattakeaway/pie-webc-core";
-const e = class e extends f {
+import { LitElement as C, unsafeCSS as T, nothing as f } from "lit";
+import { property as v, queryAssignedElements as E, query as P, state as $ } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
+import { ifDefined as A } from "lit/directives/if-defined.js";
+import { unsafeStatic as B, html as y } from "lit/static-html.js";
+import { validPropertyValues as m, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
+const b = class b extends C {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", e.v);
+    this.getAttribute("v") || this.setAttribute("v", b.v);
   }
 };
-e.v = "0.1.0";
-let r = e;
-const d = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
-var u = Object.getOwnPropertyDescriptor, b = (o, l, n, a) => {
-  for (var t = a > 1 ? void 0 : a ? u(l, n) : l, s = o.length - 1, p; s >= 0; s--)
-    (p = o[s]) && (t = p(t) || t);
-  return t;
+b.v = "0.2.0";
+let u = b;
+const F = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end"
+], M = ["default", "fit-to-content", "fill-container"], D = ["default", "inverse"], L = ["default", "icon"], R = ["h2", "h3", "h4", "h5", "h6"], W = ["tooltip", "dialog"], p = "pie-tooltip", a = "c-tooltip", j = `${p}-close`, d = {
+  isOpen: !1,
+  position: "top",
+  size: "default",
+  variant: "default",
+  type: "default",
+  isDismissible: !1,
+  headingLevel: "h2"
+}, I = "*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top,.c-tooltip-layer--bottom{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left,.c-tooltip-layer--right{inset-block-start:0;block-size:100%}.c-tooltip-layer--top{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom{--tooltip-motion-translate-y: -4px}.c-tooltip--left{--tooltip-motion-translate-x: 4px}.c-tooltip--right{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);padding-inline-end:calc(var(--tooltip-padding-inline) + var(--tooltip-close-size))}.c-tooltip.is-dismissible:not(.has-heading){display:flex;flex-direction:column;justify-content:center}.c-tooltip--top{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-a)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-body{min-block-size:var(--tooltip-close-size)}.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body{display:grid;align-content:center}.c-tooltip-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}";
+var V = Object.defineProperty, N = Object.getOwnPropertyDescriptor, n = (t, o, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? N(o, i) : o, c = t.length - 1, s; c >= 0; c--)
+    (s = t[c]) && (e = (r ? s(o, i, e) : s(e)) || e);
+  return r && e && V(o, i, e), e;
 };
-let i = class extends r {
+const w = "pie-tooltip-heading", X = (t) => {
+  const o = (r) => !!r && r !== "none";
+  return [
+    t.transform,
+    t.perspective,
+    t.filter,
+    t.backdropFilter,
+    t.translate,
+    t.rotate,
+    t.scale
+  ].some(o) || /\b(paint|layout|content|strict)\b/.test(t.contain) || t.containerType && t.containerType !== "normal" ? !0 : /\b(transform|perspective|filter|backdrop-filter|contain|translate|rotate|scale)\b/.test(t.willChange);
+};
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.isOpen = d.isOpen, this.position = d.position, this.size = d.size, this.variant = d.variant, this.type = d.type, this.isDismissible = d.isDismissible, this.headingLevel = d.headingLevel, this._isPositioned = !1, this._reanchorFrame = 0, this._shouldResolveOverlayMode = !1;
+  }
+  get _mode() {
+    if (this._hasActionContent !== void 0)
+      return this._hasActionContent ? "dialog" : "tooltip";
+  }
+  firstUpdated() {
+    this.resolveMode(), this.projectOverTrigger();
+  }
+  updated(t) {
+    const o = ["trigger", "isOpen", "position", "size"];
+    this.isOpen && t.has("isOpen") && this.resolveOverlayMode(), o.some((i) => t.has(i)) && this.projectOverTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger();
+  }
+  disconnectedCallback() {
+    this.stopTrackingTrigger(), super.disconnectedCallback();
+  }
+  // Listens for scroll (capture — catches any ancestor), resize, and dir-attribute changes to
+  // re-anchor the panel. Multiple events per frame coalesce into one requestAnimationFrame call.
+  startTrackingTrigger() {
+    if (this._triggerTrackingController)
+      return;
+    const t = new AbortController(), { signal: o } = t, i = () => {
+      this._reanchorFrame || (this._reanchorFrame = requestAnimationFrame(() => {
+        this._reanchorFrame = 0, this._shouldResolveOverlayMode && (this._shouldResolveOverlayMode = !1, this.resolveOverlayMode()), this.projectOverTrigger();
+      }));
+    }, r = () => {
+      this._shouldResolveOverlayMode = !0, i();
+    };
+    window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o }), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
+      attributeFilter: ["dir"],
+      subtree: !0
+    }), this._triggerTrackingController = t;
+  }
+  stopTrackingTrigger() {
+    var t, o;
+    (t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (o = this._directionObserver) == null || o.disconnect(), this._directionObserver = void 0, this._shouldResolveOverlayMode = !1, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
+  }
+  resolveMode() {
+    this._hasActionContent = this._assignedActionElements.length > 0;
+  }
+  // Picks between `absolute` (browser handles scrolling, but clipped by overflow ancestors) and
+  // `fixed` (escapes overflow clips, but must re-offset on every scroll). Switches to `fixed`
+  // only when it escapes a clip that `absolute` would not.
+  resolveOverlayMode() {
+    let t = !1, o = !1, i = !1, r = !1, e = this.parentNode;
+    for (; e; ) {
+      const c = e instanceof ShadowRoot ? e.host : e;
+      if (!(c instanceof Element))
+        break;
+      const s = getComputedStyle(c), h = X(s);
+      if ((h || s.position !== "static") && (t = !0), h && (o = !0), (s.overflowX !== "visible" || s.overflowY !== "visible") && (i = i || t, r = r || o), c === this.ownerDocument.documentElement)
+        break;
+      e = c.parentNode;
+    }
+    this.style.position = i && !r ? "fixed" : "";
+  }
+  // Measures the trigger relative to the origin marker (which sits at the containing block's
+  // origin) and writes CSS custom properties. Self-referential: correct for any containing
+  // block. Physical values; shadow-root CSS uses logical properties for RTL mirroring.
+  projectOverTrigger() {
+    this._isPositioned = !1;
+    const t = this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
+    if (!t || !this._originElement) {
+      ["top", "left", "width", "height"].forEach((g) => {
+        this.style.removeProperty(`--tooltip-anchor-${g}`);
+      }), this.style.removeProperty("--tooltip-container-inline-size"), this._isPositioned = !0;
+      return;
+    }
+    const o = this._originElement.getBoundingClientRect(), {
+      top: i,
+      left: r,
+      width: e,
+      height: c
+    } = t.getBoundingClientRect();
+    this.style.setProperty("--tooltip-anchor-top", `${i - o.top}px`), this.style.setProperty("--tooltip-anchor-left", `${r - o.left}px`), this.style.setProperty("--tooltip-anchor-width", `${e}px`), this.style.setProperty("--tooltip-anchor-height", `${c}px`);
+    const s = t.parentElement, h = s ? s.getBoundingClientRect().width : e;
+    this.style.setProperty("--tooltip-container-inline-size", `${h}px`), this._isPositioned = !0;
+  }
+  handleCloseButtonClick() {
+    this.dispatchEvent(new Event(j, { bubbles: !0, composed: !0 }));
+  }
+  renderHeading() {
+    const t = B(this.headingLevel);
+    return y`<${t}
+                        id="${w}"
+                        class="${a}-heading"
+                        data-test-id="${w}">${this.heading}</${t}>`;
+  }
+  renderCloseButton() {
+    var t;
+    return y`
+            <pie-icon-button
+                class="${a}-close"
+                data-test-id="${p}-close"
+                size="xsmall"
+                variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
+                .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
+                @click="${this.handleCloseButtonClick}">
+                <icon-close></icon-close>
+            </pie-icon-button>`;
+  }
   render() {
-    return v`<h1 data-test-id="pie-tooltip">Hello world!</h1>`;
+    const {
+      aria: t,
+      heading: o,
+      isDismissible: i,
+      isOpen: r,
+      position: e,
+      size: c,
+      type: s,
+      variant: h,
+      _mode: g
+    } = this, z = s === "icon", _ = {
+      [`${a}-layer`]: !0,
+      [`${a}-layer--${e}`]: !0,
+      [`${a}-layer--type-${s}`]: !0,
+      "is-open": !!r,
+      "is-positioned": this._isPositioned
+    }, O = {
+      [a]: !0,
+      [`${a}--${e}`]: !0,
+      [`${a}--${h}`]: !0,
+      [`${a}--type-${s}`]: !0,
+      [`${a}--size-${c}`]: !z,
+      "is-dismissible": !!i,
+      "has-action": g === "dialog",
+      "has-heading": !!o
+    }, x = g === "dialog";
+    return y`
+            <div class="${a}-origin" data-test-id="${p}-origin"></div>
+            <div class="${a}-anchor" data-test-id="${p}-anchor">
+                <div class="${k(_)}" data-test-id="${p}-layer">
+                    <div
+                        class="${k(O)}"
+                        data-test-id="${p}"
+                        role="${A(g)}"
+                        aria-hidden="${!r}"
+                        aria-labelledby="${x && o ? w : f}"
+                        aria-label="${x && !o && (t != null && t.label) ? t.label : f}">
+                        ${z ? f : y`<div class="${a}-arrow" data-test-id="${p}-arrow"></div>`}
+                        <div class="${a}-body">
+                            ${o ? this.renderHeading() : f}
+                            <div class="${a}-content" data-test-id="${p}-content">
+                                <slot name="content"></slot>
+                            </div>
+                        </div>
+                        <div class="${a}-action" data-test-id="${p}-action">
+                            <slot name="action" @slotchange="${this.resolveMode}"></slot>
+                        </div>
+                        ${i ? this.renderCloseButton() : f}
+                    </div>
+                </div>
+            </div>`;
   }
 };
-i.styles = h(d);
-i = b([
-  c("pie-tooltip")
-], i);
+l.styles = T(I);
+n([
+  v({ type: String })
+], l.prototype, "trigger", 2);
+n([
+  v({ type: Boolean })
+], l.prototype, "isOpen", 2);
+n([
+  v({ type: String }),
+  m(p, F, d.position)
+], l.prototype, "position", 2);
+n([
+  v({ type: String }),
+  m(p, M, d.size)
+], l.prototype, "size", 2);
+n([
+  v({ type: String }),
+  m(p, D, d.variant)
+], l.prototype, "variant", 2);
+n([
+  v({ type: String }),
+  m(p, L, d.type)
+], l.prototype, "type", 2);
+n([
+  v({ type: Boolean })
+], l.prototype, "isDismissible", 2);
+n([
+  v({ type: String })
+], l.prototype, "heading", 2);
+n([
+  v({ type: String }),
+  m(p, R, d.headingLevel)
+], l.prototype, "headingLevel", 2);
+n([
+  v({ type: Object })
+], l.prototype, "aria", 2);
+n([
+  E({ slot: "action" })
+], l.prototype, "_assignedActionElements", 2);
+n([
+  P(".c-tooltip-origin")
+], l.prototype, "_originElement", 2);
+n([
+  $()
+], l.prototype, "_hasActionContent", 2);
+n([
+  $()
+], l.prototype, "_isPositioned", 2);
+l = n([
+  S("pie-tooltip")
+], l);
 export {
-  i as PieTooltip
+  j as ON_TOOLTIP_CLOSE_EVENT,
+  l as PieTooltip,
+  a as componentClass,
+  p as componentSelector,
+  d as defaultProps,
+  R as headingLevels,
+  W as modes,
+  F as positions,
+  M as sizes,
+  L as types,
+  D as variants
 };

package/dist/react.d.ts

@@ -1,21 +1,146 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from 'lit';
 
-export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<TooltipProps>, "children">> & React_2.RefAttributes<PieTooltip_2> & ReactBaseType>;
+declare type AriaProps = {
+    /**
+     * The accessible name for the close button. Required whenever `isDismissible` is set.
+     */
+    close?: string;
+    /**
+     * The accessible name for the panel in dialog mode. Only used when `heading` is not provided.
+     */
+    label?: string;
+};
+
+export declare const componentClass = "c-tooltip";
+
+export declare const componentSelector = "pie-tooltip";
+
+export declare type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria'>>;
+
+export declare const defaultProps: DefaultProps;
+
+export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
+
+/**
+ * The two patterns the panel can present as. Inferred from the `action` slot rather than
+ * configured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog.
+ */
+export declare const modes: readonly ["tooltip", "dialog"];
+
+export declare const ON_TOOLTIP_CLOSE_EVENT = "pie-tooltip-close";
+
+export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<TooltipProps>, "children">> & React_2.RefAttributes<PieTooltip_2> & PieTooltipEvents & ReactBaseType>;
 
 /**
  * @tagname pie-tooltip
+ * @event {Event} pie-tooltip-close - When the close button is clicked. Set `isOpen` to `false` in response.
+ * @slot content - The descriptive content of the panel. Must not contain focusable elements.
+ * @slot action - An optional slot for interactive content such as a `pie-button`. Filling this slot switches the panel to a non-modal dialog.
  */
 declare class PieTooltip_2 extends PieElement implements TooltipProps {
-    render(): TemplateResult<1>;
+    trigger: TooltipProps['trigger'];
+    isOpen: boolean;
+    position: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    size: "default" | "fit-to-content" | "fill-container";
+    variant: "default" | "inverse";
+    type: "default" | "icon";
+    isDismissible: boolean;
+    heading: TooltipProps['heading'];
+    headingLevel: "h2" | "h3" | "h4" | "h5" | "h6";
+    aria: TooltipProps['aria'];
+    private _assignedActionElements;
+    private _originElement;
+    private _hasActionContent;
+    private _isPositioned;
+    private _triggerTrackingController;
+    private _directionObserver;
+    private _reanchorFrame;
+    private _shouldResolveOverlayMode;
     static styles: CSSResult;
+    private get _mode();
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private startTrackingTrigger;
+    private stopTrackingTrigger;
+    private resolveMode;
+    private resolveOverlayMode;
+    private projectOverTrigger;
+    private handleCloseButtonClick;
+    private renderHeading;
+    private renderCloseButton;
+    render(): TemplateResult;
 }
 
+declare type PieTooltipEvents = {
+    onPieTooltipClose?: (event: Event) => void;
+};
+
+export declare const positions: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
+
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
+export declare const sizes: readonly ["default", "fit-to-content", "fill-container"];
+
+export declare type TooltipMode = typeof modes[number];
+
 export declare interface TooltipProps {
+    /**
+     * The `id` of the element the panel is anchored to. The trigger lives elsewhere in the
+     * DOM and is never slotted into the tooltip.
+     */
+    trigger?: string;
+    /**
+     * When true, the panel is visible. The component never writes to this property: the
+     * consumer owns it and updates it in response to the close event.
+     */
+    isOpen?: boolean;
+    /**
+     * The side of the trigger the panel sits on, and its alignment along the cross axis.
+     */
+    position?: typeof positions[number];
+    /**
+     * How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as
+     * wide as its content, and `fill-container` matches the inline size of the trigger's parent
+     * element. Not applied when `type` is `icon`.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The colour treatment of the panel. `default` is the dark panel, `inverse` the light one.
+     */
+    variant?: typeof variants[number];
+    /**
+     * The presentation of the panel. `icon` is the compact treatment intended for icon triggers:
+     * it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have
+     * no effect on it.
+     */
+    type?: typeof types[number];
+    /**
+     * When true, a close button is rendered inside the panel.
+     */
+    isDismissible?: boolean;
+    /**
+     * The text to display in the panel's heading. In dialog mode this also provides the
+     * panel's accessible name.
+     */
+    heading?: string;
+    /**
+     * The HTML heading tag to use for the panel's heading. Can be h2-h6.
+     */
+    headingLevel?: typeof headingLevels[number];
+    /**
+     * The ARIA labels used for various parts of the tooltip.
+     */
+    aria?: AriaProps;
 }
 
+export declare const types: readonly ["default", "icon"];
+
+export declare const variants: readonly ["default", "inverse"];
+
 export { }

package/dist/react.js

@@ -1,13 +1,27 @@
 import * as o from "react";
-import { createComponent as t } from "@lit/react";
-import { PieTooltip as e } from "./index.js";
-const i = t({
+import { createComponent as e } from "@lit/react";
+import { PieTooltip as t } from "./index.js";
+import { ON_TOOLTIP_CLOSE_EVENT as n, componentClass as r, componentSelector as c, defaultProps as T, headingLevels as P, modes as f, positions as C, sizes as d, types as N, variants as O } from "./index.js";
+const i = e({
   displayName: "PieTooltip",
-  elementClass: e,
+  elementClass: t,
   react: o,
   tagName: "pie-tooltip",
-  events: {}
-}), m = i;
+  events: {
+    onPieTooltipClose: "pie-tooltip-close"
+    // When the close button is clicked. Set `isOpen` to `false` in response.
+  }
+}), l = i;
 export {
-  m as PieTooltip
+  n as ON_TOOLTIP_CLOSE_EVENT,
+  l as PieTooltip,
+  r as componentClass,
+  c as componentSelector,
+  T as defaultProps,
+  P as headingLevels,
+  f as modes,
+  C as positions,
+  d as sizes,
+  N as types,
+  O as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tooltip",
   "description": "PIE Design System Tooltip built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,11 +36,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.4",
-    "@justeattakeaway/pie-css": "1.7.0",
+    "@justeattakeaway/pie-css": "1.8.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.9"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "20.0.0"
+    "@justeattakeaway/pie-icon-button": "2.7.32",
+    "@justeattakeaway/pie-icons-webc": "1.29.1",
+    "@justeattakeaway/pie-webc-core": "21.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -1,3 +1,117 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TooltipProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const positions = [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end',
+] as const;
+
+export const sizes = ['default', 'fit-to-content', 'fill-container'] as const;
+export const variants = ['default', 'inverse'] as const;
+export const types = ['default', 'icon'] as const;
+export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
+
+/**
+ * The two patterns the panel can present as. Inferred from the `action` slot rather than
+ * configured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog.
+ */
+export const modes = ['tooltip', 'dialog'] as const;
+
+export type TooltipMode = typeof modes[number];
+
+type AriaProps = {
+    /**
+     * The accessible name for the close button. Required whenever `isDismissible` is set.
+     */
+    close?: string;
+
+    /**
+     * The accessible name for the panel in dialog mode. Only used when `heading` is not provided.
+     */
+    label?: string;
+};
+
+export interface TooltipProps {
+    /**
+     * The `id` of the element the panel is anchored to. The trigger lives elsewhere in the
+     * DOM and is never slotted into the tooltip.
+     */
+    trigger?: string;
+
+    /**
+     * When true, the panel is visible. The component never writes to this property: the
+     * consumer owns it and updates it in response to the close event.
+     */
+    isOpen?: boolean;
+
+    /**
+     * The side of the trigger the panel sits on, and its alignment along the cross axis.
+     */
+    position?: typeof positions[number];
+
+    /**
+     * How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as
+     * wide as its content, and `fill-container` matches the inline size of the trigger's parent
+     * element. Not applied when `type` is `icon`.
+     */
+    size?: typeof sizes[number];
+
+    /**
+     * The colour treatment of the panel. `default` is the dark panel, `inverse` the light one.
+     */
+    variant?: typeof variants[number];
+
+    /**
+     * The presentation of the panel. `icon` is the compact treatment intended for icon triggers:
+     * it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have
+     * no effect on it.
+     */
+    type?: typeof types[number];
+
+    /**
+     * When true, a close button is rendered inside the panel.
+     */
+    isDismissible?: boolean;
+
+    /**
+     * The text to display in the panel's heading. In dialog mode this also provides the
+     * panel's accessible name.
+     */
+    heading?: string;
+
+    /**
+     * The HTML heading tag to use for the panel's heading. Can be h2-h6.
+     */
+    headingLevel?: typeof headingLevels[number];
+
+    /**
+     * The ARIA labels used for various parts of the tooltip.
+     */
+    aria?: AriaProps;
+}
+
+export const componentSelector = 'pie-tooltip';
+export const componentClass = 'c-tooltip';
+
+export const ON_TOOLTIP_CLOSE_EVENT = `${componentSelector}-close`;
+
+export type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria'>>;
+
+export const defaultProps: DefaultProps = {
+    isOpen: false,
+    position: 'top',
+    size: 'default',
+    variant: 'default',
+    type: 'default',
+    isDismissible: false,
+    headingLevel: 'h2',
+};