nuance-ui 0.2.33 → 0.2.35

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 NuxtLabs
+Copyright (c) 2026 Igor Iugin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,6 @@
 import { defineNuxtModule, createResolver, addTypeTemplate, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
-import { DEFAULT_GRADIENT } from '../dist/runtime/utils/color/const.js';
-import { DEFAULT_ICONS } from '../dist/runtime/utils/icons/default-icons.js';
+import { DEFAULT_ICONS, DEFAULT_GRADIENT } from '../dist/runtime/utils/index.js';
 
 const SHADES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 function fromName(name) {

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

@@ -1,9 +1,9 @@
-import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
-export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
 export interface AlertVars {
-    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
 }
 export interface AlertProps extends BoxProps {
     /** Border radius */
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Component size */
+    size?: NuanceSize;
     /** Visual variant */
     variant?: AlertVariant;
     /** Styles API */

package/dist/runtime/components/alert.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useConfig, useVarsResolver } from "@nui/composables";
-import { getRadius } from "@nui/utils";
+import { getFontSize, getRadius } from "@nui/utils";
 import { useId } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Box from "./box.vue";
@@ -10,6 +10,7 @@ const {
   color,
   title,
   radius,
+  size = "md",
   variant = "light",
   withCloseButton,
   classes
@@ -21,6 +22,7 @@ const {
   withCloseButton: { type: Boolean, required: false },
   onClose: { type: Function, required: false },
   closeButtonLabel: { type: String, required: false },
+  size: { type: String, required: false },
   variant: { type: String, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
@@ -36,7 +38,8 @@ const style = useVarsResolver((theme) => {
       "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
       "--alert-bg": color || variant ? background : void 0,
       "--alert-color": text,
-      "--alert-bd": color || variant ? border : void 0
+      "--alert-bd": color || variant ? border : void 0,
+      "--alert-font-size": getFontSize(size)
     }
   };
 });
@@ -89,5 +92,5 @@ const style = useVarsResolver((theme) => {
 </template>
 
 <style module>
-.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-sm);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column;gap:var(--spacing-xs)}.title{align-items:center;display:flex;font-size:var(--font-size-md);font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;height:1.25rem;justify-content:flex-start;line-height:1;margin-top:1px;width:1.25rem}.message{font-size:var(--font-size-md);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
+.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-xs);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column}.title{align-items:center;display:flex;font-size:var(--alert-font-size,var(--font-size-md));font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;font-size:var(--alert-font-size);height:calc(var(--alert-font-size)*1.3);justify-content:flex-start;line-height:1;margin-top:1px;width:calc(var(--alert-font-size)*1.3)}.message{font-size:var(--alert-font-size,var(--font-size-md));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
 </style>

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

@@ -1,9 +1,9 @@
-import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
-export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
 export interface AlertVars {
-    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
 }
 export interface AlertProps extends BoxProps {
     /** Border radius */
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Component size */
+    size?: NuanceSize;
     /** Visual variant */
     variant?: AlertVariant;
     /** Styles API */

package/dist/runtime/components/dialog/ui/dialog-title.vue

@@ -11,6 +11,7 @@ const { size = "md", lh = "1", ...props } = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

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

@@ -0,0 +1,40 @@
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export interface DividerVars {
+    root: '--divider-color' | '--divider-border-style' | '--divider-size';
+}
+export interface DividerProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor | AnyString;
+    /**
+     * Controls width/height depending on orientation
+     * @default `'xs'`
+     */
+    size?: NuanceSize | AnyString;
+    /**
+     * Label position
+     * @default `'center'`
+     */
+    labelPosition?: 'left' | 'center' | 'right';
+    /**
+     * Divider orientation
+     * @default `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant */
+    variant?: DividerVariant;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & 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/divider.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getSize, getThemeColor } from "@nui/utils";
+import Box from "./box.vue";
+const {
+  color,
+  size,
+  labelPosition = "center",
+  orientation = "horizontal",
+  variant
+} = defineProps({
+  color: { type: null, required: false },
+  size: { type: [String, Object], required: false },
+  labelPosition: { type: String, required: false },
+  orientation: { type: String, required: false },
+  variant: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--divider-color": color ? getThemeColor(color, theme) : void 0,
+    "--divider-border-style": variant,
+    "--divider-size": getSize(size, "divider-size")
+  }
+}));
+</script>
+
+<template>
+	<Box
+		role='separator'
+		:style='style.root'
+		:class='$style.root'
+		:mod="[{ orientation, 'with-label': !!$slots.default }, mod]"
+	>
+		<Box
+			is='span'
+			v-if='$slots.default'
+			:class='$style.label'
+			:mod='{ position: labelPosition }'
+		>
+			<slot />
+		</Box>
+	</Box>
+</template>
+
+<style module>
+.root{--divider-size-xs:1px;--divider-size-sm:2px;--divider-size-md:3px;--divider-size-lg:4px;--divider-size-xl:5px;--divider-size:var(--divider-size-xs);@mixin where-light{--divider-color:var(--color-gray-3)}@mixin where-dark{--divider-color:var(--color-dark-4)}}.root:where([data-orientation=horizontal]){border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color)}.root:where([data-orientation=vertical]){align-self:stretch;border-inline-start:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);height:auto}.root:where([data-with-label]){border:0}.label{align-items:center;color:var(--color-dimmed);display:flex;font-size:var(--font-size-xs);white-space:nowrap}.label:where([data-position=left]):before{display:none}.label:where([data-position=right]):after{display:none}.label:before{margin-inline-end:var(--spacing-xs)}.label:after,.label:before{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);content:"";flex:1;height:1px}.label:after{margin-inline-start:var(--spacing-xs)}
+</style>

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

