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

package/AGENTS.md

@@ -22,11 +22,11 @@ pnpm add @nexdom/uimed-vue
 yarn add @nexdom/uimed-vue
 ```
 
-Peer dependencies (`@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `sass-embedded`, `vite-plus`, `vue`, `vue-component-type-helpers`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
+Peer dependencies (`@mdi/js`, `@nexdom/shared`, `resize-observer-polyfill`, `sass-embedded`, `vite-plus`, `vue`, `vue-component-type-helpers`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
 
 ### Setup
 
-Add the Vite plugin, which compiles the components' styles with the library's font and Sass settings, and loads the icon font with `font-display`, so it doesn't block rendering while it loads. Without it, components lose the Unimed Slab font:
+Add the Vite plugin, which compiles the components' styles with the library's font and Sass settings. Without it, components lose the Unimed Slab font:
 
 ```ts
 // vite.config.ts
@@ -206,7 +206,10 @@ 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()`), 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.
+- Icons are drawn as inline SVGs with the paths of `@mdi/js`, imported one by one so the apps' bundles only take the icons used: there's no icon font, so never use `mdi-*` classes. Every icon is in the internal `icons` map of `src/consts/icons.ts`, and every name in it is public (the `Icon` type in `src/consts/types.ts`):
+  - To add an icon, add it to that map and to the list on the "Ícones" guide page (`docs/guide/icons.md`), in the same order, and check that `@mdi/js` exports it: the unit test of `src/consts/icons.ts` checks every path, and the page's E2E spec fails when the page and the map list different icons. Names are camelCase, like the Vuetify aliases they must match (e.g. `checkboxOn`/`checkboxOff`). Reuse an existing name before adding one with the same drawing.
+  - Components use the map for their own icons too (`icons.help`, `icons.close`), never `$` aliases nor `mdi-*` strings.
+  - The map is also Vuetify's alias set (`createUimed()` and `vueTestUtilsPluginUimed()` pass it as `aliases`), since Vuetify's components draw some icons by alias on their own (e.g. `$clear` in clearable fields, `$prev`/`$next` in the pagination). It only has the aliases the library's components render, so a component that renders a new one (a new Vuetify component or prop) needs it added to the map, named exactly as the alias; without it, the icon is drawn empty, without a warning. Add each state that renders an alias to `src/consts/__tests__/icon-aliases.test.ts`, which fails on icons drawn without a path of `@mdi/js`.
 - Pure helpers that don't use Vue live in `src/utils/<name>.ts`, with tests in `src/utils/__tests__/`. Generic helpers that any TypeScript project could use (e.g. `isDeepEqual`) belong in `@nexdom/shared` instead.
 - Public components/composables are re-exported from `src/components/index.ts` and `src/composables/index.ts`. Prop types stay internal (`types.ts` is not re-exported); consumers derive them with `ComponentProps` (see [Usage](#usage)).
 - Every publicly exported component must use the `U` prefix on its export identifier (e.g., `UButton`, `UMain`), while internal file names and component names remain unprefixed.

package/dist/components.d.ts

@@ -97,46 +97,77 @@ interface Option {
 //#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).
+ * 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;
-  "home-alternative": string;
+  homeAlternative: string;
   account: string;
-  "account-alternative": string;
-  "account-group": string;
-  "account-group-alternative": string;
+  accountAlternative: string;
+  accountGroup: string;
+  accountGroupAlternative: string;
   calendar: string;
-  "calendar-alternative": string;
-  "clipboard-text": string;
-  "clipboard-text-alternative": string;
-  "file-document": string;
-  "file-document-alternative": string;
+  calendarAlternative: string;
+  clipboardText: string;
+  clipboardTextAlternative: string;
+  fileDocument: string;
+  fileDocumentAlternative: string;
   flask: string;
-  "flask-alternative": string;
+  flaskAlternative: string;
   folder: string;
-  "folder-alternative": string;
-  "chart-box": string;
-  "chart-box-alternative": string;
+  folderAlternative: string;
+  chartBox: string;
+  chartBoxAlternative: string;
   wallet: string;
-  "wallet-alternative": string;
+  walletAlternative: string;
   cog: string;
-  "cog-alternative": 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 full list, with a preview of each icon, is on the "Ícones" guide
- * page.
+ * 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}
  */
@@ -589,8 +620,8 @@ declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  clearable: boolean;
   type: TextFieldType;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts

package/dist/components.js

@@ -1,4 +1,5 @@
-import { a as messages, c as colorToVuetifyColor, l as colorToVuetifyTextColor, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-C0sM_bA2.js";
+import { t as icons } from "./icons-H53IqH1s.js";
+import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as requests, s as colorToVuetifyColor } from "./use-dialog-Bn54H-K3.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";
@@ -269,7 +270,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 		const userAvatarProps = computed(() => {
 			if (props.user.img) return { image: props.user.img };
 			if (userInitials.value) return { text: userInitials.value };
-			return { icon: "mdi-account-outline" };
+			return { icon: icons.accountAlternative };
 		});
 		function isParentOption(option) {
 			return "items" in option;
@@ -287,8 +288,8 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 						showHelp.value ? (openBlock(), createBlock(unref(VBtn), mergeProps({ key: 0 }, unref(routeProps), {
 							"data-testid": helpBtnDataTestid.value,
 							"aria-label": "Ajuda",
-							icon: "mdi-help-circle-outline"
-						}), null, 16, ["data-testid"])) : createCommentVNode("v-if", true),
+							icon: unref(icons).help
+						}), null, 16, ["data-testid", "icon"])) : createCommentVNode("v-if", true),
 						showNotifications.value ? (openBlock(), createBlock(unref(VMenu), {
 							key: 1,
 							modelValue: notificationsOpen.value,
@@ -306,7 +307,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 									label: unreadLabel.value,
 									color: "error"
 								}, {
-									default: withCtx(() => [createVNode(unref(VIcon), { icon: "mdi-bell-outline" })]),
+									default: withCtx(() => [createVNode(unref(VIcon), { icon: unref(icons).notifications }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, [
 									"model-value",
@@ -454,43 +455,6 @@ 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";
@@ -578,10 +542,10 @@ function useTextFieldAppendIcon(type, disabled) {
 		toggle();
 	}
 	const iconProps = computed(() => {
-		if (toValue(type) === "search") return { icon: "mdi-magnify" };
+		if (toValue(type) === "search") return { icon: icons.search };
 		if (!isPasswordField.value) return void 0;
 		return {
-			icon: isPasswordVisible.value ? "mdi-eye-off" : "mdi-eye",
+			icon: isPasswordVisible.value ? icons.hidePassword : icons.showPassword,
 			"aria-label": "Mostrar senha",
 			"aria-pressed": isPasswordVisible.value,
 			onClick: toggle,
@@ -994,16 +958,24 @@ var toast_default = /* @__PURE__ */ defineComponent({
 			}, {
 				actions: withCtx(({ props }) => [createVNode(unref(VIconBtn), mergeProps(props, {
 					"aria-label": "Fechar",
-					icon: "$close",
+					icon: unref(icons).close,
 					size: "small",
 					variant: "text"
-				}), null, 16)]),
+				}), null, 16, ["icon"])]),
 				_: 1
 			}, 8, ["modelValue", "content-props"]);
 		};
 	}
 });
 //#endregion
+//#region src/composables/colors/use-vuetify-color.ts
+function useVuetifyColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
+	});
+}
+//#endregion
 //#region src/composables/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

