import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/popover/popover.d.ts /** * * * @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 `` 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 * *
* A gray kitten stares into the camera *
* Cats love chasing popovers that appear on the screen. I wonder what they would do if they actually caught one. * Learn more *
*
* * * Show popover * ``` * * @example Assigning an anchor * Popover anchors should be `` or ` * * * I'm just a popover anchored to a native button. * * ``` * * **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 * *

The button below has data-popover="close" so clicking it will close the popover.

* Dismiss * * * Show popover * ``` * * **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 * Top * I'm on the top * * Bottom * I'm on the bottom * * Left * I'm on the left * * Right * I'm on the right * ``` * * @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 * Near * I'm so near * * Far * I'm so far * ``` * * @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 * Big arrow * I have a big arrow * * No arrow * I don't have an arrow * ``` * * @example Setting a max width * Use the `--max-width` custom property to change the maximum width of the popover. * * ```html * Toggle me * * Popovers will usually grow to be a lot wider, but this one has a custom max width. * * ``` * * @example Setting focus on open * To move focus to a specific form control when the popover opens, use the `autofocus` global attribute. * * ```html * *
* * * Submit * *
* * * * * Feedback * * ``` * * @example Using popovers as confirmations * A common popover pattern is to get confirmation before performing a destructive action. * * ```html * *
* Confirm delete * Cancel *
* * * Delete * ``` * * @example Using tab lists in popovers * You can use tab lists in popovers to categorize content as needed. * * ```html * * * First * Second * Third * * Cats have a unique way of communicating — they can make over 100 vocal sounds, each meaning something different. * A cat's sense of smell is much stronger than that of humans, making their noses one of their most important tools. * A group of kittens is called a "kindle," a term that perfectly captures the warmth and charm they bring. * * * * Facts about cats * * * ``` */ declare class SigveloPopover extends SigveloElement { static styles: CSSResultGroup; private cleanup; private anchor; private arrow; private dialog; /** * The ID of of popover's anchor element. This must be an interactive/focusable element such as a button and it must * be in the same document as the popover. */ for: string; /** An accessible name for the popover. */ label?: string; /** * Shows or hides the popover. */ open: boolean; /** * The placement of the popover 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 popover from its anchor. */ distance: number; /** The offset of the popover along its trigger. */ offset: number; /** Renders the popover without an arrow. */ withoutArrow: boolean; firstUpdated(): void; disconnectedCallback(): void; updated(changedProperties: PropertyValues): void; private setAnchorAria; private syncAnchorAria; private handleAnchorClick; private handleDialogClick; /** When a key is pressed when the popover is open. */ private handleDocumentKeyDown; private handleDocumentClick; /** Shows the popover. This should only be called from within updated(). */ private show; /** Hides the popover. This should only be called from within updated(). */ private hide; /** Repositions the popover */ private reposition; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-popover": SigveloPopover; } } //#endregion export { SigveloPopover as t };