@mcp-b/web-components 0.2.0

package/dist/tooltip-DbyoPFNe.js

@@ -0,0 +1,521 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { createId } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/tooltip/tooltip.styles.ts
+var tooltip_styles_default = css`
+  :host {
+    --arrow-size: 0.275rem;
+    --max-width: 20rem;
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+
+    /* Internal calculated properties */
+    --arrow-diagonal-size: calc(var(--arrow-size) * sin(45deg));
+
+    display: contents;
+    line-height: calc(var(--sigvelo-leading-relaxed) * 0.75);
+  }
+
+  #tooltip {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: max-content;
+    max-width: var(--max-width);
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: none;
+    background: none;
+
+    &.visible {
+      display: flex;
+    }
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+  }
+
+  #content {
+    z-index: 2;
+    padding: 0.33em 0.66em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-sm);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-raised);
+    color: var(--sigvelo-color-text);
+    font-size: 0.875em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  #arrow {
+    z-index: 3;
+    position: absolute;
+    width: calc(var(--arrow-diagonal-size) * 2);
+    height: calc(var(--arrow-diagonal-size) * 2);
+    border-right: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    background-color: var(--sigvelo-color-surface);
+  }
+
+  /* Rotate border position based on placement */
+  :host([data-placement^="top"]) {
+    --show-x: 0;
+    --show-y: 0.25em;
+  }
+
+  :host([data-placement^="top"]) #arrow {
+    rotate: 45deg;
+  }
+
+  :host([data-placement^="right"]) {
+    --show-x: -0.25em;
+    --show-y: 0;
+  }
+
+  :host([data-placement^="right"]) #arrow {
+    rotate: 135deg;
+  }
+
+  :host([data-placement^="bottom"]) {
+    --show-x: 0;
+    --show-y: -0.25em;
+  }
+
+  :host([data-placement^="bottom"]) #arrow {
+    rotate: 225deg;
+  }
+
+  :host([data-placement^="left"]) {
+    --show-x: 0.25em;
+    --show-y: 0;
+  }
+
+  :host([data-placement^="left"]) #arrow {
+    rotate: 315deg;
+  }
+
+  #polygon {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--polygon-x1, 0) var(--polygon-y1, 0),
+      var(--polygon-x2, 0) var(--polygon-y2, 0),
+      var(--polygon-x3, 0) var(--polygon-y3, 0),
+      var(--polygon-x4, 0) var(--polygon-y4, 0)
+    );
+  }
+
+  @keyframes show {
+    from {
+      translate: var(--show-x) var(--show-y);
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      translate: 0 0;
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/tooltip/tooltip.ts
+const openTooltips = /* @__PURE__ */ new Set();
+/**
+* <sigvelo-tooltip>
+*
+* @summary Provides additional information when the user hovers or focuses on an element.
+* @tag sigvelo-tooltip
+* @documentation https://design-system.sigvelo.com/docs/components/tooltip
+* @status stable
+* @since 1.0
+*
+* @slot - The tooltip's content. Do not include interactive elements such as button, links, etc. as they won't be
+*  accessible to users inside the tooltip.
+*
+* @event sigvelo-before-open - Emitted when the tooltip is instructed to open but before it is shown.
+* @event sigvelo-open - Emitted when the tooltip has opened and the animation has completed.
+* @event sigvelo-before-close - Emitted when the tooltip is dismissed but before it is hidden.
+* @event sigvelo-close - Emitted when the tooltip has closed. and the animation has completed.
+*
+* @cssproperty [--arrow-size=0.3125rem] - The size of the arrow. To hide the arrow, use the `without-arrow` attribute.
+* @cssproperty [--max-width=20rem] - The maximum width the tooltip can be before wrapping.
+* @cssproperty [--show-duration=100ms] - The duration of the show/hide animation.
+*
+* @csspart tooltip - The element that powers the tooltip.
+* @csspart content - The element that wraps the tooltip's content.
+* @csspart arrow - The tooltip's arrow. To change the arrow's size, use `--arrow-size` instead.
+*
+* @cssstate open - Applied when the tooltip is open.
+*
+* @example Default
+* Tooltips follow the ARIA APG tooltip pattern for accessibility. They show on hover and on focus. A transparent "safe polygon" is drawn between the tooltip and its anchor element to allow mouse users to hover over the tooltip without closing it. Only one tooltip will be visible on the page at a time. Tooltips are not be shown when the pointer type is `touch`.
+*
+* ```html
+* <sigvelo-button id="tooltip__overview">Hover over me</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__overview">I'm a tooltip</sigvelo-tooltip>
+* ```
+*
+* **Note:** Due to platform limitations, some Sigvelo components are treated differently when used as tooltip anchors, but they will still be announced as expected by screen readers.
+*
+* @example Assigning an anchor
+* Tooltip anchors must be interactive/focusable elements such as buttons, links, etc. Use the `for` attribute on the tooltip to link it to the anchor's `id`. Do not include interactive elements _inside_ your tooltips, as they won't be accessible to users.
+*
+* ```html
+* <sigvelo-button id="tooltip__anchor-button">Sigvelo button with tooltip</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__anchor-button">This is a Sigvelo button</sigvelo-tooltip>
+*
+* <br><br>
+*
+* <button id="tooltip__anchor-native-button">Native button with tooltip</button>
+* <sigvelo-tooltip for="tooltip__anchor-native-button">This is a native button</sigvelo-tooltip>
+*
+* <br><br>
+*
+* <a href="#" id="tooltip__anchor-link">Link with tooltip</a>
+* <sigvelo-tooltip for="tooltip__anchor-link">This is a link</sigvelo-tooltip>
+* ```
+*
+* **Warning:** The anchor element must be in the DOM when the tooltip is connected, otherwise the tooltip won't be attached and a warning will be shown in the console.
+*
+* @example Placement
+* Use the `placement` attribute to change the preferred location of the tooltip in reference to its anchor. The tooltip will shift to a more optimal location if the preferred placement doesn't have enough room. The default placement is `top`.
+*
+* ```html
+* <sigvelo-button id="tooltip__top">Top</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__top" placement="top">I'm on the top</sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__bottom">Bottom</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__bottom" placement="bottom">I'm on the bottom</sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__left">Left</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__left" placement="left">I'm on the left </sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__right">Right</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__right" placement="right">I'm on the right</sigvelo-tooltip>
+* ```
+*
+* @example Distance
+* You can change the distance of the tooltip from the anchor by setting the `distance` attribute to the desired number of pixels.
+*
+* ```html
+* <sigvelo-button id="tooltip__distance-near">Near</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__distance-near" distance="0">I'm so near</sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__distance-far">Far</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__distance-far" distance="30">I'm so far</sigvelo-tooltip>
+* ```
+*
+* @example Open and close delays
+* Tooltips allow a brief duration before opening and closing when hovering in and out with the mouse. You can control these value by setting the `open-delay` and `close-delay` attributes to the desired number of milliseconds.
+*
+* ```html
+* <sigvelo-button id="tooltip__no-delay">No delay</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__no-delay" open-delay="0" close-delay="0">I have no delay whatsoever</sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__long-delay">Long delay</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__long-delay" open-delay="500" close-delay="500">I have a long delay to open and close</sigvelo-tooltip>
+* ```
+*
+* @example Changing the arrow size
+* You can change the size of the tooltip's arrow with the `--arrow-size` custom property. Set it to `0` to remove the arrow.
+*
+* ```html
+* <sigvelo-button id="tooltip__big-arrow">Big arrow</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__big-arrow" style="--arrow-size: 8px;">I have a big arrow</sigvelo-tooltip>
+*
+* <sigvelo-button id="tooltip__no-arrow">No arrow</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__no-arrow" without-arrow>I don't have an arrow</sigvelo-tooltip>
+* ```
+*
+* @example Setting a max width
+* Use the `--max-width` custom property to change the maximum width of the tooltip.
+*
+* ```html
+* <sigvelo-button id="tooltip__max-width">Hover over me</sigvelo-button>
+* <sigvelo-tooltip for="tooltip__max-width" style="--max-width: 160px;">
+*   I'm a tooltip with a lot of content. So much, in fact, that it will wrap to the next line.
+* </sigvelo-tooltip>
+* ```
+*/
+var SigveloTooltip = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isAnchorFocused = false;
+		this.open = false;
+		this.placement = "top";
+		this.distance = 8;
+		this.offset = 0;
+		this.openDelay = 50;
+		this.closeDelay = 100;
+		this.activation = "auto";
+		this.withoutArrow = false;
+		this.handleAnchorBlur = () => {
+			this.isAnchorFocused = false;
+			this.open = false;
+		};
+		this.handleAnchorFocus = () => {
+			this.isAnchorFocused = true;
+			this.open = true;
+		};
+		this.handleAnchorPointerUp = () => {
+			this.userDismiss();
+		};
+		this.handleAnchorPointerEnter = (event) => {
+			if (event.pointerType === "touch") return;
+			if (!this.hoverInTimeout) this.hoverInTimeout = setTimeout(() => {
+				this.hoverInTimeout = void 0;
+				this.open = true;
+			}, this.openDelay);
+		};
+		this.handleAnchorPointerLeave = () => {
+			clearTimeout(this.hoverInTimeout);
+			this.hoverInTimeout = void 0;
+		};
+		this.handleDocumentPointerMove = (event) => {
+			if (!this.anchor || this.isAnchorFocused) return;
+			const isHoveringAnchor = event.composedPath().includes(this.anchor);
+			const isHoveringTooltip = event.composedPath().includes(this.tooltip);
+			if (isHoveringAnchor || isHoveringTooltip) {
+				clearTimeout(this.hoverOutTimeout);
+				this.hoverOutTimeout = void 0;
+				return;
+			}
+			if (!this.hoverOutTimeout) this.hoverOutTimeout = setTimeout(() => {
+				this.hoverOutTimeout = void 0;
+				this.open = false;
+			}, this.closeDelay);
+		};
+		this.handleDocumentKeyDown = (event) => {
+			if (event.key === "Escape") this.userDismiss();
+		};
+	}
+	static {
+		this.styles = [hostStyles, tooltip_styles_default];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this.hoverInTimeout);
+		clearInterval(this.hoverOutTimeout);
+	}
+	firstUpdated() {
+		if (!this.id) this.id = createId("sigvelo-tooltip-");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) if (this.open && !this.tooltip.classList.contains("visible")) this.show();
+		else this.hide();
+		if (changedProperties.has("for") || changedProperties.has("activation")) {
+			const root = this.getRootNode();
+			if (this.anchor) {
+				this.anchor.removeAttribute("aria-describedby");
+				this.anchor.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
+				this.anchor.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
+				this.anchor.removeEventListener("pointerup", this.handleAnchorPointerUp);
+				this.anchor.removeEventListener("focus", this.handleAnchorFocus);
+				this.anchor.removeEventListener("blur", this.handleAnchorBlur);
+			}
+			this.anchor = this.for ? root.getElementById(this.for) : null;
+			if (this.anchor) {
+				if (this.activation === "auto") {
+					this.anchor.addEventListener("pointerenter", this.handleAnchorPointerEnter);
+					this.anchor.addEventListener("pointerleave", this.handleAnchorPointerLeave);
+					this.anchor.addEventListener("pointerup", this.handleAnchorPointerUp);
+					this.anchor.addEventListener("focus", this.handleAnchorFocus);
+					this.anchor.addEventListener("blur", this.handleAnchorBlur);
+				}
+				if (this.anchor.localName === "sigvelo-button") {
+					this.removeAttribute("role");
+					this.setAttribute("aria-hidden", "true");
+					this.anchor.removeAttribute("aria-describedby");
+				} else {
+					this.setAttribute("role", "tooltip");
+					this.removeAttribute("aria-hidden");
+					this.anchor?.setAttribute("aria-describedby", this.id);
+				}
+			} else if (this.for) console.warn(`A tooltip was assigned to an element with an ID of "${this.for}" but the element could not be found.`, this);
+		}
+	}
+	/** Shows the tooltip. This should only be called from within updated(). */
+	async show() {
+		if (!this.anchor) return;
+		const openEvent = new SigveloBeforeOpenEvent();
+		this.dispatchEvent(openEvent);
+		if (openEvent.defaultPrevented) {
+			this.open = false;
+			return;
+		}
+		if (this.anchor?.localName === "sigvelo-button") this.anchor.shadowRoot.querySelector("[part~=\"button\"]")?.setAttribute("aria-description", String(this.textContent));
+		openTooltips.forEach((tooltip) => {
+			if (tooltip.activation !== "manual") tooltip.open = false;
+		});
+		if (!this.tooltip.isConnected) return;
+		this.tooltip.showPopover();
+		this.customStates.set("open", true);
+		this.open = true;
+		openTooltips.add(this);
+		if (this.activation === "auto") {
+			document.addEventListener("keydown", this.handleDocumentKeyDown);
+			document.addEventListener("pointermove", this.handleDocumentPointerMove);
+		}
+		this.tooltip.classList.add("visible");
+		this.cleanup = autoUpdate(this.anchor, this.tooltip, () => this.reposition());
+		await animateWithClass(this.tooltip, "show");
+		this.dispatchEvent(new SigveloOpenEvent());
+	}
+	/** Hides the tooltip. This should only be called from within updated(). */
+	async hide() {
+		const closeEvent = new SigveloBeforeCloseEvent({ source: this });
+		this.dispatchEvent(closeEvent);
+		if (closeEvent.defaultPrevented) {
+			this.open = true;
+			return;
+		}
+		if (this.anchor?.localName === "sigvelo-button") this.anchor.shadowRoot.querySelector("[part~=\"button\"]")?.removeAttribute("aria-description");
+		this.customStates.set("open", false);
+		this.open = false;
+		openTooltips.delete(this);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		document.removeEventListener("pointermove", this.handleDocumentPointerMove);
+		if (this.tooltip.classList.contains("visible")) {
+			await animateWithClass(this.tooltip, "hide");
+			this.tooltip.classList.remove("visible");
+			this.tooltip.hidePopover();
+			this.dispatchEvent(new SigveloCloseEvent());
+		}
+		if (this.cleanup) {
+			this.cleanup();
+			this.cleanup = void 0;
+			this.removeAttribute("data-placement");
+		}
+	}
+	/** Called when the user manually dismisses the tooltip by clicking or pressing escape. */
+	userDismiss() {
+		if (this.open) {
+			this.isAnchorFocused = false;
+			this.open = false;
+		}
+	}
+	/** @internal Repositions the tooltip */
+	reposition() {
+		if (!this.anchor) return;
+		computePosition(this.anchor, this.tooltip, {
+			placement: this.placement,
+			middleware: [
+				offset({
+					mainAxis: this.distance,
+					crossAxis: this.offset
+				}),
+				flip(),
+				shift(),
+				arrow({ element: this.arrow })
+			]
+		}).then(({ x, y, middlewareData, placement }) => {
+			this.setAttribute("data-placement", placement);
+			Object.assign(this.tooltip.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+			if (middlewareData.arrow) {
+				const arrowX = middlewareData.arrow.x;
+				const arrowY = middlewareData.arrow.y;
+				const staticSide = {
+					top: "bottom",
+					right: "left",
+					bottom: "top",
+					left: "right"
+				}[placement.split("-")[0]];
+				Object.assign(this.arrow.style, {
+					left: typeof arrowX === "number" ? `${arrowX}px` : "",
+					top: typeof arrowY === "number" ? `${arrowY}px` : "",
+					[staticSide]: "calc(var(--arrow-diagonal-size) * -1)"
+				});
+			}
+		});
+		requestAnimationFrame(() => {
+			if (!this.anchor) return;
+			const anchorCoords = this.anchor.getBoundingClientRect();
+			const tooltipCoords = this.tooltip.getBoundingClientRect();
+			if (this.placement.includes("top") || this.placement.includes("bottom")) {
+				const topEl = anchorCoords.top < tooltipCoords.top ? anchorCoords : tooltipCoords;
+				const bottomEl = anchorCoords.top < tooltipCoords.top ? tooltipCoords : anchorCoords;
+				this.polygon.style.setProperty("--polygon-x1", `${topEl.left}px`);
+				this.polygon.style.setProperty("--polygon-y1", `${topEl.bottom}px`);
+				this.polygon.style.setProperty("--polygon-x2", `${topEl.right}px`);
+				this.polygon.style.setProperty("--polygon-y2", `${topEl.bottom}px`);
+				this.polygon.style.setProperty("--polygon-x3", `${bottomEl.right}px`);
+				this.polygon.style.setProperty("--polygon-y3", `${bottomEl.top}px`);
+				this.polygon.style.setProperty("--polygon-x4", `${bottomEl.left}px`);
+				this.polygon.style.setProperty("--polygon-y4", `${bottomEl.top}px`);
+			} else {
+				const leftEl = anchorCoords.left < tooltipCoords.left ? anchorCoords : tooltipCoords;
+				const rightEl = anchorCoords.left < tooltipCoords.left ? tooltipCoords : anchorCoords;
+				this.polygon.style.setProperty("--polygon-x1", `${leftEl.right}px`);
+				this.polygon.style.setProperty("--polygon-y1", `${leftEl.top}px`);
+				this.polygon.style.setProperty("--polygon-x2", `${rightEl.left}px`);
+				this.polygon.style.setProperty("--polygon-y2", `${rightEl.top}px`);
+				this.polygon.style.setProperty("--polygon-x3", `${rightEl.left}px`);
+				this.polygon.style.setProperty("--polygon-y3", `${rightEl.bottom}px`);
+				this.polygon.style.setProperty("--polygon-x4", `${leftEl.right}px`);
+				this.polygon.style.setProperty("--polygon-y4", `${leftEl.bottom}px`);
+			}
+		});
+	}
+	render() {
+		return html`
+      <div id="tooltip" part="tooltip" popover="manual">
+        <div id="content" part="content">
+          <slot></slot>
+        </div>
+        <div id="arrow" part="arrow" role="presentation" ?hidden=${this.withoutArrow}></div>
+        <div id="polygon" role="presentation"></div>
+      </div>
+    `;
+	}
+};
+__decorate([query("#arrow")], SigveloTooltip.prototype, "arrow", void 0);
+__decorate([query("#polygon")], SigveloTooltip.prototype, "polygon", void 0);
+__decorate([query("#tooltip")], SigveloTooltip.prototype, "tooltip", void 0);
+__decorate([property({ reflect: true })], SigveloTooltip.prototype, "for", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloTooltip.prototype, "open", void 0);
+__decorate([property({ reflect: true })], SigveloTooltip.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloTooltip.prototype, "distance", void 0);
+__decorate([property({ type: Number })], SigveloTooltip.prototype, "offset", void 0);
+__decorate([property({
+	attribute: "open-delay",
+	type: Number
+})], SigveloTooltip.prototype, "openDelay", void 0);
+__decorate([property({
+	attribute: "close-delay",
+	type: Number
+})], SigveloTooltip.prototype, "closeDelay", void 0);
+__decorate([property()], SigveloTooltip.prototype, "activation", void 0);
+__decorate([property({
+	attribute: "without-arrow",
+	type: Boolean,
+	reflect: true
+})], SigveloTooltip.prototype, "withoutArrow", void 0);
+customElements.define("sigvelo-tooltip", SigveloTooltip);
+//#endregion
+export { SigveloTooltip as t };