@pequity/squirrel 10.0.2 → 10.1.0

package/README.md

@@ -10,7 +10,26 @@ The library is built using [Vue 3](https://vuejs.org/) and [Tailwind CSS](https:
 Install the package and its dependencies using `pnpm`:
 
 ```bash
-pnpm i vue vue-router @pequity/squirrel @tanstack/vue-virtual @vuepic/vue-datepicker floating-vue iconify-icon lodash-es vue-currency-input vue-toastification@2.0.0-rc.5
+pnpm i vue vue-i18n vue-router @pequity/squirrel @tanstack/vue-virtual @vuepic/vue-datepicker floating-vue iconify-icon lodash-es vue-currency-input vue-toastification@2.0.0-rc.5
+```
+
+### Internationalization (i18n) Setup
+
+Squirrel requires vue-i18n (already included in the dependency list above). You'll need to install the Squirrel plugin to integrate Squirrel's translations with your i18n instance:
+
+```js
+import { createApp } from 'vue';
+import { SquirrelPlugin } from '@pequity/squirrel';
+
+const app = createApp(App);
+
+// Install your i18n instance
+app.use(i18n);
+
+// Install Squirrel plugin with your i18n instance
+app.use(SquirrelPlugin, i18n);
+
+app.mount('#app');
 ```
 
 Install Tailwind CSS:

package/dist/cjs/chunks/p-action-bar.js

@@ -6,13 +6,15 @@ const pDropdown = require("../p-dropdown.js");
 const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
 const component = require("../component.js");
 const string = require("../string.js");
+const vueI18n = require("vue-i18n");
 const _hoisted_1 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
-const _hoisted_2 = { class: "mx-4 whitespace-nowrap" };
-const _hoisted_3 = { class: "flex" };
-const _hoisted_4 = { class: "flex items-center gap-2 px-1" };
+const _hoisted_2 = { class: "text-xs" };
+const _hoisted_3 = { class: "mx-4 whitespace-nowrap" };
+const _hoisted_4 = { class: "flex" };
 const _hoisted_5 = { class: "flex items-center gap-2 px-1" };
-const _hoisted_6 = { class: "bg-p-purple-60 py-2" };
-const _hoisted_7 = { class: "flex items-center gap-2 px-1" };
+const _hoisted_6 = { class: "flex items-center gap-2 px-1" };
+const _hoisted_7 = { class: "bg-p-purple-60 py-2" };
+const _hoisted_8 = { class: "flex items-center gap-2 px-1" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PActionBar",
@@ -26,6 +28,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["click:dismiss", "click:action"],
   setup(__props) {
+    const { t } = vueI18n.useI18n();
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
         __props.show ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
@@ -42,12 +45,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 variant: "dark",
                 class: "-mr-1"
               }),
-              _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "text-xs" }, "Clear All", -1))
+              vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(vue.unref(t)("squirrel.action_bar_clear_all")), 1)
             ]),
