@synopackageland/ui 0.25.11 → 0.25.13

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+## 0.25.13 (2026-11-13)
+
+### Lists
+
+- **DetailList: sub-rows inside an expanded DataGrid row.** Each line has a leading cell (a `Tag`), a text with a secondary text and trailing actions; the leading cells share one column as wide as the widest, and the list starts under the Name column's text. `max` shows that many lines and a summary line counts the rest ("3 more"), with its own leading, text and trailing slots for a "Show all" action. Under 448px wide the parts stack. Exported with its `DetailListItem` type
+- **The DataGrid expand slot gets `indent`.** The pixels from the row's start to the first data column's text (past the chevron and checkbox columns), also set as `--ui-grid-detail-indent` on the expand row; `DataGridExpandSlotProps` is now exported
+
+### Docs
+
+- `expandable.type: 'cell'` draws no chevron column and ignores double click; a cell slot opens the row with its `toggleExpand` prop. The type comment and README now say so
+
+## 0.25.12 (2026-11-12)
+
+### Phone
+
+- **Back to the App list inside the Package Land phone app.** On a root page in the phone app (its bridge lists the `close` feature), the phone bar starts with a back arrow that asks the app to return to its App list; a browser, a sub-page and wider layouts never show it. When the page hides the bar, the first PageToolbar or SectionTabs row holds the button, so it costs no extra row; with no such row the bar is drawn for it. Apps need no change (docs/adaptive-layout.md)
+- **A sub-page's Back draws the shared arrow** instead of a chevron, matching the phone app's Back, and both Back buttons tint while pressed
+
 ## 0.25.11 (2026-11-12)
 
 ### Phone layout

package/README.md

@@ -548,7 +548,7 @@ DSM-style application building blocks:
 - SettingsPage / Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
 - Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology
-- DataTable / DataGrid
+- DataTable / DataGrid / DetailList (sub-rows inside an expanded DataGrid row)
 - TreeView
 - FilePicker
 - AppRoot (DSM-embedded app root)
@@ -903,6 +903,20 @@ for one column.
 - **Selection.** The header box selects every selectable row of its scope: the current page (`select-all-scope="page"`, the default) or every row the filter leaves, across pages (`"all"`). It is checked when all of them are selected, mixed (`aria-checked="mixed"`, a dash) when some are, and a click when all are clears them; keys outside the scope (another page, rows the filter hides) are kept. `row-selectable(row)` returning `false` disables a row's box, and the header box skips that row and keeps its state. `row-select-disabled-reason(row)` says why: the box is wrapped in a Tab stop with that text as its accessible name and as a `Tooltip`, so the reason is visible on hover and keyboard focus, not only in a native `title`. With no selectable row the header box is disabled.
 - **Footer bar.** `footer` shows the DSM bar with the item count; `refreshable` adds the refresh button (`@refresh`, `refreshing` spins it). Without `footer` it appears when there is more than one page, a page-size choice that matters, or a `#footer` slot.
 - **Localisation.** Every built-in string goes through `labels`: `empty`, `noMatch`, `items(count)`, `filtered(count, total)`, `page(page, count)`, `previous`, `next`, `pageSize`, `refresh`, `selectAll`, `selectRow(key, row)`, `resizeColumn(label)`, `columns`, `resetColumns`, `hiddenByWidth`. `emptyText` still works.
+- **Expanded rows.** `:expandable="{ type: 'row' }"` adds a chevron column (double click toggles too) and renders the `#expand` slot under an open row; bind `v-model:expanded-keys` or call the exposed `expandRow` / `collapseRow` / `expandAllRows`. `type: 'cell'` draws no chevron column and ignores double click: a `#cell-<key>` slot opens the row itself with its `toggleExpand` and `expanded` props, so give that control an `aria-expanded`. The slot gets `indent`, the pixels to the first data column's text, also set as `--ui-grid-detail-indent` on the expand row.
+- **Detail rows.** For sub-rows in that slot (the copies of a file, the members of a group) use `DetailList`: it starts under the Name column's text, puts each line's `#leading` (a `Tag`) in a column as wide as the widest, then the item's `text` and `secondary` (or the default slot), then `#trailing` actions (an `IconButton` with a `label`, or a `variant="text"` Button). `max` shows that many lines and a summary line counts the rest ("3 more", or `summary` / `#summary`); `#summary-leading` and `#summary-trailing` fill that line, for example a "Show all 20 copies" button that opens a `Sheet`. A `#summary` slot keeps the line even when nothing is hidden. Under 448px the lead, text and actions stack.
+
+  ```vue
+  <DataGrid :columns="columns" :rows="files" selectable :expandable="{ type: 'row' }">
+    <template #expand="{ row }">
+      <DetailList :items="row.copies" :max="5" :label="`Copies of ${row.name}`">
+        <template #leading="{ item }"><Tag :label="item.role" :appearance="item.role === 'Keep' ? 'success' : 'warning'" /></template>
+        <template #trailing="{ item }"><Button variant="text" @click="toggle(item)">Keep</Button></template>
+        <template #summary-trailing><Button variant="text" @click="showAll(row)">Show all {{ row.copies.length }} copies</Button></template>
+      </DetailList>
+    </template>
+  </DataGrid>
+  ```
 - **Loading.** `loading` masks the table with a centred indicator; `loading-text` adds a message.
 - **Footer layout.** The footer has top and bottom divider lines and a separator
   before Refresh. In a flex column with a bounded height, the grid fills the

