nuance-ui 0.2.5 → 0.2.6

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

@@ -29,112 +29,112 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
-		<div :class='$style.body'>
-			<slot />
-
-			<div :class='$style.wrapper'>
-				<Box is='label' v-if='label || $slots.label' :class='$style.label' :for='id' :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>
-		</div>
-	</Box>
+	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
+		<div :class='$style.body'>
+			<slot />
+
+			<div :class='$style.wrapper'>
+				<Box is='label' v-if='label || $slots.label' :class='$style.label' :for='id' :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>
+		</div>
+	</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-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-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/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

@@ -36,26 +36,26 @@ const { link, rest } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Button
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Button
 			v-bind='{
   ...rest,
   is: rest?.is || "a",
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<template v-if='$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<slot />
-
-			<template v-if='$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</Button>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<template v-if='$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<slot />
+
+			<template v-if='$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</Button>
+	</NuxtLink>
 </template>

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

@@ -37,22 +37,22 @@ const { link, rest: { underline, ...rest } } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Text
-			is='a'
-			:class='[$style.root, { [$style.underline]: underline }]'
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Text
+			is='a'
+			:class='[$style.root, { [$style.underline]: underline }]'
 			v-bind='{
   ...rest,
   ...$attrs,
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<slot />
-		</Text>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<slot />
+		</Text>
+	</NuxtLink>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/bars-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/dots-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/oval-loader.vue

@@ -1,5 +1,5 @@
 <template>
-	<span :class='$style.root' />
+	<span :class='$style.root' />
 </template>
 
 <style module>

package/dist/runtime/components/loader/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/modal/modal-close-button.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogCloseButton v-bind='props'>
-		<slot />
-	</DialogCloseButton>
+	<DialogCloseButton v-bind='props'>
+		<slot />
+	</DialogCloseButton>
 </template>

package/dist/runtime/components/modal/modal-header.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogHeader v-bind='props'>
-		<slot />
-	</DialogHeader>
+	<DialogHeader v-bind='props'>
+		<slot />
+	</DialogHeader>
 </template>

package/dist/runtime/components/modal/modal-root.vue

@@ -31,17 +31,17 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 </script>
 
 <template>
-	<DialogRoot
-		v-model:open='opened'
-		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
-		:within-portal
-		:close-on-click-outside
-		:without-overlay
-		v-bind='rest'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<slot />
-	</DialogRoot>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ centered, "full-screen": fullScreen }, mod]'
+		:root-class='css.root'
+		:within-portal
+		:close-on-click-outside
+		:without-overlay
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
 </template>