-            _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
-            vue.createElementVNode("p", _hoisted_2, vue.toDisplayString(__props.label), 1),
-            _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "mr-2 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
-            vue.createElementVNode("div", _hoisted_3, [
+            _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
+            vue.createElementVNode("p", _hoisted_3, vue.toDisplayString(__props.label), 1),
+            _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "mr-2 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
+            vue.createElementVNode("div", _hoisted_4, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions, (actionOrMenu) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                   key: `action-${actionOrMenu.label}`
@@ -59,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_4, [
+                      vue.createElementVNode("div", _hoisted_5, [
                         vue.unref(component.isComponent)(actionOrMenu.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(actionOrMenu.icon), {
                           key: 0,
                           class: "h-4 w-4"
@@ -79,7 +82,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     strategy: "fixed"
                   }, {
                     popper: vue.withCtx(({ hide }) => [
-                      vue.createElementVNode("ul", _hoisted_6, [
+                      vue.createElementVNode("ul", _hoisted_7, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actionOrMenu.subActions, (subaction) => {
                           return vue.openBlock(), vue.createElementBlock("li", {
                             key: `subaction-${subaction.name}`
@@ -91,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               onClick: ($event) => (_ctx.$emit("click:action", subaction.name), hide())
                             }, {
                               default: vue.withCtx(() => [
-                                vue.createElementVNode("div", _hoisted_7, [
+                                vue.createElementVNode("div", _hoisted_8, [
                                   vue.unref(component.isComponent)(subaction.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subaction.icon), {
                                     key: 0,
                                     class: "h-4 w-4"
@@ -116,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         type: "secondary-ghost-dark"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createElementVNode("div", _hoisted_5, [
+                          vue.createElementVNode("div", _hoisted_6, [
                             vue.unref(component.isComponent)(actionOrMenu.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(actionOrMenu.icon), {
                               key: 0,
                               class: "h-4 w-4"

package/dist/cjs/chunks/p-date-picker.js

@@ -2,6 +2,7 @@
 const vue = require("vue");
 const pInput_vue_vue_type_script_setup_true_lang = require("./p-input.js");
 const VueDatePicker = require("@vuepic/vue-datepicker");
+const vueI18n = require("vue-i18n");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PDatePicker",
@@ -121,10 +122,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const model = vue.useModel(__props, "modelValue");
+    const { locale } = vueI18n.useI18n();
     const attrs = vue.useAttrs();
     const datePickerProps = vue.computed(() => {
       const { modelValue: _, ...propsWithoutModelValue } = props;
-      return propsWithoutModelValue;
+      return { ...propsWithoutModelValue, locale: locale.value };
     });
     const inputPropsAndAttrs = vue.computed(() => {
       const { class: classes, style, ...res } = attrs;

package/dist/cjs/chunks/p-dropdown-select.js

@@ -10,7 +10,7 @@ const string = require("../string.js");
 const text = require("../text.js");
 const lodashEs = require("lodash-es");
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
-const _hoisted_1 = ["data-has-error"];
+const _hoisted_1 = ["data-has-error", "aria-label"];
 const _hoisted_2 = { class: "truncate text-left text-p-gray-40" };
 const _hoisted_3 = {
   key: 0,
@@ -20,25 +20,26 @@ const _hoisted_4 = {
   class: "max-w-[200px] truncate",
   "data-test": "pill-text"
 };
-const _hoisted_5 = ["onClick"];
+const _hoisted_5 = ["aria-label", "onClick"];
 const _hoisted_6 = {
   key: 1,
   class: "truncate text-left"
 };
-const _hoisted_7 = {
+const _hoisted_7 = ["aria-label"];
+const _hoisted_8 = {
   key: 0,
   class: "mt-3 px-3"
 };
-const _hoisted_8 = { class: "text-p-purple-60" };
-const _hoisted_9 = { class: "flex flex-row" };
-const _hoisted_10 = ["onClick"];
-const _hoisted_11 = ["title"];
-const _hoisted_12 = {
+const _hoisted_9 = { class: "text-p-purple-60" };
+const _hoisted_10 = { class: "flex flex-row" };
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = ["title"];
+const _hoisted_13 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
 };
-const _hoisted_13 = {
+const _hoisted_14 = {
   key: 1,
   class: "ml-auto h-4 w-[26px] pl-2"
 };
@@ -348,7 +349,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass([{ hidden: vue.unref($attrs).hidden }, vue.unref($attrs).class]),
         "data-has-error": !!__props.errorMsg,
         style: vue.normalizeStyle(style.value),
-        "aria-label": "Dropdown select"
+        "aria-label": _ctx.$t("squirrel.dropdown_select_aria_label")
       }, [
         __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
           key: 0,
@@ -366,15 +367,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "p-select-list": "",
               role: "listbox"
             }), [
-              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                 __props.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "actionsContainer",
                   ref: actionsContainer,
                   class: "flex flex-row justify-between text-xs font-semibold text-primary"
                 }, [
-                  vue.createElementVNode("p", _hoisted_8, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
-                  vue.createElementVNode("div", _hoisted_9, [
+                  vue.createElementVNode("p", _hoisted_9, vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_items", vue.unref(computedItems).length)), 1),
+                  vue.createElementVNode("div", _hoisted_10, [
                     vue.unref(computedItems).length === vue.unref(internalItems).length ? (vue.openBlock(), vue.createElementBlock("a", {
                       key: 0,
                       class: vue.normalizeClass([
@@ -382,18 +383,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ]),
                       onClick: _cache[2] || (_cache[2] = //@ts-ignore
                       (...args) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
-                    }, " Select all ", 2)) : (vue.openBlock(), vue.createElementBlock("a", {
+                    }, vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_select_all")), 3)) : (vue.openBlock(), vue.createElementBlock("a", {
                       key: 1,
                       class: vue.normalizeClass([vue.unref(computedInsideSelected) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
                       onClick: _cache[3] || (_cache[3] = //@ts-ignore
                       (...args) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
-                    }, " Select all filtered ", 2)),
+                    }, vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_select_all_filtered")), 3)),
                     _cache[7] || (_cache[7] = vue.createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
                     vue.createElementVNode("a", {
                       class: vue.normalizeClass([vue.unref(selectedItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
                       onClick: _cache[4] || (_cache[4] = //@ts-ignore
                       (...args) => vue.unref(clearAll) && vue.unref(clearAll)(...args))
-                    }, " Clear all ", 2)
+                    }, vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_clear_all")), 3)
                   ])
                 ], 512)) : vue.createCommentVNode("", true),
                 __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -461,11 +462,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   class: vue.normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, vue.toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_11)
+                            ], 8, _hoisted_12)
                           ]),
-                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_12)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13))
+                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_13)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14))
                         ], 2)
-                      ], 14, _hoisted_10)), [
+                      ], 14, _hoisted_11)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);
@@ -481,11 +482,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       onClick: handleCreate
                     }, [
                       vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, { icon: "fe:plus-circle" }),
-                      vue.createTextVNode(" Add '" + vue.toDisplayString(vue.unref(search)) + "' ", 1)
+                      vue.createTextVNode(" " + vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_add")) + " '" + vue.toDisplayString(vue.unref(search)) + "' ", 1)
                     ])) : __props.creatable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                      vue.createTextVNode("No items found. Type to add")
+                      vue.createTextVNode(vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_no_items_found_type_to_add")), 1)
                     ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-                      vue.createTextVNode("No items found")
+                      vue.createTextVNode(vue.toDisplayString(_ctx.$t("squirrel.dropdown_select_no_items_found")), 1)
                     ], 64))
                   ], 2)
                 ]) : vue.createCommentVNode("", true)
@@ -524,7 +525,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       vue.createElementVNode("button", {
                         type: "button",
                         class: "flex items-center justify-center text-p-gray-40 hover:text-p-gray-60",
-                        "aria-label": "Remove item",
+                        "aria-label": _ctx.$t("squirrel.dropdown_select_remove_item"),
                         "data-test": "pill-remove",
                         onClick: vue.withModifiers(($event) => vue.unref(select)($event, item[__props.itemValue]), ["stop"])
                       }, [
@@ -535,12 +536,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ], 8, _hoisted_5)
                     ], 2);
                   }), 128))
-                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === vue.unref(computedItems).length ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1))
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === vue.unref(computedItems).length ? _ctx.$t("squirrel.dropdown_select_all_options_selected") : `${vue.unref(selectedItems).length} ${_ctx.$t("squirrel.dropdown_select_options", vue.unref(selectedItems).length)} ${_ctx.$t("squirrel.dropdown_select_selected")}` : vue.unref(selectedItems)[0][__props.itemText]), 1))
               ]),
               __props.clearable && vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 2,
                 class: vue.normalizeClass(["absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60", [CLEAR_BUTTON_SPACING[__props.size]]]),