package/dist/components/app/app-layout/BackArrowIcon.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    size?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-layout/ShellBackButton.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-layout/back-arrow.json.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+  "name": "back-arrow",
+  "size": 24,
+  "stroke": 1.75,
+  "lines": [[5, 12, 19, 12], [5, 12, 11, 6], [5, 12, 11, 18]]
+}
+;
+
+export default _default;

package/dist/components/app/app-layout/shellBack.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * Back to the phone app's App list (docs/mobile-native.md, "Back to the App
+ * list"). On a root page AppLayout leads its phone bar with it. When that bar
+ * is not drawn (a tab page with `phone-bar-title="none"` and nothing else in
+ * the bar), the page's first row takes it instead: the first PageToolbar,
+ * SectionTabs row or PageHeader in the page, in document order, so it costs
+ * no row of its own. With no such row the bar is drawn for it.
+ */
+export interface ShellBackHost {
+    /** The page's first row should lead with Back. */
+    readonly wanted: Readonly<Ref<boolean>>;
+    /** The row that holds Back now (its registration), if any. */
+    readonly owner: Readonly<Ref<symbol | undefined>>;
+    /** Registers a row by a stable key, so a row whose element changes keeps its turn. */
+    register(key: symbol, element: () => HTMLElement | null | undefined): () => void;
+    refresh(): void;
+}
+export declare const APP_SHELL_BACK_KEY: InjectionKey<ShellBackHost>;
+/** AppLayout's side: the rows that could hold Back, and the one that does. */
+export declare function createShellBackHost(wanted: Readonly<Ref<boolean>>): ShellBackHost;
+/** A row's side: true while this row leads with Back. */
+export declare function useShellBackRow(element: () => HTMLElement | null | undefined): ComputedRef<boolean>;

package/dist/components/app/page-toolbar/PageToolbar.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -31,15 +31,15 @@ type __VLS_Props = {
     /** On a phone's section list, whether the selected section is pushed (`v-model:pushed`). */
     pushed?: boolean;
 };
