nuance-ui 0.1.13 → 0.1.14

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.13",
+  "version": "0.1.14",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/action-icon/action-icon.module.css

@@ -1 +1 @@
-.root{--ai-size-xs:rem(18px);--ai-size-sm:rem(22px);--ai-size-md:rem(28px);--ai-size-lg:rem(34px);--ai-size-xl:rem(44px);--ai-size-input-xs:rem(30px);--ai-size-input-sm:rem(36px);--ai-size-input-md:rem(42px);--ai-size-input-lg:rem(50px);--ai-size-input-xl:rem(60px);--ai-size:var(--ai-size-md);--ai-color:var(--color-white);--ai-radius:var(--radius-default);--ai-bg:var(--color-primary-filled);--ai-hover:var(--color-primary-filled-hover);align-items:center;background:var(--ai-bg,var(--color-primary-filled));border:var(--ai-bd,rem(1px) solid transparent);border-radius:var(--ai-radius,var(--radius-default));color:var(--ai-color,var(--color-white));cursor:pointer;display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ai-size)}.root[data-loading]{cursor:not-allowed}.root[data-loading] .icon{opacity:0;transform:translateY(100%)}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){border:1px solid transparent;cursor:not-allowed}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])):active{transform:none}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-light{background-color:var(--color-gray-1);color:var(--color-gray-5)}}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-dark{background-color:var(--color-dark-6);color:var(--color-dark-3)}}.root{@mixin hover{&:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--ai-hover);color:var(--ai-color)}}}.loader{align-items:center;border-radius:var(--ai-radius,var(--radius-default));display:flex;justify-content:center;left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2);@mixin where-light{background-color:hsla(0,0%,100%,.15)}@mixin where-dark{background-color:rgba(0,0,0,.15)}}.icon{align-items:center;display:flex;height:100%;justify-content:center;transition:transform .15s ease,opacity .1s ease;width:100%}.group{--ai-border-width:1px;display:flex}.group :where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .groupSection:not(:only-child):first-child,.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--ai-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):last-child,.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--ai-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--ai-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .groupSection:not(:only-child):first-child,.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--ai-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .groupSection:not(:only-child):last-child,.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.group[data-orientation=vertical] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.section{--section-height-xs:var(--ai-size-xs);--section-height-sm:var(--ai-size-sm);--section-height-md:var(--ai-size-md);--section-height-lg:var(--ai-size-lg);--section-height-xl:var(--ai-size-xl);--section-height-input-xs:var(--ai-size-input-xs);--section-height-input-sm:var(--ai-size-input-sm);--section-height-input-md:var(--ai-size-input-md);--section-height-input-lg:var(--ai-size-input-lg);--section-height-input-xl:var(--ai-size-input-xl);--section-padding-x-xs:rem(6px);--section-padding-x-sm:rem(8px);--section-padding-x-md:rem(10px);--section-padding-x-lg:rem(12px);--section-padding-x-xl:rem(16px);--section-height:var(--section-height-sm);--section-padding-x:var(--section-padding-x-sm);--section-color:var(--color-white);align-items:center;background:var(--section-bg,var(--color-primary-filled));border:var(--section-bd,rem(1px) solid transparent);border-radius:var(--section-radius,var(--mantine-radius-default));color:var(--section-color,var(--color-white));display:inline-flex;font-size:var(--section-fz,var(--mantine-font-size-sm));font-weight:600;height:var(--section-height,var(--section-height-sm));justify-content:center;line-height:1;padding-inline:var(--section-padding-x,var(--section-padding-x-sm));vertical-align:middle;width:auto}
+.root{--ai-size-xs:rem(18px);--ai-size-sm:rem(22px);--ai-size-md:rem(28px);--ai-size-lg:rem(34px);--ai-size-xl:rem(44px);--ai-size-input-xs:rem(30px);--ai-size-input-sm:rem(36px);--ai-size-input-md:rem(42px);--ai-size-input-lg:rem(50px);--ai-size-input-xl:rem(60px);--ai-size:var(--ai-size-md);--ai-color:var(--color-white);--ai-radius:var(--radius-default);--ai-bg:var(--color-primary-filled);--ai-hover:var(--color-primary-filled-hover);align-items:center;background:var(--ai-bg,var(--color-primary-filled));border:var(--ai-bd,rem(1px) solid transparent);border-radius:var(--ai-radius,var(--radius-default));color:var(--ai-color,var(--color-white));cursor:pointer;display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ai-size)}.root[data-loading]{cursor:not-allowed}.root[data-loading] .icon{opacity:0;transform:translateY(100%)}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){border:1px solid transparent;cursor:not-allowed}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])):active{transform:none}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-light{background-color:var(--color-gray-1);color:var(--color-gray-5)}}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-dark{background-color:var(--color-dark-6);color:var(--color-dark-3)}}.root:hover:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--ai-hover);color:var(--ai-color)}.loader{align-items:center;border-radius:var(--ai-radius,var(--radius-default));display:flex;justify-content:center;left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2);@mixin where-light{background-color:hsla(0,0%,100%,.15)}@mixin where-dark{background-color:rgba(0,0,0,.15)}}.icon{align-items:center;display:flex;height:100%;justify-content:center;transition:transform .15s ease,opacity .1s ease;width:100%}.icon-element{height:80%;width:80%}.group{--ai-border-width:1px;display:flex}.group :where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .groupSection:not(:only-child):first-child,.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--ai-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):last-child,.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--ai-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--ai-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .groupSection:not(:only-child):first-child,.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--ai-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .groupSection:not(:only-child):last-child,.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.group[data-orientation=vertical] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.section{--section-height-xs:var(--ai-size-xs);--section-height-sm:var(--ai-size-sm);--section-height-md:var(--ai-size-md);--section-height-lg:var(--ai-size-lg);--section-height-xl:var(--ai-size-xl);--section-height-input-xs:var(--ai-size-input-xs);--section-height-input-sm:var(--ai-size-input-sm);--section-height-input-md:var(--ai-size-input-md);--section-height-input-lg:var(--ai-size-input-lg);--section-height-input-xl:var(--ai-size-input-xl);--section-padding-x-xs:rem(6px);--section-padding-x-sm:rem(8px);--section-padding-x-md:rem(10px);--section-padding-x-lg:rem(12px);--section-padding-x-xl:rem(16px);--section-height:var(--section-height-sm);--section-padding-x:var(--section-padding-x-sm);--section-color:var(--color-white);align-items:center;background:var(--section-bg,var(--color-primary-filled));border:var(--section-bd,rem(1px) solid transparent);border-radius:var(--section-radius,var(--mantine-radius-default));color:var(--section-color,var(--color-white));display:inline-flex;font-size:var(--section-fz,var(--mantine-font-size-sm));font-weight:600;height:var(--section-height,var(--section-height-sm));justify-content:center;line-height:1;padding-inline:var(--section-padding-x,var(--section-padding-x-sm));vertical-align:middle;width:auto}

