nuance-ui 0.2.2 → 0.2.5

package/dist/runtime/components/app-shell/app-shell-header.vue

@@ -7,37 +7,37 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='header' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='header' :mod :class='$style.root'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	inset-inline: 0;
-	transform: var(--app-shell-header-transform);
-
-	display: flex;
-
-	height: var(--app-shell-header-height);
-	padding-block: var(--app-shell-element-padding);
-	padding-inline: 1rem;
-
-	background-color: var(--color-header);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, left, right;
-
-	:where([data-with-border]) > & {
-		border-bottom: 1px solid var(--app-shell-border-color);
-	}
-
-	:where([data-layout='alt']) > & {
-		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-	}
-}
+.root {
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	inset-inline: 0;
+	transform: var(--app-shell-header-transform);
+
+	display: flex;
+
+	height: var(--app-shell-header-height);
+	padding-block: var(--app-shell-element-padding);
+	padding-inline: 1rem;
+
+	background-color: var(--color-header);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, left, right;
+
+	:where([data-with-border]) > & {
+		border-bottom: 1px solid var(--app-shell-border-color);
+	}
+
+	:where([data-layout='alt']) > & {
+		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+	}
+}
 </style>

package/dist/runtime/components/app-shell/app-shell-navbar.vue

@@ -7,41 +7,41 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='nav' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='nav' :mod :class='$style.root'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	position: fixed;
-
-	z-index: 1;
-	top: var(--app-shell-header-offset, 0rem);
-	inset-inline-start: 0;
-	transform: var(--app-shell-navbar-transform);
-
-	display: flex;
-	flex-direction: column;
-
-	width: var(--app-shell-navbar-width);
-	height: calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem));
-	padding-block: var(--app-shell-element-padding);
-
-	background-color: var(--color-aside);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, top, height;
-
-	:where([data-layout='alt']) > & {
-		top: 0;
-
-		height: 100dvh;
-	}
-
-	:where([data-with-border]) > & {
-		border-inline-end: 1px solid var(--app-shell-border-color);
-	}
-}
+.root {
+	position: fixed;
+
+	z-index: 1;
+	top: var(--app-shell-header-offset, 0rem);
+	inset-inline-start: 0;
+	transform: var(--app-shell-navbar-transform);
+
+	display: flex;
+	flex-direction: column;
+
+	width: var(--app-shell-navbar-width);
+	height: calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem));
+	padding-block: var(--app-shell-element-padding);
+
+	background-color: var(--color-aside);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, top, height;
+
+	:where([data-layout='alt']) > & {
+		top: 0;
+
+		height: 100dvh;
+	}
+
+	:where([data-with-border]) > & {
+		border-inline-end: 1px solid var(--app-shell-border-color);
+	}
+}
 </style>

package/dist/runtime/components/app-shell/app-shell-section.vue

@@ -8,17 +8,17 @@ const { is = "section", mod, grow } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.root' :mod='[mod, { grow }]'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.root' :mod='[mod, { grow }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	flex-grow: 0;
-
-	&:where([data-grow]) {
-		flex-grow: 1;
-	}
-}
+.root {
+	flex-grow: 0;
+
+	&:where([data-grow]) {
+		flex-grow: 1;
+	}
+}
 </style>

package/dist/runtime/components/app-shell/app-shell.vue

