nuance-ui 0.2.6 → 0.2.8

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

@@ -1,23 +1,34 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
+    /** Input id */
     id: string;
+    /** Label text */
     label?: string;
+    /** Helper text displayed below the label */
     description?: string;
+    /** Error message displayed below the label */
     error?: string;
+    /** Disables the component */
     disabled?: boolean | undefined;
+    /** Component size */
     size?: NuanceSize | string;
+    /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
+    /** HTML element used for the body wrapper */
+    bodyElement?: keyof HTMLElementTagNameMap;
+    /** HTML element used for the label */
+    labelElement?: keyof HTMLElementTagNameMap;
 }
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_24: {}, __VLS_32: {};
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    label?: (props: typeof __VLS_16) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_24) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InlineInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,6 +1,8 @@
 import type { NuanceSize } from '@nui/types';
 export interface InputLabelProps {
+    /** Required input prop @default false */
     required?: boolean;
+    /** Component size @default 'sm' */
     size?: NuanceSize | string;
 }
 declare var __VLS_1: {};

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

@@ -12,10 +12,10 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<label :style :class='$style.root'>
-		<slot />
-		<span v-if='required' :class='$style.required'> *</span>
-	</label>
+	<label :style :class='$style.root'>
+		<slot />
+		<span v-if='required' :class='$style.required'> *</span>
+	</label>
 </template>
 
 <style module>

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

@@ -1,6 +1,8 @@
 import type { NuanceSize } from '@nui/types';
 export interface InputLabelProps {
+    /** Required input prop @default false */
     required?: boolean;
+    /** Component size @default 'sm' */
     size?: NuanceSize | string;
 }
 declare var __VLS_1: {};

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

@@ -1,8 +1,12 @@
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface InputWrapperProps extends WrapperContext {
+    /** Error message displayed below the input */
     error?: string;
+    /** Helper text displayed below the input */
     description?: string;
+    /** Label displayed above the input */
     label?: string;
+    /** Marks the field as required */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

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

@@ -1,8 +1,12 @@
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface InputWrapperProps extends WrapperContext {
+    /** Error message displayed below the input */
     error?: string;
+    /** Helper text displayed below the input */
     description?: string;
+    /** Label displayed above the input */
     label?: string;
+    /** Marks the field as required */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

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

@@ -87,76 +87,76 @@ function handleKeyDown(event) {
 </script>
 
 <template>
-	<input
-		v-model='value'
-		type='text'
-		role='spinbutton'
-		:aria-valuemin='min'
-		:aria-valuemax='max'
-		:aria-valuenow='value === null ? 0 : value'
-		:data-empty='value === null || void 0'
-		inputMode='numeric'
-		:placeholder
-		:readonly
-		:disabled
-		:class='$style.field'
-		@keydown='handleKeyDown'
-		@focus='!readonly && !disabled && ($event?.target).select()'
-		@click.stop='!readonly && !disabled && ($event?.target).select()'
-	>
+	<input
+		v-model='value'
+		type='text'
+		role='spinbutton'
+		:aria-valuemin='min'
+		:aria-valuemax='max'
+		:aria-valuenow='value === null ? 0 : value'
+		:data-empty='value === null || void 0'
+		inputMode='numeric'
+		:placeholder
+		:readonly
+		:disabled
+		:class='$style.field'
+		@keydown='handleKeyDown'
+		@focus='!readonly && !disabled && ($event?.target).select()'
+		@click.stop='!readonly && !disabled && ($event?.target).select()'
+	>
 </template>
 
 <style lang="postcss" module>
-.field {
-	position: relative;
-
-	width: calc(2ch + 0.3em);
-	height: 100%;
-	padding-inline: 0.15em;
-	border: 0;
-	border-radius: 2px;
-
-	font-variant-numeric: tabular-nums;
-	line-height: 1;
-	color: var(--input-color);
-	text-align: center;
-	text-align-last: center;
-
-	appearance: none;
-	background-color: transparent;
-	caret-color: transparent;
-
-	&:where([data-am-pm]) {
-		width: auto;
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-	}
-
-	&::selection {
-		background-color: transparent;
-	}
-
-	&::placeholder {
-		color: inherit;
-
-		opacity: 1;
-	}
-
-	&:not(:read-only):focus {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-		outline: 0;
-
-		&::placeholder {
-			color: var(--color-white);
-		}
-	}
-
-	&:read-only:focus {
-		outline: 0;
-	}
-}
+.field {
+	position: relative;
+
+	width: calc(2ch + 0.3em);
+	height: 100%;
+	padding-inline: 0.15em;
+	border: 0;
+	border-radius: 2px;
+
+	font-variant-numeric: tabular-nums;
+	line-height: 1;
+	color: var(--input-color);
+	text-align: center;
+	text-align-last: center;
+
+	appearance: none;
+	background-color: transparent;
+	caret-color: transparent;
+
+	&:where([data-am-pm]) {
+		width: auto;
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+	}
+
+	&::selection {
+		background-color: transparent;
+	}
+
+	&::placeholder {
+		color: inherit;
+
+		opacity: 1;
+	}
+
+	&:not(:read-only):focus {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+		outline: 0;
+
+		&::placeholder {
+			color: var(--color-white);
+		}
+	}
+
+	&:read-only:focus {
+		outline: 0;
+	}
+}
 </style>

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

@@ -27,6 +27,7 @@ const props = defineProps({
   classes: { type: Object, required: false },
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
+  icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
   is: { type: null, required: false },

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

@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app';
 import type { TextProps } from '../text.vue.js';
 export interface LinkProps extends Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    /** Underline the link text */
     underline?: boolean;
 }
 declare var __VLS_16: {};

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

@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app';
 import type { TextProps } from '../text.vue.js';
 export interface LinkProps extends Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    /** Underline the link text */
     underline?: boolean;
 }
 declare var __VLS_16: {};

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

@@ -1,8 +1,14 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}` | string;
+    /** Color from theme */
     color?: NuanceColor | string;
+    /**
+     * Loader animation type
+     * @default `'oval'`
+     */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/loader/loader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getSize, parseThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import BarsLoader from "./_loaders/bars-loader.vue";
@@ -25,7 +25,7 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<component :is='loaders[type]' :class='$style.root' :style />
+	<component :is='loaders[type]' :class='$style.root' :style />
 </template>
 
 <style module>

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

@@ -1,8 +1,14 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}` | string;
+    /** Color from theme */
     color?: NuanceColor | string;
+    /**
+     * Loader animation type
+     * @default `'oval'`
+     */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/nav-link/nav-icon-link.d.vue.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};

package/dist/runtime/components/nav-link/nav-icon-link.vue.d.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};

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

