nuance-ui 0.2.8 → 0.2.9

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

package/dist/runtime/components/breadcrumbs.vue

@@ -33,85 +33,85 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
-	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
-				<slot
-					:name='item.slot ?? "item"'
-					:item='item'
-					:ix='ix'
-					:active='item.active ?? ix === breadcrumbs.length - 1'
-				>
-					<Button
-						:size
-						:variant
-						:class='$style.item'
-						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
-						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
-						@click.stop.prevent='$emit("click", item)'
-					>
-						<template v-if='item?.icon' #leftSection>
-							<Icon :name='item.icon' :class='$style.icon' />
-						</template>
-						{{ item.label }}
-					</Button>
-				</slot>
-			</li>
-			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
-				<slot name='separator'>
-					<Icon :name='separator' />
-				</slot>
-			</li>
-		</template>
-	</Box>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+				<slot
+					:name='item.slot ?? "item"'
+					:item='item'
+					:ix='ix'
+					:active='item.active ?? ix === breadcrumbs.length - 1'
+				>
+					<Button
+						:size
+						:variant
+						:class='$style.item'
+						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
+					>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
+				</slot>
+			</li>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+				<slot name='separator'>
+					<Icon :name='separator' />
+				</slot>
+			</li>
+		</template>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-
-	font-weight: 600;
-	text-transform: capitalize;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+.root {
+	--bc-spacing: var(--spacing-xs);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--bc-spacing);
+	align-items: center;
+}
+
+.breadcrumb {
+	line-height: 1;
+
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+
+}
+
+.item {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
+
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.icon {
+	width: 1.2em;
+	height: 1.2em;
+}
+
+.separator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	line-height: 1;
+
+	@mixin where-light {
+		color: var(--color-gray-7);
+	}
+
+	@mixin where-dark {
+		color: var(--color-dark-2);
+	}
+}
 </style>

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

@@ -69,50 +69,50 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:is
-		type='button'
+	<Box
+		:is
+		type='button'
 		:mod='[
   {
     "with-left-section": !!$slots?.leftSection || !!icon,
     "with-right-section": !!$slots?.rightSection
   },
   mod
-]'
-		:style='style.root'
-		:class='[css.root, classes?.root]'
-		:disabled='loading'
-	>
-		<Transition name='fade-down'>
-			<Loader v-show='loading' :class='css.loader' :color :size />
-		</Transition>
-
-		<span :class='[css.inner, classes?.inner]'>
-			<span
-				v-if='$slots.leftSection || icon'
-				:class='[css.section, classes?.section]'
-				data-position='left'
-				v-bind='leftSectionProps'
-				:style='style.leftSection'
-			>
-				<slot name='leftSection'>
-					<Icon v-if='icon' :name='icon' />
-				</slot>
-			</span>
-
-			<span :class='[css.label, classes?.label]'>
-				<slot />
-			</span>
-
-			<span
-				v-if='$slots.rightSection'
-				data-position='right'
-				:class='[css.section, classes?.section]'
-				v-bind='rightSectionProps'
-				:style='style.rightSection'
-			>
-				<slot name='rightSection' />
-			</span>
-		</span>
-	</Box>
+]'
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='fade-down'>
+			<Loader v-show='loading' :class='css.loader' :color :size />
+		</Transition>
+
+		<span :class='[css.inner, classes?.inner]'>
+			<span
+				v-if='$slots.leftSection || icon'
+				:class='[css.section, classes?.section]'
+				data-position='left'
+				v-bind='leftSectionProps'
+				:style='style.leftSection'
+			>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</span>
+
+			<span :class='[css.label, classes?.label]'>
+				<slot />
+			</span>
+
+			<span
+				v-if='$slots.rightSection'
+				data-position='right'
+				:class='[css.section, classes?.section]'
+				v-bind='rightSectionProps'
+				:style='style.rightSection'
+			>
+				<slot name='rightSection' />
+			</span>
+		</span>
+	</Box>
 </template>

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