@@ -35,41 +35,41 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { layout, "with-border": withBorder }]'>
-		<slot />
-	</Box>
+	<Box :is :style :class='$style.root' :mod='[mod, { layout, "with-border": withBorder }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--app-shell-padding: var(--spacing-sm);
-	--app-shell-element-padding: .25rem;
-
-	--app-shell-transition-duration: 200ms;
-	--app-shell-transition-timing-function: ease;
-
-	--app-shell-navbar-width: rem(56px);
-	--app-shell-navbar-offset: var(--app-shell-navbar-width);
-	--app-shell-navbar-transform: none;
-
-	--app-shell-aside-width: rem(56px);
-	--app-shell-aside-offset: var(--app-shell-aside-width);
-	--app-shell-aside-transform: none;
-
-	--app-shell-header-height: rem(56px);
-	--app-shell-header-offset: var(--app-shell-header-height);
-	--app-shell-header-transform: none;
-
-	--app-shell-footer-height: rem(100px);
-	--app-shell-footer-offset: var(--app-shell-footer-height);
-	--app-shell-footer-transform: none;
-
-	@mixin light {
-		--app-shell-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--app-shell-border-color: var(--color-slate-8);
-	}
-}
+.root {
+	--app-shell-padding: var(--spacing-sm);
+	--app-shell-element-padding: .25rem;
+
+	--app-shell-transition-duration: 200ms;
+	--app-shell-transition-timing-function: ease;
+
+	--app-shell-navbar-width: rem(56px);
+	--app-shell-navbar-offset: var(--app-shell-navbar-width);
+	--app-shell-navbar-transform: none;
+
+	--app-shell-aside-width: rem(56px);
+	--app-shell-aside-offset: var(--app-shell-aside-width);
+	--app-shell-aside-transform: none;
+
+	--app-shell-header-height: rem(56px);
+	--app-shell-header-offset: var(--app-shell-header-height);
+	--app-shell-header-transform: none;
+
+	--app-shell-footer-height: rem(100px);
+	--app-shell-footer-offset: var(--app-shell-footer-height);
+	--app-shell-footer-transform: none;
+
+	@mixin light {
+		--app-shell-border-color: var(--color-gray-3);
+	}
+
+	@mixin dark {
+		--app-shell-border-color: var(--color-slate-8);
+	}
+}
 </style>

package/dist/runtime/components/avatar/avatar-group.vue

@@ -16,7 +16,7 @@ useProvideAvatarGroup();
 </script>
 
 <template>
-	<Box :is :style :mod :class='css.group'>
-		<slot />
-	</Box>
+	<Box :is :style :mod :class='css.group'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/avatar/avatar.vue

@@ -54,18 +54,18 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
-		<span v-if='!src' :class='css.placeholder' :title='alt'>
-			<slot>
-				<Icon v-if='!src && !name' :name='placeholder' />
-				{{ initials }}
-			</slot>
-		</span>
-		<NuxtImg
-			v-else
-			:src
-			:alt
-			:class='css.image'
-		/>
-	</Box>
+	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
+		<span v-if='!src' :class='css.placeholder' :title='alt'>
+			<slot>
+				<Icon v-if='!src && !name' :name='placeholder' />
+				{{ initials }}
+			</slot>
+		</span>
+		<NuxtImg
+			v-else
+			:src
+			:alt
+			:class='css.image'
+		/>
+	</Box>
 </template>

package/dist/runtime/components/background-image.vue

@@ -15,25 +15,25 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='$style.root' v-bind='rest' />
+	<Box :style :class='$style.root' v-bind='rest' />
 </template>
 
 <style module lang="postcss">
-.root {
-	--bi-radius: 0rem;
-
-	position: absolute;
-	inset: 0;
-
-	display: block;
-
-	width: 100%;
-	border: 0;
-	border-radius: var(--bi-radius, 0);
-
-	text-decoration: none;
-
-	background-position: center;
-	background-size: cover;
-}
+.root {
+	--bi-radius: 0rem;
+
+	position: absolute;
+	inset: 0;
+
+	display: block;
+
+	width: 100%;
+	border: 0;
+	border-radius: var(--bi-radius, 0);
+
+	text-decoration: none;
+
+	background-position: center;
+	background-size: cover;
+}
 </style>

package/dist/runtime/components/badge.vue

