@luzmo/lucero 2.2.1 → 2.4.0

package/components/{overlay-CyBsHuOL.js → overlay-DpHIYJtd.js}

@@ -1,6 +1,6 @@
 /*! * Lucero - The design system for Luzmo.
  * 
- * Copyright © 2025 Luzmo
+ * Copyright © 2026 Luzmo
  * All rights reserved.
  * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
  * This license allows users with a current active Luzmo account to use Lucero.
@@ -16,6 +16,7 @@
  * SOFTWARE.
  * */
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import "./tokens.js";
 import { n as t, t as n } from "./decorate-CkCg3wfh.js";
 import { t as r } from "./condition-attribute-with-id-BdnTdWKz.js";
 import { t as i } from "./random-id-CiMDyX7v.js";
@@ -23,20 +24,21 @@ import { n as a, t as o } from "./element-resolution-gap51AVo.js";
 import { n as s, t as c } from "./slottable-request-event-MRSZbgTu.js";
 import { n as l } from "./focusable-selectors-BWpiuXz5.js";
 import { a as u, t as d, u as f } from "./platform-Ce9pNsR9.js";
-import { html as p, unsafeCSS as m } from "lit";
-import { property as h, query as g, queryAssignedElements as _, state as ee } from "lit/decorators.js";
-import { ifDefined as v } from "lit/directives/if-defined.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { arrow as te, autoUpdate as b, computePosition as x, flip as S, offset as ne, shift as re, size as ie } from "@floating-ui/dom";
+import { html as p, nothing as m, render as h, unsafeCSS as g } from "lit";
+import { property as _, query as v, queryAssignedElements as ee, state as y } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { styleMap as x } from "lit/directives/style-map.js";
+import { arrow as te, autoUpdate as S, computePosition as ne, flip as re, offset as ie, shift as ae, size as oe } from "@floating-ui/dom";
+import { AsyncDirective as se, directive as C } from "lit/async-directive.js";
 //#region src/utils/reparent-child.ts
