nuance-ui 0.2.7 → 0.2.9

package/dist/runtime/components/transition.d.vue.ts

@@ -1,9 +1,19 @@
 export type TransitionName = 'fade' | 'fade-down' | 'fade-up' | 'fade-left' | 'fade-right' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
 export interface TransitionProps {
+    /**
+     * Transition animation name
+     * @default `'pop-bottom-left'`
+     */
     name?: TransitionName;
-    /** Transition duration in ms, `250` default */
+    /**
+     * Transition duration in ms
+     * @default `250`
+     */
     duration?: number;
-    /** Transition dilay in ms, `0` default */
+    /**
+     * Transition delay in ms
+     * @default `0`
+     */
     delay?: number;
 }
 declare var __VLS_9: {};

package/dist/runtime/components/transition.vue

@@ -17,9 +17,9 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
-		<slot />
-	</Transition>
+	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
+		<slot />
+	</Transition>
 </template>
 
 <style module>

package/dist/runtime/components/transition.vue.d.ts

@@ -1,9 +1,19 @@
 export type TransitionName = 'fade' | 'fade-down' | 'fade-up' | 'fade-left' | 'fade-right' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
 export interface TransitionProps {
+    /**
+     * Transition animation name
+     * @default `'pop-bottom-left'`
+     */
     name?: TransitionName;
-    /** Transition duration in ms, `250` default */
+    /**
+     * Transition duration in ms
+     * @default `250`
+     */
     duration?: number;
-    /** Transition dilay in ms, `0` default */
+    /**
+     * Transition delay in ms
+     * @default `0`
+     */
     delay?: number;
 }
 declare var __VLS_9: {};

package/dist/runtime/components/tree/_ui/tree-item.d.vue.ts