@@ -43,9 +43,9 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:style
-		:class='$style.root'
+	<Box
+		:style
+		:class='$style.root'
 		:mod='[
   {
     "block": fullWidth,
@@ -55,164 +55,163 @@ const style = computed(() => useStyleResolver((theme) => {
     "with-right-section": !!$slots.rightSection
   },
   mod
-]'
-	>
-		<span v-if='variant === "dot"' :class='$style.dot' />
-
-		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
-			<slot name='leftSection'>
-				<Icon v-if='!!icon' :name='icon' />
-			</slot>
-		</span>
-
-		<span :class='$style.label'>
-			<slot />
-		</span>
-
-		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</Box>
+]'
+	>
+		<span v-if='variant === "dot"' :class='$style.dot' />
+
+		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
+			<slot name='leftSection'>
+				<Icon v-if='!!icon' :name='icon' />
+			</slot>
+		</span>
+
+		<span :class='$style.label'>
+			<slot />
+		</span>
+
+		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--badge-height-xs: rem(16px);
-	--badge-height-sm: rem(18px);
-	--badge-height-md: rem(20px);
-	--badge-height-lg: rem(26px);
-	--badge-height-xl: rem(32px);
-
-	--badge-fz-xs: rem(8px);
-	--badge-fz-sm: rem(10px);
-	--badge-fz-md: rem(12px);
-	--badge-fz-lg: rem(14px);
-	--badge-fz-xl: rem(16px);
-
-	--badge-padding-x-xs: rem(6px);
-	--badge-padding-x-sm: rem(8px);
-	--badge-padding-x-md: rem(10px);
-	--badge-padding-x-lg: rem(12px);
-	--badge-padding-x-xl: rem(16px);
-
-	--badge-height: var(--badge-height-md);
-	--badge-fz: var(--badge-fz-md);
-	--badge-padding-x: var(--badge-padding-x-md);
-	--badge-radius: 100%;
-	--badge-lh: calc(var(--badge-height) - rem(2px));
-	--badge-color: var(--color-white);
-	--badge-bg: var(--color-primary-filled);
-	--badge-border-width: 1px;
-	--badge-bd: var(--badge-border-width) solid transparent;
-
-	cursor: default;
-
-	overflow: hidden;
-	display: inline-grid;
-	align-items: center;
-	justify-content: center;
-
-	width: fit-content;
-	height: var(--badge-height);
-	padding: 0 var(--badge-padding-x);
-	border: var(--badge-bd);
-	border-radius: var(--badge-radius);
-
-	font-size: var(--badge-fz);
-	font-weight: 700;
-	line-height: var(--badge-lh);
-	color: var(--badge-color);
-	text-decoration: none;
-	text-overflow: ellipsis;
-	text-transform: uppercase;
-	letter-spacing: 0.25px;
-
-	background: var(--badge-bg);
-
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-left-section], [data-variant='dot']) {
-		grid-template-columns: auto 1fr;
-
-		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-right-section]) {
-		grid-template-columns: 1fr auto;
-
-		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-left-section][data-with-right-section],
-		[data-variant='dot'][data-with-right-section]) {
-		grid-template-columns: auto 1fr auto;
-
-		padding: 0 calc(var(--spacing-xs) / 2);
-	}
-
-	&:where([data-block]) {
-		display: flex;
-
-		width: 100%;
-	}
-
-	&:where([data-circle]) {
-		display: flex;
-
-		width: var(--badge-height);
-		padding-inline: 2px;
-	}
-
-	&:where([data-variant='dot']) {
-		@mixin where-light {
-			--badge-color: var(--color-black);
-		}
-
-		@mixin where-dark {
-			--badge-color: var(--color-white);
-		}
-	}
-}
-
-.dot {
-	--badge-dot-size: calc(var(--badge-height) / 2);
-
-	display: block;
-
-	width: var(--badge-dot-size);
-	height: var(--badge-dot-size);
-	margin-inline-end: calc(var(--badge-dot-size) / 2);
-	border-radius: var(--badge-dot-size);
-
-	background-color: var(--badge-dot-color, var(--badge-color));
-}
-
-
-.label {
-	cursor: inherit;
-
-	overflow: hidden;
-
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.section {
-	--badge-section-margin: calc(var(--spacing-xs) / 2);
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
-
-	&:where([data-position='left']) {
-		margin-inline-end: var(--badge-section-margin);
-	}
-
-	&:where([data-position='right']) {
-		margin-inline-start: var(--badge-section-margin);
-	}
-}
+.root {
+	--badge-height-xs: rem(16px);
+	--badge-height-sm: rem(18px);
+	--badge-height-md: rem(20px);
+	--badge-height-lg: rem(26px);
+	--badge-height-xl: rem(32px);
+
+	--badge-fz-xs: rem(8px);
+	--badge-fz-sm: rem(10px);
+	--badge-fz-md: rem(12px);
+	--badge-fz-lg: rem(14px);
+	--badge-fz-xl: rem(16px);
+
+	--badge-padding-x-xs: rem(6px);
+	--badge-padding-x-sm: rem(8px);
+	--badge-padding-x-md: rem(10px);
+	--badge-padding-x-lg: rem(12px);
+	--badge-padding-x-xl: rem(16px);
+
+	--badge-height: var(--badge-height-md);
+	--badge-fz: var(--badge-fz-md);
+	--badge-padding-x: var(--badge-padding-x-md);
+	--badge-radius: 100%;
+	--badge-lh: calc(var(--badge-height) - rem(2px));
+	--badge-color: var(--color-white);
+	--badge-bg: var(--color-primary-filled);
+	--badge-border-width: 1px;
+	--badge-bd: var(--badge-border-width) solid transparent;
+
+	cursor: default;
+
+	overflow: hidden;
+	display: inline-grid;
+	align-items: center;
+	justify-content: center;
+
+	width: fit-content;
+	height: var(--badge-height);
+	padding: 0 var(--badge-padding-x);
+	border: var(--badge-bd);
+	border-radius: var(--badge-radius);
+
+	font-size: var(--badge-fz);
+	font-weight: 700;
+	line-height: var(--badge-lh);
+	color: var(--badge-color);
+	text-decoration: none;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	letter-spacing: 0.25px;
+
+	background: var(--badge-bg);
+
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-left-section], [data-variant='dot']) {
+		grid-template-columns: auto 1fr;
+
+		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-right-section]) {
+		grid-template-columns: 1fr auto;
+
+		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-left-section][data-with-right-section],
+		[data-variant='dot'][data-with-right-section]) {
+		grid-template-columns: auto 1fr auto;
+
+		padding: 0 calc(var(--spacing-xs) / 2);
+	}
+
+	&:where([data-block]) {
+		display: flex;
+
+		width: 100%;
+	}
+
+	&:where([data-circle]) {
+		display: flex;
+
+		width: var(--badge-height);
+		padding-inline: 2px;
+	}
+
+	&:where([data-variant='dot']) {
+		@mixin where-light {
+			--badge-color: var(--color-black);
+		}
+
+		@mixin where-dark {
+			--badge-color: var(--color-white);
+		}
+	}
+}
+
+.dot {
+	--badge-dot-size: calc(var(--badge-height) / 2);
+
+	display: block;
+
+	width: var(--badge-dot-size);
+	height: var(--badge-dot-size);
+	margin-inline-end: calc(var(--badge-dot-size) / 2);
+	border-radius: var(--badge-dot-size);
+
+	background-color: var(--badge-dot-color, var(--badge-color));
+}
+
+.label {
+	cursor: inherit;
+
+	overflow: hidden;
+
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.section {
+	--badge-section-margin: calc(var(--spacing-xs) / 2);
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
+
+	&:where([data-position='left']) {
+		margin-inline-end: var(--badge-section-margin);
+	}
+
+	&:where([data-position='right']) {
+		margin-inline-start: var(--badge-section-margin);
+	}
+}
 </style>