nuance-ui 0.1.8 → 0.1.10

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

@@ -1,13 +1,14 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;
+    /** Styles API */
     classes?: {
         root?: string;
         inner?: string;

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

@@ -1,5 +1,6 @@
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
+export * from './avatar/index.js';
 export * from './background-image.vue.js';
 export * from './box.vue.js';
 export * from './button/index.js';
@@ -17,6 +18,7 @@ export * from './modal/index.js';
 export * from './nav-link/index.js';
 export * from './paper.vue.js';
 export * from './popover/index.js';
+export * from './progress/index.js';
 export * from './roving-focus/index.js';
 export * from './select/index.js';
 export * from './tabs/index.js';

package/dist/runtime/components/index.js

@@ -1,5 +1,6 @@
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
+export * from "./avatar/index.js";
 export * from "./background-image.vue";
 export * from "./box.vue";
 export * from "./button/index.js";
@@ -17,6 +18,7 @@ export * from "./modal/index.js";
 export * from "./nav-link/index.js";
 export * from "./paper.vue";
 export * from "./popover/index.js";
+export * from "./progress/index.js";
 export * from "./roving-focus/index.js";
 export * from "./select/index.js";
 export * from "./tabs/index.js";

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

@@ -1,6 +1,6 @@
 <script setup>
-import { clamp, useCounter } from "@vueuse/core";
-import { shallowRef, useId, watch } from "vue";
+import { clamp } from "@vueuse/core";
+import { shallowRef, useId } from "vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
@@ -31,25 +31,21 @@ const {
   rightSectionPE: { type: null, required: false }
 });
 const id = useId();
-const value = defineModel({ type: Number, ...{ default: 0 } });
-const { count, inc, dec, set } = useCounter(value, { min, max });
 const focused = shallowRef(false);
-watch(count, () => {
-  value.value = count.value;
-});
+const value = defineModel({ type: Number, ...{ default: 0 } });
 function handleWheel(event) {
   if (!focused.value)
     return;
   if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
     return;
   if (event.deltaY > 0)
-    dec(step);
+    value.value = clamp(value.value + step, min, max);
   else if (event.deltaY < 0)
-    inc(step);
+    value.value = clamp(value.value - step, min, max);
 }
 function handleBlur() {
   focused.value = false;
-  set(clamp(count.value, min, max));
+  value.value = clamp(value.value, min, max);
 }
 </script>
 
