@nexdom/uimed-vue 2.0.0-beta.56 → 2.0.0-beta.58

package/AGENTS.md

@@ -179,7 +179,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`. 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.
+  - `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: most fills are too light to reach WCAG AA's contrast as text, so each color has a text shade in the theme, darker than its fill (primary's fill is dark enough to be its own shade).
 
   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.
 

package/dist/components.d.ts

@@ -319,8 +319,8 @@ type MainProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$14: typeof __VLS_export$20;
-declare const __VLS_export$20: __VLS_WithSlots$11<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
+declare const _default$14: typeof __VLS_export$21;
+declare const __VLS_export$21: __VLS_WithSlots$12<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;
@@ -331,7 +331,7 @@ declare const __VLS_export$20: __VLS_WithSlots$11<import("vue", { with: { "resol
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$11<T, S> = T & {
+type __VLS_WithSlots$12<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -352,15 +352,15 @@ 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$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, {} & {
+declare const _default$1: typeof __VLS_export$20;
+declare const __VLS_export$20: __VLS_WithSlots$11<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 & {
+type __VLS_WithSlots$11<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -410,8 +410,8 @@ type IconButtonProps = {
  *
  * @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, {} & {
+declare const _default$11: typeof __VLS_export$19;
+declare const __VLS_export$19: 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;
@@ -583,8 +583,8 @@ type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
  *
  * @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<{
+declare const _default: typeof __VLS_export$18;
+declare const __VLS_export$18: <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;
   }) & {
@@ -614,8 +614,8 @@ 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$20: typeof __VLS_export$16;
-declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$21: typeof __VLS_export$17;
+declare const __VLS_export$17: 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;
@@ -625,8 +625,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
@@ -677,8 +677,8 @@ type CheckboxProps<T = boolean> = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/checkbox | Checkbox Guide}
  */
-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<{
+declare const _default$2: typeof __VLS_export$16;
+declare const __VLS_export$16: <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;
   }) & {
@@ -794,8 +794,8 @@ type DateTimeFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/date-time-field | DateTimeField Guide}
  */
-declare const _default$7: typeof __VLS_export$14;
-declare const __VLS_export$14: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DateTimeFieldProps & {
+declare const _default$7: typeof __VLS_export$15;
+declare const __VLS_export$15: 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;
@@ -942,8 +942,8 @@ type MaskFieldProps = {
  *
  * @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 & {
+declare const _default$15: typeof __VLS_export$14;
+declare const __VLS_export$14: 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;
@@ -987,11 +987,11 @@ type ContainerProps = {
  *
  * @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>, {
+declare const _default$4: typeof __VLS_export$13;
+declare const __VLS_export$13: __VLS_WithSlots$10<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 & {
+type __VLS_WithSlots$10<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1088,11 +1088,11 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-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>, {
+declare const _default$17: typeof __VLS_export$12;
+declare const __VLS_export$12: __VLS_WithSlots$9<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$8<T, S> = T & {
+type __VLS_WithSlots$9<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1144,13 +1144,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$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<{}>, {
+declare const _default$3: typeof __VLS_export$11;
+declare const __VLS_export$11: __VLS_WithSlots$8<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$7<T, S> = T & {
+type __VLS_WithSlots$8<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1187,15 +1187,15 @@ type FormProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/form | Form Guide}
  */
-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, {} & {
+declare const _default$10: typeof __VLS_export$10;
+declare const __VLS_export$10: __VLS_WithSlots$7<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$6<T, S> = T & {
+type __VLS_WithSlots$7<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1217,11 +1217,11 @@ type __VLS_WithSlots$6<T, S> = T & {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-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>, {
+declare const _default$19: typeof __VLS_export$9;
+declare const __VLS_export$9: __VLS_WithSlots$6<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$5<T, S> = T & {
+type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1322,11 +1322,11 @@ interface SectionAction extends ButtonProps {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-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>, {
+declare const _default$18: typeof __VLS_export$8;
+declare const __VLS_export$8: __VLS_WithSlots$5<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$4<T, S> = T & {
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1397,8 +1397,8 @@ 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>;
+declare const _default$20: typeof __VLS_export$7;
+declare const __VLS_export$7: 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";
@@ -1445,11 +1445,11 @@ type DetailsProps = {
  *
  * @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>, {
+declare const _default$8: typeof __VLS_export$6;
+declare const __VLS_export$6: __VLS_WithSlots$4<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 & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1516,8 +1516,8 @@ type ImgProps = {
  *
  * @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>;
+declare const _default$12: typeof __VLS_export$5;
+declare const __VLS_export$5: 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
 /**
@@ -1551,11 +1551,11 @@ type LinkProps = {
  *
  * @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>, {
+declare const _default$13: typeof __VLS_export$4;
+declare const __VLS_export$4: __VLS_WithSlots$3<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 & {
+type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1676,8 +1676,8 @@ type DataSetSlots<T extends object> = {
  *
  * @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<{
+declare const _default$5: typeof __VLS_export$3;
+declare const __VLS_export$3: <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;
@@ -1762,9 +1762,9 @@ type DataSetItemSlots = {
  *
  * @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 & {
+declare const _default$6: typeof __VLS_export$2;
+declare const __VLS_export$2: __VLS_WithSlots$2<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$2<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -1832,8 +1832,8 @@ interface DialogButtonAction extends ButtonProps {
  *
  * @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: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<DialogProps & {
+declare const _default$9: typeof __VLS_export$1;
+declare const __VLS_export$1: __VLS_WithSlots$1<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;
@@ -1844,10 +1844,66 @@ declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/page-transition/types.d.ts
+/**
+ * Props exposed by the {@link PageTransition} component.
+ */
+type PageTransitionProps = {
+  /**
+   * Identifies the page on display: the change is animated whenever it
+   * changes. Defaults to the current route's `fullPath`, so every navigation
+   * is animated, including the ones that only change the route's params,
+   * query or hash. Pass another value to choose which navigations are
+   * animated, e.g. `route.path` to not animate when only the query or the
+   * hash changes.
+   *
+   * @default route.fullPath
+   */
+  transitionKey?: string;
+};
+//#endregion
+//#region src/components/page-transition/page-transition.vue.d.ts
+/**
+ * Animates the change between the pages rendered by the app's router: the
+ * current page fades out before the next one fades in. When the operating
+ * system asks for reduced motion, the pages change without animation.
+ *
+ * The page is rendered inside a `div` that takes the whole height of its
+ * parent, so any page is animated, whatever it renders at its root. The
+ * change is animated whenever `transitionKey` changes, which defaults to the
+ * current route's `fullPath`: every navigation is animated, including the
+ * ones that only change the route's params, query or hash. Attributes
+ * (`class`, `style`...) aren't passed on.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-main>
+ *     <router-view v-slot="{ Component }">
+ *       <u-page-transition>
+ *         <component :is="Component" />
+ *       </u-page-transition>
+ *     </router-view>
+ *   </u-main>
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/page-transition | Page Transition Guide}
+ */
+declare const _default$16: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<PageTransitionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<PageTransitionProps> & Readonly<{}>, {}, {}, {}, {}, 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 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 };
+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 UPageTransition, _default$17 as URow, _default$18 as USection, _default$19 as USectionContent, _default$20 as UTable, _default$21 as UTextField };

package/dist/components.js

@@ -3,10 +3,10 @@ import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as reques
 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";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDefaultsProvider, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDefaultsProvider, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFadeTransition, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toInitials } from "@nexdom/shared/utils";
 import { VHighlight } from "vuetify/labs/VHighlight";
-import { RouterLink } from "vue-router";
+import { RouterLink, useRoute } from "vue-router";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
 	return computed(() => routeToProps(route));
@@ -3317,4 +3317,28 @@ 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, 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 };
+//#region src/components/page-transition/page-transition.vue
+var page_transition_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "page-transition",
+	props: { transitionKey: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		const route = useRoute();
+		const pageKey = computed(() => props.transitionKey ?? route.fullPath);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" The page is wrapped so any page can be animated, whatever it renders at its root. The\n  wrapper takes the parent's height, so pages with `fullHeight` still have a height to fill "), createVNode(unref(VFadeTransition), { mode: "out-in" }, {
+				default: withCtx(() => [(openBlock(), createElementBlock("div", {
+					key: pageKey.value,
+					class: "h-100"
+				}, [renderSlot(_ctx.$slots, "default")]))]),
+				_: 3
+			})], 2112);
+		};
+	}
+});
+//#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, icon_button_default as UIconButton, img_default as UImg, link_default as ULink, main_default as UMain, mask_field_default as UMaskField, page_transition_default as UPageTransition, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };

package/dist/index.js

@@ -25,14 +25,14 @@ function createUimed() {
 				colors: {
 					background: "#EAEDF0",
 					surface: "#FCFCFD",
-					primary: "#00995D",
+					primary: "#074D31",
 					secondary: "#FCFCFD",
 					success: "#A9EFC5",
 					warning: "#FFE596",
 					error: "#D92D20",
 					info: "#9ACBE5",
-					"on-primary": "#000000",
-					"primary-text": "#007A4A",
+					"on-primary": "#FCFCFD",
+					"primary-text": "#074D31",
 					"success-text": "#16783E",
 					"info-text": "#277096",
 					"warning-text": "#846300",

package/package.json

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