-declare var __VLS_8: {}, __VLS_35: {}, __VLS_44: `panel-${string}`, __VLS_45: {}, __VLS_48: `panel-${string}`, __VLS_49: {};
+declare var __VLS_8: {}, __VLS_42: {}, __VLS_51: `panel-${string}`, __VLS_52: {}, __VLS_55: `panel-${string}`, __VLS_56: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
 } & {
-    [K in NonNullable<typeof __VLS_48>]?: (props: typeof __VLS_49) => any;
+    [K in NonNullable<typeof __VLS_55>]?: (props: typeof __VLS_56) => any;
 } & {
     actions?: (props: typeof __VLS_8) => any;
 } & {
-    actions?: (props: typeof __VLS_35) => any;
+    actions?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -63,7 +63,11 @@ export type DataGridGroup = {
     compare?: (a: unknown, b: unknown) => number;
 };
 export type DataGridExpandable = {
-    /** `row` toggles on double click as well; `cell` needs the chevron button only. */
+    /**
+     * `row` (default) adds a chevron column and toggles on double click as well.
+     * `cell` draws no chevron column and ignores double click: a cell slot
+     * toggles the row itself with its `toggleExpand` and `expanded` props.
+     */
     type?: 'row' | 'cell';
     /** Slot name of the expanded content; defaults to `expand`. */
     slot?: string;
@@ -129,6 +133,12 @@ export type DataGridSelectionSlotProps = {
 export type DataGridExpandSlotProps = {
     row: Record<string, unknown>;
     index: number;
+    /**
+     * Pixels from the row's start to the text of the first data column (the
+     * Name column). The expand row also sets it as `--ui-grid-detail-indent`,
+     * which `DetailList` follows.
+     */
+    indent: number;
 };
 export type { DataGridLabels } from './labels';
 export type { ResolvedDataGridLabels } from './labels';

package/dist/components/composite/detail-list/DetailList.vue.d.ts

@@ -0,0 +1,54 @@
+import { DetailListItem } from './types';
+declare const __VLS_export: <T extends DetailListItem>(__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<{
+        items: T[];
+        /** Show at most this many lines; the rest are counted on the summary line. */
+        max?: number;
+        /** Text of the summary line; defaults to "{count} more" when lines are hidden. */
+        summary?: string;
+        /** Accessible name of the list, e.g. "Copies of ubuntu.iso". */
+        label?: string;
+        /** Width of the leading column, e.g. `120px`; defaults to the widest leading cell. */
+        leadingWidth?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        leading?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        trailing?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        'summary-leading'?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+        summary?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+        'summary-trailing'?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/composite/detail-list/types.d.ts

@@ -0,0 +1,8 @@
+/** One line of a DetailList; `key` must be unique in the list. */
+export type DetailListItem = {
+    key: string | number;
+    /** Main text, e.g. a path; a default slot replaces it. */
+    text?: string;
+    /** Quieter text after the main text, e.g. a date. */
+    secondary?: string;
+};

package/dist/grid.js

@@ -3952,6 +3952,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   "Free now {now}, free after {after}": "Free now {now}, free after {after}",
   Sections: "Sections",
   "Back to the previous page": "Back",
+  "Back to the App list": "Back to apps",
   "Page actions": "Page actions",
   Slider: "Slider",
   "Increase value": "Increase value",
@@ -4083,6 +4084,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   "Show password": "Show password",
   "Hide password": "Hide password",
   "Learn more": "Learn more",
+  "{count} more": "{count} more",
   "Show less": "Show less",
   "Note:": "Note:",
   "Copy path": "Copy path",
@@ -4215,6 +4217,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "目前可用 {now}，清理後可用 {after}",
     Sections: "區段",
     "Back to the previous page": "返回",
+    "Back to the App list": "返回 App 列表",
     "Page actions": "頁面動作",
     Slider: "滑桿",
     "Increase value": "增加數值",
@@ -4346,6 +4349,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "顯示密碼",
     "Hide password": "隱藏密碼",
     "Learn more": "了解更多",
+    "{count} more": "還有 {count} 項",
     "Show less": "收合",
     "Note:": "附註：",
     "Copy path": "複製路徑",
@@ -4477,6 +4481,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "当前可用 {now}，清理后可用 {after}",
     Sections: "区段",
     "Back to the previous page": "返回",
+    "Back to the App list": "返回应用列表",
     "Page actions": "页面操作",
     Slider: "滑块",
     "Increase value": "增加数值",
@@ -4608,6 +4613,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "显示密码",
     "Hide password": "隐藏密码",
     "Learn more": "了解更多",
+    "{count} more": "还有 {count} 项",
     "Show less": "收起",
     "Note:": "注意：",
     "Copy path": "复制路径",
@@ -4739,6 +4745,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "現在の空き {now}、解放後の空き {after}",
     Sections: "セクション",
     "Back to the previous page": "戻る",
+    "Back to the App list": "アプリ一覧に戻る",
     "Page actions": "ページの操作",
     Slider: "スライダー",
     "Increase value": "値を増やす",
@@ -4870,6 +4877,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "パスワードを表示",
     "Hide password": "パスワードを隠す",
     "Learn more": "詳細",
+    "{count} more": "ほか {count} 件",
     "Show less": "閉じる",
     "Note:": "注：",
     "Copy path": "パスをコピー",
@@ -5001,6 +5009,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "현재 여유 공간 {now}, 정리 후 여유 공간 {after}",
     Sections: "섹션",
     "Back to the previous page": "뒤로",
+    "Back to the App list": "앱 목록으로 돌아가기",
     "Page actions": "페이지 작업",
     Slider: "슬라이더",
     "Increase value": "값 증가",
@@ -5132,6 +5141,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "비밀번호 표시",
     "Hide password": "비밀번호 숨기기",
     "Learn more": "자세히 알아보기",
+    "{count} more": "{count}개 더",
     "Show less": "간단히 보기",
     "Note:": "참고:",
     "Copy path": "경로 복사",
@@ -5263,6 +5273,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Jetzt frei {now}, danach frei {after}",
     Sections: "Abschnitte",
     "Back to the previous page": "Zurück",
+    "Back to the App list": "Zurück zu den Apps",
     "Page actions": "Seitenaktionen",
     Slider: "Schieberegler",
     "Increase value": "Wert erhöhen",
@@ -5394,6 +5405,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Passwort anzeigen",
     "Hide password": "Passwort verbergen",
     "Learn more": "Mehr erfahren",
+    "{count} more": "{count} weitere",
     "Show less": "Weniger anzeigen",
     "Note:": "Hinweis:",
     "Copy path": "Pfad kopieren",
@@ -5525,6 +5537,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre maintenant {now}, libre ensuite {after}",
     Sections: "Sections",
     "Back to the previous page": "Retour",
+    "Back to the App list": "Retour aux applications",
     "Page actions": "Actions de la page",
     Slider: "Curseur",
     "Increase value": "Augmenter la valeur",
@@ -5656,6 +5669,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Afficher le mot de passe",
     "Hide password": "Masquer le mot de passe",
     "Learn more": "En savoir plus",
+    "{count} more": "{count} de plus",
     "Show less": "Afficher moins",
     "Note:": "Remarque :",
     "Copy path": "Copier le chemin",
@@ -5787,6 +5801,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre ahora {now}, libre después {after}",
     Sections: "Secciones",
     "Back to the previous page": "Atrás",
+    "Back to the App list": "Volver a las aplicaciones",
     "Page actions": "Acciones de la página",
     Slider: "Control deslizante",
     "Increase value": "Aumentar valor",
@@ -5918,6 +5933,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Mostrar contraseña",
     "Hide password": "Ocultar contraseña",
     "Learn more": "Más información",
+    "{count} more": "{count} más",
     "Show less": "Mostrar menos",
     "Note:": "Nota:",
     "Copy path": "Copiar ruta",
@@ -6049,6 +6065,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libero ora {now}, libero dopo {after}",
     Sections: "Sezioni",
     "Back to the previous page": "Indietro",
+    "Back to the App list": "Torna alle app",
     "Page actions": "Azioni della pagina",
     Slider: "Cursore",
     "Increase value": "Aumenta valore",
@@ -6180,6 +6197,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Mostra password",
     "Hide password": "Nascondi password",
     "Learn more": "Scopri di più",
+    "{count} more": "Altri {count}",
     "Show less": "Mostra meno",
     "Note:": "Nota:",
     "Copy path": "Copia percorso",

package/dist/i18n/text.d.ts

@@ -106,6 +106,7 @@ export declare const englishUiText: {
     readonly "Free now {now}, free after {after}": "Free now {now}, free after {after}";
     readonly Sections: "Sections";
     readonly "Back to the previous page": "Back";
+    readonly "Back to the App list": "Back to apps";
     readonly "Page actions": "Page actions";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";
@@ -237,6 +238,7 @@ export declare const englishUiText: {
     readonly "Show password": "Show password";
     readonly "Hide password": "Hide password";
     readonly "Learn more": "Learn more";
+    readonly "{count} more": "{count} more";
     readonly "Show less": "Show less";
     readonly "Note:": "Note:";
     readonly "Copy path": "Copy path";

package/dist/index.d.ts

@@ -176,7 +176,7 @@ export { isPicture, isUnsupportedPicture } from './lib/files';
 export type { FileItem, FileState } from './lib/files';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
-export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
+export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps, DataGridExpandSlotProps } from './components/composite/data-grid/DataGrid.vue';
 export type { TableColumnType, TableColumnAlign } from './components/composite/data-grid/columnType';
 export { loadGridState, saveGridState, type DataGridViewState } from './components/composite/data-grid/viewState';
 export { default as TreeView } from './components/composite/tree-view/TreeView.vue';
@@ -319,3 +319,5 @@ export { filePickerText } from './i18n/filePicker';
 export type { FilePickerText } from './i18n/filePicker';
 export { default as Link } from './components/primitives/link/Link.vue';
 export { default as KeyValueRow } from './components/composite/key-value-row/KeyValueRow.vue';
+export { default as DetailList } from './components/composite/detail-list/DetailList.vue';
+export type { DetailListItem } from './components/composite/detail-list/types';