-                "aria-label": "Clear selection",
+                "aria-label": _ctx.$t("squirrel.dropdown_select_clear_selection"),
                 onClick: _cache[0] || (_cache[0] = vue.withModifiers(
                   //@ts-ignore
                   (...args) => vue.unref(clearAll) && vue.unref(clearAll)(...args),
@@ -548,7 +549,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ))
               }, [
                 vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, { icon: "fe:close" })
-              ], 2)) : vue.createCommentVNode("", true)
+              ], 10, _hoisted_7)) : vue.createCommentVNode("", true)
             ], 16)
           ]),
           _: 3

package/dist/cjs/chunks/p-inline-date-picker.js

@@ -2,6 +2,7 @@
 const vue = require("vue");
 const useInputClasses = require("../useInputClasses.js");
 const VueDatePicker = require("@vuepic/vue-datepicker");
+const vueI18n = require("vue-i18n");
 const _hoisted_1 = ["data-has-error"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -122,12 +123,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const model = vue.useModel(__props, "modelValue");
+    const { locale } = vueI18n.useI18n();
     const attrs = vue.useAttrs();
     const { labelClasses, errorMsgClasses } = useInputClasses.useInputClasses(props);
     const datePickerProps = vue.computed(() => {
       const { modelValue: _, ...propsWithoutModelValue } = props;
       const { class: classes, style: style2, ...attrsWithoutClassAndStyle } = attrs;
-      return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle };
+      return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle, locale: locale.value };
     });
     const style = vue.computed(() => {
       return attrs.style;

package/dist/cjs/chunks/p-pagination-info.js

@@ -59,9 +59,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: "h-6 w-56"
       })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         __props.count ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          vue.createTextVNode("Showing " + vue.toDisplayString(from.value) + " to " + vue.toDisplayString(to.value) + " of " + vue.toDisplayString(__props.count) + " results", 1)
