@exponential_app/eui-solid 0.2.0 → 0.3.0

package/dist/primitives.js

@@ -1,18 +1,18 @@
 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, 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, 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, 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, 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, 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, choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2, cn as cn2, createToastStore as createToastStore2, dockPileGeometry as dockPileGeometry2, getInitials, middleTruncate, progressRingPercent as progressRingPercent2, ringGeometry as ringGeometry2, toastPlacement as toastPlacement2, toastStackGeometry as toastStackGeometry2 } from "@exponential_app/eui/web/primitives";
+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 { 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 "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$$E = /* @__PURE__ */ template(`<div data-slot=alert role=alert>`), _tmpl$2$q = /* @__PURE__ */ template(`<div data-slot=alert-title>`), _tmpl$3$k = /* @__PURE__ */ template(`<div data-slot=alert-description>`);
+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>`);
 function Alert(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`]);
   return (() => {
-    var _el$ = _tmpl$$E();
+    var _el$ = _tmpl$$H();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(alertVariants({
@@ -26,7 +26,7 @@ function Alert(props) {
 function AlertTitle(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$q();
+    var _el$2 = _tmpl$2$t();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.title, local.class);
@@ -38,7 +38,7 @@ function AlertTitle(props) {
 function AlertDescription(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$k();
+    var _el$3 = _tmpl$3$n();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.description, local.class);
@@ -47,7 +47,7 @@ function AlertDescription(props) {
     return _el$3;
   })();
 }
-var _tmpl$$D = /* @__PURE__ */ template(`<div>`), _tmpl$2$p = /* @__PURE__ */ template(`<div tabindex=-1>`), _tmpl$3$j = /* @__PURE__ */ template(`<h2>`), _tmpl$4$e = /* @__PURE__ */ template(`<p>`);
+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);
@@ -193,7 +193,7 @@ function DialogOverlayPart(props) {
   const [local, rest] = splitProps(props, [`style`, `ref`]);
   const Overlay = () => {
     const el = (() => {
-      var _el$ = _tmpl$$D();
+      var _el$ = _tmpl$$G();
       spread(_el$, mergeProps({
         get ["data-state"]() {
           return stateOf$1(ctx.open());
@@ -278,7 +278,7 @@ function DialogContentPart(props) {
     const [registered, setRegistered] = createSignal(false);
     const lag = layerMountedThisTask();
     const el = (() => {
-      var _el$2 = _tmpl$2$p();
+      var _el$2 = _tmpl$2$s();
       spread(_el$2, mergeProps({
         get role() {
           return local.role ?? `dialog`;
@@ -332,7 +332,7 @@ function DialogContentPart(props) {
 function DialogTitlePart(props) {
   const ctx = useDialogContext(`DialogTitle`);
   return (() => {
-    var _el$3 = _tmpl$3$j();
+    var _el$3 = _tmpl$3$m();
     spread(_el$3, mergeProps({
       get id() {
         return ctx.titleId;
@@ -344,7 +344,7 @@ function DialogTitlePart(props) {
 function DialogDescriptionPart(props) {
   const ctx = useDialogContext(`DialogDescription`);
   return (() => {
-    var _el$4 = _tmpl$4$e();
+    var _el$4 = _tmpl$4$h();
     spread(_el$4, mergeProps({
       get id() {
         return ctx.descriptionId;
@@ -353,7 +353,7 @@ function DialogDescriptionPart(props) {
     return _el$4;
   })();
 }
-var _tmpl$$C = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$o = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
+var _tmpl$$F = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$r = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
 const CancelContext = createContext();
 function AlertDialog(props) {
   return createComponent(DialogRoot, mergeProps(props, {
@@ -421,7 +421,7 @@ function AlertDialogContent(props) {
 function AlertDialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$C();
+    var _el$ = _tmpl$$F();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.header, local.class);
@@ -433,7 +433,7 @@ function AlertDialogHeader(props) {
 function AlertDialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$o();
+    var _el$2 = _tmpl$2$r();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.footer, local.class);
@@ -482,7 +482,7 @@ function AlertDialogCancel(props) {
     }
   }));
 }
-var _tmpl$$B = /* @__PURE__ */ template(`<span data-slot=avatar>`), _tmpl$2$n = /* @__PURE__ */ template(`<img data-slot=avatar-image>`), _tmpl$3$i = /* @__PURE__ */ template(`<span data-slot=avatar-fallback>`);
+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>`);
 const AvatarContext = createContext();
 function Avatar(props) {
   const [local, rest] = splitProps(props, [`class`]);
@@ -493,7 +493,7 @@ function Avatar(props) {
       setStatus
     },
     get children() {
-      var _el$ = _tmpl$$B();
+      var _el$ = _tmpl$$E();
       spread(_el$, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.root, local.class);
@@ -517,7 +517,7 @@ function AvatarImage(props) {
       return status() === `loaded`;
     },
     get children() {
-      var _el$2 = _tmpl$2$n();
+      var _el$2 = _tmpl$2$q();
       spread(_el$2, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.image, local.class);
@@ -553,7 +553,7 @@ function AvatarFallback(props) {
       return memo(() => !!canRender())() && ctx.status() !== `loaded`;
     },
     get children() {
-      var _el$3 = _tmpl$3$i();
+      var _el$3 = _tmpl$3$l();
       spread(_el$3, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.fallback, hue() === void 0 && AVATAR_CLASSES.fallbackMuted, local.class);
@@ -566,7 +566,7 @@ function AvatarFallback(props) {
     }
   });
 }
-var _tmpl$$A = /* @__PURE__ */ template(`<span data-slot=badge>`);
+var _tmpl$$D = /* @__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 +575,7 @@ function Badge(props) {
       return local.count > 0;
     },
     get children() {
-      var _el$ = _tmpl$$A();
+      var _el$ = _tmpl$$D();
       spread(_el$, mergeProps({
         get ["data-tone"]() {
           return tone();
@@ -589,10 +589,10 @@ function Badge(props) {
     }
   });
 }
-var _tmpl$$z = /* @__PURE__ */ template(`<nav aria-label=breadcrumb data-slot=breadcrumb>`), _tmpl$2$m = /* @__PURE__ */ template(`<ol data-slot=breadcrumb-list>`), _tmpl$3$h = /* @__PURE__ */ template(`<li data-slot=breadcrumb-item>`), _tmpl$4$d = /* @__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$8 = /* @__PURE__ */ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span>More`);
+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`);
 function Breadcrumb(props) {
   return (() => {
-    var _el$ = _tmpl$$z();
+    var _el$ = _tmpl$$C();
     spread(_el$, props, false, false);
     return _el$;
   })();
@@ -600,7 +600,7 @@ function Breadcrumb(props) {
 function BreadcrumbList(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$m();
+    var _el$2 = _tmpl$2$p();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.list, local.class);
@@ -612,7 +612,7 @@ function BreadcrumbList(props) {
 function BreadcrumbItem(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$h();
+    var _el$3 = _tmpl$3$k();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.item, local.class);
@@ -636,7 +636,7 @@ function BreadcrumbLink(props) {
 function BreadcrumbPage(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$d();
+    var _el$4 = _tmpl$4$g();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.page, local.class);
@@ -649,7 +649,7 @@ function BreadcrumbSeparator(props) {
   const [local, rest] = splitProps(props, [`class`, `children`]);
   const resolved = children(() => local.children);
   return (() => {
-    var _el$5 = _tmpl$5$a();
+    var _el$5 = _tmpl$5$b();
     spread(_el$5, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.separator, local.class);
@@ -704,7 +704,7 @@ function Button(props) {
     }
   }, rest));
 }
-var _tmpl$$y = /* @__PURE__ */ template(`<span><select></select><span aria-hidden=true>`), _tmpl$2$l = /* @__PURE__ */ template(`<option>`), _tmpl$3$g = /* @__PURE__ */ template(`<nav><button type=button></button><button type=button>`), _tmpl$4$c = /* @__PURE__ */ template(`<div role=status aria-live=polite>`), _tmpl$5$9 = /* @__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$$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>`);
 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 +1413,7 @@ function Calendar(input) {
       }
     };
     return (() => {
-      var _el$ = _tmpl$$y(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+      var _el$ = _tmpl$$B(), _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 +1421,7 @@ function Calendar(input) {
           return options();
         },
         children: (o) => (() => {
-          var _el$4 = _tmpl$2$l();
+          var _el$4 = _tmpl$2$o();
           insert(_el$4, () => o.label);
           effect((_p$) => {
             var _v$7 = o.disabled, _v$8 = o.value === value;
@@ -1465,7 +1465,7 @@ function Calendar(input) {
     })();
   };
   return (() => {
-    var _el$5 = _tmpl$5$9(), _el$6 = _el$5.firstChild;
+    var _el$5 = _tmpl$5$a(), _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 +1503,7 @@ function Calendar(input) {
         return !props.hideNavigation;
       },
       get children() {
-        var _el$7 = _tmpl$3$g(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+        var _el$7 = _tmpl$3$j(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
         _el$8.$$click = handlePrevious;
         insert(_el$8, createComponent(Chevron, {
           get disabled() {
@@ -1792,7 +1792,7 @@ function Calendar(input) {
         return props.footer;
       },
       get children() {
-        var _el$0 = _tmpl$4$c();
+        var _el$0 = _tmpl$4$f();
         insert(_el$0, () => props.footer);
         effect(() => className(_el$0, classNames().footer));
         return _el$0;
@@ -1851,11 +1851,11 @@ function CalendarDayButton(props) {
   }, rest));
 }
 delegateEvents(["click"]);
-var _tmpl$$x = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$A = /* @__PURE__ */ template(`<div>`);
 const part = (slot, recipe) => function CardPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$x();
+    var _el$ = _tmpl$$A();
     setAttribute(_el$, "data-slot", slot);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1872,7 +1872,101 @@ 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$$w = /* @__PURE__ */ template(`<span data-slot=checkbox-indicator>`), _tmpl$2$k = /* @__PURE__ */ template(`<button type=button role=checkbox data-slot=checkbox>`), _tmpl$3$f = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true tabindex=-1>`);
+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);
+function CarouselCounter(props) {
+  const [local, rest] = splitProps(props, [`page`, `total`, `class`]);
+  return (() => {
+    var _el$ = _tmpl$$z();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return cn(CAROUSEL_CLASSES.counter, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$, () => carouselCounterText(local.page, local.total));
+    return _el$;
+  })();
+}
+const defaultPageLabel = (page, total) => `Page ${page + 1} of ${total}`;
+function CarouselThumbnails(props) {
+  const [local, rest] = splitProps(props, [`count`, `urls`, `page`, `onPageChange`, `pageLabel`, `class`]);
+  let strip;
+  const n = () => Math.max(0, Math.floor(local.count));
+  const indexes = () => Array.from({
+    length: n()
+  }, (_, i) => i);
+  const label = (i) => (local.pageLabel ?? defaultPageLabel)(i, n());
+  createRenderEffect(() => {
+    const page = local.page;
+    n();
+    queueMicrotask(() => {
+      const el = strip;
+      const thumb = el?.children[page];
+      if (!el || !thumb) return;
+      const a = el.getBoundingClientRect();
+      const b = thumb.getBoundingClientRect();
+      const delta = b.left < a.left ? b.left - a.left : b.right > a.right ? b.right - a.right : 0;
+      if (delta !== 0) el.scrollLeft += delta;
+    });
+  });
+  return (() => {
+    var _el$2 = _tmpl$2$n();
+    var _ref$ = strip;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : strip = _el$2;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return cn(CAROUSEL_CLASSES.thumbnails, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return indexes();
+      },
+      children: (i) => {
+        const current = () => i === local.page;
+        return (() => {
+          var _el$3 = _tmpl$3$i();
+          _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();
+              setAttribute(_el$4, "draggable", false);
+              effect((_p$) => {
+                var _v$5 = src(), _v$6 = CAROUSEL_CLASSES.thumbnailImage;
+                _v$5 !== _p$.e && setAttribute(_el$4, "src", _p$.e = _v$5);
+                _v$6 !== _p$.t && className(_el$4, _p$.t = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$4;
+            })()
+          }));
+          effect((_p$) => {
+            var _v$ = current() ? `true` : void 0, _v$2 = current() ? `true` : void 0, _v$3 = label(i), _v$4 = CAROUSEL_CLASSES.thumbnail;
+            _v$ !== _p$.e && setAttribute(_el$3, "data-current", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$3, "aria-current", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          });
+          return _el$3;
+        })();
+      }
+    }));
+    return _el$2;
+  })();
+}
+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>`);
 const isIndeterminate = (c) => c === `indeterminate`;
 const stateOf = (c) => isIndeterminate(c) ? `indeterminate` : c ? `checked` : `unchecked`;
 function Checkbox(props) {
@@ -1903,7 +1997,7 @@ function Checkbox(props) {
     else if (Array.isArray(handler)) handler[0](handler[1], e);
   };
   return [(() => {
-    var _el$ = _tmpl$2$k();
+    var _el$ = _tmpl$2$m();
     use((el) => {
       setControl(el);
       if (typeof local.ref === `function`) local.ref(el);
@@ -1951,7 +2045,7 @@ function Checkbox(props) {
         return presence.mounted();
       },
       get children() {
-        var _el$2 = _tmpl$$w();
+        var _el$2 = _tmpl$$y();
         var _ref$ = presence.ref;
         typeof _ref$ === "function" ? use(_ref$, _el$2) : presence.ref = _el$2;
         insert(_el$2, createComponent(PaintIcon, {
@@ -2034,7 +2128,7 @@ function CheckboxBubble(props) {
     });
   };
   return (() => {
-    var _el$3 = _tmpl$3$f();
+    var _el$3 = _tmpl$3$h();
     var _ref$2 = input;
     typeof _ref$2 === "function" ? use(_ref$2, _el$3) : input = _el$3;
     effect((_p$) => {
@@ -2059,7 +2153,7 @@ function CheckboxBubble(props) {
     return _el$3;
   })();
 }
-var _tmpl$$v = /* @__PURE__ */ template(`<div>`), _tmpl$2$j = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$3$e = /* @__PURE__ */ template(`<span>`), _tmpl$4$b = /* @__PURE__ */ template(`<button type=button><span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<img loading=lazy decoding=async>`, true, false, false);
+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);
 function ChoiceTilesFrame(props) {
   const buttons = [];
   const order = createMemo(() => props.options.map((o) => o.value));
@@ -2102,7 +2196,7 @@ function ChoiceTilesFrame(props) {
     });
   };
   return (() => {
-    var _el$ = _tmpl$$v();
+    var _el$ = _tmpl$$x();
     var _ref$ = props.rootRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.rootRef = _el$;
     spread(_el$, mergeProps({
@@ -2136,7 +2230,7 @@ function ChoiceTilesFrame(props) {
         });
         const description = o.description ? String(o.description) : ``;
         return (() => {
-          var _el$2 = _tmpl$4$b(), _el$4 = _el$2.firstChild;
+          var _el$2 = _tmpl$4$d(), _el$4 = _el$2.firstChild;
           _el$2.$$keydown = (e) => onKeyDown(i, e);
           _el$2.$$click = () => pick(i);
           use((el) => {
@@ -2170,7 +2264,7 @@ function ChoiceTilesFrame(props) {
               return pictures();
             },
             get children() {
-              var _el$3 = _tmpl$2$j();
+              var _el$3 = _tmpl$2$l();
               spread(_el$3, mergeProps(() => props.pictureProps(state())), false, true);
               insert(_el$3, () => props.renderPicture(o.image ? String(o.image) : null, state()));
               return _el$3;
@@ -2181,7 +2275,7 @@ function ChoiceTilesFrame(props) {
           insert(_el$2, createComponent(Show, {
             when: description,
             get children() {
-              var _el$5 = _tmpl$3$e();
+              var _el$5 = _tmpl$3$g();
               spread(_el$5, mergeProps(() => props.descriptionProps(state())), false, true);
               insert(_el$5, description);
               return _el$5;
@@ -2199,7 +2293,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$8();
+    var _el$6 = _tmpl$5$9();
     setAttribute(_el$6, "src", src);
     setAttribute(_el$6, "alt", label);
     effect(() => className(_el$6, CHOICE_TILES_CLASSES.image));
@@ -2260,12 +2354,12 @@ function ChoiceTiles(props) {
   });
 }
 delegateEvents(["click", "keydown"]);
-var _tmpl$$u = /* @__PURE__ */ template(`<div data-slot=code-block>`), _tmpl$2$i = /* @__PURE__ */ template(`<div>`), _tmpl$3$d = /* @__PURE__ */ template(`<span aria-live=polite>`), _tmpl$4$a = /* @__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$6 = /* @__PURE__ */ template(`<span data-slot=code-block-line><span data-slot=code-block-line-content>`);
+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>`);
 function CodeBlock(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`, `size`]);
   const variant = () => local.variant ?? `default`;
   return (() => {
-    var _el$ = _tmpl$$u();
+    var _el$ = _tmpl$$w();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return variant();
@@ -2285,7 +2379,7 @@ function CodeBlock(props) {
 const slotPart = (slot, recipe) => function CodeBlockPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$i();
+    var _el$2 = _tmpl$2$k();
     setAttribute(_el$2, "data-slot", slot);
     spread(_el$2, mergeProps({
       get ["class"]() {
@@ -2357,7 +2451,7 @@ function CodeBlockCopyButton(props) {
       });
     }
   })), (() => {
-    var _el$3 = _tmpl$3$d();
+    var _el$3 = _tmpl$3$f();
     insert(_el$3, (() => {
       var _c$ = memo(() => !!copied());
       return () => _c$() ? labels().copied : ``;
@@ -2394,7 +2488,7 @@ function CodeBlockContent(props) {
           return memo(() => tokens.length === 0)() ? null : createComponent(For, {
             each: tokens,
             children: (token) => (() => {
-              var _el$4 = _tmpl$4$a();
+              var _el$4 = _tmpl$4$c();
               insert(_el$4, () => token.text);
               effect((_p$) => {
                 var _v$ = token.kind, _v$2 = cn(CODE_TOKEN_CLASS[token.kind], CODE_BLOCK_CLASSES.token);
@@ -2424,7 +2518,7 @@ function CodeBlockContent(props) {
     return resolved();
   };
   return (() => {
-    var _el$5 = _tmpl$5$7(), _el$6 = _el$5.firstChild;
+    var _el$5 = _tmpl$5$8(), _el$6 = _el$5.firstChild;
     spread(_el$5, mergeProps({
       get ["data-wrap"]() {
         return local.wrap || void 0;
@@ -2475,7 +2569,7 @@ function CodeBlockLine(props) {
     return _el$7;
   })();
 }
-var _tmpl$$t = /* @__PURE__ */ template(`<div data-slot=collapsible>`), _tmpl$2$h = /* @__PURE__ */ template(`<button type=button data-slot=collapsible-trigger>`), _tmpl$3$c = /* @__PURE__ */ template(`<div data-slot=collapsible-content>`);
+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>`);
 const CollapsibleContext = createContext();
 const call$2 = (handler, e) => {
   if (typeof handler === `function`) handler(e);
@@ -2499,7 +2593,7 @@ function Collapsible(props) {
   return createComponent(CollapsibleContext.Provider, {
     value: state,
     get children() {
-      var _el$ = _tmpl$$t();
+      var _el$ = _tmpl$$v();
       spread(_el$, mergeProps({
         get ["data-state"]() {
           return open() ? `open` : `closed`;
@@ -2516,7 +2610,7 @@ function CollapsibleTrigger(props) {
   const ctx = useContext(CollapsibleContext);
   const [local, rest] = splitProps(props, [`onClick`]);
   return (() => {
-    var _el$2 = _tmpl$2$h();
+    var _el$2 = _tmpl$2$j();
     spread(_el$2, mergeProps({
       get ["aria-controls"]() {
         return ctx.contentId;
@@ -2640,7 +2734,7 @@ function CollapsibleContent(props) {
     };
   };
   return (() => {
-    var _el$3 = _tmpl$3$c();
+    var _el$3 = _tmpl$3$e();
     use((el) => {
       node2 = el;
       if (typeof local.ref === `function`) local.ref(el);
@@ -2674,7 +2768,7 @@ function CollapsibleContent(props) {
     return _el$3;
   })();
 }
-var _tmpl$$s = /* @__PURE__ */ template(`<div data-slot=command tabindex=-1><label data-slot=command-label>`), _tmpl$2$g = /* @__PURE__ */ template(`<button type=button data-slot=command-input-clear>`), _tmpl$3$b = /* @__PURE__ */ template(`<div data-slot=command-input-wrapper><input data-slot=command-input>`), _tmpl$4$9 = /* @__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$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$$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>`);
 const CommandContext = createContext();
 const GroupContext$1 = createContext();
 function useRoot$1() {
@@ -2721,7 +2815,7 @@ function Command(props) {
     labelId: createUniqueId()
   };
   return (() => {
-    var _el$ = _tmpl$$s(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$u(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(COMMAND_CLASSES.root, local.class);
@@ -2783,7 +2877,7 @@ function CommandInput(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$3 = _tmpl$3$b(), _el$4 = _el$3.firstChild;
+    var _el$3 = _tmpl$3$d(), _el$4 = _el$3.firstChild;
     insert(_el$3, createComponent(PaintIcon, {
       icon: Search,
       get ["class"]() {
@@ -2826,7 +2920,7 @@ function CommandInput(props) {
         return shown() !== ``;
       },
       get children() {
-        var _el$5 = _tmpl$2$g();
+        var _el$5 = _tmpl$2$i();
         _el$5.$$click = () => {
           change(``);
           input?.focus();
@@ -2876,7 +2970,7 @@ function CommandList(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$6 = _tmpl$4$9(), _el$7 = _el$6.firstChild;
+    var _el$6 = _tmpl$4$b(), _el$7 = _el$6.firstChild;
     var _ref$ = list;
     typeof _ref$ === "function" ? use(_ref$, _el$6) : list = _el$6;
     spread(_el$6, mergeProps({
@@ -2913,7 +3007,7 @@ function CommandEmpty(props) {
       return track(), store.empty();
     },
     get children() {
-      var _el$8 = _tmpl$5$6();
+      var _el$8 = _tmpl$5$7();
       spread(_el$8, mergeProps({
         get ["class"]() {
           return cn(COMMAND_CLASSES.empty, local.class);
@@ -3163,7 +3257,7 @@ function CommandShortcut(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$r = /* @__PURE__ */ template(`<svg><circle fill=none stroke=currentColor stroke-linecap=round></svg>`, false, true, false), _tmpl$2$f = /* @__PURE__ */ template(`<svg aria-hidden=true><circle fill=none stroke=currentColor opacity=0.2>`);
+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>`);
 function ContextRing(props) {
   const [local, rest] = splitProps(props, [`percent`, `tone`, `showEmpty`, `class`]);
   const value = () => local.percent ?? null;
@@ -3185,7 +3279,7 @@ function ContextRing(props) {
         }
       }, rest, {
         get children() {
-          var _el$ = _tmpl$2$f(), _el$2 = _el$.firstChild;
+          var _el$ = _tmpl$2$h(), _el$2 = _el$.firstChild;
           setAttribute(_el$, "viewBox", `0 0 ${RING_SIZE} ${RING_SIZE}`);
           setAttribute(_el$, "width", RING_SIZE);
           setAttribute(_el$, "height", RING_SIZE);
@@ -3198,7 +3292,7 @@ function ContextRing(props) {
               return value() !== null;
             },
             get children() {
-              var _el$3 = _tmpl$$r();
+              var _el$3 = _tmpl$$t();
               setAttribute(_el$3, "cx", RING_SIZE / 2);
               setAttribute(_el$3, "cy", RING_SIZE / 2);
               setAttribute(_el$3, "r", RING_RADIUS);
@@ -3222,7 +3316,7 @@ function ContextRing(props) {
     }
   });
 }
-var _tmpl$$q = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
+var _tmpl$$s = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
 const SheetDragContext = createContext(null);
 function SheetDragProvider(props) {
   return createComponent(SheetDragContext.Provider, {
@@ -3241,7 +3335,7 @@ function SheetGrabber(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$ = _tmpl$$q();
+    var _el$ = _tmpl$$s();
     spread(_el$, mergeProps(drag ?? {}, rest, {
       get ["class"]() {
         return cn(SHEET_CHROME_CLASSES.grabber, local.class);
@@ -3338,7 +3432,7 @@ function createSheetDrag(opts) {
   };
   return { handleProps };
 }
-var _tmpl$$p = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$e = /* @__PURE__ */ template(`<div data-slot=sheet-header>`), _tmpl$3$a = /* @__PURE__ */ template(`<div data-slot=sheet-footer>`);
+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>`);
 function Sheet(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3448,7 +3542,7 @@ function SheetContent(props) {
                           return SHEET_CLASSES.closeIcon;
                         }
                       }), (() => {
-                        var _el$ = _tmpl$$p();
+                        var _el$ = _tmpl$$r();
                         effect(() => className(_el$, SHEET_CLASSES.srOnly));
                         return _el$;
                       })()];
@@ -3467,7 +3561,7 @@ function SheetHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$e();
+    var _el$2 = _tmpl$2$g();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(SHEET_CLASSES.header, local.class);
@@ -3479,7 +3573,7 @@ function SheetHeader(props) {
 function SheetFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$a();
+    var _el$3 = _tmpl$3$c();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(SHEET_CLASSES.footer, local.class);
@@ -3506,7 +3600,7 @@ function SheetDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$o = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$d = /* @__PURE__ */ template(`<div data-slot=dialog-header>`), _tmpl$3$9 = /* @__PURE__ */ template(`<div data-slot=dialog-body>`), _tmpl$4$8 = /* @__PURE__ */ template(`<div data-slot=dialog-footer>`);
+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>`);
 function Dialog(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3626,7 +3720,7 @@ function DialogContent(props) {
                               return [createComponent(PaintIcon, {
                                 icon: X
                               }), (() => {
-                                var _el$ = _tmpl$$o();
+                                var _el$ = _tmpl$$q();
                                 effect(() => className(_el$, DIALOG_CLASSES.srOnly));
                                 return _el$;
                               })()];
@@ -3679,7 +3773,7 @@ function DialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$d();
+    var _el$2 = _tmpl$2$f();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(DIALOG_CLASSES.header, local.class);
@@ -3691,7 +3785,7 @@ function DialogHeader(props) {
 function DialogBody(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$9();
+    var _el$3 = _tmpl$3$b();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.body, local.class);
@@ -3703,7 +3797,7 @@ function DialogBody(props) {
 function DialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$8();
+    var _el$4 = _tmpl$4$a();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.footer, local.class);
@@ -3748,7 +3842,7 @@ function DialogDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$n = /* @__PURE__ */ template(`<button type=button data-slot=disclosure-header>`);
+var _tmpl$$p = /* @__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`;
@@ -3762,7 +3856,7 @@ function DisclosureHeader(props) {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$n();
+    var _el$ = _tmpl$$p();
     _el$.$$click = () => local.onToggle();
     spread(_el$, mergeProps({
       get ["data-chevron"]() {
@@ -3788,14 +3882,14 @@ function DisclosureHeader(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$m = /* @__PURE__ */ template(`<span data-slot=dock-card-caption>`), _tmpl$2$c = /* @__PURE__ */ template(`<span data-slot=dock-card-meta>`), _tmpl$3$8 = /* @__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$7 = /* @__PURE__ */ template(`<span data-slot=dock-card-trailing>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div data-slot=dock-pile>`), _tmpl$6$4 = /* @__PURE__ */ template(`<div data-slot=dock-pile-item>`);
+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$8(), _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;
+    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 === ` `) {
@@ -3842,7 +3936,7 @@ function DockCard(props) {
         return has(local.caption);
       },
       get children() {
-        var _el$6 = _tmpl$$m();
+        var _el$6 = _tmpl$$o();
         insert(_el$6, () => local.caption);
         effect(() => className(_el$6, DOCK_CARD_CLASSES.caption));
         return _el$6;
@@ -3853,7 +3947,7 @@ function DockCard(props) {
         return has(local.meta);
       },
       get children() {
-        var _el$7 = _tmpl$2$c();
+        var _el$7 = _tmpl$2$e();
         insert(_el$7, () => local.meta);
         effect(() => className(_el$7, DOCK_CARD_CLASSES.meta));
         return _el$7;
@@ -3870,7 +3964,7 @@ function DockCard(props) {
             return has(local.trailing);
           },
           get children() {
-            var _el$0 = _tmpl$4$7();
+            var _el$0 = _tmpl$4$9();
             insert(_el$0, () => local.trailing);
             effect(() => className(_el$0, DOCK_CARD_CLASSES.trailing));
             return _el$0;
@@ -3933,7 +4027,7 @@ function DockPile(props) {
   });
   const geometry = createMemo(() => dockPileGeometry(local.items.map((item) => item.height ?? measured()[item.id] ?? 0), local.expanded));
   return (() => {
-    var _el$1 = _tmpl$5$5();
+    var _el$1 = _tmpl$5$6();
     _el$1.$$focusout = (event) => {
       const next = event.relatedTarget;
       if (!next || !event.currentTarget.contains(next)) local.onExpandedChange?.(false);
@@ -4002,7 +4096,7 @@ function DockPile(props) {
   })();
 }
 delegateEvents(["click", "keydown", "focusin", "focusout"]);
-var _tmpl$$l = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-group>`), _tmpl$2$b = /* @__PURE__ */ template(`<div role=menuitem>`), _tmpl$3$7 = /* @__PURE__ */ template(`<span>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div role=menuitemcheckbox><span>`), _tmpl$5$4 = /* @__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>`);
+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);
@@ -4191,7 +4285,7 @@ function DropdownMenuContent(props) {
 }
 function DropdownMenuGroup(props) {
   return (() => {
-    var _el$ = _tmpl$$l();
+    var _el$ = _tmpl$$n();
     spread(_el$, props, false, false);
     return _el$;
   })();
@@ -4221,7 +4315,7 @@ 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$b();
+    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(), {
@@ -4248,7 +4342,7 @@ function ItemIndicator(props) {
       return checked() === true || checked() === `indeterminate`;
     },
     get children() {
-      var _el$3 = _tmpl$3$7();
+      var _el$3 = _tmpl$3$9();
       insert(_el$3, () => props.children);
       effect(() => setAttribute(_el$3, "data-state", checkedState(checked())));
       return _el$3;
@@ -4266,7 +4360,7 @@ function DropdownMenuCheckboxItem(props) {
   return createComponent(IndicatorContext.Provider, {
     value: checked,
     get children() {
-      var _el$4 = _tmpl$4$6(), _el$5 = _el$4.firstChild;
+      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({
@@ -4312,7 +4406,7 @@ function DropdownMenuRadioGroup(props) {
       onValueChange: (v) => local.onValueChange?.(v)
     },
     get children() {
-      var _el$6 = _tmpl$5$4();
+      var _el$6 = _tmpl$5$5();
       spread(_el$6, rest, false, false);
       return _el$6;
     }
@@ -4673,14 +4767,14 @@ function DropdownMenuSubContent(props) {
     }
   });
 }
-var _tmpl$$k = /* @__PURE__ */ template(`<div data-slot=icon-disc>`);
+var _tmpl$$m = /* @__PURE__ */ template(`<div data-slot=icon-disc>`);
 const LUCIDE_STROKE = 2;
 const UNFOCUSABLE$1 = {
   focusable: `false`
 };
 function IconDisc(props) {
   return (() => {
-    var _el$ = _tmpl$$k();
+    var _el$ = _tmpl$$m();
     insert(_el$, createComponent(PaintIcon, mergeProps({
       get icon() {
         return props.icon;
@@ -4697,7 +4791,7 @@ function IconDisc(props) {
     return _el$;
   })();
 }
-var _tmpl$$j = /* @__PURE__ */ template(`<p>`), _tmpl$2$a = /* @__PURE__ */ template(`<div>`), _tmpl$3$6 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=page role=status><h2>`), _tmpl$4$5 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=list role=status><span>`), _tmpl$5$3 = /* @__PURE__ */ template(`<p data-slot=list-empty role=status>`), _tmpl$6$2 = /* @__PURE__ */ template(`<button data-slot=empty-cta><span></span><span>`);
+var _tmpl$$l = /* @__PURE__ */ template(`<p>`), _tmpl$2$c = /* @__PURE__ */ template(`<div>`), _tmpl$3$8 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=page role=status><h2>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=list role=status><span>`), _tmpl$5$4 = /* @__PURE__ */ template(`<p data-slot=list-empty role=status>`), _tmpl$6$2 = /* @__PURE__ */ template(`<button data-slot=empty-cta><span></span><span>`);
 const UNFOCUSABLE = {
   focusable: `false`
 };
@@ -4709,7 +4803,7 @@ function EmptyState(props) {
     },
     get fallback() {
       return (() => {
-        var _el$5 = _tmpl$4$5(), _el$6 = _el$5.firstChild;
+        var _el$5 = _tmpl$4$7(), _el$6 = _el$5.firstChild;
         insert(_el$5, createComponent(Show, {
           get when() {
             return props.icon;
@@ -4731,7 +4825,7 @@ function EmptyState(props) {
       })();
     },
     get children() {
-      var _el$ = _tmpl$3$6(), _el$2 = _el$.firstChild;
+      var _el$ = _tmpl$3$8(), _el$2 = _el$.firstChild;
       insert(_el$, createComponent(Show, {
         get when() {
           return props.icon;
@@ -4748,7 +4842,7 @@ function EmptyState(props) {
           return props.description;
         },
         get children() {
-          var _el$3 = _tmpl$$j();
+          var _el$3 = _tmpl$$l();
           insert(_el$3, () => props.description);
           effect(() => className(_el$3, EMPTY_STATE_CLASSES.pageDescription));
           return _el$3;
@@ -4759,7 +4853,7 @@ function EmptyState(props) {
           return actions();
         },
         get children() {
-          var _el$4 = _tmpl$2$a();
+          var _el$4 = _tmpl$2$c();
           insert(_el$4, actions);
           effect(() => className(_el$4, EMPTY_STATE_CLASSES.pageActions));
           return _el$4;
@@ -4781,7 +4875,7 @@ function EmptyState(props) {
 function ListEmpty(props) {
   const [local, rest] = splitProps(props, [`class`, `children`]);
   return (() => {
-    var _el$7 = _tmpl$5$3();
+    var _el$7 = _tmpl$5$4();
     spread(_el$7, mergeProps({
       get ["class"]() {
         return cn(EMPTY_STATE_CLASSES.listEmpty, local.class);
@@ -4825,11 +4919,11 @@ function EmptyCta(props) {
     return _el$8;
   })();
 }
-var _tmpl$$i = /* @__PURE__ */ template(`<div data-slot=glass-card>`);
+var _tmpl$$k = /* @__PURE__ */ template(`<div data-slot=glass-card>`);
 function GlassCard(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$i();
+    var _el$ = _tmpl$$k();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(GLASS_CARD_CLASSES.root, local.class);
@@ -4838,7 +4932,7 @@ function GlassCard(props) {
     return _el$;
   })();
 }
-var _tmpl$$h = /* @__PURE__ */ template(`<div data-slot=hover-card-content>`);
+var _tmpl$$j = /* @__PURE__ */ template(`<div data-slot=hover-card-content>`);
 const HoverCardContext = createContext();
 const useHoverCard = (part2) => {
   const ctx = useContext(HoverCardContext);
@@ -4968,7 +5062,7 @@ function HoverCardContent(props) {
       },
       children: (popper) => {
         const el = (() => {
-          var _el$ = _tmpl$$h();
+          var _el$ = _tmpl$$j();
           spread(_el$, mergeProps({
             get ["data-side"]() {
               return popper.placedSide();
@@ -5071,12 +5165,12 @@ function HoverCardContent(props) {
     }
   });
 }
-var _tmpl$$g = /* @__PURE__ */ template(`<input data-slot=input>`);
+var _tmpl$$i = /* @__PURE__ */ template(`<input data-slot=input>`);
 function Input(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const valueAttr = () => props.value === void 0 || props.value === null ? void 0 : String(props.value);
   return (() => {
-    var _el$ = _tmpl$$g();
+    var _el$ = _tmpl$$i();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(INPUT_CLASSES.root, local.class);
@@ -5086,11 +5180,11 @@ function Input(props) {
     return _el$;
   })();
 }
-var _tmpl$$f = /* @__PURE__ */ template(`<kbd data-slot=kbd>`), _tmpl$2$9 = /* @__PURE__ */ template(`<span data-slot=kbd-group>`);
+var _tmpl$$h = /* @__PURE__ */ template(`<kbd data-slot=kbd>`), _tmpl$2$b = /* @__PURE__ */ template(`<span data-slot=kbd-group>`);
 function Kbd(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$f();
+    var _el$ = _tmpl$$h();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(KBD_CLASSES.root, local.class);
@@ -5102,7 +5196,7 @@ function Kbd(props) {
 function KbdGroup(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$9();
+    var _el$2 = _tmpl$2$b();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(KBD_CLASSES.group, local.class);
@@ -5111,7 +5205,7 @@ function KbdGroup(props) {
     return _el$2;
   })();
 }
-var _tmpl$$e = /* @__PURE__ */ template(`<label data-slot=label>`);
+var _tmpl$$g = /* @__PURE__ */ template(`<label data-slot=label>`);
 function Label(props) {
   const [local, rest] = splitProps(props, [`class`, `onMouseDown`]);
   const onMouseDown = (event) => {
@@ -5122,7 +5216,7 @@ function Label(props) {
     if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
   };
   return (() => {
-    var _el$ = _tmpl$$e();
+    var _el$ = _tmpl$$g();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(LABEL_CLASSES.root, local.class);
@@ -5133,7 +5227,7 @@ function Label(props) {
     return _el$;
   })();
 }
-var _tmpl$$d = /* @__PURE__ */ template(`<div aria-valuemin=0 role=progressbar data-slot=progress><div data-slot=progress-indicator>`);
+var _tmpl$$f = /* @__PURE__ */ template(`<div aria-valuemin=0 role=progressbar data-slot=progress><div data-slot=progress-indicator>`);
 const isNumber = (v) => typeof v === `number`;
 const validMax = (max) => isNumber(max) && !Number.isNaN(max) && max > 0;
 const validValue = (value, max) => isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
@@ -5148,7 +5242,7 @@ function Progress(props) {
   };
   const indeterminate = () => local.value === null || local.value === void 0;
   return (() => {
-    var _el$ = _tmpl$$d(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$f(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["aria-valuemax"]() {
         return max();
@@ -5208,6 +5302,176 @@ function Meter(props) {
     }
   }, rest));
 }
+var _tmpl$$e = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$2$a = /* @__PURE__ */ template(`<button type=button data-slot=mosaic-tile><img alt aria-hidden=true loading=lazy decoding=async>`, true, false, false), _tmpl$3$7 = /* @__PURE__ */ template(`<div data-slot=mosaic-side>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div data-slot=mosaic role=group>`);
+function Mosaic(props) {
+  const [local, rest] = splitProps(props, [`pictures`, `label`, `onSelect`, `class`]);
+  const tiles = () => mosaicTiles(local.pictures.length);
+  const Tile = (p) => {
+    const picture = () => local.pictures[p.tile.index];
+    const alt = () => picture().alt ?? ``;
+    return (() => {
+      var _el$ = _tmpl$2$a(), _el$2 = _el$.firstChild;
+      _el$.$$click = () => local.onSelect?.(p.tile.index);
+      setAttribute(_el$2, "draggable", false);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return p.tile.more > 0;
+        },
+        get children() {
+          var _el$3 = _tmpl$$e();
+          insert(_el$3, () => `+${p.tile.more}`);
+          effect(() => className(_el$3, MOSAIC_CLASSES.more));
+          return _el$3;
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = p.tile.size, _v$2 = p.tile.more > 0 ? `${alt()}, ${p.tile.more} more` : alt() || void 0, _v$3 = cn(MOSAIC_CLASSES.tile, p.lead ? MOSAIC_CLASSES.lead : MOSAIC_CLASSES.fill), _v$4 = picture().src, _v$5 = MOSAIC_CLASSES.image;
+        _v$ !== _p$.e && setAttribute(_el$, "data-size", _p$.e = _v$);
+        _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$2, "src", _p$.o = _v$4);
+        _v$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      });
+      return _el$;
+    })();
+  };
+  return (() => {
+    var _el$4 = _tmpl$4$6();
+    spread(_el$4, mergeProps({
+      get ["aria-label"]() {
+        return local.label || void 0;
+      },
+      get ["class"]() {
+        return cn(MOSAIC_CLASSES.root, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return tiles().length >= 3;
+      },
+      get fallback() {
+        return createComponent(For, {
+          get each() {
+            return tiles();
+          },
+          children: (t) => createComponent(Tile, {
+            tile: t,
+            lead: false
+          })
+        });
+      },
+      get children() {
+        return [createComponent(Tile, {
+          get tile() {
+            return tiles()[0];
+          },
+          lead: true
+        }), (() => {
+          var _el$5 = _tmpl$3$7();
+          insert(_el$5, createComponent(For, {
+            get each() {
+              return tiles().slice(1);
+            },
+            children: (t) => createComponent(Tile, {
+              tile: t,
+              lead: false
+            })
+          }));
+          effect(() => className(_el$5, MOSAIC_CLASSES.side));
+          return _el$5;
+        })()];
+      }
+    }));
+    return _el$4;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$$d = /* @__PURE__ */ template(`<div data-slot=outline-caption aria-hidden=true>`), _tmpl$2$9 = /* @__PURE__ */ template(`<nav data-slot=outline>`), _tmpl$3$6 = /* @__PURE__ */ template(`<span data-slot=outline-bar aria-hidden=true>`), _tmpl$4$5 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$5$3 = /* @__PURE__ */ template(`<button type=button data-slot=outline-row><span>`);
+function Outline(props) {
+  const [local, rest] = splitProps(props, [`items`, `value`, `caption`, `onSelect`, `class`]);
+  return (() => {
+    var _el$ = _tmpl$2$9();
+    spread(_el$, mergeProps({
+      get ["aria-label"]() {
+        return local.caption || `Outline`;
+      },
+      get ["class"]() {
+        return cn(OUTLINE_CLASSES.root, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.caption;
+      },
+      get children() {
+        var _el$2 = _tmpl$$d();
+        insert(_el$2, () => local.caption);
+        effect(() => className(_el$2, OUTLINE_CLASSES.caption));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (item) => {
+        const active = () => local.value != null && item.id === local.value;
+        const count = () => outlineCountText(item.count);
+        return (() => {
+          var _el$3 = _tmpl$5$3(), _el$5 = _el$3.firstChild;
+          _el$3.$$click = () => local.onSelect?.(item.id);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return active();
+            },
+            get children() {
+              var _el$4 = _tmpl$3$6();
+              effect(() => className(_el$4, OUTLINE_CLASSES.bar));
+              return _el$4;
+            }
+          }), _el$5);
+          insert(_el$5, () => item.title);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return count();
+            },
+            get children() {
+              var _el$6 = _tmpl$4$5();
+              insert(_el$6, count);
+              effect(() => className(_el$6, OUTLINE_CLASSES.count));
+              return _el$6;
+            }
+          }), null);
+          effect((_p$) => {
+            var _v$ = active() ? `true` : void 0, _v$2 = active() ? `location` : void 0, _v$3 = count() ? `${item.title}, ${item.count}` : void 0, _v$4 = OUTLINE_CLASSES.row, _v$5 = OUTLINE_CLASSES.title;
+            _v$ !== _p$.e && setAttribute(_el$3, "data-active", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$3, "aria-current", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+            _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+          });
+          return _el$3;
+        })();
+      }
+    }), null);
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
 var _tmpl$$c = /* @__PURE__ */ template(`<div data-slot=popover-anchor>`), _tmpl$2$8 = /* @__PURE__ */ template(`<div role=dialog data-slot=popover-content tabindex=-1>`);
 const PopoverContext = createContext();
 const usePopover = (part2) => {
@@ -8355,6 +8619,7 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  CAROUSEL_GEOMETRY,
   CODE_TOKEN_CLASS2 as CODE_TOKEN_CLASS,
   Calendar,
   CalendarChevron,
@@ -8367,6 +8632,8 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CarouselCounter,
+  CarouselThumbnails,
   Checkbox,
   ChoiceTiles,
   ChoiceTilesFrame,
@@ -8456,7 +8723,11 @@ export {
   MOBILE_PAGE,
   MOBILE_SHEET,
   MOBILE_SHEET_FULL,
+  MOSAIC_GEOMETRY,
   Meter,
+  Mosaic,
+  OUTLINE_GEOMETRY,
+  Outline,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -8524,6 +8795,7 @@ export {
   alertVariants2 as alertVariants,
   avatarHueIndex,
   buttonVariants2 as buttonVariants,
+  carouselCounterText2 as carouselCounterText,
   choiceColumns2 as choiceColumns,
   choiceToggle2 as choiceToggle,
   choiceValues2 as choiceValues,
@@ -8538,6 +8810,8 @@ export {
   getDefaultClassNames,
   getInitials,
   middleTruncate,
+  mosaicTiles2 as mosaicTiles,
+  outlineCountText2 as outlineCountText,
   progressRingPercent2 as progressRingPercent,
   ringGeometry2 as ringGeometry,
   shouldDismissSheet,