package/dist/composables.js

@@ -1,4 +1,4 @@
-import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-C0sM_bA2.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Bn54H-K3.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/icons-H53IqH1s.js

@@ -0,0 +1,69 @@
+import { mdiAccount, mdiAccountGroup, mdiAccountGroupOutline, mdiAccountOutline, mdiAlertCircle, mdiBellOutline, mdiCalendar, mdiCalendarOutline, mdiChartBox, mdiChartBoxOutline, mdiCheckCircle, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiClipboardText, mdiClipboardTextOutline, mdiClose, mdiCloseCircle, mdiCog, mdiCogOutline, mdiEye, mdiEyeOff, mdiFileDocument, mdiFileDocumentOutline, mdiFlask, mdiFlaskOutline, mdiFolder, mdiFolderOutline, mdiHelpCircleOutline, mdiHome, mdiHomeOutline, mdiHospitalBuilding, mdiInformation, mdiMagnify, mdiMenu, mdiMenuDown, mdiPill, mdiStethoscope, mdiWallet, mdiWalletOutline } from "@mdi/js";
+//#region src/consts/icons.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`).
+*/
+const icons = {
+	home: mdiHome,
+	homeAlternative: mdiHomeOutline,
+	account: mdiAccount,
+	accountAlternative: mdiAccountOutline,
+	accountGroup: mdiAccountGroup,
+	accountGroupAlternative: mdiAccountGroupOutline,
+	calendar: mdiCalendar,
+	calendarAlternative: mdiCalendarOutline,
+	clipboardText: mdiClipboardText,
+	clipboardTextAlternative: mdiClipboardTextOutline,
+	fileDocument: mdiFileDocument,
+	fileDocumentAlternative: mdiFileDocumentOutline,
+	flask: mdiFlask,
+	flaskAlternative: mdiFlaskOutline,
+	folder: mdiFolder,
+	folderAlternative: mdiFolderOutline,
+	chartBox: mdiChartBox,
+	chartBoxAlternative: mdiChartBoxOutline,
+	wallet: mdiWallet,
+	walletAlternative: mdiWalletOutline,
+	cog: mdiCog,
+	cogAlternative: mdiCogOutline,
+	stethoscope: mdiStethoscope,
+	pill: mdiPill,
+	hospital: mdiHospitalBuilding,
+	help: mdiHelpCircleOutline,
+	notifications: mdiBellOutline,
+	menu: mdiMenu,
+	search: mdiMagnify,
+	showPassword: mdiEye,
+	hidePassword: mdiEyeOff,
+	close: mdiClose,
+	clear: mdiCloseCircle,
+	dropdown: mdiMenuDown,
+	subgroup: mdiMenuDown,
+	expand: mdiChevronDown,
+	collapse: mdiChevronUp,
+	prev: mdiChevronLeft,
+	next: mdiChevronRight,
+	checkboxOn: mdiCheckboxMarked,
+	checkboxOff: mdiCheckboxBlankOutline,
+	success: mdiCheckCircle,
+	info: mdiInformation,
+	warning: mdiAlertCircle,
+	error: mdiCloseCircle
+};
+//#endregion
+export { icons as t };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 import "./styles/fonts/fonts.css";
 import { Plugin } from "vue";

