@robuust-digital/vue-components 2.4.0-beta.9 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 2.4.1 (13-04-2026)
+
+### Fixed
+
+* `Pagination`: Do not apply hover background styles to active pagination buttons
+
+## 2.4.0 (10-04-2026)
+
+### Added
+
+* `Pagination`: Added `prevIcon` and `nextIcon` props to customize previous/next navigation icons
+* `Pagination`: Added `prevIcon` and `nextIcon` slots for full control over previous/next navigation icon rendering
+* `Pagination`: Added `--rvc-pagination-border-color` CSS variable for pagination button border customization
+* `DataTable`: Added striped row token hooks (`--rvc-table-striped-cell-border-color`, `--rvc-table-striped-cell-border-style`, `--rvc-table-striped-cell-border-width`, `--rvc-table-striped-row-bg-color-hover`)
+* `Pagination`: Added token hooks for active state and navigation layout (`--rvc-pagination-bg-color-active`, `--rvc-pagination-nav-gap-md`, `--rvc-pagination-nav-gap-xl`, `--rvc-pagination-icon-color`)
+* `Tabs`: Added button variant border token hooks (`--rvc-tabs-tab-button-border-width`, `--rvc-tabs-tab-button-border-style`, `--rvc-tabs-tab-button-border-color`, `--rvc-tabs-tab-button-border-color-active`)
+* `Badge`: Added border token hooks (`--rvc-badge-border-width`, `--rvc-badge-border-style`, `--rvc-badge-border-color`)
+* `EmptyState`: Added border token hooks (`--rvc-empty-state-border-width`, `--rvc-empty-state-border-style`, `--rvc-empty-state-border-color`)
+* `DataTable`: Added support for forwarding `prevIcon` and `nextIcon` props to the built-in `Pagination` component
+
+### Updated
+
+* `Pagination` and `DataTable` documentation: Added examples and prop documentation for custom pagination navigation icons
+* Updated `DataTable`, `Pagination`, `Tabs`, `Badge`, and `EmptyState` docs with new CSS variables
+
+## 2.3.5 (09-04-2026)
+
+### Added
+
+* `DataTable`: Added `--rvc-table-head-color` CSS variable to customize header text color
+
+### Changed
+
+* `DataTable`: Increased sort icon hover hint visibility by changing `.rvc-table-sort-icon-invisible` opacity from `0.3` to `0.5`
+
+## 2.3.4 (25-03-2026)
+
+### Fixed
+
+* `DataTable`: Forward built-in pagination props (`perPage`, `perPageLabel`, `perPageOptions`, `fromLabel`) to the `Pagination` component
+* `Pagination`: Keep the per-page select in sync when `perPage` is updated externally
+
 ## 2.3.3 (23-01-2026)
 
 ### Updated

package/dist/_shared/{Tabs.vue_vue_type_script_setup_true_lang-KdVe2QbW.js → Tabs.vue_vue_type_script_setup_true_lang-B0RIqYLz.js}

@@ -1,6 +1,6 @@
-import { openBlock as l, createElementBlock as n, createElementVNode as u, defineComponent as w, Fragment as k, renderList as V, renderSlot as c, createTextVNode as M, toDisplayString as g, createVNode as L, unref as h, normalizeClass as y, createBlock as C, resolveDynamicComponent as P, withCtx as T, createCommentVNode as $, computed as B, useAttrs as O, ref as x, withDirectives as A, mergeProps as p, vModelDynamic as N, normalizeProps as F, guardReactiveProps as E, vModelSelect as H, vModelText as D } from "vue";
+import { openBlock as l, createElementBlock as n, createElementVNode as u, defineComponent as w, Fragment as k, renderList as V, renderSlot as c, createTextVNode as x, toDisplayString as g, createVNode as I, unref as h, normalizeClass as p, createBlock as C, resolveDynamicComponent as P, withCtx as O, createCommentVNode as $, computed as B, useAttrs as A, ref as S, withDirectives as M, mergeProps as y, vModelDynamic as F, normalizeProps as j, guardReactiveProps as E, vModelSelect as H, vModelText as D } from "vue";
 import { r as R } from "./XMarkIcon-CPr_Rd8y.js";
-import { u as I } from "./FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";
+import { u as T } from "./FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";
 import { S as U } from "./icon-spinner-BYCMrTdL.js";
 import { r as Z } from "./ChevronDownIcon-BYWciGnh.js";
 function K(e, r) {
@@ -33,7 +33,7 @@ function q(e, r) {
     })
   ]);
 }
