nuance-ui 0.2.19 → 0.2.22

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

@@ -1,26 +1,14 @@
 <script setup>
 import { useVarsResolver } from "@nui/composables";
 import { getRadius, getThemeColor } from "@nui/utils";
-import { onMounted, useId } from "vue";
+import { computed, onMounted, toRefs, useId } from "vue";
 import Box from "../box.vue";
 import { getSafeId, useProvideTabsContext } from "./lib";
 import css from "./tabs.module.css";
-const {
-  is,
-  id,
-  mod,
-  radius,
-  color,
-  placement = "left",
-  inverted,
-  orientation = "horizontal",
-  variant = "default",
-  defaultTab,
-  ...rest
-} = defineProps({
-  orientation: { type: String, required: false },
-  placement: { type: String, required: false },
-  variant: { type: String, required: false },
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  placement: { type: String, required: false, default: "left" },
+  variant: { type: String, required: false, default: "default" },
   color: { type: null, required: false },
   radius: { type: [String, Number], required: false },
   inverted: { type: Boolean, required: false },
@@ -33,36 +21,34 @@ const {
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const uid = id ?? useId();
+const uid = computed(() => props.id ?? useId());
 const active = defineModel({ type: [String, null], ...{ default: null } });
 onMounted(() => {
-  if (active.value === null && defaultTab) {
-    active.value = defaultTab;
+  if (active.value === null && props.defaultTab) {
+    active.value = props.defaultTab;
   }
 });
 const style = useVarsResolver((theme) => ({
   root: {
-    "--tabs-radius": getRadius(radius),
-    "--tabs-color": getThemeColor(color, theme)
+    "--tabs-radius": getRadius(props.radius),
+    "--tabs-color": getThemeColor(props.color, theme)
   }
 }));
 const VALUE_ERROR = "component was rendered with invalid value or without value";
+const refs = toRefs(props);
 useProvideTabsContext({
-  ...rest,
-  id: uid,
-  getTabId: getSafeId(`${uid}-tab`, `TabsTab ${VALUE_ERROR}`),
-  getPanelId: getSafeId(`${uid}-panel`, `TabsPanel ${VALUE_ERROR}`),
-  variant,
+  ...refs,
   active,
-  inverted,
-  placement
+  id: uid,
+  getTabId: getSafeId(`${uid.value}-tab`, `TabsTab ${VALUE_ERROR}`),
+  getPanelId: getSafeId(`${uid.value}-panel`, `TabsPanel ${VALUE_ERROR}`)
 });
 </script>
 
 <template>
 	<Box
 		:is
-		:style
+		:style='style.root'
 		:mod='[mod, {
   orientation,
   inverted: orientation === "horizontal" && inverted,

package/dist/runtime/components/tabs/tabs-root.vue.d.ts

@@ -61,7 +61,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "update:modelValue": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    orientation: "vertical" | "horizontal";
+    variant: TabsVariant;
+    placement: "left" | "right";
+}, {}, {}, {}, 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;

package/dist/runtime/components/tabs/tabs-tab.vue

@@ -16,11 +16,11 @@ const active = computed(() => value === ctx?.active.value);
 	<UnstyledButton
 		:id='ctx?.getTabId(value)'
 		:mod='[mod, {
-  variant: ctx?.variant,
+  variant: ctx?.variant.value,
   active,
-  orientation: ctx?.orientation,
-  inverted: ctx?.inverted,
-  placement: ctx?.orientation === "vertical" && ctx.placement
+  orientation: ctx?.orientation.value,
+  inverted: ctx?.inverted.value,
+  placement: ctx?.orientation.value === "vertical" && ctx.placement.value
 }]'
 		:class='css.tab'
 		role='tab'

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

@@ -1 +1 @@
-.root{--tabs-radius:var(--radius-default);--tabs-color:var(--radius-default);@mixin light{--tab-border-color:var(--color-gray-3)}@mixin dark{--tab-border-color:var(--color-dark-4)}display:var(--tabs-display);flex-direction:var(--tabs-flex-direction);--tabs-list-direction:row;--tabs-panel-grow:unset;--tabs-display:grid;--tabs-flex-direction:row;--tabs-list-border-width:0;--tabs-list-border-size:0 0 var(--tabs-list-border-width) 0;--tabs-list-gap:unset;--tabs-list-line-bottom:0;--tabs-list-line-top:unset;--tabs-list-line-start:0;--tabs-list-line-end:0;--tab-radius:var(--tabs-radius) var(--tabs-radius) 0 0;--tab-border-width:0 0 var(--tabs-list-border-width) 0}.root[data-inverted]{--tabs-list-line-bottom:unset;--tabs-list-line-top:0;--tab-radius:0 0 var(--tabs-radius) var(--tabs-radius);--tab-border-width:var(--tabs-list-border-width) 0 0 0}.root[data-inverted] .list--default:before{bottom:unset;top:0}.root[data-orientation=vertical]{--tabs-list-line-start:unset;--tabs-list-line-end:0;--tabs-list-line-top:0;--tabs-list-line-bottom:0;--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius);--tabs-list-direction:column;--tabs-panel-grow:1;--tabs-display:flex;@mixin rtl{--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}}.root[data-orientation=vertical][data-placement=right]{--tabs-flex-direction:row-reverse;--tabs-list-line-start:0;--tabs-list-line-end:unset;--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0;@mixin rtl{--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}}.root[data-variant=default]{--tabs-list-border-width:2px;@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.root[data-variant=outline]{--tabs-list-border-width:1px}.root[data-variant=pills]{--tabs-list-gap:calc(var(--spacing-sm)/2);@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.list{--tabs-justify:flex-start;display:flex;flex-direction:var(--tabs-list-direction);flex-wrap:wrap;gap:var(--tabs-list-gap);justify-content:var(--tabs-justify)}.list:where([data-grow]) .tab{flex:1}.panel{flex-grow:var(--tabs-panel-grow)}.panel[data-active=false]{display:none}.tab{align-items:center;display:flex;font-size:var(--font-size-sm);line-height:1;padding:var(--spacing-xs) var(--spacing-md);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;z-index:0}.tab:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.5}.tab:focus{z-index:1}.tabSection{align-items:center;display:flex;justify-content:center}.tabSection:where([data-position=left]:not(:only-child)){margin-inline-end:var(--spacing-xs)}.tabSection:where([data-position=right]:not(:only-child)){margin-inline-start:var(--spacing-xs)}.tabLabel{flex:1;text-align:center}.list[data-variant=default]{position:relative}.list[data-variant=default]:before{border:1px solid var(--tab-border-color);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=default]{background-color:transparent;border-color:transparent;border-radius:var(--tab-radius);border-style:solid;border-width:var(--tab-border-width)}.tab[data-variant=default]:where([data-active]){border-color:var(--tabs-color)}.tab[data-variant=default]{@mixin hover{background-color:var(--tab-hover-color);&:where(:not([data-active])){border-color:var(--tab-border-color)}}}.tab[data-variant=default]:disabled,.tab[data-variant=default][data-disabled]{@mixin hover{background-color:transparent}}.list[data-variant=outline]{position:relative}.list[data-variant=outline]:before{border-color:var(--tab-border-color);border-style:solid;border-width:var(--tabs-list-border-size);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=outline]{border-bottom:1px solid transparent;border-bottom-color:var(--tab-border-bottom-color);border-left:1px solid transparent;border-radius:var(--tab-radius);border-right:1px solid transparent;border-top:1px solid transparent;border-top-color:var(--tab-border-top-color);position:relative;--tab-border-bottom-color:transparent;--tab-border-top-color:transparent;--tab-border-inline-end-color:transparent;--tab-border-inline-start-color:transparent}.tab[data-variant=outline]:where([data-active]):before{background-color:var(--tab-border-color);bottom:var(--tab-before-bottom,rem(-1px));content:"";height:1px;left:var(--tab-before-left,rem(-1px));position:absolute;right:var(--tab-before-right,auto);top:var(--tab-before-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]):after{background-color:var(--tab-border-color);bottom:var(--tab-after-bottom,rem(-1px));content:"";height:1px;left:var(--tab-after-left,auto);position:absolute;right:var(--tab-after-right,rem(-1px));top:var(--tab-after-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]){border-bottom-color:var(--tab-border-bottom-color);border-inline-end-color:var(--tab-border-inline-end-color);border-inline-start-color:var(--tab-border-inline-start-color);border-top-color:var(--tab-border-top-color);--tab-border-top-color:var(--tab-border-color);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--color-body)}.tab[data-variant=outline]:where([data-active])[data-inverted]{--tab-border-bottom-color:var(--tab-border-color);--tab-border-top-color:var(--color-body);--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-bottom:auto;--tab-after-top:-1px}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=left]{--tab-border-inline-end-color:var(--color-body);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-right:-1px;--tab-before-left:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-left:auto;--tab-after-right:-1px;@mixin rtl{--tab-before-right:auto;--tab-before-left:-1px;--tab-after-left:-1px;--tab-after-right:auto}}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=right]{--tab-border-inline-start-color:var(--color-body);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-left:-1px;--tab-before-right:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-right:auto;--tab-after-left:-1px;@mixin rtl{--tab-before-left:auto;--tab-before-right:-1px;--tab-after-right:-1px;--tab-after-left:auto}}.tab[data-variant=pills]{background-color:var(--tab-bg);border-radius:var(--tabs-radius);color:var(--tab-color);--tab-bg:transparent;--tab-color:inherit}.tab[data-variant=pills]:not([data-disabled]){@mixin hover{--tab-bg:var(--tab-hover-color)}}.tab[data-variant=pills][data-active][data-active]{--tab-bg:var(--tabs-color);--tab-color:var(--tabs-text-color,var(--color-white));@mixin hover{--tab-bg:var(--tabs-color)}}
+.root{--tabs-radius:var(--radius-default);--tabs-color:var(--radius-default);@mixin light{--tab-border-color:var(--color-gray-3)}@mixin dark{--tab-border-color:var(--color-dark-4)}display:var(--tabs-display);flex-direction:var(--tabs-flex-direction);--tabs-list-direction:row;--tabs-panel-grow:unset;--tabs-display:grid;--tabs-flex-direction:row;--tabs-list-border-width:0;--tabs-list-border-size:0 0 var(--tabs-list-border-width) 0;--tabs-list-gap:unset;--tabs-list-line-bottom:0;--tabs-list-line-top:unset;--tabs-list-line-start:0;--tabs-list-line-end:0;--tab-radius:var(--tabs-radius) var(--tabs-radius) 0 0;--tab-border-width:0 0 var(--tabs-list-border-width) 0}.root[data-inverted]{--tabs-list-line-bottom:unset;--tabs-list-line-top:0;--tab-radius:0 0 var(--tabs-radius) var(--tabs-radius);--tab-border-width:var(--tabs-list-border-width) 0 0 0}.root[data-inverted] .list--default:before{bottom:unset;top:0}.root[data-orientation=vertical]{--tabs-list-line-start:unset;--tabs-list-line-end:0;--tabs-list-line-top:0;--tabs-list-line-bottom:0;--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius);--tabs-list-direction:column;--tabs-panel-grow:1;--tabs-display:flex;@mixin rtl{--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}}.root[data-orientation=vertical][data-placement=right]{--tabs-flex-direction:row-reverse;--tabs-list-line-start:0;--tabs-list-line-end:unset;--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0;@mixin rtl{--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}}.root[data-variant=default]{--tabs-list-border-width:2px;@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.root[data-variant=outline]{--tabs-list-border-width:1px}.root[data-variant=pills]{--tabs-list-gap:calc(var(--spacing-sm)/2);@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.list{--tabs-justify:flex-start;display:flex;flex-direction:var(--tabs-list-direction);flex-wrap:wrap;gap:var(--tabs-list-gap);justify-content:var(--tabs-justify)}.list:where([data-grow]) .tab{flex:1}.panel{flex-grow:var(--tabs-panel-grow)}.panel[data-active=false]{display:none}.tab{align-items:center;display:flex;font-size:var(--font-size-md);line-height:1;padding:var(--spacing-xs) var(--spacing-md);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;z-index:0}.tab:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.5}.tab:focus{z-index:1}.tabSection{align-items:center;display:flex;justify-content:center}.tabSection:where([data-position=left]:not(:only-child)){margin-inline-end:var(--spacing-xs)}.tabSection:where([data-position=right]:not(:only-child)){margin-inline-start:var(--spacing-xs)}.tabLabel{flex:1;text-align:center}.list[data-variant=default]{position:relative}.list[data-variant=default]:before{border:1px solid var(--tab-border-color);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=default]{background-color:transparent;border-color:transparent;border-radius:var(--tab-radius);border-style:solid;border-width:var(--tab-border-width)}.tab[data-variant=default]:where([data-active]){border-color:var(--tabs-color)}.tab[data-variant=default]{@mixin hover{background-color:var(--tab-hover-color);&:where(:not([data-active])){border-color:var(--tab-border-color)}}}.tab[data-variant=default]:disabled,.tab[data-variant=default][data-disabled]{@mixin hover{background-color:transparent}}.list[data-variant=outline]{position:relative}.list[data-variant=outline]:before{border-color:var(--tab-border-color);border-style:solid;border-width:var(--tabs-list-border-size);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=outline]{border-bottom:1px solid transparent;border-bottom-color:var(--tab-border-bottom-color);border-left:1px solid transparent;border-radius:var(--tab-radius);border-right:1px solid transparent;border-top:1px solid transparent;border-top-color:var(--tab-border-top-color);position:relative;--tab-border-bottom-color:transparent;--tab-border-top-color:transparent;--tab-border-inline-end-color:transparent;--tab-border-inline-start-color:transparent}.tab[data-variant=outline]:where([data-active]):before{background-color:var(--tab-border-color);bottom:var(--tab-before-bottom,rem(-1px));content:"";height:1px;left:var(--tab-before-left,rem(-1px));position:absolute;right:var(--tab-before-right,auto);top:var(--tab-before-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]):after{background-color:var(--tab-border-color);bottom:var(--tab-after-bottom,rem(-1px));content:"";height:1px;left:var(--tab-after-left,auto);position:absolute;right:var(--tab-after-right,rem(-1px));top:var(--tab-after-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]){border-bottom-color:var(--tab-border-bottom-color);border-inline-end-color:var(--tab-border-inline-end-color);border-inline-start-color:var(--tab-border-inline-start-color);border-top-color:var(--tab-border-top-color);--tab-border-top-color:var(--tab-border-color);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--color-body)}.tab[data-variant=outline]:where([data-active])[data-inverted]{--tab-border-bottom-color:var(--tab-border-color);--tab-border-top-color:var(--color-body);--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-bottom:auto;--tab-after-top:-1px}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=left]{--tab-border-inline-end-color:var(--color-body);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-right:-1px;--tab-before-left:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-left:auto;--tab-after-right:-1px;@mixin rtl{--tab-before-right:auto;--tab-before-left:-1px;--tab-after-left:-1px;--tab-after-right:auto}}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=right]{--tab-border-inline-start-color:var(--color-body);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-left:-1px;--tab-before-right:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-right:auto;--tab-after-left:-1px;@mixin rtl{--tab-before-left:auto;--tab-before-right:-1px;--tab-after-right:-1px;--tab-after-left:auto}}.tab[data-variant=pills]{background-color:var(--tab-bg);border-radius:var(--tabs-radius);color:var(--tab-color);--tab-bg:transparent;--tab-color:inherit}.tab[data-variant=pills]:not([data-disabled]){@mixin hover{--tab-bg:var(--tab-hover-color)}}.tab[data-variant=pills][data-active][data-active]{--tab-bg:var(--tabs-color);--tab-color:var(--tabs-text-color,var(--color-white));@mixin hover{--tab-bg:var(--tabs-color)}}