@@ -1,5 +1,6 @@
 import type { TreeItem } from '../types.js';
 export interface TreeItemProps extends TreeItem {
+    /** Nesting depth, starting at 1 for root items */
     level: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<TreeItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -51,136 +51,135 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 </script>
 
 <template>
-	<li :class='$style.item' role='presentation'>
-		<RovingFocusItem>
-			<Button
-				:size='ctx.size'
-				:color='ctx.color'
-				:variant='ctx.variant'
-				:disabled
-				role='treeitem'
-				:classes='$style'
-				:aria-level='level'
-				:aria-selected='selected'
-				:mod='{ active, selected, "tree-item": path }'
-				right-section-p-e='all'
-				@click.prevent='handleClick'
-				@keydown.prevent='handleKeyDown'
-			>
-				<template #leftSection>
-					<template v-if='pending'>
-						<Loader :class='$style.icon' />
-					</template>
-
-					<template v-else-if='isFolder'>
-						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-						<Icon v-else :class='$style.icon' :name='icon' />
-					</template>
-
-					<template v-else>
-						<Icon
-							:class='$style.icon'
-							:name='fileIcon'
-							:style='{ color: color && getThemeColor(color, theme) }'
-						/>
-					</template>
-				</template>
-
-				{{ name ?? path }}
-
-				<template v-if='isFolder' #rightSection>
-					<ActionIcon
-						icon='gravity-ui:chevron-down'
-						size='sm'
-						:color='ctx.color'
-						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
-						:mod='{ expanded }'
-						variant='subtle'
-						@click.stop='ctx.toggle("expand", path)'
-					/>
-				</template>
-			</Button>
-		</RovingFocusItem>
-
-		<UTransition name='scale-y'>
-			<ul
-				v-if='expanded && data && data.length > 0'
-				:class='$style.list'
-				role='group'
-			>
-				<TreeItem
-					v-for='child in data'
-					:key='child.path'
-					v-bind='child'
-					:path='child.path'
-					:level='level + 1'
-				/>
-			</ul>
-		</UTransition>
-	</li>
+	<li :class='$style.item' role='presentation'>
+		<RovingFocusItem>
+			<Button
+				:size='ctx.size'
+				:color='ctx.color'
+				:variant='ctx.variant'
+				:disabled
+				role='treeitem'
+				:classes='$style'
+				:aria-level='level'
+				:aria-selected='selected'
+				:mod='{ active, selected, "tree-item": path }'
+				right-section-p-e='all'
+				@click.prevent='handleClick'
+				@keydown.prevent='handleKeyDown'
+			>
+				<template #leftSection>
+					<template v-if='pending'>
+						<Loader :class='$style.icon' />
+					</template>
+
+					<template v-else-if='isFolder'>
+						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+						<Icon v-else :class='$style.icon' :name='icon' />
+					</template>
+
+					<template v-else>
+						<Icon
+							:class='$style.icon'
+							:name='fileIcon'
+							:style='{ color: color && getThemeColor(color, theme) }'
+						/>
+					</template>
+				</template>
+
+				{{ name ?? path }}
+
+				<template v-if='isFolder' #rightSection>
+					<ActionIcon
+						icon='gravity-ui:chevron-down'
+						size='sm'
+						:color='ctx.color'
+						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
+						:mod='{ expanded }'
+						variant='subtle'
+						@click.stop='ctx.toggle("expand", path)'
+					/>
+				</template>
+			</Button>
+		</RovingFocusItem>
+
+		<UTransition name='scale-y'>
+			<ul
+				v-if='expanded && data && data.length > 0'
+				:class='$style.list'
+				role='group'
+			>
+				<TreeItem
+					v-for='child in data'
+					:key='child.path'
+					v-bind='child'
+					:path='child.path'
+					:level='level + 1'
+				/>
+			</ul>
+		</UTransition>
+	</li>
 </template>
 
 <style module lang="postcss">
-.item {
-	display: grid;
-	gap: .25rem;
-}
-
-.icon {
-	--loader-size: var(--tree-icon-size);
-
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.chevron {
-	color: var(--color-dimmed);
-
-	transition: transform .3s ease-in-out;
-
-	&:hover {
-		color: var(--color-dimmed);
-
-		background-color: transparent;
-	}
-
-	&[data-expanded] .chevron-icon {
-		transform: rotate(-180deg);
-	}
-}
-
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-}
-
-.root {
-	.inner {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-
-		color: var(--color-text);
-
-		.label {
-			font-weight: 500;
-		}
-	}
-
-	&[data-active],
-	&[data-selected] {
-		.inner {
-			color: var(--button-color);
-		}
-	}
-
-	&[data-selected] {
-		background: alpha(var(--button-color), .1);
-	}
-}
+.item {
+	display: grid;
+	gap: .25rem;
+}
+
+.icon {
+	--loader-size: var(--tree-icon-size);
+
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.chevron {
+	color: var(--color-dimmed);
+
+	transition: transform .3s ease-in-out;
+
+	&:hover {
+		color: var(--color-dimmed);
+
+		background-color: transparent;
+	}
+
+	&[data-expanded] .chevron-icon {
+		transform: rotate(-180deg);
+	}
+}
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+}
+
+.root {
+	.inner {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+
+		color: var(--color-text);
+
+		.label {
+			font-weight: 500;
+		}
+	}
+
+	&[data-active],
+	&[data-selected] {
+		.inner {
+			color: var(--button-color);
+		}
+	}
+
+	&[data-selected] {
+		background: alpha(var(--button-color), .1);
+	}
+}
 </style>

package/dist/runtime/components/tree/_ui/tree-item.vue.d.ts

@@ -1,5 +1,6 @@
 import type { TreeItem } from '../types.js';
 export interface TreeItemProps extends TreeItem {
+    /** Nesting depth, starting at 1 for root items */
     level: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<TreeItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -2,13 +2,21 @@ import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
 export type TreeRootProps = RovingFocusProps & {
+    /** Resolves the icon for a given tree item */
     iconResolver?: TreeIconResolver;
+    /** If set, selected items can be deleted with the Delete key */
     removable?: boolean;
+    /** If set, multiple items can be selected */
     selectable?: boolean;
+    /** Async loader for branch data */
     loadBranch: TreeLoader;
+    /** Filters which items are rendered */
     filter?: TreeFilter;
+    /** Visual variant */
     variant?: ButtonProps['variant'];
+    /** Color from theme */
     color?: ButtonProps['color'];
+    /** Component size */
     size?: ButtonProps['size'];
 };
 type __VLS_Props = TreeRootProps;

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -64,28 +64,28 @@ if (removable) {
 </script>
 
 <template>
-	<RovingFocus :attr :loop :orientation>
-		<Box
-			is='ul'
-			ref='parent'
-			role='tree'
-			:style
-			:class='$style.root'
-			@keydown.esc.prevent='selected = []'
-		>
-			<slot />
-		</Box>
-	</RovingFocus>
+	<RovingFocus :attr :loop :orientation>
+		<Box
+			is='ul'
+			ref='parent'
+			role='tree'
+			:style
+			:class='$style.root'
+			@keydown.esc.prevent='selected = []'
+		>
+			<slot />
+		</Box>
+	</RovingFocus>
 </template>
 
 <style module lang="postcss">
-.root {
-	--tree-icon-size: var(--spacing-md);
-
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-
-	padding-inline-start: 0;
-}
+.root {
+	--tree-icon-size: var(--spacing-md);
+
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+
+	padding-inline-start: 0;
+}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -2,13 +2,21 @@ import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
 export type TreeRootProps = RovingFocusProps & {
+    /** Resolves the icon for a given tree item */
     iconResolver?: TreeIconResolver;
+    /** If set, selected items can be deleted with the Delete key */
     removable?: boolean;
+    /** If set, multiple items can be selected */
     selectable?: boolean;
+    /** Async loader for branch data */
     loadBranch: TreeLoader;
+    /** Filters which items are rendered */
     filter?: TreeFilter;
+    /** Visual variant */
     variant?: ButtonProps['variant'];
+    /** Color from theme */
     color?: ButtonProps['color'];
+    /** Component size */
     size?: ButtonProps['size'];
 };
 type __VLS_Props = TreeRootProps;

package/dist/runtime/components/tree/lib/context.d.ts

@@ -4,22 +4,37 @@ import type { TreeFilter, TreeIconResolver, TreeLoader } from '../types.js';
 type EventType = 'select' | 'expand';
 type SelectMode = 'single' | 'multiple' | 'range';
 export interface TreeContext {
+    /** Ref to the root `<ul>` element */
     root: ShallowRef<HTMLUListElement | null>;
+    /** Path of the active (focused) item */
     active: ModelRef<string | null>;
+    /** Paths of selected items */
     selected: ModelRef<string[]>;
+    /** Paths of expanded directory items */
     expanded: ModelRef<string[]>;
+    /** Resolves the icon for a given tree item */
     iconResolver: TreeIconResolver;
+    /** Async loader for branch data */
     loadBranch: TreeLoader;
+    /** Filters which items are rendered */
     filter?: TreeFilter;
+    /** Whether multiple items can be selected */
     selectable: boolean;
+    /** Visual variant */
     variant: ButtonProps['variant'];
+    /** Color from theme */
     color: ButtonProps['color'];
+    /** Component size */
     size: ButtonProps['size'];
 }
 export interface TreeState extends Omit<TreeContext, 'root'> {
+    /** Toggles selection or expansion state of an item */
     toggle: (type: EventType, path: string, mode?: SelectMode) => void;
+    /** Activates selection or expansion for an item */
     on: ((type: 'expand', path: string) => void) & ((type: 'select', path: string, mode?: SelectMode) => void);
+    /** Deactivates selection or expansion for an item */
     off: (type: EventType, path: string) => void;
+    /** Sets the active (focused) item path */
     setActive: (path: string | null) => void;
 }
 export declare const useProvideTreeState: (args_0: TreeContext) => TreeState;

package/dist/runtime/components/tree/types.d.ts

@@ -1,17 +1,25 @@
 import type { NuanceColor } from '@nui/types';
 import type { Ref } from 'vue';
 export interface TreeModels {
+    /** Path of the active (focused) item */
     active: string | null;
+    /** Flat tree data */
     tree: TreeItem[];
+    /** Paths of selected items */
     selected: string[];
+    /** Paths of expanded directory items */
     expanded: string[];
 }
 export interface TreeEmits {
+    /** Fired when selected items are deleted */
     delete: [path: string[]];
 }
 export interface TreeLoaderResult {
+    /** Loaded branch data */
     data: Ref<TreeItem[] | undefined>;
+    /** Whether the branch is loading */
     pending: Ref<boolean>;
+    /** Triggers data fetching */
     execute: () => Promise<unknown>;
 }
 /**
@@ -49,6 +57,7 @@ export interface TreeItem {
      *  @default `file`
      */
     type?: TreeItemType;
+    /** Nested child items */
     children?: TreeItem[];
 }
 export type TreeIconResolver = (type: TreeItemType, name?: string, path?: string, disabled?: boolean) => {

package/dist/runtime/components/visually-hidden/visually-hidden-input.d.vue.ts

@@ -2,7 +2,9 @@ import type { VisuallyHiddenProps } from './visually-hidden.vue.js';
 export interface VisuallyHiddenInputProps extends VisuallyHiddenProps {
     /** Input name */
     name?: string;
+    /** Marks the input as required */
     required?: boolean;
+    /** Disables the input */
     disabled?: boolean;
 }
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

package/dist/runtime/components/visually-hidden/visually-hidden-input.vue.d.ts

@@ -2,7 +2,9 @@ import type { VisuallyHiddenProps } from './visually-hidden.vue.js';
 export interface VisuallyHiddenInputProps extends VisuallyHiddenProps {
     /** Input name */
     name?: string;
+    /** Marks the input as required */
     required?: boolean;
+    /** Disables the input */
     disabled?: boolean;
 }
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

package/dist/runtime/components/visually-hidden/visually-hidden.d.vue.ts

@@ -1,5 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 export interface VisuallyHiddenProps extends BoxProps {
+    /** Controls accessibility behaviour: `'focusable'` adds `aria-hidden`, `'fully-hidden'` removes from tab order */
     feature?: 'focusable' | 'fully-hidden';
 }
 declare var __VLS_8: {};

package/dist/runtime/components/visually-hidden/visually-hidden.vue

@@ -8,15 +8,15 @@ const { feature, ...rest } = defineProps({
 </script>
 
 <template>
-	<Box
-		:aria-hidden='feature === "focusable" ? "true" : void 0'
-		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
-		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
-		v-bind='rest'
-		class='root'
-	>
-		<slot />
-	</Box>
+	<Box
+		:aria-hidden='feature === "focusable" ? "true" : void 0'
+		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
+		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
+		v-bind='rest'
+		class='root'
+	>
+		<slot />
+	</Box>
 </template>
 
 <style scoped>

package/dist/runtime/components/visually-hidden/visually-hidden.vue.d.ts

@@ -1,5 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 export interface VisuallyHiddenProps extends BoxProps {
+    /** Controls accessibility behaviour: `'focusable'` adds `aria-hidden`, `'fully-hidden'` removes from tab order */
     feature?: 'focusable' | 'fully-hidden';
 }
 declare var __VLS_8: {};

package/dist/runtime/styles/dark-theme.css

@@ -1 +1 @@
-:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-slate-3);--color-body:var(--color-slate-9);--color-aside:var(--color-slate-7);--color-header:var(--color-slate-8);--color-error:var(--color-red-7);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-slate-5);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-gray-6);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:rgba(46,46,46,.15);--color-dark-light-hover:rgba(46,46,46,.2);--color-dark-light-color:var(--color-dark-3);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:rgba(66,66,66,.05);--color-slate-filled:var(--color-slate-6);--color-slate-filled-hover:var(--color-slate-7);--color-slate-light:alpha(var(--color-slate-3),.15);--color-slate-light-hover:var(--color-slate-2);--color-slate-light-color:var(--color-slate-8);--color-slate-outline:var(--color-slate-5);--color-slate-outline-hover:alpha(var(--color-slate-5),.1);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:hsla(210,7%,56%,.15);--color-gray-light-hover:hsla(210,7%,56%,.2);--color-gray-light-color:var(--color-gray-3);--color-gray-outline:var(--color-gray-4);--color-gray-outline-hover:rgba(206,212,218,.05);--color-red-color:var(--color-red-4);--color-red-filled:var(--color-red-8);--color-red-filled-hover:var(--color-red-9);--color-red-light:rgba(250,82,82,.15);--color-red-light-hover:rgba(250,82,82,.2);--color-red-light-color:var(--color-red-3);--color-red-outline:var(--color-red-4);--color-red-outline-hover:hsla(0,100%,76%,.05);--color-pink-color:var(--color-pink-4);--color-pink-filled:var(--color-pink-8);--color-pink-filled-hover:var(--color-pink-9);--color-pink-light:rgba(230,73,128,.15);--color-pink-light-hover:rgba(230,73,128,.2);--color-pink-light-color:var(--color-pink-3);--color-pink-outline:var(--color-pink-4);--color-pink-outline-hover:rgba(247,131,172,.05);--color-grape-color:var(--color-grape-4);--color-grape-filled:var(--color-grape-8);--color-grape-filled-hover:var(--color-grape-9);--color-grape-light:rgba(190,75,219,.15);--color-grape-light-hover:rgba(190,75,219,.2);--color-grape-light-color:var(--color-grape-3);--color-grape-outline:var(--color-grape-4);--color-grape-outline-hover:rgba(218,119,242,.05);--color-violet-color:var(--color-violet-4);--color-violet-filled:var(--color-violet-8);--color-violet-filled-hover:var(--color-violet-9);--color-violet-light:rgba(121,80,242,.15);--color-violet-light-hover:rgba(121,80,242,.2);--color-violet-light-color:var(--color-violet-3);--color-violet-outline:var(--color-violet-4);--color-violet-outline-hover:rgba(151,117,250,.05);--color-indigo-color:var(--color-indigo-4);--color-indigo-filled:var(--color-indigo-8);--color-indigo-filled-hover:var(--color-indigo-9);--color-indigo-light:rgba(76,110,245,.15);--color-indigo-light-hover:rgba(76,110,245,.2);--color-indigo-light-color:var(--color-indigo-3);--color-indigo-outline:var(--color-indigo-4);--color-indigo-outline-hover:rgba(116,143,252,.05);--color-blue-color:var(--color-blue-4);--color-blue-filled:var(--color-blue-8);--color-blue-filled-hover:var(--color-blue-9);--color-blue-light:rgba(34,139,230,.15);--color-blue-light-hover:rgba(34,139,230,.2);--color-blue-light-color:var(--color-blue-3);--color-blue-outline:var(--color-blue-4);--color-blue-outline-hover:rgba(77,171,247,.05);--color-cyan-color:var(--color-cyan-4);--color-cyan-filled:var(--color-cyan-8);--color-cyan-filled-hover:var(--color-cyan-9);--color-cyan-light:rgba(21,170,191,.15);--color-cyan-light-hover:rgba(21,170,191,.2);--color-cyan-light-color:var(--color-cyan-3);--color-cyan-outline:var(--color-cyan-4);--color-cyan-outline-hover:rgba(59,201,219,.05);--color-teal-color:var(--color-teal-4);--color-teal-filled:var(--color-teal-8);--color-teal-filled-hover:var(--color-teal-9);--color-teal-light:rgba(18,184,134,.15);--color-teal-light-hover:rgba(18,184,134,.2);--color-teal-light-color:var(--color-teal-3);--color-teal-outline:var(--color-teal-4);--color-teal-outline-hover:rgba(56,217,169,.05);--color-green-color:var(--color-green-4);--color-green-filled:var(--color-green-8);--color-green-filled-hover:var(--color-green-9);--color-green-light:rgba(64,192,87,.15);--color-green-light-hover:rgba(64,192,87,.2);--color-green-light-color:var(--color-green-3);--color-green-outline:var(--color-green-4);--color-green-outline-hover:rgba(105,219,124,.05);--color-lime-color:var(--color-lime-4);--color-lime-filled:var(--color-lime-8);--color-lime-filled-hover:var(--color-lime-9);--color-lime-light:rgba(130,201,30,.15);--color-lime-light-hover:rgba(130,201,30,.2);--color-lime-light-color:var(--color-lime-3);--color-lime-outline:var(--color-lime-4);--color-lime-outline-hover:rgba(169,227,75,.05);--color-yellow-color:var(--color-yellow-4);--color-yellow-filled:var(--color-yellow-8);--color-yellow-filled-hover:var(--color-yellow-9);--color-yellow-light:rgba(250,176,5,.15);--color-yellow-light-hover:rgba(250,176,5,.2);--color-yellow-light-color:var(--color-yellow-3);--color-yellow-outline:var(--color-yellow-4);--color-yellow-outline-hover:rgba(255,212,59,.05);--color-orange-color:var(--color-orange-4);--color-orange-filled:var(--color-orange-8);--color-orange-filled-hover:var(--color-orange-9);--color-orange-light:rgba(253,126,20,.15);--color-orange-light-hover:rgba(253,126,20,.2);--color-orange-light-color:var(--color-orange-3);--color-orange-outline:var(--color-orange-4);--color-orange-outline-hover:rgba(255,169,77,.05)}}
+:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-slate-3);--color-body:var(--color-slate-9);--color-aside:var(--color-slate-7);--color-header:var(--color-slate-8);--color-error:var(--color-red-7);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-slate-5);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-gray-6);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:rgba(46,46,46,.15);--color-dark-light-hover:rgba(46,46,46,.2);--color-dark-light-color:var(--color-dark-3);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:rgba(66,66,66,.05);--color-slate-filled:var(--color-slate-6);--color-slate-filled-hover:var(--color-slate-7);--color-slate-light:alpha(var(--color-slate-3),.15);--color-slate-light-hover:var(--color-slate-2);--color-slate-light-color:var(--color-slate-8);--color-slate-outline:var(--color-slate-5);--color-slate-outline-hover:alpha(var(--color-slate-5),.1);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:rgba(134,142,150,.15);--color-gray-light-hover:rgba(134,142,150,.2);--color-gray-light-color:var(--color-gray-3);--color-gray-outline:var(--color-gray-4);--color-gray-outline-hover:rgba(206,212,218,.05);--color-red-color:var(--color-red-4);--color-red-filled:var(--color-red-8);--color-red-filled-hover:var(--color-red-9);--color-red-light:rgba(250,82,82,.15);--color-red-light-hover:rgba(250,82,82,.2);--color-red-light-color:var(--color-red-3);--color-red-outline:var(--color-red-4);--color-red-outline-hover:rgba(255,135,135,.05);--color-pink-color:var(--color-pink-4);--color-pink-filled:var(--color-pink-8);--color-pink-filled-hover:var(--color-pink-9);--color-pink-light:rgba(230,73,128,.15);--color-pink-light-hover:rgba(230,73,128,.2);--color-pink-light-color:var(--color-pink-3);--color-pink-outline:var(--color-pink-4);--color-pink-outline-hover:rgba(247,131,172,.05);--color-grape-color:var(--color-grape-4);--color-grape-filled:var(--color-grape-8);--color-grape-filled-hover:var(--color-grape-9);--color-grape-light:rgba(190,75,219,.15);--color-grape-light-hover:rgba(190,75,219,.2);--color-grape-light-color:var(--color-grape-3);--color-grape-outline:var(--color-grape-4);--color-grape-outline-hover:rgba(218,119,242,.05);--color-violet-color:var(--color-violet-4);--color-violet-filled:var(--color-violet-8);--color-violet-filled-hover:var(--color-violet-9);--color-violet-light:rgba(121,80,242,.15);--color-violet-light-hover:rgba(121,80,242,.2);--color-violet-light-color:var(--color-violet-3);--color-violet-outline:var(--color-violet-4);--color-violet-outline-hover:rgba(151,117,250,.05);--color-indigo-color:var(--color-indigo-4);--color-indigo-filled:var(--color-indigo-8);--color-indigo-filled-hover:var(--color-indigo-9);--color-indigo-light:rgba(76,110,245,.15);--color-indigo-light-hover:rgba(76,110,245,.2);--color-indigo-light-color:var(--color-indigo-3);--color-indigo-outline:var(--color-indigo-4);--color-indigo-outline-hover:rgba(116,143,252,.05);--color-blue-color:var(--color-blue-4);--color-blue-filled:var(--color-blue-8);--color-blue-filled-hover:var(--color-blue-9);--color-blue-light:rgba(34,139,230,.15);--color-blue-light-hover:rgba(34,139,230,.2);--color-blue-light-color:var(--color-blue-3);--color-blue-outline:var(--color-blue-4);--color-blue-outline-hover:rgba(77,171,247,.05);--color-cyan-color:var(--color-cyan-4);--color-cyan-filled:var(--color-cyan-8);--color-cyan-filled-hover:var(--color-cyan-9);--color-cyan-light:rgba(21,170,191,.15);--color-cyan-light-hover:rgba(21,170,191,.2);--color-cyan-light-color:var(--color-cyan-3);--color-cyan-outline:var(--color-cyan-4);--color-cyan-outline-hover:rgba(59,201,219,.05);--color-teal-color:var(--color-teal-4);--color-teal-filled:var(--color-teal-8);--color-teal-filled-hover:var(--color-teal-9);--color-teal-light:rgba(18,184,134,.15);--color-teal-light-hover:rgba(18,184,134,.2);--color-teal-light-color:var(--color-teal-3);--color-teal-outline:var(--color-teal-4);--color-teal-outline-hover:rgba(56,217,169,.05);--color-green-color:var(--color-green-4);--color-green-filled:var(--color-green-8);--color-green-filled-hover:var(--color-green-9);--color-green-light:rgba(64,192,87,.15);--color-green-light-hover:rgba(64,192,87,.2);--color-green-light-color:var(--color-green-3);--color-green-outline:var(--color-green-4);--color-green-outline-hover:rgba(105,219,124,.05);--color-lime-color:var(--color-lime-4);--color-lime-filled:var(--color-lime-8);--color-lime-filled-hover:var(--color-lime-9);--color-lime-light:rgba(130,201,30,.15);--color-lime-light-hover:rgba(130,201,30,.2);--color-lime-light-color:var(--color-lime-3);--color-lime-outline:var(--color-lime-4);--color-lime-outline-hover:rgba(169,227,75,.05);--color-yellow-color:var(--color-yellow-4);--color-yellow-filled:var(--color-yellow-8);--color-yellow-filled-hover:var(--color-yellow-9);--color-yellow-light:rgba(250,176,5,.15);--color-yellow-light-hover:rgba(250,176,5,.2);--color-yellow-light-color:var(--color-yellow-3);--color-yellow-outline:var(--color-yellow-4);--color-yellow-outline-hover:rgba(255,212,59,.05);--color-orange-color:var(--color-orange-4);--color-orange-filled:var(--color-orange-8);--color-orange-filled-hover:var(--color-orange-9);--color-orange-light:rgba(253,126,20,.15);--color-orange-light-hover:rgba(253,126,20,.2);--color-orange-light-color:var(--color-orange-3);--color-orange-outline:var(--color-orange-4);--color-orange-outline-hover:rgba(255,169,77,.05)}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.7",
+	"version": "0.2.9",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",