@xleddyl/443-components-vue 0.1.0 → 0.2.2

package/dist/components/overlays/OverlayHost.vue.d.ts

@@ -6,9 +6,9 @@ type __VLS_Props = {
     loading?: boolean | LoadingHostOptions;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    confirm: boolean;
     loading: boolean | LoadingHostOptions;
     toaster: boolean | ToasterOptions;
+    confirm: boolean;
     modals: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/Popover.vue.d.ts

@@ -20,13 +20,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     haspopup?: string;
     open?: boolean;
     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;
     '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;
@@ -135,7 +137,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;
@@ -144,7 +146,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;
@@ -180,7 +182,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;
@@ -189,7 +191,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;
@@ -202,7 +203,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;
@@ -226,13 +226,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     haspopup?: string;
     open?: boolean;
     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;
     '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;
@@ -341,7 +343,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;
@@ -350,7 +352,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;
@@ -386,7 +388,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;
@@ -395,7 +397,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;
@@ -408,7 +409,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;

package/dist/components/overlays/Toaster.vue

@@ -78,7 +78,7 @@
                         size="xs"
                         variant="ghost"
                         tone="neutral"
-                        :aria-label="dismissLabel"
+                        :aria-label="dismissText"
                         @click="dismiss(entry.id)"
                      />
                   </div>
@@ -108,6 +108,7 @@ import {
   watch
 } from "vue";
 import { useHotkey, ariaKeyShortcuts } from "../../composables/useHotkey";
+import { useLocale } from "../../composables/useLocale";
 import { toast } from "../../composables/useToast";
 import { toastList } from "../../internal/overlays/toast";
 import { isPopoverOpen, supportsPopover } from "../../internal/floating/support";
@@ -124,8 +125,8 @@ const props = defineProps({
   gap: { type: Number, required: false, default: 8 },
   expand: { type: Boolean, required: false },
   progress: { type: Boolean, required: false },
-  label: { type: String, required: false, default: "Notifications" },
-  dismissLabel: { type: String, required: false, default: "Dismiss notification" },
+  label: { type: String, required: false },
+  dismissLabel: { type: String, required: false },
   hotkey: { type: [String, Boolean], required: false, default: "alt+t" }
 });
 const SWIPE_THRESHOLD = 64;
@@ -146,8 +147,11 @@ const side = computed(() => props.position.startsWith("top") ? "top" : "bottom")
 const limit = computed(() => Math.max(1, props.max));
 const paused = computed(() => hovered.value || focusInside.value || hidden.value);
 const expanded = computed(() => props.expand || paused.value || swipe.value !== null);
+const { t } = useLocale();
+const labelText = computed(() => props.label ?? t("toaster.label"));
+const dismissText = computed(() => props.dismissLabel ?? t("toaster.dismiss"));
 const regionLabel = computed(
-  () => props.hotkey ? `${props.label} (${ariaKeyShortcuts(props.hotkey, false)})` : props.label
+  () => props.hotkey ? `${labelText.value} (${ariaKeyShortcuts(props.hotkey, false)})` : labelText.value
 );
 const visible = computed(() => toastList.slice(-limit.value));
 const layout = computed(() => {

package/dist/components/overlays/Toaster.vue.d.ts

@@ -10,9 +10,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dismissLabel?: string;
     hotkey?: string | false;
     key?: PropertyKey | undefined;
+    style?: import("vue").StyleValue;
     ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
-    style?: import("vue").StyleValue;
     to?: string | import("vue").RendererElement | null | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
@@ -31,7 +31,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;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -77,7 +77,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;
@@ -86,7 +86,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-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -221,9 +221,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dismissLabel?: string;
     hotkey?: string | false;
     key?: PropertyKey | undefined;
+    style?: import("vue").StyleValue;
     ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
-    style?: import("vue").StyleValue;
     to?: string | import("vue").RendererElement | null | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
@@ -242,7 +242,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;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -288,7 +288,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;
@@ -297,7 +297,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-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -423,8 +423,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
 }> & Readonly<{}>, {
     max: number;
-    label: string;
-    dismissLabel: string;
     duration: number;
     position: ToasterPosition;
     gap: number;

package/dist/components/overlays/Tooltip.vue.d.ts

@@ -23,7 +23,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;
@@ -69,7 +69,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;
@@ -78,7 +78,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;
@@ -224,7 +224,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;
@@ -270,7 +270,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;
@@ -279,7 +279,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;

package/dist/components/templates/AccountMenu.vue

@@ -3,7 +3,7 @@
       v-if="menu?.length"
       :items="menu"
       :placement="menuPlacement"
-      :label="menuLabel"
+      :label="menuText"
       @select="(item, event) => emit('select', item, event)"
    >
       <template #default="{ open }">
@@ -43,6 +43,7 @@
 <script setup>
 import { computed } from "vue";
 import { useAppShell } from "../../composables/useAppShell";
+import { useLocale } from "../../composables/useLocale";
 import Icon from "../core/Icon.vue";
 import Avatar from "../data/Avatar.vue";
 import DropdownMenu from "../overlays/DropdownMenu.vue";
@@ -52,12 +53,14 @@ const props = defineProps({
   email: { type: String, required: false },
   avatar: { type: String, required: false },
   menu: { type: Array, required: false },
-  menuLabel: { type: String, required: false, default: "Account" },
+  menuLabel: { type: String, required: false },
   placement: { type: null, required: false, default: void 0 },
   icon: { type: [String, Object, Boolean], required: false, skipCheck: true, default: "chevron-up-down" },
   active: { type: Boolean, required: false }
 });
 const emit = defineEmits(["select"]);
+const { t } = useLocale();
+const menuText = computed(() => props.menuLabel ?? t("account.label"));
 const shell = useAppShell();
 const railed = computed(() => Boolean(shell?.collapsed.value && !shell.mobile.value));
 const menuPlacement = computed(

package/dist/components/templates/AccountMenu.vue.d.ts

@@ -10,17 +10,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
     icon?: IconName | false;
     active?: boolean;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
+    form?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    form?: string | undefined | undefined;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -128,7 +130,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;
@@ -137,7 +139,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;
@@ -173,7 +175,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;
@@ -182,7 +184,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;
@@ -195,7 +196,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;
@@ -224,17 +224,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
     icon?: IconName | false;
     active?: boolean;
     key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
+    form?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
+    placeholder?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
     ref?: import("vue").VNodeRef | undefined;
-    placeholder?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    form?: string | undefined | undefined;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -342,7 +344,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;
@@ -351,7 +353,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;
@@ -387,7 +389,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;
@@ -396,7 +398,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;
@@ -409,7 +410,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;
@@ -430,7 +430,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onSelect?: ((item: MenuItem, event: Event) => any) | undefined;
 }>, {
     icon: false | IconName;
-    menuLabel: string;
     placement: OverlayPlacement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/templates/AppearanceSettings.vue

@@ -1,8 +1,13 @@
 <template>
    <div class="k-appearance">
-      <SettingsGroup v-if="themes" :label="themeLabel" :description="themeText" :level="level">
+      <SettingsGroup
+         v-if="themes"
+         :label="themeLabelText"
+         :description="themeDescription"
+         :level="level"
+      >
          <fieldset class="k-appearance-cards">
-            <legend class="k-visually-hidden">{{ themeLabel }}</legend>
+            <legend class="k-visually-hidden">{{ themeLabelText }}</legend>
             <label
                v-for="option in themeOptions"
                :key="option.value"
@@ -35,7 +40,7 @@
                </span>
                <span class="k-appearance-card-label">
                   <Icon :name="option.icon" />
-                  {{ option.label }}
+                  {{ t(`theme.${option.value}`) }}
                   <Icon
                      v-if="theme.preference.value === option.value"
                      name="check"
@@ -48,12 +53,12 @@
 
       <SettingsGroup
          v-if="presetList.length"
-         :label="presetLabel"
-         :description="presetText"
+         :label="presetLabelText"
+         :description="presetDescription"
          :level="level"
       >
          <fieldset class="k-appearance-cards">
-            <legend class="k-visually-hidden">{{ presetLabel }}</legend>
+            <legend class="k-visually-hidden">{{ presetLabelText }}</legend>
             <label
                v-for="option in presetList"
                :key="option.value"
@@ -80,7 +85,7 @@
                   </span>
                </span>
                <span class="k-appearance-card-label">
-                  {{ option.label }}
+                  {{ presetTitle(option) }}
                   <Icon
                      v-if="preset.preset.value === option.value"
                      name="check"
@@ -88,7 +93,7 @@
                   />
                </span>
                <span :id="`${presetName}-${option.value}`" class="k-appearance-card-description">
-                  {{ option.description }}
+                  {{ t(`preset.${option.value}Description`) }}
                </span>
             </label>
          </fieldset>
@@ -99,6 +104,7 @@
 
 <script setup>
 import { computed, useId } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import { presetOptions, THEME_PRESETS, usePreset } from "../../composables/usePreset";
 import { themeOptions, useTheme } from "../../composables/useTheme";
 import Icon from "../core/Icon.vue";
@@ -107,11 +113,19 @@ const props = defineProps({
   presets: { type: [Array, Boolean], required: false, default: () => THEME_PRESETS },
   themes: { type: Boolean, required: false, default: true },
   level: { type: Number, required: false, default: 3 },
-  themeLabel: { type: String, required: false, default: "Theme" },
-  themeText: { type: String, required: false, default: "Choose how the interface looks. System follows your device." },
-  presetLabel: { type: String, required: false, default: "Style" },
-  presetText: { type: String, required: false, default: "Brand colors, typefaces and corner radius." }
+  themeLabel: { type: String, required: false },
+  themeText: { type: String, required: false },
+  presetLabel: { type: String, required: false },
+  presetText: { type: String, required: false }
 });
+const { t } = useLocale();
+const themeLabelText = computed(() => props.themeLabel ?? t("appearance.theme"));
+const themeDescription = computed(() => props.themeText ?? t("appearance.themeDescription"));
+const presetLabelText = computed(() => props.presetLabel ?? t("appearance.style"));
+const presetDescription = computed(() => props.presetText ?? t("appearance.styleDescription"));
+function presetTitle(option) {
+  return option.value === "default" ? t("preset.default") : option.label;
+}
 const theme = useTheme();
 const preset = usePreset();
 const themeName = useId();