@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/composables/useConfirm.mjs

@@ -1,8 +1,8 @@
 import { useLocale } from "./useLocale.mjs";
-import { confirmQueue, hasConfirmHost, nextConfirmId } from "../internal/overlays/confirm.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { enqueueDialog, hasConfirmHost, nativeDialogMessage } from "../internal/overlays/confirm.mjs";
 async function nativeConfirm(options, fallback) {
-  const message = [options.title, options.description].filter(Boolean).join("\n\n");
-  if (!window.confirm(message || fallback)) return false;
+  if (!window.confirm(nativeDialogMessage(options) || fallback)) return false;
   try {
     await options.onConfirm?.();
     return true;
@@ -14,10 +14,10 @@ export function useConfirm() {
   const { t } = useLocale();
   return function confirm(input = {}) {
     const options = typeof input === "string" ? { description: input } : input;
-    if (typeof window === "undefined") return Promise.resolve(false);
+    if (!isClient()) return Promise.resolve(false);
     if (!hasConfirmHost()) return nativeConfirm(options, t("common.areYouSure"));
     return new Promise((resolve) => {
-      confirmQueue.push({ ...options, kind: "confirm", id: nextConfirmId(), resolve });
+      enqueueDialog({ ...options, kind: "confirm", resolve });
     });
   };
 }

package/dist/composables/useField.d.ts

@@ -2,6 +2,7 @@ import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 export interface FieldContext {
     id: string;
     labelId: string;
+    hasLabel?: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
     describedBy: ComputedRef<string | undefined>;
     invalid: ComputedRef<boolean>;
@@ -9,6 +10,7 @@ export interface FieldContext {
     disabled: ComputedRef<boolean>;
     setControlError: (message: string | undefined, source?: object) => void;
     setLabelable?: (labelable: boolean | undefined, source: object) => void;
+    setRequiredHint?: (hint: boolean | undefined, source: object) => void;
 }
 export type FieldControlRole = 'primary' | 'auxiliary';
 export declare function useField(): FieldContext | null;
@@ -20,6 +22,7 @@ export interface FieldControlOptions {
     describedBy?: MaybeRefOrGetter<string | undefined>;
     role?: MaybeRefOrGetter<FieldControlRole | undefined>;
     labelable?: MaybeRefOrGetter<boolean | undefined>;
+    requiredHint?: MaybeRefOrGetter<boolean | undefined>;
 }
 export declare function useFieldControl(options?: FieldControlOptions): {
     readonly field: FieldContext | null;
@@ -28,6 +31,7 @@ export declare function useFieldControl(options?: FieldControlOptions): {
     required: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
     describedBy: ComputedRef<string | undefined>;
+    labelledBy: ComputedRef<string | undefined>;
     attrs: ComputedRef<{
         id: string | undefined;
         name: string | undefined;

package/dist/composables/useField.mjs

@@ -1,5 +1,6 @@
 import { computed, getCurrentScope, inject, onScopeDispose, toValue, watch } from "vue";
 import { FIELD_KEY, FIELD_ROLE_KEY } from "../internal/keys.mjs";
+import { joinIds } from "../internal/forms/control.mjs";
 export function useField() {
   return inject(FIELD_KEY, null);
 }
@@ -14,16 +15,18 @@ export function useFieldControl(options = {}) {
     () => Boolean(toValue(options.required) || field.value?.required.value)
   );
   const disabled = computed(() => Boolean(toValue(options.disabled) || parent?.disabled.value));
-  const describedBy = computed(() => {
-    const ids = [toValue(options.describedBy), field.value?.describedBy.value].filter(Boolean);
-    return ids.length ? ids.join(" ") : void 0;
-  });
+  const describedBy = computed(
+    () => joinIds(toValue(options.describedBy), field.value?.describedBy.value)
+  );
+  const labelledBy = computed(
+    () => field.value?.hasLabel?.value === false ? void 0 : field.value?.labelId
+  );
   const attrs = computed(() => ({
     id: id.value,
     name: field.value?.name.value,
     "aria-invalid": invalid.value ? "true" : void 0,
     "aria-describedby": describedBy.value,
-    "aria-required": required.value ? "true" : void 0,
+    "aria-required": required.value && !toValue(options.requiredHint) ? "true" : void 0,
     disabled: disabled.value || void 0
   }));
   const source = {};
@@ -35,9 +38,16 @@ export function useFieldControl(options = {}) {
         (labelable) => parent.setLabelable?.(labelable, source),
         { immediate: true }
       );
+    if (parent.setRequiredHint && options.requiredHint !== void 0)
+      watch(
+        () => auxiliary.value ? void 0 : toValue(options.requiredHint),
+        (hint) => parent.setRequiredHint?.(hint, source),
+        { immediate: true }
+      );
     onScopeDispose(() => {
       parent.setControlError(void 0, source);
       parent.setLabelable?.(void 0, source);
+      parent.setRequiredHint?.(void 0, source);
     });
   }
   return {
@@ -49,6 +59,7 @@ export function useFieldControl(options = {}) {
     required,
     disabled,
     describedBy,
+    labelledBy,
     attrs,
     auxiliary,
     setControlError

package/dist/composables/useFileDrop.mjs

@@ -1,5 +1,6 @@
 import { onScopeDispose, ref, toValue, watch } from "vue";
 import { filesTree, isHiddenName } from "../internal/forms/files.mjs";
+import { isClient } from "../internal/core/env.mjs";
 const claimedEvents = /* @__PURE__ */ new WeakSet();
 function carriesFiles(event) {
   return Array.from(event.dataTransfer?.types ?? []).includes("Files");
@@ -76,7 +77,7 @@ export function useFileDrop(target, options) {
     over.value = depth > 0 && !covered;
   }
   function watchWindow(enable) {
-    if (typeof window === "undefined" || watching === enable) return;
+    if (!isClient() || watching === enable) return;
     watching = enable;
     const method = enable ? "addEventListener" : "removeEventListener";
     window[method]("drop", reset, true);

package/dist/composables/useOverlay.mjs

@@ -1,6 +1,7 @@
 import { inject, markRaw, reactive } from "vue";
 import { hasHost } from "../internal/overlays/host.mjs";
 import { OVERLAY_CONTEXT_KEY, nextOverlayId, overlayStack } from "../internal/overlays/stack.mjs";
+import { isClient } from "../internal/core/env.mjs";
 function settleEntry(entry, result) {
   if (!entry.settled) {
     entry.settled = true;
@@ -11,7 +12,7 @@ function settleEntry(entry, result) {
 function openOverlay(component, props = {}, options = {}) {
   let entry;
   const promise = new Promise((resolve) => {
-    if (typeof window === "undefined") {
+    if (!isClient()) {
       resolve(void 0);
       return;
     }

package/dist/composables/usePreset.mjs

@@ -1,5 +1,5 @@
-import { nextTick, provide } from "vue";
-import { isClient, prefersReducedMotion } from "../internal/core/env.mjs";
+import { provide } from "vue";
+import { withViewTransition } from "../internal/core/transition.mjs";
 import { resolvePresetStore } from "../internal/core/preset.mjs";
 import { PRESET_KEY } from "../internal/keys.mjs";
 export {
@@ -28,15 +28,9 @@ export function usePreset() {
   const preset = resolvePresetStore();
   function set(value, options = {}) {
     if (value === preset.value) return;
-    const doc = isClient() ? document : void 0;
-    if (!doc?.startViewTransition || prefersReducedMotion() || options.transition === false) {
+    withViewTransition(() => {
       preset.value = value;
-      return;
-    }
-    doc.startViewTransition(async () => {
-      preset.value = value;
-      await nextTick();
-    });
+    }, options.transition !== false);
   }
   return { preset, options: presetOptions, set };
 }

package/dist/composables/usePrompt.mjs

@@ -1,22 +1,15 @@
 import { useLocale } from "./useLocale.mjs";
-import { confirmQueue, hasConfirmHost, nextConfirmId } from "../internal/overlays/confirm.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { enqueueDialog, hasConfirmHost, nativeDialogMessage } from "../internal/overlays/confirm.mjs";
 export function usePrompt() {
   const { t } = useLocale();
   return function prompt(input = {}) {
     const options = typeof input === "string" ? { title: input } : input;
-    if (typeof window === "undefined") return Promise.resolve(null);
-    if (!hasConfirmHost()) {
-      const message = [options.title, options.description].filter(Boolean).join("\n\n");
-      return Promise.resolve(window.prompt(message, options.value ?? ""));
-    }
+    if (!isClient()) return Promise.resolve(null);
+    if (!hasConfirmHost())
+      return Promise.resolve(window.prompt(nativeDialogMessage(options), options.value ?? ""));
     return new Promise((resolve) => {
-      confirmQueue.push({
-        title: t("prompt.title"),
-        ...options,
-        kind: "prompt",
-        id: nextConfirmId(),
-        resolve
-      });
+      enqueueDialog({ title: t("prompt.title"), ...options, kind: "prompt", resolve });
     });
   };
 }

package/dist/composables/useScrollLock.mjs

@@ -1,8 +1,9 @@
 import { getCurrentScope, onScopeDispose, readonly, ref, toValue, watch } from "vue";
+import { isClient } from "../internal/core/env.mjs";
 let holders = 0;
 let saved = null;
 function applyLock() {
-  if (typeof document === "undefined") return;
+  if (!isClient()) return;
   const root = document.documentElement;
   if (holders > 0 && !saved) {
     const hasScrollbar = window.innerWidth - root.clientWidth > 0;
@@ -24,7 +25,7 @@ function applyLock() {
 export function useScrollLock(active) {
   const locked = ref(false);
   function lock() {
-    if (locked.value || typeof document === "undefined") return;
+    if (locked.value || !isClient()) return;
     locked.value = true;
     holders += 1;
     applyLock();
@@ -39,7 +40,7 @@ export function useScrollLock(active) {
     watch(
       () => Boolean(toValue(active)),
       (value) => value ? lock() : unlock(),
-      { immediate: typeof document !== "undefined" }
+      { immediate: isClient() }
     );
   if (getCurrentScope()) onScopeDispose(unlock);
   return { locked: readonly(locked), lock, unlock };

package/dist/composables/useTheme.mjs

@@ -1,5 +1,5 @@
-import { computed, nextTick, provide } from "vue";
-import { isClient, prefersReducedMotion } from "../internal/core/env.mjs";
+import { computed, provide } from "vue";
+import { withViewTransition } from "../internal/core/transition.mjs";
 import {
   THEME_ORDER,
   listenToSystemTheme,
@@ -35,15 +35,7 @@ export function useTheme() {
   }
   function set(value, options = {}) {
     if (value === preference.value) return;
-    const doc = isClient() ? document : void 0;
-    if (!doc?.startViewTransition || prefersReducedMotion() || options.transition === false) {
-      apply(value);
-      return;
-    }
-    doc.startViewTransition(async () => {
-      apply(value);
-      await nextTick();
-    });
+    withViewTransition(() => apply(value), options.transition !== false);
   }
   function cycle() {
     set(THEME_ORDER[(THEME_ORDER.indexOf(preference.value) + 1) % THEME_ORDER.length] ?? "system");

package/dist/composables/useToast.mjs

@@ -1,5 +1,6 @@
 import { readonly } from "vue";
 import { nextToastId, nextToastVersion, toastList } from "../internal/overlays/toast.mjs";
+import { isClient } from "../internal/core/env.mjs";
 function normalize(input, options) {
   if (typeof input === "string") return { ...options, title: input };
   return { ...input, ...options };
@@ -7,7 +8,7 @@ function normalize(input, options) {
 function show(input, options) {
   const next = normalize(input, options);
   const id = next.id ?? nextToastId();
-  if (typeof window === "undefined") return id;
+  if (!isClient()) return id;
   const index = toastList.findIndex((item) => item.id === id);
   if (index !== -1) {
     const previous = toastList[index];

package/dist/editor/RichTextEditor.vue

@@ -62,7 +62,7 @@
             inputmode="url"
             placeholder="https://"
             :aria-label="text.linkUrl"
-            @keydown.esc.stop.prevent="closeLink"
+            @keydown.esc.stop.prevent="closeLink(true)"
          />
          <Button type="submit" size="xs" :label="text.applyLink" />
          <Button
@@ -80,10 +80,13 @@
       <div v-if="showCount" class="k-editor-footer">
          <span
             class="k-editor-count k-tabular"
-            :class="{ 'is-over': maxLength !== void 0 && characters >= maxLength }"
+            :class="{ 'is-over': atLimit }"
+            aria-hidden="true"
             >{{ countText }}</span
          >
+         <span :id="countId" class="k-visually-hidden">{{ countLabel }}</span>
       </div>
+      <LiveRegion v-if="maxLength !== void 0" :message="atLimit ? text.limitReached : ''" />
    </div>
 </template>
 
@@ -92,10 +95,12 @@ import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, useEditor } from "@tiptap/vue-3";
-import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, useId, useTemplateRef, watch } from "vue";
 import Button from "../components/core/Button.vue";
 import { useFieldControl } from "../composables/useField";
 import { useRovingTabStops } from "../internal/core/roving";
+import LiveRegion from "../internal/core/LiveRegion.vue";
+import { joinIds } from "../internal/forms/control";
 import { useLocale } from "../composables/useLocale";
 import { formatLocaleMessage } from "../locale";
 const icons = {
@@ -145,12 +150,14 @@ function isSameValue(current, value) {
   const incoming = value === "" ? null : value;
   return JSON.stringify(serialize(current)) === JSON.stringify(incoming ?? null);
 }
+const countId = useId();
 function describedBy() {
-  return control.describedBy.value;
+  return joinIds(control.describedBy.value, props.showCount && countId);
 }
 function labelledBy() {
   return props.label ? void 0 : control.field?.labelId;
 }
+const empty = computed(() => model.value === null || model.value === "");
 function contentAttributes() {
   return {
     id: control.id.value ?? "",
@@ -162,6 +169,8 @@ function contentAttributes() {
     "aria-describedby": describedBy() ?? "",
     "aria-required": control.required.value ? "true" : "",
     "aria-readonly": props.readonly ? "true" : "",
+    "aria-disabled": control.disabled.value ? "true" : "",
+    "aria-placeholder": props.placeholder && empty.value ? props.placeholder : "",
     class: "k-editor-prose",
     style: `min-height: ${props.minHeight};${props.maxHeight ? ` max-height: ${props.maxHeight};` : ""}`
   };
@@ -190,6 +199,13 @@ const countText = computed(() => {
   });
   return props.maxLength === void 0 ? base : `${characters.value} / ${props.maxLength}`;
 });
+const countLabel = computed(
+  () => props.maxLength === void 0 ? countText.value : formatLocaleMessage(locale.value.code, text.value.limit, {
+    count: characters.value,
+    max: props.maxLength
+  })
+);
+const atLimit = computed(() => props.maxLength !== void 0 && characters.value >= props.maxLength);
 watch(model, (value) => {
   const current = editor.value;
   if (!current || isSameValue(current, value)) return;
@@ -202,6 +218,10 @@ watch(
     () => props.minHeight,
     () => props.maxHeight,
     () => props.readonly,
+    () => props.placeholder,
+    () => props.showCount,
+    empty,
+    control.disabled,
     control.invalid,
     control.describedBy,
     control.required,
@@ -347,6 +367,7 @@ function itemAttributes(item) {
   return {
     "aria-label": item.label,
     title: item.label,
+    "data-k-editor-item": item.id,
     "aria-pressed": item.id === "undo" || item.id === "redo" ? void 0 : item.active(),
     disabled,
     onMousedown: (event) => event.preventDefault(),
@@ -362,9 +383,13 @@ function toggleLink() {
   linkOpen.value = true;
   nextTick(() => linkInputRef.value?.focus());
 }
-function closeLink() {
+function closeLink(toButton = false) {
   linkOpen.value = false;
-  editor.value?.commands.focus();
+  if (!toButton) {
+    editor.value?.commands.focus();
+    return;
+  }
+  toolbarRef.value?.querySelector('[data-k-editor-item="link"]')?.focus();
 }
 function normalizeUrl(value) {
   const trimmed = value.trim();

package/dist/editor/RichTextEditor.vue.d.ts

@@ -24,6 +24,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -179,7 +180,6 @@ declare const __VLS_export: 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;
@@ -238,6 +238,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -393,7 +394,6 @@ declare const __VLS_export: 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/editor/rich-text-editor.css

@@ -19,7 +19,7 @@
 }
 
 .k-editor:focus-within {
-   border-color: var(--k-accent);
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -140,6 +140,11 @@
    word-break: break-word;
 }
 
+.k-editor-prose:focus-visible {
+   outline: 2px solid transparent;
+   outline-offset: -2px;
+}
+
 .k-editor-prose > :first-child {
    margin-top: 0;
 }
@@ -239,7 +244,7 @@
 .k-editor-prose p.is-editor-empty:first-child::before {
    float: left;
    height: 0;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    content: attr(data-placeholder);
    pointer-events: none;
 }
@@ -253,9 +258,9 @@
    justify-content: flex-end;
    padding: 0.25rem 0.75rem 0.375rem;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-editor-count.is-over {
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }

package/dist/grid/DataGrid.vue

@@ -21,7 +21,7 @@
       <div
          class="k-data-grid-body"
          role="region"
-         :aria-label="label"
+         :aria-label="label ?? text.label"
          :aria-busy="loading ? 'true' : void 0"
          :style="autoHeight ? void 0 : { height }"
       >
@@ -34,7 +34,7 @@
             :default-col-def="defaultColDef"
             :get-row-id="props.rowIdKey ? getRowId : void 0"
             :loading="loading"
-            :locale-text="localeText"
+            :locale-text="gridLocaleText"
             :context="cellContext"
             :overlay-no-rows-template="noRowsTemplate"
             :overlay-loading-template="loadingTemplate"
@@ -50,16 +50,17 @@
             :suppress-cell-focus="false"
             v-on="gridEvents"
          />
-         <div v-else class="k-data-grid-placeholder" role="status" :aria-label="text.loading">
+         <div v-else class="k-data-grid-placeholder" aria-hidden="true">
             <Spinner decorative />
          </div>
-         <p v-if="copied" class="k-data-grid-toast" role="status">{{ text.copied }}</p>
+         <p v-if="copied" class="k-data-grid-toast" aria-hidden="true">{{ text.copied }}</p>
+         <LiveRegion :message="loading || !mounted ? text.loading : live.message.value" />
       </div>
 
       <div v-if="showFooter" class="k-data-grid-footer">
          <span class="k-data-grid-footer-info" aria-live="polite">
             <template v-if="selectedCount > 0">{{
-               format(text.selected, { count: selectedCount })
+               formatLocaleMessage(locale.code, text.selected, { count: selectedCount })
             }}</template>
          </span>
          <Pagination
@@ -79,7 +80,7 @@
          >
             <template #summary="{ start, end, total }">
                <span class="k-tabular">{{
-                  format(text.pageStatus, { from: start, to: end, total })
+                  formatLocaleMessage(locale.code, text.pageStatus, { from: start, to: end, total })
                }}</span>
             </template>
          </Pagination>
@@ -94,9 +95,12 @@ import Pagination from "../components/data/Pagination.vue";
 import Spinner from "../components/core/Spinner.vue";
 import { useCopy } from "../composables/useCopy";
 import { useLocale } from "../composables/useLocale";
+import LiveRegion from "../internal/core/LiveRegion.vue";
+import { formatLocaleMessage } from "../locale";
+import { useLiveMessage } from "../internal/core/live";
 import { readStorageJson, removeStorage, writeStorageJson } from "../internal/core/storage";
 import GridToolbar from "./GridToolbar.vue";
-import { escapeHtml, formatMessage as format } from "../internal/core/text";
+import { escapeHtml } from "../internal/core/text";
 import { registerGridModules } from "./modules";
 import { getGridTheme } from "./theme";
 registerGridModules();
@@ -129,15 +133,38 @@ const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "copy"]);
 const query = defineModel("query", { type: String, ...{ default: "" } });
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 25 } });
-const { locale } = useLocale();
+const { locale, t } = useLocale();
 const text = computed(() => ({
   ...locale.value.messages.grid,
   ...props.messages
 }));
 const cellContext = computed(() => ({
   messages: text.value,
-  locale: locale.value.code
+  locale: locale.value.code,
+  emptyText: t("common.empty"),
+  newTabText: t("common.opensInNewTab")
 }));
+const gridLocaleText = computed(() => ({
+  ariaChecked: text.value.checked,
+  ariaUnchecked: text.value.unchecked,
+  ariaIndeterminate: text.value.indeterminate,
+  ariaRowSelect: text.value.selectRowHint,
+  ariaRowDeselect: text.value.deselectRowHint,
+  ariaRowToggleSelection: text.value.toggleRowHint,
+  ariaRowSelectionDisabled: text.value.rowSelectionDisabled,
+  ariaRowSelectAll: text.value.selectAllHint,
+  ariaHeaderSelection: text.value.selectAllRows,
+  ariaSortableColumn: text.value.sortHint,
+  ariaLabelTooltip: text.value.tooltip,
+  ariaPageSizeSelectorLabel: text.value.rowsPerPage,
+  nextPage: text.value.nextPage,
+  previousPage: text.value.previousPage,
+  noRowsToShow: text.value.noRows,
+  loadingOoo: text.value.loading,
+  ...props.localeText
+}));
+const live = useLiveMessage();
+let announcedCount = null;
 const theme = computed(() => getGridTheme(props.density));
 const mounted = ref(false);
 const api = shallowRef(null);
@@ -156,7 +183,7 @@ const noRowsTemplate = computed(
   () => `<div class="k-data-grid-overlay"><span>${escapeHtml(text.value.noRows)}</span></div>`
 );
 const loadingTemplate = computed(
-  () => `<div class="k-data-grid-overlay"><span class="k-spinner k-spinner-md" role="status" aria-label="${escapeHtml(text.value.loading)}"></span></div>`
+  () => `<div class="k-data-grid-overlay"><span class="k-spinner k-spinner-md" aria-hidden="true"></span></div>`
 );
 const rowSelection = computed(() => {
   if (!props.selectable) return void 0;
@@ -170,8 +197,28 @@ const defaultColDef = computed(() => ({
   resizable: true,
   minWidth: 80,
   comparator: props.serverSort ? () => 0 : void 0,
-  valueFormatter: (params) => params.value === null || params.value === void 0 || params.value === "" ? "-" : String(params.value)
+  valueFormatter: (params) => isEmpty(params.value) ? "-" : String(params.value),
+  cellRenderer: renderCell
 }));
+function isEmpty(value) {
+  return value === null || value === void 0 || value === "";
+}
+function renderCell(params) {
+  const element = document.createElement("span");
+  if (!isEmpty(params.value)) {
+    element.textContent = params.valueFormatted ?? String(params.value);
+    return element;
+  }
+  const dash = document.createElement("span");
+  dash.className = "k-data-grid-empty";
+  dash.setAttribute("aria-hidden", "true");
+  dash.textContent = "-";
+  const hidden = document.createElement("span");
+  hidden.className = "k-visually-hidden";
+  hidden.textContent = cellContext.value.emptyText ?? "";
+  element.append(dash, hidden);
+  return element;
+}
 const storageName = computed(() => props.storageKey ? `k-grid:${props.storageKey}` : null);
 const hasStoredState = ref(false);
 const autoSizeStrategy = computed(
@@ -208,6 +255,19 @@ function syncPagination() {
   clientPageCount.value = Math.max(1, current.paginationGetTotalPages());
   page.value = current.paginationGetCurrentPage() + 1;
 }
+function onModelUpdated() {
+  syncPagination();
+  const current = api.value;
+  if (!current) return;
+  const count = props.serverPagination ? props.total : current.getDisplayedRowCount();
+  if (props.loading) return;
+  if (announcedCount !== null && announcedCount !== count)
+    live.announce(formatLocaleMessage(locale.value.code, text.value.rowCount, { count }));
+  announcedCount = count;
+}
+watch(copied, (value) => {
+  if (value) live.announce(text.value.copied);
+});
 function goToPage(next) {
   const target = Math.min(Math.max(1, next), pageCount.value);
   page.value = target;
@@ -241,7 +301,7 @@ const gridEvents = {
   sortChanged: onSortChanged,
   cellContextMenu: onCellContextMenu,
   paginationChanged: syncPagination,
-  modelUpdated: syncPagination,
+  modelUpdated: onModelUpdated,
   columnMoved: persistState,
   columnResized: persistState,
   columnVisible: persistState,

package/dist/grid/GridToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="k-data-grid-toolbar" role="toolbar" :aria-label="text.toolbar">
+   <div class="k-data-grid-toolbar" role="group" :aria-label="text.toolbar">
       <div v-if="searchable" class="k-data-grid-search">
          <Input
             v-model="draft"