@mcp-b/web-components 0.2.0

package/dist/popover-DJBrJ0za.js

@@ -0,0 +1,556 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { stripElementPrefix } from "@mcp-b/wc-support/prefix";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { createId } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/popover/popover.styles.ts
+var popover_styles_default = css`
+  :host {
+    --arrow-size: 0.3125rem;
+    --max-width: 25rem;
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+
+    /* Internal calculated properties */
+    --arrow-diagonal-size: calc(var(--arrow-size) * sin(45deg));
+
+    display: contents;
+  }
+
+  #dialog {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: none;
+    background: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::backdrop {
+      background: transparent;
+    }
+
+    &.visible {
+      display: flex;
+    }
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+  }
+
+  #content {
+    z-index: 2;
+    max-width: var(--max-width);
+    padding: 1rem;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-canvas);
+    box-shadow: var(--sigvelo-elevation-raised);
+  }
+
+  #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-canvas);
+  }
+
+  /* Prevent the popover from touching the edge of the viewport */
+  :host([data-placement^="top"]) #dialog,
+  :host([data-placement^="bottom"]) #dialog {
+    padding-inline: 0.5rem;
+  }
+
+  :host([data-placement^="left"]) #dialog,
+  :host([data-placement^="right"]) #dialog {
+    padding-block: 0.5rem;
+  }
+
+  /* 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;
+  }
+
+  @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/popover/popover.ts
+const openPopovers = /* @__PURE__ */ new Set();
+/**
+* <sigvelo-popover>
+*
+* @summary Provides additional information or functionality without interrupting the flow of content.
+* @tag sigvelo-popover
+* @documentation https://design-system.sigvelo.com/docs/components/popover
+* @status stable
+* @since 1.0
+*
+* @slot - The popover's content. Do not include interactive elements such as button, links, etc. as they won't be
+*  accessible to users inside the popover.
+*
+* @event sigvelo-before-open - Emitted when the popover is instructed to open but before it is shown.
+* @event sigvelo-open - Emitted when the popover has opened and the animation has completed.
+* @event sigvelo-before-close - Emitted when the popover is dismissed but before it is hidden.
+* @event sigvelo-close - Emitted when the popover 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=25rem] - The maximum width the popover be before wrapping.
+* @cssproperty [--show-duration=100ms] - The duration of the show/hide animation.
+
+* @csspart dialog - The element that powers the popover, a `<dialog>` element.
+* @csspart content - The element that wraps the popover's content.
+* @csspart arrow - The popover's arrow. To change the arrow's size, use `--arrow-size` instead.
+*
+* @cssstate open - Applied when the popover is open.
+*
+* @example Default
+* Popovers appear when a corresponding anchor element is clicked. Unlike tooltips, popovers can contain interactive content such as links, buttons, and form controls. They are not modal, so no overlay is shown when open. Popovers will close when the user clicks outside of them or presses [[Escape]]. Only one popover can be open at a time.
+*
+* ```html
+* <sigvelo-popover for="popover__overview">
+*   <div style="display: flex; gap: 1.5rem; align-items: center;">
+*     <img 
+*       src="https://images.unsplash.com/photo-1579014868745-23e405c5605d?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+*       alt="A gray kitten stares into the camera"
+*       style="max-width: 8rem;"
+*     >
+*     <div style="display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem">
+*       Cats love chasing popovers that appear on the screen. I wonder what they would do if they actually caught one.
+*       <sigvelo-button color="primary" size="sm">Learn more</sigvelo-button>
+*     </div>
+*   </div>
+* </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__overview">Show popover</sigvelo-button>
+* ```
+*
+* @example Assigning an anchor
+* Popover anchors should be `<sigvelo-button>` or `<button>` elements. Use the `for` attribute on the popover to link it to the anchor's `id`.
+*
+* ```html
+* <sigvelo-button id="popover__anchor-button">Show popover</sigvelo-button>
+* 
+* <sigvelo-popover for="popover__anchor-button">
+*   I'm just a popover anchored to a button.
+* </sigvelo-popover>
+* 
+* <br><br>
+* 
+* <button id="popover__anchor-native-button">Show popover</button>
+* 
+* <sigvelo-popover for="popover__anchor-native-button">
+*   I'm just a popover anchored to a native button.
+* </sigvelo-popover>
+* ```
+*
+* **Warning:** The anchor element must be in the DOM when the popover is connected, otherwise the popover won't be attached and a warning will be shown in the console.
+*
+* @example Opening and closing popovers
+* Popovers will be shown when their anchor element is clicked. You can open and close a popover programmatically by obtaining a reference to it and setting the `open` property to `true` or `false`, respectively.
+*
+* As a convenience, you can add `data-popover="close"` to any button inside a popover to close it without additional JavaScript.
+*
+* ```html
+* <sigvelo-popover for="popover__opening">
+*   <p>The button below has <code>data-popover="close"</code> so clicking it will close the popover.</p>
+*   <sigvelo-button data-popover="close" color="primary">Dismiss</sigvelo-button>
+* </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__opening">Show popover</sigvelo-button>
+* ```
+*
+* **Note:** Nested popovers are allowed. When opening a popover, all non-ancestor popovers will close, but parent popovers will remain open.
+*
+* @example Placement
+* Use the `placement` attribute to change the preferred location of the popover in reference to its anchor. The popover 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="popover__top">Top</sigvelo-button>
+* <sigvelo-popover for="popover__top" placement="top">I'm on the top</sigvelo-popover>
+* 
+* <sigvelo-button id="popover__bottom">Bottom</sigvelo-button>
+* <sigvelo-popover for="popover__bottom" placement="bottom">I'm on the bottom</sigvelo-popover>
+* 
+* <sigvelo-button id="popover__left">Left</sigvelo-button>
+* <sigvelo-popover for="popover__left" placement="left">I'm on the left </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__right">Right</sigvelo-button>
+* <sigvelo-popover for="popover__right" placement="right">I'm on the right</sigvelo-popover>
+* ```
+*
+* @example Distance
+* You can change the distance of the popover from the anchor by setting the `distance` attribute to the desired number of pixels.
+*
+* ```html
+* <sigvelo-button id="popover__distance-near">Near</sigvelo-button>
+* <sigvelo-popover for="popover__distance-near" distance="0">I'm so near</sigvelo-popover>
+* 
+* <sigvelo-button id="popover__distance-far">Far</sigvelo-button>
+* <sigvelo-popover for="popover__distance-far" distance="30">I'm so far</sigvelo-popover>
+* ```
+*
+* @example Changing the arrow size
+* You can change the size of the popover's arrow with the `--arrow-size` custom property. To hide it, use the `without-arrow` attribute.
+*
+* ```html
+* <sigvelo-button id="popover__big-arrow">Big arrow</sigvelo-button>
+* <sigvelo-popover for="popover__big-arrow" style="--arrow-size: 8px;">I have a big arrow</sigvelo-popover>
+* 
+* <sigvelo-button id="popover__no-arrow">No arrow</sigvelo-button>
+* <sigvelo-popover for="popover__no-arrow" without-arrow>I don't have an arrow</sigvelo-popover>
+* ```
+*
+* @example Setting a max width
+* Use the `--max-width` custom property to change the maximum width of the popover.
+*
+* ```html
+* <sigvelo-button id="popover__max-width">Toggle me</sigvelo-button>
+* <sigvelo-popover for="popover__max-width" style="--max-width: 160px;">
+*   Popovers will usually grow to be a lot wider, but this one has a custom max width.
+* </sigvelo-popover>
+* ```
+*
+* @example Setting focus on open
+* To move focus to a specific form control when the popover opens, use the `autofocus` global attribute.
+*
+* ```html
+* <sigvelo-popover for="popover__autofocus">
+*   <div style="display: flex; flex-direction: column; gap: 1rem;">
+*     <sigvelo-text-area 
+*       autofocus
+*       placeholder="What did you think?"
+*       size="sm" 
+*       resize="none" 
+*       class="sigvelo-vh-label"
+*     ></sigvelo-text-area>
+*     <sigvelo-button color="primary" size="sm" data-popover="close">
+*       Submit
+*     </sigvelo-button>
+*   </div>
+* </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__autofocus">
+*   <sigvelo-icon slot="start" name="message-circle"></sigvelo-icon>
+*   Feedback
+* </sigvelo-button>
+* ```
+*
+* @example Using popovers as confirmations
+* A common popover pattern is to get confirmation before performing a destructive action.
+*
+* ```html
+* <sigvelo-popover for="popover__confirmation" placement="right">
+*   <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+*     <sigvelo-button color="destructive" size="sm" data-popover="close">Confirm delete</sigvelo-button>
+*     <sigvelo-button size="sm" data-popover="close">Cancel</sigvelo-button>
+*   </div>
+* </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__confirmation" color="destructive">Delete</sigvelo-button>
+* ```
+*
+* @example Using tab lists in popovers
+* You can use tab lists in popovers to categorize content as needed.
+*
+* ```html
+* <sigvelo-popover for="popover__tabs" id="popover__tablist">
+*   <sigvelo-tab-list label="Select a tab">
+*     <sigvelo-tab panel="first">First</sigvelo-tab>
+*     <sigvelo-tab panel="second">Second</sigvelo-tab>
+*     <sigvelo-tab panel="third">Third</sigvelo-tab>
+* 
+*     <sigvelo-tab-panel name="first">Cats have a unique way of communicating — they can make over 100 vocal sounds, each meaning something different.</sigvelo-tab-panel>
+*     <sigvelo-tab-panel name="second">A cat's sense of smell is much stronger than that of humans, making their noses one of their most important tools.</sigvelo-tab-panel>
+*     <sigvelo-tab-panel name="third">A group of kittens is called a "kindle," a term that perfectly captures the warmth and charm they bring.</sigvelo-tab-panel>
+*   </sigvelo-tab-list>
+* </sigvelo-popover>
+* 
+* <sigvelo-button id="popover__tabs">Facts about cats</sigvelo-button>
+* 
+* <style>
+*   #popover__tablist::part(content) {
+*     padding: 0;
+*   }
+* 
+*   #popover__tablist sigvelo-tab-list::part(panels) {
+*     padding: 1rem;
+*   }
+* </style>
+* ```
+*/
+var SigveloPopover = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.placement = "top";
+		this.distance = 8;
+		this.offset = 0;
+		this.withoutArrow = false;
+		this.handleAnchorClick = () => {
+			this.open = !this.open;
+		};
+		this.handleDocumentKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				this.open = false;
+				this.anchor?.focus();
+			}
+		};
+		this.handleDocumentClick = (event) => {
+			if (this.anchor && event.composedPath().includes(this.anchor)) return;
+			if (!event.composedPath().includes(this)) this.open = false;
+		};
+	}
+	static {
+		this.styles = [hostStyles, popover_styles_default];
+	}
+	firstUpdated() {
+		if (!this.id) this.id = createId("sigvelo-popover-");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.syncAnchorAria(null);
+		this.anchor?.removeEventListener("click", this.handleAnchorClick);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		document.removeEventListener("click", this.handleDocumentClick);
+		this.cleanup?.();
+		openPopovers.delete(this);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			if (this.open && !this.dialog.classList.contains("visible")) this.show();
+			else this.hide();
+			this.syncAnchorAria(this.open);
+		}
+		if (changedProperties.has("for")) {
+			const root = this.getRootNode();
+			if (this.anchor) {
+				this.syncAnchorAria(null);
+				this.anchor.removeEventListener("click", this.handleAnchorClick);
+			}
+			this.anchor = this.for ? root.getElementById(this.for) : null;
+			if (this.anchor) {
+				this.anchor.addEventListener("click", this.handleAnchorClick);
+				this.syncAnchorAria(this.open);
+			} else if (this.for) console.warn(`A popover was assigned to an element with an ID of "${this.for}" but the element could not be found.`, this);
+		}
+	}
+	setAnchorAria(target, open) {
+		if (open === null) {
+			target.removeAttribute("aria-haspopup");
+			target.removeAttribute("aria-controls");
+			target.removeAttribute("aria-expanded");
+			return;
+		}
+		target.setAttribute("aria-haspopup", "dialog");
+		target.setAttribute("aria-controls", this.id);
+		target.setAttribute("aria-expanded", String(open));
+	}
+	syncAnchorAria(open) {
+		const anchor = this.anchor;
+		if (!anchor) return;
+		this.setAnchorAria(anchor, open);
+		if (stripElementPrefix(anchor.localName) === "button") customElements.whenDefined("sigvelo-button").then(async () => {
+			await anchor.updateComplete;
+			const nativeButton = anchor.shadowRoot?.querySelector("button");
+			if (nativeButton) this.setAnchorAria(nativeButton, open === null ? null : this.open);
+		});
+	}
+	handleDialogClick(event) {
+		if (event.target.closest("[data-popover=\"close\"]")) {
+			event.stopPropagation();
+			this.open = false;
+		}
+	}
+	/** Shows the popover. 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;
+		}
+		openPopovers.forEach((popover) => {
+			if (!popover.contains(this)) popover.open = false;
+		});
+		if (!this.dialog.isConnected) return;
+		this.dialog.showPopover();
+		this.customStates.set("open", true);
+		this.open = true;
+		openPopovers.add(this);
+		document.addEventListener("keydown", this.handleDocumentKeyDown);
+		document.addEventListener("click", this.handleDocumentClick);
+		this.dialog.classList.add("visible");
+		this.cleanup = autoUpdate(this.anchor, this.dialog, () => this.reposition());
+		requestAnimationFrame(() => {
+			const elementToFocus = this.querySelector("[autofocus]");
+			if (elementToFocus && typeof elementToFocus.focus === "function") elementToFocus.focus();
+			else this.dialog.focus();
+		});
+		await animateWithClass(this.dialog, "show");
+		this.dispatchEvent(new SigveloOpenEvent());
+	}
+	/** Hides the popover. 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;
+		}
+		this.customStates.set("open", false);
+		this.open = false;
+		openPopovers.delete(this);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		document.removeEventListener("click", this.handleDocumentClick);
+		if (this.dialog.classList.contains("visible")) {
+			await animateWithClass(this.dialog, "hide");
+			this.dialog.classList.remove("visible");
+			this.dialog.hidePopover();
+			this.dispatchEvent(new SigveloCloseEvent());
+		}
+		if (this.cleanup) {
+			this.cleanup();
+			this.cleanup = void 0;
+			this.removeAttribute("data-placement");
+		}
+	}
+	/** Repositions the popover */
+	reposition() {
+		if (!this.anchor) return;
+		computePosition(this.anchor, this.dialog, {
+			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.dialog.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)"
+				});
+			}
+		});
+	}
+	render() {
+		return html`
+      <dialog
+        id="dialog"
+        part="dialog"
+        popover="manual"
+        aria-label=${ifDefined(this.label)}
+        @click=${this.handleDialogClick}
+      >
+        <div id="content" part="content">
+          <slot></slot>
+        </div>
+        <div id="arrow" part="arrow" role="presentation" ?hidden=${this.withoutArrow}></div>
+      </dialog>
+    `;
+	}
+};
+__decorate([query("#arrow")], SigveloPopover.prototype, "arrow", void 0);
+__decorate([query("#dialog")], SigveloPopover.prototype, "dialog", void 0);
+__decorate([property({ reflect: true })], SigveloPopover.prototype, "for", void 0);
+__decorate([property()], SigveloPopover.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloPopover.prototype, "open", void 0);
+__decorate([property({ reflect: true })], SigveloPopover.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloPopover.prototype, "distance", void 0);
+__decorate([property({ type: Number })], SigveloPopover.prototype, "offset", void 0);
+__decorate([property({
+	attribute: "without-arrow",
+	type: Boolean,
+	reflect: true
+})], SigveloPopover.prototype, "withoutArrow", void 0);
+customElements.define("sigvelo-popover", SigveloPopover);
+//#endregion
+export { SigveloPopover as t };