@@ -9,30 +9,30 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+:where(.unstyled) {
+	touch-action: manipulation;
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	font-size: var(--font-size-md);
+	color: inherit;
+	text-align: left;
+	text-decoration: none;
+
+	appearance: none;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	@mixin where-rtl {
+		text-align: right;
+	}
+}
 </style>

package/dist/runtime/components/calendar/calendar.vue

@@ -42,86 +42,86 @@ const [calendars, nav] = useCalendarNavigation({
 </script>
 
 <template>
-	<CalendarRoot
-		v-slot='{ config }'
-		v-model:date='date'
-		v-model:select='select'
-		v-bind='props'
-		:class='$style.content'
-		@select='(select) => $emit("select", select)'
-	>
-		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
-			<CalendarHeader
-				:with-prev='ix === 0'
-				:with-next='ix === calendars.length - 1'
-				:prev-disabled='nav.isPrevDisabled'
-				:next-disabled='nav.isNextDisabled'
+	<CalendarRoot
+		v-slot='{ config }'
+		v-model:date='date'
+		v-model:select='select'
+		v-bind='props'
+		:class='$style.content'
+		@select='(select) => $emit("select", select)'
+	>
+		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
+			<CalendarHeader
+				:with-prev='ix === 0'
+				:with-next='ix === calendars.length - 1'
+				:prev-disabled='nav.isPrevDisabled'
+				:next-disabled='nav.isNextDisabled'
 				@prev='() => {
   nav.move(-1);
   $emit("prev");
-}'
+}'
 				@next='() => {
   nav.move(1);
   $emit("next");
-}'
+}'
 				@level='() => {
   level = nav.nextLevel();
   $emit("level");
-}'
-			>
-				<slot name='level' :config>
-					{{ nav.getLevelLabel(calendar, config) }}
-				</slot>
-			</CalendarHeader>
-
-			<CalendarMonth
-				v-if='level === "month"'
-				:month='calendar'
-				:with-week-numbers='props.withWeekNumbers'
-				:with-cell-spacing='props.withCellSpacing'
-				:size
-			>
-				<template v-if='!!$slots.weekday' #weekday>
-					<slot name='weekday' />
-				</template>
-
-				<slot name='day' />
-			</CalendarMonth>
-			<CalendarYear
-				v-if='level === "year"'
-				:year='calendar'
-				:size
-				:selectable='props.minLevel === "year"'
+}'
+			>
+				<slot name='level' :config>
+					{{ nav.getLevelLabel(calendar, config) }}
+				</slot>
+			</CalendarHeader>
+
+			<CalendarMonth
+				v-if='level === "month"'
+				:month='calendar'
+				:with-week-numbers='props.withWeekNumbers'
+				:with-cell-spacing='props.withCellSpacing'
+				:size
+			>
+				<template v-if='!!$slots.weekday' #weekday>
+					<slot name='weekday' />
+				</template>
+
+				<slot name='day' />
+			</CalendarMonth>
+			<CalendarYear
+				v-if='level === "year"'
+				:year='calendar'
+				:size
+				:selectable='props.minLevel === "year"'
 				@select='(month) => {
   if (props.minLevel !== "year") {
     level = nav.prevLevel();
     date = month;
   }
-}'
-			/>
-			<CalendarDecade
-				v-if='level === "decade"'
-				:date='calendar'
-				:size
-				:selectable='props.minLevel === "decade"'
+}'
+			/>
+			<CalendarDecade
+				v-if='level === "decade"'
+				:date='calendar'
+				:size
+				:selectable='props.minLevel === "decade"'
 				@select='(year) => {
   if (props.minLevel !== "decade") {
     level = nav.prevLevel();
     date = year;
   }
-}'
-			/>
-		</section>
-	</CalendarRoot>
+}'
+			/>
+		</section>
+	</CalendarRoot>
 </template>
 
 <style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+.content {
+	--calendar-cell-spacing: rem(1px);
+
+	display: flex;
+	gap: var(--spacing-sm);
+
+	width: fit-content;
+}
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-header.vue

