@nexdom/uimed-vue 2.0.0-beta.44 → 2.0.0-beta.46

package/AGENTS.md

@@ -153,7 +153,7 @@ Use an existing component (e.g. `button`) as the reference, and deliver all of t
 2. The `U`-prefixed export in `src/components/index.ts`.
 3. A usage guide at `docs/guide/components/<name>.md`, with `<demo>` examples (and a `<playground>` section when the component has configurable props), and an API reference at `docs/api/components/<name>.md` (props, events and slots tables). Both in Portuguese. In a demo's template inside a `.md` file, don't put an attribute with a template literal after one with an arrow function in the same tag: the Markdown type-check (`vue-tsc`) reads the `>` of `=>` as the end of the tag and fails with `TS1003`. Order the attributes so the template literal comes first.
 4. Both pages registered in the sidebar at `docs/.vitepress/config.ts`.
-5. `e2e/components/<name>.spec.ts` covering the guide's interactive examples and a "UI consistency" screenshot check (plus accessible snapshots where relevant). Commit the generated files under `__snapshots__`/`__screenshot__`.
+5. `e2e/components/<name>.spec.ts` covering the guide's interactive examples, an "accessibility" check (see [Testing conventions](#testing-conventions)) and a "UI consistency" screenshot check (plus accessible snapshots where relevant). Commit the generated files under `__snapshots__`/`__screenshot__`.
 6. The full CI sequence passing locally.
 
 ## Adding a new composable
@@ -163,7 +163,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 1. `src/composables/<group>/<name>.ts` and `__tests__/<name>.test.ts`, plus the types in the group's `types.ts`. If it relies on an internal component (as `useToast` relies on the internal `Toast` rendered by `UMain`), that component follows the component layout but isn't exported.
 2. The export in `src/composables/index.ts`, and its assertion in `src/composables/__tests__/index.test.ts`.
 3. A usage guide at `docs/guide/composables/<name>.md` and an API reference at `docs/api/composables/<name>.md`, both in Portuguese, registered in both sidebars at `docs/.vitepress/config.ts` and listed in `docs/api/index.md` and in the table of `docs/guide/index.md`. If it relies on `UMain` (like `useToast`), also mention it in `UMain`'s guide and API pages.
-4. `e2e/composables/<name>.spec.ts` covering the guide's examples and a "UI consistency" screenshot check.
+4. `e2e/composables/<name>.spec.ts` covering the guide's examples, an "accessibility" check (see [Testing conventions](#testing-conventions)) and a "UI consistency" screenshot check.
 5. The full CI sequence passing locally.
 
 ## Code conventions
@@ -178,7 +178,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Reuse the shared internal composables for props that recur across components, so every component maps them to Vuetify the same way, instead of mapping them again:
   - `fullWidth`/`fullHeight`: `useFullWidth`/`useFullHeight` (`src/composables/dimensions/dimensions.ts`), applying Vuetify's `w-100`/`h-100` classes even where the component has `width`/`height` props.
   - `alignX`/`alignY`: `useAlignX`/`useAlignY` (`src/composables/alignment/alignment.ts`), with the `AlignX`/`AlignY` types from the group's `types.ts`.
