@mcp-b/web-components 0.2.0

package/dist/tooltip-ahFthek8.d.ts

@@ -0,0 +1,192 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/tooltip/tooltip.d.ts
+/**
+ * <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>
+ * ```
+ */
+declare class SigveloTooltip extends SigveloElement {
+  static styles: CSSResultGroup;
+  private anchor;
+  private cleanup;
+  private hoverInTimeout;
+  private hoverOutTimeout;
+  private isAnchorFocused;
+  private arrow;
+  private polygon;
+  private tooltip;
+  /**
+   * The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must
+   * be in the same document as the tooltip.
+   */
+  for: string;
+  /** Shows or hides the tooltip. */
+  open: boolean;
+  /**
+   * The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the
+   * preferred placement doesn't have enough room.
+   */
+  placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+  /** The distance of the tooltip from its anchor. */
+  distance: number;
+  /** The offset of the tooltip along its trigger. */
+  offset: number;
+  /** The number of milliseconds to wait before opening the tooltip when hovering in. */
+  openDelay: number;
+  /** The number of milliseconds to wait before closing the tooltip when hovering out. */
+  closeDelay: number;
+  /**
+   * By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control
+   * the tooltip programmatically, set this to `manual`.
+   */
+  activation: "auto" | "manual";
+  /** Renders the tooltip without an arrow. */
+  withoutArrow: boolean;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Shows the tooltip. This should only be called from within updated(). */
+  private show;
+  /** Hides the tooltip. This should only be called from within updated(). */
+  private hide;
+  /** Called when the user manually dismisses the tooltip by clicking or pressing escape. */
+  private userDismiss;
+  /** @internal Repositions the tooltip */
+  reposition(): void;
+  /** When the anchor loses focus, hide the tooltip. */
+  private handleAnchorBlur;
+  /** When the anchor receives focus, show the tooltip. */
+  private handleAnchorFocus;
+  /** When the anchor is clicked, dismiss the tooltip. */
+  private handleAnchorPointerUp;
+  /** When the pointer enters the anchor. */
+  private handleAnchorPointerEnter;
+  /** When the pointer leaves the anchor. */
+  private handleAnchorPointerLeave;
+  /** When the pointer moves while the tooltip is visible. */
+  private handleDocumentPointerMove;
+  /** When a key is pressed when the tooltip is open. */
+  private handleDocumentKeyDown;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-tooltip": SigveloTooltip;
+  }
+}
+//#endregion
+export { SigveloTooltip as t };