@@ -57,12 +53,12 @@ function handleBlur() {
 	<InputWrapper v-bind='rest' :id :class='$style.root' :right-section-p-e>
 		<BaseInput
 			:id
-			:value='count'
-			:readonly
-			:disabled
-			:step
+			v-model='value'
 			:min
 			:max
+			:step
+			:readonly
+			:disabled
 			type='number'
 			@focus='focused = true'
 			@blur='handleBlur()'
@@ -77,14 +73,14 @@ function handleBlur() {
 						<UnstyledButton
 							:class='$style.control'
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
-							@click='inc(step)'
+							@click='value = clamp(value + step, min, max)'
 						>
 							<Icon name='gravity-ui:chevron-up' />
 						</UnstyledButton>
 						<UnstyledButton
 							:class='$style.control'
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
-							@click='dec(step)'
+							@click='value = clamp(value - step, min, max)'
 						>
 							<Icon name='gravity-ui:chevron-down' />
 						</UnstyledButton>

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

@@ -4,7 +4,7 @@ import type { InputBaseProps } from '../types/index.js';
 export interface BaseInputProps extends InputBaseProps, Omit<WrapperContext, 'id'> {
     id: string;
     is?: 'input' | 'textarea' | Component;
-    modelValue?: string;
+    modelValue?: string | number;
 }
 declare var __VLS_6: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
@@ -15,9 +15,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<BaseInputProps, {
     ref: Readonly<import("vue").ShallowRef<any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string | number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<BaseInputProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,7 +1,7 @@
 <script setup>
-import Box from "@nui/components/box.vue";
 import { getFontSize, getRadius, getSize } from "@nui/utils";
 import { computed, useTemplateRef } from "vue";
+import Box from "../../box.vue";
 import { useInputWrapperState } from "../lib/input-wrapper.context";
 const {
   is = "input",
@@ -12,7 +12,7 @@ const {
 } = defineProps({
   id: { type: String, required: true },
   is: { type: null, required: false },
-  modelValue: { type: String, required: false },
+  modelValue: { type: [String, Number], required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },

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

@@ -4,7 +4,7 @@ import type { InputBaseProps } from '../types/index.js';
 export interface BaseInputProps extends InputBaseProps, Omit<WrapperContext, 'id'> {
     id: string;
     is?: 'input' | 'textarea' | Component;
-    modelValue?: string;
+    modelValue?: string | number;
 }
 declare var __VLS_6: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
@@ -15,9 +15,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<BaseInputProps, {
     ref: Readonly<import("vue").ShallowRef<any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string | number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<BaseInputProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/nav-link/nav-link.vue

@@ -121,6 +121,16 @@ const style = useStyleResolver((theme) => {
 		opacity: 0.4;
 	}
 
+	&:hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-6);
+		}
+	}
+
 	&:where([data-active], [aria-current='page']) {
 		color: var(--nl-color);
 
@@ -135,16 +145,6 @@ const style = useStyleResolver((theme) => {
 			background-color: var(--nl-hover);
 		}
 	}
-
-	@mixin hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-6);
-		}
-	}
 }
 
 .section {

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

@@ -0,0 +1,3 @@
+export type * from './progress-root.vue';
+export type * from './progress-section.vue';
+export type * from './progress.vue';

package/dist/runtime/components/progress/progress-label.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & 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/progress/progress-label.vue

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

package/dist/runtime/components/progress/progress-label.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & 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/progress/progress-root.d.vue.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & 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/progress/progress-root.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const {
+  orientation,
+  mod,
+  size,
+  radius,
+  transitionDuration
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  transitionDuration: { type: Number, required: false },
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = computed(() => ({
+  "--progress-size": getSize(size, "progress-size"),
+  "--progress-radius": radius === void 0 ? void 0 : getRadius(radius),
+  "--progress-transition-duration": typeof transitionDuration === "number" ? `${transitionDuration}ms` : void 0
+}));
+</script>
+
+<template>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
+</template>

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

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & 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/progress/progress-section.d.vue.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionProps extends BoxProps {
+    /** Determines whether `aria-*` props should be added to the root element @default `true` */
+    withAria?: boolean;
+    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    color?: NuanceColor;
+    /** If set, the section has stripes @default `false` */
+    striped?: boolean;
+    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    animated?: boolean;
+}
+type __VLS_Props = ProgressSectionProps;
+type __VLS_ModelProps = {
+    /** Value of the section in 0–100 range */
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,42 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getThemeColor } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const {
+  withAria,
+  animated,
+  striped,
+  color,
+  mod
+} = defineProps({
+  withAria: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  striped: { type: Boolean, required: false },
+  animated: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const value = defineModel({ type: Number, ...{ required: true } });
+const ariaAttributes = computed(() => withAria ? {
+  "role": "progressbar",
+  "aria-valuemax": 100,
+  "aria-valuemin": 0,
+  "aria-valuenow": value.value,
+  "aria-valuetext": `${value.value}%`
+} : {});
+const style = computed(() => useStyleResolver((theme) => ({
+  "--progress-section-size": `${value.value}%`,
+  "--progress-section-color": getThemeColor(color, theme)
+})));
+</script>
+
+<template>
+	<Box
+		:style
+		v-bind='ariaAttributes'
+		:class='css.section'
+		:mod='[{ striped: striped || animated, animated }, mod]'
+	/>
+</template>

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

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionProps extends BoxProps {
+    /** Determines whether `aria-*` props should be added to the root element @default `true` */
+    withAria?: boolean;
+    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    color?: NuanceColor;
+    /** If set, the section has stripes @default `false` */
+    striped?: boolean;
+    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    animated?: boolean;
+}
+type __VLS_Props = ProgressSectionProps;
+type __VLS_ModelProps = {
+    /** Value of the section in 0–100 range */
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { ProgressRootProps } from './progress-root.vue.js';
+import type { ProgressSectionProps } from './progress-section.vue.js';
+export interface ProgressProps extends ProgressRootProps, ProgressSectionProps {
+}
+type __VLS_Props = ProgressProps;
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1 @@
+.root{--progress-radius:var(--radius-default);--progress-size:var(--progress-size-md);--progress-size-xs:rem(8px);--progress-size-sm:rem(12px);--progress-size-md:rem(16px);--progress-size-lg:rem(20px);--progress-size-xl:rem(24px);border-radius:var(--progress-radius);display:flex;height:var(--progress-size);overflow:hidden;position:relative;@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.root:where([data-orientation=vertical]){flex-direction:column-reverse;height:auto;width:var(--progress-size)}.section{--progress-section-size:var(--progress-size-sm);--progress-section-color:var(--color-primary-4);--progress-transition-duration:100ms;align-items:center;background-color:var(--progress-section-color);background-size:20px 20px;display:flex;height:100%;justify-content:center;overflow:hidden;transition:width var(--progress-transition-duration) ease;width:var(--progress-section-size)}.section:where([data-striped]){background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.section:where([data-animated]){animation:stripes-animation 1s linear infinite}.section:where(:last-of-type){border-radius:0;border-end-end-radius:var(--progress-radius);border-start-end-radius:var(--progress-radius)}.section:where(:first-of-type){border-radius:0;border-end-start-radius:var(--progress-radius);border-start-start-radius:var(--progress-radius)}.root:where([data-orientation=vertical]) .section{height:var(--progress-section-size);transition:height var(--progress-transition-duration,.1s) ease;width:100%}.root:where([data-orientation=vertical]) .section:where([data-striped]){background-image:linear-gradient(135deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.root:where([data-orientation=vertical]) .section:where([data-animated]){animation:stripes-animation-vertical 1s linear infinite}.root:where([data-orientation=vertical]) .section:where(:last-of-type){border-radius:0;border-start-end-radius:var(--progress-radius);border-start-start-radius:var(--progress-radius)}.root:where([data-orientation=vertical]) .section:where(:first-of-type){border-radius:0;border-end-end-radius:var(--progress-radius);border-end-start-radius:var(--progress-radius)}.label{--progress-label-color:var(--color-white);color:var(--progress-label-color);font-size:min(calc(var(--progress-size)*.65));font-weight:700;line-height:1;overflow:hidden;padding-inline:4px;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.root:where([data-orientation=vertical]) .label{writing-mode:vertical-rl}@keyframes stripes-animation{0%{background-position:0 0}to{background-position:40px 0}}@keyframes stripes-animation-vertical{0%{background-position:0 0}to{background-position:0 40px}}

package/dist/runtime/components/progress/progress.vue

@@ -0,0 +1,39 @@
+<script setup>
+import ProgressRoot from "./progress-root.vue";
+import ProgressSection from "./progress-section.vue";
+const {
+  mod,
+  size,
+  color,
+  radius,
+  striped,
+  animated,
+  withAria,
+  orientation,
+  transitionDuration
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  transitionDuration: { type: Number, required: false },
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  withAria: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  striped: { type: Boolean, required: false },
+  animated: { type: Boolean, required: false }
+});
+const value = defineModel({ type: Number, ...{ required: true } });
+</script>
+
+<template>
+	<ProgressRoot :size :radius :orientation :transition-duration :mod>
+		<ProgressSection
+			v-model='value'
+			:striped
+			:animated
+			:color
+			:with-aria
+		/>
+	</ProgressRoot>
+</template>

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

@@ -0,0 +1,16 @@
+import type { ProgressRootProps } from './progress-root.vue.js';
+import type { ProgressSectionProps } from './progress-section.vue.js';
+export interface ProgressProps extends ProgressRootProps, ProgressSectionProps {
+}
+type __VLS_Props = ProgressProps;
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, 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;
@@ -15,7 +15,7 @@ export interface TextProps extends BoxProps {
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
     /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     variant?: 'text' | 'gradient';
     fz?: NuanceSize | `h${TitleOrder}` | string;
     lh?: NuanceSize | string;

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

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, 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;
@@ -15,7 +15,7 @@ export interface TextProps extends BoxProps {
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
     /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     variant?: 'text' | 'gradient';
     fz?: NuanceSize | `h${TitleOrder}` | string;
     lh?: NuanceSize | string;

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

@@ -56,9 +56,10 @@ function handleKeyDown(event) {
       break;
     }
     // Enter/Space - выбор элемента
-    case "Enter":
+    case "Enter": {
       ctx.on("select", value);
       return ctx.setActive(value);
+    }
     case " ": {
       event.preventDefault();
       if (event.shiftKey)
@@ -75,8 +76,10 @@ function handleKeyDown(event) {
 	<li :class='$style.root' role='presentation'>
 		<RovingFocusItem>
 			<Button
-				variant='subtle'
-				size='compact-md'
+				:size='ctx.size'
+				:color='ctx.color'
+				:variant='ctx.variant'
+				:disabled
 				role='treeitem'
 				:classes='{
   root: $style.button,
@@ -84,10 +87,9 @@ function handleKeyDown(event) {
   inner: $style.inner,
   section: $style.section
 }'
-				:mod='{ active, selected, level }'
-				:aria-selected='selected'
 				:aria-level='level'
-				:disabled
+				:aria-selected='selected'
+				:mod='{ active, selected, level }'
 				@click.prevent='handleClick'
 				@keydown.prevent='handleKeyDown'
 			>
@@ -135,7 +137,6 @@ function handleKeyDown(event) {
 		color: var(--color-text);
 
 		.label {
-			font-size: var(--font-size-sm);
 			font-weight: 500;
 		}
 	}