@yewdiel21/motion-kit 0.18.0 → 0.19.1

package/dist/{chunk-Q7IW4FV3.js → chunk-NCGNIPJE.js}

@@ -3,7 +3,7 @@ import {
   createScope,
   entrances,
   reduced
-} from "./chunk-DOOMULVV.js";
+} from "./chunk-OLT3CWDJ.js";
 import {
   inert,
   warnOnce
@@ -1643,6 +1643,7 @@ function faceOf(surface, origin, shape, withCopy) {
   return { face, copy };
 }
 var running = /* @__PURE__ */ new WeakMap();
+var OVERLAY = "[data-mk-scroll-rail], [data-mk-scroll-top]";
 var isMorphing = (surface) => running.has(surface);
 function stop(surface) {
   running.get(surface)?.kill();
@@ -1653,7 +1654,7 @@ function stop(surface) {
 }
 function stopMorph(surface) {
   stop(surface);
-  const parts = [...surface.querySelectorAll(":scope > *")].filter((element) => !element.classList.contains("mk-liquid"));
+  const parts = [...surface.querySelectorAll(":scope > *")].filter((element) => !element.classList.contains("mk-liquid") && !element.matches(OVERLAY));
   gsap.killTweensOf(parts);
   clearStyles(parts, MORPH_STYLES);
 }
@@ -1772,7 +1773,7 @@ function shareBack(surface, origin, duration = TIMING.dialog.close) {
   }
 }
 var partsOf = (surface, content) => [...surface.querySelectorAll(content ?? ":scope > *")].filter(
-  (element) => !element.classList.contains(FACE) && !element.classList.contains("mk-liquid")
+  (element) => !element.classList.contains(FACE) && !element.classList.contains("mk-liquid") && !element.matches(OVERLAY)
 );
 function morphOpen(surface, origin, options = {}) {
   registerMotion();
@@ -2021,938 +2022,1376 @@ function releaseUnderlay(elements, animated = true) {
   gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: "auto", onComplete: restore });
 }
 
