@nexdom/uimed-vue 2.0.0-beta.16 → 2.0.0-beta.18

package/AGENTS.md

@@ -165,7 +165,10 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - All `src` code is written in English. `docs` content is written in Portuguese (aimed at Brazilian users), even though file/dir names stay in English.
   - `docs` must not mention Vuetify
   - A new component/composable must be listed in its guide page (`docs/guide/…`), its API page (`docs/api/…`), both sidebars in `docs/.vitepress/config.ts`, the guide index table (`docs/guide/index.md`) and the API index list (`docs/api/index.md`).
-- Never write CSS or `<style>` blocks, and expose styling to consumers only through props. Inside the library's own components, a Vuetify utility class is acceptable when no Vuetify prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why.
+- Never write CSS or `<style>` blocks, and expose styling to consumers only through props.
+- Don't add spacing to Vuetify components: no padding or margin utility classes (`pa-*`, `pt-6`, `px-4`, `ma-2`, ...) and no spacing props overriding the defaults. Vuetify already applies Material Design 3 spacing, and overriding it breaks what it handles on its own, such as button paddings and the scrollbar of scrollable content. If the default spacing looks wrong, stop and ask instead of adjusting it.
+- Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why.
+- Keep components thin: a component wires props, slots and events to Vuetify. Logic beyond that (focus management, queues, DOM lookups, comparisons) goes into an internal composable with its own unit tests.
 - Path aliases: `@/*` → `src/*`, `@e2e/*` → `e2e/*`.
 - Every public component follows this pattern to block access to internals and give it an editor-hover description:
 
@@ -200,8 +203,19 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - With fake timers in jsdom, Vuetify transitions (e.g. of `VDialog`, `VMenu`) don't finish on their own. Emit the transition events on the Vuetify component (`wrapper.findComponent(VDialog).vm.$emit("afterLeave")`) or advance the timers with `await vi.runAllTimersAsync()`.
 - Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests. Mutants that don't compile are reported as compile errors and don't count toward the score.
 - E2E tests (Playwright, `e2e/`) run against the built docs preview (`http://localhost:4173/uimed-vue/`). Snapshots/screenshots live under `__snapshots__`/`__screenshot__` next to each spec.