package/dist/runtime/components/action-icon/action-icon.vue

@@ -64,7 +64,7 @@ const _mod = computed(() => [{ loading }, mod]);
 
 		<span :class='[css.icon, classes?.icon]'>
 			<slot>
-				<Icon v-if='icon' :name='icon' />
+				<Icon v-if='icon' :name='icon' :class='css["icon-element"]' />
 			</slot>
 		</span>
 	</Box>

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

@@ -14,8 +14,6 @@ const { mod } = defineProps({
 
 <style module lang="postcss">
 .root {
-	display: grid;
-
 	min-height: 100dvh;
 	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
 	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));

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

@@ -0,0 +1,39 @@
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
+import type { MaybeRef } from 'vue';
+import type { BoxProps } from './box.vue.js';
+import type { LinkProps } from './link/index.js';
+import type { TextProps } from './text.vue.js';
+export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    label: string;
+    icon?: string;
+    class?: string;
+    slot?: string;
+}
+export interface BreadcrumbsProps extends BoxProps {
+    items?: MaybeRef<BreadcrumbsItem[]>;
+    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    separator?: string;
+    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    spacing?: NuanceSpacing;
+    color?: NuanceColor;
+    size?: TextProps['fz'];
+}
+declare var __VLS_16: string, __VLS_17: {
+    item: BreadcrumbsItem;
+    ix: number;
+    active: any;
+}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
+} & {
+    separator?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/breadcrumbs.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { getSpacing } from "@nui/utils";
+import { computed, unref } from "vue";
+import Box from "./box.vue";
+import { pickLinkProps } from "./link";
+import Link from "./link/link.vue";
+import Text from "./text.vue";
+const {
+  is = "ol",
+  mod,
+  spacing,
+  separator = "gravity-ui:chevron-right",
+  color = "primary",
+  size
+} = defineProps({
+  items: { type: null, required: false },
+  separator: { type: String, required: false },
+  spacing: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = computed(() => ({
+  "--bc-spacing": getSpacing(spacing)
+}));
+</script>
+
+<template>
+	<Box :is :mod :style :class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in unref(items)' :key='ix'>
+			<Text
+				is='li'
+				:c='color'
+				:fz='size'
+				:class='$style.breadcrumb'
+				role='presentation'
+				aria-hidden='true'
+			>
+				<NuxtLink v-slot='{ isActive }' v-bind='pickLinkProps(item).link' custom>
+					<slot :name='item.slot ?? "item"' :item='item' :ix='ix' :active='isActive'>
+						<Link v-bind='pickLinkProps(item).link' inherit :class='$style.item' :mod='{ active: isActive }'>
+							<Icon v-if='item?.icon' :name='item.icon' :class='$style.icon' />
+							<Text is='span' inherit truncate>
+								{{ item.label }}
+							</Text>
+						</Link>
+					</slot>
+				</NuxtLink>
+			</Text>
+			<li v-if='ix < unref(items).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;
+
+	list-style: none;
+}
+
+.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;
+
+	&:where([data-active]) {
+		color: var(--text-color);
+	}
+}
+
+.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/breadcrumbs.vue.d.ts

@@ -0,0 +1,39 @@
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
+import type { MaybeRef } from 'vue';
+import type { BoxProps } from './box.vue.js';
+import type { LinkProps } from './link/index.js';
+import type { TextProps } from './text.vue.js';
+export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    label: string;
+    icon?: string;
+    class?: string;
+    slot?: string;
+}
+export interface BreadcrumbsProps extends BoxProps {
+    items?: MaybeRef<BreadcrumbsItem[]>;
+    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    separator?: string;
+    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    spacing?: NuanceSpacing;
+    color?: NuanceColor;
+    size?: TextProps['fz'];
+}
+declare var __VLS_16: string, __VLS_17: {
+    item: BreadcrumbsItem;
+    ix: number;
+    active: any;
+}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
+} & {
+    separator?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/button/button.module.css

@@ -1 +1 @@
-.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:calc(var(--button-padding-x)/1.5)}.root:where([data-with-right-section]){padding-inline-end:calc(var(--button-padding-x)/1.5)}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root{@mixin hover{&:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}&:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}}}.inner{justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease}.inner,.label{align-items:center;display:flex;height:100%}.label{opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;pointer-events:var(--section-pointer-events)}.section:where([data-position=left]){margin-inline-end:var(--spacing-xs)}.section:where([data-position=right]){margin-inline-start:var(--spacing-xs)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}
+.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:calc(var(--button-padding-x)/1.5)}.root:where([data-with-right-section]){padding-inline-end:calc(var(--button-padding-x)/1.5)}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease}.inner,.label{align-items:center;display:flex;height:100%}.label{opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;pointer-events:var(--section-pointer-events)}.section:where([data-position=left]){margin-inline-end:var(--spacing-xs)}.section:where([data-position=right]){margin-inline-start:var(--spacing-xs)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}

