@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/components/templates/AppearanceSettings.vue

@@ -6,49 +6,54 @@
          :description="themeDescription"
          :level="level"
       >
-         <fieldset class="k-appearance-cards">
-            <legend class="k-visually-hidden">{{ themeLabelText }}</legend>
-            <label
-               v-for="option in themeOptions"
-               :key="option.value"
-               class="k-appearance-card"
-               :class="{ 'is-active': theme.preference.value === option.value }"
-            >
-               <input
-                  type="radio"
-                  class="k-visually-hidden"
-                  :name="themeName"
-                  :value="option.value"
-                  :checked="theme.preference.value === option.value"
-                  @change="theme.set(option.value)"
-               />
-               <span class="k-appearance-preview" :class="`is-${option.value}`" aria-hidden="true">
+         <template #default="{ headingId: themeHeadingId }">
+            <div class="k-appearance-cards" role="radiogroup" :aria-labelledby="themeHeadingId">
+               <label
+                  v-for="option in themeOptions"
+                  :key="option.value"
+                  class="k-appearance-card"
+                  :class="{ 'is-active': theme.preference.value === option.value }"
+               >
+                  <input
+                     type="radio"
+                     class="k-visually-hidden"
+                     :name="themeName"
+                     :value="option.value"
+                     :checked="theme.preference.value === option.value"
+                     @change="theme.set(option.value)"
+                  />
                   <span
-                     v-for="half in themeHalves(option.value)"
-                     :key="half"
-                     class="k-root k-appearance-app"
-                     :class="`is-${half}`"
-                     :data-theme="half"
+                     class="k-appearance-preview"
+                     :class="`is-${option.value}`"
+                     aria-hidden="true"
                   >
-                     <span class="k-appearance-side" />
-                     <span class="k-appearance-panel">
-                        <span class="k-appearance-line is-accent" />
-                        <span class="k-appearance-line" />
-                        <span class="k-appearance-line is-short" />
+                     <span
+                        v-for="half in themeHalves(option.value)"
+                        :key="half"
+                        class="k-root k-appearance-app"
+                        :class="`is-${half}`"
+                        :data-theme="half"
+                     >
+                        <span class="k-appearance-side" />
+                        <span class="k-appearance-panel">
+                           <span class="k-appearance-line is-accent" />
+                           <span class="k-appearance-line" />
+                           <span class="k-appearance-line is-short" />
+                        </span>
                      </span>
                   </span>
-               </span>
-               <span class="k-appearance-card-label">
-                  <Icon :name="option.icon" />
-                  {{ t(`theme.${option.value}`) }}
-                  <Icon
-                     v-if="theme.preference.value === option.value"
-                     name="check"
-                     class="k-appearance-card-check"
-                  />
-               </span>
-            </label>
-         </fieldset>
+                  <span class="k-appearance-card-label">
+                     <Icon :name="option.icon" />
+                     {{ t(`theme.${option.value}`) }}
+                     <Icon
+                        v-if="theme.preference.value === option.value"
+                        name="check"
+                        class="k-appearance-card-check"
+                     />
+                  </span>
+               </label>
+            </div>
+         </template>
       </SettingsGroup>
 
       <SettingsGroup
@@ -57,46 +62,47 @@
          :description="presetDescription"
          :level="level"
       >
-         <fieldset class="k-appearance-cards">
-            <legend class="k-visually-hidden">{{ presetLabelText }}</legend>
-            <label
-               v-for="option in presetList"
-               :key="option.value"
-               class="k-appearance-card"
-               :class="{ 'is-active': preset.preset.value === option.value }"
-            >
-               <input
-                  type="radio"
-                  class="k-visually-hidden"
-                  :name="presetName"
-                  :value="option.value"
-                  :checked="preset.preset.value === option.value"
-                  :aria-describedby="`${presetName}-${option.value}`"
-                  @change="preset.set(option.value)"
-               />
-               <span class="k-appearance-preview" aria-hidden="true">
-                  <span class="k-root k-appearance-app" :data-preset="option.value">
-                     <span class="k-appearance-side" />
-                     <span class="k-appearance-panel">
-                        <span class="k-appearance-sample">Aa</span>
-                        <span class="k-appearance-line is-accent" />
-                        <span class="k-appearance-line is-short" />
+         <template #default="{ headingId: presetHeadingId }">
+            <div class="k-appearance-cards" role="radiogroup" :aria-labelledby="presetHeadingId">
+               <label
+                  v-for="option in presetList"
+                  :key="option.value"
+                  class="k-appearance-card"
+                  :class="{ 'is-active': preset.preset.value === option.value }"
+               >
+                  <input
+                     type="radio"
+                     class="k-visually-hidden"
+                     :name="presetName"
+                     :value="option.value"
+                     :checked="preset.preset.value === option.value"
+                     :aria-describedby="`${presetName}-${option.value}`"
+                     @change="preset.set(option.value)"
+                  />
+                  <span class="k-appearance-preview" aria-hidden="true">
+                     <span class="k-root k-appearance-app" :data-preset="option.value">
+                        <span class="k-appearance-side" />
+                        <span class="k-appearance-panel">
+                           <span class="k-appearance-sample">Aa</span>
+                           <span class="k-appearance-line is-accent" />
+                           <span class="k-appearance-line is-short" />
+                        </span>
                      </span>
                   </span>