+- Before keeping a new screenshot as a baseline, open it and check it against how plain Vuetify renders the same component: overflowing content shows its scrollbar, buttons and cards keep their native paddings, nothing touches the edges or gets clipped. A screenshot that only "looks fine" isn't enough: name what you checked in your report.
+- Never run Stryker at the same time as another test command: they share build output and Stryker fails with `ENOENT`.
+- Unit tests that mount several apps at once (e.g. nested dialogs) need a distinct `global.config.idPrefix` per mount, since `useId()` restarts in each app.
 - In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `page.clock.pauseAt` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`).
 
+## Public API design
+
+The public API is hard to change once released, and every prop, event or option is something consumers can misuse and maintainers must keep. Keep it minimal:
+
+- Only add what the issue asks for. Anything beyond it (an extra prop, event, option or variant) is a separate decision the maintainers must approve explicitly, not a default.
+- Behaviors meant to be consistent across the library aren't per-instance options. For example, every dialog closes with `Esc`, a click outside it or the browser's back button; a flag to block that stays internal.
+- Reuse existing contracts before creating new ones: `v-model` for open/closed state instead of extra lifecycle events such as `afterLeave`, the `actions` shape of `USection` for buttons, the option names of existing composables.
+
 ## Library documentation and dependencies
 
 The stack is newer than most AI models' training data (Vue 3.5, Vuetify 4, Vue Router 5, Vite+ 0.2, Vitest 4, TypeScript 6, VitePress 2 alpha, Stryker 10, Playwright 1.62), so don't rely on memory for library APIs.

package/dist/components.d.ts

@@ -182,8 +182,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$10: typeof __VLS_export$15;
-declare const __VLS_export$15: __VLS_WithSlots$9<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
+declare const _default$11: typeof __VLS_export$16;
+declare const __VLS_export$16: __VLS_WithSlots$10<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
   notificationsOpen?: boolean;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:notificationsOpen": (value: boolean) => any;
@@ -194,7 +194,7 @@ declare const __VLS_export$15: __VLS_WithSlots$9<import("vue", { with: { "resolu
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$9<T, S> = T & {
+type __VLS_WithSlots$10<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -215,15 +215,15 @@ type __VLS_WithSlots$9<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
  */
-declare const _default$1: typeof __VLS_export$14;
-declare const __VLS_export$14: __VLS_WithSlots$8<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+declare const _default$1: typeof __VLS_export$15;
+declare const __VLS_export$15: __VLS_WithSlots$9<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   click: (event: MouseEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ButtonProps> & Readonly<{
   onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$8<T, S> = T & {
+type __VLS_WithSlots$9<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -387,8 +387,8 @@ type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/autocomplete-field | AutocompleteField Guide}
  */
-declare const _default: typeof __VLS_export$13;
-declare const __VLS_export$13: <T = string, Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: typeof __VLS_export$14;
+declare const __VLS_export$14: <T = string, Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<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$2<(AutocompleteFieldProps<T, Multiple> & {
     modelValue?: Multiple extends true ? T[] : T;
   }) & {
@@ -418,8 +418,8 @@ type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$15: typeof __VLS_export$12;
-declare const __VLS_export$12: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$16: typeof __VLS_export$13;
+declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
@@ -429,8 +429,8 @@ declare const __VLS_export$12: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  type: TextFieldType;
   clearable: boolean;
+  type: TextFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts
@@ -481,8 +481,8 @@ type CheckboxProps<T = boolean> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/checkbox | Checkbox Guide}
  */
-declare const _default$2: typeof __VLS_export$11;
-declare const __VLS_export$11: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default$2: typeof __VLS_export$12;
+declare const __VLS_export$12: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<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$1<(CheckboxProps<boolean | T> & {
     modelValue?: T;
   }) & {
@@ -596,8 +596,8 @@ type DateTimeFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/date-time-field | DateTimeField Guide}
  */
-declare const _default$7: typeof __VLS_export$10;
-declare const __VLS_export$10: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DateTimeFieldProps & {
+declare const _default$7: typeof __VLS_export$11;
+declare const __VLS_export$11: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DateTimeFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
@@ -636,11 +636,11 @@ type ContainerProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
  */
-declare const _default$4: typeof __VLS_export$9;
-declare const __VLS_export$9: __VLS_WithSlots$7<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$4: typeof __VLS_export$10;
+declare const __VLS_export$10: __VLS_WithSlots$8<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$7<T, S> = T & {
+type __VLS_WithSlots$8<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -651,6 +651,22 @@ type __VLS_WithSlots$7<T, S> = T & {
  * Props exposed by the {@link Row} component.
  */
 type RowProps = {
+  /**
+   * Vertical alignment of the row's columns, relative to the tallest column on the same line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the top;
+   * - `"center"`: centers the columns vertically;
+   * - `"end"`: aligns the columns to the bottom;
+   * - `"stretch"`: stretches every column to the height of the tallest one.
+   *
+   * Use `"stretch"` to keep side by side columns at the same height, e.g. cards made of
+   * `USection`s with `fullHeight`.
+   *
+   * Columns sit side by side only from the `sm` breakpoint up. Below it, each column takes a
+   * whole line, so the alignment has no visible effect.
+   * @default "start"
+   */
+  align?: RowAlign;
   /**
    * Renders the row as a list (`<ul>`), without the list's default indentation
    * and bullets, so assistive technologies announce its columns as the items
@@ -664,6 +680,7 @@ type RowProps = {
    */
   dataTestid?: string;
 };
+type RowAlign = "start" | "center" | "end" | "stretch";
 //#endregion
 //#region src/components/grid/row/row.vue.d.ts
 /**
@@ -673,7 +690,7 @@ type RowProps = {
  * ```vue
  * <template>
  *   <u-container>
- *    <u-row>
+ *     <u-row align="center">
  *       <!-- uimed-column -->
  *     </u-row>
  *   </u-container>
