@nexdom/uimed-vue 2.0.0-beta.8 → 2.0.0-beta.9

package/AGENTS.md

@@ -30,7 +30,7 @@ Add the Vite plugin:
 
 ```ts
 // vite.config.ts
-import { vitePluginUimed } from "@nexdom/uimed-vue/plugins.ts";
+import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
 
 // ...
 
@@ -55,18 +55,18 @@ createApp(App).use(uimed).mount("#app");
 
 ### Usage
 
-Place the `Root` component at the top of `App.vue`, then add other components as needed:
+Place the `UMain` component at the top of `App.vue`, then add other components as needed:
 
 ```vue
 <!-- App.vue -->
 <template>
-  <root>
+  <u-main>
     <!-- ... -->
-  </root>
+  </u-main>
 </template>
 
 <script setup lang="ts">
-import { Root } from "@nexdom/uimed-vue/components";
+import { UMain } from "@nexdom/uimed-vue/components";
 </script>
 ```
 
@@ -102,24 +102,70 @@ vp env setup    # create shims like vpr and vpx
 vp install      # install dependencies
 ```
 
+On Windows, prefer VSCode's "Dev Containers: Clone Repository in Container Volume" over opening a folder cloned on the host:
+
+- A host clone with `core.autocrlf=true` checks files out with CRLF, and `vpr check` then reports formatting issues on every file. `.gitattributes` enforces LF, but clones made before it was added need `git rm -rq --cached . && git reset --hard` to be re-normalized (commit or stash local changes first, since `reset --hard` discards them).
+- A host folder bind-mounted into the container is roughly 10x slower (unit tests alone go from seconds to minutes), which makes Stryker's initial test run time out.
+
 ## Commands
 
-- `vpr check` — lint, formatter, and type-check (requires `build`/`pack` to have run first for the type-check step)
+- `vpr check` — lint, formatter, and type-check (builds the library first, since the type-check reads `dist`)
 - `vp test --coverage` — unit tests with coverage (Vitest, jsdom, 100% coverage threshold enforced)