-               </span>
-               <span class="k-appearance-card-label">
-                  {{ presetTitle(option) }}
-                  <Icon
-                     v-if="preset.preset.value === option.value"
-                     name="check"
-                     class="k-appearance-card-check"
-                  />
-               </span>
-               <span :id="`${presetName}-${option.value}`" class="k-appearance-card-description">
-                  {{ t(`preset.${option.value}Description`) }}
-               </span>
-            </label>
-         </fieldset>
+                  <span class="k-appearance-card-label">
+                     {{ presetTitle(option) }}
+                     <Icon
+                        v-if="preset.preset.value === option.value"
+                        name="check"
+                        class="k-appearance-card-check"
+                     />
+                  </span>
+                  <span :id="`${presetName}-${option.value}`" class="k-appearance-card-description">
+                     {{ t(`preset.${option.value}Description`) }}
+                  </span>
+               </label>
+            </div>
+         </template>
       </SettingsGroup>
       <slot />
    </div>

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

@@ -1,7 +1,7 @@
 import type { ThemePreset } from '../../composables/usePreset';
-declare var __VLS_31: {};
+declare var __VLS_33: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_31) => any;
+    default?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     presets?: readonly ThemePreset[] | false;

package/dist/components/templates/AuthLayout.vue

@@ -1,10 +1,10 @@
 <template>
    <div class="k-auth" :class="`k-auth-${variant}`">
       <a class="k-auth-skip k-visually-hidden-focusable" :href="`#${mainId}`">{{ skipText }}</a>
-      <div v-if="themeSwitch || $slots.corner" class="k-auth-corner">
+      <header v-if="themeSwitch || $slots.corner" class="k-auth-corner">
          <slot name="corner" />
          <ThemeSwitch v-if="themeSwitch" variant="icon" :label="themeLabel" />
-      </div>
+      </header>
       <main :id="mainId" class="k-auth-main" tabindex="-1">
          <div class="k-auth-panel">
             <header class="k-auth-header">

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

@@ -32,6 +32,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;
@@ -190,7 +191,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"];
@@ -251,6 +251,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;
@@ -409,7 +410,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/templates/DashboardLayout.vue

@@ -7,6 +7,7 @@
       :variant="variant"
       :sidebar-label="sidebarLabel"
       :menu-label="menuLabel"
+      :close-label="closeLabel"
       :skip-label="skipLabel"
       :fluid="fluid"
       :topbar="hasDesktopTopbar"
@@ -15,12 +16,7 @@
       :view-transition="viewTransition"
    >
       <template #sidebar="{ collapsed: isCollapsed }">
-         <Sidebar
-            :label="navLabel"
-            :collapsible="collapsible"
-            :collapse-label="collapseLabel"
-            :expand-label="expandLabel"
-         >
+         <Sidebar :label="navLabel" :collapsible="collapsible" :collapse-label="collapseLabel">
             <template #header>
                <slot name="brand" :collapsed="isCollapsed">
                   <Brand
@@ -203,7 +199,7 @@ const props = defineProps({
   menuLabel: { type: String, required: false },
   skipLabel: { type: String, required: false },
   collapseLabel: { type: String, required: false },
-  expandLabel: { type: String, required: false },
+  closeLabel: { type: String, required: false },
   accountLabel: { type: String, required: false },
   themeLabel: { type: String, required: false }
 });

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

@@ -1,9 +1,9 @@
 import type { IconName } from '../../composables/useIcons';
 import type { BreadcrumbItem } from '../layout/types';
-import type { CommandGroup, CommandItem, MenuItem } from '../overlays/types';
+import type { CommandGroupLabelSlotProps, CommandItem, MenuItem } from '../overlays/types';
 import type { ThemePreset } from '../../composables/usePreset';
 import type { LinkTarget } from '../core/types';