-const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], Ae = /* @__PURE__ */ w({
+const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], Me = /* @__PURE__ */ w({
   __name: "Accordion",
   props: {
     items: {},
@@ -42,39 +42,39 @@ const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], A
     contentClass: {}
   },
   setup(e) {
-    return (r, d) => (l(), n("div", G, [
-      (l(!0), n(k, null, V(e.items, (v, s) => (l(), n("details", {
+    return (r, v) => (l(), n("div", G, [
+      (l(!0), n(k, null, V(e.items, (f, s) => (l(), n("details", {
         key: s,
         open: e.defaultOpenIndex === s,
         name: e.name
       }, [
         u("summary", null, [
           c(r.$slots, "summary", {
-            item: v,
+            item: f,
             index: s
           }, () => [
-            M(g(v.title) + " ", 1),
+            x(g(f.title) + " ", 1),
             c(r.$slots, "icon", { classList: "rvc-accordion-icon" }, () => [
-              L(h(q), { class: "rvc-accordion-icon" })
+              I(h(q), { class: "rvc-accordion-icon" })
             ])
           ])
         ]),
         u("div", {
-          class: y(["rvc-accordion-content", e.contentClass])
+          class: p(["rvc-accordion-content", e.contentClass])
         }, [
           c(r.$slots, "content", {
-            item: v,
+            item: f,
             index: s
           }, () => [
             u("div", {
-              innerHTML: v.content
+              innerHTML: f.content
             }, null, 8, Q)
           ])
         ], 2)
       ], 8, J))), 128))
     ]));
   }
-}), W = { class: "rvc-alert-title" }, Ie = /* @__PURE__ */ w({
+}), W = { class: "rvc-alert-title" }, Te = /* @__PURE__ */ w({
   __name: "Alert",
   props: {
     as: { default: "div" },
@@ -85,10 +85,10 @@ const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], A
   },
   emits: ["alert:close"],
   setup(e) {
-    return (r, d) => (l(), C(P(e.as), {
-      class: y(["rvc-alert", `rvc-alert-${e.type}`])
+    return (r, v) => (l(), C(P(e.as), {
+      class: p(["rvc-alert", `rvc-alert-${e.type}`])
     }, {
-      default: T(() => [
+      default: O(() => [
         c(r.$slots, "icon", {}, () => [
           e.icon ? (l(), C(P(e.icon), {
             key: 0,
@@ -106,9 +106,9 @@ const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], A
             key: 0,
             type: "button",
             class: "rvc-alert-close",
-            onClick: d[0] || (d[0] = (v) => r.$emit("alert:close"))
+            onClick: v[0] || (v[0] = (f) => r.$emit("alert:close"))
           }, [
-            L(h(R))
+            I(h(R))
           ])) : $("", !0)
         ])
       ]),
@@ -118,7 +118,7 @@ const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], A
 }), X = { class: "rvc-checkbox-input" }, Y = {
   key: 0,
   class: "rvc-checkbox-label"
-}, Oe = /* @__PURE__ */ w({
+}, Ae = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
@@ -128,29 +128,29 @@ const G = { class: "rvc-accordion" }, J = ["open", "name"], Q = ["innerHTML"], A
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = B({
-      get: () => d.modelValue,
-      set: (t) => v("update:modelValue", t)
-    }), { hasModelBinding: f } = I(), m = O(), a = B(() => ({
+    const v = e, f = r, s = B({
+      get: () => v.modelValue,
+      set: (t) => f("update:modelValue", t)
+    }), { hasModelBinding: d } = T(), m = A(), a = B(() => ({
       ...m,
       type: "checkbox"
-    })), o = x(null);
+    })), o = S(null);
     return (t, i) => (l(), n("label", {
-      class: y(["rvc-checkbox", e.rootClass])
+      class: p(["rvc-checkbox", e.rootClass])
     }, [
       u("div", X, [
-        h(f) ? A((l(), n("input", p({ key: 0 }, a.value, {
+        h(d) ? M((l(), n("input", y({ key: 0 }, a.value, {
           ref_key: "input",
           ref: o,
           "onUpdate:modelValue": i[0] || (i[0] = (b) => s.value = b)
         }), null, 16)), [
-          [N, s.value]
-        ]) : (l(), n("input", p({ key: 1 }, a.value, {
+          [F, s.value]
+        ]) : (l(), n("input", y({ key: 1 }, a.value, {
           ref_key: "input",
           ref: o
         }), null, 16)),
         c(t.$slots, "icon", {}, () => [
-          L(h(K))
+          I(h(K))
         ])
       ]),
       c(t.$slots, "default", { label: e.label }, () => [
@@ -204,7 +204,7 @@ function te(e, r) {
     })
   ]);
 }
-const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
+const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "FormSelect",
   props: {
@@ -219,12 +219,12 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = B({
-      get: () => d.modelValue,
-      set: (a) => v("update:modelValue", a)
-    }), { hasModelBinding: f } = I(), m = x(null);
+    const v = e, f = r, s = B({
+      get: () => v.modelValue,
+      set: (a) => f("update:modelValue", a)
+    }), { hasModelBinding: d } = T(), m = S(null);
     return (a, o) => (l(), n("div", {
-      class: y([
+      class: p([
         "rvc-select",
         `rvc-select-${e.size}`,
         e.rootClass
@@ -236,8 +236,8 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
       }, () => [
         (l(), C(P(e.prefixIcon), { "aria-hidden": "true" }))
       ]) : $("", !0),
-      c(a.$slots, "select", F(E(a.$attrs)), () => [
-        h(f) ? A((l(), n("select", p({ key: 0 }, a.$attrs, {
+      c(a.$slots, "select", j(E(a.$attrs)), () => [
+        h(d) ? M((l(), n("select", y({ key: 0 }, a.$attrs, {
           ref_key: "select",
           ref: m,
           "onUpdate:modelValue": o[0] || (o[0] = (t) => s.value = t)
@@ -250,7 +250,7 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
           ])
         ], 16)), [
           [H, s.value]
-        ]) : (l(), n("select", p({ key: 1 }, a.$attrs, {
+        ]) : (l(), n("select", y({ key: 1 }, a.$attrs, {
           ref_key: "select",
           ref: m
         }), [
@@ -270,40 +270,42 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
 }), ne = {
   key: 0,
   class: "rvc-pagination"
-}, se = ["value"], oe = { class: "rvc-pagination-info" }, ie = { class: "rvc-pagination-nav-list" }, re = ["disabled", "onClick"], ce = { key: 2 }, ue = { key: 3 }, de = /* @__PURE__ */ w({
+}, oe = ["value"], se = { class: "rvc-pagination-info" }, ie = { class: "rvc-pagination-nav-list" }, re = ["disabled", "onClick"], ce = { key: 2 }, ue = { key: 3 }, de = /* @__PURE__ */ w({
   __name: "Pagination",
   props: {
     pagination: {},
     perPage: { default: 10 },
     perPageLabel: { default: "per page" },
     perPageOptions: { default: () => [10, 20, 50] },
-    fromLabel: { default: "of" }
+    fromLabel: { default: "of" },
+    prevIcon: { type: [Function, Object, null], default: null },
+    nextIcon: { type: [Function, Object, null], default: null }
   },
   emits: ["pagination:change", "pagination:perPage"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = x(d.perPage);
-    return (f, m) => e.pagination?.total ? (l(), n("div", ne, [
-      c(f.$slots, "perPage", p(e.pagination, { perPage: s.value }), () => [
-        L(j, {
+    const v = e, f = r, s = B({
+      get: () => v.perPage,
+      set: (d) => f("pagination:perPage", Number(d))
+    });
+    return (d, m) => e.pagination?.total ? (l(), n("div", ne, [
+      c(d.$slots, "perPage", y(e.pagination, { perPage: s.value }), () => [
+        I(N, {
           modelValue: s.value,
-          "onUpdate:modelValue": [
-            m[0] || (m[0] = (a) => s.value = a),
-            m[1] || (m[1] = (a) => v("pagination:perPage", Number(a)))
-          ],
+          "onUpdate:modelValue": m[0] || (m[0] = (a) => s.value = a),
           size: "sm",
           "root-class": "rvc-pagination-per-page"
         }, {
-          default: T(() => [
+          default: O(() => [
             (l(!0), n(k, null, V(e.perPageOptions, (a) => (l(), n("option", {
               key: `pagination-items-per-page-option-${a}`,
               value: a
-            }, g(a) + " " + g(e.perPageLabel), 9, se))), 128))
+            }, g(a) + " " + g(e.perPageLabel), 9, oe))), 128))
           ]),
           _: 1
         }, 8, ["modelValue"])
       ]),
-      c(f.$slots, "info", p(e.pagination, { fromLabel: e.fromLabel }), () => [
-        u("div", oe, g(e.pagination.from) + " - " + g(e.pagination.to) + " " + g(e.fromLabel) + " " + g(e.pagination.total), 1)
+      c(d.$slots, "info", y(e.pagination, { fromLabel: e.fromLabel }), () => [
+        u("div", se, g(e.pagination.from) + " - " + g(e.pagination.to) + " " + g(e.fromLabel) + " " + g(e.pagination.total), 1)
       ]),
       u("nav", null, [
         u("ol", ie, [
@@ -314,34 +316,46 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
             u("button", {
               type: "button",
               disabled: a.label === "..." || !a.url,
-              class: y([
+              class: p([
                 "rvc-pagination-button",
                 { "rvc-pagination-button-active": a.active }
               ]),
-              onClick: (t) => a.url && v("pagination:change", a.url)
+              onClick: (t) => a.url && f("pagination:change", a.url)
             }, [
-              a.url !== "..." && o === 0 ? (l(), C(h(ee), {
+              a.url !== "..." && o === 0 ? c(d.$slots, "prevIcon", {
                 key: 0,
-                "aria-hidden": "true",
-                class: y([
-                  "rvc-pagination-button-icon",
-                  { "rvc-pagination-button-icon-disabled": !a.url }
-                ])
-              }, null, 8, ["class"])) : a.label !== "..." && o === e.pagination.links.length - 1 ? (l(), C(h(te), {
+                icon: e.prevIcon,
+                link: a,
+                index: o
+              }, () => [
+                (l(), C(P(e.prevIcon || h(ee)), {
+                  "aria-hidden": "true",
+                  class: p([
+                    "rvc-pagination-button-icon",
+                    { "rvc-pagination-button-icon-disabled": !a.url }
+                  ])
+                }, null, 8, ["class"]))
+              ]) : a.label !== "..." && o === e.pagination.links.length - 1 ? c(d.$slots, "nextIcon", {
                 key: 1,
-                "aria-hidden": "true",
-                class: y([
-                  "rvc-pagination-button-icon",
-                  { "rvc-pagination-button-icon-disabled": !a.url }
-                ])
-              }, null, 8, ["class"])) : a.label === "..." ? (l(), n("span", ce, " ... ")) : (l(), n("span", ue, g(a.label), 1))
+                icon: e.nextIcon,
+                link: a,
+                index: o
+              }, () => [
+                (l(), C(P(e.nextIcon || h(te)), {
+                  "aria-hidden": "true",
+                  class: p([
+                    "rvc-pagination-button-icon",
+                    { "rvc-pagination-button-icon-disabled": !a.url }
+                  ])
+                }, null, 8, ["class"]))
+              ]) : a.label === "..." ? (l(), n("span", ce, " ... ")) : (l(), n("span", ue, g(a.label), 1))
             ], 10, re)
           ]))), 128))
         ])
       ])
     ])) : $("", !0);
   }
-}), ve = { key: 0 }, fe = ["aria-label", "onClick"], ge = ["innerHTML"], me = { key: 1 }, be = ["colspan"], ye = { key: 2 }, pe = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, he = { key: 1 }, Ne = /* @__PURE__ */ w({
+}), ve = { key: 0 }, fe = ["aria-label", "onClick"], ge = ["innerHTML"], be = { key: 1 }, me = ["colspan"], pe = { key: 2 }, ye = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, he = { key: 1 }, Fe = /* @__PURE__ */ w({
   __name: "DataTable",
   props: {
     headers: { default: () => [] },
@@ -351,26 +365,32 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
     striped: { type: Boolean, default: !1 },
     spinning: { type: Boolean, default: !1 },
     pagination: { default: null },
+    perPage: { default: 10 },
+    perPageLabel: { default: "per page" },
+    perPageOptions: { default: () => [10, 20, 50] },
+    fromLabel: { default: "of" },
+    prevIcon: { type: [Function, Object, null], default: null },
+    nextIcon: { type: [Function, Object, null], default: null },
     wrapperClass: { default: "" },
     defaultSort: { default: null }
   },
   emits: ["table:sortBy", "pagination:change", "pagination:perPage"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = x(d.defaultSort), f = (a) => d.headers.find((o) => o.key === a), m = (a) => {
+    const v = e, f = r, s = S(v.defaultSort), d = (a) => v.headers.find((o) => o.key === a), m = (a) => {
       a.key && (!s.value || s.value.key !== a.key ? s.value = {
         key: a.key,
         direction: "asc"
       } : s.value.direction === "asc" ? s.value = {
         key: a.key,
         direction: "desc"
-      } : s.value = null, v("table:sortBy", s.value));
+      } : s.value = null, f("table:sortBy", s.value));
     };
     return (a, o) => (l(), n("div", null, [
       u("div", {
-        class: y(["rvc-table-wrapper", e.wrapperClass])
+        class: p(["rvc-table-wrapper", e.wrapperClass])
       }, [
         u("table", {
-          class: y([{ "rvc-table-striped": e.striped }, "rvc-table"])
+          class: p([{ "rvc-table-striped": e.striped }, "rvc-table"])
         }, [
           e.headers.length ? (l(), n("thead", ve, [
             c(a.$slots, "headers", { headers: e.headers }, () => [
@@ -379,7 +399,7 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                   header: t,
                   index: i
                 }, () => [
-                  (l(), n("th", p({ ref_for: !0 }, { ...t, id: String(t.id) }, {
+                  (l(), n("th", y({ ref_for: !0 }, { ...t, id: String(t.id) }, {
                     key: `rvc-table-header-${t.id}`,
                     class: {
                       "rvc-table-text-left": t.align === "left" || !t.align,
@@ -391,7 +411,7 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                       key: 0,
                       type: "button",
                       "aria-label": `Sort on ${t.label}`,
-                      class: y([
+                      class: p([
                         "rvc-table-sort-button",
                         {
                           "rvc-table-sort-button-center": t.align === "center",
@@ -404,10 +424,10 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                         sortBy: s.value,
                         header: t
                       }, () => [
-                        M(g(t.label), 1)
+                        x(g(t.label), 1)
                       ]),
-                      L(h(_), {
-                        class: y([
+                      I(h(_), {
+                        class: p([
                           "rvc-table-sort-icon",
                           {
                             "rvc-table-sort-icon-visible": s.value?.key === t.key,
@@ -421,7 +441,7 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                       sortBy: s.value,
                       header: t
                     }, () => [
-                      M(g(t.label), 1)
+                      x(g(t.label), 1)
                     ])
                   ], 16))
                 ])), 256))
@@ -440,26 +460,26 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                   item: t,
                   index: i
                 }, () => [
-                  (l(!0), n(k, null, V(t, (b, S) => (l(), n("td", p({
-                    key: `rvc-table-row-${i}-column-${S}-${t.id}`
+                  (l(!0), n(k, null, V(t, (b, L) => (l(), n("td", y({
+                    key: `rvc-table-row-${i}-column-${L}-${t.id}`
                   }, { ref_for: !0 }, t.attrs, {
                     class: {
-                      "rvc-table-text-left": f(String(S))?.align === "left" || !f(String(S))?.align,
-                      "rvc-table-text-center": f(String(S))?.align === "center",
-                      "rvc-table-text-right": f(String(S))?.align === "right"
+                      "rvc-table-text-left": d(String(L))?.align === "left" || !d(String(L))?.align,
+                      "rvc-table-text-center": d(String(L))?.align === "center",
+                      "rvc-table-text-right": d(String(L))?.align === "right"
                     },
                     innerHTML: b
                   }), null, 16, ge))), 128))
                 ])
               ]))
-            ])), 256)) : !e.items.length && !e.spinning ? (l(), n("tr", me, [
+            ])), 256)) : !e.items.length && !e.spinning ? (l(), n("tr", be, [
               u("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
               }, [
                 u("p", null, g(e.noResultsText), 1)
-              ], 8, be)
-            ])) : (l(), n("tr", ye, [
+              ], 8, me)
+            ])) : (l(), n("tr", pe, [
               u("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
@@ -474,10 +494,10 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
                       "aria-hidden": "true",
                       class: "rvc-table-spinner"
                     })) : $("", !0),
-                    M(" " + g(e.loadingText), 1)
+                    x(" " + g(e.loadingText), 1)
                   ])
                 ])
-              ], 8, pe)
+              ], 8, ye)
             ]))
           ]),
           a.$slots.footer ? (l(), n("tfoot", he, [
@@ -488,19 +508,25 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
           ])) : $("", !0)
         ], 2)
       ], 2),
-      e.pagination ? c(a.$slots, "pagination", F(p({ key: 0 }, e.pagination)), () => [
-        L(de, {
+      e.pagination ? c(a.$slots, "pagination", j(y({ key: 0 }, e.pagination)), () => [
+        I(de, {
           pagination: e.pagination,
-          "onPagination:change": o[0] || (o[0] = (t) => v("pagination:change", t)),
-          "onPagination:perPage": o[1] || (o[1] = (t) => v("pagination:perPage", t))
-        }, null, 8, ["pagination"])
+          "per-page": e.perPage,
+          "per-page-label": e.perPageLabel,
+          "per-page-options": e.perPageOptions,
+          "from-label": e.fromLabel,
+          "prev-icon": e.prevIcon,
+          "next-icon": e.nextIcon,
+          "onPagination:change": o[0] || (o[0] = (t) => f("pagination:change", t)),
+          "onPagination:perPage": o[1] || (o[1] = (t) => f("pagination:perPage", t))
+        }, null, 8, ["pagination", "per-page", "per-page-label", "per-page-options", "from-label", "prev-icon", "next-icon"])
       ]) : $("", !0)
     ]));
   }
 }), ke = {
   key: 1,
   class: "rvc-empty-state-title"
-}, Fe = /* @__PURE__ */ w({
+}, je = /* @__PURE__ */ w({
   __name: "EmptyState",
   props: {
     title: {},
@@ -508,8 +534,8 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
     icon: { type: [Function, Object, null] }
   },
   setup(e) {
-    return (r, d) => (l(), n("div", {
-      class: y(["rvc-empty-state", { "rvc-empty-state-bg": e.background }])
+    return (r, v) => (l(), n("div", {
+      class: p(["rvc-empty-state", { "rvc-empty-state-bg": e.background }])
     }, [
       e.icon ? (l(), C(P(e.icon), {
         key: 0,
@@ -519,7 +545,7 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
       c(r.$slots, "default")
     ], 2));
   }
-}), je = /* @__PURE__ */ w({
+}), Ne = /* @__PURE__ */ w({
   __name: "FormTextarea",
   props: {
     modelValue: { default: void 0 },
@@ -527,26 +553,26 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const d = e, v = r, { hasModelBinding: s } = I(), f = x(null), m = B({
-      get: () => d.modelValue,
-      set: (o) => v("update:modelValue", o)
+    const v = e, f = r, { hasModelBinding: s } = T(), d = S(null), m = B({
+      get: () => v.modelValue,
+      set: (o) => f("update:modelValue", o)
     }), a = B(() => [
       "rvc-textarea",
-      `rvc-textarea-${d.size}`
+      `rvc-textarea-${v.size}`
     ]);
-    return (o, t) => h(s) ? A((l(), n("textarea", {
+    return (o, t) => h(s) ? M((l(), n("textarea", {
       key: 0,
       ref_key: "textarea",
-      ref: f,
+      ref: d,
       "onUpdate:modelValue": t[0] || (t[0] = (i) => m.value = i),
-      class: y(a.value)
+      class: p(a.value)
     }, null, 2)), [
       [D, m.value]
     ]) : (l(), n("textarea", {
       key: 1,
       ref_key: "textarea",
-      ref: f,
-      class: y(a.value)
+      ref: d,
+      class: p(a.value)
     }, null, 2));
   }
 }), Ve = { class: "rvc-radio-input" }, we = { class: "rvc-radio-label" }, ze = /* @__PURE__ */ w({
@@ -559,24 +585,24 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = B({
-      get: () => d.modelValue,
-      set: (t) => v("update:modelValue", t)
-    }), { hasModelBinding: f } = I(), m = O(), a = B(() => ({
+    const v = e, f = r, s = B({
+      get: () => v.modelValue,
+      set: (t) => f("update:modelValue", t)
+    }), { hasModelBinding: d } = T(), m = A(), a = B(() => ({
       ...m,
       type: "radio"
-    })), o = x(null);
+    })), o = S(null);
     return (t, i) => (l(), n("label", {
-      class: y(["rvc-radio", e.rootClass])
+      class: p(["rvc-radio", e.rootClass])
     }, [
       u("div", Ve, [
-        h(f) ? A((l(), n("input", p({ key: 0 }, a.value, {
+        h(d) ? M((l(), n("input", y({ key: 0 }, a.value, {
           ref_key: "input",
           ref: o,
           "onUpdate:modelValue": i[0] || (i[0] = (b) => s.value = b)
         }), null, 16)), [
-          [N, s.value]
-        ]) : (l(), n("input", p({ key: 1 }, a.value, {
+          [F, s.value]
+        ]) : (l(), n("input", y({ key: 1 }, a.value, {
           ref_key: "input",
           ref: o
         }), null, 16))
@@ -596,59 +622,59 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
   },
   emits: ["update:modelValue", "tabs:change"],
   setup(e, { emit: r }) {
-    const d = e, v = r, s = () => {
-      const o = d.tabs.findIndex((t) => t.active);
+    const v = e, f = r, s = () => {
+      const o = v.tabs.findIndex((t) => t.active);
       return o >= 0 ? o : 0;
-    }, f = B({
-      get: () => d.modelValue ?? s(),
+    }, d = B({
+      get: () => v.modelValue ?? s(),
       set: (o) => {
-        const t = d.tabs[o];
-        v("update:modelValue", o), t && v("tabs:change", t);
+        const t = v.tabs[o];
+        f("update:modelValue", o), t && f("tabs:change", t);
       }
     }), m = (o) => {
       const i = +o.target.value;
-      f.value = i;
-      const b = d.tabs[i];
+      d.value = i;
+      const b = v.tabs[i];
       b?.selectEvent && b.selectEvent();
     }, a = (o) => {
       const {
         active: t,
         as: i,
         bindAs: b,
-        selectEvent: S,
-        name: Se,
+        selectEvent: L,
+        name: Pe,
         ...z
       } = o;
       return z;
     };
     return (o, t) => (l(), n(k, null, [
-      u("div", p(o.$attrs, {
+      u("div", y(o.$attrs, {
         class: ["rvc-tabs", { "rvc-tabs-buttons": e.tabStyle === "buttons" }]
       }), [
         u("nav", Ce, [
-          (l(!0), n(k, null, V(e.tabs, (i, b) => (l(), C(P(i.as ? i.as : "button"), p({ ref_for: !0 }, a(i), {
+          (l(!0), n(k, null, V(e.tabs, (i, b) => (l(), C(P(i.as ? i.as : "button"), y({ ref_for: !0 }, a(i), {
             key: `${b}-tab-item`,
             as: i.bindAs ? i.bindAs : void 0,
-            class: ["rvc-tab", { "rvc-tab-active": f.value === b }],
-            onClick: (S) => f.value = b
+            class: ["rvc-tab", { "rvc-tab-active": d.value === b }],
+            onClick: (L) => d.value = b
           }), {
-            default: T(() => [
-              M(g(i.name), 1)
+            default: O(() => [
+              x(g(i.name), 1)
             ]),
             _: 2
           }, 1040, ["as", "class", "onClick"]))), 128))
         ])
       ], 16),
-      L(j, p(o.$attrs, {
+      I(N, y(o.$attrs, {
         "root-class": "rvc-tabs-select",
-        value: f.value,
+        value: d.value,
         onChange: m
       }), {
-        default: T(() => [
+        default: O(() => [
           (l(!0), n(k, null, V(e.tabs, (i, b) => (l(), n("option", {
             key: `${b}-tab-item-select-option`,
             value: b,
-            selected: f.value === b
+            selected: d.value === b
           }, g(i.name), 9, Be))), 128))
         ]),
         _: 1
@@ -657,13 +683,13 @@ const ae = ["value"], le = ["value"], j = /* @__PURE__ */ w({
   }
 });
 export {
-  Ae as _,
-  Ie as a,
-  Oe as b,
-  Ne as c,
-  Fe as d,
-  j as e,
-  je as f,
+  Me as _,
+  Te as a,
+  Ae as b,
+  Fe as c,
+  je as d,
+  N as e,
+  Ne as f,
   de as g,
   ze as h,
   Ee as i

package/dist/core/badge.css

@@ -5,6 +5,9 @@
   --rvc-badge-padding-y: calc(var(--spacing) * 1.5);
   --rvc-badge-font-weight: var(--font-weight-medium);
   --rvc-badge-border-radius: calc(infinity * 1px);
+  --rvc-badge-border-width: 0;
+  --rvc-badge-border-style: solid;
+  --rvc-badge-border-color: transparent;
   --rvc-badge-font-size: var(--text-base);
   --rvc-badge-gap: calc(var(--spacing) * 1);
 
@@ -61,6 +64,7 @@
     height: var(--rvc-badge-height);
     padding-block: var(--rvc-badge-padding-y);
     padding-inline: var(--rvc-badge-padding-x);
+    border: var(--rvc-badge-border-width) var(--rvc-badge-border-style) var(--rvc-badge-border-color);
     border-radius: var(--rvc-badge-border-radius);
     background-color: var(--rvc-badge-bg-color);
     color: var(--rvc-badge-color);

package/dist/core/empty-state.css

@@ -1,5 +1,8 @@
 :root {
   --rvc-empty-state-border-radius: var(--rvc-base-border-radius);
+  --rvc-empty-state-border-width: 0;
+  --rvc-empty-state-border-style: solid;
+  --rvc-empty-state-border-color: transparent;
   --rvc-empty-state-color: var(--color-slate-700);
   --rvc-empty-state-bg-color: var(--color-slate-50);
   --rvc-empty-state-padding-x: calc(var(--spacing) * 12);
@@ -15,6 +18,7 @@
 
 @layer components {
   .rvc-empty-state {
+    border: var(--rvc-empty-state-border-width) var(--rvc-empty-state-border-style) var(--rvc-empty-state-border-color);
     color: var(--rvc-empty-state-color);
     font-size: var(--rvc-empty-state-font-size);
 

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-KdVe2QbW.js";
+import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-B0RIqYLz.js";
 import { _ as b } from "../_shared/ChevronDownIcon-BYWciGnh.js";
 import { _ } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
 import { _ as l } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";

package/dist/core/pagination.css

@@ -9,9 +9,14 @@
   --rvc-pagination-color: var(--color-slate-600);
   --rvc-pagination-color-active: var(--color-slate-800);
   --rvc-pagination-bg-color: transparent;
+  --rvc-pagination-bg-color-active: var(--rvc-pagination-bg-color);
   --rvc-pagination-bg-color-hover: var(--color-slate-100);
+  --rvc-pagination-border-color: transparent;
+  --rvc-pagination-nav-gap-md: calc(var(--spacing) * 0.5);
+  --rvc-pagination-nav-gap-xl: calc(var(--spacing) * 1);
   --rvc-pagination-info-color: var(--color-slate-400);
   --rvc-pagination-info-font-size: var(--text-sm);
+  --rvc-pagination-icon-color: var(--color-slate-800);
 }
 
 @layer components {
@@ -36,6 +41,7 @@
       width: var(--rvc-pagination-size);
       height: var(--rvc-pagination-size);
       transition: color, background-color var(--rvc-pagination-transition-duration) var(--rvc-pagination-transition-timing-function);
+      border: 1px solid var(--rvc-pagination-border-color);
       border-radius: var(--rvc-pagination-border-radius);
       background-color: var(--rvc-pagination-bg-color);
       color: var(--rvc-pagination-color);
@@ -44,11 +50,12 @@
       text-align: center;
 
       &.rvc-pagination-button-active {
+        background-color: var(--rvc-pagination-bg-color-active);
         color: var(--rvc-pagination-color-active);
         font-weight: var(--rvc-pagination-font-weight-active);
       }
 
-      &:not([disabled]):hover {
+      &:not(.rvc-pagination-button-active, [disabled]):hover {
         background-color: var(--rvc-pagination-bg-color-hover);
       }
     }
@@ -70,11 +77,11 @@
       justify-content: flex-end;
 
       @media (width >= theme(--breakpoint-md)) {
-        gap: calc(var(--spacing) * 0.5);
+        gap: var(--rvc-pagination-nav-gap-md);
       }
 
       @media (width >= theme(--breakpoint-xl)) {
-        gap: calc(var(--spacing) * 1);
+        gap: var(--rvc-pagination-nav-gap-xl);
       }
     }
 
@@ -97,7 +104,7 @@
     .rvc-pagination-button-icon {
       width: calc(var(--spacing) * 5);
       height: calc(var(--spacing) * 5);
-      color: var(--color-slate-800);
+      color: var(--rvc-pagination-icon-color);
 
       &.rvc-pagination-button-icon-disabled {
         opacity: 0.5;

package/dist/core/table.css

@@ -5,6 +5,7 @@
   --rvc-table-border-style: var(--rvc-base-border-style);
   --rvc-table-border-width: var(--rvc-base-border-width);
   --rvc-table-head-bg-color: var(--color-slate-200);
+  --rvc-table-head-color: inherit;
   --rvc-table-bg-color: var(--color-slate-50);
   --rvc-table-font-size: var(--text-sm);
   --rvc-table-head-font-size: var(--text-sm);
@@ -15,6 +16,9 @@
   --rvc-table-white-space: nowrap;
   --rvc-table-line-height: 1.1;
   --rvc-table-spinner-size: calc(var(--spacing) * 5);
+  --rvc-table-striped-cell-border-color: transparent;
+  --rvc-table-striped-cell-border-style: solid;
+  --rvc-table-striped-cell-border-width: 0;
 }
 
 @layer components {
@@ -39,6 +43,11 @@
 
       td {
         padding-inline: var(--rvc-table-padding-x);
+        border-bottom: var(--rvc-table-striped-cell-border-width) var(--rvc-table-striped-cell-border-style) var(--rvc-table-striped-cell-border-color);
+      }
+
+      tr:hover td {
+        background-color: var(--rvc-table-striped-row-bg-color-hover);
       }
     }
 
@@ -62,6 +71,7 @@
 
     th {
       padding-block: var(--rvc-table-padding-y);
+      color: var(--rvc-table-head-color);
       font-size: var(--rvc-table-head-font-size);
       font-weight: var(--rvc-table-head-font-weight);
       line-height: var(--rvc-table-line-height);
@@ -92,13 +102,14 @@
       display: flex;
       width: 100%;
       column-gap: calc(var(--spacing) * 1.5);
+      color: inherit;
 
       &:hover {
         text-decoration: underline;
       }
 
       &:hover .rvc-table-sort-icon-invisible {
-        opacity: 0.3;
+        opacity: 0.5;
       }
     }
 

package/dist/core/tabs.css

@@ -16,6 +16,10 @@
   --rvc-tabs-tab-active-border-color: var(--color-indigo-600);
   --rvc-tabs-tab-button-height: calc(var(--spacing) * 9);
   --rvc-tabs-tab-button-padding-x: calc(var(--spacing) * 3);
+  --rvc-tabs-tab-button-border-width: 0;
+  --rvc-tabs-tab-button-border-style: solid;
+  --rvc-tabs-tab-button-border-color: transparent;
+  --rvc-tabs-tab-button-border-color-active: var(--rvc-tabs-tab-button-border-color);
   --rvc-tabs-tab-active-button-bg-color: var(--color-indigo-100);
 }
 
@@ -43,10 +47,12 @@
         height: var(--rvc-tabs-tab-button-height);
         padding-bottom: 0;
         padding-inline: var(--rvc-tabs-tab-button-padding-x);
+        border: var(--rvc-tabs-tab-button-border-width) var(--rvc-tabs-tab-button-border-style) var(--rvc-tabs-tab-button-border-color);
         border-bottom: 0;
         border-radius: var(--rvc-tabs-tab-button-border-radius);
 
         &.rvc-tab-active {
+          border-color: var(--rvc-tabs-tab-button-border-color-active);
           background-color: var(--rvc-tabs-tab-active-button-bg-color);
         }
       }

package/dist/core.d.ts

@@ -20,6 +20,8 @@ perPage: number;
 perPageLabel: string;
 perPageOptions: number[];
 fromLabel: string;
+prevIcon: Icon | null;
+nextIcon: Icon | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_11: DefineComponent<RadioProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -88,6 +90,12 @@ declare const __VLS_component_6: DefineComponent<DataTableProps, {}, {}, {}, {},
 }>, {
 spinning: boolean;
 pagination: DataTablePagination | null;
+perPage: number;
+perPageLabel: string;
+perPageOptions: number[];
+fromLabel: string;
+prevIcon: Icon | null;
+nextIcon: Icon | null;
 headers: DataTableHeader[];
 noResultsText: string;
 loadingText: string;
@@ -165,6 +173,16 @@ declare function __VLS_template_10(): {
             to: number;
             links: PaginationLink[];
         }): any;
+        prevIcon?(_: {
+            icon: Icon | null;
+            link: PaginationLink;
+            index: number;
+        }): any;
+        nextIcon?(_: {
+            icon: Icon | null;
+            link: PaginationLink;
+            index: number;
+        }): any;
     };
     refs: {};
     rootEl: any;
@@ -532,6 +550,12 @@ declare interface DataTableProps {
     striped?: boolean;
     spinning?: boolean;
     pagination?: DataTablePagination | null;
+    perPage?: number;
+    perPageLabel?: string;
+    perPageOptions?: number[];
+    fromLabel?: string;
+    prevIcon?: Icon | null;
+    nextIcon?: Icon | null;
     wrapperClass?: string;
     defaultSort?: DataTableSortBy | null;
 }
@@ -626,6 +650,8 @@ declare interface PaginationProps {
     perPageLabel?: string;
     perPageOptions?: number[];
     fromLabel?: string;
+    prevIcon?: Icon | null;
+    nextIcon?: Icon | null;
 }
 
 export declare const Radio: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;

package/dist/index/index.js

@@ -1,4 +1,4 @@
-import { _ as r, a as t, b as e, c as s, d as m, e as p, f as x, g as f, h as _, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-KdVe2QbW.js";
+import { _ as r, a as t, b as e, c as s, d as m, e as p, f as x, g as f, h as _, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-B0RIqYLz.js";
 import { _ as d } from "../_shared/ChevronDownIcon-BYWciGnh.js";
 import { _ as n } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
 import { _ as h } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";

package/dist/index.d.ts

@@ -30,6 +30,8 @@ perPage: number;
 perPageLabel: string;
 perPageOptions: number[];
 fromLabel: string;
+prevIcon: Icon | null;
+nextIcon: Icon | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_11: DefineComponent<RadioProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -250,6 +252,12 @@ declare const __VLS_component_6: DefineComponent<DataTableProps, {}, {}, {}, {},
 }>, {
 spinning: boolean;
 pagination: DataTablePagination | null;
+perPage: number;
+perPageLabel: string;
+perPageOptions: number[];
+fromLabel: string;
+prevIcon: Icon | null;
+nextIcon: Icon | null;
 headers: DataTableHeader[];
 noResultsText: string;
 loadingText: string;
@@ -327,6 +335,16 @@ declare function __VLS_template_10(): {
             to: number;
             links: PaginationLink[];
         }): any;
+        prevIcon?(_: {
+            icon: Icon | null;
+            link: PaginationLink;
+            index: number;
+        }): any;
+        nextIcon?(_: {
+            icon: Icon | null;
+            link: PaginationLink;
+            index: number;
+        }): any;
     };
     refs: {};
     rootEl: any;
@@ -1103,6 +1121,12 @@ declare interface DataTableProps {
     striped?: boolean;
     spinning?: boolean;
     pagination?: DataTablePagination | null;
+    perPage?: number;
+    perPageLabel?: string;
+    perPageOptions?: number[];
+    fromLabel?: string;
+    prevIcon?: Icon | null;
+    nextIcon?: Icon | null;
     wrapperClass?: string;
     defaultSort?: DataTableSortBy | null;
 }
@@ -1254,6 +1278,8 @@ declare interface PaginationProps {
     perPageLabel?: string;
     perPageOptions?: number[];
     fromLabel?: string;
+    prevIcon?: Icon | null;
+    nextIcon?: Icon | null;
 }
 
 export declare const Radio: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "2.4.0-beta.9",
+  "version": "2.4.1",
   "type": "module",
   "publishConfig": {
     "access": "public"