-function ae(e, t, n = []) {
+function ce(e, t, n = []) {
 	for (let [r, i] of t.entries()) {
 		let t = e[r], a = t.parentElement || t.getRootNode();
 		n[r] && n[r](i), a && a !== t && t.replaceWith(i), delete e[r];
 	}
 	return t;
 }
-var oe = (e, t, { position: n, prepareCallback: r } = { position: "beforeend" }) => {
+var le = (e, t, { position: n, prepareCallback: r } = { position: "beforeend" }) => {
 	let { length: i } = e;
 	if (i === 0) return () => e;
 	let a = 1, o = 0;
@@ -53,11 +55,11 @@ var oe = (e, t, { position: n, prepareCallback: r } = { position: "beforeend" })
 		u && u !== i && i.replaceWith(s[o]), t.insertAdjacentElement(n, i), o += a;
 	} while (--i > 0);
 	return function() {
-		return ae(s, e, c);
+		return ce(s, e, c);
 	};
-}, se = 1e3, C = 1e3, w = new class {
+}, ue = 1e3, de = 1e3, w = new class {
 	constructor(e = {}) {
-		this.warmUpDelay = se, this.coolDownDelay = C, this.isWarm = !1, this.timeout = 0, Object.assign(this, e);
+		this.warmUpDelay = ue, this.coolDownDelay = de, this.isWarm = !1, this.timeout = 0, Object.assign(this, e);
 	}
 	openTimer(e) {
 		if (this.cancelCooldownTimer(), !this.component || e !== this.component) return this.component && (this.close(this.component), this.cancelCooldownTimer()), this.component = e, this.isWarm ? Promise.resolve(!1) : (this.promise = new Promise((e) => {
@@ -161,8 +163,8 @@ var O = class e extends t {
 		document.dispatchEvent(e);
 	}
 	static async open(t, n, r, i) {
-		await Promise.resolve().then(() => Z);
-		let a = arguments.length === 2, o = r || t, s = new this(), c = !1, l = oe([o], s, {
+		await Promise.resolve().then(() => Ce);
+		let a = arguments.length === 2, o = r || t, s = new this(), c = !1, l = le([o], s, {
 			position: "beforeend",
 			prepareCallback: (e) => {
 				let t = e.slot;
@@ -246,7 +248,7 @@ var O = class e extends t {
 };
 //#endregion
 //#region src/components/overlay/overlay-dialog.ts
-function ce(e) {
+function fe(e) {
 	class t extends e {
 		async manageDialogOpen() {
 			let e = this.open;
@@ -307,7 +309,7 @@ function ce(e) {
 }
 //#endregion
 //#region src/components/overlay/overlay-no-popover.ts
-function le(e) {
+function pe(e) {
 	class t extends e {
 		async managePopoverOpen() {
 			await this.managePosition();
@@ -356,7 +358,7 @@ function le(e) {
 }
 //#endregion
 //#region src/components/overlay/overlay-popover.ts
-var ue = typeof CSS < "u" && CSS.supports("(overlay: auto)");
+var me = typeof CSS < "u" && CSS.supports("(overlay: auto)");
 function F(e) {
 	let t = !1;
 	try {
@@ -368,7 +370,7 @@ function F(e) {
 	} catch {}
 	return t || n;
 }
-function de(e) {
+function he(e) {
 	class t extends e {
 		async manageDelay(e) {
 			if (e === !1 || e !== this.open) {
@@ -400,7 +402,7 @@ function de(e) {
 			e && this.open === e && !t && !n && this.isConnected && (this.dialogEl.showPopover(), this.managePosition());
 		}
 		async ensureOnDOM(e) {
-			ue || await this.shouldHidePopover(e), this.shouldShowPopover(e), await D();
+			me || await this.shouldHidePopover(e), this.shouldShowPopover(e), await D();
 		}
 		makeTransition(e) {
 			if (this.open !== e) return null;
@@ -452,7 +454,7 @@ function de(e) {
 }
 //#endregion
 //#region src/components/overlay/overlay-stack.ts
-var fe = typeof document < "u" && "showPopover" in document.createElement("div"), I = new class {
+var ge = typeof document < "u" && "showPopover" in document.createElement("div"), I = new class {
 	get document() {
 		return this.root.ownerDocument || document;
 	}
@@ -492,7 +494,7 @@ var fe = typeof document < "u" && "showPopover" in document.createElement("div")
 				this.closeOverlay(t);
 				return;
 			}
-			fe || t && this.closeOverlay(t);
+			ge || t && this.closeOverlay(t);
 		}, typeof document < "u" && this.bindEvents();
 	}
 	bindEvents() {
@@ -538,15 +540,15 @@ var fe = typeof document < "u" && "showPopover" in document.createElement("div")
 	remove(e) {
 		this.closeOverlay(e);
 	}
-}(), L = ":host{pointer-events:none;--luzmo-overlay-animation-distance:.5rem;display:contents}:host(:has(>luzmo-tooltip)){--luzmo-overlay-animation-distance:var(--luzmo-tooltip-animation-distance,4px)}.dialog{box-sizing:border-box;--luzmo-overlay-open:true;background:0 0;border:0;max-width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}:host(:not([open])) .dialog{--luzmo-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(luzmo-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}}@supports (overlay:auto){.dialog{transition:all var(--luzmo-overlay-animation-duration,.13s), translate 0s, display var(--luzmo-overlay-animation-duration,.13s);transition-behavior:allow-discrete;display:none}:is(.dialog:popover-open,.dialog:modal){display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--luzmo-overlay-z-index-base,1000) + var(--luzmo-overlay-open-count))}}";
+}(), _e = ":host{pointer-events:none;--luzmo-overlay-animation-distance:.5rem;display:contents}:host(:has(>luzmo-tooltip)){--luzmo-overlay-animation-distance:var(--luzmo-tooltip-animation-distance,4px)}.dialog{box-sizing:border-box;--luzmo-overlay-open:true;background:0 0;border:0;max-width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}:host(:not([open])) .dialog{--luzmo-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:\"\";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(luzmo-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--luzmo-popover-filter:drop-shadow(0px 2px 6px var(--luzmo-shadow-color))}}@supports (overlay:auto){.dialog{transition:all var(--luzmo-overlay-animation-duration,.13s), translate 0s, display var(--luzmo-overlay-animation-duration,.13s);transition-behavior:allow-discrete;display:none}:is(.dialog:popover-open,.dialog:modal){display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--luzmo-overlay-z-index-base,1000) + var(--luzmo-overlay-open-count))}}";
 //#endregion
 //#region src/components/overlay/placement-controller.ts
-function R(e) {
+function L(e) {
 	if (e === void 0) return 0;
 	let t = window.devicePixelRatio || 1;
 	return Math.round(e * t) / t;
 }
-var z = 8, B = 100, pe = (e) => ({
+var R = 8, ve = 100, ye = (e) => ({
 	left: [
 		"right",
 		"bottom",
@@ -607,10 +609,10 @@ var z = 8, B = 100, pe = (e) => ({
 		"left",
 		"right"
 	]
-})[e] ?? [e], me = Symbol("placement updated"), V = class {
+})[e] ?? [e], be = Symbol("placement updated"), z = class {
 	constructor(e) {
-		this.originalPlacements = /* @__PURE__ */ new WeakMap(), this.placementGeneration = 0, this.allowPlacementUpdate = !1, this.closeForAncestorUpdate = () => {
-			!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup && this.target.dispatchEvent(new Event("close", { bubbles: !0 })), this.allowPlacementUpdate = !1;
+		this.originalPlacements = /* @__PURE__ */ new WeakMap(), this.placementGeneration = 0, this.allowPlacementUpdate = !1, this.closeForAncestorUpdate = (e) => {
+			f() && e?.currentTarget === window.visualViewport || (!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup && this.target.dispatchEvent(new Event("close", { bubbles: !0 })), this.allowPlacementUpdate = !1);
 		}, this.updatePlacement = () => {
 			this.computePlacement();
 		}, this.resetOverlayPosition = () => {
@@ -619,11 +621,11 @@ var z = 8, B = 100, pe = (e) => ({
 	}
 	placeOverlay(e = this.target, t = this.options) {
 		if (this.cleanup?.(), this.cleanup = void 0, this.target = e, this.options = t, !e || !t) return;
-		let n = b(t.trigger, e, this.closeForAncestorUpdate, {
+		let n = S(t.trigger, e, this.closeForAncestorUpdate, {
 			ancestorResize: !1,
 			elementResize: !1,
 			layoutShift: !1
-		}), r = b(t.trigger, e, this.updatePlacement, { ancestorScroll: !1 }), i = window.visualViewport, a = 0, o = !1, s = () => {
+		}), r = S(t.trigger, e, this.updatePlacement, { ancestorScroll: !1 }), i = window.visualViewport, a = 0, o = !1, s = () => {
 			o || a || (a = requestAnimationFrame(() => {
 				a = 0, !o && this.updatePlacement();
 			}));
@@ -640,20 +642,20 @@ var z = 8, B = 100, pe = (e) => ({
 	async computePlacement() {
 		let { options: e, target: t } = this, n = this.placementGeneration, r = () => this.placementGeneration === n && !!this.target && this.target === t;
 		if (await (document.fonts ? document.fonts.ready : Promise.resolve()), !r() || f() && (await new Promise((e) => requestAnimationFrame(e)), !r())) return;
-		let i = e.trigger instanceof HTMLElement ? S() : S({
-			padding: z,
-			fallbackPlacements: pe(e.placement)
+		let i = e.trigger instanceof HTMLElement ? re() : re({
+			padding: R,
+			fallbackPlacements: ye(e.placement)
 		}), [a = 0, o = 0] = Array.isArray(e?.offset) ? e.offset : [e.offset, 0], s = this.host.elements.find((e) => e.tipElement)?.tipElement, c = [
-			ne({
+			ie({
 				mainAxis: a,
 				crossAxis: o
 			}),
-			re({ padding: z }),
+			ae({ padding: R }),
 			i,
-			ie({
-				padding: z,
+			oe({
+				padding: R,
 				apply: ({ availableWidth: e, availableHeight: n, rects: { floating: r } }) => {
-					let i = Math.max(B, Math.floor(n)), a = r.height;
+					let i = Math.max(ve, Math.floor(n)), a = r.height;
 					this.initialHeight = this.isConstrained && this.initialHeight || a, this.isConstrained = a < this.initialHeight || i <= a;
 					let o = this.isConstrained ? `${i}px` : "";
 					Object.assign(t.style, {
@@ -664,9 +666,9 @@ var z = 8, B = 100, pe = (e) => ({
 			}),
 			...s ? [te({
 				element: s,
-				padding: e.tipPadding || z
+				padding: e.tipPadding || R
 			})] : []
-		], { x: l, y: u, placement: d, middlewareData: p } = await x(e.trigger, t, {
+		], { x: l, y: u, placement: d, middlewareData: p } = await ne(e.trigger, t, {
 			placement: e.placement,
 			middleware: c,
 			strategy: "fixed"
@@ -676,7 +678,7 @@ var z = 8, B = 100, pe = (e) => ({
 		if (g && f() && (m -= g.offsetLeft, h -= g.offsetTop), Object.assign(t.style, {
 			top: "0px",
 			left: "0px",
-			translate: `${R(m)}px ${R(h)}px`
+			translate: `${L(m)}px ${L(h)}px`
 		}), t.setAttribute("actual-placement", d), this.host.elements?.forEach((e) => {
 			this.originalPlacements.has(e) || this.originalPlacements.set(e, e.getAttribute("placement")), e.setAttribute("placement", d);
 		}), s && p.arrow) {
@@ -684,7 +686,7 @@ var z = 8, B = 100, pe = (e) => ({
 			Object.assign(s.style, {
 				top: d.startsWith("right") || d.startsWith("left") ? "0px" : "",
 				left: d.startsWith("bottom") || d.startsWith("top") ? "0px" : "",
-				translate: `${R(e)}px ${R(t)}px`
+				translate: `${L(e)}px ${L(t)}px`
 			});
 		}
 	}
@@ -700,9 +702,9 @@ var z = 8, B = 100, pe = (e) => ({
 	hostDisconnected() {
 		this.cleanup?.(), this.cleanup = void 0, document.removeEventListener("luzmo-update-overlays", this.resetOverlayPosition);
 	}
-}, H = /* @__PURE__ */ function(e) {
+}, B = /* @__PURE__ */ function(e) {
 	return e.click = "click", e.hover = "hover", e.longpress = "longpress", e;
-}({}), U = Symbol("lastInteractionType"), W = "remove-focus-ring-safari-hack", G = class {
+}({}), V = Symbol("lastInteractionType"), H = "remove-focus-ring-safari-hack", U = class {
 	get activelyOpening() {
 		return !1;
 	}
@@ -712,11 +714,11 @@ var z = 8, B = 100, pe = (e) => ({
 	set open(e) {
 		if (e !== this.open) {
 			if (this.isLazilyOpen = e, this.overlay) {
-				this.overlay.open = e, this.target[U] = this.type;
+				this.overlay.open = e, this.target[V] = this.type;
 				return;
 			}
 			e && import("./overlay/index.js").then(() => {
-				this.overlay = document.createElement("luzmo-overlay"), this.overlay.open = !0, this.target[U] = this.type;
+				this.overlay = document.createElement("luzmo-overlay"), this.overlay.open = !0, this.target[V] = this.type;
 			});
 		}
 	}
@@ -745,9 +747,9 @@ var z = 8, B = 100, pe = (e) => ({
 	hostDisconnected() {
 		this.isPersistent || this.abort();
 	}
-}, K = class extends G {
+}, W = class extends U {
 	constructor(...e) {
-		super(...e), this.type = H.click, this.preventNextToggle = !1;
+		super(...e), this.type = B.click, this.preventNextToggle = !1;
 	}
 	handleClick() {
 		this.preventNextToggle || (this.open = !this.open), this.preventNextToggle = !1;
@@ -760,17 +762,17 @@ var z = 8, B = 100, pe = (e) => ({
 		let { signal: e } = this.abortController;
 		this.target.addEventListener("click", () => this.handleClick(), { signal: e }), this.target.addEventListener("pointerdown", () => this.handlePointerdown(), { signal: e });
 	}
-}, he = 300, q = class extends G {
+}, xe = 300, G = class extends U {
 	constructor(...e) {
-		super(...e), this.type = H.hover, this.elementIds = [], this.focusedin = !1, this.pointerentered = !1;
+		super(...e), this.type = B.hover, this.elementIds = [], this.focusedin = !1, this.pointerentered = !1;
 	}
 	handleKeyup(e) {
 		(e.code === "Tab" || e.code === "Escape") && (this.open = !0, this.removeSafariFocusRingClass());
 	}
 	handleTargetFocusin() {
 		if (this.target.matches(":focus-visible")) {
-			if (f() && this.target[U] === H.click) {
-				this.target.classList.add(W);
+			if (f() && this.target[V] === B.click) {
+				this.target.classList.add(H);
 				return;
 			}
 			this.open = !0, this.focusedin = !0, this.removeSafariFocusRingClass();
@@ -817,7 +819,7 @@ var z = 8, B = 100, pe = (e) => ({
 		let e = this.target;
 		this.focusedin && e.matches(":focus-visible") || (this.hoverTimeout = setTimeout(() => {
 			this.open = !1;
-		}, he));
+		}, xe));
 	}
 	init() {
 		this.abortController?.abort(), this.abortController = new AbortController();
@@ -830,15 +832,15 @@ var z = 8, B = 100, pe = (e) => ({
 		this.overlay.addEventListener("pointerenter", () => this.handleHostPointerenter(), { signal: e }), this.overlay.addEventListener("pointerleave", () => this.handleHostPointerleave(), { signal: e });
 	}
 	removeSafariFocusRingClass() {
-		f() && this.target.classList.contains("remove-focus-ring-safari-hack") && this.target.classList.remove(W);
+		f() && this.target.classList.contains("remove-focus-ring-safari-hack") && this.target.classList.remove(H);
 	}
-}, ge = 300, J = {
+}, Se = 300, K = {
 	touch: "Double tap and long press for additional options",
 	keyboard: "Press Space or Alt+Down Arrow for additional options",
 	mouse: "Click and hold for additional options"
-}, Y = class extends G {
+}, q = class extends U {
 	constructor(...e) {
-		super(...e), this.type = H.longpress, this.longpressState = null, this.releaseDescription = T, this.handlePointerup = () => {
+		super(...e), this.type = B.longpress, this.longpressState = null, this.releaseDescription = T, this.handlePointerup = () => {
 			clearTimeout(this.timeout), this.target && (this.longpressState = this.overlay?.state === "opening" ? "pressed" : null, document.removeEventListener("pointerup", this.handlePointerup), document.removeEventListener("pointercancel", this.handlePointerup));
 		};
 	}
@@ -855,7 +857,7 @@ var z = 8, B = 100, pe = (e) => ({
 				composed: !0,
 				detail: { source: "pointer" }
 			}));
-		}, ge)));
+		}, Se)));
 	}
 	handleKeydown(e) {
 		let { code: t, altKey: n } = e;
@@ -877,7 +879,7 @@ var z = 8, B = 100, pe = (e) => ({
 	prepareDescription(e) {
 		if (this.releaseDescription !== T || this.overlay.elements.length === 0) return;
 		let t = document.createElement("div");
-		t.id = `longpress-describedby-descriptor-${i()}`, t.textContent = J[u() || d() ? "touch" : "keyboard"], t.slot = "longpress-describedby-descriptor";
+		t.id = `longpress-describedby-descriptor-${i()}`, t.textContent = K[u() || d() ? "touch" : "keyboard"], t.slot = "longpress-describedby-descriptor";
 		let n = e.getRootNode();
 		n === this.overlay.getRootNode() ? this.overlay.append(t) : (t.hidden = !("host" in n), e.after(t));
 		let a = r(e, "aria-describedby", [t.id]);
@@ -893,13 +895,13 @@ var z = 8, B = 100, pe = (e) => ({
 		let { signal: e } = this.abortController;
 		this.target.addEventListener("longpress", () => this.handleLongpress(), { signal: e }), this.target.addEventListener("pointerdown", (e) => this.handlePointerdown(e), { signal: e }), this.prepareDescription(this.target), !this.target.holdAffordance && (this.target.addEventListener("keydown", (e) => this.handleKeydown(e), { signal: e }), this.target.addEventListener("keyup", (e) => this.handleKeyup(e), { signal: e }));
 	}
-}, X = {
-	click: K,
-	longpress: Y,
-	hover: q
-}, Z = /* @__PURE__ */ e({ LuzmoOverlay: () => $ }), _e = typeof document < "u" && "showPopover" in document.createElement("div"), Q = ce(O);
-Q = _e ? de(Q) : le(Q);
-var $ = class e extends Q {
+}, J = {
+	click: W,
+	longpress: q,
+	hover: G
+}, Ce = /* @__PURE__ */ e({ LuzmoOverlay: () => X }), we = typeof document < "u" && "showPopover" in document.createElement("div"), Y = fe(O);
+Y = we ? he(Y) : pe(Y);
+var X = class e extends Y {
 	constructor(...e) {
 		super(...e), this._delayed = !1, this._disabled = !1, this.offset = 0, this._open = !1, this.lastRequestSlottableState = !1, this.receivesFocus = "auto", this._state = "closed", this.triggerElement = null, this.type = "auto", this.wasOpen = !1, this.closeOnFocusOut = (e) => {
 			if (!e.relatedTarget) return;
@@ -913,7 +915,7 @@ var $ = class e extends Q {
 		};
 	}
 	static {
-		this.styles = [m(L)];
+		this.styles = [g(_e)];
 	}
 	get delayed() {
 		return this.elements.at(-1)?.hasAttribute("delayed") || this._delayed;
@@ -931,7 +933,7 @@ var $ = class e extends Q {
 		return !!this.triggerElement && !(this.triggerElement instanceof P);
 	}
 	get placementController() {
-		return this._placementController ||= new V(this), this._placementController;
+		return this._placementController ||= new z(this), this._placementController;
 	}
 	get open() {
 		return this._open;
@@ -1014,7 +1016,7 @@ var $ = class e extends Q {
 		}
 	}
 	bindEvents() {
-		this.strategy?.abort(), this.strategy = void 0, this.hasNonVirtualTrigger && this.triggerInteraction && (this.strategy = new X[this.triggerInteraction](this.triggerElement, { overlay: this }));
+		this.strategy?.abort(), this.strategy = void 0, this.hasNonVirtualTrigger && this.triggerInteraction && (this.strategy = new J[this.triggerInteraction](this.triggerElement, { overlay: this }));
 	}
 	handleBeforetoggle(e) {
 		e.newState !== "open" && this.handleBrowserClose(e);
@@ -1068,8 +1070,8 @@ var $ = class e extends Q {
       <dialog
         class="dialog"
         part="dialog"
-        placement=${v(this.requiresPositioning ? this.placement || "right" : void 0)}
-        style=${y(this.dialogStyleMap)}
+        placement=${b(this.requiresPositioning ? this.placement || "right" : void 0)}
+        style=${x(this.dialogStyleMap)}
         @close=${this.handleBrowserClose}
         @cancel=${this.handleDialogCancel}
         @beforetoggle=${this.handleBeforetoggle}
@@ -1084,9 +1086,9 @@ var $ = class e extends Q {
       <div
         class="dialog"
         part="dialog"
-        placement=${v(this.requiresPositioning ? this.placement || "right" : void 0)}
-        popover=${v(this.popoverValue)}
-        style=${y(this.dialogStyleMap)}
+        placement=${b(this.requiresPositioning ? this.placement || "right" : void 0)}
+        popover=${b(this.popoverValue)}
+        style=${x(this.dialogStyleMap)}
         @beforetoggle=${this.handleBeforetoggle}
         @close=${this.handleBrowserClose}
         ?is-visible=${this.state !== "closed"}
@@ -1112,15 +1114,218 @@ var $ = class e extends Q {
 		this.strategy?.releaseDescription(), this.open = !1, super.disconnectedCallback();
 	}
 };
-n([h({ type: Boolean })], $.prototype, "delayed", null), n([g(".dialog")], $.prototype, "dialogEl", void 0), n([h({ type: Boolean })], $.prototype, "disabled", null), n([_({
+n([_({ type: Boolean })], X.prototype, "delayed", null), n([v(".dialog")], X.prototype, "dialogEl", void 0), n([_({ type: Boolean })], X.prototype, "disabled", null), n([ee({
 	flatten: !0,
 	selector: ":not([slot=\"longpress-describedby-descriptor\"], slot)"
-})], $.prototype, "elements", void 0), n([h({ type: Number })], $.prototype, "offset", void 0), n([h({
+})], X.prototype, "elements", void 0), n([_({ type: Number })], X.prototype, "offset", void 0), n([_({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "open", null), n([h()], $.prototype, "placement", void 0), n([h({ attribute: "receives-focus" })], $.prototype, "receivesFocus", void 0), n([g("slot")], $.prototype, "slotEl", void 0), n([ee()], $.prototype, "state", null), n([h({
+})], X.prototype, "open", null), n([_()], X.prototype, "placement", void 0), n([_({ attribute: "receives-focus" })], X.prototype, "receivesFocus", void 0), n([v("slot")], X.prototype, "slotEl", void 0), n([y()], X.prototype, "state", null), n([_({
 	type: Number,
 	attribute: "tip-padding"
-})], $.prototype, "tipPadding", void 0), n([h()], $.prototype, "trigger", void 0), n([h({ attribute: !1 })], $.prototype, "triggerElement", void 0), n([h({ attribute: !1 })], $.prototype, "triggerInteraction", void 0), n([h()], $.prototype, "type", void 0);
+})], X.prototype, "tipPadding", void 0), n([_()], X.prototype, "trigger", void 0), n([_({ attribute: !1 })], X.prototype, "triggerElement", void 0), n([_({ attribute: !1 })], X.prototype, "triggerInteraction", void 0), n([_()], X.prototype, "type", void 0);
+//#endregion
+//#region src/components/overlay/overlay-trigger.module.scss?inline
+var Te = ":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}", Z = class extends t {
+	constructor(...e) {
+		super(...e), 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 [g(Te)];
+	}
+	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) {
+		let { target: t } = e, n;
+		if (t === this.clickOverlayElement) n = "click";
+		else if (t === this.longpressOverlayElement) n = "longpress";
+		else if (t === this.hoverOverlayElement) n = "hover";
+		else return;
+		e.newState === "open" ? this.open = n : this.open === n && (this.open = void 0);
+	}
+	update(e) {
+		e.has("clickContent") && (this.clickPlacement = this.clickContent[0]?.getAttribute("placement") || this.clickContent[0]?.getAttribute("direction") || void 0), e.has("hoverContent") && (this.hoverPlacement = this.hoverContent[0]?.getAttribute("placement") || this.hoverContent[0]?.getAttribute("direction") || void 0), e.has("longpressContent") && (this.longpressPlacement = this.longpressContent[0]?.getAttribute("placement") || this.longpressContent[0]?.getAttribute("direction") || void 0), super.update(e);
+	}
+	renderSlot(e) {
+		return p`
+      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
+    `;
+	}
+	renderClickOverlay() {
+		let e = this.renderSlot("click-content"), t = p`
+      <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 this.triggeredBy?.includes("click") ? t : this.clickContent.length === 0 ? e : t;
+	}
+	renderHoverOverlay() {
+		let e = this.renderSlot("hover-content"), t = p`
+      <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 this.triggeredBy?.includes("hover") ? t : this.hoverContent.length === 0 ? e : t;
+	}
+	renderLongpressOverlay() {
+		let e = this.renderSlot("longpress-content"), t = p`
+      <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 this.triggeredBy?.includes("longpress") ? t : this.longpressContent.length === 0 ? e : t;
+	}
+	render() {
+		return p`
+      <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();
+	}
+};
+n([_()], Z.prototype, "content", void 0), n([_({ attribute: "triggered-by" })], Z.prototype, "triggeredBy", void 0), n([_({ reflect: !0 })], Z.prototype, "placement", void 0), n([_()], Z.prototype, "type", void 0), n([_({ type: Number })], Z.prototype, "offset", void 0), n([_({ reflect: !0 })], Z.prototype, "open", void 0), n([_({
+	type: Boolean,
+	reflect: !0
+})], Z.prototype, "disabled", void 0), n([_({ attribute: "receives-focus" })], Z.prototype, "receivesFocus", void 0), n([y()], Z.prototype, "clickContent", void 0), n([y()], Z.prototype, "longpressContent", void 0), n([y()], Z.prototype, "hoverContent", void 0), n([y()], Z.prototype, "targetContent", void 0), n([v("#click-overlay", !0)], Z.prototype, "clickOverlayElement", void 0), n([v("#longpress-overlay", !0)], Z.prototype, "longpressOverlayElement", void 0), n([v("#hover-overlay", !0)], Z.prototype, "hoverOverlayElement", void 0);
+//#endregion
+//#region src/components/overlay/loader.ts
+function Ee(e, t, n, r) {
+	return X.open(e, t, n, r);
+}
+//#endregion
+//#region src/components/overlay/slottable-request-directive.ts
+var Q = class extends se {
+	/* c8 ignore next 9 */
+	render(e) {
+		return m;
+	}
+	update(e, [t]) {
+		this.template = t, this.target !== e.element && (this.target = e.element, this.renderBefore = this.target.children[0]), this.listenerHost = this.target, this.init();
+	}
+	handleSlottableRequest(e) {
+		e.target === e.currentTarget && h(e.data === s ? void 0 : this.template(), this.target, { renderBefore: this.renderBefore });
+	}
+	init() {
+		this.listeners?.abort(), this.listeners = new AbortController();
+		let { signal: e } = this.listeners;
+		this.listenerHost.addEventListener("slottable-request", (e) => this.handleSlottableRequest(e), { signal: e });
+	}
+	disconnected() {
+		this.listeners?.abort();
+	}
+	/* c8 ignore next 3 */
+	reconnected() {
+		this.init();
+	}
+}, De = C(Q), $ = class extends Q {
+	constructor(...e) {
+		super(...e), this.defaultOptions = {
+			triggerInteraction: "click",
+			overlayOptions: {
+				type: "auto",
+				offset: 0
+			}
+		}, this.options = { ...this.defaultOptions.overlayOptions };
+	}
+	/* c8 ignore next 9 */
+	render(e, t) {
+		return m;
+	}
+	update(e, [t, n]) {
+		this.options = {
+			...this.defaultOptions.overlayOptions,
+			...n?.overlayOptions
+		}, this.insertionOptions = n?.insertionOptions, this.template = t, this.host = e.options?.host;
+		let r = !1, i = n?.triggerInteraction || this.defaultOptions.triggerInteraction, a = B[this.strategy?.type] !== i;
+		this.target !== e.element && (this.target = e.element, r = !0), (r || a) && (this.strategy?.abort(), this.strategy = new J[i](this.target, {
+			isPersistent: !0,
+			handleOverlayReady: (e) => {
+				this.listenerHost = this.overlay = e, this.init();
+			}
+		})), this.strategy.open = n?.open ?? !1;
+	}
+	handleSlottableRequest(e) {
+		/* c8 ignore next 1 */
+		if (e.target !== e.currentTarget) return;
+		let t = e.data === s, n = {};
+		if (this.host && (n.host = this.host), h(t ? void 0 : this.template(), this.overlay, n), t) this.overlay.remove();
+		else {
+			O.applyOptions(this.overlay, {
+				...this.options,
+				trigger: this.target
+			});
+			let e = typeof this.insertionOptions?.el == "function" ? this.insertionOptions.el() : this.insertionOptions?.el || this.target, { where: t = "afterend" } = this.insertionOptions || {};
+			e.insertAdjacentElement(t, this.overlay);
+		}
+	}
+}, Oe = C($);
+customElements.get("luzmo-overlay") || customElements.define("luzmo-overlay", X), customElements.get("luzmo-overlay-trigger") || customElements.define("luzmo-overlay-trigger", Z);
 //#endregion
-export { D as _, Y as a, G as c, U as d, V as f, E as g, O as h, J as i, H as l, P as m, Z as n, q as o, me as p, X as r, K as s, $ as t, W as u, T as v, w as y };
+export { w as C, T as S, be as _, Ee as a, E as b, K as c, W as d, U as f, z as g, V as h, De as i, q as l, H as m, Oe as n, Z as o, B as p, Q as r, X as s, $ as t, G as u, P as v, D as x, O as y };

package/components/{pending-state-a527YMWV.cjs → pending-state-CGHvTtKR.cjs}

@@ -1,6 +1,6 @@
 /*! * Lucero - The design system for Luzmo.
  * 
- * Copyright © 2025 Luzmo
+ * Copyright © 2026 Luzmo
  * All rights reserved.
  * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
  * This license allows users with a current active Luzmo account to use Lucero.
@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./progress-circle-DyApSKdm.cjs");let e=require("lit");var t=class{constructor(e){this.cachedAriaLabel=null,this.host=e,this.host.addController(this)}renderPendingState(){let t=this.host.pendingLabel||`Pending`;return this.host.pending?e.html`
+require("./progress-circle-bO_VAX3N.cjs");let e=require("lit");var t=class{constructor(e){this.cachedAriaLabel=null,this.host=e,this.host.addController(this)}renderPendingState(){let t=this.host.pendingLabel||`Pending`;return this.host.pending?e.html`
           <luzmo-progress-circle
             id="loader"
             size="s"