@@ -2,29 +2,35 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_37) => any;
 } & {
-    rightSection?: (props: typeof __VLS_34) => any;
+    rightSection?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -13,6 +13,7 @@ const props = defineProps({
   noWrap: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   variant: { type: String, required: false },
+  icon: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   to: { type: null, required: false },
@@ -40,7 +41,8 @@ const {
     color,
     noWrap,
     description,
-    spacing
+    spacing,
+    icon
   }
 } = pickLinkProps(props);
 const style = computed(() => useStyleResolver((theme) => {
@@ -67,8 +69,10 @@ const style = computed(() => useStyleResolver((theme) => {
 			:target='"target" in linkProps ? linkProps?.target : void 0'
 			@click='navigate'
 		>
-			<span v-if='$slots.leftSection' :class='$style.section' data-position='left'>
-				<slot name='leftSection' />
+			<span v-if='$slots.leftSection || icon' :class='$style.section' data-position='left'>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
 			</span>
 
 			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>

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

@@ -2,29 +2,35 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_37) => any;
 } & {
-    rightSection?: (props: typeof __VLS_34) => any;
+    rightSection?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,8 +1,11 @@
 import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
+    /** Shadow token */
     shadow?: NuanceShadow;
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -1,8 +1,11 @@
 import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
+    /** Shadow token */
     shadow?: NuanceShadow;
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};

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

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

package/dist/runtime/components/popover/lib/get-arrow-position.d.ts

@@ -1,5 +1,5 @@
 import type { AlignedPlacement, Side } from '@floating-ui/vue';
-import type { ArrowPosition } from '../types/index.js';
+import type { ArrowPosition } from '../types.js';
 export declare function getArrowPosition({ placement: _placement, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir, }: {
     placement: Side | AlignedPlacement;
     arrowSize?: number;

package/dist/runtime/components/popover/lib/use-popover.d.ts

@@ -1,6 +1,6 @@
 import type { OffsetOptions, Placement, Strategy } from '@floating-ui/vue';
 import type { CSSProperties, ModelRef, Ref, ShallowRef } from 'vue';
-import type { ArrowPosition, PopoverWidth } from '../types/index.js';
+import type { ArrowPosition, PopoverWidth } from '../types.js';
 export interface PopoverOptions {
     offset: OffsetOptions;
     placement: Placement;

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

package/dist/runtime/components/popover/{types/index.d.ts → types.d.ts}

@@ -1,6 +1,6 @@
 import type { AlignedPlacement, OffsetOptions, Side, Strategy } from '@floating-ui/vue';
+import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { CSSProperties } from 'vue';
-import type { NuanceRadius, NuanceShadow } from '~/src/runtime/types/theme';
 export type ArrowPosition = 'center' | 'side';
 export type PopoverWidth = 'target' | CSSProperties['width'] | null;
 export interface PopoverProps {
@@ -22,21 +22,22 @@ export interface PopoverProps {
     arrowRadius?: number;
     /** Arrow position */
     arrowPosition?: ArrowPosition;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
+    /** Shadow token */
     shadow?: NuanceShadow;
-    /** If set, popover dropdown will not be rendered */
+    /** Disables the component */
     disabled?: boolean;
     /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
     floatingStrategy?: Strategy;
 }
 export interface PopoverModel {
+    /** Open state */
     open: boolean;
 }
 export interface PopoverEmits {
-    /** Event handler called when the popover open */
+    /** Fired when the popover opens */
     open: [];
-    /** Event handler called when the popover closed */
+    /** Fired when the popover closes */
     close: [];
 }

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

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
-    /** Controls track height @default `'md'` */
+    /** Component size @default `'md'` */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Orientation @default `'horizontal'` */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};