declare module "utilities/base-path" { /** Sets the library's base path to the specified directory */ export function setBasePath(path: string): void; /** * Gets the library's base path. * * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly. * By default, this script will look for a script ending in zinc.js or zinc-autoloader.js and set the base path * to the directory that contains that file. To override this behavior, you can add the data-zinc attribute to any * script on the page (it probably makes the most sense to attach it to the Zinc script, but it could also be on a * bundle). The value can be a local folder, or it can point to a CORS-enabled endpoint such as a CDN. * * * * Alternatively, you can set the base path manually using the exported setBasePath() function. * * @param subpath - An optional path to append to the base path. */ export function getBasePath(subpath?: string): string; } declare module "zinc-autoloader" { /** * Checks a node for undefined elements and attempts to register them */ export function discover(root: Element | ShadowRoot): Promise; } declare module "internal/tabbable" { /** * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single * element because it short-circuits after finding the first and last ones. */ export function getTabbableBoundary(root: HTMLElement | ShadowRoot): { start: HTMLElement; end: HTMLElement; }; export function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[]; } declare module "internal/theme" { import { SignalWatcher } from '@lit-labs/signals'; export const themeSignal: import("@lit-labs/signals").Signal.State; export const modeSignal: import("@lit-labs/signals").Signal.State; export function installThemeListener(): void; export { SignalWatcher }; } declare module "internal/event" { export type EventTypeRequiresDetail = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? never : Partial extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never; export type EventTypeDoesNotRequireDetail = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? T : Partial extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T; export type EventTypesWithRequiredDetail = { [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail]: true; }; export type EventTypesWithoutRequiredDetail = { [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail]: true; }; type WithRequired = T & { [P in K]-?: T[P]; }; export type ZincEventInit = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? GlobalEventHandlersEventMap[T] extends CustomEvent> ? CustomEventInit : Partial extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit : WithRequired, 'detail'> : CustomEventInit : CustomEventInit; export type GetCustomEventType = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent ? GlobalEventHandlersEventMap[T] : CustomEvent : CustomEvent; export type ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail; export function waitForEvent(el: HTMLElement, eventName: string): Promise; } declare module "internal/zinc-element" { import { LitElement, type PropertyValues } from "lit"; import type { EventTypeDoesNotRequireDetail, EventTypeRequiresDetail, EventTypesWithoutRequiredDetail, EventTypesWithRequiredDetail, GetCustomEventType, ZincEventInit } from "internal/event"; import type { SignalWatcherApi } from "@lit-labs/signals"; type Constructor> = new (...args: any[]) => T; const ZincElementBase: typeof LitElement & Constructor; export default class ZincElement extends ZincElementBase { dir: string; lang: string; t: string; m: string; protected willUpdate(changed: PropertyValues): void; static define(name: string, elementConstructor?: typeof ZincElement, options?: ElementDefinitionOptions): void; static dependencies: Record; constructor(); emit(name: EventTypeDoesNotRequireDetail, options?: ZincEventInit | undefined): GetCustomEventType; emit(name: EventTypeRequiresDetail, options?: ZincEventInit): GetCustomEventType; } export interface ZincFormControl extends ZincElement { name: string; value: unknown; disabled?: boolean; defaultValue?: unknown; defaultChecked?: boolean; form?: string; storeKey?: string; pattern?: string; min?: number | string | Date; max?: number | string | Date; step?: number | 'any'; required?: boolean; minlength?: number; maxlength?: number; readonly validity: ValidityState; readonly validationMessage: string; checkValidity: () => boolean; getForm: () => HTMLFormElement | null; reportValidity: () => boolean; setCustomValidity: (message: string) => void; } } declare module "internal/form-navigation" { export class FormNavigationController { private readonly form; constructor(form: HTMLFormElement); private handleKeyDown; private shouldSkipEnterKey; private shouldExcludeFromNavigation; private isSelectOption; private findParentSelect; private findParentGroup; private getGroupItems; private focusNextInGroup; private focusPreviousInGroup; private areRequiredFieldsFilled; private getNavigableControls; private findCurrentControlIndex; private focusNextControl; private focusPreviousControl; private submitForm; destroy(): void; } /** * Gets or creates a FormNavigationController for the given form */ export function getFormNavigationController(form: HTMLFormElement): FormNavigationController; } declare module "utilities/query" { /** * Builds a valid `#id` selector. Ids can legally contain characters that CSS treats as syntax (`&`, `.`, `:`, * a leading digit), so they must be escaped before being used in `querySelector`/`matches`. */ export function idSelector(id: string): string; export function deepQuery(selector: string, root?: Document | ShadowRoot | Element): T | null; export function deepQueryAll(selector: string, root?: Document | ShadowRoot | Element, out?: T[]): T[]; export function deepQuerySelectorAll(selector: string, element: Element, stopSelector: string): Element[]; } declare module "internal/storage" { export class Store { storage: Storage; prefix: string; ttl: number; constructor(storage: Storage, prefix: string, ttl?: number); get(key: string): null | string; stripTtl(value: string | null): null | string; setWithTTL(key: string, value: string, ttl: number): void; set(key: string, value: string): void; remove(key: string): void; cleanup(): void; } } declare module "internal/form" { import type { ReactiveController, ReactiveControllerHost } from "lit"; import type { ZincFormControl } from "internal/zinc-element"; import type Button from "components/button/index"; export const formCollections: WeakMap>; export function clearFormStoreValues(formOrStoreKey: HTMLFormElement | string): void; export interface FormControlControllerOptions { /** A function that returns the form containing the form control. */ form: (input: ZincFormControl) => HTMLFormElement | null; /** A function that returns the form control's name, which will be submitted with the form data. */ name: (input: ZincFormControl) => string; /** A function that returns the form control's current value. */ value: (input: ZincFormControl) => unknown | unknown[]; /** A function that returns the form control's default value. */ defaultValue: (input: ZincFormControl) => unknown | unknown[]; /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */ disabled: (input: ZincFormControl) => boolean; /** * A function that maps to the form control's reportValidity() function. When the control is invalid, this will * prevent submission and trigger the browser's constraint violation warning. */ reportValidity: (input: ZincFormControl) => boolean; /** * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false. * this is helpful is you want to check validation without triggering the native browser constraint violation warning. */ checkValidity: (input: ZincFormControl) => boolean; /** A function that sets the form control's value */ setValue: (input: ZincFormControl, value: unknown) => void; /** * An array of event names to listen to. When all events in the list are emitted, the control will receive validity * states such as user-valid and user-invalid.user interacted validity states. */ assumeInteractionOn: string[]; } export class FormControlController implements ReactiveController { host: ZincFormControl & ReactiveControllerHost; form?: HTMLFormElement | null; options: FormControlControllerOptions; constructor(host: ReactiveControllerHost & ZincFormControl, options?: Partial); hostConnected(): Promise; hostDisconnected(): void; hostUpdated(): void; private attachForm; private detachForm; private handleFormData; private handleFormSubmit; private enableSubmit; private handleFormReset; private handleInteraction; private attachFormPersistence; private detachFormPersistence; private restorePersistedValue; private persistHostValue; private checkFormValidity; private reportFormValidity; private setUserInteracted; private doAction; /** Returns the associated `
` element, if one exists. */ getForm(): HTMLFormElement | null; /** Resets the form, restoring all the control to their default value */ reset(submitter?: HTMLInputElement | Button): void; /** Submits the form, triggering validation and form data injection. */ submit(submitter?: HTMLInputElement | Button): void; /** * Synchronously sets the form control's validity. Call this when you know the future validity but need to update * the host element immediately, i.e. before Lit updates the component in the next update. */ setValidity(isValid: boolean): void; /** * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything * that affects constraint validation changes so the component receives the correct validity states. */ updateValidity(): void; /** * Dispatches a non-bubbling, cancelable custom event of type `zn-invalid`. * If the `zm-invalid` event will be cancelled then the original `invalid` * event (which may have been passed as argument) will also be cancelled. * If no original `invalid` event has been passed then the `zn-invalid` * event will be cancelled before being dispatched. */ emitInvalidEvent(originalInvalidEvent?: Event): void; } export const validValidityState: ValidityState; export const customErrorValidityState: ValidityState; export const valueMissingValidityState: ValidityState; } declare module "internal/slot" { import type { ReactiveController, ReactiveControllerHost } from 'lit'; /** A reactive controller that determines when slots exist. */ export class HasSlotController implements ReactiveController { host: ReactiveControllerHost & Element; slotNames: string[]; constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]); private hasDefaultSlot; private hasNamedSlot; test(slotName: string): boolean; hostConnected(): void; hostDisconnected(): void; getSlot(slotName: string): Element; getDefaultSlot(): HTMLElement[]; getSlots(slotName: string): NodeListOf; private handleSlotChange; } /** * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative. */ export function getInnerHTML(slot: HTMLSlotElement): string; /** * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a * string. This is useful because we can't use slot.textContent as an alternative. */ export function getTextContent(slot: HTMLSlotElement | undefined | null): string; } declare module "internal/watch" { import type { LitElement } from "lit"; type UpdateHandler = (prev?: unknown, next?: unknown) => void; type NonUndefined = T extends undefined ? never : T; type UpdateHandlerFunctionKeys = { [K in keyof T]-?: NonUndefined extends UpdateHandler ? K : never; }[keyof T]; interface WatchOptions { /** * If true, will only start watching after the initial update/render */ waitUntilFirstUpdate?: boolean; } /** * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the * initial update, set `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler. * * Usage: * * ```ts * @watch('propName') * handlePropChanges(oldValue, newValue) {...} * ``` * * @param propertyName * @param options */ export function watch(propertyName: string | string[], options?: WatchOptions): (proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys) => void; } declare module "utilities/top-layer-manager" { class TopLayerManager { private openDropdowns; private openTooltips; registerDropdown(el: HTMLElement): void; unregisterDropdown(el: HTMLElement): void; isDropdownOpen(): boolean; registerTooltip(el: HTMLElement): void; unregisterTooltip(el: HTMLElement): void; isTooltipOpen(): boolean; } const topLayerManager: TopLayerManager; export default topLayerManager; } declare module "translations/en" { import { type Translation } from "utilities/localize"; const translation: Translation; export default translation; } declare module "utilities/localize" { import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize'; import type { Translation as DefaultTranslation } from '@shoelace-style/localize'; export class LocalizeController extends DefaultLocalizationController { } export { registerTranslation } from '@shoelace-style/localize'; export interface Translation extends DefaultTranslation { $code: string; $name: string; $dir: 'ltr' | 'rtl'; onChange: string; hidePassword: string; showPassword: string; clearEntry: string; numOptionsSelected: (num: number) => string; fileButtonText: string; fileButtonTextMultiple: string; folderButtonText: string; folderDragDrop: string; fileDragDrop: string; numFilesSelected: (num: number) => string; } } declare module "components/popup/popup.component" { import ZincElement from "internal/zinc-element"; import type { CSSResultGroup } from 'lit'; export interface VirtualElement { getBoundingClientRect: () => DOMRect; contextElement?: Element; } /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/popup * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnPopup extends ZincElement { static styles: CSSResultGroup; private anchorEl; private cleanup; /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */ popup: HTMLElement; private arrowEl; /** * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the * `anchor` slot instead. */ anchor: Element | string | VirtualElement; /** * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn * down and the popup will be hidden. */ active: boolean; /** * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the * panel inside of the viewport. */ placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'; /** * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is * clipped, using a `fixed` position strategy can often workaround it. */ strategy: 'absolute' | 'fixed'; /** The distance in pixels from which to offset the panel away from its anchor. */ distance: number; /** The distance in pixels from which to offset the panel along its anchor. */ skidding: number; /** * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using * `::part(arrow)` in your stylesheet. */ arrow: boolean; /** * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will * align the arrow to the start, end, or center of the popover instead. */ arrowPlacement: 'start' | 'end' | 'center' | 'anchor'; /** * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example, * this will prevent it from overflowing the corners. */ arrowPadding: number; /** * When set, placement of the popup will flip to the opposite site to keep it in view. You can use * `flipFallbackPlacements` to further configure how the fallback placement is determined. */ flip: boolean; /** * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip * fallback strategy will be used instead. * */ flipFallbackPlacements: string; /** * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether * the popup should be positioned using the best available fit based on available space or as it was initially * preferred. */ flipFallbackStrategy: 'best-fit' | 'initial'; /** * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can * change the boundary by passing a reference to one or more elements to this property. */ flipBoundary: Element | Element[]; /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */ flipPadding: number; /** Moves the popup along the axis to keep it in view when clipped. */ shift: boolean; /** * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can * change the boundary by passing a reference to one or more elements to this property. */ shiftBoundary: Element | Element[]; /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */ shiftPadding: number; /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */ autoSize: 'horizontal' | 'vertical' | 'both'; /** Syncs the popup's width or height to that of the anchor element. */ sync: 'width' | 'height' | 'both'; /** * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can * change the boundary by passing a reference to one or more elements to this property. */ autoSizeBoundary: Element | Element[]; /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */ autoSizePadding: number; /** * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is * active. */ hoverBridge: boolean; connectedCallback(): Promise; disconnectedCallback(): void; updated(changedProps: Map): Promise; private handleAnchorChange; handleAnchorHover: () => void; private start; private stop; /** Forces the popup to recalculate and reposition itself. */ reposition(): void; private updateHoverBridge; render(): import("lit-html").TemplateResult<1>; } } declare module "components/popup/index" { import ZnPopup from "components/popup/popup.component"; export * from "components/popup/popup.component"; export default ZnPopup; global { interface HTMLElementTagNameMap { 'zn-popup': ZnPopup; } } } declare module "components/menu-item/submenu-controller" { import { type HasSlotController } from "internal/slot"; import type { ReactiveController, ReactiveControllerHost } from 'lit'; import { type LocalizeController } from "utilities/localize"; import type ZnMenuItem from "components/menu-item/index"; /** A reactive controller to manage the registration of event listeners for submenus. */ export class SubmenuController implements ReactiveController { private host; private popupRef; private enableSubmenuTimer; private isConnected; private isPopupConnected; private skidding; private readonly hasSlotController; private readonly localize; private readonly submenuOpenDelay; constructor(host: ReactiveControllerHost & ZnMenuItem, hasSlotController: HasSlotController, localize: LocalizeController); hostConnected(): void; hostDisconnected(): void; hostUpdated(): void; private addListeners; private removeListeners; private handleMouseMove; private handleMouseOver; private handleSubmenuEntry; private handleKeyDown; private handleClick; private handleFocusOut; private handlePopupMouseover; private handlePopupReposition; private setSubmenuState; private enableSubmenu; private disableSubmenu; private updateSkidding; isExpanded(): boolean; renderSubmenu(): import("lit-html").TemplateResult<1>; } } declare module "utilities/sha256" { export function sha256(input: string): string; } declare module "components/icon/icon.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement from "internal/zinc-element"; export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" | "lucide"; export type IconColor = "default" | "primary" | "accent" | "info" | "warning" | "error" | "success" | "white" | "disabled" | "red" | "blue" | "green" | "orange" | "yellow" | "indigo" | "violet" | "pink" | "grey" | (string & Record); /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/icon * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnIcon extends ZincElement { static styles: CSSResultGroup; src: string; alt: string; size: number; round: boolean; tile: boolean; depth: boolean; library: IconLibrary; color: IconColor; fill: IconColor; padded: boolean; blink: boolean; squared: boolean; private static readonly presetColors; private isPresetColor; gravatarOptions: string; defaultLibrary: IconLibrary; private libraryAutoSet; convertToLibrary(input: string): IconLibrary; private convertIndicatorToLibrary; connectedCallback(): void; protected willUpdate(changedProperties: PropertyValues): void; protected getUpdateComplete(): Promise; private parseSrc; private applyHashFragment; private normalizeRavatarEmail; render(): import("lit-html").TemplateResult<1>; private getAvatarInitials; private renderLucideIcon; private getLucideIcon; private toPascalCase; private getLucideSvg; private getSvgAttributes; private escapeSvgAttribute; protected getColorForAvatar(avatarInitials: string): string; } } declare module "components/icon/index" { import ZnIcon from "components/icon/icon.component"; export * from "components/icon/icon.component"; export default ZnIcon; global { interface HTMLElementTagNameMap { 'zn-icon': ZnIcon; } } } declare module "components/menu-item/menu-item.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnIcon from "components/icon/index"; import ZnPopup from "components/popup/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/menu-item * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnMenuItem extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-icon': typeof ZnIcon; 'zn-popup': typeof ZnPopup; }; private cachedTextLabel; defaultSlot: HTMLSlotElement; menuItem: HTMLElement; /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */ type: 'normal' | 'checkbox'; /** The item's visual style. A standalone item defaults to navigation styling; * a parent zn-menu sets this to `dropdown` or `shell` automatically. */ variant: 'default' | 'dropdown' | 'shell'; /** Draws the item in a checked state. */ checked: boolean; checkedPosition: 'left' | 'right'; /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */ value: string; /** Draws the menu item in a loading state. */ loading: boolean; /** Draws the menu item in a disabled state, preventing selection. */ disabled: boolean; color: string; href: string; dataPath: string; target: '_self' | '_blank' | '_parent' | '_top' | string; dataTarget: 'modal' | 'slide' | string; rel: string; gaid: string; confirm: boolean; /** Removes all padding from the menu item. */ flush: boolean; /** Removes horizontal (left/right) padding only. Ignored if flush is set. */ flushX: boolean; /** Removes vertical (top/bottom) padding only. Ignored if flush is set. */ flushY: boolean; /** Removes the border from the menu item. */ noBorder: boolean; /** Marks the menu item as currently active/selected. */ active: boolean; private readonly localize; private readonly hasSlotController; private submenuController; connectedCallback(): void; disconnectedCallback(): void; private handleDefaultSlotChange; private handleHostClick; private handleMouseOver; handleCheckedChange(): void; handleDisabledChange(): void; handleTypeChange(): void; /** Returns a text label based on the contents of the menu item's default slot. */ getTextLabel(): string; isSubmenu(): boolean; private _isLink; render(): import("lit-html").TemplateResult; } } declare module "components/menu-item/index" { import ZnMenuItem from "components/menu-item/menu-item.component"; export * from "components/menu-item/menu-item.component"; export default ZnMenuItem; global { interface HTMLElementTagNameMap { 'zn-menu-item': ZnMenuItem; } } } declare module "events/zn-select" { import type ZnMenuItem from "components/menu-item/index"; export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem | HTMLElement; }>; global { interface GlobalEventHandlersEventMap { 'zn-select': ZnSelectEvent; } } } declare module "internal/offset" { /** * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the * parent doesn't have to be positioned relative or absolute. * * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069 */ export function getOffset(element: HTMLElement, parent: HTMLElement): { top: number; left: number; }; } declare module "internal/scroll" { /** * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible * without premature unlocking. */ export function lockBodyScrolling(lockingEl: HTMLElement): void; /** * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method. */ export function unlockBodyScrolling(lockingEl: HTMLElement): void; /** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */ export function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void; /** * Every ancestor of `element`, itself included, that is scrolled away from the top. Shadow * boundaries are crossed, so a host's own scroller and the app's outer one are both found. */ export function getScrolledAncestors(element: Element | null | undefined): Element[]; /** Returns containers to the top. */ export function scrollToTop(containers: Iterable, behavior?: ScrollBehavior): void; } declare module "components/dialog/dialog.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnButton from "components/button/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/dialog * @status experimental * @since 1.0 * * @dependency zn-button * * @event zn-show - Emitted when the dialog is opens. * @event zn-close - Emitted when the dialog is closed. * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in * destructive behavior such as data loss. * * @slot - The default slot. * @slot label - The dialog's label. Alternatively you can use the `label` attribute. * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied * to the icon depending on the dialog variant. * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`. * @slot header-actions - Optional actions to add to the header. Works best with `` elements. * @slot footer - The dialog's footer. This is typically used for buttons representing various options. * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`. * * @csspart base - The component's base wrapper. * @csspart header - The dialog's header. This element wraps the title and header actions. * @csspart header-actions - Optional actions to add to the header. Works best with `` elements. * @csspart title - The dialog's title. * @csspart close-button - The dialog's close button. * @csspart close-button__base - The close buttons exported `base` part. * @csspart body - The dialog's body. * @csspart footer - The dialog's footer. * * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. * @cssproperty --header-spacing - The amount of padding to use for the header. * @cssproperty --body-spacing - The amount of padding to use for the body. * @cssproperty --footer-spacing - The amount of padding to use for the footer. */ export default class ZnDialog extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-button': typeof ZnButton; }; private readonly hasSlotController; private closeWatcher; dialog: HTMLDialogElement; closer: HTMLButtonElement; /** The dialog's theme variant. */ variant: 'default' | 'warning' | 'announcement'; /** The dialog's size. */ size: 'small' | 'medium' | 'large' | 'custom'; /** * Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can * use the `show()` and `hide()` methods and this attribute will reflect the dialog's state. */ open: boolean; /** * The dialog's label as displayed in the header. You should always include a relevant label even when using * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */ label: string; cosmic: boolean; /** * Disables the header. This will also remove the default close button, so please ensure you provide an easy, * accessible way to close the dialog. */ noHeader: boolean; /** * The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you * will need to manually open the dialog using the `show()` method. */ trigger: string; protected firstUpdated(_changedProperties: PropertyValues): void; connectedCallback(): void; disconnectedCallback(): void; private requestClose; private addOpenListeners; private removeOpenListeners; /** Shows the dialog. */ show(): void; /** Hides the dialog. */ hide(): void; private closeClickHandler; render(): import("lit-html").TemplateResult<1>; } } declare module "components/dialog/index" { import ZnDialog from "components/dialog/dialog.component"; export * from "components/dialog/dialog.component"; export default ZnDialog; global { interface HTMLElementTagNameMap { 'zn-dialog': ZnDialog; } } } declare module "components/confirm/confirm.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnDialog from "components/dialog/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/confirm-modal * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnConfirm extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-dialog': typeof ZnDialog; }; private readonly hasSlotController; /** The dialog's theme variant. */ variant: 'default' | 'warning' | 'announcement'; /** The dialog's size. */ size: 'small' | 'medium' | 'large'; /** The dialogs type, which will determine the icon and color. */ type: 'warning' | 'error' | 'success' | 'info'; /** * Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can * use the `show()` and `hide()` methods and this attribute will reflect the dialog's state. */ open: boolean; caption: string; action: string; content: string; confirmText: string; cancelText: string; hideIcon: boolean; /** * Show a loading state when the dialog is submitted. */ showLoading: boolean; /** * The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you * will need to manually open the dialog using the `show()` method. */ trigger: string; /** The Dialogs announcement text. */ announcement: string; /** The Dialogs footer text. */ footerText: string; dialog: ZnDialog; /** Internal loading state used when showLoading is enabled */ private loading; protected firstUpdated(_changedProperties: PropertyValues): void; connectedCallback(): void; updateTriggers(): void; show: (event?: Event | undefined) => void; hide(): void; render(): import("lit-html").TemplateResult<1>; submitDialog(): void; } } declare module "components/confirm/index" { import ZnConfirm from "components/confirm/confirm.component"; export * from "components/confirm/confirm.component"; export default ZnConfirm; global { interface HTMLElementTagNameMap { 'zn-confirm-modal': ZnConfirm; } } } declare module "components/tooltip/tooltip.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement from "internal/zinc-element"; import type Popup from "components/popup/index"; /** * @summary The Tooltip component is used to display additional information when a user hovers over or clicks * on an element. * * @documentation https://zinc.style/components/tooltip * @status experimental * @since 1.0 * * @event zn-show - Emitted when the tooltip is shown. * @event zn-after-show - Emitted after the tooltip is shown. * @event zn-hide - Emitted when the tooltip is hidden. * @event zn-after-hide - Emitted after the tooltip is hidden. * * @slot - The content of the tooltip * @slot anchor - The anchor the tooltip is attached to. */ export default class ZnTooltip extends ZincElement { static styles: CSSResultGroup; private hoverTimeout; private closeWatcher; defaultSlot: HTMLSlotElement; body: HTMLElement; popup: Popup; content: string; placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; disabled: boolean; distance: number; open: boolean; skidding: number; trigger: string; hoist: boolean; constructor(); disconnectedCallback(): void; protected firstUpdated(_changedProperties: PropertyValues): void; private hasTrigger; private handleBlur; private handleClick; private handleFocus; private handleDocumentKeyDown; private handleMouseOver; private handleMouseOut; handleOpenChange(): void; handleOptionsChange(): Promise; handleDisabledChange(): void; show(): Promise; hide(): void; render(): import("lit-html").TemplateResult<1>; } } declare module "components/tooltip/index" { import ZnTooltip from "components/tooltip/tooltip.component"; export * from "components/tooltip/tooltip.component"; export default ZnTooltip; global { interface HTMLElementTagNameMap { 'zn-tooltip': ZnTooltip; } } } declare module "components/menu/menu.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnConfirm from "components/confirm/index"; import ZnDropdown from "components/dropdown/index"; import ZnIcon from "components/icon/index"; import ZnMenuItem from "components/menu-item/index"; import ZnTooltip from "components/tooltip/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/menu * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally. * Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this. */ export default class ZnMenu extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-confirm': typeof ZnConfirm; 'zn-dropdown': typeof ZnDropdown; 'zn-icon': typeof ZnIcon; 'zn-menu-item': typeof ZnMenuItem; 'zn-tooltip': typeof ZnTooltip; }; defaultSlot: HTMLSlotElement; actions: never[]; /** The menu's visual style. `shell` renders the app-shell header dropdown * look: a padded panel with floating rounded items. Propagated to the * menu's items. */ variant: 'default' | 'shell'; connectedCallback(): void; /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */ getAllItems(): ZnMenuItem[]; /** * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index. * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item. */ getCurrentItem(): ZnMenuItem | undefined; /** * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item. */ setCurrentItem(item: ZnMenuItem): void; render(): import("lit-html").TemplateResult<1>; private handleClick; private handleKeyDown; private handleMouseDown; private handleSlotChange; protected updated(changedProperties: Map): void; /** * @internal The variant applied to slotted items. A `default` menu still gives * its items the `dropdown` look (muted hover, no separators) — distinct from a * bare standalone menu item, which keeps the navigation styling. */ get itemVariant(): 'dropdown' | 'shell'; /** Keeps slotted menu items in sync with the menu's variant. */ private propagateVariant; private isMenuItem; } } declare module "components/menu/index" { import ZnMenu from "components/menu/menu.component"; export * from "components/menu/menu.component"; export default ZnMenu; global { interface HTMLElementTagNameMap { 'zn-menu': ZnMenu; } } } declare module "components/dropdown/dropdown.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement from "internal/zinc-element"; import type { ZnSelectEvent } from "events/zn-select"; import type ZnPopup from "components/popup/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/dropdown * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnDropdown extends ZincElement { static styles: CSSResultGroup; popup: ZnPopup; trigger: HTMLSlotElement; panel: HTMLSlotElement; private closeWatcher; /** Indicates whether the dropdown is open */ open: boolean; /** The placement of the dropdown. Note the actual placement may vary based on the available space */ placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; /** Disable the dropdown */ disabled: boolean; /** By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open */ stayOpenOnSelect: boolean; /** The dropdown will close when the user interacts outside the element**/ containingElement?: HTMLElement; /** The distance in pixels from which to offset the panel away from the trigger */ distance: number; /** The distance in pixels from which to offset the panel away from the trigger */ skidding: number; /** Enable this option if the parent is overflow hidden and the dropdown is not visible */ hoist: boolean; /** Syncs the popup width or height with the trigger element */ sync: 'width' | 'height' | 'both' | undefined; uri: string; fetchedContent: string; connectedCallback(): void; focusOnTrigger(): void; protected firstUpdated(_changedProperties: PropertyValues): void; disconnectedCallback(): void; private getMenu; private addOpenListeners; private removeOpenListeners; /** Events */ handlePanelSelect: (event: ZnSelectEvent) => void; private preloadContent; private handlePreload; handleTriggerClick(): Promise; handleKeyDown(event: KeyboardEvent): void; private handleTriggerKeyDown; private handleTriggerKeyUp; private handleTriggerSlotChange; private handleDocumentMouseDown; handleDocumentKeyDown(event: KeyboardEvent): void; /** Opens the dropdown */ show(): Promise; /** Closes the dropdown */ hide(): Promise; /** Instructs the dropdown to reposition itself */ reposition(): void; /** Aria related method */ private updateAccessibleTrigger; handleOpenChange(): void; render(): import("lit-html").TemplateResult<1>; } } declare module "components/dropdown/index" { import ZnDropdown from "components/dropdown/dropdown.component"; export * from "components/dropdown/dropdown.component"; export default ZnDropdown; global { interface HTMLElementTagNameMap { 'zn-dropdown': ZnDropdown; } } } declare module "components/button/button.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnIcon from "components/icon/index"; import ZnTooltip from "components/tooltip/index"; import type { IconColor, IconLibrary } from "components/icon/index"; import type { ZincFormControl } from "internal/zinc-element"; /** * @summary Buttons represent actions that are available to the user. * @documentation https://inc.style/components/button * @status stable * @since 2.0 * * @dependency zn-icon * @dependency zn-tooltip * * @event zn-blur - Emitted when the button loses focus. * @event zn-focus - Emitted when the button gains focus. * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. * * @slot - The button's label. * @slot prefix - A presentational prefix icon or similar element. * @slot suffix - A presentational suffix icon or similar element. * @slot cancel - Slot for custom cancel button/content when autoClick is active. * * @csspart base - The component's base wrapper. * @csspart prefix - The container that wraps the prefix. * @csspart label - The button's label. * @csspart suffix - The container that wraps the suffix. * @csspart caret - The button's caret icon, an `` element. * @csspart spinner - The spinner that shows when the button is in the loading state. */ export default class ZnButton extends ZincElement implements ZincFormControl { static styles: CSSResultGroup; static dependencies: { 'zn-tooltip': typeof ZnTooltip; 'zn-icon': typeof ZnIcon; }; private readonly formControlController; private readonly hasSlotController; private _autoClickTimeout; private _loadingState; button: HTMLButtonElement; countdownContainer: HTMLElement[]; color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent' | 'star' | (string & Record); hoverColor: string; text: boolean; outline: boolean; disabled: boolean; grow: boolean; square: boolean; /** Renders the button as an icon button (40x36). Pass `small` for the * 36x36 variant or `round` for a 36x36 circle: `icon-button`, * `icon-button="small"` or `icon-button="round"`. */ iconButton: boolean | 'small' | 'round'; /** With `icon-button`, removes the white background and border while * keeping the button's size. */ plain: boolean; /** Disables the hover background, for contexts where the tint doesn't fit. */ noHover: boolean; panelBackground: boolean; dropdownCloser: boolean; notification: number; mutedNotifications: boolean; verticalAlign: 'start' | 'center' | 'end'; content: string; icon: string; gaid: string; iconPosition: 'left' | 'right'; iconSize: string; iconColor: IconColor; iconFill: IconColor; iconLibrary: IconLibrary; type: 'button' | 'submit' | 'reset'; name: string; value: string; form: string; formAction: string; formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'; formMethod: 'post' | 'get'; formNoValidate: boolean; formTarget: '_self' | '_blank' | '_parent' | '_top' | string; href: string; target: '_self' | '_blank' | '_parent' | '_top' | string; dataTarget: 'modal' | 'slide' | string; rel: string; tooltip: string; /** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */ label: string; autoClick: boolean; autoClickDelay: number; loadingText: string; loadingTextPosition: 'left' | 'right' | 'center' | string; loading: boolean; get validity(): ValidityState; get validationMessage(): string; firstUpdated(): void; disconnectedCallback(): void; handleAutoClickChange(_old: boolean, value: boolean): Promise; protected updated(changedProps: Map): void; checkValidity(): boolean; getForm(): HTMLFormElement | null; reportValidity(): boolean; setCustomValidity(message: string): void; click(): void; handleClick: () => void; private _isLink; private _isButton; private getIconButtonColor; setupAutoClick(): void; updateCountdownText(): void; teardownAutoClick(): void; protected render(): unknown; private _getLoadingContainer; } } declare module "components/button/index" { import ZnButton from "components/button/button.component"; export * from "components/button/button.component"; export default ZnButton; global { interface HTMLElementTagNameMap { 'zn-button': ZnButton; } } } declare module "components/absolute-container/absolute-container.component" { import ZincElement from "internal/zinc-element"; import type { PropertyValues } from 'lit'; /** * @summary The absolute container will take the total inner height of the content (positioned absolute), and set that * as it's min height, Creating enough space to show the content. * * @documentation https://zinc.style/components/absolute-container * @status experimental * @since 1.0 * * @slot - The default slot * */ export default class ZnAbsoluteContainer extends ZincElement { private _resizeFrame; constructor(); protected firstUpdated(_changedProperties: PropertyValues): void; disconnectedCallback(): void; resize(): void; createRenderRoot(): this; } } declare module "components/absolute-container/index" { import ZnAbsoluteContainer from "components/absolute-container/absolute-container.component"; export * from "components/absolute-container/absolute-container.component"; export default ZnAbsoluteContainer; global { interface HTMLElementTagNameMap { 'zn-absolute-container': ZnAbsoluteContainer; } } } declare module "events/zn-input" { export type ZnInputEvent = CustomEvent>; global { interface GlobalEventHandlersEventMap { 'zn-input': ZnInputEvent; } } } declare module "internal/default-value" { import type { ReactiveElement } from 'lit'; export const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void; } declare module "components/toggle/toggle.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement, { type ZincFormControl } from "internal/zinc-element"; /** * @summary Toggles allow the user to switch an option on or off. * @documentation https://zinc.style/components/toggle * @status stable * @since 1.0 * * @dependency zn-tooltip * * @event zn-input - Emitted when the toggle receives input. * * @slot - The toggle's label. * @slot description - A description of the toggle's label. Alternatively, you can use the `description` attribute. * @slot help-text - Text that describes how to use the toggle. Alternatively, you can use the `help-text` attribute. * * @csspart base - The component's base wrapper containing the toggle switch. * @csspart control - The toggle switch control (the circular button that slides). * @csspart label - The toggle's label. * @csspart description - The container that wraps the toggle's description. * * @cssproperty --zn-toggle-margin - The margin around the toggle switch. Defaults to `8px 0`. */ export default class ZnToggle extends ZincElement implements ZincFormControl { static styles: CSSResultGroup; private readonly hasSlotController; private readonly formControlController; input: HTMLInputElement; hasFocus: boolean; title: string; name: string; value: string; /** The value submitted when the toggle is unchecked, so the toggle always submits a value. */ fallbackValue: string; size: 'small' | 'medium' | 'large'; disabled: boolean; checked: boolean; defaultChecked: boolean; form: string; required: boolean; helpText: string; triggerSubmit: boolean; onText: string; offText: string; label: string; /** The toggle's description, displayed under the label. If you need to display HTML, use the `description` slot instead. */ description: string; labelPosition: 'top' | 'left' | 'right'; inline: boolean; get validity(): ValidityState; get validationMessage(): string; firstUpdated(_changedProperties: PropertyValues): void; private handleBlur; private handleInvalid; private handleInput; private handleClick; private handleFocus; private handleKeyDown; click(): void; focus(options?: FocusOptions): void; blur(): void; checkValidity(): boolean; getForm(): HTMLFormElement | null; reportValidity(): boolean; setCustomValidity(message: string): void; render(): import("lit-html").TemplateResult<1>; } } declare module "components/toggle/index" { import ZnToggle from "components/toggle/toggle.component"; export * from "components/toggle/toggle.component"; export default ZnToggle; global { interface HTMLElementTagNameMap { 'zn-toggle': ZnToggle; } } } declare module "components/collapsible/collapsible.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import { Store } from "internal/storage"; import ZincElement from "internal/zinc-element"; import type { ZnInputEvent } from "events/zn-input"; /** * @summary Toggles between showing and hiding content when clicked * @documentation https://zinc.style/components/collapsible * @status experimental * @since 1.0 * * @dependency zn-icon - The icon element * * @slot header - Clicking will toggle the show state of the data * * @csspart header - The header row (toggle). * @csspart caption - The caption text. * @csspart content - The expandable content wrapper. */ export default class ZnCollapsible extends ZincElement { static styles: CSSResultGroup; caption: string; description: string; label: string; showNumber: boolean; countElement: string; expanded: boolean; defaultState: 'open' | 'closed'; localStorage: boolean; storeKey: string; storeTtl: number; flush: boolean; numberOfItems: number; private animating; private animatingTimer?; protected _store: Store; private readonly hasSlotController; private readonly observer; private showArrow; connectedCallback(): Promise; disconnectedCallback(): void; handleCaptionToggle: (e: ZnInputEvent) => void; protected updated(changedProperties: PropertyValues): void; private startAnimating; private stopAnimating; private handleTransitionEnd; handleCollapse: (e: MouseEvent) => void; recalculateNumberOfItems: () => void; render(): import("lit-html").TemplateResult<1>; } } declare module "components/collapsible/index" { import ZnCollapsible from "components/collapsible/collapsible.component"; export * from "components/collapsible/collapsible.component"; export default ZnCollapsible; global { interface HTMLElementTagNameMap { 'zn-accordion': ZnCollapsible; } } } declare module "components/alert/alert.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/alert * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnAlert extends ZincElement { static styles: CSSResultGroup; icon: string; caption: string; collapse: boolean; appearance: 'transparent' | 'solid'; level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'; center: boolean; size: 'small' | 'medium' | 'large'; render(): import("lit-html").TemplateResult<1>; hideAlert(): void; } } declare module "components/alert/index" { import ZnAlert from "components/alert/alert.component"; export * from "components/alert/alert.component"; export default ZnAlert; global { interface HTMLElementTagNameMap { 'zn-alert': ZnAlert; } } } declare module "components/button-group/button-group.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/button-group * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * * @csspart base - The component's base wrapper. * * @cssproperty --grow - Use flex-grow to fill available space. * @cssproperty --start - Justify content at the start of the flex space. */ export default class ZnButtonGroup extends ZincElement { static styles: CSSResultGroup; direction: 'horizontal' | 'vertical'; grow: boolean; wrap: boolean; start: boolean; gap: boolean; defaultSlot: HTMLSlotElement; private handleSlotChange; render(): import("lit-html").TemplateResult<1>; } } declare module "components/button-group/index" { import ZnButtonGroup from "components/button-group/button-group.component"; export * from "components/button-group/button-group.component"; export default ZnButtonGroup; global { interface HTMLElementTagNameMap { 'zn-button-group': ZnButtonGroup; } } } declare module "components/chat-message/clean-message" { /** Strip scripts and event/handler attributes from an untrusted HTML string. */ export function cleanHTML(message: string): string; } declare module "components/chat-message/chat-message.component" { import { type CSSResultGroup, nothing } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnIcon from "components/icon/index"; export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added' | 'multi.answer' | 'transfer' | 'ended' | 'error' | 'message-sending' | 'customer.ended' | 'customer.connected' | 'customer.disconnected' | 'internal'; /** * @summary A single message in a chat-style conversation: avatar, sender, * time, optional badge, and a message bubble with optional actions. Also renders * system events (connections, transfers, etc.) as a centred card. * @documentation https://zinc.style/components/chat-message * @status experimental * @since 1.0 * * @dependency zn-icon * * @slot - The message content. Ignored when the `message` attribute is set. * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip). * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, * which auto-assigns itself to this slot. * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button). * @slot edit-dialog - Pass-through for an associated dialog element. * * @csspart base - The component's base wrapper. * @csspart avatar - The avatar column. * @csspart body - The header and bubble column. * @csspart header - The sender/time/badge row. * @csspart bubble - The message bubble. * @csspart content - The message content within the bubble. * @csspart attachments - The attachments row beneath the message content. * @csspart system-card - The card rendered for system action types. * * @cssproperty --message-background - The bubble's background color. */ export default class ZnChatMessage extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-icon': typeof ZnIcon; }; static readonly SYSTEM_ACTION_TYPES: readonly string[]; private static readonly DISPLAYED_ACTION_TYPES; /** The sender's name, also used for the avatar. */ sender: string; /** * The message body as an HTML string. When set, it is sanitized (scripts and event * handlers stripped), newlines become line breaks and bare URLs become links. When * omitted the default slot is rendered instead. */ message: string; /** Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today). */ time: string; /** Overrides the avatar source. Defaults to `sender`. */ avatar: string; /** The kind of message. Drives system-card rendering, the sending state and badges. */ actionType: ChatMessageActionType; /** Marks the message as initiated by the customer (affects styling and grouping). */ customerInitiated: boolean; /** Marks the message as initiated by an agent (affects styling and grouping). */ agentInitiated: boolean; /** Hides the sender's name in the message header. */ hideSender: boolean; /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */ private hasAttachments; connectedCallback(): void; protected render(): import("lit-html").TemplateResult<1> | typeof nothing; protected firstUpdated(): void; private handleAttachmentsSlotChange; private syncHasAttachments; private isSystemMessage; private renderSystemCard; private systemLabel; private renderHeader; private renderContent; /** HH:MM only — used on the system card. */ private getTime; /** HH:MM, prefixed with the date when the message is not from today. */ private getSentTime; } } declare module "components/chat-message/index" { import ZnChatMessage from "components/chat-message/chat-message.component"; export * from "components/chat-message/chat-message.component"; export default ZnChatMessage; global { interface HTMLElementTagNameMap { 'zn-chat-message': ZnChatMessage; } } } declare module "components/chat-message-attachment/chat-message-attachment.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; import ZnIcon from "components/icon/index"; /** * @summary A single file or link attachment for a `zn-chat-message` or `zn-content-block`. * Renders an icon and a label as a link, styled to match the message's attachments row. It is * intended to be used only inside a `zn-chat-message` or `zn-content-block` and is automatically * placed in that component's `attachments` slot. * @documentation https://zinc.style/components/chat-message-attachment * @status experimental * @since 1.0 * * @dependency zn-icon * * @slot - The attachment label. Falls back to the `name` attribute when empty. * * @csspart base - The attachment link. * @csspart icon - The leading icon. * @csspart label - The attachment label. */ export default class ZnChatMessageAttachment extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-icon': typeof ZnIcon; }; /** The URL the attachment links to. */ href: string; /** The attachment label (e.g. the file name). Used when the default slot is empty. */ name: string; /** The leading icon name. */ icon: string; /** * Where to open the link. Defaults to a new tab. Reflected so the console's * pagelet link interception (`[href]:not([target])`) skips the host and the * browser handles the click natively (download / new tab) instead of * loading the file URL as a pagelet. */ target: string; /** Prompt a download rather than navigating to the link. */ download: boolean; connectedCallback(): void; protected render(): import("lit-html").TemplateResult<1>; } } declare module "components/chat-message-attachment/index" { import ZnChatMessageAttachment from "components/chat-message-attachment/chat-message-attachment.component"; export * from "components/chat-message-attachment/chat-message-attachment.component"; export default ZnChatMessageAttachment; global { interface HTMLElementTagNameMap { 'zn-chat-message-attachment': ZnChatMessageAttachment; } } } declare module "components/chip/chip.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/chip * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnChip extends ZincElement { static styles: CSSResultGroup; icon: string; caption: string; iconSize: number; type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'transparent' | 'custom' | 'neutral'; flush: boolean; flushX: boolean; flushY: boolean; private readonly hasSlotController; render(): import("lit-html").TemplateResult<1>; } } declare module "components/chip/index" { import ZnChip from "components/chip/chip.component"; export * from "components/chip/chip.component"; export default ZnChip; global { interface HTMLElementTagNameMap { 'zn-chip': ZnChip; } } } declare module "components/well/well.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/well * @status experimental * @since 1.0 * * @slot - The default slot. * @slot action - Content displayed on the right hand side of the well. */ export default class ZnWell extends ZincElement { static styles: CSSResultGroup; icon: string; inline: boolean; /** Renders the default slot inside a `pre` element, preserving whitespace using a monospace font. */ pre: boolean; /** Breaks long unbroken words, so they wrap instead of forcing the well wider. */ breakLong: boolean; private readonly hasSlotController; render(): import("lit-html").TemplateResult<1>; } } declare module "components/well/index" { import ZnWell from "components/well/well.component"; export * from "components/well/well.component"; export default ZnWell; global { interface HTMLElementTagNameMap { 'zn-well': ZnWell; } } } declare module "components/copy-button/copy-button.component" { import { type CSSResultGroup } from 'lit'; import ZincElement from "internal/zinc-element"; import type ZnTooltip from "components/tooltip/index"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/copy-button * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnCopyButton extends ZincElement { static styles: CSSResultGroup; copyIcon: HTMLSlotElement; successIcon: HTMLSlotElement; errorIcon: HTMLSlotElement; tooltip: ZnTooltip; isCopying: boolean; status: 'rest' | 'success' | 'error'; value: string; copyLabel: string; src: string; size: number; /** * An id that references an element in the same document from which data will be copied. If both this and `value` are * present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an * attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property, * append a dot and the property name, e.g. `from="el.value"`. */ from: string; render(): import("lit-html").TemplateResult<1>; private showStatus; private handleCopy; } } declare module "components/copy-button/index" { import ZnCopyButton from "components/copy-button/copy-button.component"; export * from "components/copy-button/copy-button.component"; export default ZnCopyButton; global { interface HTMLElementTagNameMap { 'zn-copy-button': ZnCopyButton; } } } declare module "events/zn-filter-change" { export type ZnFilterChangeEvent = CustomEvent>; global { interface GlobalEventHandlersEventMap { 'zn-filter-change': ZnFilterChangeEvent; } } } declare module "events/zn-search-change" { export type ZnSearchChangeEvent = CustomEvent<{ value: string; formData: Record; searchUri?: string; }>; global { interface GlobalEventHandlersEventMap { 'zn-search-change': ZnSearchChangeEvent; } } } declare module "components/data-table-filter/data-table-filter.component" { import { type CSSResultGroup, type PropertyValues } from 'lit'; import ZincElement, { type ZincFormControl } from "internal/zinc-element"; /** * @summary Short summary of the component's intended use. * @documentation https://zinc.style/components/data-table-filter * @status experimental * @since 1.0 * * @dependency zn-example * * @event zn-event-name - Emitted as an example. * * @slot - The default slot. * @slot example - An example slot. * * @csspart base - The component's base wrapper. * * @cssproperty --example - An example CSS custom property. */ export default class ZnDataTableFilter extends ZincElement implements ZincFormControl { static styles: CSSResultGroup; private _formController; filters: string; name: string; value: string; get validationMessage(): string; get validity(): ValidityState; checkValidity(): boolean; getForm(): HTMLFormElement | null; reportValidity(): boolean; setCustomValidity(): void; protected firstUpdated(_changedProperties: PropertyValues): void; handleQBClear: () => void; handleQBReset: () => void; handleQBUpdate: () => void; closeSlideout(): void; render(): import("lit-html").TemplateResult<1>; } } declare module "components/data-table-filter/index" { import ZnDataTableFilter from "components/data-table-filter/data-table-filter.component"; export * from "components/data-table-filter/data-table-filter.component"; export default ZnDataTableFilter; global { interface HTMLElementTagNameMap { 'zn-data-table-filter': ZnDataTableFilter; } } } declare module "components/slash-menu/slash-menu-items" { export interface SlashMenuItem { /** The text shown in the menu. */ label: string; /** The text inserted into the field. Omit for items handled entirely by the `zn-slash-select` event. */ value?: string; /** Icon shown against the item, e.g. `tag@lu`. */ icon?: string; /** Supporting text shown under the label. */ description?: string; /** Extra terms the item can be found by. */ keywords?: string | string[]; /** Heading the item is listed under. Items without a group are listed first, in source order. */ group?: string; /** Overrides the position of the item within its match band. Lower sorts first. */ order?: number; /** Identifier passed through on `zn-slash-select`, for items that do something other than insert text. */ action?: string; /** Where the caret lands after insertion, as an offset into `value`. Defaults to the end. */ caretOffset?: number; /** Listed, but not selectable. */ disabled?: boolean; } /** * Registers a named, reusable set of insertions, so a list defined once (e.g. the merge fields * allowed in legal copy) can be referenced from markup with `slash-preset=""`. */ export function registerSlashMenuPreset(name: string, items: SlashMenuItem[]): void; /** Removes a preset registered with `registerSlashMenuPreset`. */ export function unregisterSlashMenuPreset(name: string): void; /** The names of every registered preset. */ export function slashMenuPresetNames(): string[]; /** Resolves one or more preset names (comma separated, or an array) to their items. */ export function getSlashMenuPreset(names: string | string[]): SlashMenuItem[]; /** * Parses the `slash-items` attribute. Accepts a JSON array of items, or the shorthand * `Label={{TOKEN}}, Other={{OTHER}}` (the label may be omitted to use the token as its own label). */ export function parseSlashItems(value: string | null | undefined): SlashMenuItem[]; /** Filters and ranks items against a query. An empty query keeps every item in its declared order. */ export function filterSlashItems(items: SlashMenuItem[], query: string): SlashMenuItem[]; /** The identity an item is remembered by in a menu's recently used list. */ export function slashItemKey(item: SlashMenuItem): string; /** The keys of the items most recently chosen from the menu stored under `key`, newest first. */ export function readRecentSlashItems(key: string): string[]; /** Moves an item to the front of the recently used list stored under `key`, and returns the list. */ export function recordRecentSlashItem(key: string, item: SlashMenuItem): string[]; /** Forgets the recently used items stored under `key`. */ export function clearRecentSlashItems(key: string): void; } declare module "components/slash-menu/slash-menu.component" { import ZincElement from "internal/zinc-element"; import ZnIcon from "components/icon/index"; import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; import type { Placement, VirtualElement } from '@floating-ui/dom'; import type { SlashMenuItem } from "components/slash-menu/slash-menu-items"; export const SLASH_ITEM_SELECT = "zn-slash-item-select"; /** * @summary A keyboard-driven list of insertions, anchored to the caret of the field that opened it. * @documentation https://zinc.style/components/slash-menu * @status experimental * @since 1.1 * * @dependency zn-icon * * @event zn-slash-item-select - Emitted when an item is chosen. Does not cross shadow boundaries; the * component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`. * * @csspart panel - The floating panel that holds the list. * @csspart list - The scrolling list of items. * @csspart item - An item in the list. * @csspart icon - The chip holding an item's icon. * @csspart group-heading - A group heading between items. * @csspart divider - The rule closing the recently used section, when the items below it have no heading of their own. * @csspart footer - The truncation footer, shown when not every match fits. * @csspart hints - The pinned footer of keyboard hints. * @csspart hint - A single keyboard hint within the footer. * @csspart hint-key - The key shown against a hint. * * @cssproperty --slash-menu-width - The width of the panel. * @cssproperty --slash-menu-border-radius - The corner radius of the panel. * @cssproperty --slash-menu-item-border-radius - The corner radius of the items and their icon chips. * @cssproperty --slash-menu-max-height - The maximum height of the panel before it scrolls. */ export default class ZnSlashMenu extends ZincElement { static styles: CSSResultGroup; static dependencies: { 'zn-icon': typeof ZnIcon; }; private panel; private list; private stopAutoUpdate?; /** Whether the menu is showing. */ open: boolean; /** The items to list. Already filtered — the menu displays what it is given. */ items: SlashMenuItem[]; /** The query the items were matched against, shown in the heading. */ query: string; /** The name the list is announced by when there is no query. */ heading: string; /** Shown in place of the list when there are no items. */ emptyText: string; /** The most items to render at once. Remaining matches are reported in the footer. */ maxItems: number; /** Hides the insertion key (the item's value) normally shown against each item. */ hideKeys: boolean; /** Hides the pinned footer of keyboard hints. */ hideHints: boolean; /** * Remembers the items chosen here and lists the most recent of them first, under their own heading. * The key scopes the list to where the menu is used, so each place keeps its own history in * `localStorage`. Leave unset to offer no recently used section. */ recentKey: string; /** The most recently used items to list. */ maxRecent: number; /** The heading shown above the recently used items. */ recentHeading: string; /** The element or caret rect the panel is positioned against. */ anchor: Element | VirtualElement | null; /** The preferred placement of the panel. */ placement: Placement; /** The gap between the caret and the panel. */ distance: number; private activeIndex; private recentKeys; /** How many recently used items the last update listed, to spot the list appearing or reordering. */ private recentCount; private get listItems(); /** * The remembered items that are in the current list, newest first. Only offered without a query — * once the user is searching, the ranked matches are the better answer. */ private get recentItems(); private get visibleItems(); /** The item that Enter would insert. */ get activeItem(): SlashMenuItem | undefined; show(): void; hide(): void; /** Forgets the items remembered under `recent-key`. */ clearRecent(): void; /** Sets the active item by index, wrapping at both ends and skipping disabled items. */ setActiveIndex(index: number): void; /** Moves the active item by `delta` places. */ moveActive(delta: number): void; /** Chooses the active item, as pressing Enter would. */ selectActive(): void; /** Recalculates the panel's position against its anchor. */ reposition(): void; connectedCallback(): void; disconnectedCallback(): void; private showPanelPopover; private hidePanelPopover; private startPositioner; private stopPositioner; private position; private selectItem; private scrollActiveIntoView; private readonly handleItemMouseDown; protected willUpdate(changed: PropertyValues): void; protected updated(changed: PropertyValues): void; private renderItem; private renderItems; private renderHint; private renderHints; render(): TemplateResult<1>; } } declare module "utilities/caret-position" { export interface CaretCoordinates { top: number; left: number; height: number; } export type TextField = HTMLTextAreaElement | HTMLInputElement; /** * Measures where the caret sits inside a text field, relative to the field's own top/left corner. * There is no browser API for this, so the field is mirrored into an off-screen div and the offset * of a marker span at `index` is read back. */ export function getCaretCoordinates(field: TextField, index: number): CaretCoordinates; /** * Projects measured caret coordinates onto the viewport, clamped to the field's box so a caret * scrolled out of view doesn't drag anchored content off with it. Split from the measurement so a * cached measurement can be re-projected as the field scrolls or moves. */ export function caretRectFrom(field: TextField, { top, left, height }: CaretCoordinates): DOMRect; /** The caret's position as a viewport rect. */ export function getCaretRect(field: TextField, index: number): DOMRect; } declare module "components/slash-menu/slash-menu-controller" { import type { TextField } from "utilities/caret-position"; import type { ReactiveController, ReactiveControllerHost } from 'lit'; import type { SlashMenuItem } from "components/slash-menu/slash-menu-items"; import type ZnSlashMenu from "components/slash-menu/slash-menu.component"; export interface SlashMenuControllerOptions { /** * Resolves the menu to render results into. Called the first time the menu is needed, so the host * can render it lazily; may return a promise (e.g. after awaiting `updateComplete`). */ menu: () => ZnSlashMenu | null | Promise; /** The available items, unfiltered. Receives the current query so lists can be resolved remotely. */ items: (query: string) => SlashMenuItem[] | Promise; /** The characters that open the menu. Defaults to `/`. */ trigger?: () => string; /** Called before an item is inserted. Return `false` to handle the item yourself. */ onSelect?: (item: SlashMenuItem, query: string) => boolean; /** Called after an item's value has been written into the field. */ onInsert?: (item: SlashMenuItem, value: string) => void; } /** * Drives a slash menu for a plain `