@@ -26,102 +26,102 @@ defineEmits(["prev", "level", "next"]);
 </script>
 
 <template>
-	<Box :is v-bind='props' :class='$style.header'>
-		<UnstyledButton
-			v-if='withPrev'
-			aria-label='Previous page'
-			:disabled='prevDisabled?.()'
-			:class='$style.control'
-			@click='$emit("prev")'
-		>
-			<Icon :name='prevIcon' :class='$style.icon' />
-		</UnstyledButton>
-
-		<UnstyledButton
-			:disabled
-			:class='$style.level'
-			@click='$emit("level")'
-		>
-			<slot />
-		</UnstyledButton>
-
-		<UnstyledButton
-			v-if='withNext'
-			aria-label='Next page'
-			:disabled='nextDisabled?.()'
-			:class='$style.control'
-			@click='$emit("next")'
-		>
-			<Icon :name='nextIcon' :class='$style.icon' />
-		</UnstyledButton>
-	</Box>
+	<Box :is v-bind='props' :class='$style.header'>
+		<UnstyledButton
+			v-if='withPrev'
+			aria-label='Previous page'
+			:disabled='prevDisabled?.()'
+			:class='$style.control'
+			@click='$emit("prev")'
+		>
+			<Icon :name='prevIcon' :class='$style.icon' />
+		</UnstyledButton>
+
+		<UnstyledButton
+			:disabled
+			:class='$style.level'
+			@click='$emit("level")'
+		>
+			<slot />
+		</UnstyledButton>
+
+		<UnstyledButton
+			v-if='withNext'
+			aria-label='Next page'
+			:disabled='nextDisabled?.()'
+			:class='$style.control'
+			@click='$emit("next")'
+		>
+			<Icon :name='nextIcon' :class='$style.icon' />
+		</UnstyledButton>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.header {
-	--dch-control-size-xs: rem(30px);
-	--dch-control-size-sm: rem(36px);
-	--dch-control-size-md: rem(42px);
-	--dch-control-size-lg: rem(48px);
-	--dch-control-size-xl: rem(54px);
-	--dch-control-size: var(--dch-control-size-sm);
-
-	--dch-control-radius: var(--radius-default);
-
-	display: flex;
-}
-
-.level,
-.control {
-	cursor: pointer;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
-
-	opacity: 1;
-
-	&:where([data-static]) {
-		cursor: default;
-	}
-
-	&:hover {
-		&:where(:not([data-static], :disabled)) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		opacity: 0.2;
-	}
-}
-
-.level {
-	flex: 1;
-
-	font-size: var(--dch-fz, var(--font-size-sm));
-	font-weight: 500;
-	text-transform: capitalize;
-}
-
-.control {
-	width: var(--dch-control-size);
-}
-
-.icon {
-	width: 60%;
-	height: 60%;
-}
+.header {
+	--dch-control-size-xs: rem(30px);
+	--dch-control-size-sm: rem(36px);
+	--dch-control-size-md: rem(42px);
+	--dch-control-size-lg: rem(48px);
+	--dch-control-size-xl: rem(54px);
+	--dch-control-size: var(--dch-control-size-sm);
+
+	--dch-control-radius: var(--radius-default);
+
+	display: flex;
+}
+
+.level,
+.control {
+	cursor: pointer;
+	user-select: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: var(--dch-control-size);
+	border-radius: var(--dch-control-radius);
+
+	opacity: 1;
+
+	&:where([data-static]) {
+		cursor: default;
+	}
+
+	&:hover {
+		&:where(:not([data-static], :disabled)) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		opacity: 0.2;
+	}
+}
+
+.level {
+	flex: 1;
+
+	font-size: var(--dch-fz, var(--font-size-sm));
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.control {
+	width: var(--dch-control-size);
+}
+
+.icon {
+	width: 60%;
+	height: 60%;
+}
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-root.vue

@@ -73,7 +73,7 @@ useCalendarSelection({
 </script>
 
 <template>
-	<Box>
-		<slot :config />
-	</Box>
+	<Box>
+		<slot :config />
+	</Box>
 </template>