@xleddyl/443-components-vue 0.1.0 → 0.2.2

package/dist/components/data/DescriptionList.vue

@@ -18,7 +18,7 @@
                <slot :name="`value-${item.key ?? item.label}`" :item="item">
                   <slot name="value" :item="item">
                      <span v-if="isEmpty(item.value)" class="k-description-empty">{{
-                        emptyText
+                        emptyLabel
                      }}</span>
                      <template v-else>{{ item.value }}</template>
                   </slot>
@@ -31,14 +31,18 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import { rowDelay } from "../../internal/data/stagger";
-defineProps({
+const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
   layout: { type: String, required: false, default: "inline" },
   columns: { type: Number, required: false, default: 2 },
   divided: { type: Boolean, required: false, default: true },
-  emptyText: { type: String, required: false, default: "Not set" }
+  emptyText: { type: String, required: false }
 });
+const { t } = useLocale();
+const emptyLabel = computed(() => props.emptyText ?? t("descriptionList.empty"));
 defineSlots();
 function isEmpty(value) {
   return value === null || value === void 0 || value === "";

package/dist/components/data/DescriptionList.vue.d.ts

@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -73,7 +73,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -82,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -225,7 +225,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -271,7 +271,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -280,7 +280,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -409,11 +409,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
+    columns: number;
     items: DescriptionItem[];
     layout: DescriptionLayout;
-    columns: number;
     divided: boolean;
-    emptyText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/FilterPills.vue

@@ -1,5 +1,10 @@
 <template>
-   <div class="k-filter-pills" :class="`k-filter-pills-${size}`" role="group" :aria-label="label">
+   <div
+      class="k-filter-pills"
+      :class="`k-filter-pills-${size}`"
+      role="group"
+      :aria-label="groupLabel"
+   >
       <button
          v-for="option in options"
          :key="option.value"
@@ -22,7 +27,7 @@
          variant="link"
          tone="neutral"
          size="xs"
-         :label="clearLabel"
+         :label="clearText"
          @click="clear"
       />
    </div>
@@ -30,17 +35,21 @@
 
 <script setup>
 import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 const props = defineProps({
   options: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
-  label: { type: String, required: false, default: "Filters" },
+  label: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   clearable: { type: Boolean, required: false },
-  clearLabel: { type: String, required: false, default: "Clear" },
+  clearLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
+const { t } = useLocale();
+const groupLabel = computed(() => props.label ?? t("filterPills.label"));
+const clearText = computed(() => props.clearLabel ?? t("common.clear"));
 const model = defineModel({ type: [String, Number, Array, null], ...{ default: null } });
 const activeValues = computed(() => {
   if (Array.isArray(model.value)) return model.value;

package/dist/components/data/FilterPills.vue.d.ts

@@ -10,14 +10,16 @@ declare const __VLS_export: import("vue").DefineComponent<{
     disabled?: boolean;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -126,7 +128,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -135,7 +137,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -171,7 +173,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -180,7 +182,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -193,7 +194,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -213,14 +213,16 @@ declare const __VLS_export: import("vue").DefineComponent<{
     disabled?: boolean;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -329,7 +331,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -338,7 +340,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -374,7 +376,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -383,7 +385,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -396,7 +397,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -408,8 +408,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
 }>, {
     size: "sm" | "md";
-    label: string;
-    clearLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/data/Pagination.vue

@@ -4,14 +4,14 @@
          <slot name="summary" :start="range.start" :end="range.end" :total="total">
             <template v-if="total > 0">
                <span class="k-pagination-strong">{{ range.start }}-{{ range.end }}</span>
-               {{ ofText }}
+               {{ ofLabel }}
                <span class="k-pagination-strong">{{ total }}</span>
             </template>
-            <template v-else>{{ emptyText }}</template>
+            <template v-else>{{ emptyLabel }}</template>
          </slot>
       </p>
       <div v-if="pageSizes?.length" class="k-pagination-size">
-         <label :for="sizeId" class="k-pagination-size-label">{{ pageSizeLabel }}</label>
+         <label :for="sizeId" class="k-pagination-size-label">{{ pageSizeText }}</label>
          <span class="k-pagination-select">
             <select
                :id="sizeId"
@@ -27,14 +27,14 @@
             <Icon name="chevron-up-down" class="k-pagination-select-icon" />
          </span>
       </div>
-      <nav class="k-pagination-nav" :aria-label="label">
+      <nav class="k-pagination-nav" :aria-label="navLabel">
          <Button
             variant="ghost"
             tone="neutral"
             :size="buttonSize"
             icon="chevron-left"
             :disabled="disabled || page <= 1"
-            :aria-label="previousLabel"
+            :aria-label="previousText"
             @click="go(page - 1)"
          />
          <ul v-if="!compact" role="list" class="k-pagination-list">
@@ -51,7 +51,7 @@
                   type="button"
                   class="k-pagination-page"
                   :aria-current="item.value === page ? 'page' : void 0"
-                  :aria-label="`${pageLabel} ${item.value}`"
+                  :aria-label="`${pageText} ${item.value}`"
                   :disabled="disabled"
                   @click="go(item.value)"
                >
@@ -66,7 +66,7 @@
             :size="buttonSize"
             icon="chevron-right"
             :disabled="disabled || page >= pageCount"
-            :aria-label="nextLabel"
+            :aria-label="nextText"
             @click="go(page + 1)"
          />
       </nav>
@@ -76,6 +76,7 @@
 <script setup>
 import { computed, useId, watch } from "vue";
 import { paginationItems } from "../../internal/data/pagination";
+import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 const props = defineProps({
@@ -86,14 +87,22 @@ const props = defineProps({
   compact: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   showSummary: { type: Boolean, required: false, default: true },
-  label: { type: String, required: false, default: "Pagination" },
-  pageLabel: { type: String, required: false, default: "Page" },
-  previousLabel: { type: String, required: false, default: "Previous page" },
-  nextLabel: { type: String, required: false, default: "Next page" },
-  pageSizeLabel: { type: String, required: false, default: "Rows per page" },
-  ofText: { type: String, required: false, default: "of" },
-  emptyText: { type: String, required: false, default: "No results" }
+  label: { type: String, required: false },
+  pageLabel: { type: String, required: false },
+  previousLabel: { type: String, required: false },
+  nextLabel: { type: String, required: false },
+  pageSizeLabel: { type: String, required: false },
+  ofText: { type: String, required: false },
+  emptyText: { type: String, required: false }
 });
+const { t } = useLocale();
+const navLabel = computed(() => props.label ?? t("pagination.label"));
+const pageText = computed(() => props.pageLabel ?? t("pagination.page"));
+const previousText = computed(() => props.previousLabel ?? t("pagination.previous"));
+const nextText = computed(() => props.nextLabel ?? t("pagination.next"));
+const pageSizeText = computed(() => props.pageSizeLabel ?? t("pagination.pageSize"));
+const ofLabel = computed(() => props.ofText ?? t("pagination.of"));
+const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 20 } });
 const sizeId = useId();

package/dist/components/data/Pagination.vue.d.ts

@@ -24,14 +24,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     page?: number;
     pageSize?: number;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -140,7 +142,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -149,7 +151,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -185,7 +187,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -194,7 +196,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -207,7 +208,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -236,14 +236,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     page?: number;
     pageSize?: number;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -352,7 +354,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -361,7 +363,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -397,7 +399,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -406,7 +408,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -419,7 +420,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -432,15 +432,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:pageSize"?: ((value: number) => any) | undefined;
 }>, {
     size: "sm" | "md";
-    label: string;
-    emptyText: string;
     siblings: number;
     showSummary: boolean;
-    pageLabel: string;
-    previousLabel: string;
-    nextLabel: string;
-    pageSizeLabel: string;
-    ofText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/Stat.vue

@@ -18,7 +18,7 @@
       <template v-if="loading">
          <span class="k-stat-skeleton is-value" aria-hidden="true" />
          <span class="k-stat-skeleton is-meta" aria-hidden="true" />
-         <span class="k-visually-hidden">{{ loadingText }}</span>
+         <span class="k-visually-hidden">{{ loadingLabel }}</span>
       </template>
       <template v-else>
          <div class="k-stat-body">
@@ -51,6 +51,7 @@
 import { useLinkResolver } from "../../internal/core/link";
 import { Polymorphic } from "../../internal/core/Polymorphic";
 import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import Icon from "../core/Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -65,13 +66,15 @@ const props = defineProps({
   hint: { type: String, required: false },
   icon: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingText: { type: String, required: false, default: "Loading" },
+  loadingText: { type: String, required: false },
   plain: { type: Boolean, required: false },
   to: { type: [String, Object], required: false },
   href: { type: String, required: false },
-  increaseLabel: { type: String, required: false, default: "Increased by" },
-  decreaseLabel: { type: String, required: false, default: "Decreased by" }
+  increaseLabel: { type: String, required: false },
+  decreaseLabel: { type: String, required: false }
 });
+const { t } = useLocale();
+const loadingLabel = computed(() => props.loadingText ?? t("common.loading"));
 const { resolveLink } = useLinkResolver();
 const link = computed(() => resolveLink(props));
 const rootTag = computed(() => link.value?.is ?? "div");
@@ -101,8 +104,8 @@ const deltaText = computed(() => {
   return `${sign}${absolute}${props.deltaSuffix}`;
 });
 const trendText = computed(() => {
-  if (trend.value === "up") return props.increaseLabel;
-  if (trend.value === "down") return props.decreaseLabel;
+  if (trend.value === "up") return props.increaseLabel ?? t("stat.increased");
+  if (trend.value === "down") return props.decreaseLabel ?? t("stat.decreased");
   return "";
 });
 </script>

package/dist/components/data/Stat.vue.d.ts

@@ -34,17 +34,19 @@ declare const __VLS_base: import("vue").DefineComponent<{
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined;
+    title?: string | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     type?: string | undefined;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined;
     target?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -207,7 +209,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     radiogroup?: string | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
-    prefix?: string | undefined;
     property?: string | undefined;
     resource?: string | undefined;
     typeof?: string | undefined;
@@ -220,7 +221,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined;
     itemid?: string | undefined;
     itemref?: string | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -260,17 +260,19 @@ declare const __VLS_base: import("vue").DefineComponent<{
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined;
+    title?: string | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     type?: string | undefined;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined;
     target?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -433,7 +435,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     radiogroup?: string | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
-    prefix?: string | undefined;
     property?: string | undefined;
     resource?: string | undefined;
     typeof?: string | undefined;
@@ -446,7 +447,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     itemtype?: string | undefined;
     itemid?: string | undefined;
     itemref?: string | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -467,9 +467,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
 }> & Readonly<{}>, {
     deltaSuffix: string;
-    loadingText: string;
-    increaseLabel: string;
-    decreaseLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;