nuance-ui 0.2.1 → 0.2.5

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

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

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

@@ -40,19 +40,19 @@ const { link, rest } = pickLinkProps(etc);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<ActionIcon
-			is='a'
-			v-bind='{ ...rest, ...$attrs }'
-			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<slot />
-		</ActionIcon>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<ActionIcon
+			is='a'
+			v-bind='{ ...rest, ...$attrs }'
+			:href
+			:variant='isActive ? active : notActive'
+			:mod='[{ active: isActive }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<slot />
+		</ActionIcon>
+	</NuxtLink>
 </template>

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

@@ -55,137 +55,137 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<UnstyledButton
-			is='a'
-			:href
-			:style
-			:class='$style.root'
-			:mod='[{ active: isActive, disabled }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			: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>
-
-			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
-				<span :class='$style.label'>
-					<slot />
-				</span>
-				<Box :class='$style.description' :mod='{ active }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</Box>
-
-			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-				<slot name='rightSection' />
-			</span>
-		</UnstyledButton>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<UnstyledButton
+			is='a'
+			:href
+			:style
+			:class='$style.root'
+			:mod='[{ active: isActive, disabled }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			: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>
+
+			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
+				<span :class='$style.label'>
+					<slot />
+				</span>
+				<Box :class='$style.description' :mod='{ active }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</Box>
+
+			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+				<slot name='rightSection' />
+			</span>
+		</UnstyledButton>
+	</NuxtLink>
 </template>
 
 <style module lang="postcss">
-.root {
-	--nl-spacing-xs: .25rem;
-	--nl-spacing-sm: .5rem;
-	--nl-spacing-md: .75rem;
-	--nl-spacing-lg: 1rem;
-	--nl-spacing-xl: 1.25rem;
-
-	--nl-bg: var(--color-primary-light);
-	--nl-hover: var(--color-primary-light-hover);
-	--nl-color: var(--color-primary-light-color);
-	--nl-spacing: var(--nl-spacing-xs);
-
-	user-select: none;
-
-	display: flex;
-	gap: var(--nl-spacing);
-	align-items: center;
-
-	width: 100%;
-	padding: .25rem var(--spacing-sm);
-	border-radius: var(--radius-default);
-
-	&:where([data-disabled]) {
-		pointer-events: none;
-
-		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]) {
-		color: var(--nl-color);
-
-		background-color: var(--nl-bg);
-
-		.description {
-			--description-opacity: 0.9;
-			--description-color: var(--nl-color);
-		}
-
-		&:hover {
-			background-color: var(--nl-hover);
-		}
-	}
-}
-
-.section {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: transform 150ms ease;
-
-	&>svg {
-		display: block;
-	}
-
-	&:where([data-rotate]) {
-		transform: rotate(90deg);
-	}
-}
-
-.label {
-	font-size: var(--font-size-sm);
-}
-
-.body {
-	overflow: hidden;
-	flex: 1;
-
-	text-overflow: ellipsis;
-
-	&:where([data-no-wrap]) {
-		white-space: nowrap;
-	}
-}
-
-.description {
-	overflow: hidden;
-
-	font-size: var(--font-size-xs);
-	color: var(--description-color, var(--color-dimmed));
-	text-overflow: ellipsis;
-
-	opacity: var(--description-opacity, 1);
-
-	:where([data-no-wrap]) & {
-		white-space: nowrap;
-	}
-}
+.root {
+	--nl-spacing-xs: .25rem;
+	--nl-spacing-sm: .5rem;
+	--nl-spacing-md: .75rem;
+	--nl-spacing-lg: 1rem;
+	--nl-spacing-xl: 1.25rem;
+
+	--nl-bg: var(--color-primary-light);
+	--nl-hover: var(--color-primary-light-hover);
+	--nl-color: var(--color-primary-light-color);
+	--nl-spacing: var(--nl-spacing-xs);
+
+	user-select: none;
+
+	display: flex;
+	gap: var(--nl-spacing);
+	align-items: center;
+
+	width: 100%;
+	padding: .25rem var(--spacing-sm);
+	border-radius: var(--radius-default);
+
+	&:where([data-disabled]) {
+		pointer-events: none;
+
+		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]) {
+		color: var(--nl-color);
+
+		background-color: var(--nl-bg);
+
+		.description {
+			--description-opacity: 0.9;
+			--description-color: var(--nl-color);
+		}
+
+		&:hover {
+			background-color: var(--nl-hover);
+		}
+	}
+}
+
+.section {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	transition: transform 150ms ease;
+
+	&>svg {
+		display: block;
+	}
+
+	&:where([data-rotate]) {
+		transform: rotate(90deg);
+	}
+}
+
+.label {
+	font-size: var(--font-size-sm);
+}
+
+.body {
+	overflow: hidden;
+	flex: 1;
+
+	text-overflow: ellipsis;
+
+	&:where([data-no-wrap]) {
+		white-space: nowrap;
+	}
+}
+
+.description {
+	overflow: hidden;
+
+	font-size: var(--font-size-xs);
+	color: var(--description-color, var(--color-dimmed));
+	text-overflow: ellipsis;
+
+	opacity: var(--description-opacity, 1);
+
+	:where([data-no-wrap]) & {
+		white-space: nowrap;
+	}
+}
 </style>

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/popover/popover-dropdown.vue

