@exponential_app/eui-solid 0.3.0 → 0.4.0

package/dist/primitives.js

@@ -1,18 +1,19 @@
-import { spread, mergeProps, template, createComponent, Dynamic, memo, insert, effect, className, delegateEvents, setAttribute, style, use } from "solid-js/web";
-import { splitProps, createContext, createSignal, untrack, Show, onMount, useContext, createEffect, on, onCleanup, children, mergeProps as mergeProps$1, createMemo, For, createRenderEffect, createUniqueId, from, Index } from "solid-js";
-import { cn, alertVariants, ALERT_CLASSES, ALERT_DIALOG_CLASSES, AVATAR_CLASSES, avatarFallbackColors, avatarFallbackHue, BADGE_CLASSES, badgeLabel, BREADCRUMB_CLASSES, buttonVariants, CALENDAR_CLASSES, CARD_CLASSES, CAROUSEL_CLASSES, carouselCounterText, CHECKBOX_CLASSES, choiceValues, CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, codeBlockVariants, CODE_BLOCK_CLASSES, codeBlockLineVariants, CODE_TOKEN_CLASS, COMMAND_LABEL_STYLE, createCommandStore, COMMAND_CLASSES, COMMAND_SELECT_EVENT, commandItemValue, observeCommandListHeight, CONTEXT_RING_CLASSES, RING_TONE_CLASS, RING_SIZE, RING_RADIUS, RING_STROKE, ringGeometry, SHEET_CHROME_CLASSES, isTypeaheadPortalInteraction, SHEET_CLASSES, DIALOG_CLASSES, DIALOG_PHONE_QUERY, MOBILE_ARMS, DISCLOSURE_HEADER_CLASSES, DOCK_CARD_CLASSES, dockPileGeometry, DOCK_PILE_CLASSES, DROPDOWN_MENU_CLASSES, ICON_DISC_CLASSES, EMPTY_STATE_CLASSES, GLASS_CARD_CLASSES, HOVER_CARD_DELAYS, HOVER_CARD_CLASSES, INPUT_CLASSES, KBD_CLASSES, LABEL_CLASSES, PROGRESS_CLASSES, progressIndicatorTransform, METER_CLASSES, MOSAIC_CLASSES, mosaicTiles, OUTLINE_CLASSES, outlineCountText, POPOVER_CLASSES, PROGRESS_RING_CLASSES, progressRingPercent, SCROLL_AREA_CLASSES, scrollAreaRootStyle, SCROLL_AREA_VIEWPORT_CSS, scrollAreaViewportStyle, SCROLL_AREA_CONTENT_STYLE, scrollAreaVisibility, SCROLL_AREA_SCROLL_INITIAL, scrollAreaCornerStyle, scrollAreaThumbOffset, scrollAreaScrollbarStyle, scrollAreaThumbSize, SCROLL_AREA_THUMB_STYLE, SCROLL_AREA_SCROLL_MACHINE, scrollAreaThumbRatio, scrollAreaScrollFromPointer, TABS_CLASSES, SEGMENTED_CONTROL_CLASSES, SELECT_CLASSES, SELECT_INLINE, selectPopperContentStyle, selectItemAlignedContentStyle, SELECT_VIEWPORT_CSS, SELECT_VIEWPORT_ATTR, SEPARATOR_CLASSES, SKELETON_CLASSES, SPINNER_CLASSES, SWITCH_CLASSES, TABLE_CLASSES, TEXTAREA_CLASSES, createToastStore, TOAST_TOUCH_QUERY, toastPlacement, layoutSize, toastStackGeometry, TOAST_CLASSES, TOOLTIP_CLASSES, voiceWaveAnimates, voiceWaveClock, VOICE_WAVE_CLASSES, voiceWaveFitChild, VOICE_WAVE_SIZE_PX, voiceWaveQuiet, voiceWaveName } from "@exponential_app/eui/web/primitives";
+import { spread, mergeProps, template, createComponent, memo, insert, effect, className, Dynamic, delegateEvents, setAttribute, style, use } from "solid-js/web";
+import { splitProps, createContext, useContext, createSignal, createEffect, on, onCleanup, Show, children, mergeProps as mergeProps$1, createMemo, untrack, For, createRenderEffect, createUniqueId, onMount, from, Index } from "solid-js";
+import { cn, alertVariants, ALERT_CLASSES, ALERT_DIALOG_CLASSES, AVATAR_CLASSES, avatarFallbackColors, avatarFallbackHue, BADGE_CLASSES, badgeLabel, BREADCRUMB_CLASSES, CALENDAR_CLASSES, buttonVariants, CARD_CLASSES, CAROUSEL_CLASSES, carouselCounterText, CHECKBOX_CLASSES, choiceValues, CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, codeBlockVariants, CODE_BLOCK_CLASSES, codeBlockLineVariants, CODE_TOKEN_CLASS, COMMAND_LABEL_STYLE, createCommandStore, COMMAND_CLASSES, COMMAND_SELECT_EVENT, commandItemValue, observeCommandListHeight, CONTEXT_RING_CLASSES, RING_TONE_CLASS, RING_SIZE, RING_RADIUS, RING_STROKE, ringGeometry, SHEET_CHROME_CLASSES, isTypeaheadPortalInteraction, SHEET_CLASSES, DIALOG_CLASSES, DIALOG_PHONE_QUERY, MOBILE_ARMS, DISCLOSURE_HEADER_CLASSES, DOCK_CARD_CLASSES, dockPileGeometry, DOCK_PILE_CLASSES, ICON_DISC_CLASSES, EMPTY_STATE_CLASSES, GLASS_CARD_CLASSES, HOVER_CARD_DELAYS, HOVER_CARD_CLASSES, INPUT_CLASSES, KBD_CLASSES, LABEL_CLASSES, PROGRESS_CLASSES, progressIndicatorTransform, METER_CLASSES, MOSAIC_CLASSES, mosaicTiles, OUTLINE_CLASSES, outlineCountText, POPOVER_CLASSES, PROGRESS_RING_CLASSES, progressRingPercent, SCROLL_AREA_CLASSES, scrollAreaRootStyle, SCROLL_AREA_VIEWPORT_CSS, scrollAreaViewportStyle, SCROLL_AREA_CONTENT_STYLE, scrollAreaVisibility, SCROLL_AREA_SCROLL_INITIAL, scrollAreaCornerStyle, scrollAreaThumbOffset, scrollAreaScrollbarStyle, scrollAreaThumbSize, SCROLL_AREA_THUMB_STYLE, SCROLL_AREA_SCROLL_MACHINE, scrollAreaThumbRatio, scrollAreaScrollFromPointer, TABS_CLASSES, SEGMENTED_CONTROL_CLASSES, SELECT_CLASSES, SELECT_INLINE, selectPopperContentStyle, selectItemAlignedContentStyle, SELECT_VIEWPORT_CSS, SELECT_VIEWPORT_ATTR, SEPARATOR_CLASSES, SKELETON_CLASSES, SPINNER_CLASSES, SWITCH_CLASSES, TABLE_CLASSES, TEXTAREA_CLASSES, createToastStore, TOAST_TOUCH_QUERY, toastPlacement, layoutSize, toastStackGeometry, TOAST_CLASSES, TOOLTIP_CLASSES, voiceWaveAnimates, voiceWaveClock, VOICE_WAVE_CLASSES, voiceWaveFitChild, VOICE_WAVE_SIZE_PX, voiceWaveQuiet, voiceWaveName } from "@exponential_app/eui/web/primitives";
 import { AVATAR_HUE_COUNT, BARE_FIELD_CLASS, CAROUSEL_GEOMETRY, CODE_TOKEN_CLASS as CODE_TOKEN_CLASS2, DOCK_CARD_CLASSES as DOCK_CARD_CLASSES2, DOCK_PILE_CLASSES as DOCK_PILE_CLASSES2, DOCK_PILE_CONSTANTS, EMPTY_STATE_SIZES, FIELD_CHROME_CLASS, GLASS_CARD_CLASS, GLASS_CARD_CLASSES as GLASS_CARD_CLASSES2, ICON_DISC_TONES, MENU_CHECK_ITEM_CLASS, MENU_CHEVRON_CLASS, MENU_CONTENT_CLASS, MENU_ITEM_CLASS, MENU_LABEL_CLASS, MENU_SEPARATOR_CLASS, MENU_SHORTCUT_CLASS, MENU_SUB_TRIGGER_CLASS, MENU_SURFACE_CLASS, MENU_VALUE_CLASS, MOBILE_ALERT, MOBILE_ARMS as MOBILE_ARMS2, MOBILE_PAGE, MOBILE_SHEET, MOBILE_SHEET_FULL, MOSAIC_GEOMETRY, OUTLINE_GEOMETRY, RING_RADIUS as RING_RADIUS2, RING_SIZE as RING_SIZE2, RING_STROKE as RING_STROKE2, RING_TONE_CLASS as RING_TONE_CLASS2, SEGMENTED_ITEM, SEGMENTED_LIST, SEGMENTED_ROW, SEGMENTED_ROW_COMPACT, SEGMENTED_TAB, TOAST_CONSTANTS, TOAST_KINDS, TOAST_TOUCH_QUERY as TOAST_TOUCH_QUERY2, alertVariants as alertVariants2, avatarHueIndex, buttonVariants as buttonVariants2, carouselCounterText as carouselCounterText2, choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2, cn as cn2, createToastStore as createToastStore2, dockPileGeometry as dockPileGeometry2, getInitials, middleTruncate, mosaicTiles as mosaicTiles2, outlineCountText as outlineCountText2, progressRingPercent as progressRingPercent2, ringGeometry as ringGeometry2, toastPlacement as toastPlacement2, toastStackGeometry as toastStackGeometry2 } from "@exponential_app/eui/web/primitives";
-import { i as createPresence, L as LayerPortal, j as createLayer, l as bindStyle, u as useFocusGuards, s as useModalEffects, q as useScrollLock, p as createFocusScope, g as createImageLoadingStatus, c as css, P as PaintIcon, f as createInForm, e as createElementSize, T as bubbleOnChange, H as createMediaQuery$1, n as useKeyboardTracking, M as MenuContent, v as createMenuRow, w as createSelectable, k as Popper, m as LayerContext, x as popperContentStyle, r as rovingFocusFirst, U as focusIntent, W as wrapArray, N as NativeSelect, G as SELECTION_KEYS, z as radixTypeahead, A as findNextItem, O as OPEN_KEYS, F as mountIn, X as styleWriter, Y as setChecked, V as VisuallyHidden, y as inPolygon, o as graceArea } from "./chunks/image-loading-status--T9ny7b0.js";
+import { U as DialogRoot, W as DialogClosePart, X as mergeRefs, Y as DialogContentPart, _ as DialogDescriptionPart, $ as DialogOverlayPart, a0 as DialogPortalPart, a1 as DialogTitlePart, a2 as DialogTriggerPart, g as createImageLoadingStatus, c as css, P as PaintIcon, a3 as Button, f as createInForm, i as createPresence, e as createElementSize, a4 as bubbleOnChange, a5 as useDialogContext, a6 as callRef, J as createMediaQuery, l as bindStyle, a7 as createOpenState, a8 as composeHandlers, j as createLayer, k as Popper, m as LayerContext, x as popperContentStyle, a9 as styleObject, aa as layerPointerEvents, ab as noteLayerMount, ac as layerMountedThisTask, ad as stateOf$1, ae as createId, af as callHandler$2, n as useFocusGuards, s as useModalEffects, p as createFocusScope, r as rovingFocusFirst, ag as focusIntent, ah as wrapArray, N as NativeSelect, G as SELECTION_KEYS, z as radixTypeahead, A as findNextItem, O as OPEN_KEYS, F as mountIn, ai as styleWriter, aj as setChecked, V as VisuallyHidden, y as inPolygon, o as graceArea, ak as createMediaQuery$1 } from "./chunks/zoomable-image-CmoMEUF6.js";
+import { al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, Z, aB, H } from "./chunks/zoomable-image-CmoMEUF6.js";
 import "aria-hidden";
 import "@floating-ui/dom";
 import "@exponential_app/eui/web";
 import { tokenizeCode, voiceWave, voiceWavePath, voiceWaveChildBox } from "@exponential_app/eui";
