@nexdom/uimed-vue 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ColorVariant } from "./types-BPXXtbmW.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
 /**
@@ -43,13 +43,15 @@ interface AppBarNotification {
    */
   read?: boolean;
   /**
-   * Date the notification was generated.
+   * Free text telling when the notification was generated, shown as is (e.g.
+   * `"10:30"`, `"Ontem"` or `"28/09/2026"`). Hidden when omitted or empty.
    */
-  date?: Date;
+  when?: string;
 }
 interface AppBarUserProps {
   /**
-   * Major identifier, like the user full name.
+   * Major identifier, like the user full name. Without an `img`, the
+   * avatar shows its initials (e.g. `"RP"` for `"Rafael Perini"`).
    */
   title?: string;
   /**
@@ -57,7 +59,8 @@ interface AppBarUserProps {
    */
   subtitle?: string;
   /**
-   * URL leading to a user picture.
+   * URL leading to a user picture. When omitted, the avatar shows the initials
+   * of the `title`, or a generic icon when there's no title either.
    */
   img?: string;
   /**
@@ -92,6 +95,84 @@ interface Option {
   action?: () => void;
 }
 //#endregion
+//#region src/consts/icons.d.ts
+/**
+ * SVG path of each icon, by its name, in the order the "Ícones" guide page lists them. The paths
+ * come from `@mdi/js`, which exports one constant per icon, so the apps' bundles only take the
+ * icons used here.
+ *
+ * Every name can be passed to the components that accept an icon (e.g. `UIconButton` and the items
+ * of the navigation menu). The map is also the set of icon aliases of the underlying components,
+ * which draw some icons by name on their own (e.g. `close`, the arrows of the pagination and the
+ * checkbox marks): those names must match the aliases exactly, and a component that renders an
+ * alias missing here draws an empty icon. The unit tests of `src/consts/icons.ts` check each
+ * component that renders one.
+ *
+ * - The first names describe the icon's drawing. A name ending in `Alternative` is an alternative
+ *   version of the same drawing (currently, outlined).
+ * - The others describe what the components use the icon for.
+ *
+ * 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;
+  homeAlternative: string;
+  account: string;
+  accountAlternative: string;
+  accountGroup: string;
+  accountGroupAlternative: string;
+  calendar: string;
+  calendarAlternative: string;
+  clipboardText: string;
+  clipboardTextAlternative: string;
+  fileDocument: string;
+  fileDocumentAlternative: string;
+  flask: string;
+  flaskAlternative: string;
+  folder: string;
+  folderAlternative: string;
+  chartBox: string;
+  chartBoxAlternative: string;
+  wallet: string;
+  walletAlternative: string;
+  cog: string;
+  cogAlternative: string;
+  stethoscope: string;
+  pill: string;
+  hospital: string;
+  help: string;
+  notifications: string;
+  menu: string;
+  search: string;
+  showPassword: string;
+  hidePassword: string;
+  close: string;
+  clear: string;
+  dropdown: string;
+  subgroup: string;
+  expand: string;
+  collapse: string;
+  prev: string;
+  next: string;
+  checkboxOn: string;
+  checkboxOff: string;
+  success: string;
+  info: string;
+  warning: string;
+  error: 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 content icons, such as `home` and `calendar`, and the icons the
+ * components draw on their own, such as `close` and `search`. 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.
@@ -113,6 +194,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.
    */
@@ -123,6 +211,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.
    */
@@ -133,6 +228,22 @@ interface NavigationMenuItem {
   action?: () => void;
 }
 //#endregion
+//#region src/components/footer/types.d.ts
+/**
+ * Props of the footer shown by the {@link Main} component.
+ */
+type FooterProps = {
+  /**
+   * Text shown in the footer, e.g. the application version ("Versão 1.4.2").
+   * The footer is hidden when it's empty or omitted.
+   */
+  description?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
 //#region src/components/main/types.d.ts
 /**
  * Props exposed by the {@link Main} component.
@@ -144,6 +255,9 @@ type MainProps = {
   dataTestid?: string;
   /**
    * URL to logo image.
+   *
+   * The logo is decorative (`alt=""`): screen readers identify the app by
+   * the app bar title (`appBar.title`).
    */
   logo?: string;
   /**
@@ -154,6 +268,35 @@ type MainProps = {
    * Navigation menu properties.
    */
   navigationMenu?: NavigationMenuProps;
+  /**
+   * Footer properties. The footer is fixed at the bottom of the screen and
+   * is hidden when it's omitted or its `description` is empty.
+   *
+   * @example
+   * ```vue
+   * <u-main :footer="{ description: `Versão ${version}` }" />
+   * ```
+   */
+  footer?: FooterProps;
+  /**
+   * Shows skeleton loaders in place of the user-related parts of the app bar
+   * and of the navigation menu items while their data is being loaded.
+   * The main content (default slot) isn't affected.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Applies a color to the background of the whole app, e.g. on landing pages. Text placed
+   * directly on the background takes the color the theme pairs with it (white or black), while
+   * the app bar, the footer, sections and dialogs keep their own backgrounds. When omitted, the
+   * app uses the theme's default background.
+   *
+   * @example
+   * ```vue
+   * <u-main background="primary" />
+   * ```
+   */
+  background?: ColorVariant;
 };
 //#endregion
 //#region src/components/main/main.vue.d.ts
@@ -171,8 +314,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$5: typeof __VLS_export$10;
-declare const __VLS_export$10: __VLS_WithSlots$7<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;
@@ -183,84 +326,91 @@ declare const __VLS_export$10: __VLS_WithSlots$7<import("vue", { with: { "resolu
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$7<T, S> = T & {
+type __VLS_WithSlots$11<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/button/button.vue.d.ts
+/**
+ * Button component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-button color="danger" @click="onClick">
+ *     Confirmar
+ *  </u-button>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
+ */
+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;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$10<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-//#region src/components/button/types.d.ts
-type ButtonVariant = "primary" | "secondary" | "ghost";
+//#region src/components/icon-button/types.d.ts
 /**
- * Props exposed by the {@link Button} component.
+ * Props exposed by the {@link IconButton} component.
  */
-type ButtonProps = {
+type IconButtonProps = {
   /**
-   * Applies a distinct style variation to the button.
-   * One of `primary`, `secondary`, or `ghost`.
-   * @default "primary"
+   * 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}
    */
-  variant?: ButtonVariant;
+  icon: Icon;
   /**
-   * Applies a distinct behavior to the button.
-   * One of `button` or `submit`.
-   * @default "button"
+   * 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").
    */
-  type?: "submit" | "button";
+  label: string;
   /**
    * 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
+//#region src/components/icon-button/icon-button.vue.d.ts
 /**
- * Button component to be used throughout the application.
+ * 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-button color="danger" @click="onClick">
- *     Confirmar
- *  </u-button>
+ *   <u-icon-button icon="cog" label="Configurações" @click="onClick" />
  * </template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/icon-button | IconButton Guide}
  */
-declare const _default: typeof __VLS_export$9;
-declare const __VLS_export$9: __VLS_WithSlots$6<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$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<ButtonProps> & Readonly<{
+}, 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>, {
-  default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots$6<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/text-field/types.d.ts
 type TextFieldVariant = "primary" | "secondary";
@@ -278,6 +428,10 @@ type TextFieldProps = {
   /**
    * Applies a distinct behavior to the field.
    * One of `text`, `phone`, `email`, `url`, `password` or `search`.
+   *
+   * With `password`, the field hides its value and shows a "Mostrar senha"
+   * button that toggles between showing and hiding it. The value hides again
+   * when the button is pressed again or the type changes.
    * @default "text"
    */
   type?: TextFieldType;
@@ -287,7 +441,9 @@ type TextFieldProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -326,6 +482,120 @@ type TextFieldProps = {
   dataTestid?: string;
 };
 //#endregion
+//#region src/components/inputs/autocomplete-field/types.d.ts
+/**
+ * Autocomplete/Combobox item type that can be either a string or an object with label and value.
+ */
+type AutocompleteItem<T = string> = string | {
+  label: string;
+  value: T;
+};
+/**
+ * Props exposed by the {@link AutocompleteField} component.
+ */
+type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: TextFieldVariant;
+  /**
+   * Removes the ability to click or target the field.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Displays clear action.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Add rules to require field to be filled before form submission.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Field placeholder.
+   */
+  placeholder?: string;
+  /**
+   * Field message to show and direct user to fill field correctly.
+   *
+   * This message will be replaced when there's an error message to be shown.
+   */
+  hint?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+  /**
+   * Used to prevent user from adding new values to the list.
+   * @default false
+   */
+  strict?: boolean;
+  /**
+   * Allow selecting/typing more than one value.
+   *
+   * Passing the literal `true` narrows `modelValue` and `update:modelValue`
+   * to `T[]` instead of `T`.
+   * @default false
+   */
+  multiple?: Multiple;
+  /**
+   * List of autocomplete items. Can be strings or objects with label and value.
+   * @default []
+   */
+  items?: AutocompleteItem<T>[];
+};
+//#endregion
+//#region src/components/inputs/autocomplete-field/autocomplete-field.vue.d.ts
+/**
+ * Select field component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-autocomplete-field label="Country" :items="['Brazil', 'Argentina']" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/autocomplete-field | AutocompleteField Guide}
+ */
+declare const _default: typeof __VLS_export$17;
+declare const __VLS_export$17: <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;
+  }) & {
+    "onUpdate:modelValue"?: ((value: Multiple extends true ? T[] : T | undefined) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: (event: "update:modelValue", value: Multiple extends true ? T[] : T | undefined) => void;
+}>) => import("vue").VNode & {
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
+//#endregion
 //#region src/components/inputs/text-field/text-field.vue.d.ts
 /**
  * Text field component to be used throughout the application.
@@ -339,8 +609,8 @@ type TextFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$10: typeof __VLS_export$8;
-declare const __VLS_export$8: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+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, {
   "update:modelValue": (value: string) => any;
@@ -402,9 +672,9 @@ type CheckboxProps<T = boolean> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/checkbox | Checkbox Guide}
  */
-declare const _default$1: typeof __VLS_export$7;
-declare const __VLS_export$7: <T = any>(__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<(CheckboxProps<boolean | T> & {
+declare const _default$2: typeof __VLS_export$15;
+declare const __VLS_export$15: <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;
   }) & {
     "onUpdate:modelValue"?: ((value: T) => any) | undefined;
@@ -418,49 +688,378 @@ declare const __VLS_export$7: <T = any>(__VLS_props: NonNullable<Awaited<typeof
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
+type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
-//#region src/components/grid/container/types.d.ts
+//#region src/components/inputs/date-time-field/types.d.ts
+type DateTimeFieldVariant = TextFieldVariant;
+type DateTimeFieldType = "date" | "time" | "datetime";
 /**
- * Props exposed by the {@link Container} component.
+ * Props exposed by the {@link DateTimeField} component.
  */
-type ContainerProps = {
+type DateTimeFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: DateTimeFieldVariant;
+  /**
+   * Defines which pickers are available and the format of the value.
+   *
+   * - `date`: value formatted as `YYYY-MM-DD` (e.g. `2026-09-24`);
+   * - `time`: value formatted as `HH:mm`, 24h (e.g. `14:30`);
+   * - `datetime`: value formatted as `YYYY-MM-DDTHH:mm` (e.g. `2026-09-24T14:30`).
+   * @default "datetime"
+   */
+  type?: DateTimeFieldType;
+  /**
+   * Minimum allowed value, in the same format as the value for the current `type`.
+   *
+   * Earlier options can't be picked, and an earlier value shows an error message.
+   * For `datetime`, the time limit only applies to the minimum's own date.
+   */
+  min?: string;
+  /**
+   * Maximum allowed value, in the same format as the value for the current `type`.
+   *
+   * Later options can't be picked, and a later value shows an error message.
+   * For `datetime`, the time limit only applies to the maximum's own date.
+   */
+  max?: string;
+  /**
+   * Removes the ability to click or target the field.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Displays clear action, which is hidden while the field is `readonly`.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes. The pickers won't open.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Add `rules` to require field to be filled before form submission.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Field placeholder.
+   */
+  placeholder?: string;
+  /**
+   * Field message to show and direct user to fill field correctly.
+   *
+   * This message will be replaced when there's an error message to be shown.
+   */
+  hint?: string;
   /**
    * Component id to use on automated tests.
    */
   dataTestid?: string;
 };
 //#endregion
-//#region src/components/grid/container/container.vue.d.ts
+//#region src/components/inputs/date-time-field/date-time-field.vue.d.ts
 /**
- * Container component to be placed at the top of the component tree.
+ * Date and/or time field component to be used throughout the application.
+ *
+ * Its value uses the native input formats: `YYYY-MM-DD` for `date`, `HH:mm`
+ * for `time` and `YYYY-MM-DDTHH:mm` for `datetime`.
  *
  * @example
  * ```vue
  * <template>
- *  <u-container>
- *     <!-- uimed-components -->
- *  </u-container>
+ *  <u-date-time-field v-model="birthDate" label="Data de nascimento" type="date" />
  * <template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/date-time-field | DateTimeField Guide}
  */
-declare const _default$3: typeof __VLS_export$6;
-declare const __VLS_export$6: __VLS_WithSlots$5<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$5<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
+declare const _default$7: typeof __VLS_export$14;
+declare const __VLS_export$14: 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;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<DateTimeFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  variant: DateTimeFieldVariant;
+  type: DateTimeFieldType;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
-//#region src/components/grid/row/types.d.ts
+//#region src/components/inputs/mask-field/types.d.ts
+type MaskFieldVariant = TextFieldVariant;
 /**
- * Props exposed by the {@link Row} component.
+ * Masks the library provides:
+ *
+ * - `cpf`: `###.###.###-##` (e.g. `123.456.789-09`);
+ * - `cnpj`: `##.###.###/####-##`, where the first 12 positions also accept
+ *   letters, typed in uppercase or lowercase and kept in uppercase (e.g.
+ *   `12.345.678/0001-95` or the alphanumeric `12.ABC.345/01DE-35`);
+ * - `cep`: `#####-###` (e.g. `01310-100`);
+ * - `phone`: `(##) #####-####` (e.g. `(11) 91234-5678`);
+ * - `date`: `##/##/####` (e.g. `31/12/2026`), formatting only.
+ */
+type MaskFieldPreset = "cpf" | "cnpj" | "cep" | "phone" | "date";
+/**
+ * A preset name, or the mask itself, where `#` is a digit (0–9) and any other
+ * character, letters included, is a literal inserted automatically (e.g.
+ * `####-##/####` or `Nº ####`).
+ *
+ * A custom mask must contain at least one `#`, so a misspelled preset (e.g.
+ * `"cpff"`) is a type error.
+ *
+ * @example
+ * ```ts
+ * const preset: MaskFieldMask = "cpf";
+ * const custom: MaskFieldMask = "####-##/####";
+ * const withLetters: MaskFieldMask = "Nº ####";
+ * ```
+ */
+type MaskFieldMask = MaskFieldPreset | `${string}#${string}`;
+/**
+ * Props exposed by the {@link MaskField} component.
+ */
+type MaskFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: MaskFieldVariant;
+  /**
+   * Mask applied to the value while the user types. One of the presets
+   * (`cpf`, `cnpj`, `cep`, `phone` or `date`), or the mask itself, where `#`
+   * is a digit (0–9) and any other character, letters included, is a literal
+   * inserted automatically (e.g. `####-##/####` or `Nº ####`). A custom mask
+   * must contain at least one `#`.
+   *
+   * Only digits are accepted, up to the number of `#` in the mask, except in
+   * the first 12 positions of `cnpj`, which also accept letters (A–Z, without
+   * accents, typed in uppercase or lowercase) for the alphanumeric CNPJ (only
+   * with `cnpj`: the custom mask `##.###.###/####-##` accepts only digits). The
+   * `v-model` holds only these characters, with letters in uppercase (e.g.
+   * `12345678909` for `cpf`, and `12345678000195` or `12ABC34501DE35` for
+   * `cnpj`). A literal the user could also type, such as a fixed digit
+   * (`0800 ###-####`), isn't supported: where the literal is expected, the
+   * same character is read as the literal.
+   *
+   * Editing in the middle of the value shifts the characters after it, and one
+   * that doesn't fit its new position (e.g. a letter of `cnpj` shifted into
+   * the last 2 positions) is discarded.
+   *
+   * The `cpf` and `cnpj` masks don't validate check digits.
+   *
+   * Changing it keeps the `v-model`: a value that doesn't fit the new mask
+   * (e.g. longer than it) is displayed cut and fails validation with "Valor
+   * inválido".
+   */
+  mask: MaskFieldMask;
+  /**
+   * Removes the ability to click or target the field.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Displays clear action.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Add `rules` to require field to be filled before form submission.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Field placeholder. Defaults to the mask, with `0` in place of each `#`,
+   * e.g. `000.000.000-00` for `cpf`, `00.000.000/0000-00` for `cnpj` and
+   * `Nº 0000` for `Nº ####`.
+   */
+  placeholder?: string;
+  /**
+   * Field message to show and direct user to fill field correctly.
+   *
+   * This message will be replaced when there's an error message to be shown.
+   */
+  hint?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/inputs/mask-field/mask-field.vue.d.ts
+/**
+ * Text field that masks the value while the user types, such as CPF, CNPJ
+ * (numeric or alphanumeric), CEP, phone or a custom mask. Its value holds only
+ * the typed characters, without the mask's literals and with letters in
+ * uppercase.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-mask-field v-model="cpf" label="CPF" mask="cpf" />
+ *  <u-mask-field v-model="protocol" label="Protocolo" mask="####-##/####" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/mask-field | MaskField Guide}
+ */
+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, {
+  "update:modelValue": (value: string) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<MaskFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  variant: MaskFieldVariant;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/grid/container/types.d.ts
+/**
+ * Props exposed by the {@link Container} component.
+ */
+type ContainerProps = {
+  /**
+   * Stretches the container to the whole height of its parent, which must have a height of its
+   * own, e.g. the content area of `UMain`.
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/grid/container/container.vue.d.ts
+/**
+ * Container component to be placed at the top of the component tree.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *  <u-container>
+ *     <!-- uimed-components -->
+ *  </u-container>
+ * <template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
+ */
+declare const _default$4: typeof __VLS_export$12;
+declare const __VLS_export$12: __VLS_WithSlots$9<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$9<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/composables/alignment/types.d.ts
+/**
+ * Horizontal alignment of a component's items: to the start, to the center or to the end,
+ * following the text direction.
+ */
+type AlignX = "start" | "center" | "end";
+/**
+ * Vertical alignment of a component's items: to the top, to the center, to the bottom, or
+ * stretched to the whole height available.
+ */
+type AlignY = "start" | "center" | "end" | "stretch";
+//#endregion
+//#region src/components/grid/row/types.d.ts
+/**
+ * Props exposed by the {@link Row} component.
  */
 type RowProps = {
+  /**
+   * Horizontal alignment of the row's columns on each line.
+   * Available options are:
+   * - `"start"`: aligns the columns to the start of the line;
+   * - `"center"`: centers the columns horizontally;
+   * - `"end"`: aligns the columns to the end of the line.
+   *
+   * `"start"` and `"end"` follow the text direction. It only has a visible effect when the
+   * columns of a line don't fill it, e.g. with `cols="auto"` or sizes adding up to less than 12.
+   * When the columns wrap into several lines, each line is aligned on its own.
+   *
+   * 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"
+   */
+  alignX?: AlignX;
+  /**
+   * 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, unless the row has `fullHeight`: then
+   * the columns, as a group, are aligned within the row's height.
+   * @default "start"
+   */
+  alignY?: AlignY;
+  /**
+   * Stretches the row to the whole height of its parent: the visible content area of `UMain`
+   * (below its app bar) or a `UContainer` with `fullHeight`.
+   *
+   * Combine it with `alignY` to place the columns within that height, e.g. `alignY="center"`
+   * and `alignX="center"` to center a login form on the screen. A row with `fullHeight` takes
+   * the whole height by itself, so other rows next to it are pushed below the visible area.
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * Renders the row as a list (`<ul>`), without the list's default indentation
+   * and bullets, so assistive technologies announce its columns as the items
+   * of a list. Use it for a grid of records that is, semantically, a list,
+   * like cards of patients, and set `listItem` on each of its `UColumn`s.
+   * @default false
+   */
+  list?: boolean;
   /**
    * Component id to use on automated tests.
    */
@@ -475,7 +1074,7 @@ type RowProps = {
  * ```vue
  * <template>
  *   <u-container>
- *    <u-row>
+ *     <u-row align-x="center" align-y="center">
  *       <!-- uimed-column -->
  *     </u-row>
  *   </u-container>
@@ -484,11 +1083,11 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$6: typeof __VLS_export$5;
-declare const __VLS_export$5: __VLS_WithSlots$4<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$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;
 }>;
-type __VLS_WithSlots$4<T, S> = T & {
+type __VLS_WithSlots$8<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -507,6 +1106,13 @@ type ColumnProps = {
    * @default "12"
    */
   cols?: Cols;
+  /**
+   * Renders the column as an item of a list (`<li>`), without its bullet.
+   * Use it on every column of a `URow` with `list`, whose records are,
+   * semantically, the items of a list.
+   * @default false
+   */
+  listItem?: boolean;
   /**
    * Component id to use on automated tests.
    */
@@ -533,13 +1139,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$2: typeof __VLS_export$4;
-declare const __VLS_export$4: __VLS_WithSlots$3<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$10;
+declare const __VLS_export$10: __VLS_WithSlots$7<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$3<T, S> = T & {
+type __VLS_WithSlots$7<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -576,15 +1182,15 @@ type FormProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/form | Form Guide}
  */
-declare const _default$4: typeof __VLS_export$3;
-declare const __VLS_export$3: __VLS_WithSlots$2<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$9;
+declare const __VLS_export$9: __VLS_WithSlots$6<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$2<T, S> = T & {
+type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -606,11 +1212,11 @@ type __VLS_WithSlots$2<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$8: typeof __VLS_export$2;
-declare const __VLS_export$2: __VLS_WithSlots$1<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$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;
 }>;
-type __VLS_WithSlots$1<T, S> = T & {
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -618,6 +1224,7 @@ type __VLS_WithSlots$1<T, S> = T & {
 //#endregion
 //#region src/components/sections/section/types.d.ts
 type SectionVariant = "primary" | "secondary";
+type SectionTextAlign = "start" | "center" | "end";
 /**
  * Props exposed by the {@link Section} component.
  */
@@ -636,6 +1243,20 @@ type SectionProps = {
    * Subtitle displayed below the title.
    */
   subtitle?: string;
+  /**
+   * Horizontal alignment of the section's title, subtitle, content and actions.
+   * Available options are:
+   * - `"start"`: aligns the text to the start (left in left-to-right languages)
+   *   and keeps the actions at the end;
+   * - `"center"`: centers the text and the actions;
+   * - `"end"`: aligns the text and the actions to the end.
+   *
+   * Uses `start`/`end` instead of `left`/`right`, so it follows the text
+   * direction in right-to-left languages. Nested components inherit the
+   * alignment, unless they define their own.
+   * @default "start"
+   */
+  textAlign?: SectionTextAlign;
   /**
    * List of actions displayed at the bottom of the section, inside
    * `v-card-actions`. When undefined or empty, no actions area is rendered.
@@ -648,6 +1269,9 @@ type SectionProps = {
   fullWidth?: boolean;
   /**
    * Makes the section occupy 100% of its parent's height.
+   *
+   * Inside a `URow`, set its `alignY` to `"stretch"` so the section takes the height of the
+   * tallest column on the same line.
    * @default false
    */
   fullHeight?: boolean;
@@ -671,7 +1295,8 @@ interface SectionAction extends ButtonProps {
    */
   label: string;
   /**
-   * Called when the action button is clicked.
+   * Called when the action button is clicked. Not called while the action is `disabled` or
+   * `loading`.
    */
   onClick?: (event: MouseEvent) => void;
 }
@@ -692,11 +1317,11 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$7: typeof __VLS_export$1;
-declare const __VLS_export$1: __VLS_WithSlots<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$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;
 }>;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -767,7 +1392,437 @@ type TableProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
  */
+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
+type DetailsVariant = "primary" | "secondary";
+/**
+ * Props exposed by the {@link Details} component.
+ */
+type DetailsProps = {
+  /**
+   * Applies a distinct style variation to the details.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: DetailsVariant;
+  /**
+   * Title displayed on the header, which expands or collapses the content
+   * when clicked. The header stays clickable even without a title.
+   */
+  title?: string;
+  /**
+   * Shows a skeleton loader in place of the details while data is being
+   * loaded.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/details/details.vue.d.ts
+/**
+ * Details component to show content that can be expanded or collapsed by
+ * clicking on its title. Starts collapsed.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-details title="Title">
+ *     Content
+ *   </u-details>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/details | Details Guide}
+ */
+declare const _default$8: typeof __VLS_export$5;
+declare const __VLS_export$5: __VLS_WithSlots$3<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$3<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/img/types.d.ts
+/**
+ * Props exposed by the {@link Img} component.
+ */
+type ImgProps = {
+  /**
+   * Path or URL of the image.
+   */
+  src: string;
+  /**
+   * Width of the image. A number sets it in pixels, and a string sets it in
+   * any CSS unit (e.g. `"100%"`). Shrinks to fit the available width when
+   * it's larger (e.g. inside a narrow `UColumn`).
+   */
+  width?: number | string;
+  /**
+   * Height of the image. A number sets it in pixels, and a string sets it in
+   * any CSS unit (e.g. `"10rem"`).
+   */
+  height?: number | string;
+  /**
+   * Proportion between width and height (e.g. `16 / 9`), used to reserve the
+   * image's space before it loads. Ignored when `height` is set.
+   */
+  aspectRatio?: number;
+  /**
+   * Fills the image's area, cropping the image when its proportion differs
+   * from the area's. By default, the whole image is shown inside the area.
+   * @default false
+   */
+  cover?: boolean;
+  /**
+   * Loads the image right away, instead of when it's about to become
+   * visible. Use it for images visible when the page opens, such as a logo.
+   * @default false
+   */
+  eager?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/img/img.vue.d.ts
+/**
+ * Decorative image, ignored by assistive technologies, loaded when it's about
+ * to become visible. Set its dimensions to reserve its space before it loads.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-row>
+ *     <u-column cols="12">
+ *       <u-img src="/logo.svg" :width="380" :height="88" eager />
+ *     </u-column>
+ *   </u-row>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/img | Img Guide}
+ */
+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
+/**
+ * Props exposed by the {@link Link} component.
+ */
+type LinkProps = {
+  /**
+   * Where the link goes. A route inside the app (`"/login"`,
+   * `{ name: "forgot-password" }`) navigates through the app's router; a URL
+   * starting with `http` navigates through the browser, in the same tab.
+   */
+  route: RouteLocationRaw;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/link/link.vue.d.ts
+/**
+ * Standalone text link, such as "Forgot your password?" below a login form.
+ * Routes inside the app navigate through the app's router, and URLs starting
+ * with `http` navigate through the browser, in the same tab.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-link route="/forgot-password">Forgot your password?</u-link>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/link | Link Guide}
+ */
+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;
+}>;
+type __VLS_WithSlots$2<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/data-sets/data-set/types.d.ts
+/**
+ * Number of records shown side by side on each row of a {@link DataSet}.
+ */
+type DataSetColumns = 1 | 2 | 3 | 4 | 6;
+/**
+ * Props exposed by the {@link DataSet} component.
+ */
+type DataSetProps<T extends object> = {
+  /**
+   * Records to be listed. Each record of the current page is passed, as is,
+   * to the default slot.
+   * @default []
+   */
+  items?: T[];
+  /**
+   * Maximum number of records shown side by side on each row of the grid.
+   * One of `1`, `2`, `3`, `4` or `6`.
+   *
+   * It's reduced to the largest of these values that keeps each record's card
+   * at least 240px wide within the data set's own width, so narrow
+   * containers, like dialogs or side panels, show fewer records per row, down
+   * to a single one. On extra small screens, each record always takes the
+   * full width.
+   * @default 3
+   */
+  columns?: DataSetColumns;
+  /**
+   * Maximum number of records shown per page. Page controls are only shown
+   * when there's more than one page.
+   * @default 10
+   */
+  itemsPerPage?: number;
+  /**
+   * Shows a search field above the records, bound to `v-model:search`.
+   * @default false
+   */
+  searchable?: boolean;
+  /**
+   * Record properties considered by the search. When undefined or empty,
+   * every property of the record is considered.
+   */
+  searchKeys?: Array<Extract<keyof T, string>>;
+  /**
+   * Message shown when there are no records to list, either because `items`
+   * is empty or because no record matches the search.
+   * @default "Nenhum registro encontrado."
+   */
+  noDataText?: string;
+  /**
+   * Shows a skeleton loader in place of the records while data is being
+   * loaded.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+/**
+ * Slots exposed by the {@link DataSet} component.
+ */
+type DataSetSlots<T extends object> = {
+  /**
+   * Renders each record of the current page in its own grid column, usually
+   * with `UDataSetItem`.
+   * @param props.item The original record, from `items`.
+   * @param props.index Position of the record inside the current page.
+   */
+  default?: (props: {
+    item: T;
+    index: number;
+  }) => unknown;
+};
+//#endregion
+//#region src/components/data-sets/data-set/data-set.vue.d.ts
+/**
+ * Data set component to list records as a responsive grid of cards, with
+ * client-side pagination and an optional search field. Each record of the
+ * current page is rendered by the default slot, usually with `UDataSetItem`.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-data-set :items="patients" :columns="4" searchable>
+ *     <template #default="{ item }">
+ *       <u-data-set-item :title="item.name" :subtitle="item.plan" />
+ *     </template>
+ *   </u-data-set>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/data-set | DataSet Guide}
+ */
+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;
+  }) & {
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:search"?: ((value: string) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: DataSetSlots<T>;
+  emit: ((event: "update:page", value: number) => void) & ((event: "update:search", value: string) => void);
+}>) => import("vue").VNode & {
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
+//#endregion
+//#region src/components/data-sets/data-set-item/types.d.ts
+/**
+ * Props exposed by the {@link DataSetItem} component.
+ */
+type DataSetItemProps = {
+  /**
+   * Title displayed at the top of the record's card.
+   */
+  title?: string;
+  /**
+   * Short description displayed below the title.
+   */
+  subtitle?: string;
+  /**
+   * Applies a distinct style variation to the record's card, just like on
+   * `USection`. One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: SectionVariant;
+  /**
+   * Actions of the record, like "Editar" and "Excluir", displayed at the
+   * bottom of its card, just like on `USection`. When undefined or empty, no
+   * actions area is rendered.
+   */
+  actions?: SectionAction[];
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+/**
+ * Slots exposed by the {@link DataSetItem} component.
+ */
+type DataSetItemSlots = {
+  /**
+   * Details of the record, displayed below the title and subtitle, like a
+   * vertical `UTable` with some of its fields.
+   */
+  default?: () => unknown;
+};
+//#endregion
+//#region src/components/data-sets/data-set-item/data-set-item.vue.d.ts
+/**
+ * Card of a single record listed by a {@link DataSet}, built on `USection`.
+ * It fills the height of its grid column, so the cards of a row line up. Its
+ * details, like a vertical `UTable`, go in the default slot.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-data-set :items="patients">
+ *     <template #default="{ item }">
+ *       <u-data-set-item
+ *         :title="item.name"
+ *         subtitle="Beneficiário"
+ *         :actions="[{ label: 'Editar', variant: 'secondary', onClick: () => edit(item) }]"
+ *       >
+ *         <u-table :headers="['Plano', 'Idade']" :items="[[item.plan, item.age]]" vertical />
+ *       </u-data-set-item>
+ *     </template>
+ *   </u-data-set>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/data-set | DataSet Guide}
+ */
+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`.
+   * While any action is `loading`, the user can't close the dialog with `Esc`, a click outside or
+   * the browser's back button, but setting `v-model` to `false` still closes it.
+   */
+  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. While it's `loading`, the user can't close the dialog, but setting `v-model` to `false` still does.
+ */
+interface DialogButtonAction extends ButtonProps {
+  /**
+   * Text displayed on the action button.
+   */
+  label: string;
+  /**
+   * Called when the action button is clicked. Not called while the action is `disabled` or
+   * `loading`. 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: 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 __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 UButton, _default$1 as UCheckbox, _default$2 as UColumn, _default$3 as UContainer, _default$4 as UForm, _default$5 as UMain, _default$6 as URow, _default$7 as USection, _default$8 as USectionContent, _default$9 as UTable, _default$10 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 };