@luzmo/lucero 1.0.1-alpha.14 → 1.0.1-alpha.16

package/components/overlay/index.js

@@ -15,82 +15,110 @@
  * 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 S, L as $ } from "../overlay-Cig9r6uU.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-Cig9r6uU.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 ne } 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-disabled-color);--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-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #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);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.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-disabled-color);--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-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #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(styleElement);
   }
 };
-k();
-const F = ":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}";
-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;
+initializeGlobalLuzmoCSSVariables();
+import { e as LuzmoOverlay, I as InteractionTypes, s as strategies, L as LuzmoAbstractOverlay } from "../overlay-CN8ISP1F.js";
+import { C, H, b, c, d, P, S, V, g, l, a, n, o, p } from "../overlay-CN8ISP1F.js";
+import { unsafeCSS, html, nothing, render } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { directive, AsyncDirective } from "lit/async-directive.js";
+import { r as removeSlottableRequest } from "../slottable-request-event-D9WzrdWv.js";
+import { S as S2 } from "../slottable-request-event-D9WzrdWv.js";
+const overlayTriggerStyles = ":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-class r extends E {
+class LuzmoOverlayTrigger extends LuzmoElement {
   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 = [];
+    super(...arguments);
+    this.content = "click hover longpress";
+    this.offset = 6;
+    this.disabled = false;
+    this.receivesFocus = "auto";
+    this.clickContent = [];
+    this.longpressContent = [];
+    this.hoverContent = [];
+    this.targetContent = [];
   }
   static get styles() {
-    return [w(F)];
+    return [unsafeCSS(overlayTriggerStyles)];
   }
