nuance-ui 0.2.7 → 0.2.8

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

@@ -33,112 +33,112 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
-		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
-			<slot />
-
-			<div :class='$style.wrapper'>
-				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
-					<slot name='label'>
-						{{ label }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
-					<slot name='error'>
-						{{ error }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</div>
-		</Box>
-	</Box>
+	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
+		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
+			<slot />
+
+			<div :class='$style.wrapper'>
+				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
+					<slot name='label'>
+						{{ label }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
+					<slot name='error'>
+						{{ error }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</div>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--label-lh-xs: rem(16px);
-	--label-lh-sm: rem(20px);
-	--label-lh-md: rem(24px);
-	--label-lh-lg: rem(30px);
-	--label-lh-xl: rem(36px);
-	--label-lh: var(--label-lh-sm);
-
-	--label-fz: var(--font-size-sm);
-
-	&[data-label-position='left'] {
-		--label-order: 0;
-	}
-
-	&[data-label-position='right'] {
-		--label-order: 1;
-	}
-}
-
-.body {
-	display: flex;
-	gap: var(--spacing-sm);
-}
-
-.wrapper {
-	--label-cursor: default;
-
-	cursor: var(--label-cursor);
-
-	display: inline-flex;
-	flex-direction: column;
-	gap: .25rem;
-	order: var(--label-order);
-
-	font-size: var(--label-fz);
-	line-height: var(--label-lh);
-
-	-webkit-tap-highlight-color: transparent;
-
-	fieldset:disabled &,
-	&[data-disabled] {
-		--label-cursor: not-allowed;
-	}
-
-	&:empty {
-		display: none;
-	}
-}
-
-.label {
-	cursor: var(--label-cursor);
-
-	color: inherit;
-
-	fieldset:disabled &,
-	&:where([data-disabled]) {
-		color: var(--color-gray-5);
-	}
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
+.root {
+	--label-lh-xs: rem(16px);
+	--label-lh-sm: rem(20px);
+	--label-lh-md: rem(24px);
+	--label-lh-lg: rem(30px);
+	--label-lh-xl: rem(36px);
+	--label-lh: var(--label-lh-sm);
+
+	--label-fz: var(--font-size-sm);
+
+	&[data-label-position='left'] {
+		--label-order: 0;
+	}
+
+	&[data-label-position='right'] {
+		--label-order: 1;
+	}
+}
+
+.body {
+	display: flex;
+	gap: var(--spacing-sm);
+}
+
+.wrapper {
+	--label-cursor: default;
+
+	cursor: var(--label-cursor);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: .25rem;
+	order: var(--label-order);
+
+	font-size: var(--label-fz);
+	line-height: var(--label-lh);
+
+	-webkit-tap-highlight-color: transparent;
+
+	fieldset:disabled &,
+	&[data-disabled] {
+		--label-cursor: not-allowed;
+	}
+
+	&:empty {
+		display: none;
+	}
+}
+
+.label {
+	cursor: var(--label-cursor);
+
+	color: inherit;
+
+	fieldset:disabled &,
+	&:where([data-disabled]) {
+		color: var(--color-gray-5);
+	}
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
 </style>

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

@@ -3,17 +3,21 @@ 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;
-    /** Disabled input prop */
+    /** Disables the component */
     disabled?: boolean | undefined;
     /** Component size */
     size?: NuanceSize | string;
+    /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
-    /** Body html element */
+    /** HTML element used for the body wrapper */
     bodyElement?: keyof HTMLElementTagNameMap;
-    /** Label html element */
+    /** HTML element used for the label */
     labelElement?: keyof HTMLElementTagNameMap;
 }
 declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};

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

@@ -1,9 +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;
-    /** Required input prop @default false */
+    /** 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

@@ -52,61 +52,61 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div :style :class='$style.wrapper'>
-		<InputLabel
-			:data-v-hidden='!label && !$slots.label || null'
-			:for='uid'
-			:class='$style.label'
-			:size
-			:required
-		>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</InputLabel>
-
-		<slot />
-
-		<p v-if='error' :class='$style.error'>
-			<slot name='error'>
-				{{ error }}
-			</slot>
-		</p>
-
-		<p v-else-if='description || $slots.description' :class='$style.description'>
-			<slot name='description'>
-				{{ description }}
-			</slot>
-		</p>
-	</div>
+	<div :style :class='$style.wrapper'>
+		<InputLabel
+			:data-v-hidden='!label && !$slots.label || null'
+			:for='uid'
+			:class='$style.label'
+			:size
+			:required
+		>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</InputLabel>
+
+		<slot />
+
+		<p v-if='error' :class='$style.error'>
+			<slot name='error'>
+				{{ error }}
+			</slot>
+		</p>
+
+		<p v-else-if='description || $slots.description' :class='$style.description'>
+			<slot name='description'>
+				{{ description }}
+			</slot>
+		</p>
+	</div>
 </template>
 
 <style lang="postcss" module>
-.wrapper {
-	--input-error-size: calc(var(--font-size-sm) - rem(2px));
-	--input-description-size: calc(var(--font-size-sm) - rem(2px));
-
-	line-height: var(--line-height);
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
+.wrapper {
+	--input-error-size: calc(var(--font-size-sm) - rem(2px));
+	--input-description-size: calc(var(--font-size-sm) - rem(2px));
+
+	line-height: var(--line-height);
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
 </style>

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

@@ -1,9 +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;
-    /** Required input prop @default false */
+    /** Marks the field as required */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

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/nav-link/nav-link.d.vue.ts

@@ -19,16 +19,18 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
      * @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

@@ -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

@@ -19,16 +19,18 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
      * @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,9 +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 @default 'theme.defaultRadius' */
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/paper.vue

@@ -16,40 +16,40 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
-		<slot />
-	</Box>
+	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--paper-radius: var(--radius-default);
-	--paper-shadow: none;
-
-	touch-action: manipulation;
-
-	display: block;
-
-	border-radius: var(--paper-radius);
-
-	text-decoration: none;
-
-	background-color: var(--color-body);
-
-	outline: 0;
-	box-shadow: var(--paper-shadow);
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-border]) {
-		border: rem(1px) solid var(--paper-border-color);
-	}
-
-	@mixin light {
-		--paper-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--paper-border-color: var(--color-slate-7);
-	}
-}
+.root {
+	--paper-radius: var(--radius-default);
+	--paper-shadow: none;
+
+	touch-action: manipulation;
+
+	display: block;
+
+	border-radius: var(--paper-radius);
+
+	text-decoration: none;
+
+	background-color: var(--color-body);
+
+	outline: 0;
+	box-shadow: var(--paper-shadow);
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-border]) {
+		border: rem(1px) solid var(--paper-border-color);
+	}
+
+	@mixin light {
+		--paper-border-color: var(--color-gray-3);
+	}
+
+	@mixin dark {
+		--paper-border-color: var(--color-slate-7);
+	}
+}
 </style>

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

@@ -1,9 +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 @default 'theme.defaultRadius' */
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -3,7 +3,7 @@ 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 from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

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

@@ -3,7 +3,7 @@ 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 from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

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

@@ -1,6 +1,7 @@
 import type { ComboboxData, ComboboxItemExt } from './combobox/index.js';
 import type { TextInputProps } from './input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
+    /** List of options */
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
@@ -19,6 +20,7 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
     /** Icon displayed in the left section by default */
     icon?: string;
+    /** Maximum number of options rendered at a time */
     limit?: number;
     /** Input autocomplete attribute */
     autoComplete?: string;