@floegence/floe-webapp-core 0.86.76 → 0.87.0

package/dist/components/ui/Pagination.js

@@ -1,8 +1,9 @@
-import { createComponent as t, spread as M, mergeProps as I, insert as s, effect as g, className as w, memo as J, setAttribute as m, template as u, delegateEvents as D } from "solid-js/web";
-import { splitProps as j, createMemo as q, Switch as H, Match as N, Show as $, For as E } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
-var K = /* @__PURE__ */ u('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M9.78 4.22a.75.75 0 010 1.06L7.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L5.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd>'), O = /* @__PURE__ */ u('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd>'), Q = /* @__PURE__ */ u('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M8.78 4.22a.75.75 0 010 1.06L6.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L4.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd></path><path fill-rule=evenodd d="M12.78 4.22a.75.75 0 010 1.06L10.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd>'), U = /* @__PURE__ */ u('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M3.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L5.94 8 3.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd></path><path fill-rule=evenodd d="M7.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L9.94 8 7.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd>'), V = /* @__PURE__ */ u('<svg viewBox="0 0 16 16"fill=currentColor><circle cx=4 cy=8 r=1.5></circle><circle cx=8 cy=8 r=1.5></circle><circle cx=12 cy=8 r=1.5>'), W = /* @__PURE__ */ u("<button type=button data-floe-surface-part=action>"), X = /* @__PURE__ */ u("<nav aria-label=Pagination><span>Page <!> of "), Y = /* @__PURE__ */ u("<nav aria-label=Pagination><span> / "), Z = /* @__PURE__ */ u("<span> items"), ee = /* @__PURE__ */ u('<div class="flex items-center gap-2"><span>Show</span><select data-floe-surface=inset>'), te = /* @__PURE__ */ u('<div class="flex items-center gap-2"><span>Go to</span><input data-floe-surface=inset type=number min=1>'), re = /* @__PURE__ */ u('<nav aria-label=Pagination><div class="flex items-center gap-1">'), le = /* @__PURE__ */ u("<option>"), ne = /* @__PURE__ */ u("<span>");
-const ae = {
+import { createComponent as l, spread as M, mergeProps as I, insert as s, effect as g, className as k, setAttribute as v, memo as O, template as h, delegateEvents as q } from "solid-js/web";
+import { splitProps as H, createMemo as K, Switch as Q, Match as A, Show as z, For as j } from "solid-js";
+import { cn as m } from "../../utils/cn.js";
+import { useFloeLocale as U } from "../../context/LocaleContext.js";
+var V = /* @__PURE__ */ h('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M9.78 4.22a.75.75 0 010 1.06L7.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L5.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd>'), W = /* @__PURE__ */ h('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd>'), X = /* @__PURE__ */ h('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M8.78 4.22a.75.75 0 010 1.06L6.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L4.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd></path><path fill-rule=evenodd d="M12.78 4.22a.75.75 0 010 1.06L10.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"clip-rule=evenodd>'), Y = /* @__PURE__ */ h('<svg viewBox="0 0 16 16"fill=currentColor><path fill-rule=evenodd d="M3.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L5.94 8 3.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd></path><path fill-rule=evenodd d="M7.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L9.94 8 7.22 5.28a.75.75 0 010-1.06z"clip-rule=evenodd>'), Z = /* @__PURE__ */ h('<svg viewBox="0 0 16 16"fill=currentColor><circle cx=4 cy=8 r=1.5></circle><circle cx=8 cy=8 r=1.5></circle><circle cx=12 cy=8 r=1.5>'), ee = /* @__PURE__ */ h("<button type=button data-floe-surface-part=action>"), te = /* @__PURE__ */ h("<nav><span>"), re = /* @__PURE__ */ h("<nav><span> / "), J = /* @__PURE__ */ h("<span>"), le = /* @__PURE__ */ h('<div class="flex items-center gap-2"><span></span><select data-floe-surface=inset>'), ne = /* @__PURE__ */ h('<div class="flex items-center gap-2"><span></span><input data-floe-surface=inset type=number min=1>'), ae = /* @__PURE__ */ h('<nav><div class="flex items-center gap-1">'), ie = /* @__PURE__ */ h("<option>");
+const oe = {
   sm: {
     button: "h-7 min-w-7 px-2 text-xs",
     text: "text-xs",
@@ -19,313 +20,361 @@ const ae = {
     input: "h-9 w-18 text-sm"
   }
 };
-function A(d) {
+function R(u) {
   return (() => {
-    var e = K();
-    return g(() => m(e, "class", d.class)), e;
+    var t = V();
+    return g(() => v(t, "class", u.class)), t;
   })();
 }
-function R(d) {
+function F(u) {
   return (() => {
-    var e = O();
-    return g(() => m(e, "class", d.class)), e;
+    var t = W();
+    return g(() => v(t, "class", u.class)), t;
   })();
 }
-function T(d) {
+function D(u) {
   return (() => {
-    var e = Q();
-    return g(() => m(e, "class", d.class)), e;
+    var t = X();
+    return g(() => v(t, "class", u.class)), t;
   })();
 }
-function G(d) {
+function G(u) {
   return (() => {
-    var e = U();
-    return g(() => m(e, "class", d.class)), e;
+    var t = Y();
+    return g(() => v(t, "class", u.class)), t;
   })();
 }
-function ie(d) {
+function se(u) {
   return (() => {
-    var e = V();
-    return g(() => m(e, "class", d.class)), e;
+    var t = Z();
+    return g(() => v(t, "class", u.class)), t;
   })();
 }
-function se(d, e, x) {
-  const P = x * 2 + 5;
-  if (e <= P)
+function ce(u, t, e) {
+  const S = e * 2 + 5;
+  if (t <= S)
     return Array.from({
-      length: e
-    }, (b, o) => o + 1);
-  const _ = Math.max(d - x, 1), y = Math.min(d + x, e), v = _ > 2, z = y < e - 1;
-  return !v && z ? [...Array.from({
-    length: 3 + 2 * x
-  }, (o, S) => S + 1), "ellipsis", e] : v && !z ? [1, "ellipsis", ...Array.from({
-    length: 3 + 2 * x
-  }, (o, S) => e - (3 + 2 * x) + S + 1)] : [1, "ellipsis", ...Array.from({
-    length: y - _ + 1
-  }, (b, o) => _ + o), "ellipsis", e];
+      length: t
+    }, (w, x) => x + 1);
+  const y = Math.max(u - e, 1), L = Math.min(u + e, t), P = y > 2, f = L < t - 1;
+  return !P && f ? [...Array.from({
+    length: 3 + 2 * e
+  }, (x, d) => d + 1), "ellipsis", t] : P && !f ? [1, "ellipsis", ...Array.from({
+    length: 3 + 2 * e
+  }, (x, d) => t - (3 + 2 * e) + d + 1)] : [1, "ellipsis", ...Array.from({
+    length: L - y + 1
+  }, (w, x) => y + x), "ellipsis", t];
 }
-function ue(d) {
-  const [e, x] = j(d, ["page", "totalPages", "onChange", "size", "variant", "siblingCount", "showFirstLast", "showPageSize", "pageSize", "pageSizes", "onPageSizeChange", "showJumpTo", "totalItems", "disabled", "class"]), P = () => e.size ?? "md", _ = () => e.variant ?? "default", y = () => e.siblingCount ?? 1, v = () => ae[P()], z = q(() => se(e.page, e.totalPages, y())), L = () => e.page > 1, b = () => e.page < e.totalPages, o = (r) => {
+function he(u) {
+  const t = U(), [e, S] = H(u, ["page", "totalPages", "onChange", "size", "variant", "siblingCount", "showFirstLast", "showPageSize", "pageSize", "pageSizes", "onPageSizeChange", "showJumpTo", "totalItems", "disabled", "class"]), y = () => e.size ?? "md", L = () => e.variant ?? "default", P = () => e.siblingCount ?? 1, f = () => oe[y()], N = K(() => ce(e.page, e.totalPages, P())), w = () => e.page > 1, x = () => e.page < e.totalPages, d = (r) => {
     if (e.disabled) return;
-    const a = Math.max(1, Math.min(r, e.totalPages));
-    a !== e.page && e.onChange?.(a);
-  }, S = (r) => {
-    const a = r.target, l = parseInt(a.value, 10);
-    isNaN(l) || o(l), a.value = "";
-  }, p = (r) => {
-    const a = () => r.onClick?.();
+    const i = Math.max(1, Math.min(r, e.totalPages));
+    i !== e.page && e.onChange?.(i);
+  }, B = (r) => {
+    const i = r.target, a = parseInt(i.value, 10);
+    isNaN(a) || d(a), i.value = "";
+  }, b = (r) => {
+    const i = () => r.onClick?.();
     return (() => {
-      var l = W();
-      return l.$$click = a, s(l, () => r.children), g((i) => {
-        var c = r.isActive ? "inset" : "raised", n = r.isActive ? "page" : void 0, h = r.disabled || e.disabled, C = r.title, k = f("inline-flex items-center justify-center rounded-sm font-medium", "transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] cursor-pointer", v().button, r.isActive ? "bg-[var(--floe-plane)] text-[var(--floe-ink)] border border-[var(--floe-accent-line)] shadow-[var(--floe-elevation-raised)]" : "bg-transparent text-[var(--floe-ink-soft)] border border-[var(--floe-line)] hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", (r.disabled || e.disabled) && "opacity-50 cursor-not-allowed");
-        return c !== i.e && m(l, "data-floe-surface", i.e = c), n !== i.t && m(l, "aria-current", i.t = n), h !== i.a && (l.disabled = i.a = h), C !== i.o && m(l, "title", i.o = C), k !== i.i && w(l, i.i = k), i;
+      var a = ee();
+      return a.$$click = i, s(a, () => r.children), g((o) => {
+        var c = r.isActive ? "inset" : "raised", n = r.isActive ? "page" : void 0, p = r.disabled || e.disabled, C = r.title ?? (r.page ? t.t("page", {
+          page: r.page
+        }) : void 0), _ = r.title, $ = m("inline-flex items-center justify-center rounded-sm font-medium", "transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] cursor-pointer", f().button, r.isActive ? "bg-[var(--floe-plane)] text-[var(--floe-ink)] border border-[var(--floe-accent-line)] shadow-[var(--floe-elevation-raised)]" : "bg-transparent text-[var(--floe-ink-soft)] border border-[var(--floe-line)] hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", (r.disabled || e.disabled) && "opacity-50 cursor-not-allowed");
+        return c !== o.e && v(a, "data-floe-surface", o.e = c), n !== o.t && v(a, "aria-current", o.t = n), p !== o.a && (a.disabled = o.a = p), C !== o.o && v(a, "aria-label", o.o = C), _ !== o.i && v(a, "title", o.i = _), $ !== o.n && k(a, o.n = $), o;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
         o: void 0,
-        i: void 0
-      }), l;
+        i: void 0,
+        n: void 0
+      }), a;
     })();
   };
-  return t(H, {
+  return l(Q, {
     get children() {
-      return [t(N, {
+      return [l(A, {
         get when() {
-          return _() === "simple";
+          return L() === "simple";
         },
         get children() {
-          var r = X(), a = r.firstChild, l = a.firstChild, i = l.nextSibling;
-          return i.nextSibling, M(r, I({
+          var r = te(), i = r.firstChild;
+          return M(r, I({
+            get dir() {
+              return t.direction;
+            },
+            get "aria-label"() {
+              return t.t("pagination");
+            },
             get class() {
-              return f("flex items-center gap-2", e.class);
+              return m("flex items-center gap-2", e.class);
             }
-          }, x), !1, !0), s(r, t(p, {
+          }, S), !1, !0), s(r, l(b, {
             get disabled() {
-              return !L();
+              return !w();
+            },
+            onClick: () => d(e.page - 1),
+            get title() {
+              return t.t("previousPage");
             },
-            onClick: () => o(e.page - 1),
-            title: "Previous page",
             get children() {
-              return t(A, {
-                class: "w-4 h-4"
+              return l(R, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), a), s(a, () => e.page, i), s(a, () => e.totalPages, null), s(r, t(p, {
+          }), i), s(i, () => t.t("pageOf", {
+            page: e.page,
+            total: e.totalPages
+          })), s(r, l(b, {
             get disabled() {
-              return !b();
+              return !x();
+            },
+            onClick: () => d(e.page + 1),
+            get title() {
+              return t.t("nextPage");
             },
-            onClick: () => o(e.page + 1),
-            title: "Next page",
             get children() {
-              return t(R, {
-                class: "w-4 h-4"
+              return l(F, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), null), g(() => w(a, f("text-[var(--floe-ink-soft)] px-2", v().text))), r;
+          }), null), g(() => k(i, m("text-[var(--floe-ink-soft)] px-2", f().text))), r;
         }
-      }), t(N, {
+      }), l(A, {
         get when() {
-          return _() === "minimal";
+          return L() === "minimal";
         },
         get children() {
-          var r = Y(), a = r.firstChild, l = a.firstChild;
+          var r = re(), i = r.firstChild, a = i.firstChild;
           return M(r, I({
+            get dir() {
+              return t.direction;
+            },
+            get "aria-label"() {
+              return t.t("pagination");
+            },
             get class() {
-              return f("flex items-center gap-1", e.class);
+              return m("flex items-center gap-1", e.class);
             }
-          }, x), !1, !0), s(r, t($, {
+          }, S), !1, !0), s(r, l(z, {
             get when() {
               return e.showFirstLast;
             },
             get children() {
-              return t(p, {
+              return l(b, {
                 get disabled() {
-                  return !L();
+                  return !w();
+                },
+                onClick: () => d(1),
+                get title() {
+                  return t.t("firstPage");
                 },
-                onClick: () => o(1),
-                title: "First page",
                 get children() {
-                  return t(T, {
-                    class: "w-4 h-4"
+                  return l(D, {
+                    class: "w-4 h-4 rtl:rotate-180"
                   });
                 }
               });
             }
-          }), a), s(r, t(p, {
+          }), i), s(r, l(b, {
             get disabled() {
-              return !L();
+              return !w();
+            },
+            onClick: () => d(e.page - 1),
+            get title() {
+              return t.t("previousPage");
             },
-            onClick: () => o(e.page - 1),
-            title: "Previous page",
             get children() {
-              return t(A, {
-                class: "w-4 h-4"
+              return l(R, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), a), s(a, () => e.page, l), s(a, () => e.totalPages, null), s(r, t(p, {
+          }), i), s(i, () => e.page, a), s(i, () => e.totalPages, null), s(r, l(b, {
             get disabled() {
-              return !b();
+              return !x();
+            },
+            onClick: () => d(e.page + 1),
+            get title() {
+              return t.t("nextPage");
             },
-            onClick: () => o(e.page + 1),
-            title: "Next page",
             get children() {
-              return t(R, {
-                class: "w-4 h-4"
+              return l(F, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), null), s(r, t($, {
+          }), null), s(r, l(z, {
             get when() {
               return e.showFirstLast;
             },
             get children() {
-              return t(p, {
+              return l(b, {
                 get disabled() {
-                  return !b();
+                  return !x();
+                },
+                onClick: () => d(e.totalPages),
+                get title() {
+                  return t.t("lastPage");
                 },
-                onClick: () => o(e.totalPages),
-                title: "Last page",
                 get children() {
-                  return t(G, {
-                    class: "w-4 h-4"
+                  return l(G, {
+                    class: "w-4 h-4 rtl:rotate-180"
                   });
                 }
               });
             }
-          }), null), g(() => w(a, f("text-[var(--floe-ink-soft)] px-3 tabular-nums", v().text))), r;
+          }), null), g(() => k(i, m("text-[var(--floe-ink-soft)] px-3 tabular-nums", f().text))), r;
         }
-      }), t(N, {
+      }), l(A, {
         get when() {
-          return _() === "default";
+          return L() === "default";
         },
         get children() {
-          var r = re(), a = r.firstChild;
+          var r = ae(), i = r.firstChild;
           return M(r, I({
+            get dir() {
+              return t.direction;
+            },
+            get "aria-label"() {
+              return t.t("pagination");
+            },
             get class() {
-              return f("flex items-center gap-4", e.class);
+              return m("flex flex-wrap items-center gap-4", e.class);
             }
-          }, x), !1, !0), s(r, t($, {
+          }, S), !1, !0), s(r, l(z, {
             get when() {
               return e.totalItems !== void 0;
             },
             get children() {
-              var l = Z(), i = l.firstChild;
-              return s(l, () => e.totalItems, i), g(() => w(l, f("text-[var(--floe-ink-soft)]", v().text))), l;
+              var a = J();
+              return s(a, () => t.t("itemCount", {
+                count: e.totalItems ?? 0
+              })), g(() => k(a, m("text-[var(--floe-ink-soft)]", f().text))), a;
             }
-          }), a), s(r, t($, {
+          }), i), s(r, l(z, {
             get when() {
-              return J(() => !!e.showPageSize)() && e.pageSizes;
+              return O(() => !!e.showPageSize)() && e.pageSizes;
             },
             get children() {
-              var l = ee(), i = l.firstChild, c = i.nextSibling;
-              return c.addEventListener("change", (n) => e.onPageSizeChange?.(parseInt(n.target.value, 10))), s(c, t(E, {
+              var a = le(), o = a.firstChild, c = o.nextSibling;
+              return s(o, () => t.t("pageSize")), c.addEventListener("change", (n) => e.onPageSizeChange?.(parseInt(n.target.value, 10))), s(c, l(j, {
                 get each() {
                   return e.pageSizes;
                 },
                 children: (n) => (() => {
-                  var h = le();
-                  return h.value = n, s(h, n), h;
+                  var p = ie();
+                  return p.value = n, s(p, n), p;
                 })()
               })), g((n) => {
-                var h = f("text-[var(--floe-ink-soft)]", v().text), C = e.disabled, k = f("rounded-control border border-[var(--floe-line)] bg-background px-2 focus:outline-none", v().input, e.disabled && "opacity-50 cursor-not-allowed");
-                return h !== n.e && w(i, n.e = h), C !== n.t && (c.disabled = n.t = C), k !== n.a && w(c, n.a = k), n;
+                var p = m("text-[var(--floe-ink-soft)]", f().text), C = t.t("pageSize"), _ = e.disabled, $ = m("rounded-control border border-[var(--floe-line)] bg-background px-2 focus:outline-none", f().input, e.disabled && "opacity-50 cursor-not-allowed");
+                return p !== n.e && k(o, n.e = p), C !== n.t && v(c, "aria-label", n.t = C), _ !== n.a && (c.disabled = n.a = _), $ !== n.o && k(c, n.o = $), n;
               }, {
                 e: void 0,
                 t: void 0,
-                a: void 0
-              }), g(() => c.value = e.pageSize), l;
+                a: void 0,
+                o: void 0
+              }), g(() => c.value = e.pageSize), a;
             }
-          }), a), s(a, t($, {
+          }), i), s(i, l(z, {
             get when() {
               return e.showFirstLast;
             },
             get children() {
-              return t(p, {
+              return l(b, {
                 get disabled() {
-                  return !L();
+                  return !w();
+                },
+                onClick: () => d(1),
+                get title() {
+                  return t.t("firstPage");
                 },
-                onClick: () => o(1),
-                title: "First page",
                 get children() {
-                  return t(T, {
-                    class: "w-4 h-4"
+                  return l(D, {
+                    class: "w-4 h-4 rtl:rotate-180"
                   });
                 }
               });
             }
-          }), null), s(a, t(p, {
+          }), null), s(i, l(b, {
             get disabled() {
-              return !L();
+              return !w();
+            },
+            onClick: () => d(e.page - 1),
+            get title() {
+              return t.t("previousPage");
             },
-            onClick: () => o(e.page - 1),
-            title: "Previous page",
             get children() {
-              return t(A, {
-                class: "w-4 h-4"
+              return l(R, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), null), s(a, t(E, {
+          }), null), s(i, l(j, {
             get each() {
-              return z();
+              return N();
             },
-            children: (l) => l === "ellipsis" ? (() => {
-              var i = ne();
-              return s(i, t(ie, {
-                class: "w-4 h-4"
-              })), g(() => w(i, f("px-2 text-[var(--floe-ink-soft)]", v().text))), i;
-            })() : t(p, {
-              page: l,
+            children: (a) => a === "ellipsis" ? (() => {
+              var o = J();
+              return s(o, l(se, {
+                class: "w-4 h-4 rtl:rotate-180"
+              })), g(() => k(o, m("px-2 text-[var(--floe-ink-soft)]", f().text))), o;
+            })() : l(b, {
+              page: a,
               get isActive() {
-                return l === e.page;
+                return a === e.page;
               },
-              onClick: () => o(l),
-              children: l
+              onClick: () => d(a),
+              children: a
             })
-          }), null), s(a, t(p, {
+          }), null), s(i, l(b, {
             get disabled() {
-              return !b();
+              return !x();
+            },
+            onClick: () => d(e.page + 1),
+            get title() {
+              return t.t("nextPage");
             },
-            onClick: () => o(e.page + 1),
-            title: "Next page",
             get children() {
-              return t(R, {
-                class: "w-4 h-4"
+              return l(F, {
+                class: "w-4 h-4 rtl:rotate-180"
               });
             }
-          }), null), s(a, t($, {
+          }), null), s(i, l(z, {
             get when() {
               return e.showFirstLast;
             },
             get children() {
-              return t(p, {
+              return l(b, {
                 get disabled() {
-                  return !b();
+                  return !x();
+                },
+                onClick: () => d(e.totalPages),
+                get title() {
+                  return t.t("lastPage");
                 },
-                onClick: () => o(e.totalPages),
-                title: "Last page",
                 get children() {
-                  return t(G, {
-                    class: "w-4 h-4"
+                  return l(G, {
+                    class: "w-4 h-4 rtl:rotate-180"
                   });
                 }
               });
             }
-          }), null), s(r, t($, {
+          }), null), s(r, l(z, {
             get when() {
               return e.showJumpTo;
             },
             get children() {
-              var l = te(), i = l.firstChild, c = i.nextSibling;
-              return c.addEventListener("blur", S), c.$$keydown = (n) => n.key === "Enter" && S(n), g((n) => {
-                var h = f("text-[var(--floe-ink-soft)]", v().text), C = e.totalPages, k = String(e.page), F = e.disabled, B = f("rounded-control border border-[var(--floe-line)] bg-background px-2 text-center", "focus:outline-none", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", v().input, e.disabled && "opacity-50 cursor-not-allowed");
-                return h !== n.e && w(i, n.e = h), C !== n.t && m(c, "max", n.t = C), k !== n.a && m(c, "placeholder", n.a = k), F !== n.o && (c.disabled = n.o = F), B !== n.i && w(c, n.i = B), n;
+              var a = ne(), o = a.firstChild, c = o.nextSibling;
+              return s(o, () => t.t("jumpTo")), c.addEventListener("blur", B), c.$$keydown = (n) => n.key === "Enter" && B(n), g((n) => {
+                var p = m("text-[var(--floe-ink-soft)]", f().text), C = t.t("jumpTo"), _ = e.totalPages, $ = String(e.page), E = e.disabled, T = m("rounded-control border border-[var(--floe-line)] bg-background px-2 text-center", "focus:outline-none", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", f().input, e.disabled && "opacity-50 cursor-not-allowed");
+                return p !== n.e && k(o, n.e = p), C !== n.t && v(c, "aria-label", n.t = C), _ !== n.a && v(c, "max", n.a = _), $ !== n.o && v(c, "placeholder", n.o = $), E !== n.i && (c.disabled = n.i = E), T !== n.n && k(c, n.n = T), n;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0,
                 o: void 0,
-                i: void 0
-              }), l;
+                i: void 0,
+                n: void 0
+              }), a;
             }
           }), null), r;
         }
@@ -333,7 +382,7 @@ function ue(d) {
     }
   });
 }
-D(["click", "keydown"]);
+q(["click", "keydown"]);
 export {
-  ue as Pagination
+  he as Pagination
 };

package/dist/components/ui/Popover.d.ts

@@ -1,8 +1,13 @@
 import { type JSX } from 'solid-js';
 export type PopoverPlacement = 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-start' | 'top-center' | 'top-end';
+export interface PopoverTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+}
 export interface PopoverProps {
     /** The element that opens the panel. It keeps its own layout and semantics. */
-    trigger: JSX.Element;
+    trigger: JSX.Element | ((props: PopoverTriggerProps) => JSX.Element);
     children: JSX.Element | ((close: () => void) => JSX.Element);
     /** Controlled visibility. Omit for uncontrolled use with `defaultOpen`. */
     open?: boolean;