@@ -0,0 +1,40 @@
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export interface DividerVars {
+    root: '--divider-color' | '--divider-border-style' | '--divider-size';
+}
+export interface DividerProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor | AnyString;
+    /**
+     * Controls width/height depending on orientation
+     * @default `'xs'`
+     */
+    size?: NuanceSize | AnyString;
+    /**
+     * Label position
+     * @default `'center'`
+     */
+    labelPosition?: 'left' | 'center' | 'right';
+    /**
+     * Divider orientation
+     * @default `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant */
+    variant?: DividerVariant;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & 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/drawer/drawer-title.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

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

@@ -14,6 +14,7 @@ export * from './combobox/index.js';
 export type * from './container.vue';
 export type * from './date-time-picker.vue';
 export * from './dialog/index.js';
+export type * from './divider.vue';
 export * from './drawer/index.js';
 export * from './files/index.js';
 export type * from './floating-indicator.vue';

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

@@ -27,6 +27,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

package/dist/runtime/components/modal/modal-title.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

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

@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
     gradient?: NuanceGradient;
     /** Font size token */
     fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
+    /** Font family token @default 'text' */
+    ff?: 'mono' | 'headings' | 'text' | AnyString;
     /** Line height token */
     lh?: NuanceSize | AnyString;
     /** Font weight */

package/dist/runtime/components/text.vue