-- `vpr test:mutations` — mutation tests (Stryker; thresholds: high 100, low 95, break 95)
-- `vpr test:e2e` — E2E tests (Playwright, runs against the built docs preview site)
+- `vpr test:mutations` — mutation tests (Stryker; thresholds: high 100, low 100, break 100). It starts one test runner per CPU core; on machines with limited memory, run `vpx stryker run --concurrency 4` instead
+- `vpr test:e2e` — E2E tests (Playwright, runs against the built docs preview site). Outside CI it reuses any server already on port 4173, which is also `vpr docs:dev`'s port: stop the dev server first, or the tests run against it instead of the built site
 - `vpr depcruise` — architecture/dependency rules (dependency-cruiser)
 - `vp pack` / `vpr build` — build the library
 - `vpr docs` / `vpr docs:dev` — run docs site (imports the lib from `dist`, not `src` — run `vpr dev` in a second terminal to keep `dist` updated while iterating)
 
 CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pack`, `vpr check`, `vpr depcruise`, `vp test --coverage`, `vpr test:mutations`, `vpr test:e2e`. Match this locally before opening a PR.
 
+### Focused runs while iterating
+
+The full suite takes minutes; while working on a single component or composable, scope each step to it (`button` below is an example) and run the full suite only before opening a PR:
+
+```bash
+# Unit tests of one or more folders
+vp test src/components/button
+
+# Same, with coverage limited to the files you changed. Without `--coverage.include`, files that
+# are only imported (e.g. the children of `main.vue`) count as uncovered and fail the 100% threshold
+vp test src/components/button --coverage --coverage.include="src/components/button/**"
+
+# Mutation tests of specific files. List several files in a single comma-separated `--mutate`
+# (repeating the flag keeps only the last one)
+vpx stryker run --mutate "src/components/button/button.vue,src/composables/button/button.ts"
+
+# One E2E spec
+vpr test:e2e e2e/components/button.spec.ts
+```
+
+## Adding a new component
+
+Use an existing component (e.g. `button`) as the reference, and deliver all of the following in the same PR:
+
+1. `src/components/<name>/<name>.vue` (following the pattern in [Code conventions](#code-conventions)), `types.ts` and `__tests__/<name>.test.ts`.
+2. The `U`-prefixed export in `src/components/index.ts`.
+3. A usage guide at `docs/guide/components/<name>.md`, with `<demo>` examples (and a `<playground>` section when the component has configurable props), and an API reference at `docs/api/components/<name>.md` (props, events and slots tables). Both in Portuguese.
+4. Both pages registered in the sidebar at `docs/.vitepress/config.ts`.
+5. `e2e/components/<name>.spec.ts` covering the guide's interactive examples and a "UI consistency" screenshot check (plus accessible snapshots where relevant). Commit the generated files under `__snapshots__`/`__screenshot__`.
+6. The full CI sequence passing locally.
+
+## Adding a new composable
+
+Use an existing composable (e.g. `use-toast`) as the reference, and deliver in the same PR:
+
+1. `src/composables/<group>/<name>.ts` and `__tests__/<name>.test.ts`, plus the types in the group's `types.ts`. If it relies on an internal component (as `useToast` relies on the internal `Toast` rendered by `UMain`), that component follows the component layout but isn't exported.
+2. The export in `src/composables/index.ts`, and its assertion in `src/composables/__tests__/index.test.ts`.
+3. A usage guide at `docs/guide/composables/<name>.md` and an API reference at `docs/api/composables/<name>.md`, both in Portuguese, registered in both sidebars at `docs/.vitepress/config.ts` and listed in `docs/api/index.md` and in the table of `docs/guide/index.md`. If it relies on `UMain` (like `useToast`), also mention it in `UMain`'s guide and API pages.
+4. `e2e/composables/<name>.spec.ts` covering the guide's examples and a "UI consistency" screenshot check.
+5. The full CI sequence passing locally.
+
 ## Code conventions
 
 - 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, classes or any kind of styling. Always use component props.
+- 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.
 - Path aliases: `@/*` → `src/*`, `@e2e/*` → `e2e/*`.
 - Every public component follows this pattern to block access to internals and give it an editor-hover description:
 
@@ -139,8 +185,9 @@ CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pa
   </script>
   ```
 
-- Component layout: `src/components/<name>/<name>.vue`, `types.ts` for prop/option types, `__tests__/<name>.test.ts` for unit tests. Composables follow the same shape under `src/composables/<name>/`.
-- Public components/composables/types are re-exported from `src/components/index.ts` and `src/composables/index.ts`.
+- Component layout: `src/components/<name>/<name>.vue`, `types.ts` for prop/option types, `__tests__/<name>.test.ts` for unit tests. Components that belong to a group live in the group's folder (e.g. the internal `src/components/dialogs/toast.vue`).
+- Composables live in a group folder: `src/composables/<group>/<name>.ts`, with `types.ts` and `__tests__/` in the group folder (e.g. `src/composables/dialogs/use-toast.ts`).
+- Public components/composables are re-exported from `src/components/index.ts` and `src/composables/index.ts`. Prop types stay internal (`types.ts` is not re-exported); consumers derive them with `ComponentProps` (see [Usage](#usage)).
 - Every publicly exported component must use the `U` prefix on its export identifier (e.g., `UButton`, `UMain`), while internal file names and component names remain unprefixed.
 - Use [JSDoc](https://jsdoc.app/about-getting-started) on every method/prop/type intended to be part of the public API — it's the primary documentation surface and supports markdown/code examples.
 - Known workarounds (see CONTRIBUTING.md before touching related config): `stryker-vue-ignorer` patches a Stryker/Vue macro-hoisting issue; `vue-tsc` is used for type-check instead of Vite+'s built-in one due to an oxlint/Vue support gap. Both are meant to be removed once their upstream issues are fixed — don't build further on top of them without checking if they're still needed.
@@ -149,8 +196,34 @@ CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pa
 
 - Unit tests use Vitest + `@vue/test-utils`, with `vueTestUtilsPluginUimed()` from `@/unit-test.ts` to mount a Vuetify instance.
 - Global unit test setup (`src/__tests__/setup.ts`) stubs `visualViewport`, uses fake timers, and silences `console.error/warn/log`.
-- Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests.
+- 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.
+- 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`).
+
+## 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.
+
+- Before using an API this repo doesn't use yet, or implementing something from scratch, look it up in the version declared in `package.json`. The project's `.mcp.json` provides two servers for that:
+  - `context7`, with these library IDs: Vue `/websites/vuejs`, Vuetify `/websites/vuetifyjs_en`, Vue Router `/websites/router_vuejs`, Vite+ `/websites/viteplus_dev`, Vitest `/vitest-dev/vitest`, Vue Test Utils `/vuejs/test-utils`, Playwright `/microsoft/playwright`, VitePress `/vuejs/vitepress`, Stryker `/stryker-mutator/stryker-js`.
+  - `vuetify`, Vuetify's own server, for component and composable APIs and release notes. Its tools that create or update bins, links, playgrounds or bug reports publish content outside the repo and are denied in `.claude/settings.json`.
+  - Queries to both servers leave your machine: describe what you need in generic terms and never include source code or business rules.
+- Before adding a dependency, check whether Vuetify, `@nexdom/shared` or the current dependencies already cover the need. If not, confirm with the requester, check the package's docs, maintenance and license, and declare runtime dependencies as `peerDependencies` (enforced by dependency-cruiser's `use-peer-deps` rule).
+- Vuetify is an internal detail: consumers use the library's props, and `docs` never mention Vuetify.
+
+## AI agents
+
+Besides this file, the repo ships Claude Code subagents in `.claude/agents/`:
+
+- `issue-planner`: turns an issue into an API proposal plus open questions, before any code is written.
+- `issue-implementer`: implements an issue end to end (source, tests, docs, E2E).
+- `code-reviewer`: reviews a branch or PR against these conventions, without changing code.
+- `dependency-updater`: evaluates and applies dependency updates, such as Dependabot PRs.
+
+Issues and PRs live in `nexdom-healthtech/uimed-vue`. Pass `-R nexdom-healthtech/uimed-vue` to `gh`, since clones from forks have issues disabled, and read issues with `gh issue view <number> -R nexdom-healthtech/uimed-vue --json title,body,comments` (`--comments` prints nothing in non-interactive shells).
+
+To resolve an issue, run `/resolve-issue <number>` (`.claude/skills/resolve-issue/`). It chains planner, implementer and reviewer, asks you about open questions and waits for your approval of the public API before any code is written.
 
 ## Git workflow
 

package/README.md

@@ -41,7 +41,7 @@ Add Vite config:
 
 ```ts
 // vite.config.ts
-import { vitePluginUimed } from "@nexdom/uimed-vue/plugins.ts";
+import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
 
 /// ...
 

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ColorVariant } from "./types-BPXXtbmW.js";
+import { t as ButtonProps } from "./types-HPMP8IrV.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**
@@ -189,50 +189,6 @@ type __VLS_WithSlots$8<T, S> = T & {
   };
 };
 //#endregion
-//#region src/components/button/types.d.ts
-type ButtonVariant = "primary" | "secondary" | "ghost";
-/**
- * Props exposed by the {@link Button} component.
- */
-type ButtonProps = {
-  /**
-   * Applies a distinct style variation to the button.
-   * One of `primary`, `secondary`, or `ghost`.
-   * @default "primary"
-   */
-  variant?: ButtonVariant;
-  /**
-   * Applies a distinct behavior to the button.
-   * One of `button` or `submit`.
-   * @default "button"
-   */
-  type?: "submit" | "button";
-  /**
-   * Applies a color to the button.
-   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
-   * @default "primary"
-   */
-  color?: ColorVariant;
-  /**
-   * Removes the ability to click or target the button.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Displays a loading indicator on the button, disabling interaction.
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
-   */
-  form?: string;
-  /**
-   * Component id to use on automated tests.
-   */
-  dataTestid?: string;
-};
-//#endregion
 //#region src/components/button/button.vue.d.ts
 /**
  * Button component to be used throughout the application.

package/dist/components.js

@@ -1,6 +1,6 @@
-import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDivider, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
+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, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCardTitle, VCheckboxBtn, VCol, VCombobox, VContainer, VDialog, VDivider, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toPeriodInterval } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -549,71 +549,6 @@ var toast_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/main/main.vue
-var main_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "main",
-	props: /*@__PURE__*/ mergeModels({
-		dataTestid: {
-			type: String,
-			required: false
-		},
-		logo: {
-			type: String,
-			required: false
-		},
-		appBar: {
-			type: Object,
-			required: false
-		},
-		navigationMenu: {
-			type: Object,
-			required: false
-		}
-	}, {
-		"notificationsOpen": {
-			type: Boolean,
-			default: false
-		},
-		"notificationsOpenModifiers": {}
-	}),
-	emits: ["update:notificationsOpen"],
-	setup(__props) {
-		const props = __props;
-		const appBarProps = computed(() => props.appBar ? {
-			...props.appBar,
-			logo: props.logo,
-			navigation: props.navigationMenu !== void 0
-		} : void 0);
-		const notificationsOpen = useModel(__props, "notificationsOpen");
-		const navigationMenuOpen = ref(false);
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
-				default: withCtx(() => [
-					appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
-						"notifications-open": notificationsOpen.value,
-						"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
-						"navigation-open": navigationMenuOpen.value,
-						"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
-					}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
-					props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
-						modelValue: navigationMenuOpen.value,
-						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
-					}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
-					createVNode(unref(VMain), null, {
-						default: withCtx(() => [createVNode(container_default, null, {
-							default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(toast_default)]),
-							_: 3
-						})]),
-						_: 3
-					})
-				]),
-				_: 3
-			}, 8, ["data-testid"]);
-		};
-	}
-});
-//#endregion
 //#region src/composables/button/button.ts
 const buttonVariantToVuetifyVariant = {
 	primary: "elevated",
@@ -706,6 +641,198 @@ var button_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/dialogs/dialog.vue
+var dialog_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "dialog",
+	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();
+		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;
+		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;
+			isOpen.value = next.value !== void 0;
+		}
+		function showNext() {
+			request.value = void 0;
+			show();
+		}
+		async function select(current, action) {
+			if (isRunning.value) return;
+			requests.value.shift();
+			selected.value = action;
+			await current.select(action?.value);
+			selected.value = void 0;
+			isOpen.value = false;
+			if (origin instanceof HTMLElement || origin instanceof SVGElement) origin.focus();
+		}
+		function dismiss() {
+			if (request.value) select(request.value);
+		}
+		function focusFirstAction() {
+			actions.value?.$el.querySelector("button").focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VDialog), {
+				"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
+			}, {
+				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)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"persistent",
+				"role",
+				"aria-labelledby",
+				"aria-describedby"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/main/main.vue
+var main_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "main",
+	props: /*@__PURE__*/ mergeModels({
+		dataTestid: {
+			type: String,
+			required: false
+		},
+		logo: {
+			type: String,
+			required: false
+		},
+		appBar: {
+			type: Object,
+			required: false
+		},
+		navigationMenu: {
+			type: Object,
+			required: false
+		}
+	}, {
+		"notificationsOpen": {
+			type: Boolean,
+			default: false
+		},
+		"notificationsOpenModifiers": {}
+	}),
+	emits: ["update:notificationsOpen"],
+	setup(__props) {
+		const props = __props;
+		const appBarProps = computed(() => props.appBar ? {
+			...props.appBar,
+			logo: props.logo,
+			navigation: props.navigationMenu !== void 0
+		} : void 0);
+		const notificationsOpen = useModel(__props, "notificationsOpen");
+		const navigationMenuOpen = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VApp), { "data-testid": props.dataTestid }, {
+				default: withCtx(() => [
+					appBarProps.value ? (openBlock(), createBlock(app_bar_default, mergeProps({ key: 0 }, appBarProps.value, {
+						"notifications-open": notificationsOpen.value,
+						"onUpdate:notificationsOpen": _cache[0] || (_cache[0] = ($event) => notificationsOpen.value = $event),
+						"navigation-open": navigationMenuOpen.value,
+						"onUpdate:navigationOpen": _cache[1] || (_cache[1] = ($event) => navigationMenuOpen.value = $event)
+					}), null, 16, ["notifications-open", "navigation-open"])) : createCommentVNode("v-if", true),
+					props.navigationMenu ? (openBlock(), createBlock(navigation_menu_default, mergeProps({ key: 1 }, props.navigationMenu, {
+						modelValue: navigationMenuOpen.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => navigationMenuOpen.value = $event)
+					}), null, 16, ["modelValue"])) : createCommentVNode("v-if", true),
+					createVNode(unref(VMain), null, {
+						default: withCtx(() => [createVNode(container_default, null, {
+							default: withCtx(() => [
+								renderSlot(_ctx.$slots, "default"),
+								createVNode(toast_default),
+								createVNode(dialog_default)
+							]),
+							_: 3
+						})]),
+						_: 3
+					})
+				]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
 //#region src/composables/inputs/autocomplete-field.ts
 function createAutocompleteRequiredRule(options) {
 	return createRequiredRule(options.required, (value) => {
@@ -1086,7 +1213,7 @@ var section_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
 						key: 0,
-						class: "mt-auto"
+						class: "mt-auto justify-end"
 					}, {
 						default: 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 }), {

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { n as FeedbackColorVariant } from "./types-BPXXtbmW.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-HPMP8IrV.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**
@@ -6,12 +6,84 @@ interface ToastOptions {
    */
   message: string;
   /**
-   * Applies a color to the button.
+   * Applies a color to the toast.
    * One of `positive`, `informative`, `caution`, or `danger`.
    * @default "informative"
    */
   color?: FeedbackColorVariant;
 }
+/**
+ * A button displayed at the bottom of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogAction<T extends string = string> {
+  /**
+   * Text displayed on the button.
+   */
+  text: string;
+  /**
+   * Value the dialog resolves with when the button is clicked.
+   */
+  value: T;
+  /**
+   * Applies a distinct style variation to the button.
+   * One of `primary`, `secondary`, or `ghost`.
+   * @default "ghost", or "primary" for the last action
+   */
+  variant?: ButtonVariant;
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
+/**
+ * Options of a dialog opened by `useDialog`'s `dialog`.
+ */
+interface DialogOptions<T extends string = string> {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Buttons displayed at the bottom of the dialog, right-aligned, in the given order.
+   * @default [{ text: "Fechar" }], which resolves `undefined`
+   */
+  actions?: DialogAction<T>[];
+}
+/**
+ * Options of a dialog opened by `useConfirm`'s `confirm`.
+ */
+interface ConfirmOptions {
+  /**
+   * Plain text displayed as the dialog's title. HTML isn't interpreted.
+   */
+  title?: string;
+  /**
+   * Plain text displayed as the dialog's message. HTML isn't interpreted.
+   */
+  message: string;
+  /**
+   * Text displayed on the confirm button.
+   * @default "Confirmar"
+   */
+  confirmText?: string;
+  /**
+   * Text displayed on the cancel button.
+   * @default "Cancelar"
+   */
+  cancelText?: string;
+  /**
+   * Applies a color to the confirm button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+}
 //#endregion
 //#region src/composables/dialogs/use-toast.d.ts
 /**
@@ -37,7 +109,7 @@ declare function useToast(): {
  */
 declare function toast(options: ToastOptions): void;
 //#endregion
-//#region src/composables/dialogs/use-run-or-toast..d.ts
+//#region src/composables/dialogs/use-run-or-toast.d.ts
 /**
  * Generate `run` method and a computed property `isRunning`.
  * Calling `run` will  reactively update `isRunning`.
@@ -64,4 +136,58 @@ declare function useRunOrToast(): {
   isRunning: import("vue").ComputedRef<boolean>;
 };
 //#endregion
-export { useRunOrToast, useToast };
+//#region src/composables/dialogs/use-dialog.d.ts
+/**
+ * Composable which returns a function to display dialogs.
+ *
+ * @example
+ * ```ts
+ * const { dialog } = useDialog();
+ *
+ * const answer = await dialog({
+ *   title: "Sessão expirando",
+ *   message: "Deseja continuar conectado?",
+ *   actions: [
+ *     { text: "Sair", value: "leave" },
+ *     { text: "Continuar", value: "stay" },
+ *   ],
+ * });
+ * ```
+ */
+declare function useDialog(): {
+  dialog: typeof dialog;
+};
+/**
+ * Displays a dialog. Dialogs are displayed one at a time, in the order they were requested.
+ * @param {DialogOptions} options - Options for the dialog.
+ * @returns the `value` of the clicked action, or `undefined` when the dialog is closed by the
+ * default action, the `Esc` key, a click outside it or the browser's back button.
+ *
+ * @example
+ * ```ts
+ * await dialog({ title: "Aviso", message: "Seu cadastro foi enviado para análise." });
+ * ```
+ */
+declare function dialog<T extends string = never>(options: DialogOptions<T>): Promise<T | undefined>;
+//#endregion
+//#region src/composables/dialogs/use-confirm.d.ts
+/**
+ * Composable which returns a function to run actions only after the user confirms them in a
+ * dialog, and a computed property `isRunning`.
+ *
+ * @example
+ * ```ts
+ * const { confirm, isRunning } = useConfirm();
+ *
+ * const removed = await confirm(
+ *   { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", confirmText: "Excluir", color: "danger" },
+ *   () => api.deletePatient(id),
+ * );
+ * ```
+ */
+declare function useConfirm(): {
+  confirm: <F extends (...args: Parameters<F>) => PromiseLike<Awaited<ReturnType<F>>>>(options: ConfirmOptions, action: F, ...params: Parameters<F>) => Promise<Awaited<ReturnType<F>> | false>;
+  isRunning: import("vue").ComputedRef<boolean>;
+};
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast };

package/dist/composables.js

@@ -1,6 +1,6 @@
-import { n as useToast } from "./use-toast-CACuYhK_.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Ck2_ZW7T.js";
 import { computed, ref } from "vue";
-//#region src/composables/dialogs/use-run-or-toast..ts
+//#region src/composables/dialogs/use-run-or-toast.ts
 const { toast } = useToast();
 /**
 * Generate `run` method and a computed property `isRunning`.
@@ -62,4 +62,56 @@ function useRunOrToast() {
 	};
 }
 //#endregion
-export { useRunOrToast, useToast };
+//#region src/composables/dialogs/use-confirm.ts
+/**
+* Composable which returns a function to run actions only after the user confirms them in a
+* dialog, and a computed property `isRunning`.
+*
+* @example
+* ```ts
+* const { confirm, isRunning } = useConfirm();
+*
+* const removed = await confirm(
+*   { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", confirmText: "Excluir", color: "danger" },
+*   () => api.deletePatient(id),
+* );
+* ```
+*/
+function useConfirm() {
+	const { run, isRunning } = useRunOrToast();
+	/**
+	* Displays a confirmation dialog and, if the user confirms, runs the given function while the
+	* dialog shows the confirm button loading. If the function throws an error, the dialog closes
+	* and a toast shows the error message.
+	* @returns the function returned value, or `false` if the user cancels or the function fails
+	*
+	* @example
+	* ```ts
+	* const { confirm } = useConfirm();
+	*
+	* // Call like this:
+	* const result1 = await confirm({ message: "Salvar alterações?" }, () => save(form));
+	*
+	* // Or this:
+	* const result2 = await confirm({ message: "Salvar alterações?" }, save, form);
+	* ```
+	*/
+	function confirm(options, action, ...params) {
+		return openDialog({
+			title: options.title,
+			message: options.message,
+			role: "alertdialog",
+			actions: [{ text: options.cancelText ?? "Cancelar" }, {
+				text: options.confirmText ?? "Confirmar",
+				value: "confirm",
+				color: options.color
+			}]
+		}, (value) => value === "confirm" ? run(action, ...params) : false);
+	}
+	return {
+		confirm,
+		isRunning
+	};
+}
+//#endregion
+export { useConfirm, useDialog, useRunOrToast, useToast };

package/dist/types-HPMP8IrV.d.ts

@@ -0,0 +1,49 @@
+//#region src/composables/colors/types.d.ts
+type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
+type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
+//#endregion
+//#region src/components/button/types.d.ts
+type ButtonVariant = "primary" | "secondary" | "ghost";
+/**
+ * Props exposed by the {@link Button} component.
+ */
+type ButtonProps = {
+  /**
+   * Applies a distinct style variation to the button.
+   * One of `primary`, `secondary`, or `ghost`.
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+  /**
+   * Applies a distinct behavior to the button.
+   * One of `button` or `submit`.
+   * @default "button"
+   */
+  type?: "submit" | "button";
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+  /**
+   * Removes the ability to click or target the button.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the button, disabling interaction.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   */
+  form?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+export { FeedbackColorVariant as i, ButtonVariant as n, ColorVariant as r, ButtonProps as t };

package/dist/use-dialog-Ck2_ZW7T.js

@@ -0,0 +1,124 @@
+import { computed, ref, toValue } from "vue";
+const colorToVuetifyColor = {
+	primary: "primary",
+	secondary: "secondary",
+	positive: "success",
+	informative: "info",
+	caution: "warning",
+	danger: "error"
+};
+//#endregion
+//#region src/composables/colors/use-vuetify-color.ts
+function useVuetifyColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
+	});
+}
+//#endregion
+//#region src/composables/dialogs/use-toast.ts
+const messages = ref([]);
+/**
+* Composable which returns a function to display toast messages.
+*
+* @example
+* ```ts
+* const { toast } = useToast();
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function useToast() {
+	return { toast };
+}
+/**
+* Displays a toast message.
+* @param {ToastOptions} options - Options for the toast message.
+*
+* @example
+* ```ts
+* toast({ message: "Hello, World!" });
+* ```
+*/
+function toast(options) {
+	const text = options.message;
+	const color = useVuetifyColor(options.color ?? "informative");
+	const toastMessage = {
+		text,
+		color: color.value,
+		prependIcon: `$${color.value}`
+	};
+	messages.value.push(toastMessage);
+}
+//#endregion
+//#region src/composables/dialogs/use-dialog.ts
+/**
+* Dialogs waiting to be displayed, shared by `useDialog` and `useConfirm`. The first one is the
+* dialog on display (or about to be).
+*/
+const requests = ref([]);
+/**
+* Mounted `Dialog` components, in mounting order. Only the first one displays dialogs, so pages
+* with more than one `UMain` don't display duplicates.
+*/
+const owners = ref([]);
+/**
+* Queues a dialog and resolves with what `onSelect` returns for the clicked action's value
+* (`undefined` when the dialog is dismissed).
+*/
+function openDialog(options, onSelect) {
+	const { actions, ...content } = options;
+	const lastIndex = actions.length - 1;
+	return new Promise((resolve) => {
+		requests.value.push({
+			...content,
+			actions: actions.map((action, index) => ({
+				...action,
+				variant: action.variant ?? (index === lastIndex ? "primary" : "ghost")
+			})),
+			async select(value) {
+				resolve(await onSelect(value));
+			}
+		});
+	});
+}
+/**
+* Composable which returns a function to display dialogs.
+*
+* @example
+* ```ts
+* const { dialog } = useDialog();
+*
+* const answer = await dialog({
+*   title: "Sessão expirando",
+*   message: "Deseja continuar conectado?",
+*   actions: [
+*     { text: "Sair", value: "leave" },
+*     { text: "Continuar", value: "stay" },
+*   ],
+* });
+* ```
+*/
+function useDialog() {
+	return { dialog };
+}
+/**
+* Displays a dialog. Dialogs are displayed one at a time, in the order they were requested.
+* @param {DialogOptions} options - Options for the dialog.
+* @returns the `value` of the clicked action, or `undefined` when the dialog is closed by the
+* default action, the `Esc` key, a click outside it or the browser's back button.
+*
+* @example
+* ```ts
+* await dialog({ title: "Aviso", message: "Seu cadastro foi enviado para análise." });
+* ```
+*/
+function dialog(options) {
+	return openDialog({
+		title: options.title,
+		message: options.message,
+		role: "dialog",
+		actions: options.actions ?? [{ text: "Fechar" }]
+	}, (value) => value);
+}
+//#endregion
+export { messages as a, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };

package/package.json

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

package/dist/types-BPXXtbmW.d.ts

@@ -1,5 +0,0 @@
-//#region src/composables/colors/types.d.ts
-type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
-type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
-//#endregion
-export { FeedbackColorVariant as n, ColorVariant as t };

package/dist/use-toast-CACuYhK_.js

@@ -1,53 +0,0 @@
-import { computed, ref, toValue } from "vue";
-const colorToVuetifyColor = {
-	primary: "primary",
-	secondary: "secondary",
-	positive: "success",
-	informative: "info",
-	caution: "warning",
-	danger: "error"
-};
-//#endregion
-//#region src/composables/colors/use-vuetify-color.ts
-function useVuetifyColor(color) {
-	return computed(() => {
-		const colorValue = toValue(color);
-		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
-	});
-}
-//#endregion
-//#region src/composables/dialogs/use-toast.ts
-const messages = ref([]);
-/**
-* Composable which returns a function to display toast messages.
-*
-* @example
-* ```ts
-* const { toast } = useToast();
-* toast({ message: "Hello, World!" });
-* ```
-*/
-function useToast() {
-	return { toast };
-}
-/**
-* Displays a toast message.
-* @param {ToastOptions} options - Options for the toast message.
-*
-* @example
-* ```ts
-* toast({ message: "Hello, World!" });
-* ```
-*/
-function toast(options) {
-	const text = options.message;
-	const color = useVuetifyColor(options.color ?? "informative");
-	const toastMessage = {
-		text,
-		color: color.value,
-		prependIcon: `$${color.value}`
-	};
-	messages.value.push(toastMessage);
-}
-//#endregion
-export { useToast as n, useVuetifyColor as r, messages as t };