-// src/components/dialog/engine.ts
-var DEFAULT_LABELS = { close: "Cerrar", float: "Ventana flotante", dock: "Volver a su sitio" };
-var FIELDS = '[autofocus], input:not([type="hidden"]):not(:disabled), textarea:not(:disabled), select:not(:disabled)';
-var CORNERS = ["tl", "tr", "bl", "br"];
-var uid = 0;
-var part = (dialog, name) => dialog.querySelector(`[data-mk-part="${name}"]`);
-function createDialog(dialog, options = {}) {
-  if (!dialog) {
-    warnOnce("dialog: missing <dialog> element");
-    return inert({ open() {
-    }, close() {
-    }, toggle() {
-    }, float() {
-    }, dock() {
-    }, isOpen: false, isFloating: false, element: null });
-  }
+// src/motion/micro.ts
+var list2 = (targets) => !targets ? [] : targets instanceof Element ? [targets] : [...targets];
+var live = () => {
   registerMotion();
-  const {
-    variant = "morph",
-    placement = "center",
-    backdrop = true,
-    closeOnBackdrop = true,
-    drag = true,
-    float: floatKey = false,
-    autoResize = true,
-    triggers = true,
-    modal = true
-  } = options;
-  const labels = { ...DEFAULT_LABELS, ...options.labels };
-  const liquid = variant === "liquid";
-  const sheet = variant === "sheet";
-  const drawer = variant === "drawer";
-  const scope = createScope();
-  let session = [];
-  let opener = null;
-  let isOpen = false;
-  let closing = false;
-  let floating = false;
-  let ownCloses = 0;
-  const closeNatively = () => {
-    if (!dialog.hasAttribute("open")) return;
-    ownCloses += 1;
-    closeModal(dialog);
-  };
-  let destroyed = false;
-  let tearingDown = false;
-  if (placement !== "center") scope.attr(dialog, "data-mk-placement", placement);
-  if (!backdrop) scope.attr(dialog, "data-mk-backdrop", "none");
-  scope.attr(dialog, "data-mk-variant", variant);
-  const title = part(dialog, "title");
-  if (title && !dialog.hasAttribute("aria-label") && !dialog.hasAttribute("aria-labelledby")) {
-    if (!title.id) scope.attr(title, "id", `mk-dialog-title-${++uid}`);
-    scope.attr(dialog, "aria-labelledby", title.id);
-  }
-  const description = part(dialog, "description");
-  if (description && !dialog.hasAttribute("aria-describedby")) {
-    if (!description.id) scope.attr(description, "id", `mk-dialog-description-${++uid}`);
-    scope.attr(dialog, "aria-describedby", description.id);
-  }
-  const closeButton = part(dialog, "close");
-  if (closeButton && !closeButton.hasAttribute("aria-label") && !closeButton.textContent?.trim()) {
-    scope.attr(closeButton, "aria-label", labels.close);
-  }
-  const handle = floatKey ? part(dialog, "handle") : null;
-  if (handle) {
-    scope.attr(handle, "data-mk-no-drag", "");
-    scope.attr(handle, "aria-pressed", "false");
-    scope.attr(handle, "aria-label", labels.float);
-  }
-  const corners = [];
-  if (floatKey) {
-    for (const corner of CORNERS) {
-      const element = document.createElement("span");
-      element.className = "mk-float-corner";
-      element.dataset.mkFloatCorner = corner;
-      element.dataset.mkNoDrag = "";
-      element.setAttribute("aria-hidden", "true");
-      dialog.append(element);
-      corners.push(element);
+  return !reduced();
+};
+function press(el5) {
+  if (!el5 || !live()) return null;
+  gsap.killTweensOf(el5, "scaleX,scaleY");
+  return gsap.timeline({
+    onComplete: () => {
+      gsap.set(el5, { clearProps: "scale,transform" });
     }
-    scope.add(() => corners.forEach((corner) => corner.remove()));
+  }).to(el5, { scaleX: 0.95, scaleY: 0.9, duration: 0.1, ease: "power2.out" }).to(el5, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click });
+}
+function blurIn(targets, { from = "rise", stagger = 0.05, delay = 0, duration } = {}) {
+  const items = list2(targets);
+  if (!items.length || !live()) return null;
+  const start = from === "pop" ? { opacity: 0, scale: 0.7, filter: "blur(32px)" } : from === "soft" ? { opacity: 0, scale: 0.96, filter: "blur(16px)" } : { opacity: 0, y: -20, filter: "blur(16px)" };
+  return gsap.fromTo(items, start, {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    filter: "blur(0px)",
+    duration: duration ?? (from === "pop" ? 0.3 : 0.5),
+    ease: from === "pop" ? EASE.pop : "power2.out",
+    stagger,
+    delay,
+    clearProps: "opacity,transform,filter"
+  });
+}
+function blurOut(targets, { to = "up", onComplete } = {}) {
+  const items = list2(targets);
+  if (!items.length) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
   }
-  const emit = (type, cancelable = false, detail = {}) => dialog.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable, detail: { dialog, ...detail } }));
-  const endSession = () => {
-    for (const cleanup of session.splice(0).reverse()) cleanup();
-  };
-  const settleFloating = () => {
-    if (!floating) return;
-    floating = false;
-    if (typeof dialog.hidePopover === "function" && dialog.hasAttribute("popover")) {
-      try {
-        dialog.hidePopover();
-      } catch {
-      }
-    }
-    dialog.removeAttribute("popover");
-    unplaceWindow(dialog);
-    if (handle) {
-      handle.setAttribute("aria-pressed", "false");
-      handle.setAttribute("aria-label", labels.float);
-    }
-  };
-  const closedQuietly = () => {
-    stopMorph(dialog);
-    endSession();
-    isOpen = false;
-    closing = false;
-    showOrigin(opener);
-    releaseShared(opener);
-    emit("mk:closed");
-    options.onClose?.();
-  };
-  const lift = () => {
-    if (!floatKey || floating || !isOpen || !floatingAvailable()) return;
-    const box = dialog.getBoundingClientRect();
-    const rect = savedFloat(floatKey) ?? { top: box.top, left: box.left, width: box.width, height: box.height };
-    const focused = document.activeElement;
-    const backdropStyle = getComputedStyle(dialog, "::backdrop");
-    const veil = document.createElement("div");
-    veil.setAttribute("aria-hidden", "true");
-    Object.assign(veil.style, {
-      position: "fixed",
-      inset: "0",
-      background: backdropStyle.background || backdropStyle.backgroundColor,
-      backdropFilter: backdropStyle.backdropFilter,
-      pointerEvents: "none"
-    });
-    closeNatively();
-    document.body.append(veil);
-    dialog.setAttribute("popover", "manual");
-    if (typeof dialog.showPopover === "function") dialog.showPopover();
-    else openModal(dialog, false);
-    liftWindow(dialog, rect);
-    gsap.to(veil, { opacity: 0, duration: reduced() ? 0 : TIMING.float.shadow, ease: EASE.signature, onComplete: () => veil.remove() });
-    floating = true;
-    if (handle) {
-      handle.setAttribute("aria-pressed", "true");
-      handle.setAttribute("aria-label", labels.dock);
-    }
-    showOrigin(opener, { fade: true });
-    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
-  };
-  const dock = () => {
-    if (!floatKey || !floating) return;
-    const box = dialog.getBoundingClientRect();
-    const focused = document.activeElement;
-    floating = false;
-    if (typeof dialog.hidePopover === "function") dialog.hidePopover();
-    dialog.removeAttribute("popover");
-    closeNatively();
-    openModal(dialog, modal);
-    dockWindow(dialog, { top: box.top, left: box.left, width: box.width, height: box.height });
-    if (backdrop) void fadeBackdrop(dialog, "in");
-    forgetFloat(floatKey);
-    if (handle) {
-      handle.setAttribute("aria-pressed", "false");
-      handle.setAttribute("aria-label", labels.float);
-    }
-    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
-  };
-  const anchorBox = () => options.anchor ? options.anchor() : opener?.isConnected ? opener.getBoundingClientRect() : null;
-  const startSession = () => {
-    if (drawer && modal) {
-      const root = document.documentElement;
-      const overflow = root.style.overflow;
-      root.style.overflow = "hidden";
-      session.push(() => {
-        root.style.overflow = overflow;
-        if (root.getAttribute("style") === "") root.removeAttribute("style");
-      });
-    }
-    if (sheet) {
-      const behind = [...document.querySelectorAll("[data-mk-underlay]")];
-      pushUnderlay(behind);
-      const root = document.documentElement;
-      const overflow = root.style.overflow;
-      root.style.overflow = "hidden";
-      session.push(() => {
-        root.style.overflow = overflow;
-        if (root.getAttribute("style") === "") root.removeAttribute("style");
-        releaseUnderlay(behind, !tearingDown);
-      });
-    }
-    if (autoResize && typeof ResizeObserver === "function") {
-      let last = dialog.offsetHeight;
-      let resizing = null;
-      const observer = new ResizeObserver(() => {
-        if (resizing?.isActive()) return;
-        const next = dialog.offsetHeight;
-        const previous = last;
-        last = next;
-        if (floating || Math.abs(next - previous) < 2 || !previous || isMorphing(dialog) || reduced()) return;
-        resizing = gsap.fromTo(
-          dialog,
-          { height: previous },
-          {
-            height: next,
-            duration: TIMING.dialog.autoResize,
-            ease: EASE.signature,
-            clearProps: "height",
-            onComplete: () => {
-              last = dialog.offsetHeight;
-            }
-          }
-        );
-      });
-      observer.observe(dialog);
-      session.push(() => {
-        observer.disconnect();
-        resizing?.kill();
-        clearStyles([dialog], ["height"]);
-      });
-    }
-    if (drag) {
-      session.push(
-        attachDragDismiss(dialog, {
-          canDrag: () => !isMorphing(dialog) && !floating && !closing && isOpen,
-          onDismiss: () => close(true)
-        })
-      );
-    }
-    if (placement === "anchor") {
-      const onResize = () => {
-        if (isOpen && !floating) anchorSurface(dialog, anchorBox());
-      };
-      addEventListener("resize", onResize);
-      session.push(() => {
-        removeEventListener("resize", onResize);
-        clearAnchor(dialog);
-      });
-    }
-    if (floatKey && handle) {
-      session.push(attachFloating(dialog, { key: floatKey, handle, corners, isFloating: () => floating, float: lift, dock }));
-      const onResize = () => {
-        if (floating && !floatingAvailable()) dock();
-      };
-      addEventListener("resize", onResize);
-      session.push(() => removeEventListener("resize", onResize));
-    }
-  };
-  const open = (origin) => {
-    if (destroyed || isOpen) return;
-    const active = document.activeElement;
-    opener = origin !== void 0 ? origin : active instanceof HTMLElement && active !== document.body && !dialog.contains(active) ? active : null;
-    closing = false;
-    isOpen = true;
-    openModal(dialog, modal);
-    if (placement === "anchor") anchorSurface(dialog, anchorBox());
-    if (backdrop && modal) void fadeBackdrop(dialog, "in");
-    if (sheet) sheetOpen(dialog);
-    else if (drawer) slideOpen(dialog);
-    else morphOpen(dialog, opener, { hideOrigin: true, liquid, content: options.animateContent === false ? ":scope > :not(*)" : void 0 });
-    startSession();
-    dialog.querySelector(FIELDS)?.focus({ preventScroll: true });
-    emit("mk:open", false, { origin: opener });
-    options.onOpen?.();
-  };
-  const close = (inPlace = false) => {
-    if (destroyed || !isOpen || closing) return;
-    if (!emit("mk:close", true, { inPlace })) return;
-    closing = true;
-    if (sheet) sheetClose(dialog, { inPlace });
-    else if (drawer) slideClose(dialog);
-    else morphCloseWithGhost(dialog, opener, { inPlace, liquid });
-    endSession();
-    if (floating) settleFloating();
-    if (dialog.hasAttribute("open")) closeModal(dialog);
-    isOpen = false;
-    closing = false;
-    if (opener?.isConnected) opener.focus();
-    emit("mk:closed");
-    options.onClose?.();
-  };
-  scope.on(dialog, "cancel", (event) => {
-    event.preventDefault();
-    close();
+  const end = to === "left" ? { x: -64 } : to === "down" ? { y: 24 } : { y: -20 };
+  return gsap.to(items, { ...end, opacity: 0, filter: "blur(16px)", duration: 0.5, ease: "power2.out", onComplete });
+}
+function collapse(el5, { onComplete } = {}) {
+  if (!el5) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
+  }
+  return gsap.to(el5, {
+    height: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    opacity: 0,
+    filter: "blur(16px)",
+    overflow: "hidden",
+    duration: 0.25,
+    ease: "power2.in",
+    onComplete
   });
-  scope.on(dialog, "close", () => {
-    if (ownCloses > 0) {
-      ownCloses -= 1;
-      return;
-    }
-    if (!isOpen || closing) return;
-    closedQuietly();
+}
+function shake(el5, distance = 4) {
+  if (!el5 || !live()) return null;
+  gsap.killTweensOf(el5, "x");
+  return gsap.to(el5, {
+    keyframes: { x: [0, -distance, distance, -distance, 0] },
+    duration: 0.5,
+    ease: EASE.shake,
+    clearProps: "x,transform"
   });
-  scope.on(dialog, "keydown", (event) => {
-    if (event.key === "Escape" && floating) {
-      event.preventDefault();
-      close();
+}
+function ringPulse(el5, color = "var(--mk-accent-soft)") {
+  if (!el5 || !live()) return null;
+  const before = { color: el5.style.outlineColor, style: el5.style.outlineStyle, offset: el5.style.outlineOffset };
+  el5.style.outlineColor = color;
+  el5.style.outlineStyle = "solid";
+  el5.style.outlineOffset = "-4px";
+  const restore = () => {
+    el5.style.outlineColor = before.color;
+    el5.style.outlineStyle = before.style;
+    el5.style.outlineOffset = before.offset;
+    el5.style.removeProperty("outline-width");
+    if (el5.getAttribute("style") === "") el5.removeAttribute("style");
+  };
+  return gsap.fromTo(el5, { outlineWidth: 0 }, { keyframes: { outlineWidth: [0, 4, 0] }, duration: 1, ease: "power1.inOut", onComplete: restore, onInterrupt: restore });
+}
+function burst(origin, { count = 7, distance = 28, colors = ["var(--mk-accent)"], ring = true, size = 6 } = {}) {
+  if (!origin || !live()) return null;
+  const layer = document.createElement("span");
+  layer.setAttribute("aria-hidden", "true");
+  layer.dataset.mkBurst = "";
+  Object.assign(layer.style, { position: "absolute", inset: "0", pointerEvents: "none", overflow: "visible", display: "grid", placeItems: "center" });
+  const positioned = getComputedStyle(origin).position !== "static";
+  const previousPosition = origin.style.position;
+  if (!positioned) origin.style.position = "relative";
+  origin.append(layer);
+  const cleanup = () => {
+    layer.remove();
+    if (!positioned) origin.style.position = previousPosition;
+    if (origin.getAttribute("style") === "") origin.removeAttribute("style");
+  };
+  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
+  if (ring) {
+    const circle = document.createElement("span");
+    Object.assign(circle.style, { position: "absolute", width: "100%", aspectRatio: "1", borderRadius: "50%", border: `2px solid ${colors[0]}` });
+    layer.append(circle);
+    timeline.fromTo(circle, { scale: 0.3, opacity: 0.9 }, { scale: 1.6, opacity: 0, duration: 0.5, ease: "power2.out" }, 0);
+  }
+  for (let i = 0; i < count; i++) {
+    const angle2 = i / count * Math.PI * 2 - Math.PI / 2;
+    for (const [k, scale] of [[0, 1], [1, 0.6]]) {
+      const dot = document.createElement("span");
+      Object.assign(dot.style, {
+        position: "absolute",
+        width: `${size * scale}px`,
+        height: `${size * scale}px`,
+        borderRadius: "50%",
+        background: colors[(i + k) % colors.length]
+      });
+      layer.append(dot);
+      const reach = distance * (k ? 0.72 : 1);
+      const turn = k ? 0.32 : 0;
+      timeline.fromTo(
+        dot,
+        { x: 0, y: 0, scale: 0, opacity: 1 },
+        { x: Math.cos(angle2 + turn) * reach, y: Math.sin(angle2 + turn) * reach, scale: 1, duration: 0.45, ease: "power3.out" },
+        0.05
+      );
+      timeline.to(dot, { scale: 0, opacity: 0, duration: 0.3, ease: "power2.in" }, 0.38);
     }
-  });
-  scope.on(dialog, "click", (event) => {
-    const target = event.target;
-    if (target?.closest('[data-mk-part="close"], [data-mk-close]') && dialog.contains(target)) {
-      close();
-      return;
+  }
+  return timeline;
+}
+var rolling = /* @__PURE__ */ new WeakMap();
+function rollDigits(el5, text, direction = 1, duration = 0.5) {
+  if (!el5) return null;
+  rolling.get(el5)?.progress(1).kill();
+  rolling.delete(el5);
+  const previous = el5.textContent ?? "";
+  if (previous === text || !live()) {
+    el5.textContent = text;
+    return null;
+  }
+  const width = Math.max(previous.length, text.length);
+  const oldChars = previous.padStart(width, " ");
+  const newChars = text.padStart(width, " ");
+  el5.textContent = "";
+  const label = document.createElement("span");
+  label.className = "mk-sr-only";
+  label.textContent = text;
+  const visual = document.createElement("span");
+  visual.setAttribute("aria-hidden", "true");
+  visual.style.display = "inline-flex";
+  const moving = [];
+  const padding = Math.min(width - previous.length, width - text.length);
+  for (let i = padding; i < width; i++) {
+    const before = oldChars[i];
+    const after = newChars[i];
+    const cell = document.createElement("span");
+    Object.assign(cell.style, { position: "relative", display: "inline-block", overflow: "hidden", whiteSpace: "pre" });
+    const next = document.createElement("span");
+    next.style.display = "inline-block";
+    next.textContent = after;
+    cell.append(next);
+    if (before !== after) {
+      const old = document.createElement("span");
+      Object.assign(old.style, { position: "absolute", left: "0", top: "0", display: "inline-block" });
+      old.textContent = before;
+      cell.append(old);
+      moving.push([old, next]);
     }
-    if (target !== dialog || !closeOnBackdrop || floating) return;
-    const mouse = event;
-    const box = dialog.getBoundingClientRect();
-    if (mouse.clientX < box.left || mouse.clientX > box.right || mouse.clientY < box.top || mouse.clientY > box.bottom) close();
-  });
-  const triggerId = triggers === true ? dialog.id : triggers || "";
-  if (triggerId) {
-    const selector = `[data-mk-open="${typeof CSS !== "undefined" && CSS.escape ? CSS.escape(triggerId) : triggerId}"]`;
-    scope.on(document, "click", (event) => {
-      const trigger = event.target?.closest(selector);
-      if (!trigger || dialog.contains(trigger)) return;
-      event.preventDefault();
-      if (isOpen) close();
-      else open(trigger);
-    });
+    visual.append(cell);
   }
-  dialog.dataset.mkReady = "";
-  return {
-    open,
-    close: () => close(),
-    toggle: (origin) => isOpen ? close() : open(origin),
-    float: lift,
-    dock,
-    get isOpen() {
-      return isOpen;
-    },
-    get isFloating() {
-      return floating;
-    },
-    element: dialog,
-    destroy() {
-      if (destroyed) return;
-      tearingDown = true;
-      if (isOpen) {
-        settleFloating();
-        closing = true;
-        if (dialog.hasAttribute("open")) closeModal(dialog);
-        closedQuietly();
-      }
-      destroyed = true;
-      endSession();
-      gsap.killTweensOf(dialog);
-      clearStyles([dialog], [...MORPH_STYLES, "height"]);
-      scope.dispose();
-      delete dialog.dataset.mkReady;
+  el5.append(label, visual);
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      el5.textContent = text;
+      rolling.delete(el5);
     }
-  };
+  });
+  moving.forEach(([old, next], i) => {
+    timeline.to(old, { yPercent: -100 * direction, opacity: 0, filter: "blur(4px)", duration, ease: EASE.signature }, i * 0.03);
+    timeline.fromTo(next, { yPercent: 100 * direction, opacity: 0, filter: "blur(4px)" }, { yPercent: 0, opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature }, i * 0.03);
+  });
+  rolling.set(el5, timeline);
+  return timeline;
 }
 
-// src/components/menu/engine.ts
-var ITEM = "[data-mk-item]";
-function createMenu(dialog, options = {}) {
-  if (!dialog) {
-    warnOnce("menu: missing <dialog> element");
-    return inert({
-      open() {
-      },
-      close() {
-      },
-      toggle() {
-      },
-      float() {
-      },
-      dock() {
-      },
-      isOpen: false,
-      isFloating: false,
-      element: null,
-      items: []
-    });
+// src/components/icons.ts
+var ICON_PATHS = {
+  close: "M6 6l12 12M18 6L6 18",
+  expand: "M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7",
+  shrink: "M4 14h6v6M20 10h-6V4M10 14l-7 7M14 10l7-7",
+  check: "M5 12.5l4.5 4.5L19 7.5",
+  alert: "M12 8v5M12 16.5v.01M10.3 3.9L2.6 17.3a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z",
+  info: "M12 11v6M12 7.5v.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+  send: "M12 19V5M5.5 11.5L12 5l6.5 6.5",
+  mic: "M12 3a3 3 0 00-3 3v6a3 3 0 006 0V6a3 3 0 00-3-3zM5.5 11a6.5 6.5 0 0013 0M12 17.5V21",
+  sparkle: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z",
+  grip: "M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01",
+  toTop: "M12 20V9M6.5 14.5L12 9l5.5 5.5M6 4.5h12"
+};
+function iconSvg(name, size = 20) {
+  return `<svg aria-hidden="true" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ICON_PATHS[name]}"/></svg>`;
+}
+
+// src/components/scroll-area/engine.ts
+var sequence = 0;
+var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+function createScrollArea(root, options = {}) {
+  if (!root) {
+    warnOnce("scroll-area: missing root");
+    return inert({ scrollTo() {
+    }, refresh() {
+    }, viewport: null });
   }
-  const { closeOnSelect = true } = options;
+  registerMotion();
   const scope = createScope();
-  let ticketAnimation;
-  if (options.ticket) {
-    scope.attr(dialog, "data-mk-ticket", "");
-    scope.attr(dialog, "style", dialog.getAttribute("style"));
-    for (const item of dialog.querySelectorAll(ITEM)) scope.attr(item, "style", item.getAttribute("style"));
-    scope.add(() => ticketAnimation?.kill());
-  }
-  const items = () => [...dialog.querySelectorAll(ITEM)].filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true");
-  scope.attr(dialog, "role", "menu");
-  const markItems = () => {
-    for (const item of dialog.querySelectorAll(ITEM)) {
-      scope.attr(item, "role", "menuitem");
-      scope.attr(item, "tabindex", "-1");
-    }
-  };
-  markItems();
-  const surface = createDialog(dialog, {
-    ...options,
-    placement: "anchor",
-    backdrop: false,
-    drag: false,
-    autoResize: false,
-    animateContent: false,
-    onOpen: () => {
-      markItems();
-      const list3 = items();
-      if (options.ticket && !reduced()) {
-        ticketAnimation?.kill();
-        ticketAnimation = gsap.timeline().fromTo(dialog, { clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0% 0)", duration: TIMING.ticketMenu.open, ease: "expo.out" }).fromTo(list3, { yPercent: TIMING.ticketMenu.from }, { yPercent: 0, duration: TIMING.ticketMenu.content, stagger: TIMING.ticketMenu.stagger, ease: "expo.out" }, 0);
-      } else flowInMenu(list3);
-      list3[0]?.focus({ preventScroll: true });
-      options.onOpen?.();
-    }
+  const visibility = options.visibility === "scroll" || options.visibility === "always" ? options.visibility : "hover";
+  const axis = options.axis === "x" || options.axis === "y" ? options.axis : "both";
+  const idle2 = Number.isFinite(options.idle) ? Math.max(0, options.idle) : TIMING.scrollArea.idleMs;
+  const fade = options.fade === false ? 0 : typeof options.fade === "number" && Number.isFinite(options.fade) ? Math.max(0, options.fade) : TIMING.scrollArea.fade;
+  let viewport = options.viewport && options.viewport !== root && root.contains(options.viewport) ? options.viewport : null;
+  if (!viewport) {
+    const own = document.createElement("div");
+    own.append(...root.childNodes);
+    root.append(own);
+    scope.add(() => own.replaceWith(...own.childNodes));
+    viewport = own;
+  }
+  const view = viewport;
+  scope.attr(view, "style", view.getAttribute("style"));
+  scope.attr(view, "data-mk-scroll-viewport", "");
+  if (!options.decorative && !view.id) scope.attr(view, "id", `mk-scroll-${++sequence}`);
+  if (options.focusable !== false && !view.hasAttribute("tabindex")) scope.attr(view, "tabindex", "0");
+  if (options.label) {
+    scope.attr(view, "role", "region");
+    scope.attr(view, "aria-label", options.label);
+  }
+  scope.attr(root, "data-mk-scroll-area", "");
+  scope.attr(root, "data-mk-scroll-axis", axis);
+  if (fade) scope.attr(root, "data-mk-fade", "");
+  if (getComputedStyle(root).position === "static") scope.attr(root, "data-mk-scroll-anchor", "");
+  scope.attr(root, "data-mk-ready", "");
+  scope.add(() => {
+    for (const name of ["data-mk-active", "data-mk-dragging", "data-mk-overflow-x", "data-mk-overflow-y"]) root.removeAttribute(name);
   });
-  const select = (item) => {
-    const value = item.dataset.mkValue ?? item.textContent?.trim() ?? "";
-    dialog.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { value, item } }));
-    options.onSelect?.(value, item);
-    if (closeOnSelect) surface.close();
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
   };
-  scope.on(dialog, "click", (event) => {
-    const item = event.target?.closest(ITEM);
-    if (item && dialog.contains(item) && items().includes(item)) select(item);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
   });
-  scope.on(dialog, "keydown", (event) => {
-    const key2 = event.key;
-    const list3 = items();
-    if (!list3.length) return;
-    const at = list3.indexOf(document.activeElement);
-    const moves = {
-      ArrowDown: at < 0 ? 0 : (at + 1) % list3.length,
-      ArrowUp: at < 0 ? list3.length - 1 : (at - 1 + list3.length) % list3.length,
-      Home: 0,
-      End: list3.length - 1
-    };
-    if (key2 in moves) {
-      event.preventDefault();
-      list3[moves[key2]]?.focus();
+  const makeBar = (which) => {
+    const rail = document.createElement("div");
+    rail.dataset.mkScrollRail = "";
+    rail.dataset.mkAxis = which;
+    if (options.decorative) rail.setAttribute("aria-hidden", "true");
+    else {
+      rail.setAttribute("role", "scrollbar");
+      rail.setAttribute("aria-controls", view.id);
+      rail.setAttribute("aria-orientation", which === "y" ? "vertical" : "horizontal");
+      rail.setAttribute("aria-valuemin", "0");
+      rail.setAttribute("aria-valuemax", "100");
+      rail.setAttribute("aria-valuenow", "0");
+    }
+    rail.hidden = true;
+    rail.setAttribute("data-mk-no-drag", "");
+    const thumb = document.createElement("div");
+    thumb.dataset.mkScrollThumb = "";
+    const pill = document.createElement("span");
+    pill.dataset.mkScrollPill = "";
+    thumb.append(pill);
+    rail.append(thumb);
+    root.append(rail);
+    scope.add(() => rail.remove());
+    return { axis: which, rail, thumb, pill, overflow: false, track: 0, size: 0 };
+  };
+  const bars = (axis === "both" ? ["y", "x"] : [axis]).map(makeBar);
+  let rtl = false;
+  const range = (which) => Math.max(0, which === "y" ? view.scrollHeight - view.clientHeight : view.scrollWidth - view.clientWidth);
+  const travelled = (which) => which === "y" ? view.scrollTop : rtl ? -view.scrollLeft : view.scrollLeft;
+  const progress = (which) => {
+    const total = range(which);
+    return total > 0 ? clamp2(travelled(which) / total, 0, 1) : 0;
+  };
+  const positionAt = (which, share) => {
+    const at = clamp2(share, 0, 1) * range(which);
+    return which === "x" && rtl ? -at : at;
+  };
+  let hideTimer;
+  scope.add(() => clearTimeout(hideTimer));
+  let hovering = false;
+  let overRail = null;
+  let drag = null;
+  const anyOverflow = () => bars.some((bar) => bar.overflow);
+  const show = () => {
+    if (!anyOverflow()) return;
+    clearTimeout(hideTimer);
+    root.setAttribute("data-mk-active", "");
+  };
+  const settle = () => {
+    clearTimeout(hideTimer);
+    if (visibility === "always") return;
+    hideTimer = setTimeout(() => {
+      if (drag || overRail || visibility === "hover" && hovering) return;
+      root.removeAttribute("data-mk-active");
+    }, idle2);
+  };
+  let held = null;
+  const holdBehavior = () => {
+    if (held) return;
+    held = { value: view.style.getPropertyValue("scroll-behavior"), priority: view.style.getPropertyPriority("scroll-behavior") };
+    view.style.setProperty("scroll-behavior", "auto", "important");
+  };
+  const releaseBehavior = () => {
+    if (!held) return;
+    if (held.value) view.style.setProperty("scroll-behavior", held.value, held.priority);
+    else view.style.removeProperty("scroll-behavior");
+    held = null;
+  };
+  let glide = null;
+  const stopGlide = () => {
+    if (!glide) return;
+    glide.kill();
+    glide = null;
+    releaseBehavior();
+  };
+  scope.add(stopGlide);
+  const glideTo = (top, left, animate = true) => {
+    stopGlide();
+    const to = { top: top === void 0 ? view.scrollTop : top, left: left === void 0 ? view.scrollLeft : left };
+    if (!animate || reduced()) {
+      view.scrollTop = to.top;
+      view.scrollLeft = to.left;
+      return;
+    }
+    holdBehavior();
+    const at = { top: view.scrollTop, left: view.scrollLeft };
+    glide = gsap.to(at, {
+      ...to,
+      duration: TIMING.scrollArea.glide,
+      ease: EASE.signature,
+      onUpdate: () => {
+        view.scrollTop = at.top;
+        view.scrollLeft = at.left;
+      },
+      onComplete: () => {
+        glide = null;
+        releaseBehavior();
+      }
+    });
+  };
+  for (const type of ["wheel", "touchstart", "keydown", "pointerdown"]) scope.on(view, type, stopGlide, { passive: true });
+  let topButton = null;
+  let topShown = false;
+  if (options.backToTop) {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.dataset.mkScrollTop = "";
+    button2.setAttribute("aria-label", "Volver arriba");
+    button2.innerHTML = iconSvg("toTop", 20);
+    button2.hidden = true;
+    button2.setAttribute("data-mk-no-drag", "");
+    root.append(button2);
+    scope.add(() => button2.remove());
+    scope.on(button2, "click", () => {
+      keep(press(button2));
+      glideTo(0, void 0);
+    });
+    topButton = button2;
+  }
+  const topThreshold = () => typeof options.backToTop === "number" && Number.isFinite(options.backToTop) ? Math.max(0, options.backToTop) : view.clientHeight;
+  const toggleTop = (next) => {
+    const button2 = topButton;
+    if (!button2 || next === topShown) return;
+    topShown = next;
+    gsap.killTweensOf(button2);
+    if (next) {
+      gsap.set(button2, { clearProps: "opacity,transform,filter" });
+      button2.hidden = false;
+      keep(blurIn(button2, { from: "pop" }));
       return;
     }
-    const target = event.target;
-    if ((key2 === "Enter" || key2 === " ") && list3.includes(target) && !target.matches("button, a[href]")) {
-      event.preventDefault();
-      select(target);
+    if (document.activeElement === button2) (view.hasAttribute("tabindex") ? view : root).focus({ preventScroll: true });
+    const hide = () => {
+      if (topShown) return;
+      button2.hidden = true;
+      gsap.set(button2, { clearProps: "opacity,transform,filter" });
+    };
+    const out = reduced() ? null : blurOut(button2, { to: "down", onComplete: hide });
+    if (out) keep(out);
+    else hide();
+  };
+  const placeOverlays = () => {
+    let top = 0;
+    let left = 0;
+    for (let node = view; node && node !== root; ) {
+      top += node.offsetTop;
+      left += node.offsetLeft;
+      const parent = node.offsetParent;
+      node = parent && root.contains(parent) ? parent : null;
+    }
+    const edges = {
+      top,
+      left,
+      right: root.clientWidth - left - view.offsetWidth,
+      bottom: root.clientHeight - top - view.offsetHeight
+    };
+    for (const element of [...bars.map((bar) => bar.rail), topButton]) {
+      if (!element) continue;
+      for (const [edge, value] of Object.entries(edges)) element.style.setProperty(`--mk-scroll-view-${edge}`, `${Math.max(0, Math.round(value))}px`);
     }
-  });
-  return {
-    open: surface.open,
-    close: surface.close,
-    toggle: surface.toggle,
-    float: surface.float,
-    dock: surface.dock,
-    get isOpen() {
-      return surface.isOpen;
-    },
-    get isFloating() {
-      return surface.isFloating;
-    },
-    get items() {
-      return items();
-    },
-    element: dialog,
-    destroy() {
-      surface.destroy();
-      scope.dispose();
+  };
+  let measured = false;
+  const measure = () => {
+    rtl = getComputedStyle(view).direction === "rtl";
+    const had = anyOverflow();
+    for (const bar of bars) {
+      bar.overflow = range(bar.axis) > 1;
+      bar.rail.hidden = !bar.overflow;
+      root.toggleAttribute(`data-mk-overflow-${bar.axis}`, bar.overflow);
+    }
+    placeOverlays();
+    for (const bar of bars) {
+      if (!bar.overflow) continue;
+      const vertical = bar.axis === "y";
+      bar.track = vertical ? bar.rail.clientHeight : bar.rail.clientWidth;
+      const seen = vertical ? view.clientHeight : view.clientWidth;
+      const total = vertical ? view.scrollHeight : view.scrollWidth;
+      bar.size = clamp2(bar.track * seen / Math.max(1, total), Math.min(TIMING.scrollArea.minThumb, bar.track), bar.track);
+      bar.thumb.style[vertical ? "height" : "width"] = `${bar.size}px`;
+    }
+    const now2 = anyOverflow();
+    if (!now2) {
+      clearTimeout(hideTimer);
+      root.removeAttribute("data-mk-active");
+    } else if (visibility === "always") show();
+    else if (measured && !had) {
+      show();
+      settle();
     }
+    measured = true;
   };
-}
-
-// src/components/chat-background/engine.ts
-var VARS = ["--mk-chat-orbit-1", "--mk-chat-orbit-2", "--mk-chat-blob-opacity", "--mk-chat-scale"];
-var instances = /* @__PURE__ */ new WeakMap();
-var chatBackgroundOf = (el5) => el5 ? instances.get(el5) ?? null : null;
-function createChatBackground(root, options = {}) {
-  if (!root) {
-    warnOnce("chat-background: missing root");
-    return inert({ setEnergy() {
-    }, setScale() {
-    }, busy() {
-    }, energy: 0, scale: 1 });
-  }
-  registerMotion();
-  const scope = createScope();
-  const state = { energy: options.energy ?? 0, scale: options.scale ?? 1 };
-  let noise = root.querySelector(":scope > .mk-chat-background__noise");
-  if (!noise) {
-    noise = document.createElement("div");
-    noise.className = "mk-chat-background__noise";
-    noise.setAttribute("aria-hidden", "true");
-    root.append(noise);
-    const created = noise;
-    scope.add(() => created.remove());
-  }
-  scope.attr(root, "aria-hidden", "true");
   const paint = () => {
-    const e = Math.max(0, state.energy);
-    root.style.setProperty("--mk-chat-orbit-1", `${Math.max(1, 10 - 3.5 * e).toFixed(3)}s`);
-    root.style.setProperty("--mk-chat-orbit-2", `${Math.max(1, 15 - 4.5 * e).toFixed(3)}s`);
-    root.style.setProperty("--mk-chat-blob-opacity", (0.5 + 0.15 * e).toFixed(3));
-    root.style.setProperty("--mk-chat-scale", ((1 + 0.1 * e) * state.scale).toFixed(3));
+    for (const bar of bars) {
+      if (!bar.overflow) continue;
+      const share = progress(bar.axis);
+      const room = Math.max(0, bar.track - bar.size);
+      const offset = bar.axis === "x" && rtl ? room * (1 - share) : room * share;
+      bar.thumb.style.transform = bar.axis === "y" ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset}px, 0, 0)`;
+      if (!options.decorative) bar.rail.setAttribute("aria-valuenow", String(Math.round(share * 100)));
+    }
+    if (fade) {
+      const down = range("y");
+      const across = range("x");
+      const fromStart = Math.max(0, travelled("x"));
+      const depth = (hidden) => `${Math.round(clamp2(hidden, 0, fade))}px`;
+      view.style.setProperty("--mk-scroll-fade-top", depth(view.scrollTop));
+      view.style.setProperty("--mk-scroll-fade-bottom", depth(down - view.scrollTop));
+      view.style.setProperty("--mk-scroll-fade-left", depth(rtl ? across - fromStart : fromStart));
+      view.style.setProperty("--mk-scroll-fade-right", depth(rtl ? fromStart : across - fromStart));
+    }
+    if (topButton) toggleTop(view.scrollTop > topThreshold());
+  };
+  let cancelFrame = null;
+  const schedule = () => {
+    if (cancelFrame) return;
+    cancelFrame = requestFrame(() => {
+      cancelFrame = null;
+      if (scope.disposed) return;
+      measure();
+      paint();
+    });
+  };
+  scope.add(() => cancelFrame?.());
+  scope.on(
+    view,
+    "scroll",
+    () => {
+      paint();
+      if (visibility !== "always") {
+        show();
+        settle();
+      }
+      const detail = { x: progress("x"), y: progress("y") };
+      options.onScroll?.(detail);
+      root.dispatchEvent(new CustomEvent("mk:scroll", { bubbles: true, detail }));
+    },
+    { passive: true }
+  );
+  scope.on(root, "pointerenter", (event) => {
+    if (event.pointerType === "touch") return;
+    hovering = true;
+    if (visibility === "hover") show();
+  });
+  scope.on(root, "pointerleave", () => {
+    hovering = false;
+    settle();
+  });
+  for (const bar of bars) {
+    const vertical = bar.axis === "y";
+    scope.on(bar.rail, "pointerenter", (event) => {
+      if (event.pointerType === "touch") return;
+      overRail = bar.rail;
+      show();
+    });
+    scope.on(bar.rail, "pointerleave", () => {
+      if (overRail === bar.rail) overRail = null;
+      settle();
+    });
+    scope.on(bar.thumb, "pointerdown", (event) => {
+      const down = event;
+      if (down.button !== 0) return;
+      down.preventDefault();
+      down.stopPropagation();
+      stopGlide();
+      holdBehavior();
+      const thumbBox = bar.thumb.getBoundingClientRect();
+      const railBox = bar.rail.getBoundingClientRect();
+      drag = {
+        bar,
+        id: down.pointerId,
+        offset: vertical ? down.clientY - thumbBox.top : down.clientX - thumbBox.left,
+        start: vertical ? railBox.top : railBox.left
+      };
+      bar.rail.setAttribute("data-mk-dragging", "");
+      root.setAttribute("data-mk-dragging", "");
+      try {
+        bar.thumb.setPointerCapture(down.pointerId);
+      } catch {
+      }
+      show();
+      keep(press(bar.pill));
+    });
+    scope.on(bar.rail, "pointerdown", (event) => {
+      const down = event;
+      if (down.button !== 0 || bar.thumb.contains(down.target)) return;
+      down.preventDefault();
+      const box = bar.rail.getBoundingClientRect();
+      const at = vertical ? down.clientY - box.top : down.clientX - box.left;
+      const share = (at - bar.size / 2) / Math.max(1, bar.track - bar.size);
+      const target = positionAt(bar.axis, bar.axis === "x" && rtl ? 1 - share : share);
+      if (vertical) glideTo(target, void 0);
+      else glideTo(void 0, target);
+    });
+  }
+  scope.on(window, "pointermove", (event) => {
+    const move = event;
+    if (!drag || move.pointerId !== drag.id) return;
+    const { bar } = drag;
+    const at = (bar.axis === "y" ? move.clientY : move.clientX) - drag.start - drag.offset;
+    const share = at / Math.max(1, bar.track - bar.size);
+    const target = positionAt(bar.axis, bar.axis === "x" && rtl ? 1 - share : share);
+    if (bar.axis === "y") view.scrollTop = target;
+    else view.scrollLeft = target;
+    paint();
+  });
+  const endDrag = () => {
+    if (!drag) return;
+    const { bar, id } = drag;
+    drag = null;
+    try {
+      if (bar.thumb.hasPointerCapture?.(id)) bar.thumb.releasePointerCapture(id);
+    } catch {
+    }
+    bar.rail.removeAttribute("data-mk-dragging");
+    root.removeAttribute("data-mk-dragging");
+    releaseBehavior();
+    if (!scope.disposed) settle();
+  };
+  const release = (event) => {
+    if (drag && event.pointerId === drag.id) endDrag();
   };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  for (const bar of bars) scope.on(bar.thumb, "lostpointercapture", release);
   scope.add(() => {
-    gsap.killTweensOf(state);
-    for (const name of VARS) root.style.removeProperty(name);
-    if (root.getAttribute("style") === "") root.removeAttribute("style");
+    endDrag();
+    releaseBehavior();
   });
+  if (typeof ResizeObserver === "function") {
+    const resize = scope.observe(new ResizeObserver(schedule));
+    const watch = () => {
+      resize.observe(view);
+      for (const child of view.children) resize.observe(child);
+    };
+    watch();
+    if (typeof MutationObserver === "function")
+      scope.observe(
+        new MutationObserver(() => {
+          watch();
+          schedule();
+        })
+      ).observe(view, { childList: true });
+  }
+  scope.on(window, "resize", schedule);
+  measure();
   paint();
-  const instance = {
-    setEnergy(energy) {
-      state.energy = Number.isFinite(energy) ? energy : 0;
-      paint();
-    },
-    setScale(scale) {
-      state.scale = Number.isFinite(scale) ? scale : 1;
+  return {
+    scrollTo: ({ top, left } = {}, { animate = true } = {}) => glideTo(top, left, animate),
+    refresh: () => {
+      measure();
       paint();
     },
-    busy(on) {
-      const to = on ? { energy: 1.6, scale: 1.8 } : { energy: 0, scale: 1 };
-      gsap.killTweensOf(state);
-      if (reduced()) {
-        Object.assign(state, to);
-        paint();
-        return;
-      }
-      gsap.to(state, {
-        ...to,
-        duration: on ? TIMING.onboarding.busy : TIMING.onboarding.idle,
-        ease: on ? "power2.out" : "power2.inOut",
-        onUpdate: paint
-      });
-    },
-    get energy() {
-      return state.energy;
-    },
-    get scale() {
-      return state.scale;
+    get viewport() {
+      return view;
     },
-    destroy() {
-      instances.delete(root);
-      scope.dispose();
-      delete root.dataset.mkReady;
-    }
+    destroy: () => scope.dispose()
   };
-  instances.set(root, instance);
-  root.dataset.mkReady = "";
-  return instance;
 }
 
-// src/components/steps/engine.ts
-var STEP2 = "[data-mk-step]";
-var ITEM_STYLES = ["transform", "translate", "rotate", "scale", "filter", "opacity", "visibility"];
-function createSteps(root, options = {}) {
-  const steps = root ? [...root.querySelectorAll(STEP2)].filter((step) => {
-    const outer = step.parentElement?.closest(STEP2);
-    return !outer || !root.contains(outer);
-  }) : [];
-  if (!root || !steps.length) {
-    warnOnce("steps: needs [data-mk-step] children");
-    return inert({ next: async () => {
-    }, prev: async () => {
-    }, goTo: async () => {
-    }, busy() {
-    }, index: -1, count: 0, steps: [] });
+// src/components/dialog/engine.ts
+var DEFAULT_LABELS = { close: "Cerrar", float: "Ventana flotante", dock: "Volver a su sitio" };
+var FIELDS = '[autofocus], input:not([type="hidden"]):not(:disabled), textarea:not(:disabled), select:not(:disabled)';
+var CORNERS = ["tl", "tr", "bl", "br"];
+var uid = 0;
+var part = (dialog, name) => dialog.querySelector(`[data-mk-part="${name}"]`);
+function createDialog(dialog, options = {}) {
+  if (!dialog) {
+    warnOnce("dialog: missing <dialog> element");
+    return inert({ open() {
+    }, close() {
+    }, toggle() {
+    }, float() {
+    }, dock() {
+    }, isOpen: false, isFloating: false, element: null });
+  }
+  registerMotion();
+  const {
+    variant = "morph",
+    placement = "center",
+    backdrop = true,
+    closeOnBackdrop = true,
+    drag = true,
+    float: floatKey = false,
+    autoResize = true,
+    triggers = true,
+    modal = true
+  } = options;
+  const labels = { ...DEFAULT_LABELS, ...options.labels };
+  const liquid = variant === "liquid";
+  const sheet = variant === "sheet";
+  const drawer = variant === "drawer";
+  const scope = createScope();
+  let session = [];
+  let opener = null;
+  let isOpen = false;
+  let closing = false;
+  let floating = false;
+  let ownCloses = 0;
+  const closeNatively = () => {
+    if (!dialog.hasAttribute("open")) return;
+    ownCloses += 1;
+    closeModal(dialog);
+  };
+  let destroyed = false;
+  let tearingDown = false;
+  if (placement !== "center") scope.attr(dialog, "data-mk-placement", placement);
+  if (!backdrop) scope.attr(dialog, "data-mk-backdrop", "none");
+  scope.attr(dialog, "data-mk-variant", variant);
+  const title = part(dialog, "title");
+  if (title && !dialog.hasAttribute("aria-label") && !dialog.hasAttribute("aria-labelledby")) {
+    if (!title.id) scope.attr(title, "id", `mk-dialog-title-${++uid}`);
+    scope.attr(dialog, "aria-labelledby", title.id);
+  }
+  const description = part(dialog, "description");
+  if (description && !dialog.hasAttribute("aria-describedby")) {
+    if (!description.id) scope.attr(description, "id", `mk-dialog-description-${++uid}`);
+    scope.attr(dialog, "aria-describedby", description.id);
+  }
+  const closeButton = part(dialog, "close");
+  if (closeButton && !closeButton.hasAttribute("aria-label") && !closeButton.textContent?.trim()) {
+    scope.attr(closeButton, "aria-label", labels.close);
+  }
+  const handle = floatKey ? part(dialog, "handle") : null;
+  if (handle) {
+    scope.attr(handle, "data-mk-no-drag", "");
+    scope.attr(handle, "aria-pressed", "false");
+    scope.attr(handle, "aria-label", labels.float);
+  }
+  const corners = [];
+  if (floatKey) {
+    for (const corner of CORNERS) {
+      const element = document.createElement("span");
+      element.className = "mk-float-corner";
+      element.dataset.mkFloatCorner = corner;
+      element.dataset.mkNoDrag = "";
+      element.setAttribute("aria-hidden", "true");
+      dialog.append(element);
+      corners.push(element);
+    }
+    scope.add(() => corners.forEach((corner) => corner.remove()));
   }
-  registerMotion();
-  const scope = createScope();
-  const { duration = TIMING.onboarding.step, animateFirst = true, target = "[data-mk-flow-item]" } = options;
-  const clamp5 = (value) => Math.min(steps.length - 1, Math.max(0, Math.round(value)));
-  const marked3 = steps.findIndex((step) => step.hasAttribute("data-mk-current"));
-  let index = clamp5(options.index ?? (marked3 >= 0 ? marked3 : 0));
-  let wanted = index;
-  let running2 = null;
-  let stopCounter = () => {
+  const emit = (type, cancelable = false, detail = {}) => dialog.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable, detail: { dialog, ...detail } }));
+  const endSession = () => {
+    for (const cleanup of session.splice(0).reverse()) cleanup();
   };
-  const itemsOf = (step) => {
-    const marked4 = [...step.querySelectorAll(target)];
-    return marked4.length ? marked4 : [...step.children];
+  const settleFloating = () => {
+    if (!floating) return;
+    floating = false;
+    if (typeof dialog.hidePopover === "function" && dialog.hasAttribute("popover")) {
+      try {
+        dialog.hidePopover();
+      } catch {
+      }
+    }
+    dialog.removeAttribute("popover");
+    unplaceWindow(dialog);
+    if (handle) {
+      handle.setAttribute("aria-pressed", "false");
+      handle.setAttribute("aria-label", labels.float);
+    }
   };
-  const show = (current3) => {
-    steps.forEach((step, i) => {
-      scope.attr(step, "hidden", i === current3 ? null : "");
-      scope.attr(step, "data-mk-current", i === current3 ? "" : null);
-    });
+  const closedQuietly = () => {
+    stopMorph(dialog);
+    endSession();
+    isOpen = false;
+    closing = false;
+    showOrigin(opener);
+    releaseShared(opener);
+    emit("mk:closed");
+    options.onClose?.();
   };
-  const counter = () => {
-    const el5 = root.querySelector("[data-mk-counter]");
-    if (!el5) return;
-    stopCounter();
-    stopCounter = revealCounter(el5, index + 1, { duration: TIMING.onboarding.counter });
+  const lift = () => {
+    if (!floatKey || floating || !isOpen || !floatingAvailable()) return;
+    const box = dialog.getBoundingClientRect();
+    const rect = savedFloat(floatKey) ?? { top: box.top, left: box.left, width: box.width, height: box.height };
+    const focused = document.activeElement;
+    const backdropStyle = getComputedStyle(dialog, "::backdrop");
+    const veil = document.createElement("div");
+    veil.setAttribute("aria-hidden", "true");
+    Object.assign(veil.style, {
+      position: "fixed",
+      inset: "0",
+      background: backdropStyle.background || backdropStyle.backgroundColor,
+      backdropFilter: backdropStyle.backdropFilter,
+      pointerEvents: "none"
+    });
+    closeNatively();
+    document.body.append(veil);
+    dialog.setAttribute("popover", "manual");
+    if (typeof dialog.showPopover === "function") dialog.showPopover();
+    else openModal(dialog, false);
+    liftWindow(dialog, rect);
+    gsap.to(veil, { opacity: 0, duration: reduced() ? 0 : TIMING.float.shadow, ease: EASE.signature, onComplete: () => veil.remove() });
+    floating = true;
+    if (handle) {
+      handle.setAttribute("aria-pressed", "true");
+      handle.setAttribute("aria-label", labels.dock);
+    }
+    showOrigin(opener, { fade: true });
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
   };
-  const focusTitle = (step) => {
-    const title = step.querySelector("[data-mk-step-title]") ?? step.querySelector("h1, h2, h3, h4, h5, h6");
-    if (!title) return;
-    if (!title.hasAttribute("tabindex") && title.tabIndex < 0) scope.attr(title, "tabindex", "-1");
-    title.focus({ preventScroll: true });
+  const dock = () => {
+    if (!floatKey || !floating) return;
+    const box = dialog.getBoundingClientRect();
+    const focused = document.activeElement;
+    floating = false;
+    if (typeof dialog.hidePopover === "function") dialog.hidePopover();
+    dialog.removeAttribute("popover");
+    closeNatively();
+    openModal(dialog, modal);
+    dockWindow(dialog, { top: box.top, left: box.left, width: box.width, height: box.height });
+    if (backdrop) void fadeBackdrop(dialog, "in");
+    forgetFloat(floatKey);
+    if (handle) {
+      handle.setAttribute("aria-pressed", "false");
+      handle.setAttribute("aria-label", labels.float);
+    }
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
   };
-  const change = async () => {
-    try {
-      while (wanted !== index && !scope.disposed) {
-        const previous = index;
-        const next = wanted;
-        const out = reduced() ? null : flowOut(itemsOf(steps[previous]), { duration });
-        if (out) await out;
-        if (scope.disposed) return;
-        index = next;
-        show(index);
-        const step = steps[index];
-        await nextFrame();
-        if (scope.disposed) return;
-        const items = itemsOf(step);
-        clearStyles(items, ["visibility"]);
-        flowIn(items, { duration, autoAlpha: false });
-        counter();
-        focusTitle(step);
-        root.dispatchEvent(new CustomEvent("mk:step", { bubbles: true, detail: { index, previous, step } }));
-        options.onChange?.(index, previous);
-      }
-    } finally {
-      running2 = null;
+  const anchorBox = () => options.anchor ? options.anchor() : opener?.isConnected ? opener.getBoundingClientRect() : null;
+  const startSession = () => {
+    if (drawer && modal) {
+      const root = document.documentElement;
+      const overflow = root.style.overflow;
+      root.style.overflow = "hidden";
+      session.push(() => {
+        root.style.overflow = overflow;
+        if (root.getAttribute("style") === "") root.removeAttribute("style");
+      });
+    }
+    if (sheet) {
+      const behind = [...document.querySelectorAll("[data-mk-underlay]")];
+      pushUnderlay(behind);
+      const root = document.documentElement;
+      const overflow = root.style.overflow;
+      root.style.overflow = "hidden";
+      session.push(() => {
+        root.style.overflow = overflow;
+        if (root.getAttribute("style") === "") root.removeAttribute("style");
+        releaseUnderlay(behind, !tearingDown);
+      });
+    }
+    if (autoResize && typeof ResizeObserver === "function") {
+      let last = dialog.offsetHeight;
+      let resizing = null;
+      const observer = new ResizeObserver(() => {
+        if (resizing?.isActive()) return;
+        const next = dialog.offsetHeight;
+        const previous = last;
+        last = next;
+        if (floating || Math.abs(next - previous) < 2 || !previous || isMorphing(dialog) || reduced()) return;
+        resizing = gsap.fromTo(
+          dialog,
+          { height: previous },
+          {
+            height: next,
+            duration: TIMING.dialog.autoResize,
+            ease: EASE.signature,
+            clearProps: "height",
+            onComplete: () => {
+              last = dialog.offsetHeight;
+            }
+          }
+        );
+      });
+      observer.observe(dialog);
+      session.push(() => {
+        observer.disconnect();
+        resizing?.kill();
+        clearStyles([dialog], ["height"]);
+      });
+    }
+    if (drag) {
+      session.push(
+        attachDragDismiss(dialog, {
+          canDrag: () => !isMorphing(dialog) && !floating && !closing && isOpen,
+          onDismiss: () => close(true)
+        })
+      );
+    }
+    if (placement === "anchor") {
+      const onResize = () => {
+        if (isOpen && !floating) anchorSurface(dialog, anchorBox());
+      };
+      addEventListener("resize", onResize);
+      session.push(() => {
+        removeEventListener("resize", onResize);
+        clearAnchor(dialog);
+      });
+    }
+    if (floatKey && handle) {
+      session.push(attachFloating(dialog, { key: floatKey, handle, corners, isFloating: () => floating, float: lift, dock }));
+      const onResize = () => {
+        if (floating && !floatingAvailable()) dock();
+      };
+      addEventListener("resize", onResize);
+      session.push(() => removeEventListener("resize", onResize));
     }
   };
-  const goTo = (to) => {
-    wanted = clamp5(to);
-    if (wanted === index && !running2) return Promise.resolve();
-    running2 ??= change();
-    return running2;
+  const open = (origin) => {
+    if (destroyed || isOpen) return;
+    const active = document.activeElement;
+    opener = origin !== void 0 ? origin : active instanceof HTMLElement && active !== document.body && !dialog.contains(active) ? active : null;
+    closing = false;
+    isOpen = true;
+    openModal(dialog, modal);
+    if (placement === "anchor") anchorSurface(dialog, anchorBox());
+    if (backdrop && modal) void fadeBackdrop(dialog, "in");
+    if (sheet) sheetOpen(dialog);
+    else if (drawer) slideOpen(dialog);
+    else morphOpen(dialog, opener, { hideOrigin: true, liquid, content: options.animateContent === false ? ":scope > :not(*)" : void 0 });
+    startSession();
+    attachScroll();
+    dialog.querySelector(FIELDS)?.focus({ preventScroll: true });
+    emit("mk:open", false, { origin: opener });
+    options.onOpen?.();
   };
-  show(index);
-  scope.add(() => {
-    stopCounter();
-    for (const step of steps) {
-      const items = itemsOf(step);
-      gsap.killTweensOf(items);
-      clearStyles(items, ITEM_STYLES);
+  const close = (inPlace = false) => {
+    if (destroyed || !isOpen || closing) return;
+    if (!emit("mk:close", true, { inPlace })) return;
+    closing = true;
+    if (sheet) sheetClose(dialog, { inPlace });
+    else if (drawer) slideClose(dialog);
+    else morphCloseWithGhost(dialog, opener, { inPlace, liquid });
+    endSession();
+    if (floating) settleFloating();
+    if (dialog.hasAttribute("open")) closeModal(dialog);
+    isOpen = false;
+    closing = false;
+    if (opener?.isConnected) opener.focus();
+    emit("mk:closed");
+    options.onClose?.();
+  };
+  scope.on(dialog, "cancel", (event) => {
+    event.preventDefault();
+    close();
+  });
+  scope.on(dialog, "close", () => {
+    if (ownCloses > 0) {
+      ownCloses -= 1;
+      return;
+    }
+    if (!isOpen || closing) return;
+    closedQuietly();
+  });
+  scope.on(dialog, "keydown", (event) => {
+    if (event.key === "Escape" && floating) {
+      event.preventDefault();
+      close();
     }
   });
-  scope.on(root, "click", (event) => {
-    const trigger = event.target?.closest("[data-mk-step-next], [data-mk-step-prev], [data-mk-step-goto]");
-    if (!trigger || !root.contains(trigger)) return;
-    if (trigger.hasAttribute("data-mk-step-next")) void goTo(wanted + 1);
-    else if (trigger.hasAttribute("data-mk-step-prev")) void goTo(wanted - 1);
-    else void goTo(Number(trigger.dataset.mkStepGoto) - 1);
+  scope.on(dialog, "click", (event) => {
+    const target = event.target;
+    if (target?.closest('[data-mk-part="close"], [data-mk-close]') && dialog.contains(target)) {
+      close();
+      return;
+    }
+    if (target !== dialog || !closeOnBackdrop || floating) return;
+    const mouse = event;
+    const box = dialog.getBoundingClientRect();
+    if (mouse.clientX < box.left || mouse.clientX > box.right || mouse.clientY < box.top || mouse.clientY > box.bottom) close();
   });
-  const counterEl = root.querySelector("[data-mk-counter]");
-  if (counterEl) {
-    const text = counterEl.textContent;
-    counterEl.textContent = String(index + 1);
-    scope.add(() => {
-      counterEl.textContent = text;
+  const triggerId = triggers === true ? dialog.id : triggers || "";
+  if (triggerId) {
+    const selector = `[data-mk-open="${typeof CSS !== "undefined" && CSS.escape ? CSS.escape(triggerId) : triggerId}"]`;
+    scope.on(document, "click", (event) => {
+      const trigger = event.target?.closest(selector);
+      if (!trigger || dialog.contains(trigger)) return;
+      event.preventDefault();
+      if (isOpen) close();
+      else open(trigger);
     });
   }
-  if (animateFirst && entrances()) flowIn(itemsOf(steps[index]), { duration });
-  root.dataset.mkReady = "";
+  dialog.dataset.mkReady = "";
+  let bodyScroll = null;
+  function attachScroll() {
+    const body = part(dialog, "body");
+    if (bodyScroll && bodyScroll.body === body) return bodyScroll.area.refresh();
+    bodyScroll?.area.destroy();
+    bodyScroll = body ? { body, area: createScrollArea(dialog, { viewport: body, axis: "y", focusable: false, decorative: true }) } : null;
+  }
+  attachScroll();
+  scope.add(() => bodyScroll?.area.destroy());
   return {
-    next: () => goTo(wanted + 1),
-    prev: () => goTo(wanted - 1),
-    goTo,
-    busy(on) {
-      scope.attr(root, "aria-busy", on ? "true" : null);
-      const background = root.querySelector(".mk-chat-background, mk-chat-background");
-      chatBackgroundOf(background)?.busy(on);
-    },
-    get index() {
-      return index;
-    },
-    get count() {
-      return steps.length;
+    open,
+    close: () => close(),
+    toggle: (origin) => isOpen ? close() : open(origin),
+    float: lift,
+    dock,
+    get isOpen() {
+      return isOpen;
     },
-    get steps() {
-      return steps;
+    get isFloating() {
+      return floating;
     },
+    element: dialog,
     destroy() {
+      if (destroyed) return;
+      tearingDown = true;
+      if (isOpen) {
+        settleFloating();
+        closing = true;
+        if (dialog.hasAttribute("open")) closeModal(dialog);
+        closedQuietly();
+      }
+      destroyed = true;
+      endSession();
+      gsap.killTweensOf(dialog);
+      clearStyles([dialog], [...MORPH_STYLES, "height"]);
       scope.dispose();
-      delete root.dataset.mkReady;
+      delete dialog.dataset.mkReady;
     }
   };
 }
 
-// src/components/quantity/engine.ts
-function createQuantity(root, options = {}) {
-  const input = root?.querySelector("[data-mk-quantity-input]");
-  if (!root || !input) return inert({ setValue() {
-  }, value: 0 });
+// src/components/menu/engine.ts
+var ITEM = "[data-mk-item]";
+function createMenu(dialog, options = {}) {
+  if (!dialog) {
+    warnOnce("menu: missing <dialog> element");
+    return inert({
+      open() {
+      },
+      close() {
+      },
+      toggle() {
+      },
+      float() {
+      },
+      dock() {
+      },
+      isOpen: false,
+      isFloating: false,
+      element: null,
+      items: []
+    });
+  }
+  const { closeOnSelect = true } = options;
   const scope = createScope();
-  const min = Number.isFinite(options.min) ? options.min : 1;
-  const max = Number.isFinite(options.max) ? Math.max(min, options.max) : Math.max(min, 999);
-  const step = Number.isFinite(options.step) && options.step > 0 ? options.step : 1;
-  const steps = Math.floor((max - min) / step + 1e-9);
-  const upper = Math.min(max, Number((min + steps * step).toFixed(10)));
-  const normalize3 = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
-  const original = input.value;
-  const disabled = options.disabled ?? input.disabled;
-  const decrease = root.querySelector("[data-mk-quantity-decrease]");
-  const increase = root.querySelector("[data-mk-quantity-increase]");
-  scope.attr(input, "min", String(min));
-  scope.attr(input, "max", String(max));
-  scope.attr(input, "step", String(step));
-  scope.attr(input, "disabled", disabled ? "" : null);
-  scope.attr(root, "data-mk-ready", "");
-  const initial = input.value.trim() ? Number(input.value) : NaN;
-  let value = normalize3(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
-  let pendingReset = null;
-  const typed = () => input.value.trim() && Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : NaN;
-  const render = (syncInput = true) => {
-    if (pendingReset) {
-      if (pendingReset.eventPhase !== 0) return;
-      if (!pendingReset.defaultPrevented) value = normalize3(Number.isFinite(typed()) ? typed() : min);
-      pendingReset = null;
+  let ticketAnimation;
+  if (options.ticket) {
+    scope.attr(dialog, "data-mk-ticket", "");
+    scope.attr(dialog, "style", dialog.getAttribute("style"));
+    for (const item of dialog.querySelectorAll(ITEM)) scope.attr(item, "style", item.getAttribute("style"));
+    scope.add(() => ticketAnimation?.kill());
+  }
+  const items = () => [...dialog.querySelectorAll(ITEM)].filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true");
+  scope.attr(dialog, "role", "menu");
+  const markItems = () => {
+    for (const item of dialog.querySelectorAll(ITEM)) {
+      scope.attr(item, "role", "menuitem");
+      scope.attr(item, "tabindex", "-1");
     }
-    if (syncInput) input.value = String(value);
-    if (decrease) scope.attr(decrease, "disabled", disabled || value <= min ? "" : null);
-    if (increase) scope.attr(increase, "disabled", disabled || value >= upper ? "" : null);
   };
-  const commit = (next, notify, syncInput) => {
-    if (scope.disposed || !Number.isFinite(next)) return;
-    if (pendingReset?.eventPhase === 0) pendingReset = null;
-    const previous = value;
-    value = normalize3(next);
-    render(syncInput);
-    if (notify && value !== previous) {
-      options.onChange?.(value);
-      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value, previous } }));
+  markItems();
+  const surface = createDialog(dialog, {
+    ...options,
+    placement: "anchor",
+    backdrop: false,
+    drag: false,
+    autoResize: false,
+    animateContent: false,
+    onOpen: () => {
+      markItems();
+      const list3 = items();
+      if (options.ticket && !reduced()) {
+        ticketAnimation?.kill();
+        ticketAnimation = gsap.timeline().fromTo(dialog, { clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0% 0)", duration: TIMING.ticketMenu.open, ease: "expo.out" }).fromTo(list3, { yPercent: TIMING.ticketMenu.from }, { yPercent: 0, duration: TIMING.ticketMenu.content, stagger: TIMING.ticketMenu.stagger, ease: "expo.out" }, 0);
+      } else flowInMenu(list3);
+      list3[0]?.focus({ preventScroll: true });
+      options.onOpen?.();
     }
-  };
-  const setValue = (next, notify = true) => commit(next, notify, true);
-  if (decrease) scope.on(decrease, "click", () => {
-    if (!decrease.disabled) setValue(value - step);
-  });
-  if (increase) scope.on(increase, "click", () => {
-    if (!increase.disabled) setValue(value + step);
-  });
-  scope.on(input, "input", () => {
-    const n = typed();
-    if (Number.isFinite(n) && normalize3(n) === n) commit(n, true, false);
-  });
-  scope.on(input, "change", () => {
-    if (Number.isFinite(typed())) setValue(typed());
-    else render();
-  });
-  scope.on(input, "blur", () => render());
-  if (input.form) scope.on(input.form, "reset", (event) => {
-    render();
-    pendingReset = event;
-    scope.timeout(() => {
-      if (pendingReset === event) render();
-    }, 0);
   });
-  scope.add(() => {
-    input.value = original;
+  const select = (item) => {
+    const value = item.dataset.mkValue ?? item.textContent?.trim() ?? "";
+    dialog.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { value, item } }));
+    options.onSelect?.(value, item);
+    if (closeOnSelect) surface.close();
+  };
+  scope.on(dialog, "click", (event) => {
+    const item = event.target?.closest(ITEM);
+    if (item && dialog.contains(item) && items().includes(item)) select(item);
   });
-  render();
-  return { setValue, get value() {
-    return value;
-  }, destroy: () => scope.dispose() };
-}
-
-// src/motion/micro.ts
-var list2 = (targets) => !targets ? [] : targets instanceof Element ? [targets] : [...targets];
-var live = () => {
-  registerMotion();
-  return !reduced();
-};
-function press(el5) {
-  if (!el5 || !live()) return null;
-  gsap.killTweensOf(el5, "scaleX,scaleY");
-  return gsap.timeline({
-    onComplete: () => {
-      gsap.set(el5, { clearProps: "scale,transform" });
+  scope.on(dialog, "keydown", (event) => {
+    const key2 = event.key;
+    const list3 = items();
+    if (!list3.length) return;
+    const at = list3.indexOf(document.activeElement);
+    const moves = {
+      ArrowDown: at < 0 ? 0 : (at + 1) % list3.length,
+      ArrowUp: at < 0 ? list3.length - 1 : (at - 1 + list3.length) % list3.length,
+      Home: 0,
+      End: list3.length - 1
+    };
+    if (key2 in moves) {
+      event.preventDefault();
+      list3[moves[key2]]?.focus();
+      return;
+    }
+    const target = event.target;
+    if ((key2 === "Enter" || key2 === " ") && list3.includes(target) && !target.matches("button, a[href]")) {
+      event.preventDefault();
+      select(target);
     }
-  }).to(el5, { scaleX: 0.95, scaleY: 0.9, duration: 0.1, ease: "power2.out" }).to(el5, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click });
-}
-function blurIn(targets, { from = "rise", stagger = 0.05, delay = 0, duration } = {}) {
-  const items = list2(targets);
-  if (!items.length || !live()) return null;
-  const start = from === "pop" ? { opacity: 0, scale: 0.7, filter: "blur(32px)" } : from === "soft" ? { opacity: 0, scale: 0.96, filter: "blur(16px)" } : { opacity: 0, y: -20, filter: "blur(16px)" };
-  return gsap.fromTo(items, start, {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    filter: "blur(0px)",
-    duration: duration ?? (from === "pop" ? 0.3 : 0.5),
-    ease: from === "pop" ? EASE.pop : "power2.out",
-    stagger,
-    delay,
-    clearProps: "opacity,transform,filter"
   });
+  return {
+    open: surface.open,
+    close: surface.close,
+    toggle: surface.toggle,
+    float: surface.float,
+    dock: surface.dock,
+    get isOpen() {
+      return surface.isOpen;
+    },
+    get isFloating() {
+      return surface.isFloating;
+    },
+    get items() {
+      return items();
+    },
+    element: dialog,
+    destroy() {
+      surface.destroy();
+      scope.dispose();
+    }
+  };
 }
-function blurOut(targets, { to = "up", onComplete } = {}) {
-  const items = list2(targets);
-  if (!items.length) return null;
-  if (!live()) {
-    onComplete?.();
-    return null;
+
+// src/components/chat-background/engine.ts
+var VARS = ["--mk-chat-orbit-1", "--mk-chat-orbit-2", "--mk-chat-blob-opacity", "--mk-chat-scale"];
+var instances = /* @__PURE__ */ new WeakMap();
+var chatBackgroundOf = (el5) => el5 ? instances.get(el5) ?? null : null;
+function createChatBackground(root, options = {}) {
+  if (!root) {
+    warnOnce("chat-background: missing root");
+    return inert({ setEnergy() {
+    }, setScale() {
+    }, busy() {
+    }, energy: 0, scale: 1 });
   }
-  const end = to === "left" ? { x: -64 } : to === "down" ? { y: 24 } : { y: -20 };
-  return gsap.to(items, { ...end, opacity: 0, filter: "blur(16px)", duration: 0.5, ease: "power2.out", onComplete });
-}
-function collapse(el5, { onComplete } = {}) {
-  if (!el5) return null;
-  if (!live()) {
-    onComplete?.();
-    return null;
+  registerMotion();
+  const scope = createScope();
+  const state = { energy: options.energy ?? 0, scale: options.scale ?? 1 };
+  let noise = root.querySelector(":scope > .mk-chat-background__noise");
+  if (!noise) {
+    noise = document.createElement("div");
+    noise.className = "mk-chat-background__noise";
+    noise.setAttribute("aria-hidden", "true");
+    root.append(noise);
+    const created = noise;
+    scope.add(() => created.remove());
   }
-  return gsap.to(el5, {
-    height: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    marginTop: 0,
-    marginBottom: 0,
-    opacity: 0,
-    filter: "blur(16px)",
-    overflow: "hidden",
-    duration: 0.25,
-    ease: "power2.in",
-    onComplete
-  });
-}
-function shake(el5, distance = 4) {
-  if (!el5 || !live()) return null;
-  gsap.killTweensOf(el5, "x");
-  return gsap.to(el5, {
-    keyframes: { x: [0, -distance, distance, -distance, 0] },
-    duration: 0.5,
-    ease: EASE.shake,
-    clearProps: "x,transform"
+  scope.attr(root, "aria-hidden", "true");
+  const paint = () => {
+    const e = Math.max(0, state.energy);
+    root.style.setProperty("--mk-chat-orbit-1", `${Math.max(1, 10 - 3.5 * e).toFixed(3)}s`);
+    root.style.setProperty("--mk-chat-orbit-2", `${Math.max(1, 15 - 4.5 * e).toFixed(3)}s`);
+    root.style.setProperty("--mk-chat-blob-opacity", (0.5 + 0.15 * e).toFixed(3));
+    root.style.setProperty("--mk-chat-scale", ((1 + 0.1 * e) * state.scale).toFixed(3));
+  };
+  scope.add(() => {
+    gsap.killTweensOf(state);
+    for (const name of VARS) root.style.removeProperty(name);
+    if (root.getAttribute("style") === "") root.removeAttribute("style");
   });
-}
-function ringPulse(el5, color = "var(--mk-accent-soft)") {
-  if (!el5 || !live()) return null;
-  const before = { color: el5.style.outlineColor, style: el5.style.outlineStyle, offset: el5.style.outlineOffset };
-  el5.style.outlineColor = color;
-  el5.style.outlineStyle = "solid";
-  el5.style.outlineOffset = "-4px";
-  const restore = () => {
-    el5.style.outlineColor = before.color;
-    el5.style.outlineStyle = before.style;
-    el5.style.outlineOffset = before.offset;
-    el5.style.removeProperty("outline-width");
-    if (el5.getAttribute("style") === "") el5.removeAttribute("style");
+  paint();
+  const instance = {
+    setEnergy(energy) {
+      state.energy = Number.isFinite(energy) ? energy : 0;
+      paint();
+    },
+    setScale(scale) {
+      state.scale = Number.isFinite(scale) ? scale : 1;
+      paint();
+    },
+    busy(on) {
+      const to = on ? { energy: 1.6, scale: 1.8 } : { energy: 0, scale: 1 };
+      gsap.killTweensOf(state);
+      if (reduced()) {
+        Object.assign(state, to);
+        paint();
+        return;
+      }
+      gsap.to(state, {
+        ...to,
+        duration: on ? TIMING.onboarding.busy : TIMING.onboarding.idle,
+        ease: on ? "power2.out" : "power2.inOut",
+        onUpdate: paint
+      });
+    },
+    get energy() {
+      return state.energy;
+    },
+    get scale() {
+      return state.scale;
+    },
+    destroy() {
+      instances.delete(root);
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
   };
-  return gsap.fromTo(el5, { outlineWidth: 0 }, { keyframes: { outlineWidth: [0, 4, 0] }, duration: 1, ease: "power1.inOut", onComplete: restore, onInterrupt: restore });
+  instances.set(root, instance);
+  root.dataset.mkReady = "";
+  return instance;
 }
-function burst(origin, { count = 7, distance = 28, colors = ["var(--mk-accent)"], ring = true, size = 6 } = {}) {
-  if (!origin || !live()) return null;
-  const layer = document.createElement("span");
-  layer.setAttribute("aria-hidden", "true");
-  layer.dataset.mkBurst = "";
-  Object.assign(layer.style, { position: "absolute", inset: "0", pointerEvents: "none", overflow: "visible", display: "grid", placeItems: "center" });
-  const positioned = getComputedStyle(origin).position !== "static";
-  const previousPosition = origin.style.position;
-  if (!positioned) origin.style.position = "relative";
-  origin.append(layer);
-  const cleanup = () => {
-    layer.remove();
-    if (!positioned) origin.style.position = previousPosition;
-    if (origin.getAttribute("style") === "") origin.removeAttribute("style");
-  };
-  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
-  if (ring) {
-    const circle = document.createElement("span");
-    Object.assign(circle.style, { position: "absolute", width: "100%", aspectRatio: "1", borderRadius: "50%", border: `2px solid ${colors[0]}` });
-    layer.append(circle);
-    timeline.fromTo(circle, { scale: 0.3, opacity: 0.9 }, { scale: 1.6, opacity: 0, duration: 0.5, ease: "power2.out" }, 0);
+
+// src/components/steps/engine.ts
+var STEP2 = "[data-mk-step]";
+var ITEM_STYLES = ["transform", "translate", "rotate", "scale", "filter", "opacity", "visibility"];
+function createSteps(root, options = {}) {
+  const steps = root ? [...root.querySelectorAll(STEP2)].filter((step) => {
+    const outer = step.parentElement?.closest(STEP2);
+    return !outer || !root.contains(outer);
+  }) : [];
+  if (!root || !steps.length) {
+    warnOnce("steps: needs [data-mk-step] children");
+    return inert({ next: async () => {
+    }, prev: async () => {
+    }, goTo: async () => {
+    }, busy() {
+    }, index: -1, count: 0, steps: [] });
   }
-  for (let i = 0; i < count; i++) {
-    const angle2 = i / count * Math.PI * 2 - Math.PI / 2;
-    for (const [k, scale] of [[0, 1], [1, 0.6]]) {
-      const dot = document.createElement("span");
-      Object.assign(dot.style, {
-        position: "absolute",
-        width: `${size * scale}px`,
-        height: `${size * scale}px`,
-        borderRadius: "50%",
-        background: colors[(i + k) % colors.length]
-      });
-      layer.append(dot);
-      const reach = distance * (k ? 0.72 : 1);
-      const turn = k ? 0.32 : 0;
-      timeline.fromTo(
-        dot,
-        { x: 0, y: 0, scale: 0, opacity: 1 },
-        { x: Math.cos(angle2 + turn) * reach, y: Math.sin(angle2 + turn) * reach, scale: 1, duration: 0.45, ease: "power3.out" },
-        0.05
-      );
-      timeline.to(dot, { scale: 0, opacity: 0, duration: 0.3, ease: "power2.in" }, 0.38);
+  registerMotion();
+  const scope = createScope();
+  const { duration = TIMING.onboarding.step, animateFirst = true, target = "[data-mk-flow-item]" } = options;
+  const clamp6 = (value) => Math.min(steps.length - 1, Math.max(0, Math.round(value)));
+  const marked3 = steps.findIndex((step) => step.hasAttribute("data-mk-current"));
+  let index = clamp6(options.index ?? (marked3 >= 0 ? marked3 : 0));
+  let wanted = index;
+  let running2 = null;
+  let stopCounter = () => {
+  };
+  const itemsOf = (step) => {
+    const marked4 = [...step.querySelectorAll(target)];
+    return marked4.length ? marked4 : [...step.children];
+  };
+  const show = (current3) => {
+    steps.forEach((step, i) => {
+      scope.attr(step, "hidden", i === current3 ? null : "");
+      scope.attr(step, "data-mk-current", i === current3 ? "" : null);
+    });
+  };
+  const counter = () => {
+    const el5 = root.querySelector("[data-mk-counter]");
+    if (!el5) return;
+    stopCounter();
+    stopCounter = revealCounter(el5, index + 1, { duration: TIMING.onboarding.counter });
+  };
+  const focusTitle = (step) => {
+    const title = step.querySelector("[data-mk-step-title]") ?? step.querySelector("h1, h2, h3, h4, h5, h6");
+    if (!title) return;
+    if (!title.hasAttribute("tabindex") && title.tabIndex < 0) scope.attr(title, "tabindex", "-1");
+    title.focus({ preventScroll: true });
+  };
+  const change = async () => {
+    try {
+      while (wanted !== index && !scope.disposed) {
+        const previous = index;
+        const next = wanted;
+        const out = reduced() ? null : flowOut(itemsOf(steps[previous]), { duration });
+        if (out) await out;
+        if (scope.disposed) return;
+        index = next;
+        show(index);
+        const step = steps[index];
+        await nextFrame();
+        if (scope.disposed) return;
+        const items = itemsOf(step);
+        clearStyles(items, ["visibility"]);
+        flowIn(items, { duration, autoAlpha: false });
+        counter();
+        focusTitle(step);
+        root.dispatchEvent(new CustomEvent("mk:step", { bubbles: true, detail: { index, previous, step } }));
+        options.onChange?.(index, previous);
+      }
+    } finally {
+      running2 = null;
+    }
+  };
+  const goTo = (to) => {
+    wanted = clamp6(to);
+    if (wanted === index && !running2) return Promise.resolve();
+    running2 ??= change();
+    return running2;
+  };
+  show(index);
+  scope.add(() => {
+    stopCounter();
+    for (const step of steps) {
+      const items = itemsOf(step);
+      gsap.killTweensOf(items);
+      clearStyles(items, ITEM_STYLES);
     }
+  });
+  scope.on(root, "click", (event) => {
+    const trigger = event.target?.closest("[data-mk-step-next], [data-mk-step-prev], [data-mk-step-goto]");
+    if (!trigger || !root.contains(trigger)) return;
+    if (trigger.hasAttribute("data-mk-step-next")) void goTo(wanted + 1);
+    else if (trigger.hasAttribute("data-mk-step-prev")) void goTo(wanted - 1);
+    else void goTo(Number(trigger.dataset.mkStepGoto) - 1);
+  });
+  const counterEl = root.querySelector("[data-mk-counter]");
+  if (counterEl) {
+    const text = counterEl.textContent;
+    counterEl.textContent = String(index + 1);
+    scope.add(() => {
+      counterEl.textContent = text;
+    });
   }
-  return timeline;
+  if (animateFirst && entrances()) flowIn(itemsOf(steps[index]), { duration });
+  root.dataset.mkReady = "";
+  return {
+    next: () => goTo(wanted + 1),
+    prev: () => goTo(wanted - 1),
+    goTo,
+    busy(on) {
+      scope.attr(root, "aria-busy", on ? "true" : null);
+      const background = root.querySelector(".mk-chat-background, mk-chat-background");
+      chatBackgroundOf(background)?.busy(on);
+    },
+    get index() {
+      return index;
+    },
+    get count() {
+      return steps.length;
+    },
+    get steps() {
+      return steps;
+    },
+    destroy() {
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
 }
-var rolling = /* @__PURE__ */ new WeakMap();
-function rollDigits(el5, text, direction = 1, duration = 0.5) {
-  if (!el5) return null;
-  rolling.get(el5)?.progress(1).kill();
-  rolling.delete(el5);
-  const previous = el5.textContent ?? "";
-  if (previous === text || !live()) {
-    el5.textContent = text;
-    return null;
-  }
-  const width = Math.max(previous.length, text.length);
-  const oldChars = previous.padStart(width, " ");
-  const newChars = text.padStart(width, " ");
-  el5.textContent = "";
-  const label = document.createElement("span");
-  label.className = "mk-sr-only";
-  label.textContent = text;
-  const visual = document.createElement("span");
-  visual.setAttribute("aria-hidden", "true");
-  visual.style.display = "inline-flex";
-  const moving = [];
-  const padding = Math.min(width - previous.length, width - text.length);
-  for (let i = padding; i < width; i++) {
-    const before = oldChars[i];
-    const after = newChars[i];
-    const cell = document.createElement("span");
-    Object.assign(cell.style, { position: "relative", display: "inline-block", overflow: "hidden", whiteSpace: "pre" });
-    const next = document.createElement("span");
-    next.style.display = "inline-block";
-    next.textContent = after;
-    cell.append(next);
-    if (before !== after) {
-      const old = document.createElement("span");
-      Object.assign(old.style, { position: "absolute", left: "0", top: "0", display: "inline-block" });
-      old.textContent = before;
-      cell.append(old);
-      moving.push([old, next]);
+
+// src/components/quantity/engine.ts
+function createQuantity(root, options = {}) {
+  const input = root?.querySelector("[data-mk-quantity-input]");
+  if (!root || !input) return inert({ setValue() {
+  }, value: 0 });
+  const scope = createScope();
+  const min = Number.isFinite(options.min) ? options.min : 1;
+  const max = Number.isFinite(options.max) ? Math.max(min, options.max) : Math.max(min, 999);
+  const step = Number.isFinite(options.step) && options.step > 0 ? options.step : 1;
+  const steps = Math.floor((max - min) / step + 1e-9);
+  const upper = Math.min(max, Number((min + steps * step).toFixed(10)));
+  const normalize3 = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
+  const original = input.value;
+  const disabled = options.disabled ?? input.disabled;
+  const decrease = root.querySelector("[data-mk-quantity-decrease]");
+  const increase = root.querySelector("[data-mk-quantity-increase]");
+  scope.attr(input, "min", String(min));
+  scope.attr(input, "max", String(max));
+  scope.attr(input, "step", String(step));
+  scope.attr(input, "disabled", disabled ? "" : null);
+  scope.attr(root, "data-mk-ready", "");
+  const initial = input.value.trim() ? Number(input.value) : NaN;
+  let value = normalize3(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
+  let pendingReset = null;
+  const typed = () => input.value.trim() && Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : NaN;
+  const render = (syncInput = true) => {
+    if (pendingReset) {
+      if (pendingReset.eventPhase !== 0) return;
+      if (!pendingReset.defaultPrevented) value = normalize3(Number.isFinite(typed()) ? typed() : min);
+      pendingReset = null;
     }
-    visual.append(cell);
-  }
-  el5.append(label, visual);
-  const timeline = gsap.timeline({
-    onComplete: () => {
-      el5.textContent = text;
-      rolling.delete(el5);
+    if (syncInput) input.value = String(value);
+    if (decrease) scope.attr(decrease, "disabled", disabled || value <= min ? "" : null);
+    if (increase) scope.attr(increase, "disabled", disabled || value >= upper ? "" : null);
+  };
+  const commit = (next, notify, syncInput) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    if (pendingReset?.eventPhase === 0) pendingReset = null;
+    const previous = value;
+    value = normalize3(next);
+    render(syncInput);
+    if (notify && value !== previous) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value, previous } }));
     }
+  };
+  const setValue = (next, notify = true) => commit(next, notify, true);
+  if (decrease) scope.on(decrease, "click", () => {
+    if (!decrease.disabled) setValue(value - step);
   });
-  moving.forEach(([old, next], i) => {
-    timeline.to(old, { yPercent: -100 * direction, opacity: 0, filter: "blur(4px)", duration, ease: EASE.signature }, i * 0.03);
-    timeline.fromTo(next, { yPercent: 100 * direction, opacity: 0, filter: "blur(4px)" }, { yPercent: 0, opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature }, i * 0.03);
+  if (increase) scope.on(increase, "click", () => {
+    if (!increase.disabled) setValue(value + step);
   });
-  rolling.set(el5, timeline);
-  return timeline;
+  scope.on(input, "input", () => {
+    const n = typed();
+    if (Number.isFinite(n) && normalize3(n) === n) commit(n, true, false);
+  });
+  scope.on(input, "change", () => {
+    if (Number.isFinite(typed())) setValue(typed());
+    else render();
+  });
+  scope.on(input, "blur", () => render());
+  if (input.form) scope.on(input.form, "reset", (event) => {
+    render();
+    pendingReset = event;
+    scope.timeout(() => {
+      if (pendingReset === event) render();
+    }, 0);
+  });
+  scope.add(() => {
+    input.value = original;
+  });
+  render();
+  return { setValue, get value() {
+    return value;
+  }, destroy: () => scope.dispose() };
 }
 
 // src/components/pagination/engine.ts
@@ -3081,7 +3520,7 @@ function createPagination(root, options = {}) {
 }
 
 // src/components/hover-card/engine.ts
-var sequence = 0;
+var sequence2 = 0;
 var EDGE2 = 12;
 var GAP2 = 12;
 var FOLD_MS = 400;
@@ -3103,7 +3542,7 @@ function createHoverCard(root, options = {}) {
   let id = panel.id;
   if (!id) {
     do {
-      id = `mk-hover-${++sequence}`;
+      id = `mk-hover-${++sequence2}`;
     } while (document.getElementById(id));
   }
   scope.attr(panel, "id", id);
@@ -4605,7 +5044,7 @@ var DEFAULT_LABELS2 = {
   removed: (name) => `${name} quitado`,
   rejected: ({ name, code, limit }) => code === "type" ? `${name}: tipo no permitido` : code === "size" ? `${name}: supera ${limit}` : `${name}: m\xE1ximo ${limit}`
 };
-var sequence2 = 0;
+var sequence3 = 0;
 function formatBytes(bytes) {
   if (!Number.isFinite(bytes) || bytes < 0) return "";
   const units = ["B", "KB", "MB", "GB"];
@@ -4817,7 +5256,7 @@ function createAttachment(root, options = {}) {
       owned.add(preview);
     }
     const progress = Number.isFinite(seed.progress) ? Math.min(100, Math.max(0, seed.progress)) : void 0;
-    return { id: seed.id ?? `mk-file-${++sequence2}`, name: seed.name, size: seed.size ?? source?.size ?? 0, type, file: source ?? seed.file, progress, status: seed.status ?? "idle", preview };
+    return { id: seed.id ?? `mk-file-${++sequence3}`, name: seed.name, size: seed.size ?? source?.size ?? 0, type, file: source ?? seed.file, progress, status: seed.status ?? "idle", preview };
   };
   const addFiles = (incoming) => {
     if (scope.disposed || disabled) return [];
@@ -5008,7 +5447,7 @@ function createSkeleton(root, options = {}) {
 // src/components/questionnaire/engine.ts
 var FIELDS2 = "input[name], select[name], textarea[name]";
 var SKIP = /* @__PURE__ */ new Set(["button", "submit", "reset", "image", "file"]);
-var sequence3 = 0;
+var sequence4 = 0;
 function readAnswers(form) {
   const answers = {};
   for (const field of form.querySelectorAll(FIELDS2)) {
@@ -5055,7 +5494,7 @@ function createQuestionnaire(root, options = {}) {
   };
   scope.add(() => errorTexts.forEach((text, element) => element.textContent = text));
   for (const element of form.querySelectorAll("[data-mk-question-error]")) {
-    if (!element.id) scope.attr(element, "id", `mk-question-error-${++sequence3}`);
+    if (!element.id) scope.attr(element, "id", `mk-question-error-${++sequence4}`);
     if (!element.matches("output") && !element.hasAttribute("role")) scope.attr(element, "role", "alert");
   }
   const markValid = (field) => {
@@ -5492,6 +5931,8 @@ function createCodeBlock(root, options = {}) {
   if (options.language) scope.attr(root, "data-mk-language", options.language);
   if (options.lineNumbers) scope.attr(root, "data-mk-line-numbers", "");
   scope.attr(root, "data-mk-ready", "");
+  const area = createScrollArea(root, { viewport: pre, focusable: false, decorative: true });
+  scope.add(() => area.destroy());
   const prerendered = Boolean(code.querySelector("[data-mk-code-line]"));
   let given = null;
   const highlight = !prerendered && (options.highlight ?? languageFamily(options.language) !== "plain");
@@ -5777,7 +6218,7 @@ function linkDomain(href) {
     return "";
   }
 }
-var sequence4 = 0;
+var sequence5 = 0;
 var part2 = (tag, name, text) => {
   const element = document.createElement(tag);
   element.dataset.mkPart = name;
@@ -5795,7 +6236,7 @@ function buildCard(options, href) {
       if (options.target === "_blank") card.setAttribute("rel", "noopener noreferrer");
     }
   }
-  const id = `mk-link-${++sequence4}`;
+  const id = `mk-link-${++sequence5}`;
   const media = part2("span", "media");
   const fallback = part2("span", "fallback", (options.siteName || domain || options.title || "?").trim().charAt(0).toUpperCase());
   fallback.setAttribute("aria-hidden", "true");
@@ -5905,8 +6346,8 @@ function createProgress(root, options = {}) {
   const max = finite(options.max) && options.max > min ? options.max : Math.max(min + 1, 100);
   const variant = options.variant === "ring" ? "ring" : "linear";
   const duration = finite(options.duration) ? Math.max(0, options.duration) : 0.7;
-  const clamp5 = (n) => Math.min(max, Math.max(min, n));
-  let value = options.value === null ? null : clamp5(finite(options.value) ? options.value : min);
+  const clamp6 = (n) => Math.min(max, Math.max(min, n));
+  let value = options.value === null ? null : clamp6(finite(options.value) ? options.value : min);
   const visual = document.createElement("span");
   visual.dataset.mkProgressVisual = "";
   visual.setAttribute("aria-hidden", "true");
@@ -6007,7 +6448,7 @@ function createProgress(root, options = {}) {
       if (scope.disposed) return;
       const previous = value;
       if (next === null) value = null;
-      else if (finite(next)) value = clamp5(next);
+      else if (finite(next)) value = clamp6(next);
       else return;
       render(previous, true);
     },
@@ -6275,7 +6716,7 @@ var SLOTS = 8;
 var BAR_MAX = 24;
 var GAP3 = 2;
 var END_RADIUS = 3;
-var sequence5 = 0;
+var sequence6 = 0;
 var svg = (tag, attrs = {}) => {
   const element = document.createElementNS(SVG2, tag);
   for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
@@ -6335,7 +6776,7 @@ function createChart(root, initial = {}) {
   }, selected: null });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-chart-${++sequence5}`;
+  const uid2 = `mk-chart-${++sequence6}`;
   let options = { ...initial };
   let selected = null;
   let model = modelOf(options);
@@ -7138,7 +7579,7 @@ var LABELS = {
 };
 var FIELDS3 = ["number", "name", "expiry", "cvc"];
 var NAMES = { number: "cc-number", name: "cc-name", expiry: "cc-exp", cvc: "cc-csc" };
-var sequence6 = 0;
+var sequence7 = 0;
 var el = (tag, attrs = {}, text) => {
   const element = document.createElement(tag);
   for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, value);
@@ -7152,7 +7593,7 @@ function createCreditCard(root, options = {}) {
   registerMotion();
   const scope = createScope();
   const labels = { ...LABELS, ...options.labels };
-  const uid2 = `mk-card-${++sequence6}`;
+  const uid2 = `mk-card-${++sequence7}`;
   const made = [];
   const own = (element) => {
     made.push(element);
@@ -7491,7 +7932,7 @@ function matchScore(query, text) {
 
 // src/components/command-search/engine.ts
 var SEARCH_ICON = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg>';
-var sequence7 = 0;
+var sequence8 = 0;
 var el2 = (tag, attrs = {}, text) => {
   const element = document.createElement(tag);
   for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, value);
@@ -7516,7 +7957,7 @@ function createCommandSearch(root, options = {}) {
   }, isOpen: false });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-command-${++sequence7}`;
+  const uid2 = `mk-command-${++sequence8}`;
   let items = [...options.items ?? []];
   const limit = Number.isFinite(options.limit) && options.limit > 0 ? Math.floor(options.limit) : 50;
   const dialog = el2("dialog", { "data-mk-command": "", "aria-label": options.label ?? "Buscar" });
@@ -7550,6 +7991,8 @@ function createCommandSearch(root, options = {}) {
   root.append(dialog);
   scope.add(() => dialog.remove());
   scope.attr(root, "data-mk-ready", "");
+  const area = createScrollArea(panel, { viewport: scroller, axis: "y", focusable: false, decorative: true });
+  scope.add(() => area.destroy());
   let isOpen = false;
   let opener = null;
   let from = null;
@@ -7674,6 +8117,7 @@ function createCommandSearch(root, options = {}) {
     input.value = "";
     openModal(dialog);
     render(false);
+    area.refresh();
     input.focus();
     void fadeBackdrop(dialog, "in");
     morphOpen(panel, from, { hideOrigin: true });
@@ -7771,7 +8215,7 @@ function createCommandSearch(root, options = {}) {
 
 // src/components/hold-confirm/engine.ts
 var CHECK = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg>';
-var sequence8 = 0;
+var sequence9 = 0;
 function createHoldConfirm(root, options = {}) {
   const button2 = root ? root.matches("button") ? root : root.querySelector("button") : null;
   if (!root || !button2) return inert({ reset() {
@@ -7805,7 +8249,7 @@ function createHoldConfirm(root, options = {}) {
   check.innerHTML = CHECK;
   const hint = add(root === button2 ? button2 : root, document.createElement("span"));
   hint.className = "mk-sr-only";
-  hint.id = `mk-hold-${++sequence8}`;
+  hint.id = `mk-hold-${++sequence9}`;
   hint.textContent = options.hint ?? "Mant\xE9n pulsado para confirmar";
   const live2 = add(root === button2 ? button2 : root, document.createElement("span"));
   live2.className = "mk-sr-only";
@@ -8585,7 +9029,7 @@ var PUPIL = "M12 9.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z";
 var SLASH = "M4 4l16 16";
 var CHECK2 = "M5 12.5l4.5 4.5L19 7.5";
 var ORDER = ["length", "lower", "upper", "number", "symbol"];
-var sequence9 = 0;
+var sequence10 = 0;
 var icon = (paths, part3) => {
   const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg2.setAttribute("viewBox", "0 0 24 24");
@@ -8603,7 +9047,7 @@ function createPasswordStrength(root, options = {}) {
   if (!root) return inert({ score: 0, value: "" });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-password-${++sequence9}`;
+  const uid2 = `mk-password-${++sequence10}`;
   const minLength = Number.isFinite(options.minLength) && options.minLength > 0 ? Math.floor(options.minLength) : 8;
   const score = options.score ?? ((value) => scorePassword(value, minLength));
   const labels = {
@@ -8961,7 +9405,7 @@ function createScratchCard(root, options = {}) {
 // src/components/star-rating/engine.ts
 var STAR = "M12 3.2l2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 16.6l-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z";
 var LABELS2 = ["Mala", "Regular", "Buena", "Muy buena", "Excelente"];
-var sequence10 = 0;
+var sequence11 = 0;
 var star = () => {
   const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg2.setAttribute("viewBox", "0 0 24 24");
@@ -8982,9 +9426,9 @@ function createStarRating(root, options = {}) {
   const scope = createScope();
   const max = Math.max(1, Math.min(10, Math.round(Number.isFinite(options.max) ? options.max : 5)));
   const texts = options.labels ?? (max === 5 ? LABELS2 : []);
-  const clamp5 = (n) => Math.max(0, Math.min(max, n));
-  let value = clamp5(Number.isFinite(options.value) ? options.value : 0);
-  const name = options.name ?? `rating-${++sequence10}`;
+  const clamp6 = (n) => Math.max(0, Math.min(max, n));
+  let value = clamp6(Number.isFinite(options.value) ? options.value : 0);
+  const name = options.name ?? `rating-${++sequence11}`;
   const group = document.createElement("div");
   group.dataset.mkStars = "";
   const caption = document.createElement("span");
@@ -9071,7 +9515,7 @@ function createStarRating(root, options = {}) {
   };
   const choose = (next, notify, animate) => {
     if (scope.disposed) return;
-    const target = clamp5(Math.round(next));
+    const target = clamp6(Math.round(next));
     if (target === value) return;
     value = target;
     paint();
@@ -9360,17 +9804,17 @@ var CHANNEL_RANGE = {
   blue: [0, 255],
   alpha: [0, 1]
 };
-var clamp2 = (n, min, max) => Math.min(max, Math.max(min, Number.isFinite(n) ? n : min));
+var clamp3 = (n, min, max) => Math.min(max, Math.max(min, Number.isFinite(n) ? n : min));
 var tidy = (n) => Math.round(n * 100) / 100;
 var wrapHue = (h) => {
   const hue = (h % 360 + 360) % 360;
   return hue === 0 && h > 0 ? 360 : hue;
 };
 var hsva = (h, s, v, a) => ({
-  h: tidy(clamp2(h, 0, 360)),
-  s: tidy(clamp2(s, 0, 100)),
-  v: tidy(clamp2(v, 0, 100)),
-  a: Math.round(clamp2(a, 0, 1) * 1e3) / 1e3
+  h: tidy(clamp3(h, 0, 360)),
+  s: tidy(clamp3(s, 0, 100)),
+  v: tidy(clamp3(v, 0, 100)),
+  a: Math.round(clamp3(a, 0, 1) * 1e3) / 1e3
 });
 function hsvToRgb({ h, s, v, a }) {
   const sat = s / 100;
@@ -9415,7 +9859,7 @@ var number = (text, scale) => {
   if (!Number.isFinite(value)) return Number.NaN;
   return text.trim().endsWith("%") ? value / 100 * scale : value;
 };
-var alphaOf = (text) => text === void 0 ? 1 : clamp2(number(text, 1), 0, 1);
+var alphaOf = (text) => text === void 0 ? 1 : clamp3(number(text, 1), 0, 1);
 var angle = (text) => {
   const value = Number.parseFloat(text);
   if (!Number.isFinite(value)) return Number.NaN;
@@ -9452,7 +9896,7 @@ function parseColor(input, hue) {
     const [r, g, b] = rgb.slice(0, 3).map((part3) => number(part3, 255));
     const a = alphaOf(rgb[3]);
     if (![r, g, b, a].every(Number.isFinite)) return null;
-    return rgbToHsv({ r: clamp2(r, 0, 255), g: clamp2(g, 0, 255), b: clamp2(b, 0, 255), a }, hue);
+    return rgbToHsv({ r: clamp3(r, 0, 255), g: clamp3(g, 0, 255), b: clamp3(b, 0, 255), a }, hue);
   }
   const hsl = args(text, "hsl");
   if (hsl) {
@@ -9461,7 +9905,7 @@ function parseColor(input, hue) {
     const l = Number.parseFloat(hsl[2]);
     const a = alphaOf(hsl[3]);
     if (![h, s, l, a].every(Number.isFinite)) return null;
-    const color = hslToHsv({ h: wrapHue(h), s: clamp2(s, 0, 100), l: clamp2(l, 0, 100), a });
+    const color = hslToHsv({ h: wrapHue(h), s: clamp3(s, 0, 100), l: clamp3(l, 0, 100), a });
     return color.s === 0 && hue !== void 0 ? { ...color, h: hue } : color;
   }
   return null;
@@ -9471,7 +9915,7 @@ function toHsva(input, fallback = DEFAULT) {
   if (input && typeof input === "object") return hsva(input.h, input.s, input.v, input.a ?? 1);
   return parseColor(input, fallback.h) ?? { ...fallback };
 }
-var byte = (n) => Math.round(clamp2(n, 0, 255));
+var byte = (n) => Math.round(clamp3(n, 0, 255));
 var hex2 = (n) => byte(n).toString(16).padStart(2, "0");
 var short = (n) => String(Math.round(n * 100) / 100);
 function toHex(color) {
@@ -9519,7 +9963,7 @@ function getChannel(color, channel) {
 }
 function setChannel(color, channel, value) {
   const [min, max] = CHANNEL_RANGE[channel];
-  const next = clamp2(value, min, max);
+  const next = clamp3(value, min, max);
   switch (channel) {
     case "hue":
       return hsva(next, color.s, color.v, color.a);
@@ -11098,7 +11542,7 @@ var ERRORS = {
   bounds: "Fecha fuera del rango permitido",
   blocked: "El rango incluye d\xEDas no disponibles"
 };
-var sequence11 = 0;
+var sequence12 = 0;
 var SETTLE = 0.35;
 var dateOf = (values) => {
   const { day: day2, month, year } = values;
@@ -11121,7 +11565,7 @@ function createDateRangePicker(root, options = {}) {
     effects.add(animation);
     for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
   };
-  const uid2 = `mk-range-${++sequence11}`;
+  const uid2 = `mk-range-${++sequence12}`;
   const locale = options.locale ?? root.closest("[lang]")?.getAttribute("lang") ?? "es";
   const unavailable = options.unavailable;
   const rules = {
@@ -11357,7 +11801,7 @@ function createDateRangePicker(root, options = {}) {
 
 // src/core/position.ts
 var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
-var clamp3 = (value, min, max) => Math.max(min, Math.min(value, max));
+var clamp4 = (value, min, max) => Math.max(min, Math.min(value, max));
 var round2 = (n) => Math.round(n * 100) / 100;
 function place2(anchor, size, options = {}) {
   const { placement = "top", gap = 8, edge = 8, align = "center", arrowPad = 12 } = options;
@@ -11383,16 +11827,16 @@ function place2(anchor, size, options = {}) {
   if (vertical) {
     y = side === "top" ? anchor.top - gap - size.height : anchor.top + anchor.height + gap;
     x = align === "start" ? anchor.left : align === "end" ? anchor.left + anchor.width - size.width : anchor.left + anchor.width / 2 - size.width / 2;
-    x = clamp3(x, edge, view.width - edge - size.width);
+    x = clamp4(x, edge, view.width - edge - size.width);
   } else {
     x = side === "left" ? anchor.left - gap - size.width : anchor.left + anchor.width + gap;
     y = align === "start" ? anchor.top : align === "end" ? anchor.top + anchor.height - size.height : anchor.top + anchor.height / 2 - size.height / 2;
-    y = clamp3(y, edge, view.height - edge - size.height);
+    y = clamp4(y, edge, view.height - edge - size.height);
   }
   const length = vertical ? size.width : size.height;
   const centre = vertical ? anchor.left + anchor.width / 2 - x : anchor.top + anchor.height / 2 - y;
   const pad3 = Math.min(arrowPad, length / 2);
-  return { side, x: round2(x), y: round2(y), arrow: round2(clamp3(centre, pad3, length - pad3)) };
+  return { side, x: round2(x), y: round2(y), arrow: round2(clamp4(centre, pad3, length - pad3)) };
 }
 function originOf({ side, arrow }) {
   if (side === "top") return `${arrow}px 100%`;
@@ -11404,7 +11848,7 @@ function originOf({ side, arrow }) {
 // src/components/tooltip/engine.ts
 var FOCUSABLE2 = 'a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
 var WARM = 400;
-var sequence12 = 0;
+var sequence13 = 0;
 var current2 = null;
 var lastHidden = -Infinity;
 var now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
@@ -11427,7 +11871,7 @@ function createTooltip(root, options = {}) {
   const bubble = document.createElement("div");
   bubble.dataset.mkTooltipBubble = "";
   bubble.setAttribute("role", "tooltip");
-  bubble.id = `mk-tooltip-${++sequence12}`;
+  bubble.id = `mk-tooltip-${++sequence13}`;
   if (options.interactive) bubble.dataset.mkInteractive = "";
   const label = document.createElement("span");
   label.dataset.mkTooltipText = "";
@@ -11628,7 +12072,7 @@ function createTooltip(root, options = {}) {
 }
 
 // src/components/popover/engine.ts
-var sequence13 = 0;
+var sequence14 = 0;
 function createPopover(root, options = {}) {
   const inertInstance = inert({ open() {
   }, close() {
@@ -11654,7 +12098,7 @@ function createPopover(root, options = {}) {
   }
   const panel = dialog;
   scope.attr(panel, "class", [panel.getAttribute("class"), "mk-dialog", "mk-popover-panel"].filter(Boolean).join(" "));
-  if (!panel.id) scope.attr(panel, "id", `mk-popover-${++sequence13}`);
+  if (!panel.id) scope.attr(panel, "id", `mk-popover-${++sequence14}`);
   if (!panel.hasAttribute("aria-label") && !panel.hasAttribute("aria-labelledby")) scope.attr(panel, "aria-label", options.label ?? trigger.textContent?.trim() ?? "Panel");
   scope.attr(trigger, "aria-haspopup", "dialog");
   scope.attr(trigger, "aria-expanded", "false");
@@ -12919,7 +13363,7 @@ function createChips(options) {
 
 // src/core/listbox.ts
 var CHECK3 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg>';
-var sequence14 = 0;
+var sequence15 = 0;
 function marked2(text, query) {
   const fragment = document.createDocumentFragment();
   const match = query.trim() ? matchScore(query, text) : null;
@@ -12941,7 +13385,7 @@ function filterOptions(options, query) {
 function createListbox(options) {
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-listbox-${++sequence14}`;
+  const uid2 = `mk-listbox-${++sequence15}`;
   const list3 = document.createElement("div");
   list3.id = uid2;
   list3.dataset.mkListbox = "";
@@ -13404,7 +13848,7 @@ function createMultiSelect(root, settings = {}) {
 // src/components/tag-input/engine.ts
 var fold2 = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 var SEPARATORS = /[,;\n]+/;
-var sequence15 = 0;
+var sequence16 = 0;
 function createTagInput(root, settings = {}) {
   if (!root) return inert({ setValue() {
   }, add: () => false, remove() {
@@ -13412,7 +13856,7 @@ function createTagInput(root, settings = {}) {
   }, value: [] });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-tags-${++sequence15}`;
+  const uid2 = `mk-tags-${++sequence16}`;
   const max = Number.isFinite(settings.max) && settings.max > 0 ? Math.floor(settings.max) : Infinity;
   const clean = settings.transform ?? ((tag) => tag.replace(/\s+/g, " ").trim());
   let suggestions = [...settings.suggestions ?? []];
@@ -13657,7 +14101,7 @@ function createTagInput(root, settings = {}) {
 
 // src/components/date-time-picker/engine.ts
 var CALENDAR_ICON2 = '<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4"/><path d="M12 13.5v2.5l1.6 1"/></svg>';
-var sequence16 = 0;
+var sequence17 = 0;
 var pad2 = (n) => String(n).padStart(2, "0");
 function toDateTimeValue(input) {
   if (input === null || input === void 0 || input === "") return null;
@@ -13692,7 +14136,7 @@ function createDateTimePicker(root, options = {}) {
     for (const effect of effects) effect.kill();
     effects.clear();
   });
-  const uid2 = `mk-datetime-${++sequence16}`;
+  const uid2 = `mk-datetime-${++sequence17}`;
   const locale = options.locale ?? root.closest("[lang]")?.getAttribute("lang") ?? "es";
   const step = options.minuteStep && options.minuteStep > 0 ? Math.round(options.minuteStep) : 5;
   const min = toDateTimeValue(options.min);
@@ -13834,7 +14278,7 @@ function createDateTimePicker(root, options = {}) {
     result.setMinutes(Math.round(result.getMinutes() / step) * step);
     return result;
   };
-  const clamp5 = (date) => min && date < min ? new Date(min.getTime()) : max && date > max ? new Date(max.getTime()) : date;
+  const clamp6 = (date) => min && date < min ? new Date(min.getTime()) : max && date > max ? new Date(max.getTime()) : date;
   const timeOfDay = () => {
     if (value) return { hour: value.getHours(), minute: value.getMinutes() };
     const time2 = timeField.value?.split(":").map(Number);
@@ -13855,7 +14299,7 @@ function createDateTimePicker(root, options = {}) {
       const { hour, minute } = timeOfDay();
       const next = new Date(range.start.getTime());
       next.setHours(hour, minute, 0, 0);
-      commit(clamp5(next), true);
+      commit(clamp6(next), true);
     }
   });
   scope.add(() => calendar.destroy());
@@ -13871,7 +14315,7 @@ function createDateTimePicker(root, options = {}) {
       const base = value ?? toDate(options.today ?? /* @__PURE__ */ new Date());
       const next = new Date(base.getTime());
       next.setHours(hour, minute, 0, 0);
-      commit(clamp5(next), true);
+      commit(clamp6(next), true);
     }
   });
   scope.add(() => timeField.destroy());
@@ -13970,8 +14414,8 @@ var OPERATORS = {
     { id: "false", label: "es no", arity: 0 }
   ]
 };
-var sequence17 = 0;
-var filterId = () => `f${(++sequence17).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+var sequence18 = 0;
+var filterId = () => `f${(++sequence18).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
 var isGroup = (node) => "rules" in node && Array.isArray(node.rules);
 var emptyFilter = (combinator = "and") => ({ id: filterId(), combinator, rules: [] });
 var typeOf = (field) => field?.type ?? "text";
@@ -14164,6 +14608,9 @@ function createSelect(root, options = {}) {
   dialog.className = "mk-dialog mk-menu mk-select-menu";
   dialog.dataset.mkSelectMenu = "";
   dialog.setAttribute("aria-label", options.label ?? "Opciones");
+  const list3 = document.createElement("div");
+  list3.dataset.mkSelectList = "";
+  dialog.append(list3);
   root.append(dialog);
   made.push(dialog);
   scope.attr(root, "data-mk-ready", "");
@@ -14201,7 +14648,7 @@ function createSelect(root, options = {}) {
         nodes.push(heading, ...[...child.children].filter((node) => node instanceof HTMLOptionElement).map(item));
       } else if (child instanceof HTMLOptionElement) nodes.push(item(child));
     }
-    dialog.replaceChildren(...nodes);
+    list3.replaceChildren(...nodes);
   };
   const placeholderText = () => options.placeholder ?? choices().find((option) => option.value === "")?.text ?? "Elige\u2026";
   const markItems = () => {
@@ -14237,13 +14684,18 @@ function createSelect(root, options = {}) {
     options.onChange?.(value);
     root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
   };
+  const area = createScrollArea(dialog, { viewport: list3, axis: "y", focusable: false, decorative: true });
   const menu = createMenu(dialog, {
     triggers: false,
-    onOpen: markItems,
+    onOpen: () => {
+      markItems();
+      area.refresh();
+    },
     onClose: () => trigger.setAttribute("aria-expanded", "false"),
     onSelect: (value) => choose(value, true)
   });
   scope.add(() => menu.destroy());
+  scope.add(() => area.destroy());
   scope.on(dialog, "mk:select", (event) => event.stopPropagation());
   const open = () => {
     if (trigger.disabled || menu.isOpen) return;
@@ -14263,10 +14715,10 @@ function createSelect(root, options = {}) {
       open();
     } else if (key2.key.length === 1 && key2.key.trim()) {
       const letter = fold4(key2.key);
-      const list3 = choices();
-      const from = list3.findIndex((option) => option.value === select.value);
-      for (let step = 1; step <= list3.length; step++) {
-        const option = list3[(from + step) % list3.length];
+      const list4 = choices();
+      const from = list4.findIndex((option) => option.value === select.value);
+      for (let step = 1; step <= list4.length; step++) {
+        const option = list4[(from + step) % list4.length];
         if (!option.disabled && option.value !== "" && fold4(option.text).startsWith(letter)) {
           choose(option.value, true);
           break;
@@ -15286,7 +15738,7 @@ function moveTreeNode(nodes, id, into) {
 }
 var CHEVRON3 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>';
 var CHECK5 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path data-mk-tree-tick d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/><path data-mk-tree-dash d="M6 12h12"/></svg>';
-var sequence18 = 0;
+var sequence19 = 0;
 var fold6 = foldText;
 function createTreeView(root, options = {}) {
   if (!root) return inert({ expand() {
@@ -15303,7 +15755,7 @@ function createTreeView(root, options = {}) {
   }, selected: null, checked: [], expanded: [], element: null });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-tree-${++sequence18}`;
+  const uid2 = `mk-tree-${++sequence19}`;
   let nodes = fromJson(options.nodes) ?? [];
   const expanded = /* @__PURE__ */ new Set();
   if (options.expanded === true) walk(nodes, (node) => isBranch(node) && expanded.add(node.id));
@@ -15979,7 +16431,7 @@ var FOLDER2 = '<svg aria-hidden="true" viewBox="0 0 48 40"><path data-mk-fx-fold
 var PAGE2 = '<svg aria-hidden="true" viewBox="0 0 40 48"><path data-mk-fx-page d="M7 2h18.5L37 13.5V42a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><path data-mk-fx-fold d="M25.5 2v8.5a3 3 0 0 0 3 3H37z"/></svg>';
 var SORT_LABEL = { name: "Nombre", size: "Tama\xF1o", modified: "Modificado" };
 var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
-var sequence19 = 0;
+var sequence20 = 0;
 function iconOf(entry) {
   const icon2 = document.createElement("span");
   icon2.dataset.mkFxIcon = "";
@@ -16023,7 +16475,7 @@ function createFileExplorer(root, options = {}) {
   }
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-fx-${++sequence19}`;
+  const uid2 = `mk-fx-${++sequence20}`;
   const locale = options.locale ?? root.closest("[lang]")?.getAttribute("lang") ?? "es";
   const readOnly = Boolean(options.readOnly);
   const top = { id: ROOT_FOLDER, name: options.rootLabel ?? "Inicio", kind: "folder", children: cloneEntries(fromJson(options.files) ?? []) };
@@ -17498,7 +17950,7 @@ function createSizes(heights) {
 
 // src/components/virtual-list/engine.ts
 var FOOT_HEIGHT = 48;
-var sequence20 = 0;
+var sequence21 = 0;
 var defaultText = (item) => {
   if (item === null || item === void 0) return "";
   if (typeof item !== "object") return String(item);
@@ -17529,7 +17981,7 @@ function createVirtualList(root, options = {}) {
   }
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-vl-${++sequence20}`;
+  const uid2 = `mk-vl-${++sequence21}`;
   const locale = options.locale ?? root.closest("[lang]")?.getAttribute("lang") ?? "es";
   const adopted = root.querySelector(":scope > [data-mk-vl-viewport]");
   const authored = [...root.querySelectorAll(":scope > ul > li, :scope > ol > li")].map((li) => li.textContent?.trim() ?? "");
@@ -18068,7 +18520,7 @@ function createVirtualList(root, options = {}) {
 // src/components/resizable-panel/engine.ts
 var CHEVRON4 = (path) => `<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`;
 var ARROWS = { left: CHEVRON4("M15 6l-6 6 6 6"), right: CHEVRON4("M9 6l6 6-6 6"), up: CHEVRON4("M6 15l6-6 6 6"), down: CHEVRON4("M6 9l6 6 6-6") };
-var sequence21 = 0;
+var sequence22 = 0;
 var round3 = (n) => Math.round(n * 10) / 10;
 function normaliseSizes(sizes, count) {
   const given = Array.from({ length: count }, (_, i) => {
@@ -18095,7 +18547,7 @@ function createResizablePanel(root, options = {}) {
   }
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-rp-${++sequence21}`;
+  const uid2 = `mk-rp-${++sequence22}`;
   const panels = [...root.children].filter((child) => child instanceof HTMLElement && !child.hasAttribute("data-mk-resize-handle"));
   const count = panels.length;
   let orientation = options.orientation === "vertical" ? "vertical" : "horizontal";
@@ -18597,7 +19049,7 @@ var ICONS3 = {
 };
 var CHECK7 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path data-mk-dt-tick d="M5.5 12l4 4L18.5 7.5" pathLength="1"/><path data-mk-dt-dash d="M6.5 12h11"/></svg>';
 var plural3 = (n, one, many) => `${n} ${n === 1 ? one : many}`;
-var sequence22 = 0;
+var sequence23 = 0;
 function createDataTable(root, options = {}) {
   if (!root) {
     return inert({
@@ -18642,7 +19094,7 @@ function createDataTable(root, options = {}) {
   }
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-dt-${++sequence22}`;
+  const uid2 = `mk-dt-${++sequence23}`;
   const locale = options.locale ?? root.closest("[lang]")?.getAttribute("lang") ?? "es";
   const columns = (fromJson(options.columns) ?? []).map((column) => ({ ...column }));
   let rows = [...fromJson(options.rows) ?? []];
@@ -19539,7 +19991,7 @@ function createDataTable(root, options = {}) {
 
 // src/components/editable-table/engine.ts
 var plural4 = (n, one, many) => `${n} ${n === 1 ? one : many}`;
-var sequence23 = 0;
+var sequence24 = 0;
 var sameValue = (a, b) => a === b || (a === null || a === void 0 || a === "") && (b === null || b === void 0 || b === "");
 function createEditableTable(root, options = {}) {
   if (!root) {
@@ -19563,7 +20015,7 @@ function createEditableTable(root, options = {}) {
   }
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-et-${++sequence23}`;
+  const uid2 = `mk-et-${++sequence24}`;
   const columns = (fromJson(options.columns) ?? []).map((column) => ({ ...column }));
   const rowKey = options.rowKey ?? "id";
   const idOf = (row) => typeof rowKey === "function" ? rowKey(row) : row[rowKey];
@@ -21088,7 +21540,10 @@ function createScrollIsland(root, options = {}) {
     const size = as === "island" ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
     const top = (height - size) * progress();
     if (as !== "island") return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
-    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, content.scrollWidth + 28)), borderRadius: size / 2 };
+    content.style.maxWidth = "none";
+    const width = content.offsetWidth;
+    content.style.removeProperty("max-width");
+    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, width)), borderRadius: size / 2 };
   };
   const place3 = () => {
     const box = track();
@@ -21140,6 +21595,10 @@ function createScrollIsland(root, options = {}) {
   if (!page) scope.on(window, "scroll", () => state !== "hidden" && place3(), { passive: true, capture: true });
   scope.on(window, "resize", () => go(state, true));
   const near = (x, y) => {
+    if (state === "island") {
+      const capsule = thumb.getBoundingClientRect();
+      if (x >= capsule.left && x <= capsule.right && y >= capsule.top && y <= capsule.bottom) return true;
+    }
     const box = track();
     return y >= box.top - INSET && y <= box.top + box.height + INSET && x <= box.right && box.right - x <= reach;
   };
@@ -21231,7 +21690,7 @@ var sameStrokes = (left, right) => left.length === right.length && left.every((s
   return stroke.color === other.color && stroke.width === other.width && stroke.points.length === other.points.length && stroke.points.every((point, index2) => point.x === other.points[index2].x && point.y === other.points[index2].y);
 });
 var finite5 = (value) => typeof value === "number" && Number.isFinite(value);
-var clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp5 = (value, min, max) => Math.min(max, Math.max(min, value));
 function validColor(value) {
   if (typeof value !== "string" || value.length > 100) return false;
   if (/^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.test(value)) return true;
@@ -21319,8 +21778,8 @@ function createSignaturePad(root, options = {}) {
   let readOnly = Boolean(options.readOnly);
   let undoStack = [];
   let redoStack = [];
-  const historyLimit = finite5(options.historyLimit) ? clamp4(Math.floor(options.historyLimit), 1, 100) : 50;
-  const inkWidth = finite5(options.width) ? clamp4(options.width, 0.1, 64) : 2.4;
+  const historyLimit = finite5(options.historyLimit) ? clamp5(Math.floor(options.historyLimit), 1, 100) : 50;
+  const inkWidth = finite5(options.width) ? clamp5(options.width, 0.1, 64) : 2.4;
   const exportData = () => ({ version: 1, strokes: cloneStrokes(strokes) });
   const wrapper = document.createElement("div");
   wrapper.dataset.mkSignatureBody = "";
@@ -21588,7 +22047,7 @@ function createSignaturePad(root, options = {}) {
   const pointFrom = (event) => {
     const rect = surface.getBoundingClientRect();
     if (!rect.width || !rect.height || !finite5(event.clientX) || !finite5(event.clientY)) return null;
-    return { x: clamp4((event.clientX - rect.left) / rect.width, 0, 1), y: clamp4((event.clientY - rect.top) / rect.height, 0, 1) };
+    return { x: clamp5((event.clientX - rect.left) / rect.width, 0, 1), y: clamp5((event.clientY - rect.top) / rect.height, 0, 1) };
   };
   const addPoint = (event) => {
     if (!active) return;
@@ -21669,8 +22128,8 @@ function createSignaturePad(root, options = {}) {
   render();
   update();
   const exportSVG = (settings = {}) => {
-    const width = finite5(settings.width) ? clamp4(settings.width, 1, 4096) : dimensions.width;
-    const height = finite5(settings.height) ? clamp4(settings.height, 1, 4096) : dimensions.height;
+    const width = finite5(settings.width) ? clamp5(settings.width, 1, 4096) : dimensions.width;
+    const height = finite5(settings.height) ? clamp5(settings.height, 1, 4096) : dimensions.height;
     const output = document.createElementNS(SVG_NS, "svg");
     output.setAttribute("width", String(rounded(width)));
     output.setAttribute("height", String(rounded(height)));
@@ -21732,9 +22191,9 @@ function createSignaturePad(root, options = {}) {
         return Promise.resolve(null);
       }
       if (!context || typeof canvas.toBlob !== "function") return Promise.resolve(null);
-      const scale = finite5(settings.scale) ? clamp4(settings.scale, 1, 4) : 2;
-      canvas.width = Math.round((finite5(settings.width) ? clamp4(settings.width, 1, 4096) : dimensions.width) * scale);
-      canvas.height = Math.round((finite5(settings.height) ? clamp4(settings.height, 1, 4096) : dimensions.height) * scale);
+      const scale = finite5(settings.scale) ? clamp5(settings.scale, 1, 4) : 2;
+      canvas.width = Math.round((finite5(settings.width) ? clamp5(settings.width, 1, 4096) : dimensions.width) * scale);
+      canvas.height = Math.round((finite5(settings.height) ? clamp5(settings.height, 1, 4096) : dimensions.height) * scale);
       return new Promise((resolve2) => {
         const image = new Image();
         let finished = false;
@@ -22216,7 +22675,7 @@ function createVoiceMessageBubble(root, options = {}) {
 
 // src/components/drilldown-menu/engine.ts
 var CHEVRON5 = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
-var sequence24 = 0;
+var sequence25 = 0;
 var samePath = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
 var branch = (item) => Array.isArray(item.children);
 var copyItems = (items) => items.map((item) => ({ ...item, ...branch(item) ? { children: copyItems(item.children) } : {} }));
@@ -22230,7 +22689,7 @@ function createDrilldownMenu(root, options = {}) {
   }, path: [], items: [], element: null });
   registerMotion();
   const scope = createScope();
-  const uid2 = `mk-drilldown-${++sequence24}`;
+  const uid2 = `mk-drilldown-${++sequence25}`;
   const authored = [...root.childNodes];
   const holder = document.createDocumentFragment();
   holder.append(...authored);
@@ -22556,7 +23015,7 @@ function createDrilldownMenu(root, options = {}) {
 }
 
 // src/components/wheel-picker/engine.ts
-var sequence25 = 0;
+var sequence26 = 0;
 function normalize(items) {
   const seen = /* @__PURE__ */ new Set();
   return items.flatMap((item) => {
@@ -22573,7 +23032,7 @@ function createWheelPicker(root, options = {}) {
   }, setItems() {
   }, value: "" });
   registerMotion();
-  const scope = createScope(), uid2 = `mk-wheel-${++sequence25}`;
+  const scope = createScope(), uid2 = `mk-wheel-${++sequence26}`;
   let items = normalize(Array.isArray(options.items) ? options.items : []);
   const rawRows = Number.isFinite(options.visibleItems) ? Math.round(options.visibleItems) : 5;
   const rows = Math.min(9, Math.max(3, rawRows % 2 ? rawRows : rawRows + 1));
@@ -22910,9 +23369,9 @@ function createStepper(root, options = {}) {
     effects.clear();
   });
   const items = (Array.isArray(options.items) ? options.items : []).filter((item) => item && typeof item.label === "string");
-  const clamp5 = (n) => Math.max(0, Math.min(Math.max(0, items.length - 1), Number.isFinite(n) ? Math.round(n) : 0));
-  const initial = clamp5(options.defaultValue ?? options.value ?? 0);
-  let value = clamp5(options.value ?? initial);
+  const clamp6 = (n) => Math.max(0, Math.min(Math.max(0, items.length - 1), Number.isFinite(n) ? Math.round(n) : 0));
+  const initial = clamp6(options.defaultValue ?? options.value ?? 0);
+  let value = clamp6(options.value ?? initial);
   let furthest = value;
   let pending = null;
   const nav = document.createElement("nav");
@@ -22996,7 +23455,7 @@ function createStepper(root, options = {}) {
     if (scope.disposed) return;
     if (notify) pending = { value, furthest };
     const before = value;
-    value = clamp5(next);
+    value = clamp6(next);
     furthest = Math.max(furthest, value);
     paint(before !== value, before);
     if (before === value) return;
@@ -23031,7 +23490,7 @@ function createStepper(root, options = {}) {
       return value;
     },
     setValue(next, notify = false) {
-      const target = clamp5(next);
+      const target = clamp6(next);
       if (!notify && pending && target === pending.value) furthest = pending.furthest;
       pending = null;
       choose(target, notify);
@@ -23048,7 +23507,7 @@ function createStepper(root, options = {}) {
 }
 
 // src/components/radio-group/shared.ts
-var sequence26 = 0;
+var sequence27 = 0;
 function createChoices(root, prefix, options) {
   if (!root) return inert({ value: null, setValue() {
   }, reset() {
@@ -23078,7 +23537,7 @@ function createChoices(root, prefix, options) {
   group.setAttribute("aria-required", String(Boolean(options.required)));
   if (options.disabled) group.setAttribute("aria-disabled", "true");
   const message = part3("span", shell, "message");
-  message.id = `mk-${prefix}-message-${++sequence26}`;
+  message.id = `mk-${prefix}-message-${++sequence27}`;
   message.setAttribute("aria-live", "polite");
   group.setAttribute("aria-describedby", message.id);
   if (options.error) group.setAttribute("aria-invalid", "true");
@@ -23088,7 +23547,7 @@ function createChoices(root, prefix, options) {
     seen.add(item.value);
     return true;
   });
-  const name = options.name ?? `mk-${prefix}-${sequence26}`;
+  const name = options.name ?? `mk-${prefix}-${sequence27}`;
   const valid2 = (candidate) => candidate != null && items.some((item) => item.value === candidate) ? candidate : null;
   const initial = valid2(options.defaultValue !== void 0 ? options.defaultValue : options.value);
   let value = valid2(options.value !== void 0 ? options.value : initial);
@@ -23173,7 +23632,7 @@ function createRadioGroup(root, options = {}) {
 
 // src/components/equalizer-slider/shared.ts
 var finite7 = (n) => typeof n === "number" && Number.isFinite(n);
-var sequence27 = 0;
+var sequence28 = 0;
 function createNumericRange(root, options, design) {
   if (!root) return inert({ value: design.value, setValue() {
   }, reset() {
@@ -23224,7 +23683,7 @@ function createNumericRange(root, options, design) {
   input.step = String(step);
   input.defaultValue = String(initial);
   input.value = String(value);
-  input.id = `mk-${prefix}-${++sequence27}`;
+  input.id = `mk-${prefix}-${++sequence28}`;
   label.htmlFor = input.id;
   input.disabled = Boolean(options.disabled);
   if (options.name) input.name = options.name;
@@ -23495,7 +23954,7 @@ function createRatingScale(root, options = {}) {
 }
 
 // src/components/notification-stack/engine.ts
-var sequence28 = 0;
+var sequence29 = 0;
 function createNotificationStack(root, options = {}) {
   if (!root) return inert({ push() {
   }, dismiss() {
@@ -23523,7 +23982,7 @@ function createNotificationStack(root, options = {}) {
   };
   const deck = document.createElement("div");
   deck.className = "mk-notification-stack__deck";
-  deck.id = `mk-notifications-${++sequence28}`;
+  deck.id = `mk-notifications-${++sequence29}`;
   const empty = document.createElement("p");
   empty.className = "mk-notification-stack__empty";
   const toggle = document.createElement("button");
@@ -24812,7 +25271,7 @@ function createMagnetizeButton(root, options = {}) {
 
 // src/components/badge-button/engine.ts
 var normalize2 = (value) => Number.isFinite(value) ? Math.max(0, Math.min(Number.MAX_SAFE_INTEGER, Math.round(value))) : 0;
-var sequence29 = 0;
+var sequence30 = 0;
 function createBadgeButton(root, options = {}) {
   if (!root) return inert({ setCount() {
   }, count: 0 });
@@ -24850,7 +25309,7 @@ function createBadgeButton(root, options = {}) {
   const authoredLabel = control.getAttribute("aria-label");
   const labelledBy = control.getAttribute("aria-labelledby");
   if (labelledBy?.trim()) {
-    spoken.id = `mk-badge-quantity-${++sequence29}`;
+    spoken.id = `mk-badge-quantity-${++sequence30}`;
     scope.attr(control, "aria-labelledby", `${labelledBy} ${spoken.id}`);
   }
   scope.attr(control, "type", control.getAttribute("type") ?? "button");
@@ -25177,12 +25636,6 @@ export {
   sheetClose,
   pushUnderlay,
   releaseUnderlay,
-  createDialog,
-  createMenu,
-  chatBackgroundOf,
-  createChatBackground,
-  createSteps,
-  createQuantity,
   press,
   blurIn,
   blurOut,
@@ -25191,6 +25644,15 @@ export {
   ringPulse,
   burst,
   rollDigits,
+  ICON_PATHS,
+  iconSvg,
+  createScrollArea,
+  createDialog,
+  createMenu,
+  chatBackgroundOf,
+  createChatBackground,
+  createSteps,
+  createQuantity,
   createPagination,
   createHoverCard,
   createInputOtp,
@@ -25340,4 +25802,4 @@ export {
   createMorphingPageDots,
   createNotFound
 };
-//# sourceMappingURL=chunk-Q7IW4FV3.js.map
+//# sourceMappingURL=chunk-NCGNIPJE.js.map