@luzmo/lucero 0.0.4 → 0.0.6

package/{lib → components}/overlay/index.js

@@ -15,35 +15,34 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { O as f, I as C, s as k, A as O } from "../overlay-C7QKFqRc.js";
-import { V as M } from "../overlay-C7QKFqRc.js";
-import { L as $, n as u } from "../base-nYalvNMy.js";
-import { unsafeCSS as S, html as c, nothing as z, render as v } from "lit";
-import { r as h } from "../state-BAO-13Bs.js";
+import { O as f, I as O, s as $, A as S } from "../overlay-C2Cck0Az.js";
+import { C as G, H as M, b as J, L as K, c as Q, P as W, V as X, g as Y, a as Z, n as ee, o as te, p as oe } from "../overlay-C2Cck0Az.js";
+import { L as E, r as w, x as c, n as u, E as z, B as b } from "../base-CxUap9HL.js";
+import { r as h } from "../state-D8vot9IB.js";
 import { e as g } from "../query-D_KR_GUc.js";
-import "../lit-html-B3ugcwD9.js";
-import { e as w } from "../directive-oAbCiebi.js";
-import { f as E } from "../async-directive-FGzMycjH.js";
-import { r as b } from "../slottable-request-event-DggLA4Rx.js";
-const x = () => {
+import { e as v } from "../directive-oAbCiebi.js";
+import { f as A } from "../async-directive-BhRGSTWB.js";
+import { r as y } from "../slottable-request-event-DggLA4Rx.js";
+import { S as le } from "../slottable-request-event-DggLA4Rx.js";
+const k = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const i = document.createElement("style");
     i.setAttribute("data-luzmo-vars", ""), i.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(i);
   }
 };