package/dist/runtime/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './app-shell/index.js';
 export * from './avatar/index.js';
 export * from './background-image.vue.js';
 export * from './box.vue.js';
+export type { BreadcrumbsItem, BreadcrumbsProps } from './breadcrumbs.vue.js';
 export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';

package/dist/runtime/components/link/index.d.ts

@@ -1,3 +1,3 @@
-export { extractNuxtLinkProps } from './lib.js';
+export { pickLinkProps } from './lib.js';
 export type * from './link-button.vue';
 export type * from './link.vue';

package/dist/runtime/components/link/index.js

@@ -1 +1 @@
-export { extractNuxtLinkProps } from "./lib.js";
+export { pickLinkProps } from "./lib.js";

package/dist/runtime/components/link/lib.d.ts

@@ -1,16 +1,16 @@
 import type { NuxtLinkProps } from '#app';
-export declare function extractNuxtLinkProps<T extends NuxtLinkProps>(props: T): {
+export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
     link: {
         prefetch: NonNullable<import("vue").UnwrapRef<T["prefetch"]>> | undefined;
         noPrefetch: NonNullable<import("vue").UnwrapRef<T["noPrefetch"]>> | undefined;
         to?: import("vue").UnwrapRef<T["to"]> | undefined;
         target?: import("vue").UnwrapRef<T["target"]> | undefined;
-        replace?: import("vue").UnwrapRef<T["replace"]> | undefined;
         external?: import("vue").UnwrapRef<T["external"]> | undefined;
         rel?: import("vue").UnwrapRef<T["rel"]> | undefined;
         noRel?: import("vue").UnwrapRef<T["noRel"]> | undefined;
+        replace?: import("vue").UnwrapRef<T["replace"]> | undefined;
         prefetchOn?: import("vue").UnwrapRef<T["prefetchOn"]> | undefined;
         trailingSlash?: import("vue").UnwrapRef<T["trailingSlash"]> | undefined;
     };
-    rest: Omit<T, Extract<"to", keyof T> | Extract<"target", keyof T> | Extract<"replace", keyof T> | Extract<"external", keyof T> | Extract<"rel", keyof T> | Extract<"noRel", keyof T> | Extract<"prefetch", keyof T> | Extract<"noPrefetch", keyof T> | Extract<"prefetchOn", keyof T> | Extract<"trailingSlash", keyof T>>;
+    rest: Omit<T, Extract<"to", keyof T> | Extract<"target", keyof T> | Extract<"external", keyof T> | Extract<"rel", keyof T> | Extract<"noRel", keyof T> | Extract<"prefetch", keyof T> | Extract<"noPrefetch", keyof T> | Extract<"replace", keyof T> | Extract<"prefetchOn", keyof T> | Extract<"trailingSlash", keyof T>>;
 };

