@nexdom/uimed-vue 2.0.0-beta.43 → 2.0.0-beta.45

package/AGENTS.md

@@ -205,7 +205,8 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 
 - 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`). A composable (`use-*.ts`) must depend on `vue` or `vue-router`, directly or through other modules (enforced by dependency-cruiser's `composables-use-vue` rule).
-- Library-wide configuration constants that aren't components or composables live in `src/consts/<name>.ts` (e.g. `src/consts/locale.ts`, the language set by `createUimed()` and `vueTestUtilsPluginUimed()`).
+- Library-wide configuration constants that aren't components or composables live in `src/consts/<name>.ts` (e.g. `src/consts/locale.ts`, the language set by `createUimed()` and `vueTestUtilsPluginUimed()`), with their types in `src/consts/types.ts`.
+- Components accept icons by name (the `Icon` type in `src/consts/types.ts`), mapped to icon font classes by the internal `icons` object in `src/consts/icons.ts`. To add an icon, add it to that map and to the list on the "Ícones" guide page (`docs/guide/icons.md`), and check that its class exists in the installed icon font: the unit test of `src/consts/icons.ts` checks every class, and the page's E2E spec fails when the page and the map list different icons.
 - Pure helpers that don't use Vue live in `src/utils/<name>.ts`, with tests in `src/utils/__tests__/`. Generic helpers that any TypeScript project could use (e.g. `isDeepEqual`) belong in `@nexdom/shared` instead.
 - 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.

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-CjaJ2WAC.js";
+import { r as ColorVariant, t as ButtonProps } from "./types-BbWo6RIy.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**
@@ -93,6 +93,53 @@ interface Option {
   action?: () => void;
 }
 //#endregion
+//#region src/consts/icons.d.ts
+/**
+ * Icon font class of each icon available to the components that accept one (e.g. `UIconButton`
+ * and the items of the navigation menu), by its name, in the order the "Ícones" guide page lists
+ * them. A name ending in `-alternative` is an alternative version of the same drawing (currently,
+ * outlined).
+ *
+ * To add an icon, add it here and to the list on the "Ícones" guide page (`docs/guide/icons.md`).
+ */
+declare const icons: {
+  home: string;
+  "home-alternative": string;
+  account: string;
+  "account-alternative": string;
+  "account-group": string;
+  "account-group-alternative": string;
+  calendar: string;
+  "calendar-alternative": string;
+  "clipboard-text": string;
+  "clipboard-text-alternative": string;
+  "file-document": string;
+  "file-document-alternative": string;
+  flask: string;
+  "flask-alternative": string;
+  folder: string;
+  "folder-alternative": string;
+  "chart-box": string;
+  "chart-box-alternative": string;
+  wallet: string;
+  "wallet-alternative": string;
+  cog: string;
+  "cog-alternative": string;
+  stethoscope: string;
+  pill: string;
+  hospital: string;
+};
+//#endregion
+//#region src/consts/types.d.ts
+/**
+ * Name of an icon available to the components that accept one (e.g. `UIconButton` and the items
+ * of the navigation menu). The full list, with a preview of each icon, is on the "Ícones" guide
+ * page.
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+ */
+type Icon = keyof typeof icons;
+//#endregion
 //#region src/components/navigation-menu/types.d.ts
 /**
  * Props exposed by the {@link NavigationMenu} component.
@@ -114,6 +161,13 @@ type NavigationMenuParentItem = {
    * Text to present for the group.
    */
   description: string;
+  /**
+   * Icon shown before the group's description. One of the names listed on the "Ícones" guide
+   * page.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon?: Icon;
   /**
    * Child {@link NavigationMenuItem} list.
    */
@@ -124,6 +178,13 @@ interface NavigationMenuItem {
    * Text to present for the item.
    */
   description: string;
+  /**
+   * Icon shown before the item's description. One of the names listed on the "Ícones" guide
+   * page.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon?: Icon;
   /**
    * Route to navigate when item is clicked.
    */
@@ -208,8 +269,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$13: typeof __VLS_export$19;
-declare const __VLS_export$19: __VLS_WithSlots$11<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
+declare const _default$14: typeof __VLS_export$20;
+declare const __VLS_export$20: __VLS_WithSlots$11<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;
@@ -241,8 +302,8 @@ type __VLS_WithSlots$11<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
  */
-declare const _default$1: typeof __VLS_export$18;
-declare const __VLS_export$18: __VLS_WithSlots$10<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$19;
+declare const __VLS_export$19: __VLS_WithSlots$10<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;
@@ -255,6 +316,57 @@ type __VLS_WithSlots$10<T, S> = T & {
   };
 };
 //#endregion
+//#region src/components/icon-button/types.d.ts
+/**
+ * Props exposed by the {@link IconButton} component.
+ */
+type IconButtonProps = {
+  /**
+   * Icon drawn on the button. One of the names listed on the "Ícones" guide page. Assistive
+   * technologies ignore it and read `label` instead.
+   *
+   * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/icons | Icons Guide}
+   */
+  icon: Icon;
+  /**
+   * Accessible name of the button, read by assistive technologies instead of the icon. Describe
+   * the action the button performs (e.g. "Editar paciente"), not the icon's drawing (e.g.
+   * "Lápis").
+   */
+  label: string;
+  /**
+   * Applies a color to the button.
+   * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
+   * @default "primary"
+   */
+  color?: ColorVariant;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/icon-button/icon-button.vue.d.ts
+/**
+ * Button that shows only an icon, for actions whose icon is enough to identify them, such as
+ * editing a record of a list. Its `label` is the name assistive technologies read.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-icon-button icon="cog" label="Configurações" @click="onClick" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/icon-button | IconButton Guide}
+ */
+declare const _default$11: typeof __VLS_export$18;
+declare const __VLS_export$18: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<IconButtonProps, {}, {}, {}, {}, 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<IconButtonProps> & Readonly<{
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
 //#region src/components/inputs/text-field/types.d.ts
 type TextFieldVariant = "primary" | "secondary";
 type TextFieldType = "text" | "phone" | "email" | "url" | "password" | "search";
@@ -452,7 +564,7 @@ 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$19: typeof __VLS_export$16;
+declare const _default$20: typeof __VLS_export$16;
 declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
@@ -780,7 +892,7 @@ type MaskFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/mask-field | MaskField Guide}
  */
-declare const _default$14: typeof __VLS_export$13;
+declare const _default$15: typeof __VLS_export$13;
 declare const __VLS_export$13: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MaskFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
@@ -926,7 +1038,7 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$15: typeof __VLS_export$11;
+declare const _default$16: typeof __VLS_export$11;
 declare const __VLS_export$11: __VLS_WithSlots$8<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>, {
   default?: (props: {}) => any;
 }>;
@@ -1055,7 +1167,7 @@ type __VLS_WithSlots$6<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$17: typeof __VLS_export$8;
+declare const _default$18: typeof __VLS_export$8;
 declare const __VLS_export$8: __VLS_WithSlots$5<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;
 }>;
@@ -1160,7 +1272,7 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$16: typeof __VLS_export$7;
+declare const _default$17: typeof __VLS_export$7;
 declare const __VLS_export$7: __VLS_WithSlots$4<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;
 }>;
@@ -1235,7 +1347,7 @@ type TableProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
  */
-declare const _default$18: typeof __VLS_export$6;
+declare const _default$19: typeof __VLS_export$6;
 declare const __VLS_export$6: 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
@@ -1354,7 +1466,7 @@ type ImgProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/img | Img Guide}
  */
-declare const _default$11: typeof __VLS_export$4;
+declare const _default$12: typeof __VLS_export$4;
 declare const __VLS_export$4: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ImgProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ImgProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/link/types.d.ts
@@ -1389,7 +1501,7 @@ type LinkProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/link | Link Guide}
  */
-declare const _default$12: typeof __VLS_export$3;
+declare const _default$13: typeof __VLS_export$3;
 declare const __VLS_export$3: __VLS_WithSlots$2<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<LinkProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<LinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
@@ -1666,4 +1778,4 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#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 UDialog, _default$10 as UForm, _default$11 as UImg, _default$12 as ULink, _default$13 as UMain, _default$14 as UMaskField, _default$15 as URow, _default$16 as USection, _default$17 as USectionContent, _default$18 as UTable, _default$19 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 UIconButton, _default$12 as UImg, _default$13 as ULink, _default$14 as UMain, _default$15 as UMaskField, _default$16 as URow, _default$17 as USection, _default$18 as USectionContent, _default$19 as UTable, _default$20 as UTextField };

package/dist/components.js

@@ -423,6 +423,43 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/consts/icons.ts
+/**
+* Icon font class of each icon available to the components that accept one (e.g. `UIconButton`
+* and the items of the navigation menu), by its name, in the order the "Ícones" guide page lists
+* them. A name ending in `-alternative` is an alternative version of the same drawing (currently,
+* outlined).
+*
+* To add an icon, add it here and to the list on the "Ícones" guide page (`docs/guide/icons.md`).
+*/
+const icons = {
+	home: "mdi-home",
+	"home-alternative": "mdi-home-outline",
+	account: "mdi-account",
+	"account-alternative": "mdi-account-outline",
+	"account-group": "mdi-account-group",
+	"account-group-alternative": "mdi-account-group-outline",
+	calendar: "mdi-calendar",
+	"calendar-alternative": "mdi-calendar-outline",
+	"clipboard-text": "mdi-clipboard-text",
+	"clipboard-text-alternative": "mdi-clipboard-text-outline",
+	"file-document": "mdi-file-document",
+	"file-document-alternative": "mdi-file-document-outline",
+	flask: "mdi-flask",
+	"flask-alternative": "mdi-flask-outline",
+	folder: "mdi-folder",
+	"folder-alternative": "mdi-folder-outline",
+	"chart-box": "mdi-chart-box",
+	"chart-box-alternative": "mdi-chart-box-outline",
+	wallet: "mdi-wallet",
+	"wallet-alternative": "mdi-wallet-outline",
+	cog: "mdi-cog",
+	"cog-alternative": "mdi-cog-outline",
+	stethoscope: "mdi-stethoscope",
+	pill: "mdi-pill",
+	hospital: "mdi-hospital-building"
+};
+//#endregion
 //#region src/composables/inputs/rules.ts
 function required(value) {
 	return !isEmpty(value) || "Campo obrigatório";
@@ -771,18 +808,31 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
 							return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
-								activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, { title: item.description }), null, 16, ["title"])]),
+								activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, {
+									title: item.description,
+									"prepend-icon": item.icon && unref(icons)[item.icon]
+								}), null, 16, ["title", "prepend-icon"])]),
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
 									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
 										title: childItem.description,
+										"prepend-icon": childItem.icon && unref(icons)[childItem.icon],
 										onClick: childItem.action
-									}), null, 16, ["title", "onClick"]);
+									}), null, 16, [
+										"title",
+										"prepend-icon",
+										"onClick"
+									]);
 								}), 128))]),
 								_: 2
 							}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
 								key: 1,
-								title: item.description
-							}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, ["title", "onClick"]))], 64);
+								title: item.description,
+								"prepend-icon": item.icon && unref(icons)[item.icon]
+							}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, [
+								"title",
+								"prepend-icon",
+								"onClick"
+							]))], 64);
 						}), 128))]),
 						_: 1
 					})]),
@@ -924,13 +974,31 @@ function useButtonVariant(variant) {
 		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
 	});
 }
-function useButtonType(type) {
+/**
+* The route the button navigates to, or `undefined` while it's blocked, so a `disabled` or
+* `loading` button is rendered as a disabled `<button>` instead of a link that the keyboard,
+* assistive technologies or `element.click()` could still follow.
+*/
+function useButtonRoute(route, blocked) {
+	return computed(() => toValue(blocked) ? void 0 : toValue(route));
+}
+/**
+* The button's `type`. It doesn't apply to a button with a `route`, which is `undefined` while
+* rendered as a link, and `"button"` while blocked, so the disabled `<button>` it's rendered as
+* isn't a submit button.
+*/
+function useButtonType(type, route, blocked) {
 	return computed(() => {
-		return toValue(type) ?? "button";
+		if (!toValue(route)) return toValue(type) ?? "button";
+		return toValue(blocked) ? "button" : void 0;
 	});
 }
-function useButtonForm(form) {
-	return computed(() => toValue(form));
+/**
+* The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
+* doesn't apply to it.
+*/
+function useButtonForm(form, route) {
+	return computed(() => toValue(route) ? void 0 : toValue(form));
 }
 //#endregion
 //#region src/components/button/button.vue
@@ -966,6 +1034,10 @@ var button_default = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
+		route: {
+			type: null,
+			required: false
+		},
 		dataTestid: {
 			type: String,
 			required: false
@@ -977,15 +1049,16 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const variant = useButtonVariant(() => props.variant);
 		const color = useVuetifyColor(() => props.color);
-		const type = useButtonType(() => props.type);
-		const form = useButtonForm(() => props.form);
 		const widthClass = useFullWidth(() => props.fullWidth);
 		const isDisabled = computed(() => props.disabled || props.loading);
+		const routeProps = useRouteProps(useButtonRoute(() => props.route, isDisabled));
+		const type = useButtonType(() => props.type, () => props.route, isDisabled);
+		const form = useButtonForm(() => props.form, () => props.route);
 		function onClick(event) {
 			emit("click", event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VBtn), {
+			return openBlock(), createBlock(unref(VBtn), mergeProps({
 				disabled: isDisabled.value,
 				loading: props.loading,
 				"data-testid": props.dataTestid,
@@ -993,9 +1066,11 @@ var button_default = /* @__PURE__ */ defineComponent({
 				color: unref(color),
 				type: unref(type),
 				form: unref(form),
-				class: normalizeClass(unref(widthClass)),
+				class: unref(widthClass)
+			}, unref(routeProps), {
+				active: false,
 				onClick
-			}, {
+			}), {
 				loader: withCtx(() => [createVNode(unref(VProgressCircular), {
 					indeterminate: "",
 					width: "2",
@@ -1003,7 +1078,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 				})]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
+			}, 16, [
 				"disabled",
 				"loading",
 				"data-testid",
@@ -1352,6 +1427,53 @@ var main_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/icon-button/icon-button.vue
+var icon_button_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "icon-button",
+	props: {
+		icon: {
+			type: null,
+			required: true
+		},
+		label: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const color = useVuetifyColor(() => props.color);
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VIconBtn), {
+				icon: unref(icons)[props.icon],
+				"aria-label": props.label,
+				color: unref(color),
+				"data-testid": props.dataTestid,
+				onClick
+			}, null, 8, [
+				"icon",
+				"aria-label",
+				"color",
+				"data-testid"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/composables/inputs/autocomplete-field.ts
 function createAutocompleteRequiredRule(options) {
 	return createRequiredRule(options.required, (value) => {
@@ -3007,4 +3129,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, dialog_default as UDialog, form_default as UForm, img_default as UImg, link_default as ULink, main_default as UMain, mask_field_default as UMaskField, 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, icon_button_default as UIconButton, img_default as UImg, link_default as ULink, main_default as UMain, mask_field_default as UMaskField, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-CjaJ2WAC.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-BbWo6RIy.js";
 import { ComputedRef, MaybeRefOrGetter } from "vue";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {

package/dist/{types-CjaJ2WAC.d.ts → types-BbWo6RIy.d.ts}

@@ -1,3 +1,4 @@
+import { RouteLocationRaw } from "vue-router";
 //#region src/composables/colors/types.d.ts
 type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
 type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
@@ -16,7 +17,7 @@ type ButtonProps = {
   variant?: ButtonVariant;
   /**
    * Applies a distinct behavior to the button.
-   * One of `button` or `submit`.
+   * One of `button` or `submit`. Ignored when `route` is set.
    * @default "button"
    */
   type?: "submit" | "button";
@@ -49,8 +50,16 @@ type ButtonProps = {
   fullWidth?: boolean;
   /**
    * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   * Ignored when `route` is set.
    */
   form?: string;
+  /**
+   * Where the button goes when clicked, rendering it as a link with the button's look. A route
+   * inside the app (`"/patients"`, `{ name: "patient", params: { id } }`) navigates through the
+   * app's router; a URL starting with `http` navigates through the browser, in the same tab. While
+   * `disabled` or `loading`, the button doesn't navigate and is rendered as a disabled button.
+   */
+  route?: RouteLocationRaw;
   /**
    * Component id to use on automated tests.
    */

package/package.json

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