feat(KAN-18): redesign foundational UI components

resources/js/components/ui/spinner/Spinner.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { Loader2Icon } from "lucide-vue-next"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { Loader2Icon } from "lucide-vue-next";
+import { computed } from "vue";
+import { useLocalization } from "@/composables/useLocalization";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes["class"];
+    label?: string;
+}>();
+
+const { t } = useLocalization();
+const accessibleLabel = computed(() => props.label ?? t("common.loading"));
 </script>
 
 <template>
-  <Loader2Icon
-    role="status"
-    aria-label="Loading"
-    :class="cn('size-4 animate-spin', props.class)"
-  />
+    <Loader2Icon
+        role="status"
+        :aria-label="accessibleLabel"
+        :class="cn('size-4 animate-spin', props.class)"
+    />
 </template>