nuxt-ui-tools 1.17.0 → 1.18.0

package/dist/runtime/i18n/locales/en.js

@@ -198,6 +198,7 @@ export default defineUiToolsLocale({
       },
       actions: {
         cancelButton: "Cancel",
+        closeButton: "Close form",
         nextButton: "Next",
         prevButton: "Back",
         resetButton: "Reset",
@@ -208,14 +209,14 @@ export default defineUiToolsLocale({
         modifiedOne: "{count} modified.",
         modifiedOther: "{count} modified.",
         navigation: "Form sections",
-        optional: "optional",
         remaining: "{count} left to complete.",
         resetSection: "Reset",
         sectionsOne: "{count} section",
         sectionsOther: "{count} sections",
         status: {
-          complete: "Complete",
-          invalid: "Has errors",
+          complete: "Completed",
+          invalid: "To fix",
+          optional: "Optional",
           pending: "To complete"
         },
         unmodified: "No unsaved changes.",
@@ -284,9 +285,13 @@ export default defineUiToolsLocale({
         rating: {
           value: "{value} of {max}"
         },
+        shell: {
+          collapse: "Collapse",
+          expand: "Expand",
+          reset: "Reset field"
+        },
         text: {
-          clear: "Clear",
-          defaultPlaceholder: "Enter a value"
+          clear: "Clear"
         },
         time: {
           clear: "Clear time",
@@ -294,6 +299,10 @@ export default defineUiToolsLocale({
           hour: "Hour",
           minute: "Minute"
         },
+        unsupported: {
+          description: 'The "{type}" field type cannot be displayed.',
+          title: "Unsupported field"
+        },
         upload: {
           cancel: "Cancel upload",
           failed: "Upload failed.",
@@ -314,6 +323,9 @@ export default defineUiToolsLocale({
           title: "Form data unavailable"
         }
       },
+      steps: {
+        fallback: "Step {number}"
+      },
       validation: {
         dateMax: "The date must be on or before {max}",
         dateMin: "The date must be on or after {min}",
@@ -692,8 +704,18 @@ export default defineUiToolsLocale({
       header: {
         gridView: "Grid view",
         refreshData: "Refresh data",
+        summaryView: "List view",
         tableView: "Table view"
       },
+      rowActions: {
+        label: "Actions for {label}",
+        labelAt: "Actions for row {position}"
+      },
+      selection: {
+        selectAll: "Select all rows",
+        selectRow: "Select {label}",
+        selectRowAt: "Select row {position}"
+      },
       selectionBar: {
         allResults: "All results",
         clear: "Clear selection",
@@ -732,9 +754,7 @@ export default defineUiToolsLocale({
         collapse: "Collapse row",
         collapseAll: "Collapse all rows",
         expand: "Expand row",
-        expandAll: "Expand all rows",
-        selectAll: "Select all rows",
-        selectRow: "Select row"
+        expandAll: "Expand all rows"
       }
     }
   },

package/dist/runtime/i18n/locales/fr.js

@@ -198,6 +198,7 @@ export default defineUiToolsLocale({
       },
       actions: {
         cancelButton: "Annuler",
+        closeButton: "Fermer le formulaire",
         nextButton: "Suivant",
         prevButton: "Pr\xE9c\xE9dent",
         resetButton: "R\xE9initialiser",
@@ -208,14 +209,14 @@ export default defineUiToolsLocale({
         modifiedOne: "{count} modifi\xE9e.",
         modifiedOther: "{count} modifi\xE9es.",
         navigation: "Sections du formulaire",
-        optional: "optionnel",
         remaining: "{count} \xE0 compl\xE9ter.",
         resetSection: "R\xE9initialiser",
         sectionsOne: "{count} section",
         sectionsOther: "{count} sections",
         status: {
-          complete: "Compl\xE8te",
-          invalid: "Contient des erreurs",
+          complete: "Compl\xE9t\xE9",
+          invalid: "\xC0 corriger",
+          optional: "Facultatif",
           pending: "\xC0 compl\xE9ter"
         },
         unmodified: "Aucune modification en cours.",
@@ -284,9 +285,13 @@ export default defineUiToolsLocale({
         rating: {
           value: "{value} sur {max}"
         },
+        shell: {
+          collapse: "Replier",
+          expand: "D\xE9plier",
+          reset: "R\xE9initialiser le champ"
+        },
         text: {
-          clear: "Effacer",
-          defaultPlaceholder: "Saisissez une valeur"
+          clear: "Effacer"
         },
         time: {
           clear: "Effacer l\u2019heure",
@@ -294,6 +299,10 @@ export default defineUiToolsLocale({
           hour: "Heure",
           minute: "Minute"
         },
+        unsupported: {
+          description: "Le type de champ \xAB {type} \xBB ne peut pas \xEAtre affich\xE9.",
+          title: "Champ non pris en charge"
+        },
         upload: {
           cancel: "Annuler le t\xE9l\xE9versement",
           failed: "\xC9chec du t\xE9l\xE9versement.",
@@ -314,6 +323,9 @@ export default defineUiToolsLocale({
           title: "Donn\xE9es du formulaire indisponibles"
         }
       },
+      steps: {
+        fallback: "\xC9tape {number}"
+      },
       validation: {
         dateMax: "La date doit \xEAtre au plus tard le {max}",
         dateMin: "La date doit \xEAtre au plus t\xF4t le {min}",
@@ -692,8 +704,18 @@ export default defineUiToolsLocale({
       header: {
         gridView: "Vue grille",
         refreshData: "Actualiser les donn\xE9es",
+        summaryView: "Vue liste",
         tableView: "Vue tableau"
       },
+      rowActions: {
+        label: "Actions pour {label}",
+        labelAt: "Actions pour la ligne {position}"
+      },
+      selection: {
+        selectAll: "S\xE9lectionner toutes les lignes",
+        selectRow: "S\xE9lectionner {label}",
+        selectRowAt: "S\xE9lectionner la ligne {position}"
+      },
       selectionBar: {
         allResults: "Tous les r\xE9sultats",
         clear: "Effacer la s\xE9lection",
@@ -732,9 +754,7 @@ export default defineUiToolsLocale({
         collapse: "Replier la ligne",
         collapseAll: "Replier toutes les lignes",
         expand: "D\xE9plier la ligne",
-        expandAll: "D\xE9plier toutes les lignes",
-        selectAll: "S\xE9lectionner toutes les lignes",
-        selectRow: "S\xE9lectionner la ligne"
+        expandAll: "D\xE9plier toutes les lignes"
       }
     }
   },

package/dist/runtime/i18n/types.d.ts

@@ -2,8 +2,11 @@ import type { DeepPartial } from '#ui-tools/shared/types/utils';
 export interface UiToolsTableMessages {
     header: {
         refreshData: string;
+        /** Names the table layout, and the toggle that leaves summary rows for the table. */
         tableView: string;
         gridView: string;
+        /** Toggle that brings summary rows back from the table. */
+        summaryView: string;
     };
     footer: {
         rowsSelected: string;
@@ -12,6 +15,7 @@ export interface UiToolsTableMessages {
         range: string;
         rangeEmpty: string;
         pageOf: string;
+        /** Accessible name of a page button: "Page {current} of {total}". */
         page: string;
         pageSizeOption: string;
         previousPage: string;
@@ -19,6 +23,21 @@ export interface UiToolsTableMessages {
         firstPage: string;
         lastPage: string;
     };
+    /** Accessible names of the selection checkboxes. */
+    selection: {
+        selectAll: string;
+        /** A record with a label: "Select {label}". */
+        selectRow: string;
+        /** A record without one, by its position on the page: "Select row {position}". */
+        selectRowAt: string;
+    };
+    /** Accessible names of a row's actions menu. */
+    rowActions: {
+        /** A record with a label: "Actions for {label}". */
+        label: string;
+        /** A record without one, by its position on the page: "Actions for row {position}". */
+        labelAt: string;
+    };
     controls: {
         addFilter: string;
         clearSearch: string;
@@ -55,8 +74,6 @@ export interface UiToolsTableMessages {
         collapse: string;
         expandAll: string;
         collapseAll: string;
-        selectRow: string;
-        selectAll: string;
     };
     columnsMenu: {
         sortAsc: string;
@@ -429,13 +446,13 @@ export interface UiToolsFormMessages {
         submitButton: string;
         cancelButton: string;
         resetButton: string;
+        /** Accessible name of the close button of a modal, drawer, or fullscreen form. */
+        closeButton: string;
     };
     /** Form page chrome. Counts use `Intl.PluralRules`: `One` for "one", `Other` otherwise. */
     page: {
         /** Accessible name of the section navigation when the schema gives it no title. */
         navigation: string;
-        /** Marks an optional section, in the navigation and on its card. */
-        optional: string;
         /** Badge under the page title and name of a section's dirty marker. */
         unsavedChanges: string;
         /** Button of a modified section that puts its values back. */
@@ -452,11 +469,19 @@ export interface UiToolsFormMessages {
         modifiedOther: string;
         /** Navigation summary of a form with dirty checking and no change. */
         unmodified: string;
-        /** Accessible status of a navigation entry. */
+        /**
+         * Where a section stands: the accessible status of a navigation entry, and the tag that marks
+         * an optional section nothing was entered in (`optional`), in the navigation and on its card.
+         */
         status: {
+            /** Nothing required is missing and no field shows an error. */
             complete: string;
-            pending: string;
+            /** A field shows an error, once the user left it or tried to submit. */
             invalid: string;
+            /** An optional section nobody entered a value in. */
+            optional: string;
+            /** A required field has no value yet. */
+            pending: string;
         };
     };
     states: {
@@ -466,6 +491,10 @@ export interface UiToolsFormMessages {
             action: string;
         };
     };
+    steps: {
+        /** Name of a step that declares no title: "Step {number}". */
+        fallback: string;
+    };
     validation: {
         required: string;
         dateMin: string;
@@ -473,7 +502,6 @@ export interface UiToolsFormMessages {
     };
     fields: {
         text: {
-            defaultPlaceholder: string;
             clear: string;
         };
         description: {
@@ -562,6 +590,17 @@ export interface UiToolsFormMessages {
             number: string;
             clear: string;
         };
+        /** Chrome around a stateful field: its collapsible body and its dirty-reset button. */
+        shell: {
+            collapse: string;
+            expand: string;
+            reset: string;
+        };
+        /** Fallback for a field kind that has no renderer: "{type}" is the kind. */
+        unsupported: {
+            title: string;
+            description: string;
+        };
     };
 }
 export interface UiToolsDashboardMessages {

package/dist/runtime/table/components/actions/row-actions.d.vue.ts

@@ -12,8 +12,10 @@ type __VLS_Props = {
 declare var __VLS_8: {
     items: DropdownMenuItem[][];
     open: boolean;
+    label: string | undefined;
 }, __VLS_24: {
     items: DropdownMenuItem[][];
+    label: string | undefined;
     open: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/table/components/actions/row-actions.vue

@@ -6,6 +6,7 @@ import { computed, ref, useAttrs } from "vue";
 import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { useTableRowActionScope } from "../../composables/use-table-row-actions";
+import { useTableRowLabels } from "../../composables/use-table-row-labels";
 import { createRowActionDropdownGroups, resolveVisibleTableRowActions } from "../../utils";
 defineOptions({
   inheritAttrs: false
@@ -40,6 +41,10 @@ function runSheetItem(item) {
   item.onSelect?.(new Event("select"));
 }
 const scope = useTableRowActionScope();
+const labels = useTableRowLabels();
+const label = computed(
+  () => scope ? labels.rowActions({ index: scope.value.index, row: scope.value.row }) : void 0
+);
 const portal = computed(() => props.portal ?? true);
 const visibleActions = computed(() => {
   if (!scope?.value) {
@@ -66,7 +71,7 @@ const items = computed(() => {
     v-if="scope && visibleActions.length && items.length && isMobile"
     v-model:open="sheetOpen"
     direction="bottom"
-    title="Actions"
+    :title="label"
     :ui="{
   header: 'sr-only',
   content: 'nut-dl-sheet rounded-t-[16px]',
@@ -74,7 +79,7 @@ const items = computed(() => {
   body: 'p-0 pb-4'
 }"
   >
-    <slot :items="items" :open="sheetOpen" />
+    <slot :items="items" :open="sheetOpen" :label="label" />
     <template #body>
       <div class="px-[10px] pt-2">
         <template v-for="(item, index) in sheetItems" :key="index">
@@ -111,7 +116,7 @@ const items = computed(() => {
     v-bind="attrs"
   >
     <template #default="slotProps">
-      <slot v-bind="slotProps" :items="items" />
+      <slot v-bind="slotProps" :items="items" :label="label" />
     </template>
   </UDropdownMenu>
 </template>

package/dist/runtime/table/components/actions/row-actions.vue.d.ts

@@ -12,8 +12,10 @@ type __VLS_Props = {
 declare var __VLS_8: {
     items: DropdownMenuItem[][];
     open: boolean;
+    label: string | undefined;
 }, __VLS_24: {
     items: DropdownMenuItem[][];
+    label: string | undefined;
     open: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/table/components/data-list/data-list-content.vue

@@ -44,6 +44,7 @@ const viewportStyle = computed(() => {
   }
   return void 0;
 });
+const presentation = computed(() => internals.rowSummary.active.value ? "summary" : "table");
 const rootUi = computed(() => dataListUi.ui.value.content?.ui);
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
@@ -136,7 +137,12 @@ watch(
         mode="out-in"
       >
         <slot v-if="internals.controls.tableLayout.value === 'table'" name="table" :rows="rows">
-          <DataListTable :size="resolvedSize" :fill="fit !== 'content'" class="min-h-0 flex-1">
+          <DataListTable
+            :key="presentation"
+            :size="resolvedSize"
+            :fill="fit !== 'content'"
+            class="min-h-0 flex-1"
+          >
             <template v-if="$slots.error" #error="scope">
               <slot name="error" v-bind="scope" />
             </template>

package/dist/runtime/table/components/data-list/data-list-default.d.vue.ts

@@ -5,21 +5,21 @@ type __VLS_Props = {
     height?: string | number;
     ui?: DataListDefaultUi;
 };
-declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
+declare var __VLS_1: {}, __VLS_18: {}, __VLS_57: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_55: {
+}, __VLS_60: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: any, __VLS_61: {
+}, __VLS_63: any, __VLS_66: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;
     clearQuery: () => void;
-}, __VLS_64: {}, __VLS_67: {}, __VLS_70: {}, __VLS_80: {
+}, __VLS_69: {}, __VLS_72: {}, __VLS_75: {}, __VLS_85: {
     loadedCount: number;
-}, __VLS_83: {
+}, __VLS_88: {
     error: {};
     retry: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
-}, __VLS_86: {
+}, __VLS_91: {
     loadedCount: number;
     totalCount: number | null;
 };
@@ -28,25 +28,25 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_18) => any;
 } & {
-    'initial-loading'?: (props: typeof __VLS_52) => any;
+    'initial-loading'?: (props: typeof __VLS_57) => any;
 } & {
-    loading?: (props: typeof __VLS_55) => any;
+    loading?: (props: typeof __VLS_60) => any;
 } & {
-    error?: (props: typeof __VLS_58) => any;
+    error?: (props: typeof __VLS_63) => any;
 } & {
-    empty?: (props: typeof __VLS_61) => any;
+    empty?: (props: typeof __VLS_66) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_64) => any;
+    'empty-table'?: (props: typeof __VLS_69) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_67) => any;
+    'empty-grid'?: (props: typeof __VLS_72) => any;
 } & {
-    refreshing?: (props: typeof __VLS_70) => any;
+    refreshing?: (props: typeof __VLS_75) => any;
 } & {
-    'loading-more'?: (props: typeof __VLS_80) => any;
+    'loading-more'?: (props: typeof __VLS_85) => any;
 } & {
-    'load-more-error'?: (props: typeof __VLS_83) => any;
+    'load-more-error'?: (props: typeof __VLS_88) => any;
 } & {
-    end?: (props: typeof __VLS_86) => any;
+    end?: (props: typeof __VLS_91) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/table/components/data-list/data-list-default.vue

@@ -15,6 +15,7 @@ import DataListRefresh from "./data-list-refresh.vue";
 import DataListSearch from "./data-list-search.vue";
 import DataListSelectionActions from "./data-list-selection-actions.vue";
 import DataListSortMenu from "./data-list-sort-menu.vue";
+import DataListViewToggle from "./data-list-view-toggle.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -98,6 +99,8 @@ function humanizeKey(value) {
           <DataListColumnPanel v-if="controls.columns" />
           <DataListRefresh v-if="controls.refresh" />
           <DataListLayoutSwitch v-if="controls.layout" />
+          <!-- Offset pagination carries the toggle in its footer; the other modes have none. -->
+          <DataListViewToggle v-if="internals.pagination.mode.value !== 'offset'" />
         </div>
       </div>
     </header>

package/dist/runtime/table/components/data-list/data-list-default.vue.d.ts

@@ -5,21 +5,21 @@ type __VLS_Props = {
     height?: string | number;
     ui?: DataListDefaultUi;
 };
-declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
+declare var __VLS_1: {}, __VLS_18: {}, __VLS_57: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_55: {
+}, __VLS_60: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: any, __VLS_61: {
+}, __VLS_63: any, __VLS_66: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;
     clearQuery: () => void;
-}, __VLS_64: {}, __VLS_67: {}, __VLS_70: {}, __VLS_80: {
+}, __VLS_69: {}, __VLS_72: {}, __VLS_75: {}, __VLS_85: {
     loadedCount: number;
-}, __VLS_83: {
+}, __VLS_88: {
     error: {};
     retry: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
-}, __VLS_86: {
+}, __VLS_91: {
     loadedCount: number;
     totalCount: number | null;
 };
@@ -28,25 +28,25 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_18) => any;
 } & {
-    'initial-loading'?: (props: typeof __VLS_52) => any;
+    'initial-loading'?: (props: typeof __VLS_57) => any;
 } & {
-    loading?: (props: typeof __VLS_55) => any;
+    loading?: (props: typeof __VLS_60) => any;
 } & {
-    error?: (props: typeof __VLS_58) => any;
+    error?: (props: typeof __VLS_63) => any;
 } & {
-    empty?: (props: typeof __VLS_61) => any;
+    empty?: (props: typeof __VLS_66) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_64) => any;
+    'empty-table'?: (props: typeof __VLS_69) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_67) => any;
+    'empty-grid'?: (props: typeof __VLS_72) => any;
 } & {
-    refreshing?: (props: typeof __VLS_70) => any;
+    refreshing?: (props: typeof __VLS_75) => any;
 } & {
-    'loading-more'?: (props: typeof __VLS_80) => any;
+    'loading-more'?: (props: typeof __VLS_85) => any;
 } & {
-    'load-more-error'?: (props: typeof __VLS_83) => any;
+    'load-more-error'?: (props: typeof __VLS_88) => any;
 } & {
-    end?: (props: typeof __VLS_86) => any;
+    end?: (props: typeof __VLS_91) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/table/components/data-list/data-list-layout-switch.vue

@@ -8,6 +8,10 @@ import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoin
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
+const LAYOUT_LABEL_KEYS = {
+  grid: "table.header.gridView",
+  table: "table.header.tableView"
+};
 const props = defineProps({
   size: { type: String, required: false },
   labels: { type: Boolean, required: false },
@@ -59,21 +63,15 @@ function setLayout(layout) {
       :size="resolvedSize"
       :class="mergeDataListUiClass('nut-dl-layout', void 0, resolvedUi.root)"
     >
-      <UTooltip
-        v-for="layout in order"
-        :key="layout"
-        :text="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
-      >
+      <UTooltip v-for="layout in order" :key="layout" :text="t(LAYOUT_LABEL_KEYS[layout])">
         <UButton
           v-bind="buttonProps(internals.controls.tableLayout.value === layout)"
           :data-active="internals.controls.tableLayout.value === layout"
           :icon="
   controlProps.icons?.[layout] ?? (layout === 'table' ? 'i-lucide-menu' : 'i-lucide-box')
 "
-          :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
-          :aria-label="
-  layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')
-"
+          :label="labels ? t(LAYOUT_LABEL_KEYS[layout]) : void 0"
+          :aria-label="t(LAYOUT_LABEL_KEYS[layout])"
           :ui="{
   base: mergeDataListUiClass('nut-dl-layout__btn', void 0, resolvedUi.trigger),
   label: resolvedUi.triggerLabel,

package/dist/runtime/table/components/data-list/data-list-root.vue

@@ -7,6 +7,7 @@ import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoin
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiConfig } from "../../utils";
+import { layerDataListMobileDefaults } from "../../utils/mobile-defaults";
 const props = defineProps({
   table: { type: Object, required: true },
   locale: { type: Object, required: false },
@@ -26,14 +27,12 @@ provideDataListUi(
       props.density,
       props.size
     );
-    if (!isMobile.value || !merged.mobile) {
+    if (!isMobile.value) {
       return merged;
     }
-    return mergeDataListUiConfig(
-      merged,
-      merged.mobile,
-      merged.mobile.density,
-      merged.mobile.control?.size
+    const { mobile } = merged;
+    return layerDataListMobileDefaults(
+      mobile ? mergeDataListUiConfig(merged, mobile, mobile.density, mobile.control?.size) : merged
     );
   })
 );

package/dist/runtime/table/components/data-list/data-list-sort-menu.vue

@@ -39,7 +39,9 @@ const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.sortMenu?.ui,
   ...props.ui
 }));
-const visible = computed(() => props.layouts.includes(internals.controls.tableLayout.value));
+const visible = computed(
+  () => props.layouts.includes(internals.controls.tableLayout.value) || internals.rowSummary.active.value && sortKeys.value.length > 0
+);
 const triggerControlProps = computed(
   () => mergeDataListProps(
     { color: "neutral", size: resolvedSize.value, variant: "outline" },

package/dist/runtime/table/components/data-list/data-list-table.d.vue.ts

@@ -1,13 +1,20 @@
 import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+/**
+ * The table layout. Summary rows are its compact presentation, so they share its states and slots.
+ * The template carries no comment on purpose: in development a root comment turns the root into a
+ * fragment, which a transition around this component cannot leave, so the next view never comes in.
+ */
 type __VLS_Props = {
     height?: string;
     size?: DataListControlSize;
     fill?: boolean;
     ui?: DataListTableUi;
 };
-declare var __VLS_10: string, __VLS_11: any;
+declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;