nuance-ui 0.2.10 → 0.2.11

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

@@ -1,8 +1,7 @@
 import type { NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+export type TabsVariant = 'default' | 'pills' | 'outline';
 export interface TabsRootProps extends BoxProps {
-    /** Value of the tab activated by default (uncontrolled) */
-    defaultTab?: string;
     /**
      * Tabs orientation
      * @default `'horizontal'`
@@ -13,11 +12,21 @@ export interface TabsRootProps extends BoxProps {
      * @default `'left'`
      */
     placement?: 'left' | 'right';
+    /** Visual variant */
+    variant?: TabsVariant;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Border radius */
+    radius?: NuanceRadius;
     /**
-     * Visual variant
-     * @default `'default'`
+     * Inverts tab styles
+     * @default `false`
      */
-    variant?: 'default' | 'pills' | 'outline';
+    inverted?: boolean;
+    /** Root element id */
+    id?: string;
+    /** Value of the tab activated by default (uncontrolled) */
+    defaultTab?: string;
     /**
      * Whether arrow key presses loop through items
      * @default `true`
@@ -33,22 +42,11 @@ export interface TabsRootProps extends BoxProps {
      * @default `false`
      */
     allowTabDeactivation?: boolean;
-    /** Color from theme */
-    color?: NuanceColor;
-    /** Border radius */
-    radius?: NuanceRadius;
-    /**
-     * Inverts tab styles
-     * @default `false`
-     */
-    inverted?: boolean;
     /**
      * If `false`, panel content is unmounted when inactive
      * @default `true`
      */
     keepMounted?: boolean;
-    /** Root element id */
-    id?: string;
 }
 type __VLS_Props = TabsRootProps;
 type __VLS_ModelProps = {

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

@@ -1,31 +1,32 @@
-import type { NuanceColor, NuanceGradient, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceFontSize, NuanceGradient, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
 type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
 type TextTruncate = 'end' | 'start' | boolean;
+export type TextVariant = 'text' | 'gradient';
 export interface TextProps extends BoxProps {
-    /** Controls `font-size` and `line-height`, `'md'` by default */
-    size?: NuanceSize | `h${TitleOrder}` | string;
+    /** Controls `font-size` and `line-height` */
+    size?: NuanceSize | `h${TitleOrder}` | AnyString;
     /** Number of lines after which Text will be truncated */
     lineClamp?: number;
     /** Side on which Text must be truncated, if `true`, text is truncated from the start */
     truncate?: TextTruncate;
-    /** Sets `line-height` to 1 for centering, `false` by default */
+    /** Sets `line-height` to 1 for centering */
     inline?: boolean;
-    /** Determines whether font properties should be inherited from the parent, `false` by default */
+    /** Determines whether font properties should be inherited from the parent */
     inherit?: boolean;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Visual variant */
-    variant?: 'text' | 'gradient';
     /** Font size token */
-    fz?: NuanceSize | `h${TitleOrder}` | string;
+    fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
     /** Line height token */
-    lh?: NuanceSize | string;
+    lh?: NuanceSize | AnyString;
     /** Font weight */
     fw?: CSSProperties['font-weight'];
     /** Text color from theme */
     c?: NuanceColor | 'dimmed';
+    /** Visual variant */
+    variant?: TextVariant;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/text.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getFontSize, getGradient, getLineHeight, getThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "./box.vue";
@@ -25,11 +25,11 @@ const {
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
@@ -40,85 +40,24 @@ const _mod = computed(() => [{
   inherit,
   variant
 }, mod]);
-const style = computed(() => useStyleResolver((theme) => ({
-  "--text-fz": getFontSize(fz || size),
-  "--text-fw": fw,
-  "--text-lh": getLineHeight(lh || size),
-  "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
-  "--text-line-clamp": lineClamp?.toString(),
-  "--text-color": c ? getThemeColor(c, theme) : void 0
-})));
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--text-fz": getFontSize(fz || size),
+    "--text-fw": fw?.toString(),
+    "--text-lh": getLineHeight(lh || size),
+    "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
+    "--text-line-clamp": lineClamp?.toString(),
+    "--text-color": c ? getThemeColor(c, theme) : void 0
+  }
+}));
 </script>
 
 <template>
-	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
+	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style='style.root'>
 		<slot />
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	--text-fz: var(--font-size-sm);
-	--text-lh: var(--line-height-sm);
-	--text-color: inherit;
-	--text-fw: normal;
-	--text-gradient: none;
-	--text-line-clamp: none;
-
-	margin: 0;
-	padding: 0;
-
-	font-size: var(--text-fz);
-	font-weight: var(--text-fw);
-	line-height: var(--text-lh);
-	color: var(--text-color);
-	text-decoration: none;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-truncate]) {
-		overflow: hidden;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:where([data-truncate='start']) {
-		direction: rtl;
-
-		text-align: right;
-
-		@mixin where-rtl {
-			direction: ltr;
-
-			text-align: left;
-		}
-	}
-
-	&:where([data-variant='gradient']) {
-		background-image: var(--text-gradient);
-		-webkit-background-clip: text;
-		background-clip: text;
-		-webkit-text-fill-color: transparent;
-	}
-
-	&:where([data-line-clamp]) {
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: var(--text-line-clamp);
-
-		text-overflow: ellipsis;
-	}
-
-	&:where([data-inherit]) {
-		font-size: inherit;
-		font-weight: inherit;
-		line-height: inherit;
-		color: inherit;
-	}
-
-	&:where([data-inline]) {
-		line-height: 1;
-	}
-}
+<style module>
+.root{--text-fz:var(--font-size-sm);--text-lh:var(--line-height-sm);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
 </style>

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

@@ -1,31 +1,32 @@
-import type { NuanceColor, NuanceGradient, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceFontSize, NuanceGradient, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
 type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
 type TextTruncate = 'end' | 'start' | boolean;
+export type TextVariant = 'text' | 'gradient';
 export interface TextProps extends BoxProps {
-    /** Controls `font-size` and `line-height`, `'md'` by default */
-    size?: NuanceSize | `h${TitleOrder}` | string;
+    /** Controls `font-size` and `line-height` */
+    size?: NuanceSize | `h${TitleOrder}` | AnyString;
     /** Number of lines after which Text will be truncated */
     lineClamp?: number;
     /** Side on which Text must be truncated, if `true`, text is truncated from the start */
     truncate?: TextTruncate;
-    /** Sets `line-height` to 1 for centering, `false` by default */
+    /** Sets `line-height` to 1 for centering */
     inline?: boolean;
-    /** Determines whether font properties should be inherited from the parent, `false` by default */
+    /** Determines whether font properties should be inherited from the parent */
     inherit?: boolean;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Visual variant */
-    variant?: 'text' | 'gradient';
     /** Font size token */
-    fz?: NuanceSize | `h${TitleOrder}` | string;
+    fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
     /** Line height token */
-    lh?: NuanceSize | string;
+    lh?: NuanceSize | AnyString;
     /** Font weight */
     fw?: CSSProperties['font-weight'];
     /** Text color from theme */
     c?: NuanceColor | 'dimmed';
+    /** Visual variant */
+    variant?: TextVariant;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/textarea.vue

@@ -10,13 +10,13 @@ const { icon, ...props } = defineProps({
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   multiline: { type: Boolean, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });

package/dist/runtime/components/time-picker/time-picker.vue

@@ -46,13 +46,13 @@ const {
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   multiline: { type: Boolean, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
@@ -188,132 +188,6 @@ const isClearable = computed(() => clearable && !readonly && !disabled && (hours
 	</InputWrapper>
 </template>
 
-<style lang="postcss" module>
-.root {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	height: 100%;
-
-	@mixin where-rtl {
-		flex-direction: row-reverse;
-	}
-}
-
-.group {
-	display: flex;
-	align-items: center;
-
-	height: calc(var(--input-height) - rem(15px));
-}
-
-.controls {
-	display: flex;
-	flex-direction: column;
-}
-
-.controlsGroup {
-	display: flex;
-	gap: .25rem;
-}
-
-.dropdown {
-	padding: .25rem;
-}
-
-.control {
-	width: max-content;
-	min-width: 2.5em;
-	height: 2em;
-	border-radius: var(--radius-default);
-
-	font-size: var(--control-font-size, var(--font-size-sm));
-	text-align: center;
-
-	&:where([data-active]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-	}
-
-	@mixin hover {
-		&:where(:not([data-active])) {
-			color: var(--color-bright);
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-
-			@mixin where-light {
-				background-color: var(--color-gray-1);
-			}
-		}
-	}
-}
-
-.presetControl {
-	height: 2em;
-	padding-inline: 0.5em;
-	border-radius: var(--radius-default);
-
-	font-size: var(--control-font-size, var(--font-size-sm));
-	text-align: center;
-
-	&:where([data-active]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-	}
-
-	@mixin hover {
-		&:where(:not([data-active])) {
-			color: var(--color-bright);
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-
-			@mixin where-light {
-				background-color: var(--color-gray-1);
-			}
-		}
-	}
-}
-
-.presetsGroup {
-	&+& {
-		margin-top: var(--spacing-sm);
-	}
-}
-
-.presetsGroupLabel {
-	display: flex;
-	align-items: center;
-
-	margin-bottom: .25rem;
-	padding-inline-start: 7px;
-
-	font-size: calc(var(--control-font-size, var(--font-size-sm)) - 2px);
-	font-weight: 500;
-	color: var(--color-dimmed);
-
-	&::after {
-		content: '';
-
-		flex: 1;
-
-		width: 100%;
-		height: 1px;
-		margin-inline-start: var(--spacing-xs);
-
-		@mixin where-light {
-			background-color: var(--color-gray-2);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-4);
-		}
-	}
-}
+<style module>
+.root{align-items:center;display:flex;height:100%;overflow:hidden;@mixin where-rtl{flex-direction:row-reverse}}.group{align-items:center;display:flex;height:calc(var(--input-height) - rem(15px))}.controls{display:flex;flex-direction:column}.controlsGroup{display:flex;gap:.25rem}.dropdown{padding:.25rem}.control{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-sm));height:2em;min-width:2.5em;text-align:center;width:-moz-max-content;width:max-content}.control:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.control{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetControl{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-sm));height:2em;padding-inline:.5em;text-align:center}.presetControl:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.presetControl{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetsGroup+.presetsGroup{margin-top:var(--spacing-sm)}.presetsGroupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--control-font-size, var(--font-size-sm)) - 2px);font-weight:500;margin-bottom:.25rem;padding-inline-start:7px}.presetsGroupLabel:after{content:"";flex:1;height:1px;margin-inline-start:var(--spacing-xs);width:100%;@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}
 </style>

package/dist/runtime/components/title.vue

@@ -15,11 +15,11 @@ const {
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => ({ "--title-text-wrap": textWrap }));
@@ -37,10 +37,6 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 	</Text>
 </template>
 
-<style module lang="postcss">
-.root {
-	--title-text-wrap: pretty;
-
-	text-wrap: var(--title-text-wrap);
-}
+<style module>
+.root{--title-text-wrap:pretty;text-wrap:var(--title-text-wrap)}
 </style>

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -120,66 +120,6 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 	</li>
 </template>
 
-<style module lang="postcss">
-.item {
-	display: grid;
-	gap: .25rem;
-}
-
-.icon {
-	--loader-size: var(--tree-icon-size);
-
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.chevron {
-	color: var(--color-dimmed);
-
-	transition: transform .3s ease-in-out;
-
-	&:hover {
-		color: var(--color-dimmed);
-
-		background-color: transparent;
-	}
-
-	&[data-expanded] .chevron-icon {
-		transform: rotate(-180deg);
-	}
-}
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-}
-
-.root {
-	.inner {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-
-		color: var(--color-text);
-
-		.label {
-			font-weight: 500;
-		}
-	}
-
-	&[data-active],
-	&[data-selected] {
-		.inner {
-			color: var(--button-color);
-		}
-	}
-
-	&[data-selected] {
-		background: alpha(var(--button-color), .1);
-	}
-}
+<style module>
+.item{display:grid;gap:.25rem}.icon{--loader-size:var(--tree-icon-size);height:var(--tree-icon-size);width:var(--tree-icon-size)}.chevron{transition:transform .3s ease-in-out}.chevron,.chevron:hover{color:var(--color-dimmed)}.chevron:hover{background-color:transparent}.chevron[data-expanded] .chevron-icon{transform:rotate(-180deg)}.list{border-left:1px solid var(--color-gray-4);display:grid;gap:.25rem;margin-inline-start:1rem;padding-inline-start:.75rem}.root .inner{color:var(--color-text);display:grid;grid-template-columns:auto 1fr auto}.root .inner .label{font-weight:500}.root[data-active] .inner,.root[data-selected] .inner{color:var(--button-color)}.root[data-selected]{background:alpha(var(--button-color),.1)}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -1,7 +1,8 @@
-import type { ButtonProps } from '@nui/components';
+import type { ButtonProps, ButtonVariant } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
-export type TreeRootProps = RovingFocusProps & {
+export interface TreeRootProps extends RovingFocusProps {
     /** Resolves the icon for a given tree item */
     iconResolver?: TreeIconResolver;
     /** If set, selected items can be deleted with the Delete key */
@@ -12,13 +13,13 @@ export type TreeRootProps = RovingFocusProps & {
     loadBranch: TreeLoader;
     /** Filters which items are rendered */
     filter?: TreeFilter;
-    /** Visual variant */
-    variant?: ButtonProps['variant'];
     /** Color from theme */
-    color?: ButtonProps['color'];
+    color?: NuanceColor;
     /** Component size */
     size?: ButtonProps['size'];
-};
+    /** Visual variant */
+    variant?: ButtonVariant;
+}
 type __VLS_Props = TreeRootProps;
 type __VLS_ModelProps = {
     'active'?: TreeModels['active'];

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getSize } from "@nui/utils";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import { useTemplateRef } from "vue";
@@ -19,24 +19,26 @@ const {
   loadBranch,
   filter
 } = defineProps({
-  loop: { type: Boolean, required: false },
-  orientation: { type: String, required: false },
-  attr: { type: String, required: false },
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
   filter: { type: [String, null, Function], required: false },
-  variant: { type: String, required: false },
   color: { type: null, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
 });
 const emit = defineEmits(["delete"]);
 const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
-const style = useStyleResolver(() => ({
-  "--icon-size": getSize(size)
+const style = useVarsResolver(() => ({
+  root: {
+    "--icon-size": getSize(size)
+  }
 }));
 const root = useTemplateRef("parent");
 onClickOutside(root, () => selected.value = []);
@@ -69,7 +71,7 @@ if (removable) {
 			is='ul'
 			ref='parent'
 			role='tree'
-			:style
+			:style='style.root'
 			:class='$style.root'
 			@keydown.esc.prevent='selected = []'
 		>
@@ -78,14 +80,6 @@ if (removable) {
 	</RovingFocus>
 </template>
 
-<style module lang="postcss">
-.root {
-	--tree-icon-size: var(--spacing-md);
-
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-
-	padding-inline-start: 0;
-}
+<style module>
+.root{--tree-icon-size:var(--spacing-md);display:flex;flex-direction:column;gap:.25rem;padding-inline-start:0}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -1,7 +1,8 @@
-import type { ButtonProps } from '@nui/components';
+import type { ButtonProps, ButtonVariant } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
-export type TreeRootProps = RovingFocusProps & {
+export interface TreeRootProps extends RovingFocusProps {
     /** Resolves the icon for a given tree item */
     iconResolver?: TreeIconResolver;
     /** If set, selected items can be deleted with the Delete key */
@@ -12,13 +13,13 @@ export type TreeRootProps = RovingFocusProps & {
     loadBranch: TreeLoader;
     /** Filters which items are rendered */
     filter?: TreeFilter;
-    /** Visual variant */
-    variant?: ButtonProps['variant'];
     /** Color from theme */
-    color?: ButtonProps['color'];
+    color?: NuanceColor;
     /** Component size */
     size?: ButtonProps['size'];
-};
+    /** Visual variant */
+    variant?: ButtonVariant;
+}
 type __VLS_Props = TreeRootProps;
 type __VLS_ModelProps = {
     'active'?: TreeModels['active'];

package/dist/runtime/components/tree/tree.vue

@@ -11,17 +11,17 @@ const {
   filter = "directory",
   ...props
 } = defineProps({
-  loop: { type: Boolean, required: false },
-  orientation: { type: String, required: false },
-  attr: { type: String, required: false },
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
   filter: { type: [String, null, Function], required: false },
-  variant: { type: String, required: false },
   color: { type: null, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
 });
 defineEmits(["delete"]);
 const active = defineModel("active", { type: [String, null], ...{ default: null } });