@luzmo/lucero 0.0.38 → 0.0.39

package/components/overlay/index.js

@@ -15,15 +15,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { e as f, I as O, s as $, L as S } from "../overlay-BBNyvs8F.js";
-import { C as G, H as M, b as J, c as K, d 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-BBNyvs8F.js";
-import { a as E, r as w, x as c, n as u, E as z, B as b } from "../base-WsynuqaS.js";
-import { r as h } from "../state-Deh-vKYE.js";
-import { e as g } from "../query-D_KR_GUc.js";
-import { e as v } from "../directive-oAbCiebi.js";
+import { e as f, I as O, s as S, L as $ } from "../overlay-DaOKAKMl.js";
+import { C as D, H as M, b as J, c as K, d as Q, P as W, S as X, V as Y, g as Z, l as ee, a as te, n as oe, o as re, p as le } from "../overlay-DaOKAKMl.js";
+import { a as E, r as w, x as m, n as c, E as z, B as v } from "../base-WsynuqaS.js";
+import { r as g } from "../state-Deh-vKYE.js";
+import { e as h } from "../query-D_KR_GUc.js";
+import { e as b } from "../directive-oAbCiebi.js";
 import { f as A } from "../async-directive-BfcqVjDp.js";
 import { r as y } from "../slottable-request-event-DggLA4Rx.js";
-import { S as le } from "../slottable-request-event-DggLA4Rx.js";
+import { S as ne } from "../slottable-request-event-DggLA4Rx.js";
 const k = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const i = document.createElement("style");
@@ -32,12 +32,12 @@ const k = () => {
 };
 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;
+var I = Object.defineProperty, s = (i, e, o, t) => {
+  for (var l = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (l = a(e, o, l) || l);
+  return l && I(e, o, l), l;
 };
-class l extends E {
+class r 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 = [];
   }
@@ -67,31 +67,30 @@ class l extends E {
     }
   }
   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";
+    const { target: o } = e;
+    let t;
+    if (o === this.clickOverlayElement)
+      t = "click";
+    else if (o === this.longpressOverlayElement)
+      t = "longpress";
+    else if (o === this.hoverOverlayElement)
+      t = "hover";
     else
       return;
-    e.newState === "open" ? this.open = o : this.open === o && (this.open = void 0);
+    e.newState === "open" ? this.open = t : this.open === t && (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);
+    var o, t, l, n, a, u;
+    e.has("clickContent") && (this.clickPlacement = ((o = this.clickContent[0]) == null ? void 0 : o.getAttribute("placement")) || ((t = this.clickContent[0]) == null ? void 0 : t.getAttribute("direction")) || void 0), e.has("hoverContent") && (this.hoverPlacement = ((l = this.hoverContent[0]) == null ? void 0 : l.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")) || ((u = this.longpressContent[0]) == null ? void 0 : u.getAttribute("direction")) || void 0), super.update(e);
   }
   renderSlot(e) {
-    return c`
+    return m`
       <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
     `;
   }
   renderClickOverlay() {
-    import("../overlay-BBNyvs8F.js").then((t) => t.f);
-    const e = this.renderSlot("click-content");
-    return this.clickContent.length === 0 ? e : c`
+    var t;
+    const e = this.renderSlot("click-content"), o = m`
       <luzmo-overlay
         id="click-overlay"
         ?disabled=${this.disabled || this.clickContent.length === 0}
@@ -107,11 +106,11 @@ class l extends E {
         ${e}
       </luzmo-overlay>
     `;
+    return (t = this.triggeredBy) != null && t.includes("click") ? o : this.clickContent.length === 0 ? e : o;
   }
   renderHoverOverlay() {
-    import("../overlay-BBNyvs8F.js").then((t) => t.f);
-    const e = this.renderSlot("hover-content");
-    return this.hoverContent.length === 0 ? e : c`
+    var t;
+    const e = this.renderSlot("hover-content"), o = m`
       <luzmo-overlay
         id="hover-overlay"
         ?open=${this.open === "hover" && this.hoverContent.length > 0}
@@ -127,11 +126,11 @@ class l extends E {
         ${e}
       </luzmo-overlay>
     `;
+    return (t = this.triggeredBy) != null && t.includes("hover") ? o : this.hoverContent.length === 0 ? e : o;
   }
   renderLongpressOverlay() {
-    import("../overlay-BBNyvs8F.js").then((t) => t.f);
-    const e = this.renderSlot("longpress-content");
-    return this.longpressContent.length === 0 ? e : c`
+    var t;
+    const e = this.renderSlot("longpress-content"), o = m`
       <luzmo-overlay
         id="longpress-overlay"
         ?disabled=${this.disabled || this.longpressContent.length === 0}
@@ -148,19 +147,19 @@ class l extends E {
       </luzmo-overlay>
       <slot name="longpress-describedby-descriptor"></slot>
     `;
+    return (t = this.triggeredBy) != null && t.includes("longpress") ? o : this.longpressContent.length === 0 ? e : o;
   }
   render() {
-    const e = this.content.split(" ");
-    return c`
+    return m`
       <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``
+      this.renderClickOverlay(),
+      this.renderHoverOverlay(),
+      this.renderLongpressOverlay()
     ]}
     `;
   }
@@ -175,53 +174,56 @@ class l extends E {
   }
 }
 s([
-  u()
-], l.prototype, "content");
+  c()
+], r.prototype, "content");
 s([
-  u({ reflect: !0 })
-], l.prototype, "placement");
+  c({ attribute: "triggered-by" })
+], r.prototype, "triggeredBy");
 s([
-  u()
-], l.prototype, "type");
+  c({ reflect: !0 })
+], r.prototype, "placement");
 s([
-  u({ type: Number })
-], l.prototype, "offset");
+  c()
+], r.prototype, "type");
 s([
-  u({ reflect: !0 })
-], l.prototype, "open");
+  c({ type: Number })
+], r.prototype, "offset");
 s([
-  u({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled");
+  c({ reflect: !0 })
+], r.prototype, "open");
 s([
-  u({ attribute: "receives-focus" })
-], l.prototype, "receivesFocus");
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
 s([
-  h()
-], l.prototype, "clickContent");
+  c({ attribute: "receives-focus" })
+], r.prototype, "receivesFocus");
 s([
-  h()
-], l.prototype, "longpressContent");
+  g()
+], r.prototype, "clickContent");
 s([
-  h()
-], l.prototype, "hoverContent");
+  g()
+], r.prototype, "longpressContent");
 s([
-  h()
-], l.prototype, "targetContent");
+  g()
+], r.prototype, "hoverContent");
 s([
-  g("#click-overlay", !0)
-], l.prototype, "clickOverlayElement");
+  g()
+], r.prototype, "targetContent");
 s([
-  g("#longpress-overlay", !0)
-], l.prototype, "longpressOverlayElement");
+  h("#click-overlay", !0)
+], r.prototype, "clickOverlayElement");
 s([
-  g("#hover-overlay", !0)
-], l.prototype, "hoverOverlayElement");
-function U(i, e, t, o) {
+  h("#longpress-overlay", !0)
+], r.prototype, "longpressOverlayElement");
+s([
+  h("#hover-overlay", !0)
+], r.prototype, "hoverOverlayElement");
+function U(i, e, o, t) {
   return f.open(
     i,
     e,
-    t,
-    o
+    o,
+    t
   );
 }
 class x extends A {
@@ -229,24 +231,24 @@ class x extends A {
   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();
+  update(e, [o]) {
+    this.template = o, 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, {
+    const o = e.data === y;
+    v(o ? void 0 : this.template(), this.target, {
       renderBefore: this.renderBefore
     });
   }
   init() {
-    var t;
-    (t = this.listeners) == null || t.abort(), this.listeners = new AbortController();
+    var o;
+    (o = this.listeners) == null || o.abort(), this.listeners = new AbortController();
     const { signal: e } = this.listeners;
     this.listenerHost.addEventListener(
       "slottable-request",
-      (o) => this.handleSlottableRequest(o),
+      (t) => this.handleSlottableRequest(t),
       { signal: e }
     );
   }
@@ -259,8 +261,8 @@ class x extends A {
     this.init();
   }
 }
-const N = v(x);
-class I extends x {
+const N = b(x);
+class R extends x {
   constructor() {
     super(...arguments), this.defaultOptions = {
       triggerInteraction: "click",
@@ -273,70 +275,72 @@ class I extends x {
     };
   }
   /* c8 ignore next 9 */
-  render(e, t) {
+  render(e, o) {
     return z;
   }
-  update(e, [t, o]) {
-    var m, d, p;
+  update(e, [o, t]) {
+    var u, 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, {
+      ...t == null ? void 0 : t.overlayOptions
+    }, this.insertionOptions = t == null ? void 0 : t.insertionOptions, this.template = o, this.host = (u = e.options) == null ? void 0 : u.host;
+    let l = !1;
+    const n = (t == null ? void 0 : t.triggerInteraction) || this.defaultOptions.triggerInteraction, a = O[(d = this.strategy) == null ? void 0 : d.type] !== n;
+    this.target !== e.element && (this.target = e.element, l = !0), (l || a) && ((p = this.strategy) == null || p.abort(), this.strategy = new S[n](this.target, {
       isPersistent: !0,
       handleOverlayReady: (C) => {
         this.listenerHost = this.overlay = C, this.init();
       }
-    })), this.strategy.open = (o == null ? void 0 : o.open) ?? !1;
+    })), this.strategy.open = (t == null ? void 0 : t.open) ?? !1;
   }
   handleSlottableRequest(e) {
-    var r, n;
+    var l, 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(),
+    const o = e.data === y, t = {};
+    if (this.host && (t.host = this.host), v(
+      o ? void 0 : this.template(),
       this.overlay,
-      o
-    ), t)
+      t
+    ), o)
       this.overlay.remove();
     else {
-      S.applyOptions(this.overlay, {
+      $.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 a = typeof ((l = this.insertionOptions) == null ? void 0 : l.el) == "function" ? this.insertionOptions.el() : ((n = this.insertionOptions) == null ? void 0 : n.el) || this.target, { where: u = "afterend" } = this.insertionOptions || {};
+      a.insertAdjacentElement(u, this.overlay);
     }
   }
 }
-const V = v(I);
+const G = b(R);
 customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", f);
-customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", l);
+customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", r);
 export {
-  G as ClickController,
+  D as ClickController,
   M as HoverController,
   J as InteractionController,
   O as InteractionTypes,
   K as LONGPRESS_INSTRUCTIONS,
   Q as LongpressController,
-  S as LuzmoAbstractOverlay,
+  $ as LuzmoAbstractOverlay,
   f as LuzmoOverlay,
-  l as LuzmoOverlayTrigger,
-  I as OverlayTriggerDirective,
+  r as LuzmoOverlayTrigger,
+  R as OverlayTriggerDirective,
   W as PlacementController,
+  X as SAFARI_FOCUS_RING_CLASS,
   x as SlottableRequestDirective,
-  le as SlottableRequestEvent,
-  X as VirtualTrigger,
-  Y as guaranteedAllTransitionend,
-  Z as nextFrame,
-  ee as noop,
+  ne as SlottableRequestEvent,
+  Y as VirtualTrigger,
+  Z as guaranteedAllTransitionend,
+  ee as lastInteractionType,
+  te as nextFrame,
+  oe as noop,
   U as openOverlay,
-  te as overlayTimer,
-  oe as placementUpdatedSymbol,
+  re as overlayTimer,
+  le as placementUpdatedSymbol,
   y as removeSlottableRequest,
   N as slottableRequest,
-  V as trigger
+  G as trigger
 };

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

@@ -1,17 +1,22 @@
 import type { ReactiveController } from 'lit';
 import { LuzmoAbstractOverlay } from './abstract-overlay';
 export declare enum InteractionTypes {
-    'click' = 0,
-    'hover' = 1,
-    'longpress' = 2
+    click = "click",
+    hover = "hover",
+    longpress = "longpress"
 }
+export declare const lastInteractionType: unique symbol;
+export declare const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
 export type ControllerOptions = {
     overlay?: LuzmoAbstractOverlay;
     handleOverlayReady?: (overlay: LuzmoAbstractOverlay) => void;
     isPersistent?: boolean;
 };
+type InteractionTarget = HTMLElement & {
+    [lastInteractionType]?: InteractionTypes;
+};
 export declare class InteractionController implements ReactiveController {
-    target: HTMLElement;
+    target: InteractionTarget;
     abortController: AbortController;
     get activelyOpening(): boolean;
     private handleOverlayReady?;
@@ -26,7 +31,7 @@ export declare class InteractionController implements ReactiveController {
     private _overlay;
     protected isPersistent: boolean;
     type: InteractionTypes;
-    constructor(target: HTMLElement, { overlay, isPersistent, handleOverlayReady }: ControllerOptions);
+    constructor(target: InteractionTarget, { overlay, isPersistent, handleOverlayReady }: ControllerOptions);
     prepareDescription(_: HTMLElement): void;
     releaseDescription(): void;
     shouldCompleteOpen(): void;
@@ -36,3 +41,4 @@ export declare class InteractionController implements ReactiveController {
     hostConnected(): void;
     hostDisconnected(): void;
 }
+export {};

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

@@ -7,6 +7,7 @@ declare class OverlayStack {
     stack: LuzmoOverlay[];
     constructor();
     bindEvents(): void;
+    private handleScroll;
     private closeOverlay;
     /**
      * Cach the `pointerdownTarget` for later testing

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

@@ -3,21 +3,43 @@ import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import { LuzmoElement } from '../../utils/base';
 import { LuzmoOverlay } from './overlay';
 import { OverlayTriggerInteractions } from './overlay-types';
+import './overlay';
 export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
+type Combinations<T extends string, U extends string = T> = T extends string ? T | `${T} ${Combinations<Exclude<U, T>>}` : never;
+export type TriggeredByType = Combinations<OverlayContentTypes>;
 /**
  * @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
+ * @slot longpress-content - The content that will be displayed on longpress
+ * @slot longpress-describedby-descriptor - Description for longpress content
  *
  * @fires luzmo-opened - Announces that the overlay has been opened
  * @fires luzmo-closed - Announces that the overlay has been closed
+ *
+ * @attr {string} placement - The placement of the overlay relative to the trigger
+ * @attr {number} offset - The distance between the overlay and the trigger
+ * @attr {boolean} disabled - Whether the overlay trigger is disabled
+ * @attr {string} receives-focus - How focus should be handled ('true'|'false'|'auto')
  */
 export declare class LuzmoOverlayTrigger extends LuzmoElement {
     static get styles(): CSSResultArray;
     content: string;
+    /**
+     * Optional property to optimize performance and prevent race conditions.
+     *
+     * By explicitly declaring which content types are used (e.g. "click", "longpress hover"),
+     * we can avoid:
+     * 1. Extra renders from unnecessary slot reparenting
+     * 2. Potential infinite render loops during content detection
+     * 3. Race conditions during slot assignment
+     *
+     * By only returning overlay wrappers for explicitly declared content types,
+     * we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior.
+     */
+    triggeredBy?: TriggeredByType;
     /**
      * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
      * @attr
@@ -48,6 +70,7 @@ export declare class LuzmoOverlayTrigger extends LuzmoElement {
     protected renderHoverOverlay(): TemplateResult;
     protected renderLongpressOverlay(): TemplateResult;
     protected render(): TemplateResult;
-    protected updated(changes: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     protected getUpdateComplete(): Promise<boolean>;
 }
+export {};