@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/overlay/index.js

@@ -15,110 +15,82 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-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);
+import { e as f, I as O, s as S, L as $ } from "../overlay-CUKs69yr.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-CUKs69yr.js";
+import { a as E, r as w, x as m, n as c, E as z, B as v } from "../base-CFWO09N1.js";
+import { r as g } from "../state-DwIwYPvt.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-BwIAw5tB.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);
   }
 };
-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;
+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;
 };
-class LuzmoOverlayTrigger extends LuzmoElement {
+class r extends E {
   constructor() {
-    super(...arguments);
-    this.content = "click hover longpress";
-    this.offset = 6;
-    this.disabled = false;
-    this.receivesFocus = "auto";
-    this.clickContent = [];
-    this.longpressContent = [];
-    this.hoverContent = [];
-    this.targetContent = [];
+    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 [unsafeCSS(overlayTriggerStyles)];
+    return [w(F)];
   }
-  getAssignedElementsFromSlot(slot) {
-    return slot.assignedElements({ flatten: true });
+  getAssignedElementsFromSlot(e) {
+    return e.assignedElements({ flatten: !0 });
   }
-  handleTriggerContent(event) {
-    this.targetContent = this.getAssignedElementsFromSlot(event.target);
+  handleTriggerContent(e) {
+    this.targetContent = this.getAssignedElementsFromSlot(e.target);
   }
-  handleSlotContent(event) {
-    switch (event.target.name) {
+  handleSlotContent(e) {
+    switch (e.target.name) {
       case "click-content": {
-        this.clickContent = this.getAssignedElementsFromSlot(event.target);
+        this.clickContent = this.getAssignedElementsFromSlot(e.target);
         break;
       }
       case "longpress-content": {
-        this.longpressContent = this.getAssignedElementsFromSlot(event.target);
+        this.longpressContent = this.getAssignedElementsFromSlot(e.target);
         break;
       }
       case "hover-content": {
-        this.hoverContent = this.getAssignedElementsFromSlot(event.target);
+        this.hoverContent = this.getAssignedElementsFromSlot(e.target);
         break;
       }
     }
   }
-  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 {
+  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
       return;
-    }
-    if (event.newState === "open") {
-      this.open = type;
-    } else if (this.open === type) {
-      this.open = void 0;
-    }
+    e.newState === "open" ? this.open = t : this.open === t && (this.open = void 0);
   }
-  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);
+  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(name) {
-    return html`
-      <slot name=${name} @slotchange=${this.handleSlotContent}></slot>
+  renderSlot(e) {
+    return m`
+      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
     `;
   }
   renderClickOverlay() {
-    var _a;
-    const slot = this.renderSlot("click-content");
-    const clickOverlay = html`
+    var t;
+    const e = this.renderSlot("click-content"), o = m`
       <luzmo-overlay
         id="click-overlay"
         ?disabled=${this.disabled || this.clickContent.length === 0}
@@ -131,21 +103,14 @@ class LuzmoOverlayTrigger extends LuzmoElement {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${slot}
+        ${e}
       </luzmo-overlay>
     `;
-    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("click")) {
-      return clickOverlay;
-    }
-    if (this.clickContent.length === 0) {
-      return slot;
-    }
-    return clickOverlay;
+    return (t = this.triggeredBy) != null && t.includes("click") ? o : this.clickContent.length === 0 ? e : o;
   }
   renderHoverOverlay() {
-    var _a;
-    const slot = this.renderSlot("hover-content");
-    const hoverOverlay = html`
+    var t;
+    const e = this.renderSlot("hover-content"), o = m`
       <luzmo-overlay
         id="hover-overlay"
         ?open=${this.open === "hover" && this.hoverContent.length > 0}
@@ -158,21 +123,14 @@ class LuzmoOverlayTrigger extends LuzmoElement {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${slot}
+        ${e}
       </luzmo-overlay>
     `;
-    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("hover")) {
-      return hoverOverlay;
-    }
-    if (this.hoverContent.length === 0) {
-      return slot;
-    }
-    return hoverOverlay;
+    return (t = this.triggeredBy) != null && t.includes("hover") ? o : this.hoverContent.length === 0 ? e : o;
   }
   renderLongpressOverlay() {
-    var _a;
-    const slot = this.renderSlot("longpress-content");
-    const longpressOverlay = html`
+    var t;
+    const e = this.renderSlot("longpress-content"), o = m`
       <luzmo-overlay
         id="longpress-overlay"
         ?disabled=${this.disabled || this.longpressContent.length === 0}
@@ -185,20 +143,14 @@ class LuzmoOverlayTrigger extends LuzmoElement {
         @beforetoggle=${this.handleBeforetoggle}
         .receivesFocus=${this.receivesFocus}
       >
-        ${slot}
+        ${e}
       </luzmo-overlay>
       <slot name="longpress-describedby-descriptor"></slot>
     `;
-    if ((_a = this.triggeredBy) == null ? void 0 : _a.includes("longpress")) {
-      return longpressOverlay;
-    }
-    if (this.longpressContent.length === 0) {
-      return slot;
-    }
-    return longpressOverlay;
+    return (t = this.triggeredBy) != null && t.includes("longpress") ? o : this.longpressContent.length === 0 ? e : o;
   }
   render() {
-    return html`
+    return m`
       <slot
         id="trigger"
         name="trigger"
@@ -211,220 +163,184 @@ class LuzmoOverlayTrigger extends LuzmoElement {
     ]}
     `;
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (this.disabled && changedProperties.has("disabled")) {
+  updated(e) {
+    if (super.updated(e), this.disabled && e.has("disabled")) {
       this.open = void 0;
       return;
     }
   }
   async getUpdateComplete() {
-    const complete = await super.getUpdateComplete();
-    return complete;
+    return await super.getUpdateComplete();
   }
 }
-__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
+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
   );
 }
-class SlottableRequestDirective extends AsyncDirective {
+class x extends A {
   /* c8 ignore next 9 */
-  render(_template) {
-    return nothing;
+  render(e) {
+    return z;
   }
-  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();
+  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(event) {
-    if (event.target !== event.currentTarget) {
+  handleSlottableRequest(e) {
+    if (e.target !== e.currentTarget)
       return;
-    }
-    const willRemoveSlottable = event.data === removeSlottableRequest;
-    render(willRemoveSlottable ? void 0 : this.template(), this.target, {
+    const o = e.data === y;
+    v(o ? void 0 : this.template(), this.target, {
       renderBefore: this.renderBefore
     });
   }
   init() {
-    var _a;
-    (_a = this.listeners) == null ? void 0 : _a.abort();
-    this.listeners = new AbortController();
-    const { signal } = this.listeners;
+    var o;
+    (o = this.listeners) == null || o.abort(), this.listeners = new AbortController();
+    const { signal: e } = this.listeners;
     this.listenerHost.addEventListener(
       "slottable-request",
-      (event) => this.handleSlottableRequest(event),
-      { signal }
+      (t) => this.handleSlottableRequest(t),
+      { signal: e }
     );
   }
   disconnected() {
-    var _a;
-    (_a = this.listeners) == null ? void 0 : _a.abort();
+    var e;
+    (e = this.listeners) == null || e.abort();
   }
   /* c8 ignore next 3 */
   reconnected() {
     this.init();
   }
 }
-const slottableRequest = directive(SlottableRequestDirective);
-class OverlayTriggerDirective extends SlottableRequestDirective {
+const N = b(x);
+class R extends x {
   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(_template, _options) {
-    return nothing;
+  render(e, o) {
+    return z;
   }
-  update(part, [template, options]) {
-    var _a, _b, _c;
+  update(e, [o, t]) {
+    var u, d, p;
     this.options = {
       ...this.defaultOptions.overlayOptions,
-      ...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;
+      ...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;
   }
-  handleSlottableRequest(event) {
-    var _a, _b;
-    if (event.target !== event.currentTarget) {
+  handleSlottableRequest(e) {
+    var l, n;
+    if (e.target !== e.currentTarget)
       return;
-    }
-    const willRemoveSlottable = event.data === removeSlottableRequest;
-    const options = {};
-    if (this.host) {
-      options.host = this.host;
-    }
-    render(
-      willRemoveSlottable ? 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,
-      options
-    );
-    if (willRemoveSlottable) {
+      t
+    ), o)
       this.overlay.remove();
-    } else {
-      LuzmoAbstractOverlay.applyOptions(this.overlay, {
+    else {
+      $.applyOptions(this.overlay, {
         ...this.options,
         trigger: this.target
       });
-      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 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 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);
-}
+const G = b(R);
+customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", f);
+customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", r);
 export {
-  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
+  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
 };