-import type { AccountAction, BrandLogo, DashboardAccount, DashboardNavigation, DashboardSearch, DashboardSearchProps, DashboardVariant, SettingsModalAccount, SettingsModalSection, ThemeSwitchPlacement } from './types';
+import type { AccountAction, BrandLogo, DashboardAccount, DashboardNavigation, DashboardSearch, DashboardSearchProps, DashboardVariant, SettingsModalAccount, SettingsModalSection, SettingsSectionSlotProps, ThemeSwitchPlacement } from './types';
 declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         variant?: DashboardVariant;
@@ -40,7 +40,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         menuLabel?: string;
         skipLabel?: string;
         collapseLabel?: string;
-        expandLabel?: string;
+        closeLabel?: string;
         accountLabel?: string;
         themeLabel?: string;
     } & {
@@ -58,6 +58,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly variant?: import("../layout/types").AppShellVariant | undefined;
         readonly sidebarLabel?: string | undefined;
         readonly menuLabel?: string | undefined;
+        readonly closeLabel?: string | undefined;
         readonly skipLabel?: string | undefined;
         readonly fluid?: boolean | undefined;
         readonly topbar?: boolean | undefined;
@@ -72,6 +73,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly style?: import("vue").StyleValue;
         readonly results?: (string | number) | undefined;
         readonly placeholder?: string | undefined | undefined;
+        readonly dir?: string | undefined | undefined;
         readonly class?: import("vue").ClassValue;
         readonly role?: string | undefined | undefined;
         readonly 'aria-label'?: string | undefined | undefined;
@@ -227,7 +229,6 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly accesskey?: string | undefined | undefined;
         readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         readonly contextmenu?: string | undefined | undefined;
-        readonly dir?: string | undefined | undefined;
         readonly draggable?: (boolean | "true" | "false") | undefined;
         readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -302,12 +303,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         'search-empty'?: (props: {
             query: string;
         }) => unknown;
-        'search-group-label'?: (props: {
-            group?: CommandGroup<T>;
-            label?: string;
-            description?: string;
-            recent: boolean;
-        }) => unknown;
+        'search-group-label'?: (props: CommandGroupLabelSlotProps<T>) => unknown;
         'search-after-results'?: (props: {
             query: string;
             count: number;
@@ -317,14 +313,8 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
             close: () => void;
         }) => unknown;
     } & {
-        [key: `settings-section-${string}`]: ((props: {
-            section: SettingsModalSection;
-            close: () => void;
-        }) => unknown) | undefined;
-        [key: `settings-actions-${string}`]: ((props: {
-            section: SettingsModalSection;
-            close: () => void;
-        }) => unknown) | undefined;
+        [key: `settings-section-${string}`]: ((props: SettingsSectionSlotProps) => unknown) | undefined;
+        [key: `settings-actions-${string}`]: ((props: SettingsSectionSlotProps) => unknown) | undefined;
     };
     emit: ((evt: "accountSelect", item: MenuItem, event: Event) => void) & (((event: "update:open", value: boolean) => void) & ((event: "update:collapsed", value: boolean) => void) & ((event: "update:settingsOpen", value: boolean) => void) & ((event: "update:settingsSection", value: string | undefined) => void));
 }>) => import("vue").VNode & {

package/dist/components/templates/DetailPage.vue

@@ -20,6 +20,7 @@
       >
          <template v-if="loading && !title" #title>
             <Skeleton width="14rem" height="1.5rem" />
+            <span class="k-visually-hidden">{{ t("common.loading") }}</span>
          </template>
          <template v-if="status || $slots.badge" #badge>
             <slot name="badge">
@@ -73,7 +74,7 @@
                   :key="section.title ?? index"
                   :title="section.title"
                   :description="section.description"
-                  :level="2"
+                  :level="childLevel"
                   class="k-detail-section"
                >
                   <DescriptionList :items="section.items" layout="stacked" />
@@ -120,6 +121,7 @@ const backText = computed(() => props.backLabel ?? t("common.back"));
 const tabsText = computed(() => props.tabsLabel ?? t("detailPage.sections"));
 const asideText = computed(() => props.asideLabel ?? t("detailPage.details"));
 const errorText = computed(() => props.errorTitle ?? t("detailPage.error"));
+const childLevel = computed(() => Math.min(props.level + 1, 6));
 const tab = defineModel("tab", { type: [String, Number] });
 const slots = useSlots();
 const panelSlots = computed(

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

@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -194,7 +195,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;
@@ -250,6 +250,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -405,7 +406,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/templates/ErrorPage.vue

@@ -1,16 +1,20 @@
 <template>
    <div class="k-error-page" :class="{ 'is-fill': fill }">
-      <div v-if="brandName || brandIcon || brandLogo || $slots.brand" class="k-error-brand">
+      <component
+         :is="fill ? 'header' : 'div'"
+         v-if="brandName || brandIcon || brandLogo || $slots.brand"
+         class="k-error-brand"
+      >
          <slot name="brand">
             <Brand :name="brandName" :icon="brandIcon" :logo="brandLogo" :to="homeTo" size="sm" />
          </slot>
-      </div>
+      </component>
       <component :is="fill ? 'main' : 'div'" class="k-error-body">
          <div class="k-error-panel">
             <p class="k-error-code" aria-hidden="true">{{ code }}</p>
-            <h1 class="k-error-title">
+            <component :is="`h${level}`" class="k-error-title">
                <slot name="title">{{ resolvedTitle }}</slot>
-            </h1>
+            </component>
             <p v-if="resolvedMessage || $slots.message" class="k-error-message">
                <slot name="message">{{ resolvedMessage }}</slot>
             </p>
@@ -47,6 +51,7 @@ import { computed } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Brand from "./Brand.vue";
+import { isClient } from "../../internal/core/env";
 const props = defineProps({
   error: { type: [Object, null], required: false },
   statusCode: { type: Number, required: false },
@@ -60,6 +65,7 @@ const props = defineProps({
   brandIcon: { type: null, required: false },
   brandLogo: { type: String, required: false },
   fill: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 1 },
   onHome: { type: Function, required: false },
   onRetry: { type: Function, required: false }
 });
@@ -97,7 +103,7 @@ const resolvedMessage = computed(() => {
   return preset.value.message;
 });
 function goBack() {
-  if (typeof window === "undefined") return;
+  if (!isClient()) return;
   window.history.back();
 }
 </script>

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

@@ -1,17 +1,18 @@
 import type { IconName } from '../../composables/useIcons';
 import type { ErrorLike } from './types';
 import type { LinkTarget } from '../core/types';
-declare var __VLS_1: {}, __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_44: {};
+import type { HeadingLevel } from '../layout/types';
+declare var __VLS_7: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {}, __VLS_56: {};
 type __VLS_Slots = {} & {
-    brand?: (props: typeof __VLS_1) => any;
+    brand?: (props: typeof __VLS_7) => any;
 } & {
-    title?: (props: typeof __VLS_14) => any;
+    title?: (props: typeof __VLS_26) => any;
 } & {
-    message?: (props: typeof __VLS_16) => any;
+    message?: (props: typeof __VLS_28) => any;
 } & {
-    actions?: (props: typeof __VLS_18) => any;
+    actions?: (props: typeof __VLS_30) => any;
 } & {
-    default?: (props: typeof __VLS_44) => any;
+    default?: (props: typeof __VLS_56) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     error?: ErrorLike | null;
@@ -26,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     brandIcon?: IconName;
     brandLogo?: string;
     fill?: boolean;
+    level?: HeadingLevel;
     onHome?: () => void;
     onRetry?: () => void;
     innerHTML?: string | undefined | undefined;
@@ -232,6 +234,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     brandIcon?: IconName;
     brandLogo?: string;
     fill?: boolean;
+    level?: HeadingLevel;
     onHome?: () => void;
     onRetry?: () => void;
     innerHTML?: string | undefined | undefined;
@@ -427,6 +430,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     fill: boolean;
+    level: HeadingLevel;
     backLabel: string | false;
     homeTo: LinkTarget;
     homeLabel: string | false;

package/dist/components/templates/FormPage.vue

@@ -44,7 +44,7 @@
       </form>
 
       <div class="k-form-page-footer" :class="{ 'is-sticky': sticky, 'is-dirty': isDirty }">
-         <p class="k-form-page-status" aria-live="polite">
+         <p class="k-form-page-status">
             <span v-if="isDirty" class="k-form-page-dot" aria-hidden="true" />
             <slot name="status" :dirty="isDirty">{{ isDirty ? dirtyText : "" }}</slot>
          </p>
@@ -60,10 +60,11 @@
                   >{{ cancelText }}</Button
                >
                <Button
+                  ref="submitButton"
                   type="submit"
                   :form="formId"
                   :loading="isSaving"
-                  :disabled="requireDirty && !isDirty"
+                  :disabled="submitDisabled"
                   :icon="submitIcon"
                   >{{ submitText }}</Button
                >
@@ -74,8 +75,9 @@
 </template>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useId, useTemplateRef, watch } from "vue";
 import { useDirtyGuard } from "../../composables/useDirtyGuard";
+import { focusStable, hasFocusWithin } from "../../internal/core/focus";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Form from "../core/Form.vue";
@@ -115,6 +117,17 @@ const dirtyText = computed(() => props.dirtyMessage ?? t("common.unsavedChanges"
 const formId = useId();
 const isDirty = computed(() => props.dirty ?? Boolean(props.form?.dirty.value));
 const isSaving = computed(() => props.saving || Boolean(props.form?.submitting.value));
+const submitDisabled = computed(() => props.requireDirty && !isDirty.value);
+const submitButton = useTemplateRef("submitButton");
+watch(
+  submitDisabled,
+  (disabled) => {
+    if (!disabled || !hasFocusWithin(submitButton.value?.$el)) return;
+    const form = document.getElementById(formId);
+    if (form) focusStable(form);
+  },
+  { flush: "pre" }
+);
 const guard = useDirtyGuard(isDirty, {
   enabled: () => props.guard && !isSaving.value,
   title: props.guardTitle,

package/dist/components/templates/ListPage.vue

@@ -12,14 +12,14 @@
 
       <slot name="before" />
 
-      <Card v-if="error" class="k-list-state" padding="lg">
+      <Card v-if="error" class="k-list-state" padding="lg" role="alert">
          <slot name="error" :retry="() => emit('retry')">
             <EmptyState
                variant="plain"
                icon="exclamation-triangle"
                :title="errorText"
                :description="typeof error === 'string' ? error : void 0"
-               :level="2"
+               :level="childLevel"
             >
                <template #actions>
                   <Button
@@ -41,7 +41,7 @@
             :icon="emptyIcon"
             :title="emptyTitleText"
             :description="emptyDescription"
-            :level="2"
+            :level="childLevel"
          >
             <template v-if="$slots['empty-actions']" #actions>
                <slot name="empty-actions" />
@@ -123,7 +123,7 @@
                         icon="magnifying-glass"
                         :title="noResultsTitleText"
                         :description="isFiltered ? noResultsDescriptionText : void 0"
-                        :level="2"
+                        :level="childLevel"
                      >
                         <template v-if="isFiltered" #actions>
                            <Button size="sm" variant="soft" tone="neutral" @click="clearFilters">{{
@@ -153,12 +153,14 @@
          </template>
       </Card>
 
+      <LiveRegion :message="resultsMessage" />
+
       <slot />
    </div>
 </template>
 
 <script setup>
-import { computed, useSlots, watch } from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import { createCollator, readCell, sortRows } from "../../internal/data/rows";
@@ -171,6 +173,7 @@ import Table from "../data/Table.vue";
 import EmptyState from "../feedback/EmptyState.vue";
 import Card from "../layout/Card.vue";
 import PageHeader from "../layout/PageHeader.vue";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -208,7 +211,8 @@ const props = defineProps({
   clearLabel: { type: String, required: false },
   errorTitle: { type: String, required: false },
   retryLabel: { type: String, required: false },
-  selectedText: { type: Function, required: false }
+  selectedText: { type: Function, required: false },
+  resultsText: { type: Function, required: false }
 });
 const { locale, t } = useLocale();
 const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t("common.search"));
@@ -222,6 +226,7 @@ const noResultsDescriptionText = computed(
 const clearText = computed(() => props.clearLabel ?? t("listPage.clearFilters"));
 const errorText = computed(() => props.errorTitle ?? t("common.somethingWentWrong"));
 const retryText = computed(() => props.retryLabel ?? t("common.retry"));
+const childLevel = computed(() => Math.min(props.level + 1, 6));
 function selectedLabel(count) {
   return props.selectedText ? props.selectedText(count) : t("common.selected", { count });
 }
@@ -294,9 +299,17 @@ function clearFilters() {
   filter.value = Array.isArray(filter.value) ? [] : null;
   emit("clear");
 }
+const interacted = ref(false);
 watch([search, filterValues], () => {
+  interacted.value = true;
   if (page.value !== 1) page.value = 1;
 });
+const resultsMessage = computed(() => {
+  if (props.loading || props.error || isFirstRun.value) return "";
+  const total = resultTotal.value;
+  if (!interacted.value && total > 0) return "";
+  return props.resultsText ? props.resultsText(total) : t("listPage.results", { count: total });
+});
 watch(resultTotal, (total) => {
   if (props.loading) return;
   const last = Math.max(1, Math.ceil(total / pageSize.value));