nuance-ui 0.2.18 → 0.2.20

package/dist/module.json

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

package/dist/runtime/components/center.d.vue.ts

@@ -0,0 +1,18 @@
+import type { BoxProps } from './box.vue.js';
+export interface CenterProps extends BoxProps {
+    /** If set, `inline-flex` is used instead of `flex` */
+    inline?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CenterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CenterProps> & 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/center.vue

@@ -0,0 +1,26 @@
+<script setup>
+import Box from "./box.vue";
+const {
+  inline,
+  mod,
+  ...props
+} = defineProps({
+  inline: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box
+		v-bind='props'
+		:class='$style.root'
+		:mod='[{ inline }, mod]'
+	>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{align-items:center;display:flex;justify-content:center}.root:where([data-inline]){display:inline-flex}
+</style>

package/dist/runtime/components/center.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BoxProps } from './box.vue.js';
+export interface CenterProps extends BoxProps {
+    /** If set, `inline-flex` is used instead of `flex` */
+    inline?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CenterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CenterProps> & 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/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/group.d.vue.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface GroupProps extends BoxProps {
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+    /** Controls `align-items` CSS property @default 'center' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `flex-wrap` CSS property @default 'wrap' */
+    wrap?: CSSProperties['flexWrap'];
+    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Determines whether each child element should have `flex-grow: 1` style @default false */
+    grow?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<GroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GroupProps> & 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/group.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { getSpacing, useVarsResolver } from "#imports";
+import Box from "./box.vue";
+const {
+  grow,
+  justify,
+  align,
+  wrap,
+  gap,
+  mod,
+  ...props
+} = defineProps({
+  justify: { type: void 0, required: false },
+  align: { type: void 0, required: false },
+  wrap: { type: void 0, required: false },
+  gap: { type: [String, Number], required: false },
+  grow: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = useVarsResolver(() => ({
+  root: {
+    "--group-gap": getSpacing(gap),
+    "--group-align": align ?? void 0,
+    "--group-justify": justify ?? void 0,
+    "--group-wrap": wrap ?? void 0
+  }
+}));
+</script>
+
+<template>
+	<Box v-bind='props' :style='style.root' :class='$style.root' :mod='[{ grow }, mod]'>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{align-items:var(--group-align,center);display:flex;flex-direction:row;flex-wrap:var(--group-wrap,wrap);gap:var(--group-gap,var(--spacing-md));justify-content:var(--group-justify,flex-start)}.root:where([data-grow])>*{flex-grow:1}
+</style>

package/dist/runtime/components/group.vue.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface GroupProps extends BoxProps {
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+    /** Controls `align-items` CSS property @default 'center' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `flex-wrap` CSS property @default 'wrap' */
+    wrap?: CSSProperties['flexWrap'];
+    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Determines whether each child element should have `flex-grow: 1` style @default false */
+    grow?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<GroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GroupProps> & 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/input/ui/input-base.d.vue.ts

@@ -3,6 +3,7 @@ import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
     /** Styles API */
     classes?: Classes<'root' | 'section'>;
+    error?: boolean;
 }
 type __VLS_Slots = {
     leftSection: [];

package/dist/runtime/components/input/ui/input-base.vue

@@ -5,6 +5,7 @@ import Box from "../../box.vue";
 import { useInputWrapperState } from "../lib/input-wrapper.context";
 const { classes, ...props } = defineProps({
   classes: { type: Object, required: false },
+  error: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   radius: { type: [String, Number, Object], required: false },
   size: { type: [String, Object], required: false },
@@ -35,7 +36,7 @@ const style = computed(() => ({
   "with-left-section": !!$slots.leftSection,
   "with-right-section": !!$slots.rightSection,
   "variant": api.variant,
-  "error": !!api?.error
+  "error": !!api?.error || props.error
 }]'
 	>
 		<span
@@ -59,5 +60,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:has(input:disabled){background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
+.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input:has(input:disabled),.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:-moz-read-only{cursor:default}.input:read-only{cursor:default}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
 </style>

package/dist/runtime/components/input/ui/input-base.vue.d.ts

@@ -3,6 +3,7 @@ import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
     /** Styles API */
     classes?: Classes<'root' | 'section'>;
+    error?: boolean;
 }
 type __VLS_Slots = {
     leftSection: [];

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;