-x();
-const A = ":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}";
-var F = Object.defineProperty, s = (i, e, t, o) => {
+k();
+const F = ":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}";
+var T = Object.defineProperty, s = (i, e, t, o) => {
   for (var r = void 0, n = i.length - 1, a; n >= 0; n--)
     (a = i[n]) && (r = a(e, t, r) || r);
-  return r && F(e, t, r), r;
+  return r && T(e, t, r), r;
 };
-class l extends $ {
+class l extends E {
   constructor() {
     super(...arguments), this.content = "click hover longpress", this.offset = 6, this.disabled = !1, this.receivesFocus = "auto", this.clickContent = [], this.longpressContent = [], this.hoverContent = [], this.targetContent = [];
   }
   static get styles() {
-    return [S(A)];
+    return [w(F)];
   }
   getAssignedElementsFromSlot(e) {
     return e.assignedElements({ flatten: !0 });
@@ -90,7 +89,7 @@ class l extends $ {
     `;
   }
   renderClickOverlay() {
-    import("../overlay-C7QKFqRc.js").then((t) => t.o);
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
     const e = this.renderSlot("click-content");
     return this.clickContent.length === 0 ? e : c`
       <luzmo-overlay
@@ -110,7 +109,7 @@ class l extends $ {
     `;
   }
   renderHoverOverlay() {
-    import("../overlay-C7QKFqRc.js").then((t) => t.o);
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
     const e = this.renderSlot("hover-content");
     return this.hoverContent.length === 0 ? e : c`
       <luzmo-overlay
@@ -130,7 +129,7 @@ class l extends $ {
     `;
   }
   renderLongpressOverlay() {
-    import("../overlay-C7QKFqRc.js").then((t) => t.o);
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
     const e = this.renderSlot("longpress-content");
     return this.longpressContent.length === 0 ? e : c`
       <luzmo-overlay
@@ -217,7 +216,7 @@ s([
 s([
   g("#hover-overlay", !0)
 ], l.prototype, "hoverOverlayElement");
-function j(i, e, t, o) {
+function U(i, e, t, o) {
   return f.open(
     i,
     e,
@@ -225,7 +224,7 @@ function j(i, e, t, o) {
     o
   );
 }
-class I extends E {
+class x extends A {
   /* c8 ignore next 9 */
   render(e) {
     return z;
@@ -236,8 +235,8 @@ class I extends E {
   handleSlottableRequest(e) {
     if (e.target !== e.currentTarget)
       return;
-    const t = e.data === b;
-    v(t ? void 0 : this.template(), this.target, {
+    const t = e.data === y;
+    b(t ? void 0 : this.template(), this.target, {
       renderBefore: this.renderBefore
     });
   }
@@ -260,7 +259,8 @@ class I extends E {
     this.init();
   }
 }
-class T extends I {
+const N = v(x);
+class I extends x {
   constructor() {
     super(...arguments), this.defaultOptions = {
       triggerInteraction: "click",
@@ -283,11 +283,11 @@ class T extends I {
       ...o == null ? void 0 : o.overlayOptions
     }, this.insertionOptions = o == null ? void 0 : o.insertionOptions, this.template = t, this.host = (m = e.options) == null ? void 0 : m.host;
     let r = !1;
-    const n = (o == null ? void 0 : o.triggerInteraction) || this.defaultOptions.triggerInteraction, a = C[(d = this.strategy) == null ? void 0 : d.type] !== n;
-    this.target !== e.element && (this.target = e.element, r = !0), (r || a) && ((p = this.strategy) == null || p.abort(), this.strategy = new k[n](this.target, {
+    const n = (o == null ? void 0 : o.triggerInteraction) || this.defaultOptions.triggerInteraction, a = O[(d = this.strategy) == null ? void 0 : d.type] !== n;
+    this.target !== e.element && (this.target = e.element, r = !0), (r || a) && ((p = this.strategy) == null || p.abort(), this.strategy = new $[n](this.target, {
       isPersistent: !0,
-      handleOverlayReady: (y) => {
-        this.listenerHost = this.overlay = y, this.init();
+      handleOverlayReady: (C) => {
+        this.listenerHost = this.overlay = C, this.init();
       }
     })), this.strategy.open = (o == null ? void 0 : o.open) ?? !1;
   }
@@ -295,15 +295,15 @@ class T extends I {
     var r, n;
     if (e.target !== e.currentTarget)
       return;
-    const t = e.data === b, o = {};
-    if (this.host && (o.host = this.host), v(
+    const t = e.data === y, o = {};
+    if (this.host && (o.host = this.host), b(
       t ? void 0 : this.template(),
       this.overlay,
       o
     ), t)
       this.overlay.remove();
     else {
-      O.applyOptions(this.overlay, {
+      S.applyOptions(this.overlay, {
         ...this.options,
         trigger: this.target
       });
@@ -312,14 +312,31 @@ class T extends I {
     }
   }
 }
-const D = w(T);
+const V = v(I);
 customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", f);
 customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", l);
 export {
+  S as AbstractOverlay,
+  G as ClickController,
+  M as HoverController,
+  J as InteractionController,
+  O as InteractionTypes,
+  K as LONGPRESS_INSTRUCTIONS,
+  Q as LongpressController,
   f as Overlay,
   l as OverlayTrigger,
-  T as OverlayTriggerDirective,
-  M as VirtualTrigger,
-  j as openOverlay,
-  D as trigger
+  I as OverlayTriggerDirective,
+  W as PlacementController,
+  x as SlottableRequestDirective,
+  le as SlottableRequestEvent,
+  X as VirtualTrigger,
+  Y as guaranteedAllTransitionend,
+  Z as nextFrame,
+  ee as noop,
+  U as openOverlay,
+  te as overlayTimer,
+  oe as placementUpdatedSymbol,
+  y as removeSlottableRequest,
+  N as slottableRequest,
+  V as trigger
 };

package/components/overlay/interaction-controller.d.ts

@@ -0,0 +1,38 @@
+import type { ReactiveController } from 'lit';
+import { AbstractOverlay } from './abstract-overlay';
+export declare enum InteractionTypes {
+    'click' = 0,
+    'hover' = 1,
+    'longpress' = 2
+}
+export type ControllerOptions = {
+    overlay?: AbstractOverlay;
+    handleOverlayReady?: (overlay: AbstractOverlay) => void;
+    isPersistent?: boolean;
+};
+export declare class InteractionController implements ReactiveController {
+    target: HTMLElement;
+    abortController: AbortController;
+    get activelyOpening(): boolean;
+    private handleOverlayReady?;
+    private isLazilyOpen;
+    get open(): boolean;
+    /**
+     * Set `open` against the associated Overlay lazily.
+     */
+    set open(open: boolean);
+    get overlay(): AbstractOverlay;
+    set overlay(overlay: AbstractOverlay | undefined);
+    private _overlay;
+    protected isPersistent: boolean;
+    type: InteractionTypes;
+    constructor(target: HTMLElement, { overlay, isPersistent, handleOverlayReady }: ControllerOptions);
+    prepareDescription(_: HTMLElement): void;
+    releaseDescription(): void;
+    shouldCompleteOpen(): void;
+    init(): void;
+    initOverlay(): void;
+    abort(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/components/overlay/loader.d.ts

@@ -0,0 +1,4 @@
+import { Overlay } from './overlay';
+import type { OverlayOptions, OverlayOptionsV1, TriggerInteractionsV1 } from './overlay-types';
+export declare function openOverlay(trigger: HTMLElement, interaction: TriggerInteractionsV1, content: HTMLElement, optionsV1: OverlayOptionsV1): Promise<() => void>;
+export declare function openOverlay(content: HTMLElement, options?: OverlayOptions): Promise<Overlay>;

package/components/overlay/longpress-controller.d.ts

@@ -0,0 +1,21 @@
+import { InteractionController, InteractionTypes } from './interaction-controller';
+export declare const LONGPRESS_INSTRUCTIONS: {
+    touch: string;
+    keyboard: string;
+    mouse: string;
+};
+export declare class LongpressController extends InteractionController {
+    type: InteractionTypes;
+    get activelyOpening(): boolean;
+    protected longpressState: null | 'potential' | 'opening' | 'pressed';
+    releaseDescription: () => void;
+    private timeout;
+    handleLongpress(): void;
+    handlePointerdown(event: PointerEvent): void;
+    private handlePointerup;
+    private handleKeydown;
+    private handleKeyup;
+    prepareDescription(trigger: HTMLElement): void;
+    shouldCompleteOpen(): void;
+    init(): void;
+}

package/components/overlay/overlay-dialog.d.ts

@@ -0,0 +1,4 @@
+import { LuzmoElement } from '../../utils/base';
+import { AbstractOverlay } from './abstract-overlay';
+import { Constructor } from './overlay-types';
+export declare function OverlayDialog<T extends Constructor<AbstractOverlay>>(constructor: T): T & Constructor<LuzmoElement>;

package/components/overlay/overlay-events.d.ts

@@ -0,0 +1,11 @@
+export declare class OverlayCloseEvent extends Event {
+    root?: HTMLElement;
+    constructor({ root }: {
+        root?: HTMLElement;
+    });
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'luzmo-overlay-close': CustomEvent<OverlayCloseEvent>;
+    }
+}

package/components/overlay/overlay-no-popover.d.ts

@@ -0,0 +1,4 @@
+import { LuzmoElement } from '../../utils/base';
+import { AbstractOverlay } from './abstract-overlay';
+import { Constructor } from './overlay-types';
+export declare function OverlayNoPopover<T extends Constructor<AbstractOverlay>>(constructor: T): T & Constructor<LuzmoElement>;

package/components/overlay/overlay-popover.d.ts

@@ -0,0 +1,4 @@
+import { LuzmoElement } from '../../utils/base';
+import { AbstractOverlay } from './abstract-overlay';
+import { Constructor } from './overlay-types';
+export declare function OverlayPopover<T extends Constructor<AbstractOverlay>>(constructor: T): T & Constructor<LuzmoElement>;

package/components/overlay/overlay-stack.d.ts

@@ -0,0 +1,44 @@
+import { Overlay } from './overlay';
+declare class OverlayStack {
+    private get document();
+    private pointerdownPath?;
+    private lastOverlay?;
+    private root;
+    stack: Overlay[];
+    constructor();
+    bindEvents(): void;
+    private closeOverlay;
+    /**
+     * Cach the `pointerdownTarget` for later testing
+     *
+     * @param event {ClickEvent}
+     */
+    handlePointerdown: (event: Event) => void;
+    /**
+     * Close all overlays that are not ancestors of this click event
+     *
+     * @param event {ClickEvent}
+     */
+    handlePointerup: () => void;
+    handleBeforetoggle: (event: Event) => void;
+    private handleKeydown;
+    /**
+     * Get an array of Overlays that all share the same trigger element.
+     *
+     * @param triggerElement {HTMLELement}
+     * @returns
+     */
+    overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[];
+    /**
+     * When overlays are added manage the open state of exisiting overlays appropriately:
+     * - 'modal': should close other non-'modal' and non-'manual' overlays
+     * - 'page': should close other non-'modal' and non-'manual' overlays
+     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
+     * - 'manual': shouldn't close other overlays
+     * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
+     */
+    add(overlay: Overlay): void;
+    remove(overlay: Overlay): void;
+}
+export declare const overlayStack: OverlayStack;
+export {};

package/components/overlay/overlay-timer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A timer to help with implementation of warnup/cooldown behavior as described here:
+ */
+export declare class OverlayTimer {
+    private warmUpDelay;
+    private coolDownDelay;
+    private isWarm;
+    private cooldownTimeout?;
+    private component?;
+    private timeout;
+    private promise?;
+    private resolve?;
+    constructor(options?: {
+        warmUpDelay?: number;
+        coolDownDelay?: number;
+    });
+    openTimer(component: HTMLElement): Promise<boolean>;
+    close(component: HTMLElement): void;
+    private resetCooldownTimer;
+    private cancelCooldownTimer;
+}

package/components/overlay/overlay-trigger-directive.d.ts

@@ -0,0 +1,26 @@
+import { ElementPart, TemplateResult } from 'lit';
+import { OverlayOptions, TriggerInteraction } from './overlay-types';
+import { SlottableRequestDirective } from './slottable-request-directive';
+import { SlottableRequestEvent } from './slottable-request-event';
+export type InsertionOptions = {
+    el: HTMLElement | (() => HTMLElement);
+    where: InsertPosition;
+};
+export type OverlayTriggerOptions = {
+    open?: boolean;
+    triggerInteraction: TriggerInteraction;
+    overlayOptions: OverlayOptions;
+    insertionOptions?: InsertionOptions;
+};
+export declare class OverlayTriggerDirective extends SlottableRequestDirective {
+    private host?;
+    private overlay;
+    private strategy;
+    protected defaultOptions: OverlayTriggerOptions;
+    protected options: OverlayOptions;
+    protected insertionOptions?: InsertionOptions;
+    render(_template: () => TemplateResult, _options?: Partial<OverlayTriggerOptions>): unknown;
+    update(part: ElementPart, [template, options]: Parameters<this['render']>): void;
+    handleSlottableRequest(event: SlottableRequestEvent): void;
+}
+export declare const trigger: (_template: () => TemplateResult, _options?: Partial<OverlayTriggerOptions> | undefined) => import("lit-html/directive.js").DirectiveResult<typeof OverlayTriggerDirective>;

package/components/overlay/overlay-trigger.d.ts

@@ -0,0 +1,53 @@
+import { Placement } from '@floating-ui/dom';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import { Overlay } from './overlay';
+import { OverlayTriggerInteractions } from './overlay-types';
+export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
+/**
+ * @element overlay-trigger
+ *
+ * @slot trigger - The content that will trigger the various overlays
+ * @slot hover-content - The content that will be displayed on hover
+ * @slot click-content - The content that will be displayed on click
+ * @slot longpress-content - The content that will be displayed on click
+ *
+ * @fires luzmo-opened - Announces that the overlay has been opened
+ * @fires luzmo-closed - Announces that the overlay has been closed
+ */
+export declare class OverlayTrigger extends LuzmoElement {
+    static get styles(): CSSResultArray;
+    content: string;
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     * @attr
+     */
+    placement?: Placement;
+    type?: OverlayTriggerInteractions;
+    offset: number;
+    open?: OverlayContentTypes;
+    disabled: boolean;
+    receivesFocus: 'true' | 'false' | 'auto';
+    private clickContent;
+    private clickPlacement?;
+    private longpressContent;
+    private longpressPlacement?;
+    private hoverContent;
+    private hoverPlacement?;
+    private targetContent;
+    clickOverlayElement: Overlay;
+    longpressOverlayElement: Overlay;
+    hoverOverlayElement: Overlay;
+    private getAssignedElementsFromSlot;
+    private handleTriggerContent;
+    private handleSlotContent;
+    private handleBeforetoggle;
+    protected update(changes: PropertyValues): void;
+    protected renderSlot(name: string): TemplateResult;
+    protected renderClickOverlay(): TemplateResult;
+    protected renderHoverOverlay(): TemplateResult;
+    protected renderLongpressOverlay(): TemplateResult;
+    protected render(): TemplateResult;
+    protected updated(changes: PropertyValues): void;
+    protected getUpdateComplete(): Promise<boolean>;
+}

package/components/overlay/overlay-types.d.ts

@@ -0,0 +1,50 @@
+import type { Placement } from '@floating-ui/dom';
+import type { VirtualTrigger } from './virtual-trigger';
+export type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';
+export type TriggerInteraction = 'click' | 'longpress' | 'hover';
+export type TriggerInteractions = OverlayTypes;
+export type TriggerInteractionsV1 = 'click' | 'longpress' | 'hover' | 'custom' | 'replace' | 'inline' | 'modal';
+export type OverlayTriggerInteractions = Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;
+export interface OverlayOpenCloseDetail {
+    interaction: TriggerInteractions;
+    reason?: 'external-click';
+}
+export interface OverlayCloseReasonDetail {
+    reason?: 'external-click';
+}
+export type OverlayOptions = {
+    delayed?: boolean;
+    notImmediatelyClosable?: boolean;
+    offset?: number | [number, number];
+    placement?: Placement;
+    receivesFocus?: 'auto' | 'true' | 'false';
+    trigger?: HTMLElement | VirtualTrigger;
+    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
+};
+export type OverlayOptionsV1 = {
+    root?: HTMLElement;
+    delayed?: boolean;
+    placement?: Placement;
+    offset?: number;
+    receivesFocus?: 'true' | 'false' | 'auto';
+    notImmediatelyClosable?: boolean;
+    abortPromise?: Promise<boolean>;
+    virtualTrigger?: VirtualTrigger;
+};
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'luzmo-opened': CustomEvent<OverlayOpenCloseDetail>;
+        'luzmo-closed': CustomEvent<OverlayOpenCloseDetail>;
+    }
+}
+export type OpenableElement = HTMLElement & {
+    open: boolean;
+    tipElement?: HTMLElement;
+    updateComplete?: Promise<void>;
+};
+export type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';
+export { type Placement } from '@floating-ui/dom';