@@ -13,6 +13,7 @@ const {
   variant,
   gradient,
   fz,
+  ff,
   fw,
   lh,
   c,
@@ -26,6 +27,7 @@ const {
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
@@ -43,6 +45,7 @@ const _mod = computed(() => [{
 const style = useVarsResolver((theme) => ({
   root: {
     "--text-fz": getFontSize(fz || size),
+    "--text-ff": ff ? `var(--font-family${ff === "text" ? "" : ff})` : void 0,
     "--text-fw": fw?.toString(),
     "--text-lh": getLineHeight(lh || size),
     "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
@@ -59,5 +62,5 @@ const style = useVarsResolver((theme) => ({
 </template>
 
 <style module>
-.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
+.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-family:var(--text-ff,var(--font-family));font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
 </style>

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

@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
     gradient?: NuanceGradient;
     /** Font size token */
     fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
+    /** Font family token @default 'text' */
+    ff?: 'mono' | 'headings' | 'text' | AnyString;
     /** Line height token */
     lh?: NuanceSize | AnyString;
     /** Font weight */

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

@@ -27,7 +27,7 @@ export interface TimelineItem {
     [key: string]: any;
 }
 export interface TimelineVars {
-    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius' | '--tl-gap';
 }
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     bullet?: SlotProps<T>;
@@ -57,6 +57,8 @@ export interface TimelineProps<T extends TimelineItem> extends BoxProps {
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
+    /** Gap between items (padding-bottom on each non-last item) */
+    gap?: number | string;
     /** If set, the active items direction is reversed without reversing items order @default false */
     reverse?: boolean;
     /** @default 'vertical' */

package/dist/runtime/components/timeline.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useVarsResolver } from "@nui/composables";
-import { getRadius, getSize, getThemeColor, rem } from "@nui/utils";
+import { getRadius, getSize, getSpacing, getThemeColor, rem } from "@nui/utils";
 import { computed } from "vue";
 import Box from "./box.vue";
 const {
@@ -9,6 +9,7 @@ const {
   align = "left",
   size,
   lineWidth = 4,
+  gap,
   color,
   classes,
   mod,
@@ -22,6 +23,7 @@ const {
   size: { type: [String, Object], required: false },
   align: { type: String, required: false },
   lineWidth: { type: [Number, String], required: false },
+  gap: { type: [Number, String], required: false },
   reverse: { type: Boolean, required: false },
   orientation: { type: String, required: false },
   valueKey: { type: String, required: false },
@@ -37,7 +39,8 @@ const style = useVarsResolver((theme) => ({
     "--tl-size": getSize(size, "tl-size"),
     "--tl-line-width": rem(lineWidth),
     "--tl-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--tl-color": color ? getThemeColor(color, theme) : void 0
+    "--tl-color": color ? getThemeColor(color, theme) : void 0,
+    "--tl-gap": getSpacing(gap)
   }
 }));
 const currentStepIx = computed(() => {
@@ -108,5 +111,5 @@ function getActive(ix) {
 </template>
 
 <style module>
-.root{--tl-size-xs:1rem;--tl-size-sm:1.25rem;--tl-size-md:1.5rem;--tl-size-lg:1.75rem;--tl-size-xl:2rem;--tl-size:var(--tl-size-md);--tl-offset:calc((var(--tl-size) - var(--tl-line-width))/2);--tl-line-width:.25rem;--tl-radius:1000px;--tl-color:var(--color-primary-filled)}.root:where([data-align=left]){padding-inline-start:var(--tl-offset)}.root:where([data-align=right]){padding-inline-end:var(--tl-offset)}.root:where([data-orientation=horizontal]){display:flex;flex-direction:row;padding-block-start:var(--tl-offset);padding-inline:0}.item{--tli-bd-style:solid;--tli-bd-color:var(--color-primary-filled);--item-border:var(--tl-line-width) var(--tli-bd-style) var(--tli-bd-color);color:var(--color-text);position:relative}.item:before{border-inline-start:var(--item-border);bottom:0;content:"";display:var(--timeline-line-display,none);left:var(--timeline-line-left,0);pointer-events:none;position:absolute;right:var(--timeline-line-right,0);top:0}.root[data-align=left] .item:before{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto;@mixin rtl{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1)}}.root[data-align=right] .item:before{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1);@mixin rtl{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto}}.root:where([data-align=left]) .item{padding-inline-start:var(--tl-offset);text-align:left}.root:where([data-align=right]) .item{padding-inline-end:var(--tl-offset);text-align:right}.root:where([data-orientation=horizontal]) .item{flex:1;padding-block-start:var(--tl-offset);padding-inline:0;text-align:center}.root:where([data-orientation=horizontal]) .item:before{--timeline-line-top:calc((var(--tl-size) - var(--tl-line-width))/2);border-inline-start:none;border-top:var(--item-border);bottom:auto;height:var(--tl-line-width);left:0;right:0;top:var(--timeline-line-top,0)}.root:where([data-orientation=horizontal]) .item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:0}.item{@mixin where-light{--tli-bd-color:var(--color-gray-3)}}.item{@mixin where-dark{--tli-bd-color:var(--color-dark-4)}}.item:where([data-line-active]){--tli-bd-color:var(--tl-color)}.item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:var(--spacing-xl)}.root:where([data-orientation=horizontal]) .item:where(:not(:first-of-type)){padding-bottom:0}.bullet{--tl-bullet-offset:calc(var(--tl-size)/2*-1 + var(--tl-line-width)/2*-1);align-items:center;background-color:var(--color-body);border:var(--tl-line-width) solid;border-radius:var(--tli-radius,var(--tl-radius));color:var(--color-text);display:flex;height:var(--tl-size);justify-content:center;position:absolute;top:0;width:var(--tl-size);@mixin where-light{border-color:var(--color-gray-3)}@mixin where-dark{border-color:var(--color-dark-4)}}.root:where([data-align=left]) .bullet{left:var(--tl-bullet-offset);right:auto;@mixin where-rtl{left:auto;right:var(--tl-bullet-offset)}}.root:where([data-align=right]) .bullet{left:auto;right:var(--tl-bullet-offset);@mixin where-rtl{left:var(--tl-bullet-offset);right:auto}}.root:where([data-orientation=horizontal]) .bullet{--tl-bullet-offset:0}.bullet:where([data-with-child]){border-width:var(--tl-line-width);@mixin where-light{background-color:var(--color-gray-3)}@mixin where-dark{background-color:var(--color-dark-4)}}.bullet:where([data-active]){background-color:var(--color-white);border-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.bullet:where([data-active]):where([data-with-child]){background-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.root:where([data-align=left]) .body{padding-inline-start:var(--tl-offset);text-align:left;@mixin where-rtl{text-align:right}}.root:where([data-align=right]) .body{padding-inline-end:var(--tl-offset);text-align:right;@mixin where-rtl{text-align:left}}.root:where([data-orientation=horizontal]) .body{padding-block-start:calc(var(--tl-offset) + var(--spacing-xs));padding-inline:0}.label{font-weight:600;line-height:var(--tl-size)}.content{color:var(--color-dimmed)}
+.root{--tl-size-xs:1rem;--tl-size-sm:1.25rem;--tl-size-md:1.5rem;--tl-size-lg:1.75rem;--tl-size-xl:2rem;--tl-size:var(--tl-size-md);--tl-offset:calc((var(--tl-size) - var(--tl-line-width))/2);--tl-line-width:.25rem;--tl-radius:1000px;--tl-color:var(--color-primary-filled);--tl-gap:var(--spacing-xl)}.root:where([data-align=left]){padding-inline-start:var(--tl-offset)}.root:where([data-align=right]){padding-inline-end:var(--tl-offset)}.root:where([data-orientation=horizontal]){display:flex;flex-direction:row;padding-block-start:var(--tl-offset);padding-inline:0}.item{--tli-bd-style:solid;--tli-bd-color:var(--color-primary-filled);--item-border:var(--tl-line-width) var(--tli-bd-style) var(--tli-bd-color);color:var(--color-text);position:relative}.item:before{border-inline-start:var(--item-border);bottom:0;content:"";display:var(--timeline-line-display,none);left:var(--timeline-line-left,0);pointer-events:none;position:absolute;right:var(--timeline-line-right,0);top:0}.root[data-align=left] .item:before{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto;@mixin rtl{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1)}}.root[data-align=right] .item:before{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1);@mixin rtl{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto}}.root:where([data-align=left]) .item{padding-inline-start:var(--tl-offset);text-align:left}.root:where([data-align=right]) .item{padding-inline-end:var(--tl-offset);text-align:right}.root:where([data-orientation=horizontal]) .item{flex:1;padding-block-start:var(--tl-offset);padding-inline:0;text-align:center}.root:where([data-orientation=horizontal]) .item:before{--timeline-line-top:calc((var(--tl-size) - var(--tl-line-width))/2);border-inline-start:none;border-top:var(--item-border);bottom:auto;height:var(--tl-line-width);left:0;right:0;top:var(--timeline-line-top,0)}.root:where([data-orientation=horizontal]) .item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:0}.item{@mixin where-light{--tli-bd-color:var(--color-gray-3)}}.item{@mixin where-dark{--tli-bd-color:var(--color-dark-4)}}.item:where([data-line-active]){--tli-bd-color:var(--tl-color)}.item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:var(--tl-gap)}.root:where([data-orientation=horizontal]) .item:where(:not(:first-of-type)){padding-bottom:0}.bullet{--tl-bullet-offset:calc(var(--tl-size)/2*-1 + var(--tl-line-width)/2*-1);align-items:center;background-color:var(--color-body);border:var(--tl-line-width) solid;border-radius:var(--tli-radius,var(--tl-radius));color:var(--color-text);display:flex;height:var(--tl-size);justify-content:center;position:absolute;top:0;width:var(--tl-size);@mixin where-light{border-color:var(--color-gray-3)}@mixin where-dark{border-color:var(--color-dark-4)}}.root:where([data-align=left]) .bullet{left:var(--tl-bullet-offset);right:auto;@mixin where-rtl{left:auto;right:var(--tl-bullet-offset)}}.root:where([data-align=right]) .bullet{left:auto;right:var(--tl-bullet-offset);@mixin where-rtl{left:var(--tl-bullet-offset);right:auto}}.root:where([data-orientation=horizontal]) .bullet{--tl-bullet-offset:0}.bullet:where([data-with-child]){border-width:var(--tl-line-width);@mixin where-light{background-color:var(--color-gray-3)}@mixin where-dark{background-color:var(--color-dark-4)}}.bullet:where([data-active]){background-color:var(--color-white);border-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.bullet:where([data-active]):where([data-with-child]){background-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.root:where([data-align=left]) .body{padding-inline-start:var(--tl-offset);text-align:left;@mixin where-rtl{text-align:right}}.root:where([data-align=right]) .body{padding-inline-end:var(--tl-offset);text-align:right;@mixin where-rtl{text-align:left}}.root:where([data-orientation=horizontal]) .body{padding-block-start:calc(var(--tl-offset) + var(--spacing-xs));padding-inline:0}.label{font-weight:600;line-height:var(--tl-size)}.content{color:var(--color-dimmed)}
 </style>

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

@@ -27,7 +27,7 @@ export interface TimelineItem {
     [key: string]: any;
 }
 export interface TimelineVars {
-    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius' | '--tl-gap';
 }
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     bullet?: SlotProps<T>;
@@ -57,6 +57,8 @@ export interface TimelineProps<T extends TimelineItem> extends BoxProps {
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
+    /** Gap between items (padding-bottom on each non-last item) */
+    gap?: number | string;
     /** If set, the active items direction is reversed without reversing items order @default false */
     reverse?: boolean;
     /** @default 'vertical' */

package/dist/runtime/components/title.vue

@@ -5,6 +5,7 @@ const {
   order = "2",
   textWrap,
   size,
+  ff = "headings",
   ...rest
 } = defineProps({
   order: { type: String, required: false },
@@ -16,6 +17,7 @@ const {
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
@@ -29,6 +31,7 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 	<Text
 		:is='`h${order}`'
 		v-bind='rest'
+		:ff
 		:size='size || `h${order}`'
 		:class='$style.root'
 		:style

package/dist/runtime/utils/color/get-gradient.js

@@ -1,4 +1,4 @@
-import { DEFAULT_GRADIENT } from "./const.js";
+import { DEFAULT_GRADIENT } from "../const/index.js";
 import { parseThemeColor } from "./parse-theme-color.js";
 export function getGradient(gradient, theme) {
   const merged = {

package/dist/runtime/utils/color/index.d.ts

@@ -1,4 +1,3 @@
-export * from './const.js';
 export * from './get-color-var.js';
 export * from './get-gradient.js';
 export * from './parse-theme-color.js';

package/dist/runtime/utils/color/index.js

@@ -1,4 +1,3 @@
-export * from "./const.js";
 export * from "./get-color-var.js";
 export * from "./get-gradient.js";
 export * from "./parse-theme-color.js";

package/dist/runtime/utils/const/icons.js

@@ -0,0 +1,33 @@
+export const DEFAULT_ICONS = {
+  // ─── Actions ───
+  close: "lucide:x",
+  check: "lucide:check",
+  minus: "lucide:minus",
+  plus: "lucide:plus",
+  // ─── Chevrons ───
+  chevronRight: "lucide:chevron-right",
+  chevronLeft: "lucide:chevron-left",
+  chevronDown: "lucide:chevron-down",
+  chevronUp: "lucide:chevron-up",
+  selectExpand: "lucide:chevrons-up-down",
+  // ─── Inputs ───
+  email: "lucide:at-sign",
+  passwordShow: "lucide:eye",
+  passwordHide: "lucide:eye-off",
+  calendar: "lucide:calendar",
+  clock: "lucide:clock",
+  // ─── User ───
+  person: "lucide:user",
+  // ─── Theme ───
+  sun: "lucide:sun",
+  moon: "lucide:moon",
+  // ─── Files & tree ───
+  upload: "lucide:upload",
+  file: "lucide:file",
+  folder: "lucide:folder",
+  folderOpen: "lucide:folder-open",
+  // ─── Table sort ───
+  sortAsc: "lucide:arrow-up-narrow-wide",
+  sortDesc: "lucide:arrow-down-wide-narrow",
+  sortOff: "lucide:arrow-up-down"
+};

package/dist/runtime/utils/const/index.d.ts

@@ -0,0 +1,2 @@
+export * from './gradient.js';
+export * from './icons.js';

package/dist/runtime/utils/const/index.js

@@ -0,0 +1,2 @@
+export * from "./gradient.js";
+export * from "./icons.js";

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

@@ -1,7 +1,7 @@
 export * from './boolean/index.js';
 export * from './color/index.js';
+export * from './const/index.js';
 export * from './css/index.js';
 export * from './date/index.js';
-export * from './icons/index.js';
 export * from './style/index.js';
 export * from './tree.js';

package/dist/runtime/utils/index.js

@@ -1,7 +1,7 @@
 export * from "./boolean/index.js";
 export * from "./color/index.js";
+export * from "./const/index.js";
 export * from "./css/index.js";
 export * from "./date/index.js";
-export * from "./icons/index.js";
 export * from "./style/index.js";
 export * from "./tree.js";

package/dist/runtime/utils/style/create-variant-color-resolver.d.ts

@@ -1,7 +1,7 @@
 import type { AnyString, NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 export interface VariantColorResolverOptions {
     color: NuanceColor | AnyString | undefined;
-    variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    variant: 'filled' | 'light' | 'outline' | 'light-outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
     gradient?: NuanceGradient;
     theme: NuanceTheme;
 }

package/dist/runtime/utils/style/create-variant-color-resolver.js

@@ -1,6 +1,6 @@
-import { DEFAULT_GRADIENT } from "../color/const.js";
 import { getGradient, getGradientOutline } from "../color/get-gradient.js";
 import { getThemeColor, parseThemeColor } from "../color/parse-theme-color.js";
+import { DEFAULT_GRADIENT } from "../const/index.js";
 export function createVariantColorResolver({
   color = "primary",
   variant,
@@ -57,6 +57,22 @@ export function createVariantColorResolver({
       border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
     };
   }
+  if (variant === "light-outline") {
+    if (parsed.shade === void 0) {
+      return {
+        background: `var(--color-${color}-light)`,
+        hover: `var(--color-${color}-light-hover)`,
+        text: `var(--color-${color}-light-color)`,
+        border: `1px solid var(--color-${color}-outline)`
+      };
+    }
+    return {
+      background: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .1)`,
+      hover: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .12)`,
+      text: `var(--color-${parsed.color}-${Math.min(parsed.shade, 6)})`,
+      border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
+    };
+  }
   if (variant === "subtle") {
     if (parsed.shade === void 0) {
       return {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.33",
-	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
+	"version": "0.2.35",
+	"description": "A modern Nuxt UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Igor-Iugin/nuance-ui.git"
@@ -78,6 +78,7 @@
 	},
 	"devDependencies": {
 		"@antfu/eslint-config": "^8.2.0",
+		"@nuxt/icon": "^2.2.1",
 		"@nuxt/devtools": "^3.1.1",
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",

package/dist/runtime/utils/icons/default-icons.js

@@ -1,33 +0,0 @@
-export const DEFAULT_ICONS = {
-  // ─── Actions ───
-  close: "gravity-ui:xmark",
-  check: "gravity-ui:check",
-  minus: "gravity-ui:minus",
-  plus: "gravity-ui:plus",
-  // ─── Chevrons ───
-  chevronRight: "gravity-ui:chevron-right",
-  chevronLeft: "gravity-ui:chevron-left",
-  chevronDown: "gravity-ui:chevron-down",
-  chevronUp: "gravity-ui:chevron-up",
-  selectExpand: "gravity-ui:chevrons-expand-vertical",
-  // ─── Inputs ───
-  email: "gravity-ui:at",
-  passwordShow: "gravity-ui:eye",
-  passwordHide: "gravity-ui:eye-slash",
-  calendar: "gravity-ui:calendar",
-  clock: "gravity-ui:clock",
-  // ─── User ───
-  person: "gravity-ui:person",
-  // ─── Theme ───
-  sun: "gravity-ui:sun",
-  moon: "gravity-ui:moon",
-  // ─── Files & tree ───
-  upload: "gravity-ui:arrow-shape-up-from-line",
-  file: "gravity-ui:file",
-  folder: "gravity-ui:folder",
-  folderOpen: "gravity-ui:folder-open",
-  // ─── Table sort ───
-  sortAsc: "gravity-ui:bars-descending-align-left-arrow-up",
-  sortDesc: "gravity-ui:bars-descending-align-left-arrow-down",
-  sortOff: "gravity-ui:bars-descending-align-left"
-};

package/dist/runtime/utils/icons/index.d.ts

@@ -1 +0,0 @@
-export * from './default-icons.js';

package/dist/runtime/utils/icons/index.js

@@ -1 +0,0 @@
-export * from "./default-icons.js";