@@ -17,77 +17,76 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div
-		:id='id'
-		ref='dropdownRef'
-		popover
-		:style='{ ...floatingStyles, ...style }'
-		:class='$style.dropdown'
-		@toggle='onToggle'
-	>
-		<slot />
-		<span
-			v-if='withArrow'
-			ref='arrowRef'
-			:class='$style.arrow'
-			:style='arrowStyles'
-		/>
-	</div>
+	<div
+		:id='id'
+		ref='dropdownRef'
+		popover
+		:style='{ ...floatingStyles, ...style }'
+		:class='$style.dropdown'
+		@toggle='onToggle'
+	>
+		<slot />
+		<span
+			v-if='withArrow'
+			ref='arrowRef'
+			:class='$style.arrow'
+			:style='arrowStyles'
+		/>
+	</div>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	--popover-radius: var(--radius-default);
-	--popover-shadow: none;
-
-	overflow: visible;
-
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border: 1px solid var(--popover-border-color);
-	border-radius: var(--popover-radius);
-
-	color: var(--color-text);
-
-	opacity: 0;
-	box-shadow: var(--popover-shadow);
-
-	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
-
-
-	&:popover-open {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@mixin where-light {
-		--popover-border-color: var(--color-gray-2);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		--popover-border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.arrow {
-	--arrow-size: 7px;
-	--arrow-radius: 0px;
-	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
-
-	position: absolute;
-	transform: rotate(45deg);
-
-	width: var(--arrow-size);
-	height: var(--arrow-size);
-
-	border: 1px solid var(--popover-border-color);
-
-	background-color: inherit;
-}
+.dropdown {
+	--popover-radius: var(--radius-default);
+	--popover-shadow: none;
+
+	overflow: visible;
+
+	padding: var(--spacing-xs) var(--spacing-sm);
+	border: 1px solid var(--popover-border-color);
+	border-radius: var(--popover-radius);
+
+	color: var(--color-text);
+
+	opacity: 0;
+	box-shadow: var(--popover-shadow);
+
+	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+
+	&:popover-open {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@mixin where-light {
+		--popover-border-color: var(--color-gray-2);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		--popover-border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.arrow {
+	--arrow-size: 7px;
+	--arrow-radius: 0px;
+	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
+
+	position: absolute;
+	transform: rotate(45deg);
+
+	width: var(--arrow-size);
+	height: var(--arrow-size);
+
+	border: 1px solid var(--popover-border-color);
+
+	background-color: inherit;
+}
 </style>

package/dist/runtime/components/popover/popover-target.vue

@@ -8,12 +8,12 @@ const { id, store: { targetRef, opened }, disabled } = usePopoverState();
 </script>
 
 <template>
-	<Renderless
-		ref='targetRef'
-		:disabled
-		:popovertarget='id'
-		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		ref='targetRef'
+		:disabled
+		:popovertarget='id'
+		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
+	>
+		<slot />
+	</Renderless>
 </template>

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

@@ -75,5 +75,5 @@ useProvidePopoverState({
 </script>
 
 <template>
-	<slot />
+	<slot />
 </template>

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

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<Box v-bind='props' :class='css.label'>
-		<slot />
-	</Box>
+	<Box v-bind='props' :class='css.label'>
+		<slot />
+	</Box>
 </template>

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

@@ -25,7 +25,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
-		<slot />
-	</Box>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
 </template>

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

@@ -33,12 +33,12 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box
-		:style
-		v-bind='ariaAttributes'
-		:class='css.section'
-		:mod='[{ striped: striped || animated, animated }, mod]'
-	>
-		<slot />
-	</Box>
+	<Box
+		:style
+		v-bind='ariaAttributes'
+		:class='css.section'
+		:mod='[{ striped: striped || animated, animated }, mod]'
+	>
+		<slot />
+	</Box>
 </template>

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

@@ -27,13 +27,13 @@ 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>
+	<ProgressRoot :size :radius :orientation :transition-duration :mod>
+		<ProgressSection
+			v-model='value'
+			:striped
+			:animated
+			:color
+			:with-aria
+		/>
+	</ProgressRoot>
 </template>

package/dist/runtime/components/renderless/renderless.vue

@@ -6,7 +6,7 @@ defineOptions({
 </script>
 
 <template>
-	<Slot v-bind='$attrs'>
-		<slot />
-	</Slot>
+	<Slot v-bind='$attrs'>
+		<slot />
+	</Slot>
 </template>