nuance-ui 0.2.5 → 0.2.7

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

package/dist/runtime/components/breadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composals";
+import { useTheme } from "@nui/composables";
 import { getSpacing } from "@nui/utils";
 import { computed, unref } from "vue";
 import Box from "./box.vue";
@@ -33,85 +33,85 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
-	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
-				<slot
-					:name='item.slot ?? "item"'
-					:item='item'
-					:ix='ix'
-					:active='item.active ?? ix === breadcrumbs.length - 1'
-				>
-					<Button
-						:size
-						:variant
-						:class='$style.item'
-						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
-						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
-						@click.stop.prevent='$emit("click", item)'
-					>
-						<template v-if='item?.icon' #leftSection>
-							<Icon :name='item.icon' :class='$style.icon' />
-						</template>
-						{{ item.label }}
-					</Button>
-				</slot>
-			</li>
-			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
-				<slot name='separator'>
-					<Icon :name='separator' />
-				</slot>
-			</li>
-		</template>
-	</Box>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+				<slot
+					:name='item.slot ?? "item"'
+					:item='item'
+					:ix='ix'
+					:active='item.active ?? ix === breadcrumbs.length - 1'
+				>
+					<Button
+						:size
+						:variant
+						:class='$style.item'
+						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
+					>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
+				</slot>
+			</li>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+				<slot name='separator'>
+					<Icon :name='separator' />
+				</slot>
+			</li>
+		</template>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-	text-transform: capitalize;
-
-	font-weight: 600;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+.root {
+	--bc-spacing: var(--spacing-xs);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--bc-spacing);
+	align-items: center;
+}
+
+.breadcrumb {
+	line-height: 1;
+
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+
+}
+
+.item {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
+
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.icon {
+	width: 1.2em;
+	height: 1.2em;
+}
+
+.separator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	line-height: 1;
+
+	@mixin where-light {
+		color: var(--color-gray-7);
+	}
+
+	@mixin where-dark {
+		color: var(--color-dark-2);
+	}
+}
 </style>

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,26 +1,39 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
+    /**
+     * `pointer-events` value for the left section
+     * @default `'none'`
+     */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
-    /** section pointer-events */
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
 declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};

package/dist/runtime/components/button/button.module.css

@@ -1 +1 @@
-.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}
+.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}

package/dist/runtime/components/button/button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -69,6 +69,7 @@ const style = computed(() => useStyleResolver((theme) => {
 <template>
 	<Box
 		:is
+		type='button'
 		:mod='[
   {
     "with-left-section": !!$slots?.leftSection,

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

@@ -1,26 +1,39 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
+    /**
+     * `pointer-events` value for the left section
+     * @default `'none'`
+     */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
-    /** section pointer-events */
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
 declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};

package/dist/runtime/components/button/unstyled-button.vue

@@ -9,30 +9,30 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+:where(.unstyled) {
+	touch-action: manipulation;
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	font-size: var(--font-size-md);
+	color: inherit;
+	text-align: left;
+	text-decoration: none;
+
+	appearance: none;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	@mixin where-rtl {
+		text-align: right;
+	}
+}
 </style>

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

@@ -1,6 +1,6 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */

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

@@ -1,6 +1,6 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */

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

@@ -1,4 +1,4 @@
 export type * from './calendar.vue';
-export * from './model.js';
+export * from './types.js';
 export type * from './ui/core';
 export type * from './ui/levels';

package/dist/runtime/components/calendar/index.js

@@ -1 +1 @@
-export * from "./model.js";
+export * from "./types.js";

package/dist/runtime/components/calendar/lib/context.d.ts

@@ -1,6 +1,6 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef, Ref } from 'vue';
 interface State {
     date: ModelRef<DateInput>;

package/dist/runtime/components/calendar/lib/context.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 const injectionKey = Symbol("nui-calendar");
 const [Provide, Inject] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/calendar/lib/use-calendar-navigation.d.ts

@@ -1,7 +1,7 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { ModelRef } from 'vue';
-import type { CalendarLevel } from '../model.js';
+import type { CalendarLevel } from '../types.js';
 export declare function useCalendarNavigation({ date, level, numberOfMonths, disabled, minDate, maxDate, prevDisabled, nextDisabled, minLevel, maxLevel, }: {
     date: ModelRef<DateInput>;
     level: ModelRef<CalendarLevel>;

package/dist/runtime/components/calendar/lib/use-calendar-navigation.js

@@ -1,5 +1,5 @@
 import { addMonth, addYear, date as fDate, format, isAfter, isBefore, sameYear } from "@formkit/tempo";
-import { isSameMonth } from "@nui/helpers/date";
+import { isSameMonth } from "@nui/utils";
 import { computed } from "vue";
 const LEVEL_ORDER = ["month", "year", "decade"];
 export function useCalendarNavigation({

package/dist/runtime/components/calendar/lib/use-calendar-selection.d.ts

@@ -1,8 +1,8 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef } from 'vue';
-import type { DateSelection, SelectionMode } from '../model.js';
+import type { DateSelection, SelectionMode } from '../types.js';
 export interface UseCalendarSelectionProps<T extends SelectionMode = 'single'> {
     mode: T;
     value: ModelRef<DateSelection<T>>;

package/dist/runtime/components/calendar/lib/use-calendar-selection.js

@@ -1,6 +1,6 @@
 import { sameDay, weekEnd, weekStart } from "@formkit/tempo";
-import { createStrictInjection } from "@nui/helpers";
-import { isSameWeek } from "@nui/helpers/date";
+import { createStrictInjection } from "@nui/composables";
+import { isSameWeek } from "@nui/utils";
 const injectionKey = Symbol("nui-calendar-select");
 const [Provide, Inject] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/calendar/ui/core/calendar-cell.d.vue.ts

@@ -1,6 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue.d.ts

@@ -1,6 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string;
 }
 declare var __VLS_8: {};