@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/chart/types.d.ts

@@ -3,11 +3,16 @@ export interface ChartSeries {
     data: (number | null)[];
     color?: string;
 }
+export type ChartPointStyle = 'circle' | 'rect' | 'triangle' | 'rectRot' | 'star' | 'crossRot';
+export type ChartBarPattern = 'solid' | 'diagonal' | 'reverse' | 'horizontal' | 'dots' | 'cross';
 export interface ChartLegendItem {
     label: string;
     color: string;
     hidden?: boolean;
     value?: string;
+    dash?: number[];
+    point?: ChartPointStyle;
+    pattern?: ChartBarPattern;
 }
 export type ChartLegendPosition = 'bottom' | 'right';
 export type ChartValueFormatter = (value: number) => string;

package/dist/chart/useChartColors.mjs

@@ -4,7 +4,7 @@ const fallbackColors = {
   text: "rgb(17, 17, 20)",
   textToned: "rgb(59, 59, 66)",
   textMuted: "rgb(107, 107, 117)",
-  textDimmed: "rgb(157, 157, 167)",
+  textDimmed: "rgb(133, 133, 142)",
   grid: "rgb(231, 231, 234)",
   line: "rgb(216, 216, 221)",
   surface: "rgb(255, 255, 255)",

package/dist/components/core/Button.vue

@@ -31,9 +31,11 @@
       v-else
       v-bind="$attrs"
       :type="type"
-      :disabled="inactive || void 0"
+      :disabled="disabled || void 0"
+      :aria-disabled="busy && !disabled ? 'true' : ariaDisabledAttr"
       :aria-busy="busy ? 'true' : void 0"
       :class="classes"
+      @click.capture="onBusyClick"
    >
       <ButtonContent v-bind="contentProps"
          ><slot>{{ label }}</slot></ButtonContent
@@ -88,6 +90,14 @@ const classes = computed(() => [
   `k-btn-${props.variant}`,
   { "is-block": props.block, "is-icon": iconOnly.value, "is-loading": busy.value }
 ]);
+const ariaDisabledAttr = computed(
+  () => attrs["aria-disabled"]
+);
+function onBusyClick(event) {
+  if (!busy.value) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
 const contentProps = computed(() => ({
   busy: busy.value,
   hasLabel: hasLabel.value,

package/dist/components/core/Button.vue.d.ts

@@ -459,9 +459,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
 }> & Readonly<{}>, {
+    tone: Tone;
     size: ButtonSize;
     type: "submit" | "button" | "reset";
-    tone: Tone;
     variant: ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/core/FieldMessage.vue

@@ -7,6 +7,7 @@
    >
       <Icon v-if="resolvedIcon" :name="resolvedIcon" class="k-field-message-icon" />
       <span class="k-field-message-text"
+         ><span v-if="prefix" class="k-visually-hidden">{{ prefix }}: </span
          ><slot>{{ message }}</slot></span
       >
    </p>
@@ -14,6 +15,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { useLocale } from "../../composables/useLocale";
 import { toneIcons } from "../../internal/core/tone";
 import Icon from "./Icon.vue";
 const props = defineProps({
@@ -22,6 +24,10 @@ const props = defineProps({
   icon: { type: [String, Object, Boolean], required: false, skipCheck: true, default: void 0 },
   id: { type: String, required: false }
 });
+const { t } = useLocale();
+const prefix = computed(
+  () => props.tone === "danger" ? t("tone.danger") : props.tone === "warning" ? t("tone.warning") : ""
+);
 const resolvedIcon = computed(
   () => props.icon === false ? void 0 : props.icon ?? toneIcons[props.tone]
 );

package/dist/components/core/FieldMessage.vue.d.ts

@@ -397,7 +397,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     icon: false | IconName;
-    tone: "neutral" | "warning" | "danger";
+    tone: "danger" | "warning" | "neutral";
 }, {}, {}, {}, 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/core/Form.vue

@@ -101,10 +101,27 @@ async function submit() {
   if (!props.focusOnError) return false;
   await nextTick();
   const control = rootRef.value?.querySelector('[aria-invalid="true"]');
-  if (control) control.focus();
+  if (control) focusControl(control);
   else rootRef.value?.querySelector(".k-form-alerts")?.focus();
   return false;
 }
+const FOCUS_TARGETS = [
+  "input:checked:not(:disabled)",
+  '[aria-checked="true"]:not(:disabled, [aria-disabled="true"])',
+  '[aria-selected="true"]:not(:disabled, [aria-disabled="true"])',
+  '[tabindex="0"]:not(:disabled, [aria-disabled="true"])',
+  'input:not([type="hidden"], :disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
+];
+function focusControl(control) {
+  control.focus();
+  if (document.activeElement === control) return;
+  for (const selector of FOCUS_TARGETS) {
+    const target = control.querySelector(selector);
+    if (!target) continue;
+    target.focus();
+    if (document.activeElement === target) return;
+  }
+}
 function reset() {
   props.form.reset();
   emit("reset");

package/dist/components/core/FormAlerts.vue

@@ -1,30 +1,68 @@
 <template>
-   <div v-if="errorList.length || warningList.length" class="k-form-alerts" tabindex="-1">
+   <div
+      v-if="errorList.length || warningList.length"
+      ref="root"
+      v-bind="$attrs"
+      class="k-form-alerts"
+      tabindex="-1"
+   >
       <Alert
          v-for="message in errorList"
          :key="`error:${message}`"
          tone="danger"
+         role="none"
          :description="message"
       />
       <Alert
          v-for="message in warningList"
          :key="`warning:${message}`"
          tone="warning"
-         role="status"
+         role="none"
          :description="message"
       />
    </div>
+   <LiveRegion :message="warningMessage" />
+   <LiveRegion :message="errorLive.message.value" assertive />
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, nextTick, onBeforeUnmount, useTemplateRef, watch } from "vue";
 import { useFormContext } from "../../composables/useForm";
+import { useLocale } from "../../composables/useLocale";
+import { hasFocusWithin } from "../../internal/core/focus";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { LIVE_DELAY, useLiveMessage } from "../../internal/core/live";
 import Alert from "../feedback/Alert.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   errors: { type: Array, required: false },
   warnings: { type: Array, required: false }
 });
 const form = useFormContext();
+const { t } = useLocale();
 const errorList = computed(() => props.errors ?? form?.rootErrors?.value ?? []);
 const warningList = computed(() => props.warnings ?? form?.rootWarnings?.value ?? []);
+const root = useTemplateRef("root");
+const errorLive = useLiveMessage();
+let errorTimer;
+watch(
+  () => errorList.value.join("\n"),
+  async (text) => {
+    clearTimeout(errorTimer);
+    errorLive.clear();
+    if (!text) return;
+    await nextTick();
+    errorTimer = setTimeout(() => {
+      if (hasFocusWithin(root.value)) return;
+      errorLive.announce(
+        errorList.value.map((message) => `${t("tone.danger")}: ${message}`).join(" ")
+      );
+    }, LIVE_DELAY);
+  },
+  { flush: "post" }
+);
+onBeforeUnmount(() => clearTimeout(errorTimer));
+const warningMessage = computed(
+  () => errorList.value.length || !warningList.value.length ? "" : warningList.value.map((message) => `${t("tone.warning")}: ${message}`).join(" ")
+);
 </script>

package/dist/components/core/FormField.vue

@@ -22,6 +22,9 @@
                ><slot name="label">{{ label }}</slot></span
             >
             <span v-if="isRequired" class="k-form-field-required" aria-hidden="true">*</span>
+            <span v-if="isRequired && showRequiredHint" class="k-visually-hidden">{{
+               t("form.requiredHint")
+            }}</span>
          </label>
          <span v-if="hint || $slots.hint" :id="hintId" class="k-form-field-hint">
             <slot name="hint">{{ hint }}</slot>
@@ -36,28 +39,32 @@
       >
          <slot name="description">{{ description }}</slot>
       </p>
-      <FieldMessage
-         v-if="errorMessage"
-         :id="messageId"
-         key="error"
-         tone="danger"
-         class="k-form-field-error"
-         :message="errorMessage"
-      />
-      <FieldMessage
-         v-else-if="warningMessage"
-         :id="messageId"
-         key="warning"
-         tone="warning"
-         class="k-form-field-warning"
-         :message="warningMessage"
-      />
+      <div class="k-form-field-messages" aria-live="polite">
+         <FieldMessage
+            v-if="errorMessage"
+            :id="messageId"
+            key="error"
+            tone="danger"
+            class="k-form-field-error"
+            :message="errorMessage"
+         />
+         <FieldMessage
+            v-else-if="warningMessage"
+            :id="messageId"
+            key="warning"
+            tone="warning"
+            class="k-form-field-warning"
+            :message="warningMessage"
+         />
+      </div>
    </div>
 </template>
 
 <script setup>
 import { computed, provide, ref, shallowReactive, useId, useSlots, watch } from "vue";
 import { useFormContext } from "../../composables/useForm";
+import { useLocale } from "../../composables/useLocale";
+import { joinIds } from "../../internal/forms/control";
 import { FIELD_KEY, FIELD_ROLE_KEY } from "../../internal/keys";
 import FieldMessage from "./FieldMessage.vue";
 import Icon from "./Icon.vue";
@@ -75,6 +82,7 @@ const props = defineProps({
 });
 const slots = useSlots();
 const form = useFormContext();
+const { t } = useLocale();
 const baseId = useId();
 const id = computed(() => props.id ?? `${baseId}-control`);
 const labelId = `${baseId}-label`;
@@ -96,6 +104,14 @@ function setLabelable(labelable, source) {
 const labelFor = computed(
   () => [...labelables.values()].some((labelable) => !labelable) ? void 0 : id.value
 );
+const requiredHints = shallowReactive(/* @__PURE__ */ new Map());
+function setRequiredHint(hint, source) {
+  if (hint === void 0) requiredHints.delete(source);
+  else requiredHints.set(source, hint);
+}
+const showRequiredHint = computed(
+  () => labelFor.value === void 0 || [...requiredHints.values()].some(Boolean)
+);
 const errorMessage = computed(() => {
   if (props.error) return props.error;
   const formError = props.error !== false && props.name ? form?.errors[props.name] : void 0;
@@ -109,28 +125,31 @@ const warningMessage = computed(() => {
 const isRequired = computed(
   () => props.required || Boolean(props.name && form?.isRequired(props.name))
 );
+const hasLabel = computed(() => Boolean(props.label || slots.label));
 const hasLabelRow = computed(
   () => Boolean(props.label || props.hint || slots.label || slots.hint || slots["label-actions"])
 );
-const describedBy = computed(() => {
-  const ids = [];
-  if (props.hint || slots.hint) ids.push(hintId);
-  if (props.description || slots.description) ids.push(descriptionId);
-  if (errorMessage.value || warningMessage.value) ids.push(messageId);
-  return ids.length ? ids.join(" ") : void 0;
-});
+const describedBy = computed(
+  () => joinIds(
+    (props.hint || slots.hint) && hintId,
+    (props.description || slots.description) && descriptionId,
+    (errorMessage.value || warningMessage.value) && messageId
+  )
+);
 const context = {
   get id() {
     return id.value;
   },
   labelId,
+  hasLabel,
   name: computed(() => props.name),
   describedBy,
   invalid: computed(() => Boolean(errorMessage.value)),
   required: isRequired,
   disabled: computed(() => Boolean(props.disabled)),
   setControlError,
-  setLabelable
+  setLabelable,
+  setRequiredHint
 };
 provide(FIELD_KEY, context);
 provide(FIELD_ROLE_KEY, "primary");

package/dist/components/core/Input.vue.d.ts

@@ -29,11 +29,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -191,7 +194,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -234,9 +236,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -272,11 +272,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -434,7 +437,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -477,9 +479,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;

package/dist/components/core/Root.vue

@@ -5,6 +5,8 @@
       class="k-root"
       :data-theme="dataTheme"
       :data-preset="dataPreset"
+      :lang="lang"
+      :dir="dir"
       :style="rootStyle"
    >
       <slot />
@@ -16,7 +18,7 @@ import { Polymorphic } from "../../internal/core/Polymorphic";
 import { computed, inject, provide } from "vue";
 import { resolvePresetStore } from "../../internal/core/preset";
 import { resolveThemeStore } from "../../internal/core/theme";
-import { ROOT_KEY } from "../../internal/keys";
+import { LOCALE_KEY, ROOT_KEY } from "../../internal/keys";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   theme: { type: String, required: false },
@@ -33,6 +35,9 @@ const store = resolveThemeStore();
 const presetStore = resolvePresetStore();
 const nested = inject(ROOT_KEY, false);
 provide(ROOT_KEY, true);
+const locale = inject(LOCALE_KEY, null);
+const lang = computed(() => nested ? void 0 : locale?.value.code);
+const dir = computed(() => nested ? void 0 : locale?.value.dir);
 const dataTheme = computed(() => props.theme ?? (nested ? void 0 : store.value));
 const dataPreset = computed(() => props.preset ?? (nested ? void 0 : presetStore.value));
 const rootStyle = computed(() => {

package/dist/components/core/Root.vue.d.ts

@@ -24,6 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -183,7 +184,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -242,6 +242,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -401,7 +402,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];

package/dist/components/core/Spinner.vue

@@ -1,27 +1,22 @@
 <template>
-   <div
-      v-if="block"
-      class="k-spinner-block"
-      :role="decorative ? void 0 : 'status'"
-      :aria-hidden="decorative ? 'true' : void 0"
-   >
+   <div v-if="block" class="k-spinner-block" :aria-hidden="decorative ? 'true' : void 0">
       <span class="k-spinner" :class="`k-spinner-${size}`" aria-hidden="true" />
-      <span v-if="label" class="k-spinner-label">{{ label }}</span>
-      <span v-else-if="!decorative" class="k-visually-hidden">{{ text }}</span>
+      <span v-if="label" class="k-spinner-label" aria-hidden="true">{{ label }}</span>
+      <LiveRegion v-if="!decorative" :message="text" />
    </div>
    <span
       v-else
       class="k-spinner"
       :class="`k-spinner-${size}`"
-      :role="decorative ? void 0 : 'status'"
-      :aria-label="decorative ? void 0 : text"
       :aria-hidden="decorative ? 'true' : void 0"
-   />
+      ><LiveRegion v-if="!decorative" :message="text"
+   /></span>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 const props = defineProps({
   size: { type: String, required: false, default: "md" },
   label: { type: String, required: false },

package/dist/components/core/Spinner.vue.d.ts

@@ -48,7 +48,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -245,7 +245,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;

package/dist/components/core/Textarea.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -179,7 +180,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -244,6 +244,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -398,7 +399,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/core/VisuallyHidden.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -173,7 +174,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -225,6 +225,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -384,7 +385,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];

package/dist/components/data/Avatar.vue

@@ -2,9 +2,9 @@
    <span
       class="k-avatar"
       :class="[`k-avatar-${size}`, `k-avatar-${shape}`, { 'has-image': showImage }]"
-      :role="decorative ? void 0 : 'img'"
-      :aria-label="decorative ? void 0 : accessibleName"
-      :aria-hidden="decorative ? 'true' : void 0"
+      :role="hidden ? void 0 : 'img'"
+      :aria-label="hidden ? void 0 : accessibleName"
+      :aria-hidden="hidden ? 'true' : void 0"
    >
       <span class="k-avatar-fallback" aria-hidden="true">
          <slot name="fallback">
@@ -48,9 +48,12 @@ const failed = ref(false);
 const loaded = ref(false);
 const showImage = computed(() => Boolean(props.src && !failed.value));
 const accessibleName = computed(() => {
-  const base = props.alt ?? props.name ?? t("avatar.label");
-  return props.status ? `${base} (${t(`avatar.${props.status}`)})` : base;
+  const base = props.alt ?? props.name ?? "";
+  const status = props.status ? t(`avatar.${props.status}`) : "";
+  if (base && status) return `${base} (${status})`;
+  return base || status;
 });
+const hidden = computed(() => props.decorative || !accessibleName.value);
 const initials = computed(() => {
   const words = (props.name ?? "").trim().split(/\s+/).filter(Boolean);
   if (!words.length) return "";

package/dist/components/data/AvatarGroup.vue

@@ -15,7 +15,7 @@
             class="k-avatar k-avatar-more"
             :class="[`k-avatar-${size}`, `k-avatar-${shape}`]"
             role="img"
-            :aria-label="`${hidden} ${moreText}`"
+            :aria-label="moreText"
          >
             <span class="k-avatar-fallback" aria-hidden="true">+{{ hidden }}</span>
          </span>
@@ -26,6 +26,7 @@
 <script setup>
 import { computed } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { translateOr } from "../../locale";
 import Avatar from "./Avatar.vue";
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
@@ -35,10 +36,12 @@ const props = defineProps({
   label: { type: String, required: false },
   moreLabel: { type: String, required: false }
 });
-const { t } = useLocale();
-const moreText = computed(() => props.moreLabel ?? t("avatarGroup.more"));
+const { locale } = useLocale();
 const visible = computed(
   () => props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items
 );
 const hidden = computed(() => props.items.length - visible.value.length);
+const moreText = computed(
+  () => translateOr(locale.value, props.moreLabel, "avatarGroup.more", { count: hidden.value })
+);
 </script>

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

@@ -406,8 +406,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
-    size: BadgeSize;
     tone: Tone;
+    size: BadgeSize;
     variant: BadgeVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;