hys-ui 0.2.0 → 0.3.0

package/dist/types/composables/datePicker.d.ts

@@ -1,3 +1,4 @@
+import type { HysPopupTransition } from '../motion/popup';
 import type { CSSProperties } from "vue";
 import type { Placement } from "./useFloating";
 export type HysDateScalar = string | Date | number;
@@ -82,6 +83,8 @@ export interface HysDatePickerLocale {
     limit: string;
 }
 export interface HysDatePickerProps<V extends HysDatePickerValue = HysDatePickerValue> {
+    popupTransition?: HysPopupTransition;
+    popupTransitionDuration?: number;
     modelValue?: V;
     defaultValue?: V;
     clearValue?: V;

package/dist/types/composables/drawer.d.ts

@@ -0,0 +1,102 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import type { HysModalProps, HysModalActionContext, HysModalCloseReason, HysModalInitialFocus, HysModalSectionSize } from "./modal";
+export type HysDrawerPlacement = "left" | "right" | "top" | "bottom";
+export type HysDrawerSizeName = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export type HysDrawerCloseReason = HysModalCloseReason;
+export type HysDrawerActionContext = HysModalActionContext;
+export type HysDrawerInitialFocus = HysModalInitialFocus;
+export type HysDrawerSectionSize = HysModalSectionSize;
+export type HysDrawerBeforeClose = Function & {
+    invoke(reason: HysDrawerCloseReason, context: HysDrawerActionContext): boolean | void | Promise<boolean | void>;
+}["invoke"];
+export interface HysDrawerResizeOptions {
+    minSize?: number | string;
+    maxSize?: number | string;
+    step?: number;
+}
+export interface HysDrawerResizeInfo {
+    placement: HysDrawerPlacement;
+    cancelled: boolean;
+    accepted: boolean;
+}
+export interface HysDrawerPushOptions {
+    distance?: number | string;
+}
+export interface HysDrawerProps extends Pick<HysModalProps, "open" | "modelValue" | "defaultOpen" | "title" | "description" | "opacity" | "maskOpacity" | "width" | "height" | "fullscreen" | "defaultFullscreen" | "showFullscreen" | "closeOnMask" | "closeOnEscape" | "showClose" | "destroyOnClose" | "forceRender" | "modal" | "modalPenetrable" | "appendTo" | "lockScroll" | "trapFocus" | "restoreFocus" | "initialFocus" | "openDelay" | "closeDelay" | "transitionDuration" | "zIndex" | "headerClass" | "headerSize" | "footerSize" | "headerHeight" | "footerHeight" | "titleFontSize" | "bodyClass" | "footerClass" | "overlayClass" | "headerStyle" | "bodyStyle" | "footerStyle" | "maskStyle" | "ariaLabel" | "ariaLabelledby" | "ariaDescribedby" | "role" | "headerAriaLevel" | "closeText" | "fullscreenText" | "restoreText" | "footer" | "footerAlign" | "showCancel" | "okText" | "cancelText" | "okVariant" | "okButtonProps" | "cancelButtonProps" | "confirmLoading" | "confirmDisabled" | "cancelDisabled" | "closeWhileConfirming" | "loading" | "loadingText" | "showError" | "errorText" | "confirmOnCtrlEnter" | "closeOnConfirm"> {
+    beforeClose?: HysDrawerBeforeClose;
+    beforeConfirm?: (context: HysDrawerActionContext) => boolean | void | Promise<boolean | void>;
+    placement?: HysDrawerPlacement;
+    size?: HysDrawerSizeName | number | (string & {});
+    drawerClass?: string;
+    drawerStyle?: CSSProperties;
+    overlayStyle?: CSSProperties;
+    bodyTabindex?: number;
+    contained?: boolean;
+    withHeader?: boolean;
+    autofocus?: boolean;
+    transition?: "slide" | "fade" | "slide-fade" | "none" | false;
+    push?: boolean | HysDrawerPushOptions;
+    resizable?: boolean | HysDrawerResizeOptions;
+    resizeValue?: number | null;
+    defaultResizeValue?: number | null;
+    resetSizeOnClose?: boolean;
+    resizeText?: string;
+}
+export interface HysDrawerSlotContext {
+    close: (reasonOrEvent?: HysDrawerCloseReason | Event, event?: Event) => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    closing: boolean;
+    confirming: boolean;
+    busy: boolean;
+    error: string;
+    titleId: string;
+    descriptionId: string;
+    fullscreen: boolean;
+    toggleFullscreen: () => Promise<boolean>;
+    resizing: boolean;
+    size: number;
+    resetSize: () => Promise<boolean>;
+    pushed: boolean;
+}
+export interface HysDrawerSlots {
+    default?: (scope: HysDrawerSlotContext) => VNodeChild;
+    header?: (scope: HysDrawerSlotContext) => VNodeChild;
+    title?: (scope: HysDrawerSlotContext) => VNodeChild;
+    extra?: (scope: HysDrawerSlotContext) => VNodeChild;
+    footer?: (scope: HysDrawerSlotContext) => VNodeChild;
+    loading?: (scope: HysDrawerSlotContext) => VNodeChild;
+    "close-icon"?: (scope: HysDrawerSlotContext) => VNodeChild;
+    "fullscreen-icon"?: (scope: HysDrawerSlotContext) => VNodeChild;
+}
+export interface HysDrawerInstance {
+    readonly element: HTMLElement | undefined;
+    readonly body: HTMLElement | undefined;
+    readonly open: boolean;
+    readonly closing: boolean;
+    readonly confirming: boolean;
+    readonly fullscreen: boolean;
+    readonly resizing: boolean;
+    readonly size: number;
+    readonly pushed: boolean;
+    focus: () => void;
+    show: () => Promise<boolean>;
+    close: (reasonOrEvent?: HysDrawerCloseReason | Event, event?: Event) => Promise<boolean>;
+    hide: () => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    setFullscreen: (value: boolean) => Promise<boolean>;
+    toggleFullscreen: () => Promise<boolean>;
+    resizeTo: (value: number | string) => Promise<boolean>;
+    resetSize: () => Promise<boolean>;
+}
+export declare const drawerSizes: {
+    readonly xs: 280;
+    readonly sm: 360;
+    readonly md: 520;
+    readonly lg: 736;
+    readonly xl: 960;
+    readonly full: "100%";
+};
+export declare const drawerVertical: (placement?: HysDrawerPlacement) => placement is "top" | "bottom";
+export declare function drawerSize(props: HysDrawerProps): string | number;

package/dist/types/composables/feedback.d.ts

@@ -0,0 +1,98 @@
+import type { CSSProperties, VNodeChild } from "vue";
+export type HysAlertTone = "info" | "primary" | "success" | "warning" | "danger";
+export type HysAlertEffect = "light" | "dark" | "outline";
+export type HysAlertTransition = "fade" | "slide" | "collapse" | "none";
+export interface HysAlertCloseContext {
+    reason: "button" | "api";
+    event?: Event;
+    signal: AbortSignal;
+}
+export interface HysAlertProps {
+    tone?: HysAlertTone;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    visible?: boolean;
+    modelValue?: boolean;
+    defaultVisible?: boolean;
+    effect?: HysAlertEffect;
+    banner?: boolean;
+    bordered?: boolean;
+    size?: "sm" | "md" | "lg";
+    closeText?: string;
+    closeLabel?: string;
+    disabled?: boolean;
+    beforeClose?: (context: HysAlertCloseContext) => boolean | void | Promise<boolean | void>;
+    transition?: HysAlertTransition;
+    transitionDuration?: number;
+    appear?: boolean;
+    ariaLabel?: string;
+    ariaLive?: "off" | "polite" | "assertive";
+    ariaAtomic?: boolean;
+}
+export interface HysAlertSlotContext {
+    tone: HysAlertTone;
+    visible: boolean;
+    closing: boolean;
+    disabled: boolean;
+    close: () => Promise<boolean>;
+}
+export interface HysAlertSlots {
+    default?: (context: HysAlertSlotContext) => VNodeChild;
+    title?: (context: HysAlertSlotContext) => VNodeChild;
+    description?: (context: HysAlertSlotContext) => VNodeChild;
+    icon?: (context: HysAlertSlotContext) => VNodeChild;
+    action?: (context: HysAlertSlotContext) => VNodeChild;
+    "close-icon"?: (context: HysAlertSlotContext) => VNodeChild;
+}
+export interface HysAlertInstance {
+    readonly element: HTMLElement | undefined;
+    readonly visible: boolean;
+    readonly closing: boolean;
+    close: () => Promise<boolean>;
+    show: () => Promise<boolean>;
+}
+export type HysEmptyIllustration = "inbox" | "simple" | "default";
+export interface HysEmptyProps {
+    title?: string | false;
+    description?: string | false;
+    image?: string | false;
+    imageSize?: number;
+    imageStyle?: CSSProperties;
+    imageFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    imageAlt?: string;
+    imageLoading?: "eager" | "lazy";
+    crossOrigin?: "" | "anonymous" | "use-credentials";
+    referrerPolicy?: ReferrerPolicy;
+    illustration?: HysEmptyIllustration;
+    size?: "sm" | "md" | "lg";
+    showImageLoading?: boolean;
+    ariaLabel?: string;
+    ariaLive?: "off" | "polite" | "assertive";
+}
+export interface HysEmptySlotContext {
+    title: string | false;
+    description: string | false;
+    imageLoading: boolean;
+    imageError: boolean;
+    retryImage: () => boolean;
+}
+export interface HysEmptySlots {
+    default?: (context: HysEmptySlotContext) => VNodeChild;
+    image?: (context: HysEmptySlotContext) => VNodeChild;
+    title?: (context: HysEmptySlotContext) => VNodeChild;
+    description?: (context: HysEmptySlotContext) => VNodeChild;
+    action?: (context: HysEmptySlotContext) => VNodeChild;
+    fallback?: (context: HysEmptySlotContext) => VNodeChild;
+}
+export interface HysEmptyInstance {
+    readonly element: HTMLElement | undefined;
+    readonly imageElement: HTMLImageElement | undefined;
+    readonly loadingImage: boolean;
+    readonly failedImage: boolean;
+    retryImage: () => boolean;
+}
+export declare function feedbackImage(value: string | false | undefined): string | undefined;
+export declare const feedbackNumber: (value: number | undefined, fallback: number, min: number, max: number) => number;

package/dist/types/composables/formContext.d.ts

@@ -123,6 +123,8 @@ export interface HysFieldContext {
     invalid?: ComputedRef<boolean>;
     status?: ComputedRef<HysFormStatus>;
     validate?: (trigger?: HysFormTrigger) => Promise<boolean>;
+    /** Temporarily defer model-watch validation during a continuous control gesture. */
+    deferChangeValidation?: () => () => void;
     disabled?: ComputedRef<boolean>;
     size?: ComputedRef<"sm" | "md" | "lg">;
 }

package/dist/types/composables/menu.d.ts

@@ -0,0 +1,183 @@
+import type { HysPopupMotionProps } from "../motion/popup";
+import { type Component, type CSSProperties, type VNodeChild } from "vue";
+import type { Placement } from "./useFloating";
+export type HysMenuKey = string | number;
+export type HysContextMenuTrigger = "contextmenu" | "click" | "hover" | "focus";
+export interface HysContextMenuItem {
+    label: string;
+    value?: HysMenuKey;
+    type?: "item" | "divider" | "group" | "checkbox" | "radio";
+    children?: readonly HysContextMenuItem[];
+    disabled?: boolean;
+    hidden?: boolean;
+    danger?: boolean;
+    icon?: Component;
+    description?: string;
+    shortcut?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    checked?: boolean;
+    radioGroup?: HysMenuKey;
+    closeOnSelect?: boolean;
+}
+export interface HysMenuFieldNames {
+    value: string;
+    label: string;
+    children: string;
+    disabled: string;
+    hidden: string;
+    type: string;
+    icon: string;
+    description: string;
+    shortcut: string;
+    href: string;
+    target: string;
+    rel: string;
+    danger: string;
+    checked: string;
+    radioGroup: string;
+    closeOnSelect: string;
+}
+export interface HysMenuSelectInfo<N extends object = HysContextMenuItem> {
+    item: N;
+    path: readonly N[];
+    keys: readonly HysMenuKey[];
+    event: MouseEvent | KeyboardEvent | undefined;
+    checked?: boolean;
+    checkedKeys: readonly HysMenuKey[];
+    selectedKeys: readonly HysMenuKey[];
+}
+export interface HysMenuShowOptions {
+    x?: number;
+    y?: number;
+    focus?: boolean;
+}
+export interface HysContextMenuProps<N extends object = HysContextMenuItem> extends HysPopupMotionProps {
+    items: readonly N[];
+    fieldNames?: Partial<HysMenuFieldNames>;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    trigger?: HysContextMenuTrigger | readonly HysContextMenuTrigger[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    openPath?: readonly HysMenuKey[];
+    defaultOpenPath?: readonly HysMenuKey[];
+    checkedKeys?: readonly HysMenuKey[];
+    defaultCheckedKeys?: readonly HysMenuKey[];
+    selectedKeys?: readonly HysMenuKey[];
+    defaultSelectedKeys?: readonly HysMenuKey[];
+    selectable?: boolean;
+    multiple?: boolean;
+    hideOnClick?: boolean;
+    autofocus?: boolean;
+    loopNavigation?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    submenuDelay?: number;
+    submenuTrigger?: "hover" | "click";
+    placement?: Placement;
+    appendTo?: string | HTMLElement | false;
+    width?: string | number;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    arrow?: boolean;
+    popupClass?: string;
+    popupStyle?: CSSProperties;
+    direction?: "ltr" | "rtl";
+    ariaLabel?: string;
+    emptyText?: string;
+    loadingText?: string;
+    backText?: string;
+}
+export interface HysContextMenuInstance<N extends object = HysContextMenuItem> {
+    readonly element: HTMLElement | undefined;
+    readonly open: boolean;
+    readonly checkedKeys: HysMenuKey[];
+    readonly selectedKeys: HysMenuKey[];
+    readonly openPath: HysMenuKey[];
+    focus: () => void;
+    blur: () => void;
+    show: (event?: MouseEvent | KeyboardEvent | HysMenuShowOptions) => Promise<boolean>;
+    showAt: (x: number, y: number, focus?: boolean) => Promise<boolean>;
+    hide: (restoreFocus?: boolean) => Promise<boolean>;
+    handleOpen: () => Promise<boolean>;
+    handleClose: () => Promise<boolean>;
+    toggle: () => Promise<boolean>;
+    focusItem: (key: HysMenuKey) => Promise<boolean>;
+    openSubmenu: (key: HysMenuKey) => Promise<boolean>;
+    closeSubmenus: () => Promise<boolean>;
+    setCheckedKeys: (keys: readonly HysMenuKey[]) => Promise<boolean>;
+    setSelectedKeys: (keys: readonly HysMenuKey[]) => Promise<boolean>;
+    getItems: () => N[];
+}
+export interface HysMenuItemContext<N extends object = HysContextMenuItem> {
+    item: N;
+    value: HysMenuKey | undefined;
+    label: string;
+    path: readonly N[];
+    keys: readonly HysMenuKey[];
+    level: number;
+    disabled: boolean;
+    checked: boolean;
+    selected: boolean;
+    expanded: boolean;
+    submenu: boolean;
+}
+export interface HysContextMenuSlots<N extends object = HysContextMenuItem> {
+    default?: (scope: {
+        open: boolean;
+        show: HysContextMenuInstance<N>["show"];
+        hide: HysContextMenuInstance<N>["hide"];
+        toggle: HysContextMenuInstance<N>["toggle"];
+        attrs: Record<string, unknown>;
+    }) => VNodeChild;
+    item?: (scope: HysMenuItemContext<N>) => VNodeChild;
+    icon?: (scope: HysMenuItemContext<N>) => VNodeChild;
+    link?: (scope: HysMenuItemContext<N> & {
+        attrs: Record<string, unknown>;
+    }) => VNodeChild;
+    header?: (scope: {
+        close: () => Promise<boolean>;
+    }) => VNodeChild;
+    footer?: (scope: {
+        close: () => Promise<boolean>;
+    }) => VNodeChild;
+    empty?: () => VNodeChild;
+    loading?: () => VNodeChild;
+}
+export interface MenuRow<N extends object> {
+    id: string;
+    raw: N;
+    key?: HysMenuKey;
+    label: string;
+    type: NonNullable<HysContextMenuItem["type"]>;
+    disabled: boolean;
+    danger: boolean;
+    icon?: Component;
+    description: string;
+    shortcut: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    radioGroup?: HysMenuKey;
+    checked: boolean;
+    closeOnSelect?: boolean;
+    children: MenuRow<N>[];
+    parents: MenuRow<N>[];
+    path: N[];
+    keys: HysMenuKey[];
+    level: number;
+}
+export declare const menuToken: (key: HysMenuKey) => string;
+export declare function menuKeys(keys: readonly HysMenuKey[] | undefined): HysMenuKey[];
+export declare const menuKeysEqual: (a: readonly HysMenuKey[], b: readonly HysMenuKey[]) => boolean;
+export declare function menuField(item: object, path: string): unknown;
+export declare const menuSafeRel: (target?: string, rel?: string) => string | undefined;
+export declare function menuRows<N extends object>(items: readonly N[], fields?: Partial<HysMenuFieldNames>): {
+    roots: MenuRow<N>[];
+    all: MenuRow<N>[];
+    byKey: Map<string, MenuRow<N>>;
+};

package/dist/types/composables/modal.d.ts

@@ -0,0 +1,183 @@
+import type { Component, CSSProperties, TransitionProps, VNodeChild } from "vue";
+import type { HysButtonProps, HysButtonVariant } from "../components/HysButton/HysButton.vue";
+export type HysModalCloseReason = "mask" | "escape" | "button" | "cancel" | "confirm" | "api";
+export type HysModalType = "default" | "confirm" | "info" | "success" | "warning" | "error";
+export type HysModalInitialFocus = "auto" | "dialog" | "confirm" | "cancel" | false | string | InstanceType<typeof HTMLElement>;
+export type HysModalSizeName = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export declare const modalWidths: {
+    readonly xs: 360;
+    readonly sm: 440;
+    readonly md: 560;
+    readonly lg: 720;
+    readonly xl: 960;
+    readonly "2xl": 1200;
+    readonly full: "100%";
+};
+export declare const modalWidth: (props: HysModalProps) => string | number;
+export type HysModalSectionSize = "sm" | "md" | "lg";
+export type HysModalDragEffect = "lift" | "outline" | "glow" | "shadow" | "ghost" | "none";
+export interface HysModalActionContext {
+    reason: HysModalCloseReason;
+    event?: Event;
+    signal: AbortSignal;
+}
+export interface HysModalPosition {
+    x: number;
+    y: number;
+}
+export interface HysModalSize {
+    width: number;
+    height: number;
+}
+export type HysModalBeforeClose = {
+    invoke(reason: HysModalCloseReason, context: HysModalActionContext): boolean | void | Promise<boolean | void>;
+}["invoke"];
+export interface HysModalProps {
+    open?: boolean;
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    description?: string;
+    type?: HysModalType;
+    showIcon?: boolean;
+    /** Background opacity from 0 to 1; does not fade text or controls. */
+    opacity?: number;
+    /** Mask opacity from 0 to 1; omitted keeps the default mask style. */
+    maskOpacity?: number;
+    icon?: Component;
+    width?: string | number;
+    height?: string | number;
+    maxHeight?: string | number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    size?: HysModalSizeName;
+    centered?: boolean;
+    top?: string | number;
+    center?: boolean;
+    fullscreen?: boolean;
+    defaultFullscreen?: boolean;
+    showFullscreen?: boolean;
+    closeOnMask?: boolean;
+    closeOnEscape?: boolean;
+    showClose?: boolean;
+    destroyOnClose?: boolean;
+    forceRender?: boolean;
+    modal?: boolean;
+    modalPenetrable?: boolean;
+    appendTo?: string | InstanceType<typeof HTMLElement> | false;
+    lockScroll?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+    initialFocus?: HysModalInitialFocus;
+    openDelay?: number;
+    closeDelay?: number;
+    transition?: string | TransitionProps | false;
+    transitionDuration?: number;
+    zIndex?: number;
+    headerClass?: string;
+    headerSize?: HysModalSectionSize;
+    footerSize?: HysModalSectionSize;
+    /** Minimum height. Content may expand the region to avoid clipping. */
+    headerHeight?: string | number;
+    footerHeight?: string | number;
+    titleFontSize?: string | number;
+    bodyClass?: string;
+    footerClass?: string;
+    overlayClass?: string;
+    modalClass?: string;
+    headerStyle?: CSSProperties;
+    bodyStyle?: CSSProperties;
+    footerStyle?: CSSProperties;
+    maskStyle?: CSSProperties;
+    modalStyle?: CSSProperties;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    role?: "dialog" | "alertdialog";
+    headerAriaLevel?: number;
+    closeText?: string;
+    fullscreenText?: string;
+    restoreText?: string;
+    footer?: boolean;
+    footerAlign?: "start" | "center" | "end";
+    showCancel?: boolean;
+    okText?: string;
+    cancelText?: string;
+    okVariant?: HysButtonVariant;
+    okButtonProps?: HysButtonProps;
+    cancelButtonProps?: HysButtonProps;
+    confirmLoading?: boolean;
+    confirmDisabled?: boolean;
+    cancelDisabled?: boolean;
+    closeWhileConfirming?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    showError?: boolean;
+    errorText?: string | ((error: unknown, action: "confirm" | "close") => string);
+    confirmOnCtrlEnter?: boolean;
+    closeOnConfirm?: boolean;
+    beforeClose?(reason: HysModalCloseReason, context: HysModalActionContext): boolean | void | Promise<boolean | void>;
+    beforeConfirm?: (context: HysModalActionContext) => boolean | void | Promise<boolean | void>;
+    draggable?: boolean;
+    dragHandlePosition?: "center" | "left" | "right" | "both";
+    dragMode?: "live" | "preview";
+    /** Pointer movement in pixels before a header press becomes a drag. */
+    dragThreshold?: number;
+    /** Lightweight gesture feedback, activated only at drag start/end. */
+    dragEffect?: HysModalDragEffect;
+    overflow?: boolean;
+    /** Keep the move handle reachable even when the panel may overflow. */
+    keepHandleVisible?: boolean;
+    resizable?: boolean;
+    resetPositionOnClose?: boolean;
+    resetSizeOnClose?: boolean;
+    /** Retained legacy setting; position in a modal is controlled by centered/top. */
+    placement?: "left" | "right" | "top" | "bottom";
+}
+export interface HysModalSlotContext {
+    close: (reason?: HysModalCloseReason | Event) => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    closing: boolean;
+    confirming: boolean;
+    busy: boolean;
+    error: string;
+    titleId: string;
+    descriptionId: string;
+    fullscreen: boolean;
+    toggleFullscreen: () => Promise<boolean>;
+}
+export interface HysModalSlots {
+    default?: (context: HysModalSlotContext) => VNodeChild;
+    header?: (context: HysModalSlotContext) => VNodeChild;
+    footer?: (context: HysModalSlotContext) => VNodeChild;
+    icon?: (context: HysModalSlotContext) => VNodeChild;
+    loading?: (context: HysModalSlotContext) => VNodeChild;
+    "close-icon"?: (context: HysModalSlotContext) => VNodeChild;
+    "fullscreen-icon"?: (context: HysModalSlotContext) => VNodeChild;
+}
+export interface HysModalInstance {
+    readonly element: HTMLElement | undefined;
+    readonly open: boolean;
+    readonly closing: boolean;
+    readonly confirming: boolean;
+    readonly fullscreen: boolean;
+    readonly position: HysModalPosition;
+    readonly dimensions: HysModalSize | undefined;
+    show: () => Promise<boolean>;
+    hide: () => Promise<boolean>;
+    close: (reason?: HysModalCloseReason) => Promise<boolean>;
+    handleOpen: () => Promise<boolean>;
+    handleClose: () => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    focus: () => void;
+    toggleFullscreen: () => Promise<boolean>;
+    setFullscreen: (value: boolean) => Promise<boolean>;
+    resetPosition: () => void;
+    resetSize: () => void;
+    setPosition: (position: HysModalPosition) => void;
+    setSize: (size: HysModalSize) => void;
+}
+export declare const modalLength: (value: string | number | undefined) => string | undefined;

package/dist/types/composables/overlayManager.d.ts

@@ -1,7 +1,11 @@
-export type OverlayKind = 'floating' | 'dialog';
-export declare const overlayCount: import("vue").Ref<number, number>;
-export declare function registerOverlay(kind: OverlayKind, dismiss: () => void): {
+/** Shared, deterministic overlay stack. Only the topmost layer responds to Escape. */
+import { type InjectionKey, type Ref } from "vue";
+export declare const overlayOwnerKey: InjectionKey<Readonly<Ref<boolean>>>;
+export type OverlayKind = "floating" | "dialog";
+export declare const overlayCount: Ref<number, number>;
+export declare function registerOverlay(kind: OverlayKind, dismiss: () => void, base?: () => number | undefined): {
     id: symbol;
+    zIndex: import("vue").ComputedRef<number>;
     isTop: () => boolean;
     unregister: () => void;
 };