@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/overlay/index.js

@@ -15,332 +15,13 @@
  * 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);
-  }
-};
-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 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 = [];
-  }
-  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: 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 = t : this.open === t && (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);
-  }
-  renderSlot(e) {
-    return m`
-      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
-    `;
-  }
-  renderClickOverlay() {
-    var t;
-    const e = this.renderSlot("click-content"), o = m`
-      <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>
-    `;
-    return (t = this.triggeredBy) != null && t.includes("click") ? o : this.clickContent.length === 0 ? e : o;
-  }
-  renderHoverOverlay() {
-    var t;
-    const e = this.renderSlot("hover-content"), o = m`
-      <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>
-    `;
-    return (t = this.triggeredBy) != null && t.includes("hover") ? o : this.hoverContent.length === 0 ? e : o;
-  }
-  renderLongpressOverlay() {
-    var t;
-    const e = this.renderSlot("longpress-content"), o = m`
-      <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>
-    `;
-    return (t = this.triggeredBy) != null && t.includes("longpress") ? o : this.longpressContent.length === 0 ? e : o;
-  }
-  render() {
-    return m`
-      <slot
-        id="trigger"
-        name="trigger"
-        @slotchange=${this.handleTriggerContent}
-      ></slot>
-      ${[
-      this.renderClickOverlay(),
-      this.renderHoverOverlay(),
-      this.renderLongpressOverlay()
-    ]}
-    `;
-  }
-  updated(e) {
-    if (super.updated(e), this.disabled && e.has("disabled")) {
-      this.open = void 0;
-      return;
-    }
-  }
-  async getUpdateComplete() {
-    return await super.getUpdateComplete();
-  }
-}
-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 x extends A {
-  /* c8 ignore next 9 */
-  render(e) {
-    return z;
-  }
-  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 o = e.data === y;
-    v(o ? 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;
-    this.listenerHost.addEventListener(
-      "slottable-request",
-      (t) => this.handleSlottableRequest(t),
-      { signal: e }
-    );
-  }
-  disconnected() {
-    var e;
-    (e = this.listeners) == null || e.abort();
-  }
-  /* c8 ignore next 3 */
-  reconnected() {
-    this.init();
-  }
-}
-const N = b(x);
-class R 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, o) {
-    return z;
-  }
-  update(e, [o, t]) {
-    var u, d, p;
-    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;
-  }
-  handleSlottableRequest(e) {
-    var l, n;
-    if (e.target !== e.currentTarget)
-      return;
-    const o = e.data === y, t = {};
-    if (this.host && (t.host = this.host), v(
-      o ? void 0 : this.template(),
-      this.overlay,
-      t
-    ), o)
-      this.overlay.remove();
-    else {
-      $.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 G = b(R);
-customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", f);
-customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", r);
-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
-};
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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-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-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--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: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+	}
+})();
+import { n as e, t } from "../slottable-request-event-DZ2Z_BLk.js";
+import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, o as f, p, s as m, t as h, u as g, v as _, y as v } from "../overlay-8tN0KPbR.js";
+import { a as y, i as b, n as x, o as S, r as C, t as w } from "../overlay-CwR_36OV.js";
+export { m as ClickController, f as HoverController, i as InteractionController, u as InteractionTypes, l as LONGPRESS_INSTRUCTIONS, r as LongpressController, c as LuzmoAbstractOverlay, h as LuzmoOverlay, S as LuzmoOverlayTrigger, w as OverlayTriggerDirective, o as PlacementController, g as SAFARI_FOCUS_RING_CLASS, C as SlottableRequestDirective, t as SlottableRequestEvent, d as VirtualTrigger, s as guaranteedAllTransitionend, a as lastInteractionType, n as nextFrame, _ as noop, y as openOverlay, v as overlayTimer, p as placementUpdatedSymbol, e as removeSlottableRequest, b as slottableRequest, x as trigger };

package/components/overlay/overlay.d.ts

@@ -154,7 +154,7 @@ export declare class LuzmoOverlay extends ComputedOverlayBase {
      * @default 'closed'
      */
     get state(): OverlayState;
-    set state(state: OverlayState);
+    set state(nextState: OverlayState);
     _state: OverlayState;
     /**
      * The interaction strategy for opening the overlay.
@@ -334,6 +334,17 @@ export declare class LuzmoOverlay extends ComputedOverlayBase {
      * @param event - The browser's close event.
      */
     protected handleBrowserClose(event: Event): void;
+    /**
+     * Handles the native `<dialog>` cancel event (fired by the browser on Escape).
+     *
+     * For `page` type overlays, prevents the default cancel behavior so the dialog
+     * stays open — matching the spec requirement that page overlays cannot be
+     * dismissed via Escape. For all other types, delegates to `handleBrowserClose`.
+     *
+     * @protected
+     * @param event - The native cancel event from the `<dialog>`.
+     */
+    protected handleDialogCancel(event: Event): void;
     /**
      * Manually keeps the overlay open.
      *

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

@@ -1,7 +1,8 @@
 export declare class VirtualTrigger {
     private x;
     private y;
-    constructor(x: number, y: number);
-    updateBoundingClientRect(x: number, y: number): void;
+    private rectTop?;
+    constructor(x: number, y: number, top?: number);
+    updateBoundingClientRect(x: number, y: number, top?: number): void;
     getBoundingClientRect(): DOMRect;
 }