nuance-ui 0.2.19 → 0.2.20

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.19",
+  "version": "0.2.20",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/dialog/index.d.ts

@@ -1,5 +1,7 @@
 export { useDialogState } from './lib.js';
 export type * from './types';
+export type * from './ui/dialog-footer.vue';
 export type * from './ui/dialog-header.vue';
 export type * from './ui/dialog-root.vue';
+export type * from './ui/dialog-section.vue';
 export type * from './ui/dialog-title.vue';

package/dist/runtime/components/dialog/ui/dialog-footer.d.vue.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '../../box.vue.js';
+export interface DialogFooterProps extends BoxProps {
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog/ui/dialog-footer.vue

@@ -0,0 +1,16 @@
+<script setup>
+import Box from "../../box.vue";
+import css from "./dialog.module.css";
+const { is = "footer", mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<Box :is :mod :class='css.footer'>
+			<slot />
+		</Box>
+	</ClientOnly>
+</template>

package/dist/runtime/components/dialog/ui/dialog-footer.vue.d.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '../../box.vue.js';
+export interface DialogFooterProps extends BoxProps {
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -1,4 +1,4 @@
-import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
+import type { Classes, NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition.vue.js';
@@ -27,7 +27,7 @@ export interface DialogRootProps extends BoxProps, StyleProps {
     /** If set, the component is rendered with `Overlay` @default `true` */
     withoutOverlay?: boolean;
     /** Passes a class to root element */
-    rootClass?: string;
+    classes?: Classes<'root' | 'content'>;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;
 }

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -17,7 +17,7 @@ const {
   padding,
   size,
   shadow,
-  rootClass,
+  classes,
   transition = "fade-down",
   withoutOverlay = false,
   portalTarget = "body"
@@ -25,7 +25,7 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
-  rootClass: { type: String, required: false },
+  classes: { type: Object, required: false },
   portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
@@ -79,7 +79,7 @@ const style = computed(() => ({
 			<Box
 				is='dialog'
 				ref='dialogRef'
-				:class='[css.root, rootClass]'
+				:class='[css.root, classes?.root]'
 				:mod='[{ "without-overlay": withoutOverlay }, mod]'
 				:style
 				@click='overlayClick'
@@ -87,7 +87,12 @@ const style = computed(() => ({
 				@cancel.prevent='opened = false'
 			>
 				<NTransition :name='transition'>
-					<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
+					<Box
+						is='section'
+						v-if='opened'
+						:class='[css.content, classes?.content]'
+						v-bind='$attrs'
+					>
 						<slot />
 					</Box>
 				</NTransition>

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
+import type { Classes, NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition.vue.js';
@@ -27,7 +27,7 @@ export interface DialogRootProps extends BoxProps, StyleProps {
     /** If set, the component is rendered with `Overlay` @default `true` */
     withoutOverlay?: boolean;
     /** Passes a class to root element */
-    rootClass?: string;
+    classes?: Classes<'root' | 'content'>;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;
 }

package/dist/runtime/components/dialog/ui/dialog-section.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../../box.vue.js';
+export interface DialogSectionProps extends BoxProps {
+    bordered?: boolean;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog/ui/dialog-section.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Box from "../../box.vue";
+import css from "./dialog.module.css";
+const { is = "section", bordered, mod } = defineProps({
+  bordered: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<Box :is :mod='[{ bordered }, mod]' :class='css.section'>
+			<slot />
+		</Box>
+	</ClientOnly>
+</template>

package/dist/runtime/components/dialog/ui/dialog-section.vue.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../../box.vue.js';
+export interface DialogSectionProps extends BoxProps {
+    bordered?: boolean;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog/ui/dialog.module.css

@@ -1 +1 @@
-.root{--dialog-size-xs:rem(320px);--dialog-size-sm:rem(380px);--dialog-size-md:rem(440px);--dialog-size-lg:rem(620px);--dialog-size-xl:rem(780px);--dialog-size:var(--dialog-size-md);--dialog-y-offset:0;--dialog-x-offset:0;--dialog-shadow:var(--shadow-md);--dialog-radius:var(--radius-default);--overlay-bg:rgba(0,0,0,.4);--overlay-filter:blur(.1rem);background:none;border:none;box-shadow:var(--dialog-shadow);display:grid;left:var(--dialog-x-offset);max-height:100%;max-width:100%;min-height:0;opacity:0;overflow:hidden;padding:0;top:var(--dialog-y-offset);transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease;width:var(--dialog-size);z-index:2}.root::backdrop{backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));opacity:0;transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease}.root[open]{opacity:1}@starting-style{.root[open]{opacity:0}}.root[open]::backdrop{opacity:1}@starting-style{.root[open]::backdrop{opacity:0}}.root:not([open]){opacity:0;pointer-events:none}.root:not([open])::backdrop{opacity:0}.root[data-without-overlay]::backdrop{display:none}.content{background-color:var(--color-body);border-radius:var(--dialog-radius);color:var(--color-text);height:100%;min-height:0;padding:var(--spacing-sm);width:100%}.header{align-items:center;display:flex;justify-content:space-between}.title{font-weight:400}
+.root{--dialog-size-xs:rem(320px);--dialog-size-sm:rem(380px);--dialog-size-md:rem(440px);--dialog-size-lg:rem(620px);--dialog-size-xl:rem(780px);--dialog-size:var(--dialog-size-md);--dialog-y-offset:0;--dialog-x-offset:0;--dialog-shadow:var(--shadow-md);--dialog-radius:var(--radius-md);--dialog-padding:var(--spacing-sm);--dialog-bd-c:var(--color-gray-4);--overlay-bg:rgba(0,0,0,.4);--overlay-filter:blur(.1rem);background:none;border:none;box-shadow:var(--dialog-shadow);display:grid;left:var(--dialog-x-offset);max-height:100%;max-width:100%;min-height:0;opacity:0;overflow:hidden;padding:0;top:var(--dialog-y-offset);transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease;width:var(--dialog-size);z-index:2}.root::backdrop{backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));opacity:0;transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease}.root[open]{opacity:1}@starting-style{.root[open]{opacity:0}}.root[open]::backdrop{opacity:1}@starting-style{.root[open]::backdrop{opacity:0}}.root:not([open]){opacity:0;pointer-events:none}.root:not([open])::backdrop{opacity:0}.root[data-without-overlay]::backdrop{display:none}.content{background-color:var(--color-body);border-radius:var(--dialog-radius);color:var(--color-text);height:100%;min-height:0;width:100%}.footer,.header,.section{padding:var(--dialog-padding)}.header{align-items:center;border-bottom:1px solid var(--dialog-bd-c);display:flex;justify-content:space-between}.footer,.section[data-bordered=true]:not(:first-of-type){border-top:1px solid var(--dialog-bd-c)}.title{font-weight:400}

package/dist/runtime/components/drawer/drawer-footer.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+export interface DrawerFooterProps extends DialogFooterProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-footer.vue

@@ -0,0 +1,13 @@
+<script setup>
+import DialogFooter from "../dialog/ui/dialog-footer.vue";
+const props = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogFooter v-bind='props'>
+		<slot />
+	</DialogFooter>
+</template>

package/dist/runtime/components/drawer/drawer-footer.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+export interface DrawerFooterProps extends DialogFooterProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-root.vue

@@ -14,6 +14,7 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },

package/dist/runtime/components/drawer/drawer-section.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+export interface DrawerSectionProps extends DialogSectionProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-section.vue

@@ -0,0 +1,14 @@
+<script setup>
+import DialogSection from "../dialog/ui/dialog-section.vue";
+const props = defineProps({
+  bordered: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogSection v-bind='props'>
+		<slot />
+	</DialogSection>
+</template>

package/dist/runtime/components/drawer/drawer-section.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+export interface DrawerSectionProps extends DialogSectionProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/index.d.ts

@@ -1,3 +1,5 @@
+export type * from './drawer-footer.vue';
 export type * from './drawer-header.vue';
 export type * from './drawer-root.vue';
+export type * from './drawer-section.vue';
 export type * from './drawer-title.vue';

package/dist/runtime/components/modal/index.d.ts

@@ -1,3 +1 @@
-export type * from './modal-header.vue';
 export type * from './modal-root.vue';
-export type * from './modal-title.vue';

package/dist/runtime/components/modal/modal-footer.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modal/modal-footer.vue

@@ -0,0 +1,13 @@
+<script setup>
+import DialogFooter from "../dialog/ui/dialog-footer.vue";
+const props = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogFooter v-bind='props'>
+		<slot />
+	</DialogFooter>
+</template>

package/dist/runtime/components/modal/modal-footer.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modal/modal-header.d.vue.ts

@@ -1,11 +1,9 @@
 import type { DialogHeaderProps } from '../dialog/index.js';
-export interface ModalHeaderProps extends DialogHeaderProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-header.vue.d.ts

@@ -1,11 +1,9 @@
 import type { DialogHeaderProps } from '../dialog/index.js';
-export interface ModalHeaderProps extends DialogHeaderProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-root.d.vue.ts

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

package/dist/runtime/components/modal/modal-root.vue

@@ -8,6 +8,7 @@ const {
   withoutOverlay = false,
   withinPortal = false,
   closeOnClickOutside = true,
+  classes,
   ...rest
 } = defineProps({
   centered: { type: Boolean, required: false },
@@ -15,6 +16,7 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
@@ -34,11 +36,11 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 	<DialogRoot
 		v-model:open='opened'
 		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
 		:within-portal
 		:close-on-click-outside
 		:without-overlay
 		v-bind='rest'
+		:classes='{ ...classes, root: [css.root, classes?.root] }'
 		@open='$emit("open")'
 		@close='$emit("close")'
 	>

package/dist/runtime/components/modal/modal-root.vue.d.ts

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

package/dist/runtime/components/modal/modal-section.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modal/modal-section.vue

@@ -0,0 +1,14 @@
+<script setup>
+import DialogSection from "../dialog/ui/dialog-section.vue";
+const props = defineProps({
+  bordered: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogSection v-bind='props'>
+		<slot />
+	</DialogSection>
+</template>

package/dist/runtime/components/modal/modal-section.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modal/modal-title.d.vue.ts

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-title.vue.d.ts

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/pin-input/pin-input.vue

@@ -16,7 +16,7 @@ const {
   otp = true,
   type = "number",
   mask,
-  gap,
+  gap = "xs",
   placeholder,
   autoFocus,
   manageFocus = true,
@@ -142,7 +142,7 @@ const style = useVarsResolver(() => ({
 					:input-mode
 					:type='mask ? "password" : "text"'
 					:placeholder
-					:auto-focus='autoFocus && ix === 0'
+					:autofocus='autoFocus && ix === 0'
 					:readonly='readOnly'
 					:disabled
 					@input='handleInput($event, ix)'

package/dist/runtime/modals/_confirm-modal/confirm-modal.vue

@@ -2,8 +2,10 @@
 import { ref } from "vue";
 import Button from "../../components/button/button.vue";
 import ModalCloseButton from "../../components/modal/modal-close-button.vue";
+import ModalFooter from "../../components/modal/modal-footer.vue";
 import ModalHeader from "../../components/modal/modal-header.vue";
 import ModalRoot from "../../components/modal/modal-root.vue";
+import ModalSection from "../../components/modal/modal-section.vue";
 import Title from "../../components/title.vue";
 import { useModal } from "../use-modal";
 const {
@@ -53,11 +55,19 @@ async function hanleConfirm() {
 			<ModalCloseButton />
 		</ModalHeader>
 
-		<p v-if='body' :class='$style.body'>
-			{{ body }}
-		</p>
+		<ModalSection bordered>
+			<p v-if='body' :class='$style.body'>
+				{{ body }}
+			</p>
+		</ModalSection>
 
-		<footer :class='$style.footer'>
+		<ModalSection bordered>
+			<p v-if='body' :class='$style.body'>
+				{{ body }}
+			</p>
+		</ModalSection>
+
+		<ModalFooter :class='$style.footer'>
 			<Button
 				variant='default'
 				v-bind='cancelProps'
@@ -74,10 +84,10 @@ async function hanleConfirm() {
 			>
 				{{ labels?.confirm ?? "Confirm" }}
 			</Button>
-		</footer>
+		</ModalFooter>
 	</ModalRoot>
 </template>
 
 <style module>
-.body{color:var(--color-dimmed);margin:0}.footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-md)}
+.body{color:var(--color-dimmed);margin:0}.footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end}
 </style>

package/dist/runtime/styles/const.css

@@ -1 +1 @@
-:root{--mantine-scale:1;--font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--font-family-headings:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-family-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--heading-text-wrap:wrap;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-h1:2.125rem;--line-height-h1:1.3;--font-weight-h1:700;--font-size-h2:1.625rem;--line-height-h2:1.35;--font-weight-h2:700;--font-size-h3:1.375rem;--line-height-h3:1.4;--font-weight-h3:700;--font-size-h4:1.125rem;--line-height-h4:1.45;--font-weight-h4:700;--font-size-h5:1rem;--line-height-h5:1.5;--font-weight-h5:700;--font-size-h6:0.875rem;--line-height-h6:1.5;--font-weight-h6:700;--spacing-2xs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:2rem;--radius-default:var(--radius-sm);--line-height:1.55;--line-height-xs:1.4;--line-height-sm:1.45;--line-height-md:1.55;--line-height-lg:1.6;--line-height-xl:1.65;--shadow-xs:0 0.0625rem 0.1875rem rgba(0,0,0,.05),0 0.0625rem 0.125rem rgba(0,0,0,.1);--shadow-sm:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 0.625rem 0.9375rem -0.3125rem,rgba(0,0,0,.04) 0 0.4375rem 0.4375rem -0.3125rem;--shadow-md:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.25rem 1.5625rem -0.3125rem,rgba(0,0,0,.04) 0 0.625rem 0.625rem -0.3125rem;--shadow-lg:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.75rem 1.4375rem -0.4375rem,rgba(0,0,0,.04) 0 0.75rem 0.75rem -0.4375rem;--shadow-xl:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 2.25rem 1.75rem -0.4375rem,rgba(0,0,0,.04) 0 1.0625rem 1.0625rem -0.4375rem;--breakpoint-xs:36em;--breakpoint-sm:48em;--breakpoint-md:62em;--breakpoint-lg:75em;--breakpoint-xl:88em}
+:root{--mantine-scale:1;--font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--font-family-headings:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--font-family-mono:"JetBrains Mono","JetBrainsMono Nerd Font","SF Mono",Menlo,Consolas,monospace;--heading-text-wrap:wrap;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-h1:2.125rem;--line-height-h1:1.3;--font-weight-h1:700;--font-size-h2:1.625rem;--line-height-h2:1.35;--font-weight-h2:700;--font-size-h3:1.375rem;--line-height-h3:1.4;--font-weight-h3:700;--font-size-h4:1.125rem;--line-height-h4:1.45;--font-weight-h4:700;--font-size-h5:1rem;--line-height-h5:1.5;--font-weight-h5:600;--font-size-h6:0.875rem;--line-height-h6:1.5;--font-weight-h6:600;--spacing-2xs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:2rem;--radius-default:var(--radius-sm);--line-height:1.55;--line-height-xs:1.4;--line-height-sm:1.45;--line-height-md:1.55;--line-height-lg:1.6;--line-height-xl:1.65;--shadow-xs:0 0.0625rem 0.1875rem rgba(0,0,0,.05),0 0.0625rem 0.125rem rgba(0,0,0,.1);--shadow-sm:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 0.625rem 0.9375rem -0.3125rem,rgba(0,0,0,.04) 0 0.4375rem 0.4375rem -0.3125rem;--shadow-md:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.25rem 1.5625rem -0.3125rem,rgba(0,0,0,.04) 0 0.625rem 0.625rem -0.3125rem;--shadow-lg:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.75rem 1.4375rem -0.4375rem,rgba(0,0,0,.04) 0 0.75rem 0.75rem -0.4375rem;--shadow-xl:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 2.25rem 1.75rem -0.4375rem,rgba(0,0,0,.04) 0 1.0625rem 1.0625rem -0.4375rem;--breakpoint-xs:36em;--breakpoint-sm:48em;--breakpoint-md:62em;--breakpoint-lg:75em;--breakpoint-xl:88em}

package/dist/runtime/types/styling.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLAttributes } from 'vue';
 export type CssVariable = `--${string}`;
 export type TransformVars<V> = {
     [Key in keyof V]: V[Key] extends CssVariable ? Record<V[Key], string | number | undefined> : never;
 };
 /** Map of component part names to user-provided class names. */
-export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;
+export type Classes<Key extends string> = Partial<Record<Key, HTMLAttributes['class']>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.19",
+	"version": "0.2.20",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",