nuance-ui 0.2.8 → 0.2.9

package/dist/runtime/components/checkbox/checkbox-indicator.vue

@@ -39,124 +39,124 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='$style.indicator' :mod='{ checked }'>
-		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
-			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
-			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
-		</slot>
-	</Box>
+	<Box :style :class='$style.indicator' :mod='{ checked }'>
+		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
+			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
+			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
+		</slot>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.indicator {
-	--checkbox-size-xs: rem(16px);
-	--checkbox-size-sm: rem(20px);
-	--checkbox-size-md: rem(24px);
-	--checkbox-size-lg: rem(30px);
-	--checkbox-size-xl: rem(36px);
-
-	--checkbox-size: var(--checkbox-size-sm);
-	--checkbox-color: var(--color-primary-filled);
-	--checkbox-icon-color: var(--color-white);
-
-	--checkbox-radius: var(--radius-default);
-
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--checkbox-size);
-	min-width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	min-height: var(--checkbox-size);
-
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius);
-
-	transition: border-color 100ms ease,
-		background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&[data-indeterminate],
-	&[data-checked] {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-icon-color);
-
-			opacity: 1;
-		}
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&[data-checked]>.icon {
-			@mixin light {
-				color: var(--color-gray-5);
-			}
-
-			@mixin dark {
-				color: var(--color-dark-3);
-			}
-		}
-	}
-
-	@mixin where-light {
-		border-color: var(--color-gray-4);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.indicator[data-variant='outline'] {
-
-	&[data-indeterminate]:not([data-disabled]),
-	&[data-checked]:not([data-disabled]) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	transform: translateY(.25rem) scale(0.5);
-
-	display: block;
-
-	width: 80%;
-
-	color: transparent;
-
-	opacity: 1;
-
-	transition: transform 100ms ease,
-		opacity 100ms ease;
-}
+.indicator {
+	--checkbox-size-xs: rem(16px);
+	--checkbox-size-sm: rem(20px);
+	--checkbox-size-md: rem(24px);
+	--checkbox-size-lg: rem(30px);
+	--checkbox-size-xl: rem(36px);
+
+	--checkbox-size: var(--checkbox-size-sm);
+	--checkbox-color: var(--color-primary-filled);
+	--checkbox-icon-color: var(--color-white);
+
+	--checkbox-radius: var(--radius-default);
+
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--checkbox-size);
+	min-width: var(--checkbox-size);
+	height: var(--checkbox-size);
+	min-height: var(--checkbox-size);
+
+	border: 1px solid transparent;
+	border-radius: var(--checkbox-radius);
+
+	transition: border-color 100ms ease,
+		background-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&[data-indeterminate],
+	&[data-checked] {
+		border-color: var(--checkbox-color);
+
+		background-color: var(--checkbox-color);
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-icon-color);
+
+			opacity: 1;
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		border-color: var(--color-disabled-border);
+
+		background-color: var(--color-disabled);
+
+		&[data-checked]>.icon {
+			@mixin light {
+				color: var(--color-gray-5);
+			}
+
+			@mixin dark {
+				color: var(--color-dark-3);
+			}
+		}
+	}
+
+	@mixin where-light {
+		border-color: var(--color-gray-4);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.indicator[data-variant='outline'] {
+
+	&[data-indeterminate]:not([data-disabled]),
+	&[data-checked]:not([data-disabled]) {
+		border-color: var(--checkbox-color);
+
+		background-color: transparent;
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-color);
+
+			opacity: 1;
+		}
+	}
+}
+
+.icon {
+	pointer-events: none;
+
+	transform: translateY(.25rem) scale(0.5);
+
+	display: block;
+
+	width: 80%;
+
+	color: transparent;
+
+	opacity: 1;
+
+	transition: transform 100ms ease,
+		opacity 100ms ease;
+}
 </style>

package/dist/runtime/components/checkbox/checkbox.vue

@@ -69,146 +69,146 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
-		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
-			<input
-				:id
-				v-model='checked'
-				type='checkbox'
-				:class='$style.input'
-				:disabled
-			>
-
-			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
-				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
-				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
-			</slot>
-		</Box>
-	</InputInline>
+	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
+		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
+			<input
+				:id
+				v-model='checked'
+				type='checkbox'
+				:class='$style.input'
+				:disabled
+			>
+
+			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
+				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
+				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
+			</slot>
+		</Box>
+	</InputInline>
 </template>
 
 <style module lang="postcss">
