@exponential_app/eui-solid 0.2.0 → 0.3.0

package/dist/index.js

@@ -1131,7 +1131,7 @@ function createMediaSrc(host, src, kind = `image`) {
   const source = createMediaSource(host, src, kind);
   return () => source().url;
 }
-var _tmpl$$k = /* @__PURE__ */ template(`<div class=xui-Markdown-image role=img>`), _tmpl$2$j = /* @__PURE__ */ template(`<p class=xui-Markdown-paragraph>`), _tmpl$3$h = /* @__PURE__ */ template(`<img alt>`), _tmpl$4$f = /* @__PURE__ */ template(`<span class=xui-Markdown-imageAlt>`), _tmpl$5$e = /* @__PURE__ */ template(`<a class=xui-Markdown-link target=_blank rel=noreferrer>`), _tmpl$6$c = /* @__PURE__ */ template(`<code class=xui-Markdown-code>`), _tmpl$7$b = /* @__PURE__ */ template(`<strong>`), _tmpl$8$a = /* @__PURE__ */ template(`<em>`), _tmpl$9$a = /* @__PURE__ */ template(`<del>`), _tmpl$0$7 = /* @__PURE__ */ template(`<span class=xui-Markdown-link data-denied>`), _tmpl$1$5 = /* @__PURE__ */ template(`<li class=xui-Markdown-listItem>`), _tmpl$10$5 = /* @__PURE__ */ template(`<input type=checkbox readonly>`), _tmpl$11$5 = /* @__PURE__ */ template(`<ol>`), _tmpl$12$3 = /* @__PURE__ */ template(`<ul>`), _tmpl$13$3 = /* @__PURE__ */ template(`<pre class=xui-Markdown-codeBlock><code>`), _tmpl$14$2 = /* @__PURE__ */ template(`<blockquote class=xui-Markdown-quote>`), _tmpl$15$2 = /* @__PURE__ */ template(`<table class=xui-Markdown-table><thead><tr></tr></thead><tbody>`), _tmpl$16$2 = /* @__PURE__ */ template(`<th>`), _tmpl$17$2 = /* @__PURE__ */ template(`<tr>`), _tmpl$18$1 = /* @__PURE__ */ template(`<td>`), _tmpl$19$1 = /* @__PURE__ */ template(`<hr>`), _tmpl$20$1 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$k = /* @__PURE__ */ template(`<div class=xui-Markdown-image role=img>`), _tmpl$2$j = /* @__PURE__ */ template(`<p class=xui-Markdown-paragraph>`), _tmpl$3$h = /* @__PURE__ */ template(`<img alt>`), _tmpl$4$f = /* @__PURE__ */ template(`<span class=xui-Markdown-imageAlt>`), _tmpl$5$e = /* @__PURE__ */ template(`<a class=xui-Markdown-link target=_blank rel=noreferrer>`), _tmpl$6$c = /* @__PURE__ */ template(`<code class=xui-Markdown-code>`), _tmpl$7$b = /* @__PURE__ */ template(`<strong>`), _tmpl$8$a = /* @__PURE__ */ template(`<em>`), _tmpl$9$a = /* @__PURE__ */ template(`<del>`), _tmpl$0$7 = /* @__PURE__ */ template(`<span class=xui-Markdown-link data-denied>`), _tmpl$1$6 = /* @__PURE__ */ template(`<li class=xui-Markdown-listItem>`), _tmpl$10$6 = /* @__PURE__ */ template(`<input type=checkbox readonly>`), _tmpl$11$5 = /* @__PURE__ */ template(`<ol>`), _tmpl$12$3 = /* @__PURE__ */ template(`<ul>`), _tmpl$13$3 = /* @__PURE__ */ template(`<pre class=xui-Markdown-codeBlock><code>`), _tmpl$14$2 = /* @__PURE__ */ template(`<blockquote class=xui-Markdown-quote>`), _tmpl$15$2 = /* @__PURE__ */ template(`<table class=xui-Markdown-table><thead><tr></tr></thead><tbody>`), _tmpl$16$2 = /* @__PURE__ */ template(`<th>`), _tmpl$17$2 = /* @__PURE__ */ template(`<tr>`), _tmpl$18$1 = /* @__PURE__ */ template(`<td>`), _tmpl$19$1 = /* @__PURE__ */ template(`<hr>`), _tmpl$20$1 = /* @__PURE__ */ template(`<div>`);
 function MarkdownImage(props) {
   const media = createMediaSource(() => props.host, () => props.src);
   return createComponent(Show, {
@@ -1225,11 +1225,11 @@ function inline(nodes, host) {
 }
 function renderList(list, host) {
   const items = list.items.map((item) => (() => {
-    var _el$1 = _tmpl$1$5();
+    var _el$1 = _tmpl$1$6();
     insert(_el$1, (() => {
       var _c$2 = memo(() => item.task === void 0);
       return () => _c$2() ? null : (() => {
-        var _el$10 = _tmpl$10$5();
+        var _el$10 = _tmpl$10$6();
         effect(() => setAttribute(_el$10, "checked", item.task ? `` : void 0));
         effect(() => _el$10.checked = item.task);
         return _el$10;
@@ -1792,7 +1792,7 @@ const NATIVES_ACTIONS = {
   Link: LinkNative,
   Toggle: ToggleNative
 };
-var _tmpl$$h = /* @__PURE__ */ template(`<svg><path fill-rule=evenodd stroke=var(--xui-color-background) stroke-width=1></svg>`, false, true, false), _tmpl$2$g = /* @__PURE__ */ template(`<svg><text></svg>`, false, true, false), _tmpl$3$f = /* @__PURE__ */ template(`<svg><g><path fill=none stroke-linejoin=round stroke-linecap=round></svg>`, false, true, false), _tmpl$4$d = /* @__PURE__ */ template(`<svg><path opacity=0.18></svg>`, false, true, false), _tmpl$5$d = /* @__PURE__ */ template(`<svg><circle></svg>`, false, true, false), _tmpl$6$b = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false), _tmpl$7$a = /* @__PURE__ */ template(`<div>`), _tmpl$8$9 = /* @__PURE__ */ template(`<strong>`), _tmpl$9$9 = /* @__PURE__ */ template(`<span class=xui-chart-tip-row><i>`), _tmpl$0$6 = /* @__PURE__ */ template(`<span>`), _tmpl$1$4 = /* @__PURE__ */ template(`<svg><g></svg>`, false, true, false), _tmpl$10$4 = /* @__PURE__ */ template(`<svg><rect class=xui-chart-band fill=currentColor opacity=0.06></svg>`, false, true, false), _tmpl$11$4 = /* @__PURE__ */ template(`<svg><text text-anchor=middle></svg>`, false, true, false), _tmpl$12$2 = /* @__PURE__ */ template(`<svg><text x=0 y=0 text-anchor=middle></svg>`, false, true, false), _tmpl$13$2 = /* @__PURE__ */ template(`<svg><g><line stroke=currentColor stroke-width=1 opacity=0.6 shape-rendering=crispEdges></svg>`, false, true, false), _tmpl$14$1 = /* @__PURE__ */ template(`<caption>`), _tmpl$15$1 = /* @__PURE__ */ template(`<table class=xui-sr-only><thead><tr><th scope=col></th></tr></thead><tbody>`), _tmpl$16$1 = /* @__PURE__ */ template(`<div><div class=xui-chart-plot><svg role=img class=xui-chart-svg>`), _tmpl$17$1 = /* @__PURE__ */ template(`<svg><line></svg>`, false, true, false), _tmpl$18 = /* @__PURE__ */ template(`<svg><text dominant-baseline=middle></svg>`, false, true, false), _tmpl$19 = /* @__PURE__ */ template(`<span><i>`), _tmpl$20 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$21 = /* @__PURE__ */ template(`<tr><th scope=row>`), _tmpl$22 = /* @__PURE__ */ template(`<td>`);
+var _tmpl$$h = /* @__PURE__ */ template(`<svg><path fill-rule=evenodd stroke=var(--xui-color-background) stroke-width=1></svg>`, false, true, false), _tmpl$2$g = /* @__PURE__ */ template(`<svg><text></svg>`, false, true, false), _tmpl$3$f = /* @__PURE__ */ template(`<svg><g><path fill=none stroke-linejoin=round stroke-linecap=round></svg>`, false, true, false), _tmpl$4$d = /* @__PURE__ */ template(`<svg><path opacity=0.18></svg>`, false, true, false), _tmpl$5$d = /* @__PURE__ */ template(`<svg><circle></svg>`, false, true, false), _tmpl$6$b = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false), _tmpl$7$a = /* @__PURE__ */ template(`<div>`), _tmpl$8$9 = /* @__PURE__ */ template(`<strong>`), _tmpl$9$9 = /* @__PURE__ */ template(`<span class=xui-chart-tip-row><i>`), _tmpl$0$6 = /* @__PURE__ */ template(`<span>`), _tmpl$1$5 = /* @__PURE__ */ template(`<svg><g></svg>`, false, true, false), _tmpl$10$5 = /* @__PURE__ */ template(`<svg><rect class=xui-chart-band fill=currentColor opacity=0.06></svg>`, false, true, false), _tmpl$11$4 = /* @__PURE__ */ template(`<svg><text text-anchor=middle></svg>`, false, true, false), _tmpl$12$2 = /* @__PURE__ */ template(`<svg><text x=0 y=0 text-anchor=middle></svg>`, false, true, false), _tmpl$13$2 = /* @__PURE__ */ template(`<svg><g><line stroke=currentColor stroke-width=1 opacity=0.6 shape-rendering=crispEdges></svg>`, false, true, false), _tmpl$14$1 = /* @__PURE__ */ template(`<caption>`), _tmpl$15$1 = /* @__PURE__ */ template(`<table class=xui-sr-only><thead><tr><th scope=col></th></tr></thead><tbody>`), _tmpl$16$1 = /* @__PURE__ */ template(`<div><div class=xui-chart-plot><svg role=img class=xui-chart-svg>`), _tmpl$17$1 = /* @__PURE__ */ template(`<svg><line></svg>`, false, true, false), _tmpl$18 = /* @__PURE__ */ template(`<svg><text dominant-baseline=middle></svg>`, false, true, false), _tmpl$19 = /* @__PURE__ */ template(`<span><i>`), _tmpl$20 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$21 = /* @__PURE__ */ template(`<tr><th scope=row>`), _tmpl$22 = /* @__PURE__ */ template(`<td>`);
 const colorVar = (i, tone) => tokenVar(seriesColor(i, tone)) ?? `currentColor`;
 const AXIS_FONT = 11;
 function ChartNative(props) {
@@ -2239,7 +2239,7 @@ function ChartNative(props) {
         return showGrid();
       },
       get children() {
-        var _el$16 = _tmpl$1$4();
+        var _el$16 = _tmpl$1$5();
         spread(_el$16, mergeProps(() => part(`grid`), {
           "stroke": "currentColor",
           "stroke-width": 1,
@@ -2275,7 +2275,7 @@ function ChartNative(props) {
         return memo(() => !!(!round() && active() !== null))() && !sparkline();
       },
       get children() {
-        var _el$17 = _tmpl$10$4();
+        var _el$17 = _tmpl$10$5();
         effect((_p$) => {
           var _v$21 = geo().rtl ? geo().width - geo().pad.l - geo().slot * (active() + 1) : geo().pad.l + geo().slot * active(), _v$22 = geo().pad.t, _v$23 = geo().slot, _v$24 = geo().innerH;
           _v$21 !== _p$.e && setAttribute(_el$17, "x", _p$.e = _v$21);
@@ -2893,7 +2893,7 @@ function searchMatches(item, query) {
   const needle = query.trim().toLowerCase();
   return needle === `` || str(item.label).toLowerCase().includes(needle) || str(item.identifier).toLowerCase().includes(needle);
 }
-var _tmpl$$f = /* @__PURE__ */ template(`<div role=listbox class=xui-ChipInput-suggestions>`), _tmpl$2$f = /* @__PURE__ */ template(`<div><div><ul class=xui-chip-list></ul><input>`), _tmpl$3$e = /* @__PURE__ */ template(`<button type=button tabindex=-1>`), _tmpl$4$c = /* @__PURE__ */ template(`<li><span>`), _tmpl$5$c = /* @__PURE__ */ template(`<div role=option class=xui-ChipInput-suggestion>`), _tmpl$6$a = /* @__PURE__ */ template(`<span>`), _tmpl$7$9 = /* @__PURE__ */ template(`<ul class=xui-file-list>`), _tmpl$8$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9$8 = /* @__PURE__ */ template(`<div><div><span></span><span></span><span></span><input type=file class=xui-sr-only tabindex=-1>`), _tmpl$0$5 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$1$3 = /* @__PURE__ */ template(`<li><span></span><span>`), _tmpl$10$3 = /* @__PURE__ */ template(`<a target=_blank rel=noreferrer>`), _tmpl$11$3 = /* @__PURE__ */ template(`<span class=xui-field-error>`);
+var _tmpl$$f = /* @__PURE__ */ template(`<div role=listbox class=xui-ChipInput-suggestions>`), _tmpl$2$f = /* @__PURE__ */ template(`<div><div><ul class=xui-chip-list></ul><input>`), _tmpl$3$e = /* @__PURE__ */ template(`<button type=button tabindex=-1>`), _tmpl$4$c = /* @__PURE__ */ template(`<li><span>`), _tmpl$5$c = /* @__PURE__ */ template(`<div role=option class=xui-ChipInput-suggestion>`), _tmpl$6$a = /* @__PURE__ */ template(`<span>`), _tmpl$7$9 = /* @__PURE__ */ template(`<ul class=xui-file-list>`), _tmpl$8$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9$8 = /* @__PURE__ */ template(`<div><div><span></span><span></span><span></span><input type=file class=xui-sr-only tabindex=-1>`), _tmpl$0$5 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$1$4 = /* @__PURE__ */ template(`<li><span></span><span>`), _tmpl$10$4 = /* @__PURE__ */ template(`<a target=_blank rel=noreferrer>`), _tmpl$11$3 = /* @__PURE__ */ template(`<span class=xui-field-error>`);
 function ChipInputNative(props) {
   const part = parts(props);
   const ctx = useSurfaceContext();
@@ -3332,7 +3332,7 @@ function FileUploadNative(props) {
           children: (file, i) => {
             const href = () => linkHref(ctx.host, file.url);
             return (() => {
-              var _el$17 = _tmpl$1$3(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
+              var _el$17 = _tmpl$1$4(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
               spread(_el$17, mergeProps(() => part.at(`file`, i())), false, true);
               spread(_el$18, mergeProps(() => part.at(`fileIcon`, i())), false, true);
               insert(_el$18, createComponent(BuiltinIcon, {
@@ -3342,7 +3342,7 @@ function FileUploadNative(props) {
               insert(_el$19, (() => {
                 var _c$ = memo(() => !!href());
                 return () => _c$() ? (() => {
-                  var _el$22 = _tmpl$10$3();
+                  var _el$22 = _tmpl$10$4();
                   insert(_el$22, () => file.name);
                   effect(() => setAttribute(_el$22, "href", href()));
                   return _el$22;
@@ -5184,7 +5184,7 @@ function createHostOwnedValue(options) {
     commit: () => c.commit()
   };
 }
-var _tmpl$$a = /* @__PURE__ */ template(`<textarea>`), _tmpl$2$a = /* @__PURE__ */ template(`<div>`), _tmpl$3$9 = /* @__PURE__ */ template(`<input>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div><div><button type=button></button><input><button type=button>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`), _tmpl$6$6 = /* @__PURE__ */ template(`<span data-state=checked>`), _tmpl$7$5 = /* @__PURE__ */ template(`<div><button type=button role=checkbox value=on></button><div class=xui-field-text>`), _tmpl$8$5 = /* @__PURE__ */ template(`<div><div></div><button type=button role=switch value=on><span>`), _tmpl$9$5 = /* @__PURE__ */ template(`<div><div role=radiogroup>`), _tmpl$0$3 = /* @__PURE__ */ template(`<label class=xui-radio-row><button type=button role=radio data-radix-collection-item></button><span>`), _tmpl$1$2 = /* @__PURE__ */ template(`<div><div><span></span></div><span data-orientation=horizontal class=xui-slider-root><span data-orientation=horizontal><span data-orientation=horizontal></span></span><span><span role=slider aria-orientation=horizontal data-orientation=horizontal tabindex=0 data-radix-collection-item style>`), _tmpl$10$2 = /* @__PURE__ */ template(`<div><textarea></textarea><div class=xui-composer-bar><button type=button>`), _tmpl$11$2 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$$a = /* @__PURE__ */ template(`<textarea>`), _tmpl$2$a = /* @__PURE__ */ template(`<div>`), _tmpl$3$9 = /* @__PURE__ */ template(`<input>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div><div><button type=button></button><input><button type=button>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`), _tmpl$6$6 = /* @__PURE__ */ template(`<span data-state=checked>`), _tmpl$7$5 = /* @__PURE__ */ template(`<div><button type=button role=checkbox value=on></button><div class=xui-field-text>`), _tmpl$8$5 = /* @__PURE__ */ template(`<div><div></div><button type=button role=switch value=on><span>`), _tmpl$9$5 = /* @__PURE__ */ template(`<div><div role=radiogroup>`), _tmpl$0$3 = /* @__PURE__ */ template(`<label class=xui-radio-row><button type=button role=radio data-radix-collection-item></button><span>`), _tmpl$1$3 = /* @__PURE__ */ template(`<div><div><span></span></div><span data-orientation=horizontal class=xui-slider-root><span data-orientation=horizontal><span data-orientation=horizontal></span></span><span><span role=slider aria-orientation=horizontal data-orientation=horizontal tabindex=0 data-radix-collection-item style>`), _tmpl$10$3 = /* @__PURE__ */ template(`<div><textarea></textarea><div class=xui-composer-bar><button type=button>`), _tmpl$11$2 = /* @__PURE__ */ template(`<button type=button>`);
 function createInputSender(props, prop) {
   const ctx = useSurfaceContext();
   const path = createMemo(() => boundPath(props.node.props, prop, props.scope));
@@ -6197,7 +6197,7 @@ function SliderNative(props) {
     return s;
   };
   return (() => {
-    var _el$22 = _tmpl$1$2(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild;
+    var _el$22 = _tmpl$1$3(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild;
     spread(_el$22, mergeProps(() => props.rootProps), false, true);
     spread(_el$23, mergeProps(() => part(`header`), {
       get ["class"]() {
@@ -6351,7 +6351,7 @@ function ComposerNative(props) {
   const placeholder = () => str(props.props.placeholder);
   const submitLabel = () => str(props.props.submitLabel) || ctx.t(`send`);
   return (() => {
-    var _el$30 = _tmpl$10$2(), _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$32.firstChild;
+    var _el$30 = _tmpl$10$3(), _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$32.firstChild;
     spread(_el$30, mergeProps(() => props.rootProps, {
       get ["data-busy"]() {
         return busy() ? `true` : void 0;
@@ -6435,7 +6435,7 @@ const NATIVES_INPUTS = {
   Composer: ComposerNative
 };
 delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
-var _tmpl$$9 = /* @__PURE__ */ template(`<svg class=xui-media-sizer aria-hidden=true height=1>`), _tmpl$2$9 = /* @__PURE__ */ template(`<img decoding=async>`, true, false, false), _tmpl$3$8 = /* @__PURE__ */ template(`<div>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div><video>`), _tmpl$5$6 = /* @__PURE__ */ template(`<span>`), _tmpl$6$5 = /* @__PURE__ */ template(`<div><audio>`), _tmpl$7$4 = /* @__PURE__ */ template(`<img>`), _tmpl$8$4 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`), _tmpl$9$4 = /* @__PURE__ */ template(`<div><div class=xui-carousel-track aria-live=polite>`), _tmpl$0$2 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$$9 = /* @__PURE__ */ template(`<svg class=xui-media-sizer aria-hidden=true height=1>`), _tmpl$2$9 = /* @__PURE__ */ template(`<img decoding=async>`, true, false, false), _tmpl$3$8 = /* @__PURE__ */ template(`<div>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div><video>`), _tmpl$5$6 = /* @__PURE__ */ template(`<span>`), _tmpl$6$5 = /* @__PURE__ */ template(`<div><audio>`), _tmpl$7$4 = /* @__PURE__ */ template(`<img>`), _tmpl$8$4 = /* @__PURE__ */ template(`<img class=xui-carousel-thumb alt aria-hidden=true loading=lazy decoding=async>`, true, false, false), _tmpl$9$4 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$0$2 = /* @__PURE__ */ template(`<div class=xui-carousel-track aria-live=polite>`), _tmpl$1$2 = /* @__PURE__ */ template(`<div class=xui-carousel-stage><span>`), _tmpl$10$2 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
 function MediaSizer() {
   return (() => {
     var _el$ = _tmpl$$9();
@@ -6698,6 +6698,37 @@ function AvatarNative(props) {
     return _el$0;
   })();
 }
+function CarouselThumbnail(props) {
+  const ctx = useSurfaceContext();
+  const url = createMediaSrc(() => ctx.host, () => props.src);
+  return (() => {
+    var _el$11 = _tmpl$9$4();
+    spread(_el$11, mergeProps(() => props.attrs, {
+      get ["aria-label"]() {
+        return props.label;
+      },
+      get ["aria-current"]() {
+        return props.current ? `true` : void 0;
+      },
+      get ["data-current"]() {
+        return props.current ? `true` : void 0;
+      },
+      "onClick": () => props.onPress()
+    }), false, true);
+    insert(_el$11, createComponent(Show, {
+      get when() {
+        return memo(() => !!props.src)() && url();
+      },
+      get children() {
+        var _el$12 = _tmpl$8$4();
+        setAttribute(_el$12, "draggable", false);
+        effect(() => setAttribute(_el$12, "src", url()));
+        return _el$12;
+      }
+    }));
+    return _el$11;
+  })();
+}
 function CarouselNative(props) {
   const ctx = useSurfaceContext();
   const part = parts(props);
@@ -6750,23 +6781,26 @@ function CarouselNative(props) {
     page: i + 1,
     total: pages().length
   });
-  return (() => {
-    var _el$11 = _tmpl$9$4(), _el$12 = _el$11.firstChild;
-    spread(_el$11, mergeProps(() => props.rootProps, {
-      "role": "region",
-      get ["aria-roledescription"]() {
-        return ctx.t(`carousel`);
-      },
-      "onKeyDown": (e) => {
-        const rtl = ctx.direction === `rtl`;
-        if (e.key === `ArrowRight`) go(page() + (rtl ? -1 : 1));
-        else if (e.key === `ArrowLeft`) go(page() + (rtl ? 1 : -1));
-      }
-    }), false, true);
-    _el$12.addEventListener("scroll", onScroll);
+  const counter = () => many() && bool(props.props.counter);
+  const thumbnails = createMemo(() => many() && Array.isArray(props.props.thumbnails) ? props.props.thumbnails : null);
+  let strip;
+  createEffect(() => {
+    const p = page();
+    thumbnails();
+    const el = strip;
+    const thumb = el?.children[p];
+    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;
+  });
+  const trackView = (() => {
+    var _el$13 = _tmpl$0$2();
+    _el$13.addEventListener("scroll", onScroll);
     var _ref$ = track;
-    typeof _ref$ === "function" ? use(_ref$, _el$12) : track = _el$12;
-    insert(_el$12, createComponent(For, {
+    typeof _ref$ === "function" ? use(_ref$, _el$13) : track = _el$13;
+    insert(_el$13, createComponent(For, {
       get each() {
         return ids();
       },
@@ -6781,9 +6815,9 @@ function CarouselNative(props) {
           return a;
         };
         return (() => {
-          var _el$17 = _tmpl$3$8();
-          use((el) => createRenderEffect(() => el.toggleAttribute(`inert`, !active())), _el$17);
-          spread(_el$17, mergeProps(attrs, {
+          var _el$14 = _tmpl$3$8();
+          use((el) => createRenderEffect(() => el.toggleAttribute(`inert`, !active())), _el$14);
+          spread(_el$14, mergeProps(attrs, {
             "role": "group",
             get ["aria-roledescription"]() {
               return ctx.t(`slide`);
@@ -6798,23 +6832,96 @@ function CarouselNative(props) {
               return active() ? void 0 : ``;
             }
           }), false, true);
-          insert(_el$17, createComponent(NodeView, {
+          insert(_el$14, createComponent(NodeView, {
             get node() {
               return entry().node;
             }
           }));
-          return _el$17;
+          return _el$14;
         })();
       }
     }));
-    insert(_el$11, createComponent(Show, {
+    return _el$13;
+  })();
+  return (() => {
+    var _el$15 = _tmpl$3$8();
+    spread(_el$15, mergeProps(() => props.rootProps, {
+      "role": "region",
+      get ["aria-roledescription"]() {
+        return ctx.t(`carousel`);
+      },
+      "onKeyDown": (e) => {
+        const rtl = ctx.direction === `rtl`;
+        if (e.key === `ArrowRight`) go(page() + (rtl ? -1 : 1));
+        else if (e.key === `ArrowLeft`) go(page() + (rtl ? 1 : -1));
+      }
+    }), false, true);
+    insert(_el$15, createComponent(Show, {
+      get when() {
+        return counter();
+      },
+      fallback: trackView,
+      get children() {
+        var _el$16 = _tmpl$1$2(), _el$17 = _el$16.firstChild;
+        insert(_el$16, trackView, _el$17);
+        spread(_el$17, mergeProps(() => part(`counter`), {
+          "aria-hidden": "true"
+        }), false, true);
+        insert(_el$17, () => ctx.t(`pageCounter`, {
+          page: page() + 1,
+          total: pages().length
+        }));
+        return _el$16;
+      }
+    }), null);
+    insert(_el$15, createComponent(Show, {
+      get when() {
+        return thumbnails();
+      },
+      children: (urls) => (() => {
+        var _el$22 = _tmpl$3$8();
+        var _ref$2 = strip;
+        typeof _ref$2 === "function" ? use(_ref$2, _el$22) : strip = _el$22;
+        spread(_el$22, mergeProps(() => part(`thumbnails`)), false, true);
+        insert(_el$22, createComponent(For, {
+          get each() {
+            return ids();
+          },
+          children: (id) => {
+            const index = () => byId().get(id)?.index ?? 0;
+            const current = () => index() === page();
+            const src = () => {
+              const u = urls()[index()];
+              return typeof u === `string` ? u : ``;
+            };
+            return createComponent(CarouselThumbnail, {
+              get attrs() {
+                return part.at(`thumbnail`, index(), current() && `selected`);
+              },
+              get src() {
+                return src();
+              },
+              get current() {
+                return current();
+              },
+              get label() {
+                return pageOf(index());
+              },
+              onPress: () => go(index())
+            });
+          }
+        }));
+        return _el$22;
+      })()
+    }), null);
+    insert(_el$15, createComponent(Show, {
       get when() {
         return many();
       },
       get children() {
-        var _el$13 = _tmpl$8$4(), _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling;
-        spread(_el$13, mergeProps(() => withClass(part(`controls`), `xui-carousel-controls`)), false, true);
-        spread(_el$14, mergeProps(() => withClass(part(`previous`), `xui-carousel-nav`), {
+        var _el$18 = _tmpl$10$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
+        spread(_el$18, mergeProps(() => withClass(part(`controls`), `xui-carousel-controls`)), false, true);
+        spread(_el$19, mergeProps(() => withClass(part(`previous`), `xui-carousel-nav`), {
           get ["aria-label"]() {
             return ctx.t(`previous`);
           },
@@ -6823,21 +6930,21 @@ function CarouselNative(props) {
           },
           "onClick": () => go(page() - 1)
         }), false, true);
-        insert(_el$14, createComponent(BuiltinIcon, {
+        insert(_el$19, createComponent(BuiltinIcon, {
           slot: "Carousel.previous"
         }));
-        insert(_el$13, createComponent(Show, {
+        insert(_el$18, createComponent(Show, {
           get when() {
             return props.props.indicators !== false;
           },
           get children() {
-            var _el$15 = _tmpl$3$8();
-            spread(_el$15, mergeProps(() => part(`indicator`), {
+            var _el$20 = _tmpl$3$8();
+            spread(_el$20, mergeProps(() => part(`indicator`), {
               "class": "xui-carousel-dots",
               "data-xui-part": "Carousel/indicators",
               "role": "tablist"
             }), false, true);
-            insert(_el$15, createComponent(For, {
+            insert(_el$20, createComponent(For, {
               get each() {
                 return ids();
               },
@@ -6851,8 +6958,8 @@ function CarouselNative(props) {
                   return a;
                 };
                 return (() => {
-                  var _el$18 = _tmpl$0$2();
-                  spread(_el$18, mergeProps(attrs, {
+                  var _el$23 = _tmpl$9$4();
+                  spread(_el$23, mergeProps(attrs, {
                     "role": "tab",
                     get ["aria-selected"]() {
                       return index() === page();
@@ -6862,14 +6969,14 @@ function CarouselNative(props) {
                     },
                     "onClick": () => go(index())
                   }), false, false);
-                  return _el$18;
+                  return _el$23;
                 })();
               }
             }));
-            return _el$15;
+            return _el$20;
           }
-        }), _el$16);
-        spread(_el$16, mergeProps(() => withClass(part(`next`), `xui-carousel-nav`), {
+        }), _el$21);
+        spread(_el$21, mergeProps(() => withClass(part(`next`), `xui-carousel-nav`), {
           get ["aria-label"]() {
             return ctx.t(`next`);
           },
@@ -6878,13 +6985,13 @@ function CarouselNative(props) {
           },
           "onClick": () => go(page() + 1)
         }), false, true);
-        insert(_el$16, createComponent(BuiltinIcon, {
+        insert(_el$21, createComponent(BuiltinIcon, {
           slot: "Carousel.next"
         }));
-        return _el$13;
+        return _el$18;
       }
     }), null);
-    return _el$11;
+    return _el$15;
   })();
 }
 const NATIVES_MEDIA = {