@luzmo/lucero 0.0.3 → 0.0.6

package/components/overlay/index.js

@@ -0,0 +1,342 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+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 { 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);
+  }
+};
+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 && T(e, t, r), r;
+};
+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 [w(F)];
+  }
+  getAssignedElementsFromSlot(e) {
+    return e.assignedElements({ flatten: !0 });
+  }
+  handleTriggerContent(e) {
+    this.targetContent = this.getAssignedElementsFromSlot(e.target);
+  }
+  handleSlotContent(e) {
+    switch (e.target.name) {
+      case "click-content": {
+        this.clickContent = this.getAssignedElementsFromSlot(e.target);
+        break;
+      }
+      case "longpress-content": {
+        this.longpressContent = this.getAssignedElementsFromSlot(e.target);
+        break;
+      }
+      case "hover-content": {
+        this.hoverContent = this.getAssignedElementsFromSlot(e.target);
+        break;
+      }
+    }
+  }
+  handleBeforetoggle(e) {
+    const { target: t } = e;
+    let o;
+    if (t === this.clickOverlayElement)
+      o = "click";
+    else if (t === this.longpressOverlayElement)
+      o = "longpress";
+    else if (t === this.hoverOverlayElement)
+      o = "hover";
+    else
+      return;
+    e.newState === "open" ? this.open = o : this.open === o && (this.open = void 0);
+  }
+  update(e) {
+    var t, o, r, n, a, m;
+    e.has("clickContent") && (this.clickPlacement = ((t = this.clickContent[0]) == null ? void 0 : t.getAttribute("placement")) || ((o = this.clickContent[0]) == null ? void 0 : o.getAttribute("direction")) || void 0), e.has("hoverContent") && (this.hoverPlacement = ((r = this.hoverContent[0]) == null ? void 0 : r.getAttribute("placement")) || ((n = this.hoverContent[0]) == null ? void 0 : n.getAttribute("direction")) || void 0), e.has("longpressContent") && (this.longpressPlacement = ((a = this.longpressContent[0]) == null ? void 0 : a.getAttribute("placement")) || ((m = this.longpressContent[0]) == null ? void 0 : m.getAttribute("direction")) || void 0), super.update(e);
+  }
+  renderSlot(e) {
+    return c`
+      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
+    `;
+  }
+  renderClickOverlay() {
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
+    const e = this.renderSlot("click-content");
+    return this.clickContent.length === 0 ? e : c`
+      <luzmo-overlay
+        id="click-overlay"
+        ?disabled=${this.disabled || this.clickContent.length === 0}
+        ?open=${this.open === "click" && this.clickContent.length > 0}
+        .offset=${this.offset}
+        .placement=${this.clickPlacement || this.placement}
+        .triggerElement=${this.targetContent[0]}
+        .triggerInteraction=${"click"}
+        .type=${this.type === "modal" ? "modal" : "auto"}
+        @beforetoggle=${this.handleBeforetoggle}
+        .receivesFocus=${this.receivesFocus}
+      >
+        ${e}
+      </luzmo-overlay>
+    `;
+  }
+  renderHoverOverlay() {
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
+    const e = this.renderSlot("hover-content");
+    return this.hoverContent.length === 0 ? e : c`
+      <luzmo-overlay
+        id="hover-overlay"
+        ?open=${this.open === "hover" && this.hoverContent.length > 0}
+        ?disabled=${this.disabled || this.hoverContent.length === 0 || !!this.open && this.open !== "hover"}
+        .offset=${this.offset}
+        .placement=${this.hoverPlacement || this.placement}
+        .triggerElement=${this.targetContent[0]}
+        .triggerInteraction=${"hover"}
+        .type=${"hint"}
+        @beforetoggle=${this.handleBeforetoggle}
+        .receivesFocus=${this.receivesFocus}
+      >
+        ${e}
+      </luzmo-overlay>
+    `;
+  }
+  renderLongpressOverlay() {
+    import("../overlay-C2Cck0Az.js").then((t) => t.d);
+    const e = this.renderSlot("longpress-content");
+    return this.longpressContent.length === 0 ? e : c`
+      <luzmo-overlay
+        id="longpress-overlay"
+        ?disabled=${this.disabled || this.longpressContent.length === 0}
+        ?open=${this.open === "longpress" && this.longpressContent.length > 0}
+        .offset=${this.offset}
+        .placement=${this.longpressPlacement || this.placement}
+        .triggerElement=${this.targetContent[0]}
+        .triggerInteraction=${"longpress"}
+        .type=${"auto"}
+        @beforetoggle=${this.handleBeforetoggle}
+        .receivesFocus=${this.receivesFocus}
+      >
+        ${e}
+      </luzmo-overlay>
+      <slot name="longpress-describedby-descriptor"></slot>
+    `;
+  }
+  render() {
+    const e = this.content.split(" ");
+    return c`
+      <slot
+        id="trigger"
+        name="trigger"
+        @slotchange=${this.handleTriggerContent}
+      ></slot>
+      ${[
+      e.includes("click") ? this.renderClickOverlay() : c``,
+      e.includes("hover") ? this.renderHoverOverlay() : c``,
+      e.includes("longpress") ? this.renderLongpressOverlay() : c``
+    ]}
+    `;
+  }
+  updated(e) {
+    if (super.updated(e), this.disabled && e.has("disabled")) {
+      this.open = void 0;
+      return;
+    }
+  }
+  async getUpdateComplete() {
+    return await super.getUpdateComplete();
+  }
+}
+s([
+  u()
+], l.prototype, "content");
+s([
+  u({ reflect: !0 })
+], l.prototype, "placement");
+s([
+  u()
+], l.prototype, "type");
+s([
+  u({ type: Number })
+], l.prototype, "offset");
+s([
+  u({ reflect: !0 })
+], l.prototype, "open");
+s([
+  u({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled");
+s([
+  u({ attribute: "receives-focus" })
+], l.prototype, "receivesFocus");
+s([
+  h()
+], l.prototype, "clickContent");
+s([
+  h()
+], l.prototype, "longpressContent");
+s([
+  h()
+], l.prototype, "hoverContent");
+s([
+  h()
+], l.prototype, "targetContent");
+s([
+  g("#click-overlay", !0)
+], l.prototype, "clickOverlayElement");
+s([
+  g("#longpress-overlay", !0)
+], l.prototype, "longpressOverlayElement");
+s([
+  g("#hover-overlay", !0)
+], l.prototype, "hoverOverlayElement");
+function U(i, e, t, o) {
+  return f.open(
+    i,
+    e,
+    t,
+    o
+  );
+}
+class x extends A {
+  /* c8 ignore next 9 */
+  render(e) {
+    return z;
+  }
+  update(e, [t]) {
+    this.template = t, this.target !== e.element && (this.target = e.element, this.renderBefore = this.target.children[0]), this.listenerHost = this.target, this.init();
+  }
+  handleSlottableRequest(e) {
+    if (e.target !== e.currentTarget)
+      return;
+    const t = e.data === y;
+    b(t ? void 0 : this.template(), this.target, {
+      renderBefore: this.renderBefore
+    });
+  }
+  init() {
+    var t;
+    (t = this.listeners) == null || t.abort(), this.listeners = new AbortController();
+    const { signal: e } = this.listeners;
+    this.listenerHost.addEventListener(
+      "slottable-request",
+      (o) => this.handleSlottableRequest(o),
+      { signal: e }
+    );
+  }
+  disconnected() {
+    var e;
+    (e = this.listeners) == null || e.abort();
+  }
+  /* c8 ignore next 3 */
+  reconnected() {
+    this.init();
+  }
+}
+const N = v(x);
+class I extends x {
+  constructor() {
+    super(...arguments), this.defaultOptions = {
+      triggerInteraction: "click",
+      overlayOptions: {
+        type: "auto",
+        offset: 0
+      }
+    }, this.options = {
+      ...this.defaultOptions.overlayOptions
+    };
+  }
+  /* c8 ignore next 9 */
+  render(e, t) {
+    return z;
+  }
+  update(e, [t, o]) {
+    var m, d, p;
+    this.options = {
+      ...this.defaultOptions.overlayOptions,
+      ...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 = 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: (C) => {
+        this.listenerHost = this.overlay = C, this.init();
+      }
+    })), this.strategy.open = (o == null ? void 0 : o.open) ?? !1;
+  }
+  handleSlottableRequest(e) {
+    var r, n;
+    if (e.target !== e.currentTarget)
+      return;
+    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 {
+      S.applyOptions(this.overlay, {
+        ...this.options,
+        trigger: this.target
+      });
+      const a = typeof ((r = this.insertionOptions) == null ? void 0 : r.el) == "function" ? this.insertionOptions.el() : ((n = this.insertionOptions) == null ? void 0 : n.el) || this.target, { where: m = "afterend" } = this.insertionOptions || {};
+      a.insertAdjacentElement(m, this.overlay);
+    }
+  }
+}
+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,
+  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';