nuance-ui 0.1.62 → 0.2.1

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

@@ -56,8 +56,8 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='[$style.root, $attrs?.style]'>
-		<input
+	<Box :style :class='[$style.root, $attrs?.style]'>
+		<input
 			v-bind='{
   ...$attrs,
   class: $style.input,
@@ -66,205 +66,205 @@ const style = computed(() => useStyleResolver((theme) => {
   type,
   disabled,
   id
-}'
-			@click='onUpdate()'
-		>
-		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
-			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
-				<Icon :name='icon' :class='$style.icon' />
-			</span>
-
-			<span><slot /></span>
-		</Box>
-	</Box>
+}'
+			@click='onUpdate()'
+		>
+		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
+			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
+				<Icon :name='icon' :class='$style.icon' />
+			</span>
+
+			<span><slot /></span>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--chip-size-xs: rem(23px);
-	--chip-size-sm: rem(28px);
-	--chip-size-md: rem(32px);
-	--chip-size-lg: rem(36px);
-	--chip-size-xl: rem(40px);
-
-	--chip-icon-size-xs: rem(12px);
-	--chip-icon-size-sm: rem(14px);
-	--chip-icon-size-md: rem(16px);
-	--chip-icon-size-lg: rem(18px);
-	--chip-icon-size-xl: rem(20px);
-
-	--chip-padding-xs: rem(16px);
-	--chip-padding-sm: rem(20px);
-	--chip-padding-md: rem(24px);
-	--chip-padding-lg: rem(28px);
-	--chip-padding-xl: rem(32px);
-
-	--chip-checked-padding-xs: rem(7.5px);
-	--chip-checked-padding-sm: rem(10px);
-	--chip-checked-padding-md: rem(11.7px);
-	--chip-checked-padding-lg: rem(13.5px);
-	--chip-checked-padding-xl: rem(15.7px);
-
-	--chip-spacing-xs: rem(10px);
-	--chip-spacing-sm: rem(12px);
-	--chip-spacing-md: rem(16px);
-	--chip-spacing-lg: rem(20px);
-	--chip-spacing-xl: rem(22px);
-
-	--chip-size: var(--chip-size-sm);
-	--chip-icon-size: var(--chip-icon-size-sm);
-	--chip-padding: var(--chip-padding-sm);
-	--chip-spacing: var(--chip-spacing-sm);
-	--chip-checked-padding: var(--chip-checked-padding-sm);
-	--chip-bg: var(--color-primary-filled);
-	--chip-hover: var(--color-primary-filled-hover);
-	--chip-color: var(--color-white);
-	--chip-bd: 1px solid transparent;
-
-	--chip-fz: var(--font-size-sm);
-	--chip-radius: var(--radius-xl);
-}
-
-.label {
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-
-	height: var(--chip-size);
-	padding-inline: var(--chip-padding);
-
-	border: 1px solid transparent;
-	border-radius: var(--chip-radius);
-
-	font-size: var(--chip-fz);
-	line-height: calc(var(--chip-size) - rem(2px));
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-}
-
-.iconWrapper {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	height: var(--chip-icon-size);
-}
-
-.icon {
-	display: block;
-
-	width: var(--chip-icon-size);
-	height: var(--chip-icon-size);
-
-	color: var(--chip-icon-color, inherit);
-}
-
-.input {
-	width: 0;
-	height: 0;
-	margin: 0;
-	padding: 0;
-
-	opacity: 0;
-
-	&:focus-visible + .label {
-		outline: 2px solid var(--color-primary-filled);
-		outline-offset: 2px;
-	}
-}
-
-.input:disabled {
-	& + .label {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		background-color: var(--color-disabled);
-	}
-}
-
-.input:not(:disabled) {
-	& + .label[data-variant='outline'] {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-3);
-
-			background-color: var(--color-white);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-
-			background-color: var(--color-dark-6);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
-		border: 1px solid transparent;
-
-		color: var(--color-text);
-
-		@mixin where-light {
-			background-color: var(--color-gray-1);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-5);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-2);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-4);
-			}
-		}
-	}
-}
-
-.input:not(:disabled):checked {
-	& + .label {
-		padding: var(--chip-checked-padding);
-	}
-
-	& + .label[data-variant='outline'] {
-		--chip-icon-color: var(--chip-color);
-
-		border: var(--chip-bd);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
-		--chip-icon-color: var(--chip-color);
-
-		color: var(--chip-color);
-
-		background-color: var(--chip-bg);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-}
+.root {
+	--chip-size-xs: rem(23px);
+	--chip-size-sm: rem(28px);
+	--chip-size-md: rem(32px);
+	--chip-size-lg: rem(36px);
+	--chip-size-xl: rem(40px);
+
+	--chip-icon-size-xs: rem(12px);
+	--chip-icon-size-sm: rem(14px);
+	--chip-icon-size-md: rem(16px);
+	--chip-icon-size-lg: rem(18px);
+	--chip-icon-size-xl: rem(20px);
+
+	--chip-padding-xs: rem(16px);
+	--chip-padding-sm: rem(20px);
+	--chip-padding-md: rem(24px);
+	--chip-padding-lg: rem(28px);
+	--chip-padding-xl: rem(32px);
+
+	--chip-checked-padding-xs: rem(7.5px);
+	--chip-checked-padding-sm: rem(10px);
+	--chip-checked-padding-md: rem(11.7px);
+	--chip-checked-padding-lg: rem(13.5px);
+	--chip-checked-padding-xl: rem(15.7px);
+
+	--chip-spacing-xs: rem(10px);
+	--chip-spacing-sm: rem(12px);
+	--chip-spacing-md: rem(16px);
+	--chip-spacing-lg: rem(20px);
+	--chip-spacing-xl: rem(22px);
+
+	--chip-size: var(--chip-size-sm);
+	--chip-icon-size: var(--chip-icon-size-sm);
+	--chip-padding: var(--chip-padding-sm);
+	--chip-spacing: var(--chip-spacing-sm);
+	--chip-checked-padding: var(--chip-checked-padding-sm);
+	--chip-bg: var(--color-primary-filled);
+	--chip-hover: var(--color-primary-filled-hover);
+	--chip-color: var(--color-white);
+	--chip-bd: 1px solid transparent;
+
+	--chip-fz: var(--font-size-sm);
+	--chip-radius: var(--radius-xl);
+}
+
+.label {
+	cursor: pointer;
+	user-select: none;
+
+	display: inline-flex;
+	align-items: center;
+
+	height: var(--chip-size);
+	padding-inline: var(--chip-padding);
+
+	border: 1px solid transparent;
+	border-radius: var(--chip-radius);
+
+	font-size: var(--chip-fz);
+	line-height: calc(var(--chip-size) - rem(2px));
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.iconWrapper {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+
+	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	height: var(--chip-icon-size);
+}
+
+.icon {
+	display: block;
+
+	width: var(--chip-icon-size);
+	height: var(--chip-icon-size);
+
+	color: var(--chip-icon-color, inherit);
+}
+
+.input {
+	width: 0;
+	height: 0;
+	margin: 0;
+	padding: 0;
+
+	opacity: 0;
+
+	&:focus-visible + .label {
+		outline: 2px solid var(--color-primary-filled);
+		outline-offset: 2px;
+	}
+}
+
+.input:disabled {
+	& + .label {
+		cursor: not-allowed;
+
+		color: var(--color-disabled-text);
+
+		background-color: var(--color-disabled);
+	}
+}
+
+.input:not(:disabled) {
+	& + .label[data-variant='outline'] {
+		@mixin where-light {
+			border: 1px solid var(--color-gray-3);
+
+			background-color: var(--color-white);
+		}
+
+		@mixin where-dark {
+			border: 1px solid var(--color-dark-4);
+
+			background-color: var(--color-dark-6);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	& + .label[data-variant='filled'],
+	& + .label[data-variant='light'] {
+		border: 1px solid transparent;
+
+		color: var(--color-text);
+
+		@mixin where-light {
+			background-color: var(--color-gray-1);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-5);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-2);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-4);
+			}
+		}
+	}
+}
+
+.input:not(:disabled):checked {
+	& + .label {
+		padding: var(--chip-checked-padding);
+	}
+
+	& + .label[data-variant='outline'] {
+		--chip-icon-color: var(--chip-color);
+
+		border: var(--chip-bd);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+
+	& + .label[data-variant='filled'],
+	& + .label[data-variant='light'] {
+		--chip-icon-color: var(--chip-color);
+
+		color: var(--chip-color);
+
+		background-color: var(--chip-bg);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+}
 </style>

package/dist/runtime/components/combobox/combobox-dropdown.vue

@@ -13,21 +13,21 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<PopoverDropdown :class='$style.dropdown'>
-		<Box
-			:id='store.listId'
-			role='presentation'
-			:class='css.dropdown'
-			:style
-			v-bind='$attrs'
-		>
-			<slot />
-		</Box>
-	</PopoverDropdown>
+	<PopoverDropdown :class='$style.dropdown'>
+		<Box
+			:id='store.listId'
+			role='presentation'
+			:class='css.dropdown'
+			:style
+			v-bind='$attrs'
+		>
+			<slot />
+		</Box>
+	</PopoverDropdown>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+.dropdown {
+	padding: 0;
+}
 </style>

package/dist/runtime/components/combobox/combobox-empty.vue

@@ -8,7 +8,7 @@ const { is, mod } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod :class='css.empty'>
-		<slot />
-	</Box>
+	<Box :is :mod :class='css.empty'>
+		<slot />
+	</Box>
 </template>

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

@@ -25,25 +25,25 @@ const value = defineModel("value", { type: [Object, Array, null] });
 </script>
 
 <template>
-	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
-		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</div>
-
-		<ComboboxOption
-			v-for='item in data.items'
-			:key='item.value'
-			:data='item'
-			:icon-position
-			:with-check-icon
-			:check-icon
-			:checked='isValueChecked(value, item)'
-		>
-			<template v-if='$slots.option' #default='props'>
-				<slot name='option' v-bind='props' />
-			</template>
-		</ComboboxOption>
-	</Box>
+	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
+		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</div>
+
+		<ComboboxOption
+			v-for='item in data.items'
+			:key='item.value'
+			:data='item'
+			:icon-position
+			:with-check-icon
+			:check-icon
+			:checked='isValueChecked(value, item)'
+		>
+			<template v-if='$slots.option' #default='props'>
+				<slot name='option' v-bind='props' />
+			</template>
+		</ComboboxOption>
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-option-list.vue

@@ -9,7 +9,7 @@ const { labelledBy, mod } = defineProps({
 </script>
 
 <template>
-	<Box :class='css.options' role='listbox' :aria-labelledby='labelledBy' :mod>
-		<slot />
-	</Box>
+	<Box :class='css.options' role='listbox' :aria-labelledby='labelledBy' :mod>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-option.vue

@@ -38,30 +38,30 @@ const mod = computed(() => [
 </script>
 
 <template>
-	<Box
-		:class='css.option'
-		:mod
-		role='option'
-		:aria-selected='checked'
-		@click='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
-	>
-		<slot
-			:with-check-icon
-			:icon-position
-			:data
-			:checked
-		>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "left"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-			<span>{{ data.label }}</span>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "right"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-		</slot>
-	</Box>
+	<Box
+		:class='css.option'
+		:mod
+		role='option'
+		:aria-selected='checked'
+		@click='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
+	>
+		<slot
+			:with-check-icon
+			:icon-position
+			:data
+			:checked
+		>
+			<Icon
+				v-if='withCheckIcon && iconPosition === "left"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+			<span>{{ data.label }}</span>
+			<Icon
+				v-if='withCheckIcon && iconPosition === "right"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+		</slot>
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-options-dropdown.vue

@@ -41,32 +41,32 @@ const filteredData = computed(() => typeof search.value === "string" ? (filter |
 </script>
 
 <template>
-	<ComboboxDropdown data-composed>
-		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
-			<template
-				v-for='item in filteredData'
-				:key='isOptionsGroup(item) ? item.group : item?.value'
-			>
-				<ComboboxGroup
-					v-if='isOptionsGroup(item)'
-					v-model:value='value'
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-				/>
-				<ComboboxOption
-					v-else
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-					:checked='isValueChecked(value, item)'
-				/>
-			</template>
-			<ComboboxEmpty v-if='isEmpty'>
-				{{ nothingFoundMessage }}
-			</ComboboxEmpty>
-		</ComboboxOptionList>
-	</ComboboxDropdown>
+	<ComboboxDropdown data-composed>
+		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
+			<template
+				v-for='item in filteredData'
+				:key='isOptionsGroup(item) ? item.group : item?.value'
+			>
+				<ComboboxGroup
+					v-if='isOptionsGroup(item)'
+					v-model:value='value'
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+				/>
+				<ComboboxOption
+					v-else
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+					:checked='isValueChecked(value, item)'
+				/>
+			</template>
+			<ComboboxEmpty v-if='isEmpty'>
+				{{ nothingFoundMessage }}
+			</ComboboxEmpty>
+		</ComboboxOptionList>
+	</ComboboxDropdown>
 </template>

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

@@ -53,7 +53,7 @@ useProvideComboboxState({
 </script>
 
 <template>
-	<Popover v-bind='rest' v-model:open='opened'>
-		<slot />
-	</Popover>
+	<Popover v-bind='rest' v-model:open='opened'>
+		<slot />
+	</Popover>
 </template>

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

@@ -26,7 +26,7 @@ const { store: { targetRef } } = useComboboxState();
 </script>
 
 <template>
-	<PopoverTarget ref='targetRef' v-bind='aria' disabled>
-		<slot />
-	</PopoverTarget>
+	<PopoverTarget ref='targetRef' v-bind='aria' disabled>
+		<slot />
+	</PopoverTarget>
 </template>