-.root {
-	--checkbox-size-xs: rem(16px);
-	--checkbox-size-sm: rem(20px);
-	--checkbox-size-md: rem(24px);
-	--checkbox-size-lg: rem(30px);
-	--checkbox-size-xl: rem(36px);
-
-	--checkbox-size: var(--checkbox-size-sm);
-	--checkbox-color: var(--color-primary-filled);
-	--checkbox-icon-color: var(--color-white);
-}
-
-.inner {
-	position: relative;
-
-	order: 1;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-
-	&:where([data-label-position='right']) {
-		order: 2;
-	}
-}
-
-.input {
-	cursor: pointer;
-
-	display: block;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	margin: 0;
-	padding: 0;
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius, var(--radius-default));
-
-	appearance: none;
-
-	transition: border-color 100ms ease,
-		background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-error]) {
-		border-color: var(--color-error);
-	}
-
-	&[data-indeterminate],
-	&:checked {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		&+.icon {
-			transform: none;
-
-			opacity: 1;
-		}
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&+.icon {
-			color: var(--color-disabled);
-		}
-	}
-
-	@mixin where-light {
-		border-color: var(--color-gray-4);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.input[data-variant='outline'] {
-	&+.icon {
-		color: var(--checkbox-color);
-	}
-
-	&[data-indeterminate]:not(:disabled),
-	&:checked:not(:disabled) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		&+.icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	position: absolute;
-	inset: 0;
-	transform: translateY(.25rem) scale(0.5);
-
-	width: 80%;
-	margin: auto;
-
-	color: var(--checkbox-icon-color);
-
-	opacity: 0;
-
-	transition: transform 100ms ease,
-		opacity 100ms ease;
-}
+.root {
+	--checkbox-size-xs: rem(16px);
+	--checkbox-size-sm: rem(20px);
+	--checkbox-size-md: rem(24px);
+	--checkbox-size-lg: rem(30px);
+	--checkbox-size-xl: rem(36px);
+
+	--checkbox-size: var(--checkbox-size-sm);
+	--checkbox-color: var(--color-primary-filled);
+	--checkbox-icon-color: var(--color-white);
+}
+
+.inner {
+	position: relative;
+
+	order: 1;
+
+	width: var(--checkbox-size);
+	height: var(--checkbox-size);
+
+	&:where([data-label-position='right']) {
+		order: 2;
+	}
+}
+
+.input {
+	cursor: pointer;
+
+	display: block;
+
+	width: var(--checkbox-size);
+	height: var(--checkbox-size);
+	margin: 0;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: var(--checkbox-radius, var(--radius-default));
+
+	appearance: none;
+
+	transition: border-color 100ms ease,
+		background-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-error]) {
+		border-color: var(--color-error);
+	}
+
+	&[data-indeterminate],
+	&:checked {
+		border-color: var(--checkbox-color);
+
+		background-color: var(--checkbox-color);
+
+		&+.icon {
+			transform: none;
+
+			opacity: 1;
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+
+		border-color: var(--color-disabled-border);
+
+		background-color: var(--color-disabled);
+
+		&+.icon {
+			color: var(--color-disabled);
+		}
+	}
+
+	@mixin where-light {
+		border-color: var(--color-gray-4);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.input[data-variant='outline'] {
+	&+.icon {
+		color: var(--checkbox-color);
+	}
+
+	&[data-indeterminate]:not(:disabled),
+	&:checked:not(:disabled) {
+		border-color: var(--checkbox-color);
+
+		background-color: transparent;
+
+		&+.icon {
+			transform: none;
+
+			color: var(--checkbox-color);
+
+			opacity: 1;
+		}
+	}
+}
+
+.icon {
+	pointer-events: none;
+
+	position: absolute;
+	inset: 0;
+	transform: translateY(.25rem) scale(0.5);
+
+	width: 80%;
+	margin: auto;
+
+	color: var(--checkbox-icon-color);
+
+	opacity: 0;
+
+	transition: transform 100ms ease,
+		opacity 100ms ease;
+}
 </style>

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

@@ -15,6 +15,6 @@ useProvideChipGroupState({ multiple, value, disabled });
 </script>
 
 <template>
-	<slot />
-	<VisuallyHiddenInput v-model='value' :name />
+	<slot />
+	<VisuallyHiddenInput v-model='value' :name />
 </template>