package/dist/runtime/components/text.vue

@@ -59,5 +59,5 @@ const style = useVarsResolver((theme) => ({
 </template>
 
 <style module>
-.root{--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;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-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/time-picker/time-picker.vue

@@ -189,5 +189,5 @@ const isClearable = computed(() => clearable && !readonly && !disabled && (hours
 </template>
 
 <style module>
-.root{align-items:center;display:flex;height:100%;overflow:hidden;@mixin where-rtl{flex-direction:row-reverse}}.group{align-items:center;display:flex;height:calc(var(--input-height) - rem(15px))}.controls{display:flex;flex-direction:column}.controlsGroup{display:flex;gap:.25rem}.dropdown{padding:.25rem}.control{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-sm));height:2em;min-width:2.5em;text-align:center;width:-moz-max-content;width:max-content}.control:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.control{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetControl{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-sm));height:2em;padding-inline:.5em;text-align:center}.presetControl:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.presetControl{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetsGroup+.presetsGroup{margin-top:var(--spacing-sm)}.presetsGroupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--control-font-size, var(--font-size-sm)) - 2px);font-weight:500;margin-bottom:.25rem;padding-inline-start:7px}.presetsGroupLabel:after{content:"";flex:1;height:1px;margin-inline-start:var(--spacing-xs);width:100%;@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}
+.root{align-items:center;display:flex;height:100%;overflow:hidden;@mixin where-rtl{flex-direction:row-reverse}}.group{align-items:center;display:flex;height:calc(var(--input-height) - rem(15px))}.controls{display:flex;flex-direction:column}.controlsGroup{display:flex;gap:.25rem}.dropdown{padding:.25rem}.control{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-md));height:2em;min-width:2.5em;text-align:center;width:-moz-max-content;width:max-content}.control:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.control{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetControl{border-radius:var(--radius-default);font-size:var(--control-font-size,var(--font-size-md));height:2em;padding-inline:.5em;text-align:center}.presetControl:where([data-active]){background-color:var(--color-primary-filled);color:var(--color-white)}.presetControl{@mixin hover{&:where(:not([data-active])){color:var(--color-bright);@mixin where-dark{background-color:var(--color-dark-5)}@mixin where-light{background-color:var(--color-gray-1)}}}}.presetsGroup+.presetsGroup{margin-top:var(--spacing-sm)}.presetsGroupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--control-font-size, var(--font-size-md)) - 2px);font-weight:500;margin-bottom:.25rem;padding-inline-start:7px}.presetsGroupLabel:after{content:"";flex:1;height:1px;margin-inline-start:var(--spacing-xs);width:100%;@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}
 </style>

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

