@mcp-b/web-components 0.2.0

package/dist/preview-card-C7H1FPfd.js

@@ -0,0 +1,287 @@
+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 { SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/components/preview-card/preview-card.styles.ts
+var preview_card_styles_default = css`
+  :host {
+    --max-width: 20rem;
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+
+    display: contents;
+  }
+
+  #card {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: max-content;
+    max-width: var(--max-width);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    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);
+    color: var(--sigvelo-color-text);
+
+    &.visible {
+      display: block;
+    }
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.95;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/preview-card/preview-card.ts
+/**
+* <sigvelo-preview-card>
+*
+* @summary Shows a preview card when the user hovers over an anchor element.
+* @tag sigvelo-preview-card
+* @status experimental
+* @since 1.0
+*
+* @slot - The preview card's content.
+*
+* @event sigvelo-before-open - Emitted before the card opens.
+* @event sigvelo-open - Emitted after the card has opened.
+* @event sigvelo-before-close - Emitted before the card closes.
+* @event sigvelo-close - Emitted after the card has closed.
+*
+* @cssproperty [--max-width=20rem] - The maximum width of the card.
+* @cssproperty [--show-duration=150ms] - The duration of the show/hide animation.
+*
+* @csspart card - The card container.
+*
+* @cssstate open - Applied when the card is open.
+*
+* @example Default
+* ```html
+* <a href="#" id="preview__default">Hover over this link</a>
+* <sigvelo-preview-card for="preview__default">
+*   <div style="padding: 1rem;">
+*     <strong>Preview</strong>
+*     <p style="margin: 0.5rem 0 0;">This is a preview of the linked content with additional context.</p>
+*   </div>
+* </sigvelo-preview-card>
+* ```
+*/
+var SigveloPreviewCard = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.anchor = null;
+		this.open = false;
+		this.placement = "bottom";
+		this.distance = 8;
+		this.openDelay = 400;
+		this.closeDelay = 200;
+		this.handleAnchorPointerEnter = (event) => {
+			if (event.pointerType !== "touch") this.scheduleOpen();
+		};
+		this.handleAnchorPointerLeave = () => {
+			this.scheduleClose();
+		};
+		this.handleCardPointerEnter = () => {
+			clearTimeout(this.hoverOutTimeout);
+			this.hoverOutTimeout = void 0;
+		};
+		this.handleCardPointerLeave = () => {
+			this.scheduleClose();
+		};
+		this.handleAnchorFocusIn = () => {
+			this.scheduleOpen();
+		};
+		this.handleAnchorFocusOut = (event) => {
+			if (!this.containsFocusTarget(event.relatedTarget)) this.scheduleClose();
+		};
+		this.handleCardFocusIn = () => {
+			clearTimeout(this.hoverOutTimeout);
+			this.hoverOutTimeout = void 0;
+		};
+		this.handleCardFocusOut = (event) => {
+			if (!this.containsFocusTarget(event.relatedTarget)) this.scheduleClose();
+		};
+		this.handleKeyDown = (event) => {
+			if (event.key !== "Escape" || !this.open) return;
+			event.preventDefault();
+			event.stopPropagation();
+			clearTimeout(this.hoverInTimeout);
+			clearTimeout(this.hoverOutTimeout);
+			this.open = false;
+			if (event.currentTarget === this.card && this.anchor instanceof HTMLElement) this.anchor.focus();
+		};
+	}
+	static {
+		this.styles = [hostStyles, preview_card_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncAnchor();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this.hoverInTimeout);
+		clearTimeout(this.hoverOutTimeout);
+		this.ownerDocument.removeEventListener("keydown", this.handleKeyDown);
+		this.removeAnchorListeners();
+		this.cleanup?.();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			if (this.open) {
+				this.ownerDocument.addEventListener("keydown", this.handleKeyDown);
+				if (!this.card.classList.contains("visible")) this.show();
+			} else if (!this.open) {
+				this.ownerDocument.removeEventListener("keydown", this.handleKeyDown);
+				this.hide();
+			}
+		}
+		if (changedProperties.has("for")) this.syncAnchor();
+	}
+	syncAnchor() {
+		const root = this.getRootNode();
+		const nextAnchor = this.for ? root.getElementById(this.for) : null;
+		if (nextAnchor !== this.anchor) {
+			this.removeAnchorListeners();
+			this.anchor = nextAnchor;
+		}
+		this.addAnchorListeners();
+	}
+	addAnchorListeners() {
+		this.anchor?.addEventListener("pointerenter", this.handleAnchorPointerEnter);
+		this.anchor?.addEventListener("pointerleave", this.handleAnchorPointerLeave);
+		this.anchor?.addEventListener("focusin", this.handleAnchorFocusIn);
+		this.anchor?.addEventListener("focusout", this.handleAnchorFocusOut);
+		this.anchor?.addEventListener("keydown", this.handleKeyDown);
+	}
+	removeAnchorListeners() {
+		this.anchor?.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
+		this.anchor?.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
+		this.anchor?.removeEventListener("focusin", this.handleAnchorFocusIn);
+		this.anchor?.removeEventListener("focusout", this.handleAnchorFocusOut);
+		this.anchor?.removeEventListener("keydown", this.handleKeyDown);
+	}
+	async show() {
+		if (!this.anchor) return;
+		const openEvent = new SigveloBeforeOpenEvent();
+		this.dispatchEvent(openEvent);
+		if (openEvent.defaultPrevented) {
+			this.open = false;
+			return;
+		}
+		this.card.showPopover();
+		this.card.classList.add("visible");
+		this.customStates.set("open", true);
+		this.cleanup = autoUpdate(this.anchor, this.card, () => this.reposition());
+		await animateWithClass(this.card, "show");
+		this.dispatchEvent(new SigveloOpenEvent());
+	}
+	async hide() {
+		this.customStates.set("open", false);
+		if (this.card.classList.contains("visible")) {
+			await animateWithClass(this.card, "hide");
+			this.card.classList.remove("visible");
+			this.card.hidePopover();
+			this.dispatchEvent(new SigveloCloseEvent());
+		}
+		this.cleanup?.();
+		this.cleanup = void 0;
+		this.removeAttribute("data-placement");
+	}
+	reposition() {
+		if (!this.anchor) return;
+		computePosition(this.anchor, this.card, {
+			placement: this.placement,
+			middleware: [
+				offset({ mainAxis: this.distance }),
+				flip(),
+				shift({ padding: 8 })
+			]
+		}).then(({ x, y, placement }) => {
+			this.setAttribute("data-placement", placement);
+			Object.assign(this.card.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	scheduleOpen() {
+		clearTimeout(this.hoverOutTimeout);
+		this.hoverOutTimeout = void 0;
+		if (!this.open && !this.hoverInTimeout) this.hoverInTimeout = setTimeout(() => {
+			this.hoverInTimeout = void 0;
+			this.open = true;
+		}, this.openDelay);
+	}
+	scheduleClose() {
+		clearTimeout(this.hoverInTimeout);
+		this.hoverInTimeout = void 0;
+		if (this.open && !this.hoverOutTimeout) this.hoverOutTimeout = setTimeout(() => {
+			this.hoverOutTimeout = void 0;
+			this.open = false;
+		}, this.closeDelay);
+	}
+	containsFocusTarget(target) {
+		return target instanceof Node && Boolean(this.anchor?.contains(target) || this.card.contains(target));
+	}
+	render() {
+		return html`
+      <div
+        id="card"
+        part="card"
+        popover="manual"
+        @pointerenter=${this.handleCardPointerEnter}
+        @pointerleave=${this.handleCardPointerLeave}
+        @focusin=${this.handleCardFocusIn}
+        @focusout=${this.handleCardFocusOut}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#card")], SigveloPreviewCard.prototype, "card", void 0);
+__decorate([property({ reflect: true })], SigveloPreviewCard.prototype, "for", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloPreviewCard.prototype, "open", void 0);
+__decorate([property({ reflect: true })], SigveloPreviewCard.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloPreviewCard.prototype, "distance", void 0);
+__decorate([property({
+	attribute: "open-delay",
+	type: Number
+})], SigveloPreviewCard.prototype, "openDelay", void 0);
+__decorate([property({
+	attribute: "close-delay",
+	type: Number
+})], SigveloPreviewCard.prototype, "closeDelay", void 0);
+customElements.define("sigvelo-preview-card", SigveloPreviewCard);
+//#endregion
+export { SigveloPreviewCard as t };

package/dist/preview-card-DitOCZTD.d.ts

@@ -0,0 +1,86 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/preview-card/preview-card.d.ts
+/**
+ * <sigvelo-preview-card>
+ *
+ * @summary Shows a preview card when the user hovers over an anchor element.
+ * @tag sigvelo-preview-card
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The preview card's content.
+ *
+ * @event sigvelo-before-open - Emitted before the card opens.
+ * @event sigvelo-open - Emitted after the card has opened.
+ * @event sigvelo-before-close - Emitted before the card closes.
+ * @event sigvelo-close - Emitted after the card has closed.
+ *
+ * @cssproperty [--max-width=20rem] - The maximum width of the card.
+ * @cssproperty [--show-duration=150ms] - The duration of the show/hide animation.
+ *
+ * @csspart card - The card container.
+ *
+ * @cssstate open - Applied when the card is open.
+ *
+ * @example Default
+ * ```html
+ * <a href="#" id="preview__default">Hover over this link</a>
+ * <sigvelo-preview-card for="preview__default">
+ *   <div style="padding: 1rem;">
+ *     <strong>Preview</strong>
+ *     <p style="margin: 0.5rem 0 0;">This is a preview of the linked content with additional context.</p>
+ *   </div>
+ * </sigvelo-preview-card>
+ * ```
+ */
+declare class SigveloPreviewCard extends SigveloElement {
+  static styles: CSSResultGroup;
+  private anchor;
+  private cleanup;
+  private hoverInTimeout;
+  private hoverOutTimeout;
+  private card;
+  /** The ID of the anchor element that triggers the preview card. */
+  for: string;
+  /** Shows or hides the preview card. */
+  open: boolean;
+  /** The placement of the card relative to the anchor. */
+  placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+  /** The distance from the anchor in pixels. */
+  distance: number;
+  /** Milliseconds to wait before opening on hover. */
+  openDelay: number;
+  /** Milliseconds to wait before closing when the pointer leaves. */
+  closeDelay: number;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  private syncAnchor;
+  private addAnchorListeners;
+  private removeAnchorListeners;
+  private show;
+  private hide;
+  private reposition;
+  private scheduleOpen;
+  private scheduleClose;
+  private containsFocusTarget;
+  private handleAnchorPointerEnter;
+  private handleAnchorPointerLeave;
+  private handleCardPointerEnter;
+  private handleCardPointerLeave;
+  private handleAnchorFocusIn;
+  private handleAnchorFocusOut;
+  private handleCardFocusIn;
+  private handleCardFocusOut;
+  private handleKeyDown;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-preview-card": SigveloPreviewCard;
+  }
+}
+//#endregion
+export { SigveloPreviewCard as t };