-  getAssignedElementsFromSlot(e) {
-    return e.assignedElements({ flatten: !0 });
+  getAssignedElementsFromSlot(slot) {
+    return slot.assignedElements({ flatten: true });
   }
-  handleTriggerContent(e) {
-    this.targetContent = this.getAssignedElementsFromSlot(e.target);
+  handleTriggerContent(event) {
+    this.targetContent = this.getAssignedElementsFromSlot(event.target);
   }
-  handleSlotContent(e) {
-    switch (e.target.name) {
+  handleSlotContent(event) {
+    switch (event.target.name) {
       case "click-content": {
-        this.clickContent = this.getAssignedElementsFromSlot(e.target);
+        this.clickContent = this.getAssignedElementsFromSlot(event.target);
         break;
       }
       case "longpress-content": {
-        this.longpressContent = this.getAssignedElementsFromSlot(e.target);
+        this.longpressContent = this.getAssignedElementsFromSlot(event.target);
         break;
       }
       case "hover-content": {
-        this.hoverContent = this.getAssignedElementsFromSlot(e.target);
+        this.hoverContent = this.getAssignedElementsFromSlot(event.target);
         break;
       }
     }
   }
-  handleBeforetoggle(e) {
-    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
+  handleBeforetoggle(event) {
+    const { target } = event;
+    let type;
+    if (target === this.clickOverlayElement) {
+      type = "click";
+    } else if (target === this.longpressOverlayElement) {
+      type = "longpress";
+    } else if (target === this.hoverOverlayElement) {
+      type = "hover";
+    } else {
       return;
-    e.newState === "open" ? this.open = t : this.open === t && (this.open = void 0);
+    }
+    if (event.newState === "open") {
+      this.open = type;
+    } else if (this.open === type) {
+      this.open = void 0;
+    }
   }
-  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);
+  update(changes) {
+    var _a, _b, _c, _d, _e, _f;
+    if (changes.has("clickContent")) {
+      this.clickPlacement = ((_a = this.clickContent[0]) == null ? void 0 : _a.getAttribute("placement")) || ((_b = this.clickContent[0]) == null ? void 0 : _b.getAttribute("direction")) || void 0;
+    }
+    if (changes.has("hoverContent")) {
+      this.hoverPlacement = ((_c = this.hoverContent[0]) == null ? void 0 : _c.getAttribute("placement")) || ((_d = this.hoverContent[0]) == null ? void 0 : _d.getAttribute("direction")) || void 0;
+    }
+    if (changes.has("longpressContent")) {
+      this.longpressPlacement = ((_e = this.longpressContent[0]) == null ? void 0 : _e.getAttribute("placement")) || ((_f = this.longpressContent[0]) == null ? void 0 : _f.getAttribute("direction")) || void 0;
+    }
+    super.update(changes);
   }
-  renderSlot(e) {
-    return m`
-      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
+  renderSlot(name) {
+    return html`
+      <slot name=${name} @slotchange=${this.handleSlotContent}></slot>
     `;
   }
   renderClickOverlay() {
-    var t;
-    const e = this.renderSlot("click-content"), o = m`
+    var _a;
+    const slot = this.renderSlot("click-content");
+    const clickOverlay = html`
       <luzmo-overlay
         id="click-overlay"
         ?disabled=${this.disabled || this.clickContent.length === 0}
@@ -103,14 +131,21 @@ class r extends E {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${e}
+        ${slot}
       </luzmo-overlay>
     `;
-    return (t = this.triggeredBy) != null && t.includes("click") ? o : this.clickContent.length === 0 ? e : o;
+    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("click")) {
+      return clickOverlay;
+    }
+    if (this.clickContent.length === 0) {
+      return slot;
+    }
+    return clickOverlay;
   }
   renderHoverOverlay() {
-    var t;
-    const e = this.renderSlot("hover-content"), o = m`
+    var _a;
+    const slot = this.renderSlot("hover-content");
+    const hoverOverlay = html`
       <luzmo-overlay
         id="hover-overlay"
         ?open=${this.open === "hover" && this.hoverContent.length > 0}
@@ -123,14 +158,21 @@ class r extends E {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${e}
+        ${slot}
       </luzmo-overlay>
     `;
-    return (t = this.triggeredBy) != null && t.includes("hover") ? o : this.hoverContent.length === 0 ? e : o;
+    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("hover")) {
+      return hoverOverlay;
+    }
+    if (this.hoverContent.length === 0) {
+      return slot;
+    }
+    return hoverOverlay;
   }
   renderLongpressOverlay() {
-    var t;
-    const e = this.renderSlot("longpress-content"), o = m`
+    var _a;
+    const slot = this.renderSlot("longpress-content");
+    const longpressOverlay = html`
       <luzmo-overlay
         id="longpress-overlay"
         ?disabled=${this.disabled || this.longpressContent.length === 0}
@@ -143,14 +185,20 @@ class r extends E {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${e}
+        ${slot}
       </luzmo-overlay>
       <slot name="longpress-describedby-descriptor"></slot>
     `;
-    return (t = this.triggeredBy) != null && t.includes("longpress") ? o : this.longpressContent.length === 0 ? e : o;
+    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("longpress")) {
+      return longpressOverlay;
+    }
+    if (this.longpressContent.length === 0) {
+      return slot;
+    }
+    return longpressOverlay;
   }
   render() {
-    return m`
+    return html`
       <slot
         id="trigger"
         name="trigger"
@@ -163,184 +211,220 @@ class r extends E {
     ]}
     `;
   }
-  updated(e) {
-    if (super.updated(e), this.disabled && e.has("disabled")) {
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.disabled && changedProperties.has("disabled")) {
       this.open = void 0;
       return;
     }
   }
   async getUpdateComplete() {
-    return await super.getUpdateComplete();
+    const complete = await super.getUpdateComplete();
+    return complete;
   }
 }
-s([
-  c()
-], r.prototype, "content");
-s([
-  c({ attribute: "triggered-by" })
-], r.prototype, "triggeredBy");
-s([
-  c({ reflect: !0 })
-], r.prototype, "placement");
-s([
-  c()
-], r.prototype, "type");
-s([
-  c({ type: Number })
-], r.prototype, "offset");
-s([
-  c({ reflect: !0 })
-], r.prototype, "open");
-s([
-  c({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-s([
-  c({ attribute: "receives-focus" })
-], r.prototype, "receivesFocus");
-s([
-  g()
-], r.prototype, "clickContent");
-s([
-  g()
-], r.prototype, "longpressContent");
-s([
-  g()
-], r.prototype, "hoverContent");
-s([
-  g()
-], r.prototype, "targetContent");
-s([
-  h("#click-overlay", !0)
-], r.prototype, "clickOverlayElement");
-s([
-  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,
-    o,
-    t
+__decorateClass([
+  property()
+], LuzmoOverlayTrigger.prototype, "content");
+__decorateClass([
+  property({ attribute: "triggered-by" })
+], LuzmoOverlayTrigger.prototype, "triggeredBy");
+__decorateClass([
+  property({ reflect: true })
+], LuzmoOverlayTrigger.prototype, "placement");
+__decorateClass([
+  property()
+], LuzmoOverlayTrigger.prototype, "type");
+__decorateClass([
+  property({ type: Number })
+], LuzmoOverlayTrigger.prototype, "offset");
+__decorateClass([
+  property({ reflect: true })
+], LuzmoOverlayTrigger.prototype, "open");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoOverlayTrigger.prototype, "disabled");
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], LuzmoOverlayTrigger.prototype, "receivesFocus");
+__decorateClass([
+  state()
+], LuzmoOverlayTrigger.prototype, "clickContent");
+__decorateClass([
+  state()
+], LuzmoOverlayTrigger.prototype, "longpressContent");
+__decorateClass([
+  state()
+], LuzmoOverlayTrigger.prototype, "hoverContent");
+__decorateClass([
+  state()
+], LuzmoOverlayTrigger.prototype, "targetContent");
+__decorateClass([
+  query("#click-overlay", true)
+], LuzmoOverlayTrigger.prototype, "clickOverlayElement");
+__decorateClass([
+  query("#longpress-overlay", true)
+], LuzmoOverlayTrigger.prototype, "longpressOverlayElement");
+__decorateClass([
+  query("#hover-overlay", true)
+], LuzmoOverlayTrigger.prototype, "hoverOverlayElement");
+function openOverlay(triggerOrContent, interactionOrOptions, content, optionsV1) {
+  return LuzmoOverlay.open(
+    triggerOrContent,
+    interactionOrOptions,
+    content,
+    optionsV1
   );
 }
-class x extends A {
+class SlottableRequestDirective extends AsyncDirective {
   /* c8 ignore next 9 */
-  render(e) {
-    return z;
+  render(_template) {
+    return nothing;
   }
-  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();
+  update(part, [template]) {
+    this.template = template;
+    if (this.target !== part.element) {
+      this.target = part.element;
+      this.renderBefore = this.target.children[0];
+    }
+    this.listenerHost = this.target;
+    this.init();
   }
-  handleSlottableRequest(e) {
-    if (e.target !== e.currentTarget)
+  handleSlottableRequest(event) {
+    if (event.target !== event.currentTarget) {
       return;
-    const o = e.data === y;
-    v(o ? void 0 : this.template(), this.target, {
+    }
+    const willRemoveSlottable = event.data === removeSlottableRequest;
+    render(willRemoveSlottable ? void 0 : this.template(), this.target, {
       renderBefore: this.renderBefore
     });
   }
   init() {
-    var o;
-    (o = this.listeners) == null || o.abort(), this.listeners = new AbortController();
-    const { signal: e } = this.listeners;
+    var _a;
+    (_a = this.listeners) == null ? void 0 : _a.abort();
+    this.listeners = new AbortController();
+    const { signal } = this.listeners;
     this.listenerHost.addEventListener(
       "slottable-request",
-      (t) => this.handleSlottableRequest(t),
-      { signal: e }
+      (event) => this.handleSlottableRequest(event),
+      { signal }
     );
   }
   disconnected() {
-    var e;
-    (e = this.listeners) == null || e.abort();
+    var _a;
+    (_a = this.listeners) == null ? void 0 : _a.abort();
   }
   /* c8 ignore next 3 */
   reconnected() {
     this.init();
   }
 }
-const N = b(x);
-class R extends x {
+const slottableRequest = directive(SlottableRequestDirective);
+class OverlayTriggerDirective extends SlottableRequestDirective {
   constructor() {
-    super(...arguments), this.defaultOptions = {
+    super(...arguments);
+    this.defaultOptions = {
       triggerInteraction: "click",
       overlayOptions: {
         type: "auto",
         offset: 0
       }
-    }, this.options = {
+    };
+    this.options = {
       ...this.defaultOptions.overlayOptions
     };
   }
   /* c8 ignore next 9 */
-  render(e, o) {
-    return z;
+  render(_template, _options) {
+    return nothing;
   }
-  update(e, [o, t]) {
-    var u, d, p;
+  update(part, [template, options]) {
+    var _a, _b, _c;
     this.options = {
       ...this.defaultOptions.overlayOptions,
-      ...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 = (t == null ? void 0 : t.open) ?? !1;
+      ...options == null ? void 0 : options.overlayOptions
+    };
+    this.insertionOptions = options == null ? void 0 : options.insertionOptions;
+    this.template = template;
+    this.host = (_a = part.options) == null ? void 0 : _a.host;
+    let newTarget = false;
+    const triggerInteraction = (options == null ? void 0 : options.triggerInteraction) || this.defaultOptions.triggerInteraction;
+    const newStrategy = InteractionTypes[(_b = this.strategy) == null ? void 0 : _b.type] !== triggerInteraction;
+    if (this.target !== part.element) {
+      this.target = part.element;
+      newTarget = true;
+    }
+    if (newTarget || newStrategy) {
+      (_c = this.strategy) == null ? void 0 : _c.abort();
+      this.strategy = new strategies[triggerInteraction](this.target, {
+        isPersistent: true,
+        handleOverlayReady: (overlay) => {
+          this.listenerHost = this.overlay = overlay;
+          this.init();
+        }
+      });
+    }
+    this.strategy.open = (options == null ? void 0 : options.open) ?? false;
   }
-  handleSlottableRequest(e) {
-    var l, n;
-    if (e.target !== e.currentTarget)
+  handleSlottableRequest(event) {
+    var _a, _b;
+    if (event.target !== event.currentTarget) {
       return;
-    const o = e.data === y, t = {};
-    if (this.host && (t.host = this.host), v(
-      o ? void 0 : this.template(),
+    }
+    const willRemoveSlottable = event.data === removeSlottableRequest;
+    const options = {};
+    if (this.host) {
+      options.host = this.host;
+    }
+    render(
+      willRemoveSlottable ? void 0 : this.template(),
       this.overlay,
-      t
-    ), o)
+      options
+    );
+    if (willRemoveSlottable) {
       this.overlay.remove();
-    else {
-      $.applyOptions(this.overlay, {
+    } else {
+      LuzmoAbstractOverlay.applyOptions(this.overlay, {
         ...this.options,
         trigger: this.target
       });
-      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 insertionEl = typeof ((_a = this.insertionOptions) == null ? void 0 : _a.el) === "function" ? this.insertionOptions.el() : ((_b = this.insertionOptions) == null ? void 0 : _b.el) || this.target;
+      const { where = "afterend" } = this.insertionOptions || {};
+      insertionEl.insertAdjacentElement(where, this.overlay);
     }
   }
 }
-const G = b(R);
-customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", f);
-customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", r);
+const trigger = directive(OverlayTriggerDirective);
+if (!customElements.get("luzmo-overlay")) {
+  customElements.define("luzmo-overlay", LuzmoOverlay);
+}
+if (!customElements.get("luzmo-overlay-trigger")) {
+  customElements.define("luzmo-overlay-trigger", LuzmoOverlayTrigger);
+}
 export {
-  D as ClickController,
-  M as HoverController,
-  J as InteractionController,
-  O as InteractionTypes,
-  K as LONGPRESS_INSTRUCTIONS,
-  Q as LongpressController,
-  $ as LuzmoAbstractOverlay,
-  f as LuzmoOverlay,
-  r as LuzmoOverlayTrigger,
-  R as OverlayTriggerDirective,
-  W as PlacementController,
-  X as SAFARI_FOCUS_RING_CLASS,
-  x as SlottableRequestDirective,
-  ne as SlottableRequestEvent,
-  Y as VirtualTrigger,
-  Z as guaranteedAllTransitionend,
-  ee as lastInteractionType,
-  te as nextFrame,
-  oe as noop,
-  U as openOverlay,
-  re as overlayTimer,
-  le as placementUpdatedSymbol,
-  y as removeSlottableRequest,
-  N as slottableRequest,
-  G as trigger
+  C as ClickController,
+  H as HoverController,
+  b as InteractionController,
+  InteractionTypes,
+  c as LONGPRESS_INSTRUCTIONS,
+  d as LongpressController,
+  LuzmoAbstractOverlay,
+  LuzmoOverlay,
+  LuzmoOverlayTrigger,
+  OverlayTriggerDirective,
+  P as PlacementController,
+  S as SAFARI_FOCUS_RING_CLASS,
+  SlottableRequestDirective,
+  S2 as SlottableRequestEvent,
+  V as VirtualTrigger,
+  g as guaranteedAllTransitionend,
+  l as lastInteractionType,
+  a as nextFrame,
+  n as noop,
+  openOverlay,
+  o as overlayTimer,
+  p as placementUpdatedSymbol,
+  removeSlottableRequest,
+  slottableRequest,
+  trigger
 };