@@ -682,11 +699,13 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$11: typeof __VLS_export$8;
-declare const __VLS_export$8: __VLS_WithSlots$6<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$12: typeof __VLS_export$9;
+declare const __VLS_export$9: __VLS_WithSlots$7<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {
+  align: RowAlign;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$6<T, S> = T & {
+type __VLS_WithSlots$7<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -738,13 +757,13 @@ type Cols = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10"
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Column Guide}
  */
-declare const _default$3: typeof __VLS_export$7;
-declare const __VLS_export$7: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+declare const _default$3: typeof __VLS_export$8;
+declare const __VLS_export$8: __VLS_WithSlots$6<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
   cols: "12" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11";
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$5<T, S> = T & {
+type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -781,15 +800,15 @@ type FormProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/form | Form Guide}
  */
-declare const _default$9: typeof __VLS_export$6;
-declare const __VLS_export$6: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<FormProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+declare const _default$10: typeof __VLS_export$7;
+declare const __VLS_export$7: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<FormProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   submit: (event: SubmitEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<FormProps> & Readonly<{
   onSubmit?: ((event: SubmitEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$4<T, S> = T & {
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -811,11 +830,11 @@ type __VLS_WithSlots$4<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$13: typeof __VLS_export$5;
-declare const __VLS_export$5: __VLS_WithSlots$3<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>, {
+declare const _default$14: typeof __VLS_export$6;
+declare const __VLS_export$6: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$3<T, S> = T & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -853,6 +872,9 @@ type SectionProps = {
   fullWidth?: boolean;
   /**
    * Makes the section occupy 100% of its parent's height.
+   *
+   * Inside a `URow`, set its `align` to `"stretch"` so the section takes the height of the
+   * tallest column on the same line.
    * @default false
    */
   fullHeight?: boolean;
@@ -897,11 +919,11 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$12: typeof __VLS_export$4;
-declare const __VLS_export$4: __VLS_WithSlots$2<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<SectionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$13: typeof __VLS_export$5;
+declare const __VLS_export$5: __VLS_WithSlots$3<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<SectionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$2<T, S> = T & {
+type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -972,8 +994,8 @@ type TableProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
  */
-declare const _default$14: typeof __VLS_export$3;
-declare const __VLS_export$3: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TableProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+declare const _default$15: typeof __VLS_export$4;
+declare const __VLS_export$4: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TableProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/details/types.d.ts
 type DetailsVariant = "primary" | "secondary";
@@ -1020,11 +1042,11 @@ type DetailsProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/details | Details Guide}
  */
-declare const _default$8: typeof __VLS_export$2;
-declare const __VLS_export$2: __VLS_WithSlots$1<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DetailsProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DetailsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$8: typeof __VLS_export$3;
+declare const __VLS_export$3: __VLS_WithSlots$2<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DetailsProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DetailsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$1<T, S> = T & {
+type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1125,8 +1147,8 @@ type DataSetSlots<T extends object> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/data-set | DataSet Guide}
  */
-declare const _default$5: typeof __VLS_export$1;
-declare const __VLS_export$1: <T extends object>(__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<{
+declare const _default$5: typeof __VLS_export$2;
+declare const __VLS_export$2: <T extends object>(__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<(DataSetProps<T> & {
     page?: number;
     search?: string;
@@ -1201,12 +1223,89 @@ type DataSetItemSlots = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/data-set | DataSet Guide}
  */
-declare const _default$6: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DataSetItemProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DataSetItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, DataSetItemSlots>;
+declare const _default$6: typeof __VLS_export$1;
+declare const __VLS_export$1: __VLS_WithSlots$1<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DataSetItemProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DataSetItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, DataSetItemSlots>;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/dialogs/dialog/types.d.ts
+type DialogSize = "small" | "medium" | "large";
+/**
+ * Props exposed by the {@link Dialog} component.
+ */
+type DialogProps = {
+  /**
+   * Plain text displayed as the dialog's title, in a single line. HTML isn't interpreted.
+   * Also used as the dialog's accessible name. Without it, the content is the accessible name.
+   */
+  title?: string;
+  /**
+   * Buttons displayed at the bottom of the dialog, right-aligned, in the given order.
+   * Place the main action last. When undefined or empty, no actions area is rendered.
+   * Clicking an action doesn't close the dialog: set `v-model` to `false` in `onClick`.
+   */
+  actions?: DialogButtonAction[];
+  /**
+   * Maximum width of the dialog.
+   * One of `small` (400px), `medium` (560px), or `large` (800px).
+   * @default "medium"
+   */
+  size?: DialogSize;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+/**
+ * A single action rendered inside {@link Dialog}'s actions area. Same shape as `USection`'s
+ * actions.
+ */
+interface DialogButtonAction extends ButtonProps {
+  /**
+   * Text displayed on the action button.
+   */
+  label: string;
+  /**
+   * Called when the action button is clicked. The dialog stays open.
+   */
+  onClick?: (event: MouseEvent) => void;
+}
+//#endregion
+//#region src/components/dialogs/dialog/dialog.vue.d.ts
+/**
+ * Dialog component to display content in a modal window, over the page, until it's closed.
+ * Its title and actions stay in place while the content scrolls.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-dialog v-model="open" title="Title" :actions="[{ label: 'Close', onClick: () => (open = false) }]">
+ *     Content
+ *   </u-dialog>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/dialog | Dialog Guide}
+ */
+declare const _default$9: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DialogProps & {
+  modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+  "update:modelValue": (value: boolean) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DialogProps & {
+  modelValue?: boolean;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-export { _default as UAutocompleteField, _default$1 as UButton, _default$2 as UCheckbox, _default$3 as UColumn, _default$4 as UContainer, _default$5 as UDataSet, _default$6 as UDataSetItem, _default$7 as UDateTimeField, _default$8 as UDetails, _default$9 as UForm, _default$10 as UMain, _default$11 as URow, _default$12 as USection, _default$13 as USectionContent, _default$14 as UTable, _default$15 as UTextField };
+export { _default as UAutocompleteField, _default$1 as UButton, _default$2 as UCheckbox, _default$3 as UColumn, _default$4 as UContainer, _default$5 as UDataSet, _default$6 as UDataSetItem, _default$7 as UDateTimeField, _default$8 as UDetails, _default$9 as UDialog, _default$10 as UForm, _default$11 as UMain, _default$12 as URow, _default$13 as USection, _default$14 as USectionContent, _default$15 as UTable, _default$16 as UTextField };

package/dist/components.js

@@ -1,7 +1,7 @@
 import { a as messages, n as owners, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, onMounted, onScopeDispose, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, mergeProps, normalizeClass, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCardTitle, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -16,7 +16,7 @@ function isExternalRoute(route) {
 }
 //#endregion
 //#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$2 = { class: "opacity-60" };
+const _hoisted_1$3 = { class: "opacity-60" };
 //#endregion
 //#region src/components/app-bar/app-bar.vue
 var app_bar_default = /* @__PURE__ */ defineComponent({
@@ -137,7 +137,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 										}, createSlots({ _: 2 }, [notification.when ? {
 											name: "append",
 											fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
-												default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(notification.when), 1)]),
+												default: withCtx(() => [createElementVNode("small", _hoisted_1$3, toDisplayString(notification.when), 1)]),
 												_: 2
 											}, 1024)]),
 											key: "0"
@@ -412,7 +412,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/navigation-menu/navigation-menu.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$1 = { class: "px-4 pt-2" };
+const _hoisted_1$2 = { class: "px-4 pt-2" };
 //#endregion
 //#region src/components/navigation-menu/navigation-menu.vue
 var navigation_menu_default = /* @__PURE__ */ defineComponent({
@@ -475,7 +475,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 				absolute: "",
 				temporary: ""
 			}, {
-				prepend: withCtx(() => [createElementVNode("div", _hoisted_1$1, [createVNode(text_field_default, {
+				prepend: withCtx(() => [createElementVNode("div", _hoisted_1$2, [createVNode(text_field_default, {
 					modelValue: search.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
 					type: "search",
@@ -664,31 +664,225 @@ var button_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/dialogs/dialog.vue
+//#region src/components/dialogs/dialog/dialog-host-key.ts
+/**
+* Injection key of {@link DialogHostContext}, provided by the internal `DialogHost`. Besides the
+* role, the blocking while an action runs and the end of the leave transitions, it makes the
+* dialog's content describe the dialog (`aria-describedby`), since `DialogHost` only displays text
+* messages. Not part of the public API.
+*/
+const dialogHostKey = Symbol("dialog-host");
+//#endregion
+//#region src/composables/dialogs/use-dialog-focus.ts
+/** Focus state of the closed dialogs, by their card, for the dialogs opened from them. */
+const closedDialogs = /* @__PURE__ */ new WeakMap();
+/** Elements that can get the focus when the dialog opens. The first one in the dialog gets it. */
+const focusable = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+/**
+* Moves the focus into a dialog once it opens and back to where it was when it closes, including
+* when dialogs are opened from others. Internal to the dialog components.
+* @param isActive - Whether the dialog is displayed. It turns `false` as soon as the dialog starts
+* leaving, so the focus returns right away.
+* @param card - The dialog's card, marked with `data-u-dialog`, or nothing while it isn't rendered.
+* @returns `focusFirstElement`, to call once the dialog finishes entering.
+*/
+function useDialogFocus(isActive, card) {
+	/** Focus state of this dialog, shared with the dialogs opened from it. */
+	const focusState = {
+		isOpen: isActive,
+		origin: null
+	};
+	onMounted(() => onActiveChange(isActive()));
+	watch(isActive, onActiveChange);
+	function onActiveChange(active) {
+		if (active) {
+			focusState.origin = document.activeElement;
+			return;
+		}
+		const element = card();
+		if (element) closedDialogs.set(element, focusState);
+		const target = findFocusTarget(focusState.origin);
+		if (hasFocus(element) && (target instanceof HTMLElement || target instanceof SVGElement)) target.focus();
+	}
+	function focusFirstElement() {
+		card()?.querySelector(focusable)?.focus();
+	}
+	return { focusFirstElement };
+}
+/**
+* Element that gets the focus back when a dialog closes: its origin or, when the origin is inside
+* another dialog that closed meanwhile (and can't get the focus anymore), that dialog's.
+*/
+function findFocusTarget(origin) {
+	const card = origin?.closest("[data-u-dialog]");
+	const owner = card && closedDialogs.get(card);
+	return owner && !owner.isOpen() ? findFocusTarget(owner.origin) : origin;
+}
+/**
+* Whether the focus is on the dialog or lost (on nothing or on the page's body), so it can move.
+* Otherwise it moved elsewhere, e.g. to another dialog opened over this one.
+*/
+function hasFocus(card) {
+	const active = document.activeElement;
+	if (!active) return true;
+	return !!card && (card.contains(active) || active.contains(card));
+}
+//#endregion
+//#region src/components/dialogs/dialog/dialog.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["id"];
+//#endregion
+//#region src/components/dialogs/dialog/dialog.vue
 var dialog_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "dialog",
+	props: /*@__PURE__*/ mergeModels({
+		title: {
+			type: String,
+			required: false
+		},
+		actions: {
+			type: Array,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const maxWidths = {
+			small: 400,
+			medium: 560,
+			large: 800
+		};
+		const host = inject(dialogHostKey, null);
+		const contentId = useId();
+		const card = useTemplateRef("card");
+		const title = computed(() => props.title || void 0);
+		const maxWidth = computed(() => maxWidths[props.size ?? "medium"]);
+		const role = computed(() => host?.role() ?? "dialog");
+		/**
+		* Whether the dialog is displayed. It follows `v-model`, but turns `false` as soon as the user
+		* closes the dialog, while `v-model` only does once the leave transition ends.
+		*/
+		const isActive = ref(model.value);
+		watch(model, (value) => isActive.value = value);
+		const { focusFirstElement } = useDialogFocus(() => isActive.value, () => card.value?.$el);
+		function onAfterLeave() {
+			model.value = false;
+			host?.afterLeave();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VDialog), {
+				modelValue: isActive.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
+				persistent: unref(host)?.persistent(),
+				"max-width": maxWidth.value,
+				role: role.value,
+				"aria-label": title.value,
+				"aria-labelledby": title.value ? void 0 : unref(contentId),
+				"aria-describedby": unref(host) ? unref(contentId) : void 0,
+				"data-testid": props.dataTestid,
+				scrollable: "",
+				onAfterEnter: unref(focusFirstElement),
+				onAfterLeave
+			}, {
+				default: withCtx(() => [createCommentVNode(" `data-u-dialog` identifies the card to the dialogs opened from this one "), createVNode(unref(VCard), {
+					ref_key: "card",
+					ref: card,
+					title: title.value,
+					"data-u-dialog": ""
+				}, createSlots({
+					text: withCtx(() => [createElementVNode("div", { id: unref(contentId) }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1)]),
+					_: 2
+				}, [props.actions?.length ? {
+					name: "actions",
+					fn: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
+						return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
+							default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
+							_: 2
+						}, 1040, ["onClick"]);
+					}), 128))]),
+					key: "0"
+				} : void 0]), 1032, ["title"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"persistent",
+				"max-width",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"data-testid",
+				"onAfterEnter"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/dialogs/dialog-host.vue
+var dialog_host_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "dialog-host",
 	setup(__props) {
 		const owner = Symbol("dialog");
-		const titleId = useId();
-		const messageId = useId();
-		const actions = useTemplateRef("actions");
 		const isOwner = computed(() => owners.value[0] === owner);
 		const next = computed(() => isOwner.value ? requests.value[0] : void 0);
 		/** Dialog on display, kept until its leave transition ends. */
 		const request = shallowRef();
+		/**
+		* Changes for every dialog on display, so each one gets its own `Dialog`, open from the start.
+		* The next dialog can then open right after a dismissed one, whose `v-model` stays `true`.
+		*/
+		const key = shallowRef();
 		const isOpen = ref(false);
 		const selected = shallowRef();
 		const isRunning = computed(() => selected.value !== void 0);
-		/** Element focused before the dialog opened, which gets the focus back when it closes. */
-		let origin = null;
+		const actions = computed(() => {
+			const current = request.value;
+			if (!current) return void 0;
+			return current.actions.map((action) => ({
+				label: action.text,
+				variant: action.variant,
+				color: action.color,
+				loading: selected.value === action,
+				disabled: isRunning.value && selected.value !== action,
+				onClick: () => void select(current, action)
+			}));
+		});
+		provide(dialogHostKey, {
+			role: () => request.value?.role,
+			persistent: () => isRunning.value,
+			afterLeave: showNext
+		});
 		onMounted(() => owners.value.push(owner));
 		onUnmounted(() => owners.value = owners.value.filter((item) => item !== owner));
 		watch(next, show);
 		function show() {
 			if (request.value) return;
-			origin = document.activeElement;
 			request.value = next.value;
+			key.value = Symbol();
 			isOpen.value = next.value !== void 0;
 		}
 		function showNext() {
@@ -701,88 +895,27 @@ var dialog_default = /* @__PURE__ */ defineComponent({
 			selected.value = action;
 			await current.select(action?.value);
 			selected.value = void 0;
-			isOpen.value = false;
-			if (origin instanceof HTMLElement || origin instanceof SVGElement) origin.focus();
+			if (action) isOpen.value = false;
 		}
+		/** Called once a dialog closed by the user leaves, right before the next one is displayed. */
 		function dismiss() {
 			if (request.value) select(request.value);
 		}
-		function focusFirstAction() {
-			actions.value?.$el.querySelector("button").focus();
-		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VDialog), {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" PascalCase, since `<dialog>` in the template would render the native HTML element instead "), (openBlock(), createBlock(dialog_default, {
+				key: key.value,
 				"model-value": isOpen.value,
-				persistent: isRunning.value,
-				role: request.value?.role,
-				"aria-labelledby": request.value?.title ? unref(titleId) : unref(messageId),
-				"aria-describedby": unref(messageId),
-				"max-width": "560",
-				"onUpdate:modelValue": dismiss,
-				onAfterEnter: focusFirstAction,
-				onAfterLeave: showNext
+				title: request.value?.title,
+				actions: actions.value,
+				"onUpdate:modelValue": dismiss
 			}, {
-				default: withCtx(() => [createCommentVNode("\n      MD3 dialogs have a 24px padding, 16px between title and message, 24px between message and\n      actions, and 8px between the end-aligned actions. Inside a dialog, the card parts already\n      have 24px sides, 16px below the title, 24px below the message, and end-aligned actions 8px\n      apart, but no prop sets the remaining paddings, hence the spacing classes.\n    "), request.value ? (openBlock(), createBlock(unref(VCard), { key: 0 }, {
-					default: withCtx(() => [
-						request.value.title ? (openBlock(), createBlock(unref(VCardItem), {
-							key: 0,
-							class: "pt-6"
-						}, {
-							default: withCtx(() => [createCommentVNode(" Titles wrap instead of being truncated, since they're part of the message "), createVNode(unref(VCardTitle), {
-								id: unref(titleId),
-								class: "text-wrap"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(request.value.title), 1)]),
-								_: 1
-							}, 8, ["id"])]),
-							_: 1
-						})) : createCommentVNode("v-if", true),
-						createCommentVNode(" Below a title, the card already removes the message's top padding "),
-						createVNode(unref(VCardText), {
-							id: unref(messageId),
-							class: normalizeClass({ "pt-6": !request.value.title })
-						}, {
-							default: withCtx(() => [createTextVNode(toDisplayString(request.value.message), 1)]),
-							_: 1
-						}, 8, ["id", "class"]),
-						request.value.actions.length > 0 ? (openBlock(), createBlock(unref(VCardActions), {
-							key: 1,
-							ref_key: "actions",
-							ref: actions,
-							class: "px-6 pt-0 pb-6"
-						}, {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(request.value.actions, (action, index) => {
-								return openBlock(), createBlock(button_default, {
-									key: index,
-									variant: action.variant,
-									color: action.color,
-									loading: selected.value === action,
-									disabled: isRunning.value && selected.value !== action,
-									onClick: ($event) => select(request.value, action)
-								}, {
-									default: withCtx(() => [createTextVNode(toDisplayString(action.text), 1)]),
-									_: 2
-								}, 1032, [
-									"variant",
-									"color",
-									"loading",
-									"disabled",
-									"onClick"
-								]);
-							}), 128))]),
-							_: 1
-						}, 512)) : createCommentVNode("v-if", true)
-					]),
-					_: 1
-				})) : createCommentVNode("v-if", true)]),
+				default: withCtx(() => [createTextVNode(toDisplayString(request.value?.message), 1)]),
 				_: 1
 			}, 8, [
 				"model-value",
-				"persistent",
-				"role",
-				"aria-labelledby",
-				"aria-describedby"
-			]);
+				"title",
+				"actions"
+			]))], 2112);
 		};
 	}
 });
@@ -849,7 +982,7 @@ var main_default = /* @__PURE__ */ defineComponent({
 							default: withCtx(() => [
 								renderSlot(_ctx.$slots, "default"),
 								createVNode(toast_default),
-								createVNode(dialog_default)
+								createVNode(dialog_host_default)
 							]),
 							_: 3
 						})]),
@@ -1325,6 +1458,11 @@ var row_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "row",
 	props: {
+		align: {
+			type: String,
+			required: false,
+			default: "start"
+		},
 		list: {
 			type: Boolean,
 			required: false
@@ -1336,12 +1474,19 @@ var row_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const rowAlignToClass = {
+			start: "align-start",
+			center: "align-center",
+			end: "align-end",
+			stretch: "align-stretch"
+		};
+		const alignClass = computed(() => rowAlignToClass[props.align]);
 		const tag = computed(() => props.list ? "ul" : void 0);
 		const listClasses = computed(() => props.list ? "pa-0 ma-0" : void 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VRow), {
 				tag: tag.value,
-				class: normalizeClass(listClasses.value),
+				class: normalizeClass([alignClass.value, listClasses.value]),
 				"data-testid": props.dataTestid
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -1892,7 +2037,10 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 						type: "search",
 						label: "Pesquisar"
 					}, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)]),
-					default: withCtx(({ items: pageItems }) => [createVNode(row_default, { list: "" }, {
+					default: withCtx(({ items: pageItems }) => [createCommentVNode(" Stretched, so the items of the same line (e.g. full-height cards) share its height "), createVNode(row_default, {
+						list: "",
+						align: "stretch"
+					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
 							return openBlock(), createBlock(column_default, {
 								key: index,
@@ -1983,4 +2131,4 @@ var data_set_item_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { autocomplete_field_default as UAutocompleteField, button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, details_default as UDetails, form_default as UForm, main_default as UMain, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };
+export { autocomplete_field_default as UAutocompleteField, button_default as UButton, checkbox_default as UCheckbox, column_default as UColumn, container_default as UContainer, data_set_default as UDataSet, data_set_item_default as UDataSetItem, date_time_field_default as UDateTimeField, details_default as UDetails, dialog_default as UDialog, form_default as UForm, main_default as UMain, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.18",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",