package/dist/progress-Db0_axHQ.d.ts

@@ -0,0 +1,181 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/progress/progress.d.ts
+/**
+ * <sigvelo-progress>
+ *
+ * @summary Visually represents the progress of a request or task.
+ * @tag sigvelo-progress
+ * @documentation https://design-system.sigvelo.com/docs/components/progress
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Text to render inside the progress bar.
+ *
+ * @cssproperty [--track-color=var(--sigvelo-color-neutral-bg-subtle)] - The color of the progress bar's track.
+ * @cssproperty [--track-size=1.5em | 1em] - The height or thickness of the track, depending on the type of progress bar.
+ * @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the progress bar's value indicator.
+ * @cssproperty [--diameter=10em] - For progress rings, the diameter of the ring.
+ *
+ * @csspart track - The progress bar's track, a `<div>` for progress bars and a `<circle>` for progress rings.
+ * @csspart indicator - The progress bar's current value indicator, a `<div>` for progress bars and an SVG `<circle>`
+ *  for progress rings.
+ * @csspart content - The container that holds any content that's been slotted in.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-progress label="Downloading" value="50">
+ *   50%
+ * </sigvelo-progress>
+ * ```
+ *
+ * @example Adding a label
+ * Labels aren't displayed in the progress bar, but they're required for assistive devices such as screen readers. You can add a label using the `label` attribute.
+ *
+ * ```html
+ * <sigvelo-progress label="Progress" value="50"></sigvelo-progress>
+ * ```
+ *
+ * @example Showing content
+ * Slot in some text to show content in the progress bar's indicator.
+ *
+ * ```html
+ * <sigvelo-progress label="Progress" value="75">75%</sigvelo-progress>
+ * ```
+ *
+ * @example Progress rings
+ * Set the `variant` attribute to `ring` to show progress in the shape of a ring.
+ *
+ * ```html
+ * <sigvelo-progress label="Completion" variant="ring" value="50">
+ *   50%
+ * </sigvelo-progress>
+ * ```
+ *
+ * @example Progress pie charts
+ * Set the `variant` attribute to `pie` to show progress in the shape of a filled pie chart.
+ *
+ * ```html
+ * <sigvelo-progress label="Completion" variant="pie" value="66"></sigvelo-progress>
+ * ```
+ *
+ * @example Indeterminate progress
+ * When the completion status can't be determined, the progress bar is considered indeterminate. Add the `indeterminate` attribute for tasks whose progress can't be reported.
+ *
+ * ```html
+ * <sigvelo-progress label="Waiting for response" indeterminate></sigvelo-progress>
+ *
+ * <br>
+ *
+ * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+ *   <sigvelo-progress label="Waiting for response" variant="ring" indeterminate></sigvelo-progress>
+ *   <sigvelo-progress label="Waiting for response" variant="pie" indeterminate></sigvelo-progress>
+ * </div>
+ * ```
+ *
+ * @example Changing the size
+ * Use `--track-size` property to change the track size for bars and rings. For rings and pie charts, use the `--diameter` custom property to change the size.
+ *
+ * ```html
+ * <sigvelo-progress
+ *   label="Progress"
+ *   value="75"
+ *   style="--track-size: 10px;"
+ * >
+ * </sigvelo-progress>
+ *
+ * <br>
+ *
+ * <sigvelo-progress
+ *   label="Progress"
+ *   value="75"
+ *   style="--track-size: 60px; font-size: 1.5rem;"
+ * >
+ *   Loading
+ * </sigvelo-progress>
+ *
+ * <br>
+ *
+ * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+ *   <sigvelo-progress
+ *     variant="ring"
+ *     value="75"
+ *     style="--track-size: 4px; --diameter: 100px;"
+ *   >
+ *     75%
+ *   </sigvelo-progress>
+ *
+ *   <sigvelo-progress
+ *     variant="pie"
+ *     value="75"
+ *     style="--diameter: 100px;"
+ *   >
+ *   </sigvelo-progress>
+ * </div>
+ * ```
+ *
+ * @example Changing the colors
+ * Use the `--track-color` custom property to change the progress bar's track color. Use the `--indicator-color` custom property to change the color of the progress indicator.
+ *
+ * ```html
+ * <sigvelo-progress
+ *   style="--track-color: mistyrose; --indicator-color: deeppink; color: white;"
+ *   label="Progress"
+ *   value="75"
+ * >
+ *   Almost there!
+ * </sigvelo-progress>
+ *
+ * <br>
+ *
+ * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+ *   <sigvelo-progress
+ *     style="--track-color: mistyrose; --indicator-color: deeppink;"
+ *     variant="ring"
+ *     label="Progress"
+ *     value="75"
+ *   >
+ *     75%
+ *   </sigvelo-progress>
+ *
+ *   <sigvelo-progress
+ *     style="--track-color: mistyrose; --indicator-color: deeppink;"
+ *     variant="pie"
+ *     label="Progress"
+ *     value="75"
+ *   >
+ *   </sigvelo-progress>
+ * </div>
+ * ```
+ */
+declare class SigveloProgress extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** A custom label for assistive devices. */
+  label: string;
+  /** The type of progress bar to render. */
+  variant: "bar" | "ring" | "pie";
+  /** The progress bar's minimum value. */
+  min: number;
+  /** The progress bar's maximum value. */
+  max: number;
+  /** The progress bar's current value. */
+  value: number;
+  /** The progress bar's current value as a percentage. This is a readonly property. */
+  get percentage(): number;
+  /**
+   * When the completion status can't be determined, the progress bar is considered indeterminate and the value is
+   * ignored. Useful for tasks whose progress can't be reported.
+   */
+  indeterminate: boolean;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-progress": SigveloProgress;
+  }
+}
+//#endregion
+export { SigveloProgress as t };