import "./icon-CTW4Gr4z.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/comparison/comparison.d.ts /** * * * @summary Displays two elements side-by-side with a draggable divider, allowing users to adjust the visible portions * @tag sigvelo-comparison * for direct visual comparison. * @documentation https://design-system.sigvelo.com/docs/components/comparison * @status stable * @since 1.0 * * @dependency sigvelo-icon * * @slot start - The content to show on the left/start side or top side, depending on orientation. * @slot end - The content to show on the right/end side or bottom side, depending on orientation. * @slot handle-icon - A custom icon to use for the divider's handle. * * @event sigvelo-resize - Dispatched when the comparison's handle is moved. * * @csspart start - The container for the start content. * @csspart end - The container for the end content. * @csspart divider - The draggable divider between start and end. * @csspart handle - The visual handle within the divider. * * @cssstate disabled - Applied when the comparison is disabled. * @cssstate dragging - Applied when the divider is being dragged. * @cssstate focused - Applied when the divider has focus. * * @example Default * ```html * * An orange cat smiles up at the camera * The same orange cat in a grayscale photo * * ``` * * @example Providing content * Comparisons are commonly used for images, but you can compare just about any content. Use the `start` and `end` slots to place content on each side of the comparison. For best results, use elements that shares the same dimensions. * * ```html * * *

Secret Scientists

* When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision. * Tell me more * I'm skeptical * * * *

Secret Scientists

* When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision. * Tell me more * I'm skeptical * * * ``` * * **Note:** To prevent interactions while comparing, add the [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert) attribute to both slotted elements as shown above. * * @example Setting the initial position * Set the initial position of the comparison using the `position` attribute. * * ```html * * A kitten lays in its bed and cuddles a pillow * The same kitten in a grayscale photo * * ``` * * @example Changing the orientation * Set the `orientation` attribute to `vertical` to make the comparison vertical. * * ```html * * Two kittens nestled up on a blanket * The same two kittens in a grayscale photo * * ``` * * @example Using a custom icon * Slot an icon or similar in the `handle-icon` slot to use a custom icon in the handle. * * ```html * * * An orange kitten explores a tall grassy yard * The same kitten in a grayscale photo * * ``` * * @example Disabling * Add the `disabled` attribute to lock the comparison in place. You can still change the position programmatically when disabled. * * ```html * * A kitten peeks out from inside a cardboard box * The same kitten in a grayscale photo * * ``` */ declare class SigveloComparison extends SigveloElement { static styles: CSSResultGroup; private localize; private dragHandler?; private dragStartPosition; private dragStartClientX; private dragStartClientY; private divider; isDragging: boolean; /** The position of the divider as a decimal (0-1). */ position: number; /** The orientation of the comparison slider, either 'horizontal' or 'vertical'. */ orientation: "horizontal" | "vertical"; /** Disables the comparison component, preventing it from being focused and adjusted. */ disabled: boolean; connectedCallback(): void; firstUpdated(): void; updated(changedProperties: PropertyValues): void; disconnectedCallback(): void; private handleFocus; private handleBlur; private handleKeydown; private setupDragging; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-comparison": SigveloComparison; } } //#endregion export { SigveloComparison as t };