+          vue.createTextVNode(vue.toDisplayString(_ctx.$t("squirrel.pagination_info_showing_results", { from: from.value, to: to.value, count: __props.count })), 1)
         ], 64)) : vue.renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
-          _cache[0] || (_cache[0] = vue.createTextVNode("No results found", -1))
+          vue.createTextVNode(vue.toDisplayString(_ctx.$t("squirrel.pagination_info_no_results_found")), 1)
         ])
       ]));
     };

package/dist/cjs/chunks/p-pagination.js

@@ -7,9 +7,11 @@ const _hoisted_1 = {
   key: 1,
   class: "flex text-p-gray-40"
 };
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { class: "flex" };
-const _hoisted_4 = ["aria-label"];
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = ["aria-label"];
+const _hoisted_6 = ["aria-label"];
 const DOTS = "...";
 const BTN_CLASS = "w-6 h-6 flex justify-center items-center mx-1 font-semibold text-sm leading-none";
 const BTN_ACTIVE_CLASS = "text-p-purple-60 bg-p-gray-30 rounded-lg";
@@ -85,41 +87,41 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         !__props.loading && pages.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass([BTN_CLASS, Number(__props.modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
-            "aria-label": "go to the previous page",
+            "aria-label": _ctx.$t("squirrel.pagination_go_to_previous_page"),
             onClick: _cache[0] || (_cache[0] = ($event) => setPage(Number(__props.modelValue) - 1))
           }, [
             vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
               icon: "chevron-left",
               width: "24px"
             })
-          ], 2),
+          ], 10, _hoisted_2),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pages.value, (page, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: index,
               onClick: ($event) => setPage(Number(page))
             }, [
-              vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", _hoisted_4, [
                 page !== DOTS ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   class: vue.normalizeClass([BTN_CLASS, page === __props.modelValue ? BTN_ACTIVE_CLASS : BTN_INACTIVE_CLASS]),
-                  "aria-label": `go to page ${page}`
-                }, vue.toDisplayString(page), 11, _hoisted_4)) : (vue.openBlock(), vue.createElementBlock("div", {
+                  "aria-label": _ctx.$t("squirrel.pagination_go_to_page", { page })
+                }, vue.toDisplayString(page), 11, _hoisted_5)) : (vue.openBlock(), vue.createElementBlock("div", {
                   key: 1,
                   class: vue.normalizeClass(BTN_CLASS)
                 }, vue.toDisplayString(DOTS)))
               ])
-            ], 8, _hoisted_2);
+            ], 8, _hoisted_3);
           }), 128)),
           vue.createElementVNode("div", {
             class: vue.normalizeClass([BTN_CLASS, __props.modelValue === pageCount.value ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
-            "aria-label": "go to the next page",
+            "aria-label": _ctx.$t("squirrel.pagination_go_to_next_page"),
             onClick: _cache[1] || (_cache[1] = ($event) => setPage(Number(__props.modelValue) + 1))
           }, [
             vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
               icon: "chevron-right",
               width: "24px"
             })
-          ], 2)
+          ], 10, _hoisted_6)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };

package/dist/cjs/chunks/p-tabs-pills.js

@@ -1,11 +1,6 @@
 "use strict";
 const vue = require("vue");
-const _hoisted_1 = {
-  class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
-  "aria-label": "Tabs Pills",
-  role: "tablist",
-  "aria-orientation": "horizontal"
-};
+const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["disabled", "aria-selected", "data-tab", "aria-controls", "onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -21,7 +16,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+      return vue.openBlock(), vue.createElementBlock("nav", {
+        class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
+        "aria-label": _ctx.$t("squirrel.tabs_pills_aria_label"),
+        role: "tablist",
+        "aria-orientation": "horizontal"
+      }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (tab) => {
           return vue.openBlock(), vue.createElementBlock("button", {
             key: String(tab[__props.itemValue]),
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             onClick: ($event) => _ctx.$emit("update:modelValue", tab[__props.itemValue])
           }, vue.toDisplayString(tab[__props.itemText]), 11, _hoisted_2);
         }), 128))
-      ]);
+      ], 8, _hoisted_1);
     };
   }
 });