package/dist/index.js

@@ -1,9 +1,10 @@
+import { t as icons } from "./icons-H53IqH1s.js";
 import { t as localeOptions } from "./locale-CM4o8cD_.js";
-import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 import "./styles/fonts/fonts.css";
 import { createVuetify } from "vuetify";
 import "vue";
+import { mdi } from "vuetify/iconsets/mdi-svg";
 //#region src/index.ts
 /**
 * Create an UIMed-Vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
@@ -11,6 +12,11 @@ import "vue";
 */
 function createUimed() {
 	return createVuetify({
+		icons: {
+			defaultSet: "mdi",
+			aliases: icons,
+			sets: { mdi }
+		},
 		locale: localeOptions,
 		theme: {
 			defaultTheme: "light",

package/dist/plugins.d.ts

@@ -1,8 +1,7 @@
 import { Plugin, UserConfig } from "vite-plus";
 //#region src/plugins.d.ts
 /**
- * Vite plugin that compiles the components' styles with the library's font and Sass settings, and
- * loads the icon font with `font-display: swap`, so it doesn't block rendering while it loads.
+ * Vite plugin that compiles the components' styles with the library's font and Sass settings.
  * Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
  * dependency.
  *

package/dist/plugins.js

@@ -10,13 +10,8 @@ const vuetifyStylesheets = "/node_modules/vuetify/lib/";
 * Vite doesn't compile. The URL still serves the compiled stylesheet, which Vite loads separately
 */
 const uncompiledStylesheetQuery = /[?&](?:raw|url)\b/;
-/** Matches the ids of the icon font's stylesheet, with or without a query and Windows separators */
-const iconFontStylesheet = /[\\/]node_modules[\\/]@mdi[\\/]font[\\/]css[\\/]materialdesignicons\.css(?:\?|$)/;
-/** Start of the icon font's `@font-face` rule, the only one in its stylesheet */
-const iconFontFace = "@font-face {";
 /**
-* Vite plugin that compiles the components' styles with the library's font and Sass settings, and
-* loads the icon font with `font-display: swap`, so it doesn't block rendering while it loads.
+* Vite plugin that compiles the components' styles with the library's font and Sass settings.
 * Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
 * dependency.
 *
@@ -60,18 +55,6 @@ function vitePluginUimed() {
 			compiler = void 0;
 			await (await current)?.dispose();
 		}
-	}, {
-		name: "uimed:icon-font",
-		enforce: "pre",
-		transform: {
-			filter: { id: {
-				include: iconFontStylesheet,
-				exclude: uncompiledStylesheetQuery
-			} },
-			handler(code) {
-				return code.replace(iconFontFace, `${iconFontFace} font-display: swap;`);
-			}
-		}
 	}];
 }
 /**

package/dist/unit-test.js

@@ -1,5 +1,7 @@
+import { t as icons } from "./icons-H53IqH1s.js";
 import { t as localeOptions } from "./locale-CM4o8cD_.js";
 import { createVuetify } from "vuetify";
+import { mdi } from "vuetify/iconsets/mdi-svg";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 //#region \0rolldown/runtime.js
@@ -12,6 +14,11 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 const vuetify = createVuetify({
 	components,
 	directives,
+	icons: {
+		defaultSet: "mdi",
+		aliases: icons,
+		sets: { mdi }
+	},
 	locale: localeOptions
 });
 /**

package/dist/{use-dialog-C0sM_bA2.js → use-dialog-Bn54H-K3.js}

@@ -1,12 +1,17 @@
-import { computed, ref, toValue } from "vue";
-const colorToVuetifyColor = {
-	primary: "primary",
-	secondary: "secondary",
+import { t as icons } from "./icons-H53IqH1s.js";
+import { ref } from "vue";
+//#region src/composables/colors/constants.ts
+const feedbackColorToVuetifyColor = {
 	positive: "success",
 	informative: "info",
 	caution: "warning",
 	danger: "error"
 };
+const colorToVuetifyColor = {
+	primary: "primary",
+	secondary: "secondary",
+	...feedbackColorToVuetifyColor
+};
 /**
 * 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
@@ -21,14 +26,6 @@ const colorToVuetifyTextColor = {
 	danger: "error-text"
 };
 //#endregion
-//#region src/composables/colors/use-vuetify-color.ts
-function useVuetifyColor(color) {
-	return computed(() => {
-		const colorValue = toValue(color);
-		return colorValue ? colorToVuetifyColor[colorValue] : colorToVuetifyColor.primary;
-	});
-}
-//#endregion
 //#region src/composables/dialogs/use-toast.ts
 const messages = ref([]);
 /**
@@ -54,12 +51,12 @@ function useToast() {
 */
 function toast(options) {
 	const text = options.message;
-	const color = useVuetifyColor(options.color ?? "informative");
+	const color = feedbackColorToVuetifyColor[options.color ?? "informative"];
 	const toastMessage = {
 		text,
-		color: color.value,
-		prependIcon: `$${color.value}`,
-		timerColor: `rgb(var(--v-theme-on-${color.value}))`
+		color,
+		prependIcon: icons[color],
+		timerColor: `rgb(var(--v-theme-on-${color}))`
 	};
 	messages.value.push(toastMessage);
 }
@@ -135,4 +132,4 @@ function dialog(options) {
 	}, (value) => value);
 }
 //#endregion
-export { messages as a, colorToVuetifyColor as c, useDialog as i, colorToVuetifyTextColor as l, 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, colorToVuetifyColor as s, openDialog as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.50",
+  "version": "2.0.0-beta.51",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -55,7 +55,7 @@
     "@axe-core/playwright": "^4.13.0",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
-    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
     "@nexdom/shared": "^2.3.0",
     "@playwright/test": "^1.62.1",
     "@sonar/scan": "^5.0.0",
@@ -87,7 +87,7 @@
     "vuetify": "^4.2.0"
   },
   "peerDependencies": {
-    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
     "@nexdom/shared": "^2.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "sass-embedded": "^1.103.1",