-import { Ellipsis, ChevronRight, ChevronLeft, ChevronDown, Check, ImageIcon, Copy, Search, CircleX, X, Circle, ChevronUp, LoaderCircle, TriangleAlert, Info, CircleCheck } from "lucide-solid";
-var _tmpl$$H = /* @__PURE__ */ template(`<div data-slot=alert role=alert>`), _tmpl$2$t = /* @__PURE__ */ template(`<div data-slot=alert-title>`), _tmpl$3$n = /* @__PURE__ */ template(`<div data-slot=alert-description>`);
+import { Ellipsis, ChevronRight, ChevronLeft, ChevronDown, Check, ImageIcon, Copy, Search, CircleX, X, ChevronUp, LoaderCircle, TriangleAlert, Info, CircleCheck } from "lucide-solid";
+var _tmpl$$F = /* @__PURE__ */ template(`<div data-slot=alert role=alert>`), _tmpl$2$r = /* @__PURE__ */ template(`<div data-slot=alert-title>`), _tmpl$3$l = /* @__PURE__ */ template(`<div data-slot=alert-description>`);
 function Alert(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`]);
   return (() => {
-    var _el$ = _tmpl$$H();
+    var _el$ = _tmpl$$F();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(alertVariants({
@@ -26,7 +27,7 @@ function Alert(props) {
 function AlertTitle(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$t();
+    var _el$2 = _tmpl$2$r();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.title, local.class);
@@ -38,7 +39,7 @@ function AlertTitle(props) {
 function AlertDescription(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$n();
+    var _el$3 = _tmpl$3$l();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.description, local.class);
@@ -47,313 +48,7 @@ function AlertDescription(props) {
     return _el$3;
   })();
 }
-var _tmpl$$G = /* @__PURE__ */ template(`<div>`), _tmpl$2$s = /* @__PURE__ */ template(`<div tabindex=-1>`), _tmpl$3$m = /* @__PURE__ */ template(`<h2>`), _tmpl$4$h = /* @__PURE__ */ template(`<p>`);
-function callHandler$2(handler, event) {
-  if (typeof handler === `function`) handler(event);
-  else if (Array.isArray(handler) && typeof handler[0] === `function`) handler[0](handler[1], event);
-}
-function composeHandlers(user, ours, checkForDefaultPrevented = true) {
-  return (event) => {
-    callHandler$2(user, event);
-    if (!checkForDefaultPrevented || !event.defaultPrevented) ours(event);
-  };
-}
-function callRef(ref, el) {
-  if (typeof ref === `function`) ref(el);
-}
-function mergeRefs(...refs) {
-  return (el) => {
-    for (const r of refs) if (typeof r === `function`) r(el);
-  };
-}
-function styleObject(style2) {
-  if (!style2 || typeof style2 !== `object`) return {};
-  const out = {};
-  for (const [k, v] of Object.entries(style2)) out[k] = v === void 0 || v === null ? void 0 : String(v);
-  return out;
-}
-function createOpenState(o) {
-  const [inner, setInner] = createSignal(untrack(() => o.defaultOpen) ?? false);
-  const open = () => o.open() ?? inner();
-  const set = (next) => {
-    const prev = untrack(open);
-    if (next !== prev) untrack(o.onOpenChange)?.(next);
-    if (untrack(o.open) === void 0) setInner(next);
-  };
-  return [open, set];
-}
-const stateOf$1 = (open) => open ? `open` : `closed`;
-let layerMounted = false;
-function noteLayerMount() {
-  if (layerMounted) return;
-  layerMounted = true;
-  queueMicrotask(() => layerMounted = false);
-}
-function layerMountedThisTask() {
-  return layerMounted;
-}
-function layerPointerEvents(layer, registered, lag) {
-  return lag && !registered ? void 0 : layer.pointerEvents(registered);
-}
-const DialogContext = createContext();
-function useDialogContext(part2) {
-  const ctx = useContext(DialogContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`Dialog\``);
-  return ctx;
-}
-function DialogRoot(props) {
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  const value = {
-    open,
-    setOpen,
-    modal: untrack(() => props.modal) ?? true,
-    contentId: `radix-${createId()}`,
-    titleId: `radix-${createId()}`,
-    descriptionId: `radix-${createId()}`,
-    trigger,
-    setTrigger
-  };
-  return createComponent(DialogContext.Provider, {
-    value,
-    get children() {
-      return props.children;
-    }
-  });
-}
-let idCounter = 0;
-function createId() {
-  return `s${++idCounter}`;
-}
-function DialogTriggerPart(props) {
-  const ctx = useDialogContext(`DialogTrigger`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    type: "button",
-    "aria-haspopup": "dialog",
-    get ["aria-expanded"]() {
-      return ctx.open() ? `true` : `false`;
-    },
-    get ["aria-controls"]() {
-      return ctx.contentId;
-    },
-    get ["data-state"]() {
-      return stateOf$1(ctx.open());
-    }
-  }, rest, {
-    ref(r$) {
-      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
-      typeof _ref$ === "function" && _ref$(r$);
-    },
-    get onClick() {
-      return composeHandlers(local.onClick, () => ctx.setOpen(!untrack(ctx.open)));
-    }
-  }));
-}
-function DialogClosePart(props) {
-  const ctx = useDialogContext(`DialogClose`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    type: "button"
-  }, rest, {
-    ref(r$) {
-      var _ref$2 = local.ref;
-      typeof _ref$2 === "function" ? _ref$2(r$) : local.ref = r$;
-    },
-    get onClick() {
-      return composeHandlers(local.onClick, () => ctx.setOpen(false));
-    }
-  }));
-}
-function DialogPortalPart(props) {
-  const [mounted, setMounted] = createSignal(false);
-  onMount(() => setMounted(true));
-  return createComponent(LayerPortal, {
-    get mount() {
-      return memo(() => props.container !== void 0)() ? props.container : memo(() => !!mounted())() ? document.body : null;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function DialogOverlayPart(props) {
-  const ctx = useDialogContext(`DialogOverlay`);
-  const presence = createPresence(ctx.open);
-  const [local, rest] = splitProps(props, [`style`, `ref`]);
-  const Overlay = () => {
-    const el = (() => {
-      var _el$ = _tmpl$$G();
-      spread(_el$, mergeProps({
-        get ["data-state"]() {
-          return stateOf$1(ctx.open());
-        }
-      }, rest), false, false);
-      return _el$;
-    })();
-    presence.ref(el);
-    bindStyle(el, () => ({
-      "pointer-events": `auto`,
-      ...styleObject(local.style)
-    }));
-    callRef(local.ref, el);
-    onMount(() => useScrollLock());
-    return el;
-  };
-  return createComponent(Show, {
-    get when() {
-      return memo(() => !!ctx.modal)() && presence.mounted();
-    },
-    get children() {
-      return createComponent(Overlay, {});
-    }
-  });
-}
-function DialogContentPart(props) {
-  const ctx = useDialogContext(`DialogContent`);
-  const presence = createPresence(ctx.open);
-  const [local, rest] = splitProps(props, [`role`, `style`, `ref`, `children`, `onOpenAutoFocus`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onPointerDownOutside`, `onFocusOutside`, `onInteractOutside`, `onKeyDown`]);
-  const Content = () => {
-    const modal = ctx.modal;
-    let interactedOutside = false;
-    let pointerDownOutside = false;
-    const layer = createLayer({
-      disableOutsidePointerEvents: () => modal,
-      onEscapeKeyDown: (e) => local.onEscapeKeyDown?.(e),
-      onPointerDownOutside: (e) => {
-        local.onPointerDownOutside?.(e);
-        if (!modal || e.defaultPrevented) return;
-        const original = e.detail.originalEvent;
-        const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
-        if (original.button === 2 || ctrlLeftClick) e.preventDefault();
-      },
-      onFocusOutside: (e) => {
-        local.onFocusOutside?.(e);
-        if (modal && !e.defaultPrevented) e.preventDefault();
-      },
-      onInteractOutside: (e) => {
-        local.onInteractOutside?.(e);
-        if (modal) return;
-        if (!e.defaultPrevented) {
-          interactedOutside = true;
-          if (e.detail.originalEvent.type === `pointerdown`) pointerDownOutside = true;
-        }
-        const target = e.target;
-        if (target && ctx.trigger()?.contains(target)) e.preventDefault();
-        if (e.detail.originalEvent.type === `focusin` && pointerDownOutside) e.preventDefault();
-      },
-      onDismiss: () => ctx.setOpen(false)
-    });
-    const scope = createFocusScope({
-      trapped: () => modal && ctx.open(),
-      loop: true,
-      onMountAutoFocus: (e) => local.onOpenAutoFocus?.(e),
-      onUnmountAutoFocus: (e) => {
-        if (modal) {
-          local.onCloseAutoFocus?.(e);
-          if (e.defaultPrevented) return;
-          e.preventDefault();
-          ctx.trigger()?.focus();
-          return;
-        }
-        local.onCloseAutoFocus?.(e);
-        if (!e.defaultPrevented) {
-          if (!interactedOutside) ctx.trigger()?.focus();
-          e.preventDefault();
-        }
-        interactedOutside = false;
-        pointerDownOutside = false;
-      }
-    });
-    const [registered, setRegistered] = createSignal(false);
-    const lag = layerMountedThisTask();
-    const el = (() => {
-      var _el$2 = _tmpl$2$s();
-      spread(_el$2, mergeProps({
-        get role() {
-          return local.role ?? `dialog`;
-        },
-        get id() {
-          return ctx.contentId;
-        },
-        get ["aria-describedby"]() {
-          return ctx.descriptionId;
-        },
-        get ["aria-labelledby"]() {
-          return ctx.titleId;
-        },
-        get ["data-state"]() {
-          return stateOf$1(ctx.open());
-        }
-      }, rest, {
-        "onKeyDown": (e) => {
-          callHandler$2(local.onKeyDown, e);
-          scope.onKeyDown(e);
-        }
-      }), false, true);
-      insert(_el$2, () => local.children);
-      return _el$2;
-    })();
-    presence.ref(el);
-    bindStyle(el, () => ({
-      "pointer-events": layerPointerEvents(layer, registered(), lag),
-      ...styleObject(local.style)
-    }));
-    callRef(local.ref, el);
-    onMount(() => {
-      layer.attach(el);
-      setRegistered(true);
-      noteLayerMount();
-      scope.attach(el);
-      useFocusGuards();
-      if (modal) useModalEffects(el, false);
-    });
-    return el;
-  };
-  return createComponent(Show, {
-    get when() {
-      return presence.mounted();
-    },
-    get children() {
-      return createComponent(Content, {});
-    }
-  });
-}
-function DialogTitlePart(props) {
-  const ctx = useDialogContext(`DialogTitle`);
-  return (() => {
-    var _el$3 = _tmpl$3$m();
-    spread(_el$3, mergeProps({
-      get id() {
-        return ctx.titleId;
-      }
-    }, props), false, false);
-    return _el$3;
-  })();
-}
-function DialogDescriptionPart(props) {
-  const ctx = useDialogContext(`DialogDescription`);
-  return (() => {
-    var _el$4 = _tmpl$4$h();
-    spread(_el$4, mergeProps({
-      get id() {
-        return ctx.descriptionId;
-      }
-    }, props), false, false);
-    return _el$4;
-  })();
-}
-var _tmpl$$F = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$r = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
+var _tmpl$$E = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$q = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
 const CancelContext = createContext();
 function AlertDialog(props) {
   return createComponent(DialogRoot, mergeProps(props, {
@@ -421,7 +116,7 @@ function AlertDialogContent(props) {
 function AlertDialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$F();
+    var _el$ = _tmpl$$E();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.header, local.class);
@@ -433,7 +128,7 @@ function AlertDialogHeader(props) {
 function AlertDialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$r();
+    var _el$2 = _tmpl$2$q();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.footer, local.class);
@@ -482,7 +177,7 @@ function AlertDialogCancel(props) {
     }
   }));
 }
-var _tmpl$$E = /* @__PURE__ */ template(`<span data-slot=avatar>`), _tmpl$2$q = /* @__PURE__ */ template(`<img data-slot=avatar-image>`), _tmpl$3$l = /* @__PURE__ */ template(`<span data-slot=avatar-fallback>`);
+var _tmpl$$D = /* @__PURE__ */ template(`<span data-slot=avatar>`), _tmpl$2$p = /* @__PURE__ */ template(`<img data-slot=avatar-image>`), _tmpl$3$k = /* @__PURE__ */ template(`<span data-slot=avatar-fallback>`);
 const AvatarContext = createContext();
 function Avatar(props) {
   const [local, rest] = splitProps(props, [`class`]);
@@ -493,7 +188,7 @@ function Avatar(props) {
       setStatus
     },
     get children() {
-      var _el$ = _tmpl$$E();
+      var _el$ = _tmpl$$D();
       spread(_el$, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.root, local.class);
@@ -517,7 +212,7 @@ function AvatarImage(props) {
       return status() === `loaded`;
     },
     get children() {
-      var _el$2 = _tmpl$2$q();
+      var _el$2 = _tmpl$2$p();
       spread(_el$2, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.image, local.class);
@@ -553,7 +248,7 @@ function AvatarFallback(props) {
       return memo(() => !!canRender())() && ctx.status() !== `loaded`;
     },
     get children() {
-      var _el$3 = _tmpl$3$l();
+      var _el$3 = _tmpl$3$k();
       spread(_el$3, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.fallback, hue() === void 0 && AVATAR_CLASSES.fallbackMuted, local.class);
@@ -566,7 +261,7 @@ function AvatarFallback(props) {
     }
   });
 }
-var _tmpl$$D = /* @__PURE__ */ template(`<span data-slot=badge>`);
+var _tmpl$$C = /* @__PURE__ */ template(`<span data-slot=badge>`);
 function Badge(props) {
   const [local, rest] = splitProps(props, [`count`, `max`, `tone`, `class`]);
   const tone = () => local.tone ?? `muted`;
@@ -575,7 +270,7 @@ function Badge(props) {
       return local.count > 0;
     },
     get children() {
-      var _el$ = _tmpl$$D();
+      var _el$ = _tmpl$$C();
       spread(_el$, mergeProps({
         get ["data-tone"]() {
           return tone();
@@ -589,10 +284,10 @@ function Badge(props) {
     }
   });
 }
-var _tmpl$$C = /* @__PURE__ */ template(`<nav aria-label=breadcrumb data-slot=breadcrumb>`), _tmpl$2$p = /* @__PURE__ */ template(`<ol data-slot=breadcrumb-list>`), _tmpl$3$k = /* @__PURE__ */ template(`<li data-slot=breadcrumb-item>`), _tmpl$4$g = /* @__PURE__ */ template(`<span data-slot=breadcrumb-page role=link aria-disabled=true aria-current=page>`), _tmpl$5$b = /* @__PURE__ */ template(`<li data-slot=breadcrumb-separator role=presentation aria-hidden=true>`), _tmpl$6$8 = /* @__PURE__ */ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span>More`);
+var _tmpl$$B = /* @__PURE__ */ template(`<nav aria-label=breadcrumb data-slot=breadcrumb>`), _tmpl$2$o = /* @__PURE__ */ template(`<ol data-slot=breadcrumb-list>`), _tmpl$3$j = /* @__PURE__ */ template(`<li data-slot=breadcrumb-item>`), _tmpl$4$f = /* @__PURE__ */ template(`<span data-slot=breadcrumb-page role=link aria-disabled=true aria-current=page>`), _tmpl$5$a = /* @__PURE__ */ template(`<li data-slot=breadcrumb-separator role=presentation aria-hidden=true>`), _tmpl$6$7 = /* @__PURE__ */ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span>More`);
 function Breadcrumb(props) {
   return (() => {
-    var _el$ = _tmpl$$C();
+    var _el$ = _tmpl$$B();
     spread(_el$, props, false, false);
     return _el$;
   })();
@@ -600,7 +295,7 @@ function Breadcrumb(props) {
 function BreadcrumbList(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$p();
+    var _el$2 = _tmpl$2$o();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.list, local.class);
@@ -612,7 +307,7 @@ function BreadcrumbList(props) {
 function BreadcrumbItem(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$k();
+    var _el$3 = _tmpl$3$j();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.item, local.class);
@@ -636,7 +331,7 @@ function BreadcrumbLink(props) {
 function BreadcrumbPage(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$g();
+    var _el$4 = _tmpl$4$f();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.page, local.class);
@@ -649,7 +344,7 @@ function BreadcrumbSeparator(props) {
   const [local, rest] = splitProps(props, [`class`, `children`]);
   const resolved = children(() => local.children);
   return (() => {
-    var _el$5 = _tmpl$5$b();
+    var _el$5 = _tmpl$5$a();
     spread(_el$5, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.separator, local.class);
@@ -664,7 +359,7 @@ function BreadcrumbSeparator(props) {
 function BreadcrumbEllipsis(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$6 = _tmpl$6$8(), _el$7 = _el$6.firstChild;
+    var _el$6 = _tmpl$6$7(), _el$7 = _el$6.firstChild;
     spread(_el$6, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.ellipsis, local.class);
@@ -680,31 +375,7 @@ function BreadcrumbEllipsis(props) {
     return _el$6;
   })();
 }
-function Button(props) {
-  const [local, rest] = splitProps(props, [`class`, `variant`, `size`, `as`]);
-  const variant = () => local.variant ?? `default`;
-  const size = () => local.size ?? `default`;
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    "data-slot": "button",
-    get ["data-variant"]() {
-      return variant();
-    },
-    get ["data-size"]() {
-      return size();
-    },
-    get ["class"]() {
-      return cn(buttonVariants({
-        variant: variant(),
-        size: size(),
-        className: local.class
-      }));
-    }
-  }, rest));
-}
-var _tmpl$$B = /* @__PURE__ */ template(`<span><select></select><span aria-hidden=true>`), _tmpl$2$o = /* @__PURE__ */ template(`<option>`), _tmpl$3$j = /* @__PURE__ */ template(`<nav><button type=button></button><button type=button>`), _tmpl$4$f = /* @__PURE__ */ template(`<div role=status aria-live=polite>`), _tmpl$5$a = /* @__PURE__ */ template(`<div data-slot=calendar><div>`), _tmpl$6$7 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$7$4 = /* @__PURE__ */ template(`<thead aria-hidden=true><tr>`), _tmpl$8$4 = /* @__PURE__ */ template(`<div><div></div><table role=grid><tbody>`), _tmpl$9$3 = /* @__PURE__ */ template(`<div><span role=status aria-live=polite>`), _tmpl$0$3 = /* @__PURE__ */ template(`<span>`), _tmpl$1$1 = /* @__PURE__ */ template(`<span role=status aria-live=polite>`), _tmpl$10$1 = /* @__PURE__ */ template(`<td><div>`), _tmpl$11$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$12 = /* @__PURE__ */ template(`<td role=gridcell>`);
+var _tmpl$$A = /* @__PURE__ */ template(`<span><select></select><span aria-hidden=true>`), _tmpl$2$n = /* @__PURE__ */ template(`<option>`), _tmpl$3$i = /* @__PURE__ */ template(`<nav><button type=button></button><button type=button>`), _tmpl$4$e = /* @__PURE__ */ template(`<div role=status aria-live=polite>`), _tmpl$5$9 = /* @__PURE__ */ template(`<div data-slot=calendar><div>`), _tmpl$6$6 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$7$3 = /* @__PURE__ */ template(`<thead aria-hidden=true><tr>`), _tmpl$8$3 = /* @__PURE__ */ template(`<div><div></div><table role=grid><tbody>`), _tmpl$9$2 = /* @__PURE__ */ template(`<div><span role=status aria-live=polite>`), _tmpl$0$2 = /* @__PURE__ */ template(`<span>`), _tmpl$1$1 = /* @__PURE__ */ template(`<span role=status aria-live=polite>`), _tmpl$10$1 = /* @__PURE__ */ template(`<td><div>`), _tmpl$11$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$12 = /* @__PURE__ */ template(`<td role=gridcell>`);
 const clone = (d) => new Date(d.getTime());
 const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
@@ -1413,7 +1084,7 @@ function Calendar(input) {
       }
     };
     return (() => {
-      var _el$ = _tmpl$$B(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+      var _el$ = _tmpl$$A(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
       use((el) => queueMicrotask(() => el.value = String(value)), _el$2);
       _el$2.addEventListener("change", onChange);
       insert(_el$2, createComponent(For, {
@@ -1421,7 +1092,7 @@ function Calendar(input) {
           return options();
         },
         children: (o) => (() => {
-          var _el$4 = _tmpl$2$o();
+          var _el$4 = _tmpl$2$n();
           insert(_el$4, () => o.label);
           effect((_p$) => {
             var _v$7 = o.disabled, _v$8 = o.value === value;
@@ -1465,7 +1136,7 @@ function Calendar(input) {
     })();
   };
   return (() => {
-    var _el$5 = _tmpl$5$a(), _el$6 = _el$5.firstChild;
+    var _el$5 = _tmpl$5$9(), _el$6 = _el$5.firstChild;
     spread(_el$5, mergeProps({
       get ["class"]() {
         return cn([classNames().root, cn(CALENDAR_CLASSES.root, props.class)].filter(Boolean).join(` `));
@@ -1503,7 +1174,7 @@ function Calendar(input) {
         return !props.hideNavigation;
       },
       get children() {
-        var _el$7 = _tmpl$3$j(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+        var _el$7 = _tmpl$3$i(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
         _el$8.$$click = handlePrevious;
         insert(_el$8, createComponent(Chevron, {
           get disabled() {
@@ -1557,20 +1228,20 @@ function Calendar(input) {
         return calendar().months;
       },
       children: (calendarMonth) => (() => {
-        var _el$1 = _tmpl$8$4(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$15 = _el$11.firstChild;
+        var _el$1 = _tmpl$8$3(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$15 = _el$11.firstChild;
         insert(_el$10, (() => {
           var _c$ = memo(() => !!props.captionLayout.startsWith(`dropdown`));
           return () => _c$() ? (() => {
-            var _el$16 = _tmpl$9$3(), _el$17 = _el$16.firstChild;
+            var _el$16 = _tmpl$9$2(), _el$17 = _el$16.firstChild;
             insert(_el$16, () => {
               const layout = props.captionLayout;
               const monthControl = layout === `dropdown` || layout === `dropdown-months` ? dropdown(`month`, calendarMonth.date) : (() => {
-                var _el$18 = _tmpl$0$3();
+                var _el$18 = _tmpl$0$2();
                 insert(_el$18, () => formatters().formatMonthDropdown(calendarMonth.date));
                 return _el$18;
               })();
               const yearControl = layout === `dropdown` || layout === `dropdown-years` ? dropdown(`year`, calendarMonth.date) : (() => {
-                var _el$19 = _tmpl$0$3();
+                var _el$19 = _tmpl$0$2();
                 insert(_el$19, () => formatters().formatYearDropdown(calendarMonth.date));
                 return _el$19;
               })();
@@ -1599,13 +1270,13 @@ function Calendar(input) {
             return !props.hideWeekdays;
           },
           get children() {
-            var _el$12 = _tmpl$7$4(), _el$13 = _el$12.firstChild;
+            var _el$12 = _tmpl$7$3(), _el$13 = _el$12.firstChild;
             insert(_el$13, createComponent(Show, {
               get when() {
                 return props.showWeekNumber;
               },
               get children() {
-                var _el$14 = _tmpl$6$7();
+                var _el$14 = _tmpl$6$6();
                 insert(_el$14, () => formatters().formatWeekNumberHeader());
                 effect((_p$) => {
                   var _v$17 = labels().labelWeekNumberHeader(), _v$18 = classNames().week_number_header;
@@ -1626,7 +1297,7 @@ function Calendar(input) {
                 }, (_, i) => addDays(sow(today()), i));
               },
               children: (weekday) => (() => {
-                var _el$21 = _tmpl$6$7();
+                var _el$21 = _tmpl$6$6();
                 insert(_el$21, () => formatters().formatWeekdayName(weekday));
                 effect((_p$) => {
                   var _v$27 = labels().labelWeekday(weekday), _v$28 = classNames().weekday;
@@ -1792,7 +1463,7 @@ function Calendar(input) {
         return props.footer;
       },
       get children() {
-        var _el$0 = _tmpl$4$f();
+        var _el$0 = _tmpl$4$e();
         insert(_el$0, () => props.footer);
         effect(() => className(_el$0, classNames().footer));
         return _el$0;
@@ -1851,11 +1522,11 @@ function CalendarDayButton(props) {
   }, rest));
 }
 delegateEvents(["click"]);
-var _tmpl$$A = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$z = /* @__PURE__ */ template(`<div>`);
 const part = (slot, recipe) => function CardPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$A();
+    var _el$ = _tmpl$$z();
     setAttribute(_el$, "data-slot", slot);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1872,11 +1543,11 @@ const CardDescription = part(`card-description`, `description`);
 const CardAction = part(`card-action`, `action`);
 const CardContent = part(`card-content`, `content`);
 const CardFooter = part(`card-footer`, `footer`);
-var _tmpl$$z = /* @__PURE__ */ template(`<span data-slot=carousel-counter aria-hidden=true>`), _tmpl$2$n = /* @__PURE__ */ template(`<div data-slot=carousel-thumbnails>`), _tmpl$3$i = /* @__PURE__ */ template(`<button type=button data-slot=carousel-thumbnail>`), _tmpl$4$e = /* @__PURE__ */ template(`<img alt aria-hidden=true loading=lazy decoding=async>`, true, false, false);
+var _tmpl$$y = /* @__PURE__ */ template(`<span data-slot=carousel-counter aria-hidden=true>`), _tmpl$2$m = /* @__PURE__ */ template(`<div data-slot=carousel-thumbnails>`), _tmpl$3$h = /* @__PURE__ */ template(`<button type=button data-slot=carousel-thumbnail>`), _tmpl$4$d = /* @__PURE__ */ template(`<img alt aria-hidden=true loading=lazy decoding=async>`, true, false, false);
 function CarouselCounter(props) {
   const [local, rest] = splitProps(props, [`page`, `total`, `class`]);
   return (() => {
-    var _el$ = _tmpl$$z();
+    var _el$ = _tmpl$$y();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(CAROUSEL_CLASSES.counter, local.class);
@@ -1909,7 +1580,7 @@ function CarouselThumbnails(props) {
     });
   });
   return (() => {
-    var _el$2 = _tmpl$2$n();
+    var _el$2 = _tmpl$2$m();
     var _ref$ = strip;
     typeof _ref$ === "function" ? use(_ref$, _el$2) : strip = _el$2;
     spread(_el$2, mergeProps({
@@ -1924,14 +1595,14 @@ function CarouselThumbnails(props) {
       children: (i) => {
         const current = () => i === local.page;
         return (() => {
-          var _el$3 = _tmpl$3$i();
+          var _el$3 = _tmpl$3$h();
           _el$3.$$click = () => local.onPageChange?.(i);
           insert(_el$3, createComponent(Show, {
             get when() {
               return local.urls[i];
             },
             children: (src) => (() => {
-              var _el$4 = _tmpl$4$e();
+              var _el$4 = _tmpl$4$d();
               setAttribute(_el$4, "draggable", false);
               effect((_p$) => {
                 var _v$5 = src(), _v$6 = CAROUSEL_CLASSES.thumbnailImage;
@@ -1966,7 +1637,7 @@ function CarouselThumbnails(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$y = /* @__PURE__ */ template(`<span data-slot=checkbox-indicator>`), _tmpl$2$m = /* @__PURE__ */ template(`<button type=button role=checkbox data-slot=checkbox>`), _tmpl$3$h = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true tabindex=-1>`);
+var _tmpl$$x = /* @__PURE__ */ template(`<span data-slot=checkbox-indicator>`), _tmpl$2$l = /* @__PURE__ */ template(`<button type=button role=checkbox data-slot=checkbox>`), _tmpl$3$g = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true tabindex=-1>`);
 const isIndeterminate = (c) => c === `indeterminate`;
 const stateOf = (c) => isIndeterminate(c) ? `indeterminate` : c ? `checked` : `unchecked`;
 function Checkbox(props) {
@@ -1997,7 +1668,7 @@ function Checkbox(props) {
     else if (Array.isArray(handler)) handler[0](handler[1], e);
   };
   return [(() => {
-    var _el$ = _tmpl$2$m();
+    var _el$ = _tmpl$2$l();
     use((el) => {
       setControl(el);
       if (typeof local.ref === `function`) local.ref(el);
@@ -2045,7 +1716,7 @@ function Checkbox(props) {
         return presence.mounted();
       },
       get children() {
-        var _el$2 = _tmpl$$y();
+        var _el$2 = _tmpl$$x();
         var _ref$ = presence.ref;
         typeof _ref$ === "function" ? use(_ref$, _el$2) : presence.ref = _el$2;
         insert(_el$2, createComponent(PaintIcon, {
@@ -2128,7 +1799,7 @@ function CheckboxBubble(props) {
     });
   };
   return (() => {
-    var _el$3 = _tmpl$3$h();
+    var _el$3 = _tmpl$3$g();
     var _ref$2 = input;
     typeof _ref$2 === "function" ? use(_ref$2, _el$3) : input = _el$3;
     effect((_p$) => {
@@ -2153,7 +1824,7 @@ function CheckboxBubble(props) {
     return _el$3;
   })();
 }
-var _tmpl$$x = /* @__PURE__ */ template(`<div>`), _tmpl$2$l = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$3$g = /* @__PURE__ */ template(`<span>`), _tmpl$4$d = /* @__PURE__ */ template(`<button type=button><span>`), _tmpl$5$9 = /* @__PURE__ */ template(`<img loading=lazy decoding=async>`, true, false, false);
+var _tmpl$$w = /* @__PURE__ */ template(`<div>`), _tmpl$2$k = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$3$f = /* @__PURE__ */ template(`<span>`), _tmpl$4$c = /* @__PURE__ */ template(`<button type=button><span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<img loading=lazy decoding=async>`, true, false, false);
 function ChoiceTilesFrame(props) {
   const buttons = [];
   const order = createMemo(() => props.options.map((o) => o.value));
@@ -2196,7 +1867,7 @@ function ChoiceTilesFrame(props) {
     });
   };
   return (() => {
-    var _el$ = _tmpl$$x();
+    var _el$ = _tmpl$$w();
     var _ref$ = props.rootRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.rootRef = _el$;
     spread(_el$, mergeProps({
@@ -2230,7 +1901,7 @@ function ChoiceTilesFrame(props) {
         });
         const description = o.description ? String(o.description) : ``;
         return (() => {
-          var _el$2 = _tmpl$4$d(), _el$4 = _el$2.firstChild;
+          var _el$2 = _tmpl$4$c(), _el$4 = _el$2.firstChild;
           _el$2.$$keydown = (e) => onKeyDown(i, e);
           _el$2.$$click = () => pick(i);
           use((el) => {
@@ -2264,7 +1935,7 @@ function ChoiceTilesFrame(props) {
               return pictures();
             },
             get children() {
-              var _el$3 = _tmpl$2$l();
+              var _el$3 = _tmpl$2$k();
               spread(_el$3, mergeProps(() => props.pictureProps(state())), false, true);
               insert(_el$3, () => props.renderPicture(o.image ? String(o.image) : null, state()));
               return _el$3;
@@ -2275,7 +1946,7 @@ function ChoiceTilesFrame(props) {
           insert(_el$2, createComponent(Show, {
             when: description,
             get children() {
-              var _el$5 = _tmpl$3$g();
+              var _el$5 = _tmpl$3$f();
               spread(_el$5, mergeProps(() => props.descriptionProps(state())), false, true);
               insert(_el$5, description);
               return _el$5;
@@ -2293,7 +1964,7 @@ function ChoiceTiles(props) {
   const multiple = () => props.multiple ?? false;
   const picked = createMemo(() => choiceValues(props.value, multiple()));
   const image = (src, label) => src ? props.renderImage ? props.renderImage(src, label) : (() => {
-    var _el$6 = _tmpl$5$9();
+    var _el$6 = _tmpl$5$8();
     setAttribute(_el$6, "src", src);
     setAttribute(_el$6, "alt", label);
     effect(() => className(_el$6, CHOICE_TILES_CLASSES.image));
@@ -2354,12 +2025,12 @@ function ChoiceTiles(props) {
   });
 }
 delegateEvents(["click", "keydown"]);
-var _tmpl$$w = /* @__PURE__ */ template(`<div data-slot=code-block>`), _tmpl$2$k = /* @__PURE__ */ template(`<div>`), _tmpl$3$f = /* @__PURE__ */ template(`<span aria-live=polite>`), _tmpl$4$c = /* @__PURE__ */ template(`<span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<pre data-slot=code-block-content dir=ltr tabindex=0><code data-slot=code-block-code>`), _tmpl$6$6 = /* @__PURE__ */ template(`<span data-slot=code-block-line><span data-slot=code-block-line-content>`);
+var _tmpl$$v = /* @__PURE__ */ template(`<div data-slot=code-block>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`), _tmpl$3$e = /* @__PURE__ */ template(`<span aria-live=polite>`), _tmpl$4$b = /* @__PURE__ */ template(`<span>`), _tmpl$5$7 = /* @__PURE__ */ template(`<pre data-slot=code-block-content dir=ltr tabindex=0><code data-slot=code-block-code>`), _tmpl$6$5 = /* @__PURE__ */ template(`<span data-slot=code-block-line><span data-slot=code-block-line-content>`);
 function CodeBlock(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`, `size`]);
   const variant = () => local.variant ?? `default`;
   return (() => {
-    var _el$ = _tmpl$$w();
+    var _el$ = _tmpl$$v();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return variant();
@@ -2379,7 +2050,7 @@ function CodeBlock(props) {
 const slotPart = (slot, recipe) => function CodeBlockPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$k();
+    var _el$2 = _tmpl$2$j();
     setAttribute(_el$2, "data-slot", slot);
     spread(_el$2, mergeProps({
       get ["class"]() {
@@ -2451,7 +2122,7 @@ function CodeBlockCopyButton(props) {
       });
     }
   })), (() => {
-    var _el$3 = _tmpl$3$f();
+    var _el$3 = _tmpl$3$e();
     insert(_el$3, (() => {
       var _c$ = memo(() => !!copied());
       return () => _c$() ? labels().copied : ``;
@@ -2488,7 +2159,7 @@ function CodeBlockContent(props) {
           return memo(() => tokens.length === 0)() ? null : createComponent(For, {
             each: tokens,
             children: (token) => (() => {
-              var _el$4 = _tmpl$4$c();
+              var _el$4 = _tmpl$4$b();
               insert(_el$4, () => token.text);
               effect((_p$) => {
                 var _v$ = token.kind, _v$2 = cn(CODE_TOKEN_CLASS[token.kind], CODE_BLOCK_CLASSES.token);
@@ -2518,7 +2189,7 @@ function CodeBlockContent(props) {
     return resolved();
   };
   return (() => {
-    var _el$5 = _tmpl$5$8(), _el$6 = _el$5.firstChild;
+    var _el$5 = _tmpl$5$7(), _el$6 = _el$5.firstChild;
     spread(_el$5, mergeProps({
       get ["data-wrap"]() {
         return local.wrap || void 0;
@@ -2549,7 +2220,7 @@ function CodeBlockLine(props) {
     return c === void 0 || c === null || c === `` || Array.isArray(c) && c.length === 0;
   };
   return (() => {
-    var _el$7 = _tmpl$6$6(), _el$8 = _el$7.firstChild;
+    var _el$7 = _tmpl$6$5(), _el$8 = _el$7.firstChild;
     spread(_el$7, mergeProps({
       get ["data-variant"]() {
         return local.variant ?? `default`;
@@ -2569,7 +2240,7 @@ function CodeBlockLine(props) {
     return _el$7;
   })();
 }
-var _tmpl$$v = /* @__PURE__ */ template(`<div data-slot=collapsible>`), _tmpl$2$j = /* @__PURE__ */ template(`<button type=button data-slot=collapsible-trigger>`), _tmpl$3$e = /* @__PURE__ */ template(`<div data-slot=collapsible-content>`);
+var _tmpl$$u = /* @__PURE__ */ template(`<div data-slot=collapsible>`), _tmpl$2$i = /* @__PURE__ */ template(`<button type=button data-slot=collapsible-trigger>`), _tmpl$3$d = /* @__PURE__ */ template(`<div data-slot=collapsible-content>`);
 const CollapsibleContext = createContext();
 const call$2 = (handler, e) => {
   if (typeof handler === `function`) handler(e);
@@ -2593,7 +2264,7 @@ function Collapsible(props) {
   return createComponent(CollapsibleContext.Provider, {
     value: state,
     get children() {
-      var _el$ = _tmpl$$v();
+      var _el$ = _tmpl$$u();
       spread(_el$, mergeProps({
         get ["data-state"]() {
           return open() ? `open` : `closed`;
@@ -2610,7 +2281,7 @@ function CollapsibleTrigger(props) {
   const ctx = useContext(CollapsibleContext);
   const [local, rest] = splitProps(props, [`onClick`]);
   return (() => {
-    var _el$2 = _tmpl$2$j();
+    var _el$2 = _tmpl$2$i();
     spread(_el$2, mergeProps({
       get ["aria-controls"]() {
         return ctx.contentId;
@@ -2734,7 +2405,7 @@ function CollapsibleContent(props) {
     };
   };
   return (() => {
-    var _el$3 = _tmpl$3$e();
+    var _el$3 = _tmpl$3$d();
     use((el) => {
       node2 = el;
       if (typeof local.ref === `function`) local.ref(el);
@@ -2768,10 +2439,10 @@ function CollapsibleContent(props) {
     return _el$3;
   })();
 }
-var _tmpl$$u = /* @__PURE__ */ template(`<div data-slot=command tabindex=-1><label data-slot=command-label>`), _tmpl$2$i = /* @__PURE__ */ template(`<button type=button data-slot=command-input-clear>`), _tmpl$3$d = /* @__PURE__ */ template(`<div data-slot=command-input-wrapper><input data-slot=command-input>`), _tmpl$4$b = /* @__PURE__ */ template(`<div data-slot=command-list><div data-slot=command-list-sizer>`), _tmpl$5$7 = /* @__PURE__ */ template(`<div data-slot=command-empty>`), _tmpl$6$5 = /* @__PURE__ */ template(`<div data-slot=command-group-heading aria-hidden=true>`), _tmpl$7$3 = /* @__PURE__ */ template(`<div data-slot=command-group><div data-slot=command-group-items role=group>`), _tmpl$8$3 = /* @__PURE__ */ template(`<div data-slot=command-item>`), _tmpl$9$2 = /* @__PURE__ */ template(`<div data-slot=command-separator>`), _tmpl$0$2 = /* @__PURE__ */ template(`<span data-slot=command-shortcut>`);
+var _tmpl$$t = /* @__PURE__ */ template(`<div data-slot=command tabindex=-1><label data-slot=command-label>`), _tmpl$2$h = /* @__PURE__ */ template(`<button type=button data-slot=command-input-clear>`), _tmpl$3$c = /* @__PURE__ */ template(`<div data-slot=command-input-wrapper><input data-slot=command-input>`), _tmpl$4$a = /* @__PURE__ */ template(`<div data-slot=command-list><div data-slot=command-list-sizer>`), _tmpl$5$6 = /* @__PURE__ */ template(`<div data-slot=command-empty>`), _tmpl$6$4 = /* @__PURE__ */ template(`<div data-slot=command-group-heading aria-hidden=true>`), _tmpl$7$2 = /* @__PURE__ */ template(`<div data-slot=command-group><div data-slot=command-group-items role=group>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div data-slot=command-item>`), _tmpl$9$1 = /* @__PURE__ */ template(`<div data-slot=command-separator>`), _tmpl$0$1 = /* @__PURE__ */ template(`<span data-slot=command-shortcut>`);
 const CommandContext = createContext();
 const GroupContext$1 = createContext();
-function useRoot$1() {
+function useRoot() {
   const ctx = useContext(CommandContext);
   if (!ctx) throw new Error(`Command parts must sit inside <Command>`);
   return ctx;
@@ -2815,7 +2486,7 @@ function Command(props) {
     labelId: createUniqueId()
   };
   return (() => {
-    var _el$ = _tmpl$$u(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$t(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(COMMAND_CLASSES.root, local.class);
@@ -2855,7 +2526,7 @@ function CommandInput(props) {
     listId,
     inputId,
     labelId
-  } = useRoot$1();
+  } = useRoot();
   let input;
   const controlled = () => local.value !== void 0;
   store.setSearch(local.value ?? local.defaultValue ?? ``, true);
@@ -2877,7 +2548,7 @@ function CommandInput(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$3 = _tmpl$3$d(), _el$4 = _el$3.firstChild;
+    var _el$3 = _tmpl$3$c(), _el$4 = _el$3.firstChild;
     insert(_el$3, createComponent(PaintIcon, {
       icon: Search,
       get ["class"]() {
@@ -2920,7 +2591,7 @@ function CommandInput(props) {
         return shown() !== ``;
       },
       get children() {
-        var _el$5 = _tmpl$2$i();
+        var _el$5 = _tmpl$2$h();
         _el$5.$$click = () => {
           change(``);
           input?.focus();
@@ -2958,7 +2629,7 @@ function CommandList(props) {
     store,
     track,
     listId
-  } = useRoot$1();
+  } = useRoot();
   let list;
   let sizer;
   onMount(() => {
@@ -2970,7 +2641,7 @@ function CommandList(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$6 = _tmpl$4$b(), _el$7 = _el$6.firstChild;
+    var _el$6 = _tmpl$4$a(), _el$7 = _el$6.firstChild;
     var _ref$ = list;
     typeof _ref$ === "function" ? use(_ref$, _el$6) : list = _el$6;
     spread(_el$6, mergeProps({
@@ -3001,13 +2672,13 @@ function CommandEmpty(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   return createComponent(Show, {
     get when() {
       return track(), store.empty();
     },
     get children() {
-      var _el$8 = _tmpl$5$7();
+      var _el$8 = _tmpl$5$6();
       spread(_el$8, mergeProps({
         get ["class"]() {
           return cn(COMMAND_CLASSES.empty, local.class);
@@ -3032,7 +2703,7 @@ function CommandGroup(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const id = createUniqueId();
   const headingId = createUniqueId();
   const seq = store.nextSeq();
@@ -3049,7 +2720,7 @@ function CommandGroup(props) {
   const heading = children(() => local.heading);
   const groupValue = () => local.value ?? (typeof local.heading === `string` ? local.heading : void 0);
   return (() => {
-    var _el$9 = _tmpl$7$3(), _el$1 = _el$9.firstChild;
+    var _el$9 = _tmpl$7$2(), _el$1 = _el$9.firstChild;
     var _ref$2 = el;
     typeof _ref$2 === "function" ? use(_ref$2, _el$9) : el = _el$9;
     spread(_el$9, mergeProps({
@@ -3070,7 +2741,7 @@ function CommandGroup(props) {
         return heading();
       },
       get children() {
-        var _el$0 = _tmpl$6$5();
+        var _el$0 = _tmpl$6$4();
         setAttribute(_el$0, "id", headingId);
         insert(_el$0, heading);
         effect(() => className(_el$0, COMMAND_CLASSES.groupHeading));
@@ -3097,7 +2768,7 @@ function CommandItem(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const group = useContext(GroupContext$1);
   const id = createUniqueId();
   const seq = store.nextSeq();
@@ -3143,7 +2814,7 @@ function CommandItem(props) {
     get children() {
       return (() => {
         const node2 = (() => {
-          var _el$10 = _tmpl$8$3();
+          var _el$10 = _tmpl$8$2();
           spread(_el$10, mergeProps({
             get ["class"]() {
               return cn(COMMAND_CLASSES.item, local.class);
@@ -3203,7 +2874,7 @@ function CommandSeparator(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const id = createUniqueId();
   const seq = store.nextSeq();
   let el;
@@ -3219,7 +2890,7 @@ function CommandSeparator(props) {
     get children() {
       return (() => {
         const node2 = (() => {
-          var _el$11 = _tmpl$9$2();
+          var _el$11 = _tmpl$9$1();
           spread(_el$11, mergeProps({
             get ["class"]() {
               return cn(COMMAND_CLASSES.separator, local.class);
@@ -3247,7 +2918,7 @@ function CommandSeparator(props) {
 function CommandShortcut(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$12 = _tmpl$0$2();
+    var _el$12 = _tmpl$0$1();
     spread(_el$12, mergeProps({
       get ["class"]() {
         return cn(COMMAND_CLASSES.shortcut, local.class);
@@ -3257,7 +2928,7 @@ function CommandShortcut(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$t = /* @__PURE__ */ template(`<svg><circle fill=none stroke=currentColor stroke-linecap=round></svg>`, false, true, false), _tmpl$2$h = /* @__PURE__ */ template(`<svg aria-hidden=true><circle fill=none stroke=currentColor opacity=0.2>`);
+var _tmpl$$s = /* @__PURE__ */ template(`<svg><circle fill=none stroke=currentColor stroke-linecap=round></svg>`, false, true, false), _tmpl$2$g = /* @__PURE__ */ template(`<svg aria-hidden=true><circle fill=none stroke=currentColor opacity=0.2>`);
 function ContextRing(props) {
   const [local, rest] = splitProps(props, [`percent`, `tone`, `showEmpty`, `class`]);
   const value = () => local.percent ?? null;
@@ -3279,7 +2950,7 @@ function ContextRing(props) {
         }
       }, rest, {
         get children() {
-          var _el$ = _tmpl$2$h(), _el$2 = _el$.firstChild;
+          var _el$ = _tmpl$2$g(), _el$2 = _el$.firstChild;
           setAttribute(_el$, "viewBox", `0 0 ${RING_SIZE} ${RING_SIZE}`);
           setAttribute(_el$, "width", RING_SIZE);
           setAttribute(_el$, "height", RING_SIZE);
@@ -3292,7 +2963,7 @@ function ContextRing(props) {
               return value() !== null;
             },
             get children() {
-              var _el$3 = _tmpl$$t();
+              var _el$3 = _tmpl$$s();
               setAttribute(_el$3, "cx", RING_SIZE / 2);
               setAttribute(_el$3, "cy", RING_SIZE / 2);
               setAttribute(_el$3, "r", RING_RADIUS);
@@ -3316,7 +2987,7 @@ function ContextRing(props) {
     }
   });
 }
-var _tmpl$$s = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
+var _tmpl$$r = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
 const SheetDragContext = createContext(null);
 function SheetDragProvider(props) {
   return createComponent(SheetDragContext.Provider, {
@@ -3335,7 +3006,7 @@ function SheetGrabber(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$ = _tmpl$$s();
+    var _el$ = _tmpl$$r();
     spread(_el$, mergeProps(drag ?? {}, rest, {
       get ["class"]() {
         return cn(SHEET_CHROME_CLASSES.grabber, local.class);
@@ -3432,7 +3103,7 @@ function createSheetDrag(opts) {
   };
   return { handleProps };
 }
-var _tmpl$$r = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$g = /* @__PURE__ */ template(`<div data-slot=sheet-header>`), _tmpl$3$c = /* @__PURE__ */ template(`<div data-slot=sheet-footer>`);
+var _tmpl$$q = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$f = /* @__PURE__ */ template(`<div data-slot=sheet-header>`), _tmpl$3$b = /* @__PURE__ */ template(`<div data-slot=sheet-footer>`);
 function Sheet(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3542,7 +3213,7 @@ function SheetContent(props) {
                           return SHEET_CLASSES.closeIcon;
                         }
                       }), (() => {
-                        var _el$ = _tmpl$$r();
+                        var _el$ = _tmpl$$q();
                         effect(() => className(_el$, SHEET_CLASSES.srOnly));
                         return _el$;
                       })()];
@@ -3561,7 +3232,7 @@ function SheetHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$g();
+    var _el$2 = _tmpl$2$f();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(SHEET_CLASSES.header, local.class);
@@ -3573,7 +3244,7 @@ function SheetHeader(props) {
 function SheetFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$c();
+    var _el$3 = _tmpl$3$b();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(SHEET_CLASSES.footer, local.class);
@@ -3600,7 +3271,7 @@ function SheetDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$q = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$f = /* @__PURE__ */ template(`<div data-slot=dialog-header>`), _tmpl$3$b = /* @__PURE__ */ template(`<div data-slot=dialog-body>`), _tmpl$4$a = /* @__PURE__ */ template(`<div data-slot=dialog-footer>`);
+var _tmpl$$p = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$e = /* @__PURE__ */ template(`<div data-slot=dialog-header>`), _tmpl$3$a = /* @__PURE__ */ template(`<div data-slot=dialog-body>`), _tmpl$4$9 = /* @__PURE__ */ template(`<div data-slot=dialog-footer>`);
 function Dialog(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3631,7 +3302,7 @@ function DialogContent(props) {
   const [local, rest] = splitProps(props, [`class`, `children`, `showCloseButton`, `mobile`, `ref`, `onInteractOutside`, `container`]);
   const mobile = () => local.mobile ?? `sheet`;
   const isSheet = () => mobile() === `sheet` || mobile() === `sheet-full`;
-  const isPhone = createMediaQuery$1(DIALOG_PHONE_QUERY);
+  const isPhone = createMediaQuery(DIALOG_PHONE_QUERY);
   let panel;
   let dragClose;
   const {
@@ -3720,7 +3391,7 @@ function DialogContent(props) {
                               return [createComponent(PaintIcon, {
                                 icon: X
                               }), (() => {
-                                var _el$ = _tmpl$$q();
+                                var _el$ = _tmpl$$p();
                                 effect(() => className(_el$, DIALOG_CLASSES.srOnly));
                                 return _el$;
                               })()];
@@ -3773,7 +3444,7 @@ function DialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$f();
+    var _el$2 = _tmpl$2$e();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(DIALOG_CLASSES.header, local.class);
@@ -3785,7 +3456,7 @@ function DialogHeader(props) {
 function DialogBody(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$b();
+    var _el$3 = _tmpl$3$a();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.body, local.class);
@@ -3797,7 +3468,7 @@ function DialogBody(props) {
 function DialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$a();
+    var _el$4 = _tmpl$4$9();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.footer, local.class);
@@ -3842,7 +3513,7 @@ function DialogDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$p = /* @__PURE__ */ template(`<button type=button data-slot=disclosure-header>`);
+var _tmpl$$o = /* @__PURE__ */ template(`<button type=button data-slot=disclosure-header>`);
 function DisclosureHeader(props) {
   const [local, rest] = splitProps(props, [`open`, `onToggle`, `chevron`, `class`, `children`]);
   const chevron = () => local.chevron ?? `leading`;
@@ -3856,7 +3527,7 @@ function DisclosureHeader(props) {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$p();
+    var _el$ = _tmpl$$o();
     _el$.$$click = () => local.onToggle();
     spread(_el$, mergeProps({
       get ["data-chevron"]() {
@@ -3874,899 +3545,228 @@ function DisclosureHeader(props) {
       return () => _c$() && glyph();
     })(), null);
     insert(_el$, () => local.children, null);
-    insert(_el$, (() => {
-      var _c$2 = memo(() => chevron() === `trailing`);
-      return () => _c$2() && glyph();
-    })(), null);
-    return _el$;
-  })();
-}
-delegateEvents(["click"]);
-var _tmpl$$o = /* @__PURE__ */ template(`<span data-slot=dock-card-caption>`), _tmpl$2$e = /* @__PURE__ */ template(`<span data-slot=dock-card-meta>`), _tmpl$3$a = /* @__PURE__ */ template(`<div data-slot=dock-card><div data-slot=dock-card-body><div><div><span data-slot=dock-card-label></span></div><div><span data-slot=dock-card-title>`), _tmpl$4$9 = /* @__PURE__ */ template(`<span data-slot=dock-card-trailing>`), _tmpl$5$6 = /* @__PURE__ */ template(`<div data-slot=dock-pile>`), _tmpl$6$4 = /* @__PURE__ */ template(`<div data-slot=dock-pile-item>`);
-function DockCard(props) {
-  const [local, rest] = splitProps(props, [`tint`, `icon`, `label`, `caption`, `meta`, `title`, `onOpen`, `trailing`, `hidden`, `openLabel`, `class`]);
-  const tint = () => local.tint ?? `muted`;
-  const pressable = () => local.onOpen !== void 0;
-  const has = (value) => value !== void 0 && value !== null;
-  return (() => {
-    var _el$ = _tmpl$3$a(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
-    _el$.$$keydown = (event) => {
-      if (!pressable() || event.defaultPrevented) return;
-      if (event.key === `Enter` || event.key === ` `) {
-        event.preventDefault();
-        local.onOpen?.();
-      }
-    };
-    _el$.$$click = () => local.onOpen?.();
-    spread(_el$, mergeProps({
-      get role() {
-        return pressable() ? `button` : void 0;
-      },
-      get tabIndex() {
-        return pressable() && !local.hidden ? 0 : void 0;
-      },
-      get ["aria-label"]() {
-        return memo(() => !!pressable())() ? local.openLabel : void 0;
-      },
-      get ["aria-hidden"]() {
-        return local.hidden ? true : void 0;
-      },
-      get ["class"]() {
-        return cn(DOCK_CARD_CLASSES.root, pressable() && DOCK_CARD_CLASSES.pressable, local.class);
-      }
-    }, rest), false, true);
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return local.icon;
-      },
-      children: (icon) => createComponent(PaintIcon, {
-        get icon() {
-          return icon();
-        },
-        "aria-hidden": true,
-        "data-slot": "dock-card-icon",
-        get ["class"]() {
-          return cn(DOCK_CARD_CLASSES.icon, DOCK_CARD_CLASSES.tint[tint()]);
-        }
-      })
-    }), _el$3);
-    insert(_el$5, () => local.label);
-    insert(_el$4, createComponent(Show, {
-      get when() {
-        return has(local.caption);
-      },
-      get children() {
-        var _el$6 = _tmpl$$o();
-        insert(_el$6, () => local.caption);
-        effect(() => className(_el$6, DOCK_CARD_CLASSES.caption));
-        return _el$6;
-      }
-    }), null);
-    insert(_el$4, createComponent(Show, {
-      get when() {
-        return has(local.meta);
-      },
-      get children() {
-        var _el$7 = _tmpl$2$e();
-        insert(_el$7, () => local.meta);
-        effect(() => className(_el$7, DOCK_CARD_CLASSES.meta));
-        return _el$7;
-      }
-    }), null);
-    insert(_el$9, () => local.title);
-    insert(_el$8, createComponent(Show, {
-      get when() {
-        return pressable();
-      },
-      get fallback() {
-        return createComponent(Show, {
-          get when() {
-            return has(local.trailing);
-          },
-          get children() {
-            var _el$0 = _tmpl$4$9();
-            insert(_el$0, () => local.trailing);
-            effect(() => className(_el$0, DOCK_CARD_CLASSES.trailing));
-            return _el$0;
-          }
-        });
-      },
-      get children() {
-        return createComponent(PaintIcon, {
-          icon: ChevronRight,
-          "aria-hidden": true,
-          "data-slot": "dock-card-chevron",
-          get ["class"]() {
-            return DOCK_CARD_CLASSES.chevron;
-          }
-        });
-      }
-    }), null);
-    effect((_p$) => {
-      var _v$ = local.hidden ? `true` : `false`, _v$2 = DOCK_CARD_CLASSES.body, _v$3 = DOCK_CARD_CLASSES.text, _v$4 = DOCK_CARD_CLASSES.header, _v$5 = cn(DOCK_CARD_CLASSES.label, DOCK_CARD_CLASSES.tint[tint()]), _v$6 = DOCK_CARD_CLASSES.row, _v$7 = DOCK_CARD_CLASSES.title;
-      _v$ !== _p$.e && setAttribute(_el$2, "data-hidden", _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
-      _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
-      _v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
-      _v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0
-    });
-    return _el$;
-  })();
-}
-function DockPile(props) {
-  const [local, rest] = splitProps(props, [`items`, `expanded`, `onExpandedChange`, `class`, `style`]);
-  const [measured, setMeasured] = createSignal({});
-  const nodes = /* @__PURE__ */ new Map();
-  const measure = () => {
-    const next = {};
-    for (const item of local.items) {
-      const el = nodes.get(item.id);
-      if (item.height === void 0 && el) next[item.id] = el.offsetHeight;
-    }
-    const prev = measured();
-    if (!(Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([k, v]) => prev[k] === v))) setMeasured(next);
-  };
-  createEffect(() => {
-    void local.items;
-    measure();
-    if (typeof ResizeObserver === `undefined`) return;
-    const observer = new ResizeObserver(measure);
-    for (const el of nodes.values()) observer.observe(el);
-    onCleanup(() => observer.disconnect());
-  });
-  const geometry = createMemo(() => dockPileGeometry(local.items.map((item) => item.height ?? measured()[item.id] ?? 0), local.expanded));
-  return (() => {
-    var _el$1 = _tmpl$5$6();
-    _el$1.$$focusout = (event) => {
-      const next = event.relatedTarget;
-      if (!next || !event.currentTarget.contains(next)) local.onExpandedChange?.(false);
-    };
-    _el$1.$$focusin = () => local.onExpandedChange?.(true);
-    _el$1.addEventListener("pointerleave", (event) => {
-      if (event.pointerType !== `touch`) local.onExpandedChange?.(false);
-    });
-    _el$1.addEventListener("pointerenter", (event) => {
-      if (event.pointerType !== `touch`) local.onExpandedChange?.(true);
-    });
-    use((el) => bindStyle(el, () => ({
-      ...local.style ?? {},
-      height: `${geometry().height}px`
-    })), _el$1);
-    spread(_el$1, mergeProps({
-      get ["data-expanded"]() {
-        return local.expanded ? `true` : `false`;
-      },
-      get ["class"]() {
-        return cn(DOCK_PILE_CLASSES.root, local.class);
-      }
-    }, rest), false, true);
-    insert(_el$1, createComponent(For, {
-      get each() {
-        return local.items;
-      },
-      children: (item, i) => {
-        const placed = () => geometry().items[i()] ?? {
-          offset: 0,
-          scale: 1,
-          visible: true
-        };
-        let node2;
-        onCleanup(() => {
-          if (nodes.get(item.id) === node2) nodes.delete(item.id);
-        });
-        return (() => {
-          var _el$10 = _tmpl$6$4();
-          use((el) => {
-            node2 = el;
-            nodes.set(item.id, el);
-            bindStyle(el, () => css({
-              "--offset": `${placed().offset}px`,
-              "--scale": `${placed().scale}`,
-              zIndex: i() + 1
-            }));
-          }, _el$10);
-          insert(_el$10, () => item.node);
-          effect((_p$) => {
-            var _v$8 = i() === local.items.length - 1 ? `true` : `false`, _v$9 = placed().visible ? `true` : `false`, _v$0 = DOCK_PILE_CLASSES.item;
-            _v$8 !== _p$.e && setAttribute(_el$10, "data-front", _p$.e = _v$8);
-            _v$9 !== _p$.t && setAttribute(_el$10, "data-visible", _p$.t = _v$9);
-            _v$0 !== _p$.a && className(_el$10, _p$.a = _v$0);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          });
-          return _el$10;
-        })();
-      }
-    }));
-    return _el$1;
-  })();
-}
-delegateEvents(["click", "keydown", "focusin", "focusout"]);
-var _tmpl$$n = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-group>`), _tmpl$2$d = /* @__PURE__ */ template(`<div role=menuitem>`), _tmpl$3$9 = /* @__PURE__ */ template(`<span>`), _tmpl$4$8 = /* @__PURE__ */ template(`<div role=menuitemcheckbox><span>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-radio-group>`), _tmpl$6$3 = /* @__PURE__ */ template(`<div role=menuitemradio><span>`), _tmpl$7$2 = /* @__PURE__ */ template(`<div data-slot=dropdown-menu-label>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div role=separator aria-orientation=horizontal data-slot=dropdown-menu-separator>`), _tmpl$9$1 = /* @__PURE__ */ template(`<span data-slot=dropdown-menu-shortcut>`), _tmpl$0$1 = /* @__PURE__ */ template(`<div role=menuitem aria-haspopup=menu>`);
-const RootContext = createContext();
-const useRoot = (part2) => {
-  const ctx = useContext(RootContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`DropdownMenu\``);
-  return ctx;
-};
-const LevelOpenContext = createContext(() => false);
-function DropdownMenu(props) {
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  useKeyboardTracking();
-  const value = {
-    open,
-    setOpen,
-    triggerId: `radix-${createId()}`,
-    contentId: `radix-${createId()}`,
-    trigger,
-    setTrigger,
-    dir: () => props.dir ?? `ltr`
-  };
-  return createComponent(RootContext.Provider, {
-    value,
-    get children() {
-      return createComponent(LevelOpenContext.Provider, {
-        value: open,
-        get children() {
-          return props.children;
-        }
-      });
-    }
-  });
-}
-function DropdownMenuPortal(props) {
-  return createComponent(DialogPortalPart, props);
-}
-function DropdownMenuTrigger(props) {
-  const ctx = useRoot(`DropdownMenuTrigger`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `disabled`, `onPointerDown`, `onKeyDown`]);
-  const disabled = () => local.disabled ?? false;
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    "data-slot": "dropdown-menu-trigger",
-    type: "button",
-    get id() {
-      return ctx.triggerId;
-    },
-    "aria-haspopup": "menu",
-    get ["aria-expanded"]() {
-      return ctx.open() ? `true` : `false`;
-    },
-    get ["aria-controls"]() {
-      return memo(() => !!ctx.open())() ? ctx.contentId : void 0;
-    },
-    get ["data-state"]() {
-      return stateOf$1(ctx.open());
-    },
-    get ["data-disabled"]() {
-      return disabled() ? `` : void 0;
-    },
-    get disabled() {
-      return disabled();
-    }
-  }, rest, {
-    ref(r$) {
-      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
-      typeof _ref$ === "function" && _ref$(r$);
-    },
-    get onPointerDown() {
-      return composeHandlers(local.onPointerDown, (e) => {
-        if (!untrack(disabled) && e.button === 0 && e.ctrlKey === false) {
-          const was = untrack(ctx.open);
-          ctx.setOpen(!was);
-          if (!was) e.preventDefault();
-        }
-      });
-    },
-    get onKeyDown() {
-      return composeHandlers(local.onKeyDown, (e) => {
-        if (untrack(disabled)) return;
-        if ([`Enter`, ` `].includes(e.key)) ctx.setOpen(!untrack(ctx.open));
-        if (e.key === `ArrowDown`) ctx.setOpen(true);
-        if ([`Enter`, ` `, `ArrowDown`].includes(e.key)) e.preventDefault();
-      });
-    }
-  }));
-}
-const CONTENT_KEYS = [`class`, `side`, `align`, `sideOffset`, `alignOffset`, `collisionPadding`, `container`, `children`, `ref`, `onKeyDown`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onFocusOutside`, `onInteractOutside`];
-function DropdownMenuContent(props) {
-  const ctx = useRoot(`DropdownMenuContent`);
-  const [local, rest] = splitProps(props, CONTENT_KEYS);
-  const presence = createPresence(ctx.open);
-  let interactedOutside = false;
-  return createComponent(DropdownMenuPortal, {
-    get container() {
-      return local.container;
-    },
-    get children() {
-      return createComponent(Show, {
-        get when() {
-          return presence.mounted();
-        },
-        children: (_) => {
-          const lag = layerMountedThisTask();
-          return createComponent(MenuContent, {
-            get anchor() {
-              return ctx.trigger();
-            },
-            get side() {
-              return local.side ?? `bottom`;
-            },
-            get align() {
-              return local.align ?? `center`;
-            },
-            get sideOffset() {
-              return local.sideOffset ?? 4;
-            },
-            get alignOffset() {
-              return local.alignOffset;
-            },
-            get collisionPadding() {
-              return local.collisionPadding ?? 0;
-            },
-            get dir() {
-              return ctx.dir();
-            },
-            kind: "dropdown-menu",
-            lagParentLayer: lag,
-            root: true,
-            get id() {
-              return ctx.contentId;
-            },
-            get labelledBy() {
-              return ctx.triggerId;
-            },
-            state: () => stateOf$1(ctx.open()),
-            attrs: () => ({
-              "data-slot": `dropdown-menu-content`,
-              class: cn(DROPDOWN_MENU_CLASSES.content, local.class),
-              ...rest
-            }),
-            setContent: (el) => {
-              if (el) {
-                presence.ref(el);
-                noteLayerMount();
-                callRef(local.ref, el);
-              }
-            },
-            onDismiss: () => ctx.setOpen(false),
-            get onKeyDown() {
-              return local.onKeyDown;
-            },
-            get onEscapeKeyDown() {
-              return local.onEscapeKeyDown;
-            },
-            get onFocusOutside() {
-              return local.onFocusOutside;
-            },
-            onInteractOutside: (e) => {
-              local.onInteractOutside?.(e);
-              if (e.defaultPrevented) return;
-              const original = e.detail.originalEvent;
-              const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
-              if (original.button === 2 || ctrlLeftClick) interactedOutside = true;
-            },
-            onCloseAutoFocus: (e) => {
-              local.onCloseAutoFocus?.(e);
-              if (e.defaultPrevented) return;
-              if (!interactedOutside) ctx.trigger()?.focus();
-              interactedOutside = false;
-              e.preventDefault();
-            },
-            get children() {
-              return local.children;
-            }
-          });
-        }
-      });
-    }
-  });
-}
-function DropdownMenuGroup(props) {
-  return (() => {
-    var _el$ = _tmpl$$n();
-    spread(_el$, props, false, false);
-    return _el$;
-  })();
-}
-const insetAttr = (inset) => inset === void 0 ? void 0 : String(inset);
-function createItem(local, onSelect) {
-  const root = useRoot(`DropdownMenuItem`);
-  const row = createSelectable(() => local.disabled ?? false, (e) => onSelect(e), () => root.setOpen(false));
-  const h = row.handlers;
-  return {
-    attrs: row.attrs,
-    ref: mergeRefs(row.ref, local.ref),
-    handlers: {
-      onClick: composeHandlers(local.onClick, h.onClick),
-      onPointerDown: composeHandlers(local.onPointerDown, h.onPointerDown, false),
-      onPointerUp: composeHandlers(local.onPointerUp, h.onPointerUp),
-      onPointerMove: composeHandlers(local.onPointerMove, h.onPointerMove),
-      onPointerLeave: composeHandlers(local.onPointerLeave, h.onPointerLeave),
-      onKeyDown: composeHandlers(local.onKeyDown, h.onKeyDown),
-      onFocus: composeHandlers(local.onFocus, h.onFocus),
-      onBlur: composeHandlers(local.onBlur, h.onBlur)
-    }
-  };
-}
-const ITEM_KEYS = [`disabled`, `onSelect`, `ref`, `onClick`, `onPointerDown`, `onPointerUp`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`];
-function DropdownMenuItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `inset`, `variant`], ITEM_KEYS);
-  const item = createItem(handlers, (e) => handlers.onSelect?.(e));
-  return (() => {
-    var _el$2 = _tmpl$2$d();
-    var _ref$2 = item.ref;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$2) : item.ref = _el$2;
-    spread(_el$2, mergeProps(() => item.attrs(), {
-      "data-slot": "dropdown-menu-item",
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
-      },
-      get ["data-variant"]() {
-        return local.variant ?? `default`;
-      },
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.item, local.class);
-      }
-    }, rest, () => item.handlers), false, false);
-    return _el$2;
-  })();
-}
-const checkedState = (c) => c === `indeterminate` ? `indeterminate` : c ? `checked` : `unchecked`;
-const IndicatorContext = createContext(() => false);
-function ItemIndicator(props) {
-  const checked = useContext(IndicatorContext);
-  return createComponent(Show, {
-    get when() {
-      return checked() === true || checked() === `indeterminate`;
-    },
-    get children() {
-      var _el$3 = _tmpl$3$9();
-      insert(_el$3, () => props.children);
-      effect(() => setAttribute(_el$3, "data-state", checkedState(checked())));
-      return _el$3;
-    }
-  });
-}
-function DropdownMenuCheckboxItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `checked`, `onCheckedChange`], ITEM_KEYS);
-  const checked = () => local.checked ?? false;
-  const item = createItem(handlers, (e) => {
-    handlers.onSelect?.(e);
-    const c = untrack(checked);
-    local.onCheckedChange?.(c === `indeterminate` ? true : !c);
-  });
-  return createComponent(IndicatorContext.Provider, {
-    value: checked,
-    get children() {
-      var _el$4 = _tmpl$4$8(), _el$5 = _el$4.firstChild;
-      var _ref$3 = item.ref;
-      typeof _ref$3 === "function" ? use(_ref$3, _el$4) : item.ref = _el$4;
-      spread(_el$4, mergeProps({
-        get ["aria-checked"]() {
-          return memo(() => checked() === `indeterminate`)() ? `mixed` : checked() ? `true` : `false`;
-        }
-      }, () => item.attrs(), {
-        "data-slot": "dropdown-menu-checkbox-item",
-        get ["class"]() {
-          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
-        }
-      }, rest, {
-        get ["data-state"]() {
-          return checkedState(checked());
-        }
-      }, () => item.handlers), false, true);
-      insert(_el$5, createComponent(ItemIndicator, {
-        get children() {
-          return createComponent(PaintIcon, {
-            icon: Check,
-            get ["class"]() {
-              return DROPDOWN_MENU_CLASSES.checkIcon;
-            }
-          });
-        }
-      }));
-      insert(_el$4, () => local.children, null);
-      effect(() => className(_el$5, DROPDOWN_MENU_CLASSES.itemIndicator));
-      return _el$4;
-    }
-  });
-}
-const RadioGroupContext = createContext({
-  value: () => void 0,
-  onValueChange: () => {
-  }
-});
-function DropdownMenuRadioGroup(props) {
-  const [local, rest] = splitProps(props, [`value`, `onValueChange`]);
-  return createComponent(RadioGroupContext.Provider, {
-    value: {
-      value: () => local.value,
-      onValueChange: (v) => local.onValueChange?.(v)
-    },
-    get children() {
-      var _el$6 = _tmpl$5$5();
-      spread(_el$6, rest, false, false);
-      return _el$6;
-    }
-  });
-}
-function DropdownMenuRadioItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `value`], ITEM_KEYS);
-  const group = useContext(RadioGroupContext);
-  const checked = () => local.value === group.value();
-  const item = createItem(handlers, (e) => {
-    handlers.onSelect?.(e);
-    group.onValueChange(local.value);
-  });
-  return createComponent(IndicatorContext.Provider, {
-    value: checked,
-    get children() {
-      var _el$7 = _tmpl$6$3(), _el$8 = _el$7.firstChild;
-      var _ref$4 = item.ref;
-      typeof _ref$4 === "function" ? use(_ref$4, _el$7) : item.ref = _el$7;
-      spread(_el$7, mergeProps({
-        get ["aria-checked"]() {
-          return checked() ? `true` : `false`;
-        }
-      }, () => item.attrs(), {
-        "data-slot": "dropdown-menu-radio-item",
-        get ["class"]() {
-          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
-        }
-      }, rest, {
-        get ["data-state"]() {
-          return checkedState(checked());
-        }
-      }, () => item.handlers), false, true);
-      insert(_el$8, createComponent(ItemIndicator, {
-        get children() {
-          return createComponent(PaintIcon, {
-            icon: Circle,
-            get ["class"]() {
-              return DROPDOWN_MENU_CLASSES.radioIcon;
-            }
-          });
-        }
-      }));
-      insert(_el$7, () => local.children, null);
-      effect(() => className(_el$8, DROPDOWN_MENU_CLASSES.itemIndicator));
-      return _el$7;
-    }
-  });
-}
-function DropdownMenuLabel(props) {
-  const [local, rest] = splitProps(props, [`class`, `inset`]);
-  return (() => {
-    var _el$9 = _tmpl$7$2();
-    spread(_el$9, mergeProps({
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
-      },
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.label, local.class);
-      }
-    }, rest), false, false);
-    return _el$9;
-  })();
-}
-function DropdownMenuSeparator(props) {
-  const [local, rest] = splitProps(props, [`class`]);
-  return (() => {
-    var _el$0 = _tmpl$8$2();
-    spread(_el$0, mergeProps({
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.separator, local.class);
-      }
-    }, rest), false, false);
-    return _el$0;
-  })();
-}
-function DropdownMenuShortcut(props) {
-  const [local, rest] = splitProps(props, [`class`]);
-  return (() => {
-    var _el$1 = _tmpl$9$1();
-    spread(_el$1, mergeProps({
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.shortcut, local.class);
-      }
-    }, rest), false, false);
-    return _el$1;
-  })();
-}
-const SubContext = createContext();
-const useSub = (part2) => {
-  const ctx = useContext(SubContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`DropdownMenuSub\``);
-  return ctx;
-};
-function DropdownMenuSub(props) {
-  const parentOpen = useContext(LevelOpenContext);
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  const [content, setContent] = createSignal();
-  createEffect(on(parentOpen, (o) => o === false && setOpen(false)));
-  onCleanup(() => setOpen(false));
-  const value = {
-    open,
-    setOpen,
-    triggerId: `radix-${createId()}`,
-    contentId: `radix-${createId()}`,
-    trigger,
-    setTrigger,
-    content,
-    setContent
-  };
-  return createComponent(SubContext.Provider, {
-    value,
-    get children() {
-      return createComponent(LevelOpenContext.Provider, {
-        value: open,
-        get children() {
-          return props.children;
-        }
-      });
-    }
-  });
+    insert(_el$, (() => {
+      var _c$2 = memo(() => chevron() === `trailing`);
+      return () => _c$2() && glyph();
+    })(), null);
+    return _el$;
+  })();
 }
-function DropdownMenuSubTrigger(props) {
-  const root = useRoot(`DropdownMenuSubTrigger`);
-  const sub = useSub(`DropdownMenuSubTrigger`);
-  const [local, rest] = splitProps(props, [`class`, `inset`, `variant`, `children`, `disabled`, `ref`, `onClick`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`]);
-  const disabled = () => local.disabled ?? false;
-  const row = createMenuRow(disabled);
-  let openTimer;
-  let graceTimer;
-  const clearOpenTimer = () => {
-    clearTimeout(openTimer);
-    openTimer = void 0;
-  };
-  onCleanup(() => {
-    clearOpenTimer();
-    clearTimeout(graceTimer);
-    row.level.setGrace(null);
-  });
-  const openKey = () => root.dir() === `rtl` ? `ArrowLeft` : `ArrowRight`;
+delegateEvents(["click"]);
+var _tmpl$$n = /* @__PURE__ */ template(`<span data-slot=dock-card-caption>`), _tmpl$2$d = /* @__PURE__ */ template(`<span data-slot=dock-card-meta>`), _tmpl$3$9 = /* @__PURE__ */ template(`<div data-slot=dock-card><div data-slot=dock-card-body><div><div><span data-slot=dock-card-label></span></div><div><span data-slot=dock-card-title>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span data-slot=dock-card-trailing>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div data-slot=dock-pile>`), _tmpl$6$3 = /* @__PURE__ */ template(`<div data-slot=dock-pile-item>`);
+function DockCard(props) {
+  const [local, rest] = splitProps(props, [`tint`, `icon`, `label`, `caption`, `meta`, `title`, `onOpen`, `trailing`, `hidden`, `openLabel`, `class`]);
+  const tint = () => local.tint ?? `muted`;
+  const pressable = () => local.onOpen !== void 0;
+  const has = (value) => value !== void 0 && value !== null;
   return (() => {
-    var _el$10 = _tmpl$0$1();
-    var _ref$5 = mergeRefs(row.ref, sub.setTrigger, local.ref);
-    typeof _ref$5 === "function" && use(_ref$5, _el$10);
-    spread(_el$10, mergeProps({
-      get id() {
-        return sub.triggerId;
+    var _el$ = _tmpl$3$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
+    _el$.$$keydown = (event) => {
+      if (!pressable() || event.defaultPrevented) return;
+      if (event.key === `Enter` || event.key === ` `) {
+        event.preventDefault();
+        local.onOpen?.();
+      }
+    };
+    _el$.$$click = () => local.onOpen?.();
+    spread(_el$, mergeProps({
+      get role() {
+        return pressable() ? `button` : void 0;
       },
-      get ["aria-expanded"]() {
-        return sub.open() ? `true` : `false`;
+      get tabIndex() {
+        return pressable() && !local.hidden ? 0 : void 0;
       },
-      get ["aria-controls"]() {
-        return sub.contentId;
+      get ["aria-label"]() {
+        return memo(() => !!pressable())() ? local.openLabel : void 0;
       },
-      get ["data-state"]() {
-        return stateOf$1(sub.open());
+      get ["aria-hidden"]() {
+        return local.hidden ? true : void 0;
+      },
+      get ["class"]() {
+        return cn(DOCK_CARD_CLASSES.root, pressable() && DOCK_CARD_CLASSES.pressable, local.class);
       }
-    }, () => row.attrs(), {
-      "data-slot": "dropdown-menu-sub-trigger",
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
+    }, rest), false, true);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return local.icon;
       },
-      get ["data-variant"]() {
-        return local.variant ?? `default`;
+      children: (icon) => createComponent(PaintIcon, {
+        get icon() {
+          return icon();
+        },
+        "aria-hidden": true,
+        "data-slot": "dock-card-icon",
+        get ["class"]() {
+          return cn(DOCK_CARD_CLASSES.icon, DOCK_CARD_CLASSES.tint[tint()]);
+        }
+      })
+    }), _el$3);
+    insert(_el$5, () => local.label);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return has(local.caption);
       },
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.subTrigger, local.class);
+      get children() {
+        var _el$6 = _tmpl$$n();
+        insert(_el$6, () => local.caption);
+        effect(() => className(_el$6, DOCK_CARD_CLASSES.caption));
+        return _el$6;
       }
-    }, rest, {
-      get onClick() {
-        return composeHandlers(local.onClick, (e) => {
-          if (untrack(disabled)) return;
-          e.currentTarget.focus();
-          if (!untrack(sub.open)) sub.setOpen(true);
-        });
+    }), null);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return has(local.meta);
       },
-      get onPointerMove() {
-        return composeHandlers(local.onPointerMove, (e) => {
-          if (e.pointerType !== `mouse`) return;
-          if (row.level.onItemEnter(e)) return;
-          if (!untrack(disabled) && !untrack(sub.open) && !openTimer) {
-            row.level.setGrace(null);
-            openTimer = setTimeout(() => {
-              sub.setOpen(true);
-              clearOpenTimer();
-            }, 100);
-          }
-          row.handlers.onPointerMove(e);
-        });
+      get children() {
+        var _el$7 = _tmpl$2$d();
+        insert(_el$7, () => local.meta);
+        effect(() => className(_el$7, DOCK_CARD_CLASSES.meta));
+        return _el$7;
+      }
+    }), null);
+    insert(_el$9, () => local.title);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return pressable();
       },
-      get onPointerLeave() {
-        return composeHandlers(local.onPointerLeave, (e) => {
-          if (e.pointerType !== `mouse`) return;
-          clearOpenTimer();
-          const content = sub.content();
-          const rect = content?.getBoundingClientRect();
-          if (content && rect) {
-            const side = content.dataset.side;
-            const right = side === `right`;
-            const bleed = right ? -5 : 5;
-            const near = rect[right ? `left` : `right`];
-            const far = rect[right ? `right` : `left`];
-            row.level.setGrace({
-              area: [{
-                x: e.clientX + bleed,
-                y: e.clientY
-              }, {
-                x: near,
-                y: rect.top
-              }, {
-                x: far,
-                y: rect.top
-              }, {
-                x: far,
-                y: rect.bottom
-              }, {
-                x: near,
-                y: rect.bottom
-              }],
-              side
-            });
-            clearTimeout(graceTimer);
-            graceTimer = setTimeout(() => row.level.setGrace(null), 300);
-          } else {
-            if (row.level.onTriggerLeave(e)) return;
-            row.level.setGrace(null);
-            row.handlers.onPointerLeave(e);
+      get fallback() {
+        return createComponent(Show, {
+          get when() {
+            return has(local.trailing);
+          },
+          get children() {
+            var _el$0 = _tmpl$4$8();
+            insert(_el$0, () => local.trailing);
+            effect(() => className(_el$0, DOCK_CARD_CLASSES.trailing));
+            return _el$0;
           }
         });
       },
-      get onKeyDown() {
-        return composeHandlers(local.onKeyDown, (e) => {
-          const typingAhead = row.level.search() !== ``;
-          if (untrack(disabled) || typingAhead && e.key === ` `) return;
-          if ([`Enter`, ` `, openKey()].includes(e.key)) {
-            sub.setOpen(true);
-            sub.content()?.focus();
-            e.preventDefault();
-            return;
+      get children() {
+        return createComponent(PaintIcon, {
+          icon: ChevronRight,
+          "aria-hidden": true,
+          "data-slot": "dock-card-chevron",
+          get ["class"]() {
+            return DOCK_CARD_CLASSES.chevron;
           }
-          row.handlers.onKeyDown(e);
         });
-      },
-      get onFocus() {
-        return composeHandlers(local.onFocus, row.handlers.onFocus);
-      },
-      get onBlur() {
-        return composeHandlers(local.onBlur, row.handlers.onBlur);
-      }
-    }), false, true);
-    insert(_el$10, () => local.children, null);
-    insert(_el$10, createComponent(PaintIcon, {
-      icon: ChevronRight,
-      get ["class"]() {
-        return DROPDOWN_MENU_CLASSES.subChevron;
       }
     }), null);
-    return _el$10;
+    effect((_p$) => {
+      var _v$ = local.hidden ? `true` : `false`, _v$2 = DOCK_CARD_CLASSES.body, _v$3 = DOCK_CARD_CLASSES.text, _v$4 = DOCK_CARD_CLASSES.header, _v$5 = cn(DOCK_CARD_CLASSES.label, DOCK_CARD_CLASSES.tint[tint()]), _v$6 = DOCK_CARD_CLASSES.row, _v$7 = DOCK_CARD_CLASSES.title;
+      _v$ !== _p$.e && setAttribute(_el$2, "data-hidden", _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$;
   })();
 }
-function DropdownMenuSubContent(props) {
-  const root = useRoot(`DropdownMenuSubContent`);
-  const sub = useSub(`DropdownMenuSubContent`);
-  const [local, rest] = splitProps(props, CONTENT_KEYS);
-  const presence = createPresence(sub.open);
-  const closeKey = () => root.dir() === `rtl` ? `ArrowRight` : `ArrowLeft`;
-  return createComponent(DropdownMenuPortal, {
-    get container() {
-      return local.container;
-    },
-    get children() {
-      return createComponent(Show, {
-        get when() {
-          return presence.mounted();
-        },
-        children: (_) => {
-          const lag = layerMountedThisTask();
-          return createComponent(MenuContent, {
-            get anchor() {
-              return sub.trigger();
-            },
-            get side() {
-              return root.dir() === `rtl` ? `left` : `right`;
-            },
-            align: "start",
-            get sideOffset() {
-              return local.sideOffset ?? 0;
-            },
-            get alignOffset() {
-              return local.alignOffset;
-            },
-            get collisionPadding() {
-              return local.collisionPadding ?? 0;
-            },
-            get dir() {
-              return root.dir();
-            },
-            kind: "dropdown-menu",
-            lagParentLayer: lag,
-            root: false,
-            get id() {
-              return sub.contentId;
-            },
-            get labelledBy() {
-              return sub.triggerId;
-            },
-            state: () => stateOf$1(sub.open()),
-            attrs: () => ({
-              "data-slot": `dropdown-menu-sub-content`,
-              class: cn(DROPDOWN_MENU_CLASSES.subContent, local.class),
-              ...rest
-            }),
-            setContent: (el) => {
-              sub.setContent(el);
-              if (el) {
-                presence.ref(el);
-                noteLayerMount();
-                callRef(local.ref, el);
-              }
-            },
-            onDismiss: () => {
-            },
-            onEscapeKeyDown: (e) => {
-              local.onEscapeKeyDown?.(e);
-              if (e.defaultPrevented) return;
-              root.setOpen(false);
-              e.preventDefault();
-            },
-            onFocusOutside: (e) => {
-              local.onFocusOutside?.(e);
-              if (e.defaultPrevented) return;
-              if (e.target !== sub.trigger()) sub.setOpen(false);
-            },
-            get onInteractOutside() {
-              return local.onInteractOutside;
-            },
-            onCloseAutoFocus: (e) => e.preventDefault(),
-            onKeyDown: (e) => {
-              local.onKeyDown?.(e);
-              if (e.defaultPrevented) return;
-              if (sub.content()?.contains(e.target) && e.key === closeKey()) {
-                sub.setOpen(false);
-                sub.trigger()?.focus();
-                e.preventDefault();
-              }
-            },
-            get children() {
-              return local.children;
-            }
-          });
-        }
-      });
+function DockPile(props) {
+  const [local, rest] = splitProps(props, [`items`, `expanded`, `onExpandedChange`, `class`, `style`]);
+  const [measured, setMeasured] = createSignal({});
+  const nodes = /* @__PURE__ */ new Map();
+  const measure = () => {
+    const next = {};
+    for (const item of local.items) {
+      const el = nodes.get(item.id);
+      if (item.height === void 0 && el) next[item.id] = el.offsetHeight;
     }
+    const prev = measured();
+    if (!(Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([k, v]) => prev[k] === v))) setMeasured(next);
+  };
+  createEffect(() => {
+    void local.items;
+    measure();
+    if (typeof ResizeObserver === `undefined`) return;
+    const observer = new ResizeObserver(measure);
+    for (const el of nodes.values()) observer.observe(el);
+    onCleanup(() => observer.disconnect());
   });
+  const geometry = createMemo(() => dockPileGeometry(local.items.map((item) => item.height ?? measured()[item.id] ?? 0), local.expanded));
+  return (() => {
+    var _el$1 = _tmpl$5$5();
+    _el$1.$$focusout = (event) => {
+      const next = event.relatedTarget;
+      if (!next || !event.currentTarget.contains(next)) local.onExpandedChange?.(false);
+    };
+    _el$1.$$focusin = () => local.onExpandedChange?.(true);
+    _el$1.addEventListener("pointerleave", (event) => {
+      if (event.pointerType !== `touch`) local.onExpandedChange?.(false);
+    });
+    _el$1.addEventListener("pointerenter", (event) => {
+      if (event.pointerType !== `touch`) local.onExpandedChange?.(true);
+    });
+    use((el) => bindStyle(el, () => ({
+      ...local.style ?? {},
+      height: `${geometry().height}px`
+    })), _el$1);
+    spread(_el$1, mergeProps({
+      get ["data-expanded"]() {
+        return local.expanded ? `true` : `false`;
+      },
+      get ["class"]() {
+        return cn(DOCK_PILE_CLASSES.root, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$1, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (item, i) => {
+        const placed = () => geometry().items[i()] ?? {
+          offset: 0,
+          scale: 1,
+          visible: true
+        };
+        let node2;
+        onCleanup(() => {
+          if (nodes.get(item.id) === node2) nodes.delete(item.id);
+        });
+        return (() => {
+          var _el$10 = _tmpl$6$3();
+          use((el) => {
+            node2 = el;
+            nodes.set(item.id, el);
+            bindStyle(el, () => css({
+              "--offset": `${placed().offset}px`,
+              "--scale": `${placed().scale}`,
+              zIndex: i() + 1
+            }));
+          }, _el$10);
+          insert(_el$10, () => item.node);
+          effect((_p$) => {
+            var _v$8 = i() === local.items.length - 1 ? `true` : `false`, _v$9 = placed().visible ? `true` : `false`, _v$0 = DOCK_PILE_CLASSES.item;
+            _v$8 !== _p$.e && setAttribute(_el$10, "data-front", _p$.e = _v$8);
+            _v$9 !== _p$.t && setAttribute(_el$10, "data-visible", _p$.t = _v$9);
+            _v$0 !== _p$.a && className(_el$10, _p$.a = _v$0);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$10;
+        })();
+      }
+    }));
+    return _el$1;
+  })();
 }
+delegateEvents(["click", "keydown", "focusin", "focusout"]);
 var _tmpl$$m = /* @__PURE__ */ template(`<div data-slot=icon-disc>`);
 const LUCIDE_STROKE = 2;
 const UNFOCUSABLE$1 = {
@@ -6511,8 +5511,8 @@ function TabsTrigger(props) {
         if (intent === `last`) candidates.reverse();
         else if (intent === `prev` || intent === `next`) {
           if (intent === `prev`) candidates.reverse();
-          const at = candidates.indexOf(e.currentTarget);
-          candidates = roving.loop() ? wrapArray(candidates, at + 1) : candidates.slice(at + 1);
+          const at2 = candidates.indexOf(e.currentTarget);
+          candidates = roving.loop() ? wrapArray(candidates, at2 + 1) : candidates.slice(at2 + 1);
         }
         setTimeout(() => rovingFocusFirst(candidates));
       },
@@ -6981,10 +5981,10 @@ function ContentImpl(props) {
         y: 0
       };
       const move = (e) => {
-        const at = ctx.triggerPointerDownPos.current;
+        const at2 = ctx.triggerPointerDownPos.current;
         delta = {
-          x: Math.abs(Math.round(e.pageX) - (at?.x ?? 0)),
-          y: Math.abs(Math.round(e.pageY) - (at?.y ?? 0))
+          x: Math.abs(Math.round(e.pageX) - (at2?.x ?? 0)),
+          y: Math.abs(Math.round(e.pageY) - (at2?.y ?? 0))
         };
       };
       const up = (e) => {
@@ -7978,7 +6978,7 @@ function Toaster(props) {
     return store.subscribe((t) => set(t));
   });
   const list = () => toasts() ?? [];
-  const touchQuery = createMediaQuery$1(TOAST_TOUCH_QUERY);
+  const touchQuery = createMediaQuery(TOAST_TOUCH_QUERY);
   const placed = createMemo(() => toastPlacement(local.touch ?? touchQuery()));
   const [expanded, setExpanded] = createSignal(false);
   const [measured, setMeasured] = createSignal({});
@@ -8455,15 +7455,6 @@ function TooltipContent(props) {
     }
   });
 }
-function createMediaQuery(query) {
-  if (typeof window === `undefined` || typeof window.matchMedia !== `function`) return () => false;
-  const mql = window.matchMedia(query);
-  const [matches, setMatches] = createSignal(mql.matches);
-  const onChange = () => setMatches(window.matchMedia(query).matches);
-  mql.addEventListener(`change`, onChange);
-  onCleanup(() => mql.removeEventListener(`change`, onChange));
-  return matches;
-}
 const MOBILE_BREAKPOINT = 768;
 function createIsMobile() {
   const narrow = () => typeof window !== `undefined` && window.innerWidth < MOBILE_BREAKPOINT;
@@ -8483,7 +7474,7 @@ function createIsMobile() {
 }
 var _tmpl$ = /* @__PURE__ */ template(`<span data-slot=voice-wave-child>`), _tmpl$2 = /* @__PURE__ */ template(`<span data-slot=voice-wave><svg aria-hidden=true>`), _tmpl$3 = /* @__PURE__ */ template(`<svg><path data-slot=voice-wave-ring fill=currentColor stroke=currentColor stroke-linejoin=round></svg>`, false, true, false);
 function VoiceWave(props) {
-  const reducedMotion = createMediaQuery(`(prefers-reduced-motion: reduce)`);
+  const reducedMotion = createMediaQuery$1(`(prefers-reduced-motion: reduce)`);
   const activity = () => props.activity ?? `idle`;
   const size = () => props.size ?? `md`;
   const px = () => VOICE_WAVE_SIZE_PX[size()] ?? VOICE_WAVE_SIZE_PX.md;
@@ -8676,21 +7667,21 @@ export {
   DisclosureHeader,
   DockCard,
   DockPile,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
+  al as DropdownMenu,
+  am as DropdownMenuCheckboxItem,
+  an as DropdownMenuContent,
+  ao as DropdownMenuGroup,
+  ap as DropdownMenuItem,
+  aq as DropdownMenuLabel,
+  ar as DropdownMenuPortal,
+  as as DropdownMenuRadioGroup,
+  at as DropdownMenuRadioItem,
+  au as DropdownMenuSeparator,
+  av as DropdownMenuShortcut,
+  aw as DropdownMenuSub,
+  ax as DropdownMenuSubContent,
+  ay as DropdownMenuSubTrigger,
+  az as DropdownMenuTrigger,
   EMPTY_STATE_SIZES,
   EmptyCta,
   EmptyState,
@@ -8792,6 +7783,9 @@ export {
   TooltipProvider,
   TooltipTrigger,
   VoiceWave,
+  aA as ZOOMABLE_IMAGE_STRINGS,
+  Z as ZOOM_MATH,
+  aB as ZoomableImage,
   alertVariants2 as alertVariants,
   avatarHueIndex,
   buttonVariants2 as buttonVariants,
@@ -8801,10 +7795,11 @@ export {
   choiceValues2 as choiceValues,
   cn2 as cn,
   createIsMobile,
-  createMediaQuery,
+  createMediaQuery$1 as createMediaQuery,
   createSheetDrag,
   createSheetDragHandleProps,
   createToastStore2 as createToastStore,
+  H as createZoomableImage,
   dateMatchModifiers,
   dockPileGeometry2 as dockPileGeometry,
   getDefaultClassNames,