package/dist/runtime/components/link/lib.js

@@ -11,7 +11,7 @@ const linkProps = [
   "prefetchOn",
   "trailingSlash"
 ];
-export function extractNuxtLinkProps(props) {
+export function pickLinkProps(props) {
   const link = reactivePick(props, ...linkProps);
   const rest = reactiveOmit(props, ...linkProps);
   return {

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

@@ -1,6 +1,6 @@
 <script setup>
 import Button from "../button/button.vue";
-import { extractNuxtLinkProps } from "./lib";
+import { pickLinkProps } from "./lib";
 const props = defineProps({
   to: { type: null, required: false },
   external: { type: Boolean, required: false },
@@ -31,27 +31,28 @@ const props = defineProps({
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const { link, rest } = extractNuxtLinkProps(props);
+const { link, rest } = pickLinkProps(props);
 </script>
 
 <template>
-	<!-- @vue-ignore	-->
-	<NuxtLink
-		v-slot='{ href, navigate, rel, target }'
-		v-bind='link'
-		custom
-	>
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
 		<Button
-			v-bind='{ ...rest, is: rest?.is || "a", href, rel, target }'
-			@click='(e) => navigate(e)'
+			v-bind='{
+  ...rest,
+  is: rest?.is || "a",
+  href,
+  rel: "rel" in linkProps ? linkProps.rel : void 0,
+  target: "target" in linkProps ? linkProps.target : void 0
+}'
+			@click='navigate'
 		>
-			<template #leftSection>
+			<template v-if='$slots.leftSection' #leftSection>
 				<slot name='leftSection' />
 			</template>
 
 			<slot />
 
-			<template #rightSection>
+			<template v-if='$slots.rightSection' #rightSection>
 				<slot name='rightSection' />
 			</template>
 		</Button>

package/dist/runtime/components/link/link.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { NuxtLink } from "#components";
 import Text from "../text.vue";
-import { extractNuxtLinkProps } from "./lib";
+import { pickLinkProps } from "./lib";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   underline: { type: Boolean, required: false },
   to: { type: null, required: false },
@@ -32,26 +33,22 @@ const props = defineProps({
   c: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const { link, rest } = extractNuxtLinkProps(props);
+const { link, rest: { underline, ...rest } } = pickLinkProps(props);
 </script>
 
 <template>
-	<!-- @vue-ignore	-->
-	<NuxtLink
-		v-slot='{ href, navigate, rel, target }'
-		v-bind='link'
-		custom
-	>
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
 		<Text
 			is='a'
-			:class='[$style.root, { [$style.underline]: rest.underline }]'
+			:class='[$style.root, { [$style.underline]: underline }]'
 			v-bind='{
   ...rest,
+  ...$attrs,
   href,
-  rel,
-  target
+  rel: "rel" in linkProps ? linkProps.rel : void 0,
+  target: "target" in linkProps ? linkProps.target : void 0
 }'
-			@click='(e) => navigate(e)'
+			@click='navigate'
 		>
 			<slot />
 		</Text>

package/dist/runtime/components/nav-link/nav-link.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { useActiveLink, useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composals";
 import { createVariantColorResolver } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
 import UnstyledButton from "../button/unstyled-button.vue";
-import { extractNuxtLinkProps } from "../link";
+import { pickLinkProps } from "../link";
 const props = defineProps({
   description: { type: String, required: false },
   active: { type: Boolean, required: false },
@@ -34,47 +34,37 @@ const {
   link,
   rest: {
     disabled,
-    mod: _mod,
+    mod,
     variant = "filled",
     color,
     noWrap,
     description
   }
-} = extractNuxtLinkProps(props);
-const active = useActiveLink(link?.to);
-const mod = computed(() => [{ active: active.value, disabled }, _mod]);
-const style = useStyleResolver((theme) => {
+} = pickLinkProps(props);
+const style = computed(() => useStyleResolver((theme) => {
   const { background, hover, text } = createVariantColorResolver({ variant, color, theme });
   return {
-    root: {
-      "--nl-bg": variant ? background : void 0,
-      "--nl-hover": variant ? hover : void 0,
-      "--nl-color": variant ? text : void 0
-    }
+    "--nl-bg": variant ? background : void 0,
+    "--nl-hover": variant ? hover : void 0,
+    "--nl-color": variant ? text : void 0
   };
-});
+}));
 </script>
 
 <template>
-	<!-- @vue-ignore	-->
-	<NuxtLink
-		v-slot='{ href, navigate }'
-		v-bind='link'
-		custom
-	>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
 		<UnstyledButton
 			is='a'
-			:class='$style.root'
-			:style='style.root'
-			:mod
 			:href
-			@click='(e) => navigate(e)'
+			:style
+			:class='$style.root'
+			:mod='[{ active: isActive, disabled }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
 		>
-			<span
-				v-if='$slots.leftSection'
-				:class='$style.section'
-				data-position='left'
-			>
+			<span v-if='$slots.leftSection' :class='$style.section' data-position='left'>
 				<slot name='leftSection' />
 			</span>
 
@@ -89,11 +79,7 @@ const style = useStyleResolver((theme) => {
 				</Box>
 			</Box>
 
-			<span
-				v-if='$slots.rightSection'
-				:class='$style.section'
-				data-position='right'
-			>
+			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
 				<slot name='rightSection' />
 			</span>
 		</UnstyledButton>
@@ -131,7 +117,7 @@ const style = useStyleResolver((theme) => {
 		}
 	}
 
-	&:where([data-active], [aria-current='page']) {
+	&:where([data-active]) {
 		color: var(--nl-color);
 
 		background-color: var(--nl-bg);
@@ -141,7 +127,7 @@ const style = useStyleResolver((theme) => {
 			--description-color: var(--nl-color);
 		}
 
-		@mixin hover {
+		&:hover {
 			background-color: var(--nl-hover);
 		}
 	}

package/dist/runtime/components/roving-focus/_lib/context.d.ts

@@ -20,7 +20,7 @@ export declare const useProvideRovingFocus: (args_0: State) => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "both" | "horizontal" | "vertical" | undefined;
+    orientation: "horizontal" | "vertical" | "both" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;
@@ -38,7 +38,7 @@ export declare const useRovingFocus: () => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "both" | "horizontal" | "vertical" | undefined;
+    orientation: "horizontal" | "vertical" | "both" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;

package/dist/runtime/components/text.vue

@@ -10,13 +10,13 @@ const {
   inline,
   inherit,
   mod,
-  variant = "text",
+  variant,
   gradient,
   fz,
   fw,
   lh,
   c,
-  size = "sm",
+  size,
   ...rest
 } = defineProps({
   size: { type: null, required: false },
@@ -33,16 +33,13 @@ const {
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const _mod = computed(() => [
-  {
-    truncate,
-    "line-clamp": lineClamp,
-    inline,
-    inherit,
-    variant
-  },
-  mod
-]);
+const _mod = computed(() => [{
+  truncate,
+  "line-clamp": lineClamp,
+  inline,
+  inherit,
+  variant
+}, mod]);
 const style = computed(() => useStyleResolver((theme) => ({
   "--text-fz": getFontSize(fz || size),
   "--text-fw": fw,
@@ -61,10 +58,12 @@ const style = computed(() => useStyleResolver((theme) => ({
 
 <style module lang="postcss">
 .root {
-	--text-fz: var(--font-size-md);
-	--text-lh: var(--line-height-md);
+	--text-fz: var(--font-size-sm);
+	--text-lh: var(--line-height-sm);
 	--text-color: inherit;
 	--text-fw: normal;
+	--text-gradient: none;
+	--text-line-clamp: none;
 
 	margin: 0;
 	padding: 0;
@@ -115,6 +114,7 @@ const style = computed(() => useStyleResolver((theme) => ({
 		font-size: inherit;
 		font-weight: inherit;
 		line-height: inherit;
+		color: inherit;
 	}
 
 	&:where([data-inline]) {

package/dist/runtime/types/theme.d.ts

@@ -12,8 +12,8 @@ export type NuanceSpacing = keyof NuanceSpacingValues | number;
 export type NuanceShadow = keyof NuanceShadowsValues;
 export type NuanceLineHeight = keyof NuanceLineHeightValues;
 export type NuanceColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `gray.${NuanceColorShade}` | `red.${NuanceColorShade}` | `pink.${NuanceColorShade}` | `grape.${NuanceColorShade}` | `violet.${NuanceColorShade}` | `indigo.${NuanceColorShade}` | `blue.${NuanceColorShade}` | `cyan.${NuanceColorShade}` | `green.${NuanceColorShade}` | `lime.${NuanceColorShade}` | `yellow.${NuanceColorShade}` | `orange.${NuanceColorShade}` | `teal.${NuanceColorShade}`;
-export type NuanceDefaultThemeColor = 'dark' | 'slate' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white';
+type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `gray.${NuanceColorShade}` | `red.${NuanceColorShade}` | `pink.${NuanceColorShade}` | `grape.${NuanceColorShade}` | `violet.${NuanceColorShade}` | `indigo.${NuanceColorShade}` | `blue.${NuanceColorShade}` | `cyan.${NuanceColorShade}` | `green.${NuanceColorShade}` | `lime.${NuanceColorShade}` | `yellow.${NuanceColorShade}` | `orange.${NuanceColorShade}` | `teal.${NuanceColorShade}` | `primary.${NuanceColorShade}`;
+export type NuanceDefaultThemeColor = 'dark' | 'slate' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white' | 'primary';
 export type NuanceColor = NuanceDefaultThemeColor | ShadedColor;
 export type NuanceTheme = 'light' | 'dark';
 export interface NuanceGradient {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.13",
+	"version": "0.1.14",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",