-  - `color`: `useVuetifyColor` (`src/composables/colors/use-vuetify-color.ts`), with the `ColorVariant` type from the group's `types.ts`.
+  - `color`: `useVuetifyColor` (`src/composables/colors/use-vuetify-color.ts`), with the `ColorVariant` type from the group's `types.ts`. Where the color is the text's instead of a fill (e.g. `UButton`'s `ghost` variant), use `useVuetifyTextColor` (`use-vuetify-text-color.ts`) instead: the fills are too light to reach WCAG AA's contrast as text, so each one has a darker text shade in the theme.
 
   A new prop that does the same as one of these takes its name and type. When a second component needs a mapping that only one component has, move it into a shared composable first.
 
@@ -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.
@@ -219,6 +220,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - With fake timers in jsdom, Vuetify transitions (e.g. of `VDialog`, `VMenu`) don't finish on their own. Emit the transition events on the Vuetify component (`wrapper.findComponent(VDialog).vm.$emit("afterLeave")`) or advance the timers with `await vi.runAllTimersAsync()`.
 - Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests. Mutants that don't compile are reported as compile errors and don't count toward the score.
 - E2E tests (Playwright, `e2e/`) run against the built docs preview (`http://localhost:4173/uimed-vue/`). Snapshots/screenshots live under `__snapshots__`/`__screenshot__` next to each spec.
+- Every E2E spec has an "accessibility" `describe` that calls `expectNoA11yViolations(page)` from `e2e/utils.ts` at least once. It runs axe against WCAG 2.2 AA and its best practices on the page's demos and overlays, in both of the docs' color schemes (the demos keep the library's light theme on a background of their own in dark mode), and fails on any violation. Check each state that renders something new, too: open overlays (menus, dialogs, toasts) and every color of a variant whose text takes the color (as `button.spec.ts` does for `ghost`). Contrast is the most common failure: the theme's colors and text shades must keep 4.5:1, which `src/__tests__/index.test.ts` checks. Don't make a check pass by disabling rules or excluding elements: fix the cause, or stop and ask. The helper only disables the landmark rules that fail because of the docs' layout, with a comment saying why.
 - Before keeping a new screenshot as a baseline, open it and check it against how plain Vuetify renders the same component: overflowing content shows its scrollbar, buttons and cards keep their native paddings, nothing touches the edges or gets clipped. A screenshot that only "looks fine" isn't enough: name what you checked in your report.
 - Generate and update screenshots only on Linux, as CI does: in the Dev Container, or in the Playwright Docker image of the version in `package.json` (`mcr.microsoft.com/playwright:v<version>-noble`). Screenshots taken on Windows or macOS render fonts differently and fail in CI.
 - Update baselines with `--update-snapshots=changed`, scoped to the spec you changed. `--update-snapshots=all` also rewrites accessible snapshots (`.aria.yml`) that didn't need to change.

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-BbWo6RIy.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

@@ -1,4 +1,4 @@
-import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
+import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Czq2P-Z9.js";
 import { useLocale, useMask } from "vuetify";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
@@ -14,6 +14,13 @@ function routeToProps(route) {
 	const location = toValue(route);
 	return isExternalRoute(location) ? { href: location } : { to: location };
 }
+/**
+* Maps a menu item's route to its list item's props. An item without a route only runs its action,
+* so it's a button: Vuetify would make it a list item, which the menus' groups of links don't allow.
+*/
+function routeToListItemProps(route) {
+	return route ? routeToProps(route) : { role: "button" };
+}
 function isExternalRoute(route) {
 	return typeof route === "string" && route.startsWith("http");
 }
@@ -186,7 +193,8 @@ var skeleton_loader_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = { class: "opacity-60" };
+const _hoisted_1$3 = { class: "text-high-emphasis" };
+const _hoisted_2$1 = { class: "text-medium-emphasis" };
 //#endregion
 //#region src/components/app-bar/app-bar.vue
 var app_bar_default = /* @__PURE__ */ defineComponent({
@@ -313,11 +321,14 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 											active: !notification.read,
 											title: notification.title,
 											subtitle: notification.subtitle,
-											"active-class": "text-primary"
-										}, createSlots({ _: 2 }, [notification.when ? {
+											"active-class": "text-primary-text"
+										}, createSlots({
+											subtitle: withCtx(({ subtitle }) => [createElementVNode("span", _hoisted_1$3, toDisplayString(subtitle), 1)]),
+											_: 2
+										}, [notification.when ? {
 											name: "append",
 											fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
-												default: withCtx(() => [createElementVNode("small", _hoisted_1$3, toDisplayString(notification.when), 1)]),
+												default: withCtx(() => [createCommentVNode(" No prop sets the secondary text color, which follows the theme's contrast "), createElementVNode("small", _hoisted_2$1, toDisplayString(notification.when), 1)]),
 												_: 2
 											}, 1024)]),
 											key: "0"
@@ -354,15 +365,24 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 								"data-testid": userMenuDataTestid.value
 							}, {
 								prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
-								default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
+								default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), {
+									nav: "",
+									role: "group"
+								}, {
 									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
 										return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
 											key: 0,
 											class: "mt-1"
 										})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
-											activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
+											activator: withCtx(({ props, isOpen }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, {
+												title: option.description,
+												"aria-expanded": isOpen,
+												role: void 0,
+												tag: "button",
+												type: "button"
+											}), null, 16, ["title", "aria-expanded"])]),
 											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
-												return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
+												return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToListItemProps)(childOption.route), {
 													title: childOption.description,
 													onClick: childOption.action
 												}), null, 16, ["title", "onClick"]);
@@ -371,7 +391,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 										}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
 											key: 2,
 											title: option.description
-										}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
+										}, { ref_for: true }, unref(routeToListItemProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
 									}), 128))]),
 									_: 1
 								})]),