@@ -64,6 +64,7 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 				:aria-selected='selected'
 				:mod='{ active, selected, "tree-item": path }'
 				right-section-p-e='all'
+				justify='flex-start'
 				@click.prevent='handleClick'
 				@keydown.prevent='handleKeyDown'
 			>

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

@@ -12,7 +12,7 @@ const {
   loop,
   orientation,
   variant = "subtle",
-  size = "compact-sm",
+  size = "md",
   iconResolver = () => ({ icon: "gravity-ui:file" }),
   removable = false,
   selectable = false,

package/dist/runtime/components/tree/tree.vue

@@ -6,7 +6,7 @@ import { filterTreeItems } from "./lib/filter-tree-items";
 const {
   color,
   variant = "subtle",
-  size = "compact-sm",
+  size = "md",
   loadBranch,
   filter = "directory",
   ...props

package/dist/runtime/modals/_confirm-modal/confirm-modal.vue

@@ -2,8 +2,10 @@
 import { ref } from "vue";
 import Button from "../../components/button/button.vue";
 import ModalCloseButton from "../../components/modal/modal-close-button.vue";
+import ModalFooter from "../../components/modal/modal-footer.vue";
 import ModalHeader from "../../components/modal/modal-header.vue";
 import ModalRoot from "../../components/modal/modal-root.vue";
+import ModalSection from "../../components/modal/modal-section.vue";
 import Title from "../../components/title.vue";
 import { useModal } from "../use-modal";
 const {
@@ -53,11 +55,19 @@ async function hanleConfirm() {
 			<ModalCloseButton />
 		</ModalHeader>
 
-		<p v-if='body' :class='$style.body'>
-			{{ body }}
-		</p>
+		<ModalSection bordered>
+			<p v-if='body' :class='$style.body'>
+				{{ body }}
+			</p>
+		</ModalSection>
 
-		<footer :class='$style.footer'>
+		<ModalSection bordered>
+			<p v-if='body' :class='$style.body'>
+				{{ body }}
+			</p>
+		</ModalSection>
+
+		<ModalFooter :class='$style.footer'>
 			<Button
 				variant='default'
 				v-bind='cancelProps'
@@ -74,10 +84,10 @@ async function hanleConfirm() {
 			>
 				{{ labels?.confirm ?? "Confirm" }}
 			</Button>
-		</footer>
+		</ModalFooter>
 	</ModalRoot>
 </template>
 
 <style module>
-.body{color:var(--color-dimmed);margin:0}.footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-md)}
+.body{color:var(--color-dimmed);margin:0}.footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end}
 </style>

package/dist/runtime/styles/const.css

@@ -1 +1 @@
-:root{--mantine-scale:1;--font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--font-family-headings:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-family-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--heading-text-wrap:wrap;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-h1:2.125rem;--line-height-h1:1.3;--font-weight-h1:700;--font-size-h2:1.625rem;--line-height-h2:1.35;--font-weight-h2:700;--font-size-h3:1.375rem;--line-height-h3:1.4;--font-weight-h3:700;--font-size-h4:1.125rem;--line-height-h4:1.45;--font-weight-h4:700;--font-size-h5:1rem;--line-height-h5:1.5;--font-weight-h5:700;--font-size-h6:0.875rem;--line-height-h6:1.5;--font-weight-h6:700;--spacing-2xs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:2rem;--radius-default:var(--radius-sm);--line-height:1.55;--line-height-xs:1.4;--line-height-sm:1.45;--line-height-md:1.55;--line-height-lg:1.6;--line-height-xl:1.65;--shadow-xs:0 0.0625rem 0.1875rem rgba(0,0,0,.05),0 0.0625rem 0.125rem rgba(0,0,0,.1);--shadow-sm:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 0.625rem 0.9375rem -0.3125rem,rgba(0,0,0,.04) 0 0.4375rem 0.4375rem -0.3125rem;--shadow-md:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.25rem 1.5625rem -0.3125rem,rgba(0,0,0,.04) 0 0.625rem 0.625rem -0.3125rem;--shadow-lg:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.75rem 1.4375rem -0.4375rem,rgba(0,0,0,.04) 0 0.75rem 0.75rem -0.4375rem;--shadow-xl:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 2.25rem 1.75rem -0.4375rem,rgba(0,0,0,.04) 0 1.0625rem 1.0625rem -0.4375rem;--breakpoint-xs:36em;--breakpoint-sm:48em;--breakpoint-md:62em;--breakpoint-lg:75em;--breakpoint-xl:88em}
+:root{--mantine-scale:1;--font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--font-family-headings:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--font-family-mono:"JetBrains Mono","JetBrainsMono Nerd Font","SF Mono",Menlo,Consolas,monospace;--heading-text-wrap:wrap;--font-size-xs:.5rem;--font-size-sm:.75rem;--font-size-md:.875rem;--font-size-lg:1rem;--font-size-xl:1.125rem;--font-size-h1:2.125rem;--line-height-h1:1.3;--font-weight-h1:700;--font-size-h2:1.625rem;--line-height-h2:1.35;--font-weight-h2:700;--font-size-h3:1.375rem;--line-height-h3:1.4;--font-weight-h3:700;--font-size-h4:1.125rem;--line-height-h4:1.45;--font-weight-h4:700;--font-size-h5:1rem;--line-height-h5:1.5;--font-weight-h5:600;--font-size-h6:0.875rem;--line-height-h6:1.5;--font-weight-h6:600;--spacing-2xs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:2rem;--radius-default:var(--radius-md);--line-height:1.55;--line-height-xs:1.4;--line-height-sm:1.45;--line-height-md:1.55;--line-height-lg:1.6;--line-height-xl:1.65;--shadow-xs:0 0.0625rem 0.1875rem rgba(0,0,0,.05),0 0.0625rem 0.125rem rgba(0,0,0,.1);--shadow-sm:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 0.625rem 0.9375rem -0.3125rem,rgba(0,0,0,.04) 0 0.4375rem 0.4375rem -0.3125rem;--shadow-md:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.25rem 1.5625rem -0.3125rem,rgba(0,0,0,.04) 0 0.625rem 0.625rem -0.3125rem;--shadow-lg:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.75rem 1.4375rem -0.4375rem,rgba(0,0,0,.04) 0 0.75rem 0.75rem -0.4375rem;--shadow-xl:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 2.25rem 1.75rem -0.4375rem,rgba(0,0,0,.04) 0 1.0625rem 1.0625rem -0.4375rem;--breakpoint-xs:36em;--breakpoint-sm:48em;--breakpoint-md:62em;--breakpoint-lg:75em;--breakpoint-xl:88em}

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

@@ -1,6 +1,7 @@
+import type { HTMLAttributes } from 'vue';
 export type CssVariable = `--${string}`;
 export type TransformVars<V> = {
     [Key in keyof V]: V[Key] extends CssVariable ? Record<V[Key], string | number | undefined> : never;
 };
 /** Map of component part names to user-provided class names. */
-export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;
+export type Classes<Key extends string> = Partial<Record<Key, HTMLAttributes['class']>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.19",
+	"version": "0.2.22",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -81,6 +81,7 @@
 		"@nuxt/devtools": "^3.1.1",
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",
+		"@nuxt/image": "^2.0.0",
 		"@nuxt/module-builder": "^1.0.2",
 		"@nuxt/schema": "^4.4.2",
 		"@nuxt/test-utils": "^4.0.0",