@@ -423,6 +443,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";
@@ -768,21 +825,45 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 					type: "list-item@6",
 					color: "primary"
 				}, {
-					default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
+					default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links "), createVNode(unref(VList), {
+						nav: "",
+						role: "group"
+					}, {
 						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, isOpen }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, {
+									title: item.description,
+									"prepend-icon": item.icon && unref(icons)[item.icon],
+									"aria-expanded": isOpen,
+									role: void 0,
+									tag: "button",
+									type: "button"
+								}), null, 16, [
+									"title",
+									"prepend-icon",
+									"aria-expanded"
+								])]),
 								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), {
+									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToListItemProps)(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(routeToListItemProps)(item.route), { onClick: item.action }), null, 16, [
+								"title",
+								"prepend-icon",
+								"onClick"
+							]))], 64);
 						}), 128))]),
 						_: 1
 					})]),
@@ -912,6 +993,15 @@ var toast_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/colors/use-vuetify-text-color.ts
+/**
+* Maps a color to the theme color to use when it's the text color, e.g. in a ghost button, so it
+* keeps WCAG AA's contrast on the surface and background.
+*/
+function useVuetifyTextColor(color) {
+	return computed(() => colorToVuetifyTextColor[toValue(color) ?? "primary"]);
+}
+//#endregion
 //#region src/composables/button/button.ts
 const buttonVariantToVuetifyVariant = {
 	primary: "elevated",
@@ -944,6 +1034,15 @@ function useButtonType(type, route, blocked) {
 	});
 }
 /**
+* Maps the button's color to Vuetify's. A ghost button has no fill, so its color is the text's,
+* which takes the color's text shade to keep WCAG AA's contrast.
+*/
+function useButtonColor(color, variant) {
+	const fillColor = useVuetifyColor(color);
+	const textColor = useVuetifyTextColor(color);
+	return computed(() => toValue(variant) === "ghost" ? textColor.value : fillColor.value);
+}
+/**
 * The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
 * doesn't apply to it.
 */
@@ -998,7 +1097,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const variant = useButtonVariant(() => props.variant);
-		const color = useVuetifyColor(() => props.color);
+		const color = useButtonColor(() => props.color, () => props.variant);
 		const widthClass = useFullWidth(() => props.fullWidth);
 		const isDisabled = computed(() => props.disabled || props.loading);
 		const routeProps = useRouteProps(useButtonRoute(() => props.route, isDisabled));
@@ -1377,6 +1476,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) => {
@@ -3032,4 +3178,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.js

@@ -1,4 +1,4 @@
-import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Ck2_ZW7T.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Czq2P-Z9.js";
 import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, toValue, watch } from "vue";
 import { isDeepEqual } from "@nexdom/shared/utils";
 import { onBeforeRouteLeave } from "vue-router";

package/dist/index.js

@@ -24,9 +24,18 @@ function createUimed() {
 					success: "#A9EFC5",
 					warning: "#FFE596",
 					error: "#D92D20",
-					info: "#9ACBE5"
+					info: "#9ACBE5",
+					"on-primary": "#000000",
+					"primary-text": "#007A4A",
+					"success-text": "#16783E",
+					"info-text": "#277096",
+					"warning-text": "#846300",
+					"error-text": "#C92A1E"
 				},
-				variables: { "border-color": "#D0D5DD" }
+				variables: {
+					"border-color": "#D0D5DD",
+					"medium-emphasis-opacity": .7
+				}
 			} }
 		}
 	});

package/dist/{use-dialog-Ck2_ZW7T.js → use-dialog-Czq2P-Z9.js}

@@ -7,6 +7,19 @@ const colorToVuetifyColor = {
 	caution: "warning",
 	danger: "error"
 };
+/**
+* The theme colors to use when a color is the text color, on the surface or background, instead
+* of a fill. The fills are too light to reach WCAG AA's contrast as text, so each one has a darker
+* shade, except `secondary`, which is almost white and gives way to the theme's text color.
+*/
+const colorToVuetifyTextColor = {
+	primary: "primary-text",
+	secondary: "on-surface",
+	positive: "success-text",
+	informative: "info-text",
+	caution: "warning-text",
+	danger: "error-text"
+};
 //#endregion
 //#region src/composables/colors/use-vuetify-color.ts
 function useVuetifyColor(color) {
@@ -45,7 +58,8 @@ function toast(options) {
 	const toastMessage = {
 		text,
 		color: color.value,
-		prependIcon: `$${color.value}`
+		prependIcon: `$${color.value}`,
+		timerColor: `rgb(var(--v-theme-on-${color.value}))`
 	};
 	messages.value.push(toastMessage);
 }
@@ -121,4 +135,4 @@ function dialog(options) {
 	}, (value) => value);
 }
 //#endregion
-export { messages as a, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };
+export { messages as a, colorToVuetifyTextColor as c, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.44",
+  "version": "2.0.0-beta.46",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -52,6 +52,7 @@
     "postinstall": "playwright install --with-deps chromium"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@mdi/font": "^7.4.47",