nuance-ui 0.2.19 → 0.2.22

package/dist/runtime/components/input/ui/button-input.vue.d.ts

@@ -2,7 +2,7 @@ import type { Classes } from '@nui/types';
 import type { InputBaseProps } from '../types.js';
 import type { BaseInputProps } from './input-base.vue.js';
 import type { InputWrapperProps } from './input-wrapper.vue.js';
-export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, InputBaseProps {
+export interface ButtonInputProps extends InputWrapperProps, Omit<BaseInputProps, 'error'>, InputBaseProps {
     /**
      * If set, the input can have multiple lines, for example when `component="textarea"`
      *  @default `false`

package/dist/runtime/components/input/ui/input-base.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getFontSize, getRadius, getSize } from "@nui/utils";
+import { getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../../box.vue";
 import { useInputWrapperState } from "../lib/input-wrapper.context";
@@ -19,7 +19,7 @@ defineSlots();
 const api = computed(() => useInputWrapperState() ?? props);
 const style = computed(() => ({
   "--input-height": getSize(api.value.size, "input-height"),
-  "--input-fz": getFontSize(api.value.size),
+  "--input-fz": getSize(api.value.size, "input-fz"),
   "--input-radius": api.value.radius === void 0 ? void 0 : getRadius(api.value.radius),
   "--input-padding-y": api.value.multiline ? getSize(api.value.size, "input-padding-y") : void 0,
   "--input-left-section-pointer-events": api.value.leftSectionPE,
@@ -60,5 +60,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input:has(input:disabled),.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:-moz-read-only{cursor:default}.input:read-only{cursor:default}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
+.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-fz-xs:var(--font-size-sm);--input-fz-sm:var(--font-size-md);--input-fz-md:var(--font-size-md);--input-fz-lg:var(--font-size-lg);--input-fz-xl:var(--font-size-xl);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-md);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input:has(input:disabled),.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:-moz-read-only{cursor:default}.input:read-only{cursor:default}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
 </style>

package/dist/runtime/components/input/ui/input-inline.vue

@@ -61,5 +61,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.root{--label-lh-xs:rem(16px);--label-lh-sm:rem(20px);--label-lh-md:rem(24px);--label-lh-lg:rem(30px);--label-lh-xl:rem(36px);--label-lh:var(--label-lh-sm);--label-fz:var(--font-size-sm)}.root[data-label-position=left]{--label-order:0}.root[data-label-position=right]{--label-order:1}.body{display:flex;gap:var(--spacing-sm)}.wrapper{--label-cursor:default;cursor:var(--label-cursor);display:inline-flex;flex-direction:column;font-size:var(--label-fz);gap:.25rem;line-height:var(--label-lh);order:var(--label-order);-webkit-tap-highlight-color:transparent}.wrapper[data-disabled],fieldset:disabled .wrapper{--label-cursor:not-allowed}.wrapper:empty{display:none}.label{color:inherit;cursor:var(--label-cursor)}.label:where([data-disabled]),fieldset:disabled .label{color:var(--color-gray-5)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}.error{color:var(--color-error);font-size:var(--input-error-size)}
+.root{--label-lh-xs:rem(16px);--label-lh-sm:rem(20px);--label-lh-md:rem(24px);--label-lh-lg:rem(30px);--label-lh-xl:rem(36px);--label-lh:var(--label-lh-md);--label-fz:var(--font-size-md)}.root[data-label-position=left]{--label-order:0}.root[data-label-position=right]{--label-order:1}.body{display:flex;gap:var(--spacing-sm)}.wrapper{--label-cursor:default;cursor:var(--label-cursor);display:inline-flex;flex-direction:column;font-size:var(--label-fz);gap:.25rem;line-height:var(--label-lh);order:var(--label-order);-webkit-tap-highlight-color:transparent}.wrapper[data-disabled],fieldset:disabled .wrapper{--label-cursor:not-allowed}.wrapper:empty{display:none}.label{color:inherit;cursor:var(--label-cursor)}.label:where([data-disabled]),fieldset:disabled .label{color:var(--color-gray-5)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}.error{color:var(--color-error);font-size:var(--input-error-size)}
 </style>

package/dist/runtime/components/input/ui/input-label.vue

@@ -19,5 +19,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.root{--input-label-size:var(--font-size-sm);--input-asterisk-color:var(--color-error);cursor:default;display:block;font-size:var(--input-label-size);font-weight:500;overflow-wrap:anywhere;word-break:normal;-webkit-tap-highlight-color:transparent}.required{color:var(--input-asterisk-color)}
+.root{--input-label-size:var(--font-size-md);--input-asterisk-color:var(--color-error);cursor:default;display:block;font-size:var(--input-label-size);font-weight:500;overflow-wrap:anywhere;word-break:normal;-webkit-tap-highlight-color:transparent}.required{color:var(--input-asterisk-color)}
 </style>

package/dist/runtime/components/input/ui/input-wrapper.vue

@@ -56,5 +56,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.wrapper{--input-error-size:calc(var(--font-size-sm) - rem(2px));--input-description-size:calc(var(--font-size-sm) - rem(2px));line-height:var(--line-height)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.error{color:var(--color-error);font-size:var(--input-error-size)}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}
+.wrapper{--input-error-size:calc(var(--font-size-sm) - rem(2px));--input-description-size:calc(var(--font-size-sm) - rem(2px));line-height:var(--line-height)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.label{margin-bottom:.125rem}.error{color:var(--color-error);font-size:var(--input-error-size)}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}
 </style>

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

@@ -1,3 +1 @@
-export type * from './modal-header.vue';
 export type * from './modal-root.vue';
-export type * from './modal-title.vue';

package/dist/runtime/components/modal/modal-footer.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & 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/modal/modal-footer.vue

@@ -0,0 +1,13 @@
+<script setup>
+import DialogFooter from "../dialog/ui/dialog-footer.vue";
+const props = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogFooter v-bind='props'>
+		<slot />
+	</DialogFooter>
+</template>

package/dist/runtime/components/modal/modal-footer.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DialogFooterProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogFooterProps> & 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/modal/modal-header.d.vue.ts

@@ -1,11 +1,9 @@
 import type { DialogHeaderProps } from '../dialog/index.js';
-export interface ModalHeaderProps extends DialogHeaderProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & 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;

package/dist/runtime/components/modal/modal-header.vue.d.ts

@@ -1,11 +1,9 @@
 import type { DialogHeaderProps } from '../dialog/index.js';
-export interface ModalHeaderProps extends DialogHeaderProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & 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;

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

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

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

@@ -8,6 +8,7 @@ const {
   withoutOverlay = false,
   withinPortal = false,
   closeOnClickOutside = true,
+  classes,
   ...rest
 } = defineProps({
   centered: { type: Boolean, required: false },
@@ -15,6 +16,7 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
@@ -34,11 +36,11 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 	<DialogRoot
 		v-model:open='opened'
 		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
 		:within-portal
 		:close-on-click-outside
 		:without-overlay
 		v-bind='rest'
+		:classes='{ ...classes, root: [css.root, classes?.root] }'
 		@open='$emit("open")'
 		@close='$emit("close")'
 	>

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

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

package/dist/runtime/components/modal/modal-section.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & 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/modal/modal-section.vue

@@ -0,0 +1,14 @@
+<script setup>
+import DialogSection from "../dialog/ui/dialog-section.vue";
+const props = defineProps({
+  bordered: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogSection v-bind='props'>
+		<slot />
+	</DialogSection>
+</template>

package/dist/runtime/components/modal/modal-section.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & 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/modal/modal-title.d.vue.ts

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & 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;

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

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & 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;

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

@@ -108,5 +108,5 @@ const style = useVarsResolver((theme) => {
 </template>
 
 <style module>
-.root{--nl-spacing-xs:.25rem;--nl-spacing-sm:.5rem;--nl-spacing-md:.75rem;--nl-spacing-lg:1rem;--nl-spacing-xl:1.25rem;--nl-bg:var(--color-primary-light);--nl-hover:var(--color-primary-light-hover);--nl-color:var(--color-primary-light-color);--nl-spacing:var(--nl-spacing-xs);align-items:center;border-radius:var(--radius-default);display:flex;gap:var(--nl-spacing);padding:.25rem var(--spacing-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.root:where([data-disabled]){opacity:.4;pointer-events:none}.root:hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-6)}}.root:where([data-active]){background-color:var(--nl-bg);color:var(--nl-color)}.root:where([data-active]) .description{--description-opacity:0.9;--description-color:var(--nl-color)}.root:where([data-active]):hover{background-color:var(--nl-hover)}.section{align-items:center;display:flex;justify-content:center;transition:transform .15s ease}.section>svg{display:block}.section:where([data-rotate]){transform:rotate(90deg)}.label{font-size:var(--font-size-sm)}.body{flex:1;overflow:hidden;text-overflow:ellipsis}.body:where([data-no-wrap]){white-space:nowrap}.description{color:var(--description-color,var(--color-dimmed));font-size:var(--font-size-xs);opacity:var(--description-opacity,1);overflow:hidden;text-overflow:ellipsis}:where([data-no-wrap]) .description{white-space:nowrap}
+.root{--nl-spacing-xs:.25rem;--nl-spacing-sm:.5rem;--nl-spacing-md:.75rem;--nl-spacing-lg:1rem;--nl-spacing-xl:1.25rem;--nl-bg:var(--color-primary-light);--nl-hover:var(--color-primary-light-hover);--nl-color:var(--color-primary-light-color);--nl-spacing:var(--nl-spacing-xs);align-items:center;border-radius:var(--radius-default);display:flex;gap:var(--nl-spacing);padding:.25rem var(--spacing-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.root:where([data-disabled]){opacity:.4;pointer-events:none}.root:hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-6)}}.root:where([data-active]){background-color:var(--nl-bg);color:var(--nl-color)}.root:where([data-active]) .description{--description-opacity:0.9;--description-color:var(--nl-color)}.root:where([data-active]):hover{background-color:var(--nl-hover)}.section{align-items:center;display:flex;justify-content:center;transition:transform .15s ease}.section>svg{display:block}.section:where([data-rotate]){transform:rotate(90deg)}.label{font-size:var(--font-size-md)}.body{flex:1;overflow:hidden;text-overflow:ellipsis}.body:where([data-no-wrap]){white-space:nowrap}.description{color:var(--description-color,var(--color-dimmed));font-size:var(--font-size-sm);opacity:var(--description-opacity,1);overflow:hidden;text-overflow:ellipsis}:where([data-no-wrap]) .description{white-space:nowrap}
 </style>

package/dist/runtime/components/pin-input/pin-input.vue

@@ -16,7 +16,7 @@ const {
   otp = true,
   type = "number",
   mask,
-  gap,
+  gap = "xs",
   placeholder,
   autoFocus,
   manageFocus = true,
@@ -142,7 +142,7 @@ const style = useVarsResolver(() => ({
 					:input-mode
 					:type='mask ? "password" : "text"'
 					:placeholder
-					:auto-focus='autoFocus && ix === 0'
+					:autofocus='autoFocus && ix === 0'
 					:readonly='readOnly'
 					:disabled
 					@input='handleInput($event, ix)'

package/dist/runtime/components/segmented-control.d.vue.ts

@@ -4,11 +4,12 @@ export interface SegmentedControlItem {
     value: string;
     label: string;
     disabled?: boolean;
+    icon?: string;
 }
 export interface SegmentedControlProps extends BoxProps {
     /** Items to render as controls */
     data: (string | SegmentedControlItem)[];
-    /** Component size */
+    /** Component size @default 'md' */
     size?: NuanceSize | AnyString;
     /** Border radius */
     radius?: NuanceRadius;

package/dist/runtime/components/segmented-control.vue

@@ -119,12 +119,15 @@ const style = useVarsResolver((theme) => ({
   "read-only": readOnly
 }'
 			>
-				<span :class='$style.innerLabel'>{{ item.label }}</span>
+				<span :class='$style.innerLabel'>
+					<Icon v-if='item?.icon' :name='item.icon' />
+					{{ item.label }}
+				</span>
 			</Box>
 		</Box>
 	</Box>
 </template>
 
 <style module>
-.root{--sc-padding-xs:2px 6px;--sc-padding-sm:3px 10px;--sc-padding-md:4px 14px;--sc-padding-lg:7px 16px;--sc-padding-xl:10px 20px;--sc-padding:var(--sc-padding-sm);--sc-radius:var(--radius-md);--sc-transition-duration:200ms;--sc-transition-timing-function:ease;--sc-font-size:var(--font-size-sm);border-radius:var(--sc-radius,var(--radius-md));display:inline-flex;flex-direction:row;overflow:hidden;padding:4px;position:relative;width:auto}.root:where([data-full-width]){display:flex}.root:where([data-orientation=vertical]){display:flex;flex-direction:column;width:-moz-max-content;width:max-content}.root:where([data-orientation=vertical]):where([data-full-width]){width:auto}.root{@mixin where-light{background-color:var(--color-gray-1)}}.root{@mixin where-dark{background-color:var(--color-dark-8)}}.indicator{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);display:block;position:absolute;z-index:1}.indicator:where([data-orientation=horizontal]){bottom:4px;top:4px}.indicator:where([data-orientation=vertical]){left:4px;right:4px}.indicator{@mixin where-light{background-color:var(--sc-color,var(--color-white));box-shadow:var(--sc-shadow,none)}}.indicator{@mixin where-dark{background-color:var(--sc-color,var(--color-dark-5));box-shadow:none}}.label{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);cursor:pointer;display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--segmented-control-outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;@mixin where-light{color:var(--color-gray-7)}@mixin where-dark{color:var(--color-dark-1)}}.label:where([data-read-only]){cursor:default}.label:where([data-active]){@mixin where-light{color:var(--sc-label-color,var(--color-black))}@mixin where-dark{color:var(--sc-label-color,var(--color-white))}}.label:where([data-active]):before{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);content:"";inset:0;position:absolute;z-index:0}.root:where([data-initialized]) .label:where([data-active]):before{display:none}.label:where([data-active]):before{@mixin where-light{box-shadow:var(--sc-shadow,none)}}.label:where([data-active]):before{@mixin where-dark{box-shadow:none}}.label:where([data-active])[data-disabled],fieldset:disabled .label:where([data-active]){color:var(--color-disabled-text);cursor:not-allowed}.label:where(:not([data-disabled],[data-active],[data-read-only])){@mixin hover{@mixin where-light{color:var(--color-black)}@mixin where-dark{color:var(--color-white)}}}fieldset:disabled .label{@mixin hover{color:var(--color-disabled-text)!important}}.input{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.input:focus-visible+.label{--segmented-control-outline:2px solid var(--color-primary-filled)}.control{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.root[data-with-items-borders] :where(.control):before{background-color:var(--separator-color);bottom:0;content:"";inset-inline-start:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:1px}.control[data-orientation=vertical]:before{bottom:auto;height:1px;top:0;inset-inline:0;width:auto}.control:first-of-type:before,[data-mantine-color-scheme] .control[data-active]+.control:before,[data-mantine-color-scheme] .control[data-active]:before{--separator-color:transparent}.control{@mixin where-light{--separator-color:var(--color-gray-3)}}.control{@mixin where-dark{--separator-color:var(--color-dark-4)}}.innerLabel{position:relative;z-index:2}
+.root{--sc-padding-xs:2px 6px;--sc-padding-sm:3px 10px;--sc-padding-md:4px 14px;--sc-padding-lg:7px 16px;--sc-padding-xl:10px 20px;--sc-padding:var(--sc-padding-md);--sc-radius:var(--radius-sm);--sc-transition-duration:200ms;--sc-transition-timing-function:ease;--sc-font-size:var(--font-size-md);border-radius:var(--sc-radius,var(--radius-default));display:inline-flex;flex-direction:row;overflow:hidden;padding:4px;position:relative;width:auto}.root:where([data-full-width]){display:flex}.root:where([data-orientation=vertical]){display:flex;flex-direction:column;width:-moz-max-content;width:max-content}.root:where([data-orientation=vertical]):where([data-full-width]){width:auto}.root{@mixin where-light{background-color:var(--color-gray-1)}}.root{@mixin where-dark{background-color:var(--color-dark-8)}}.indicator{border-radius:var(--sc-radius,var(--radius-md));display:block;position:absolute;z-index:1}.indicator:where([data-orientation=horizontal]){bottom:4px;top:4px}.indicator:where([data-orientation=vertical]){left:4px;right:4px}.indicator{@mixin where-light{background-color:var(--sc-color,var(--color-white));box-shadow:var(--sc-shadow,none)}}.indicator{@mixin where-dark{background-color:var(--sc-color,var(--color-dark-5));box-shadow:none}}.label{border-radius:var(--sc-radius,var(--radius-md));cursor:pointer;display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--segmented-control-outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;@mixin where-light{color:var(--color-gray-7)}@mixin where-dark{color:var(--color-dark-1)}}.label:where([data-read-only]){cursor:default}.label:where([data-active]){@mixin where-light{color:var(--sc-label-color,var(--color-black))}@mixin where-dark{color:var(--sc-label-color,var(--color-white))}}.label:where([data-active]):before{border-radius:var(--sc-radius,var(--radius-md));content:"";inset:0;position:absolute;z-index:0}.root:where([data-initialized]) .label:where([data-active]):before{display:none}.label:where([data-active]):before{@mixin where-light{box-shadow:var(--sc-shadow,none)}}.label:where([data-active]):before{@mixin where-dark{box-shadow:none}}.label:where([data-active])[data-disabled],fieldset:disabled .label:where([data-active]){color:var(--color-disabled-text);cursor:not-allowed}.label:where(:not([data-disabled],[data-active],[data-read-only])){@mixin hover{@mixin where-light{color:var(--color-black)}@mixin where-dark{color:var(--color-white)}}}fieldset:disabled .label{@mixin hover{color:var(--color-disabled-text)!important}}.input{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.input:focus-visible+.label{--segmented-control-outline:2px solid var(--color-primary-filled)}.control{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.root[data-with-items-borders] :where(.control):before{background-color:var(--separator-color);bottom:0;content:"";inset-inline-start:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:1px}.control[data-orientation=vertical]:before{bottom:auto;height:1px;top:0;inset-inline:0;width:auto}.control:first-of-type:before,[data-mantine-color-scheme] .control[data-active]+.control:before,[data-mantine-color-scheme] .control[data-active]:before{--separator-color:transparent}.control{@mixin where-light{--separator-color:var(--color-gray-3)}}.control{@mixin where-dark{--separator-color:var(--color-dark-4)}}.innerLabel{align-items:center;display:inline-flex;gap:var(--spacing-2xs);position:relative;z-index:2}
 </style>

package/dist/runtime/components/segmented-control.vue.d.ts

@@ -4,11 +4,12 @@ export interface SegmentedControlItem {
     value: string;
     label: string;
     disabled?: boolean;
+    icon?: string;
 }
 export interface SegmentedControlProps extends BoxProps {
     /** Items to render as controls */
     data: (string | SegmentedControlItem)[];
-    /** Component size */
+    /** Component size @default 'md' */
     size?: NuanceSize | AnyString;
     /** Border radius */
     radius?: NuanceRadius;

package/dist/runtime/components/table/ui/table.vue

@@ -365,5 +365,5 @@ defineExpose({
 </template>
 
 <style module>
-.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;overflow:auto;position:relative}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--table-bd-color)}.root{@mixin where-light{--table-active-bg:alpha(var(--color-dark-1),.5);--table-c:var(--color-dark-7);--table-bd-color:var(--color-dark-3)}}.root{@mixin where-dark{--table-active-bg:alpha(var(--color-dark-7),.5);--table-c:var(--color-dark-4);--table-bd-color:var(--color-dark-7)}}.table{border-collapse:collapse;min-width:100%}.thead{position:relative}.thead[data-loading]:after{animation:var(--table-loader-animation);background-color:alpha(var(--table-loader-color),.75);content:"";height:1px;position:absolute;z-index:1}.thead[data-sticky]{backdrop-filter:blur(8px);background-color:alpha(var(--color-body),.75);position:sticky;top:0;inset-inline:0;z-index:1}.th{color:var(--table-c);font-weight:600;padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);text-align:left;vertical-align:var(--vertical-align)}.th:has([role=checkbox]){padding-inline-end:0}.th[data-pinned],.tr td[data-pinned]{background-color:alpha(var(--color-body),.75);position:sticky;z-index:1}.tbody{isolation:isolate}.tfoot{position:relative}.tfoot[data-sticky]{backdrop-filter:blur(8px);background-color:var(--color-body);bottom:0;inset-inline:0;position:sticky;z-index:1}.tr[data-selectable]:hover{background-color:var(--table-active-bg)}.tr[data-selectable]:focus-visible{outline:1px solid var(--table-color)}.tr[data-selected]{background-color:var(--table-active-bg)}.tr td{color:var(--table-c);padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);vertical-align:var(--vertical-align);white-space:nowrap}.tr td:has([role=checkbox]){padding-inline-end:0}.separator{background-color:var(--table-bd-color);height:1px;left:0;position:absolute;width:100%;z-index:1}.empty,.loading{padding-inline:1.5rem;text-align:center}@keyframes carousel{0%{transform:translate(-100%);width:50%}to{transform:translate(200%);width:50%}}
+.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;--table-active-bg:var(--color-default);--table-c:var(--color-text);overflow:auto;position:relative}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--color-default-border)}.table{border-collapse:collapse;min-width:100%}.thead{position:relative}.thead[data-loading]:after{animation:var(--table-loader-animation);background-color:alpha(var(--table-loader-color),.75);content:"";height:1px;position:absolute;z-index:1}.thead[data-sticky]{backdrop-filter:blur(8px);background-color:alpha(var(--color-body),.75);position:sticky;top:0;inset-inline:0;z-index:1}.th{color:var(--table-c);font-weight:600;padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);text-align:left;vertical-align:var(--vertical-align)}.th:has([role=checkbox]){padding-inline-end:0}.th[data-pinned],.tr td[data-pinned]{background-color:alpha(var(--color-body),.75);position:sticky;z-index:1}.tbody{isolation:isolate}.tfoot{position:relative}.tfoot[data-sticky]{backdrop-filter:blur(8px);background-color:var(--color-body);bottom:0;inset-inline:0;position:sticky;z-index:1}.tr[data-selectable]:hover{background-color:var(--table-active-bg)}.tr[data-selectable]:focus-visible{outline:1px solid var(--table-color)}.tr[data-selected]{background-color:var(--table-active-bg)}.tr td{color:var(--table-c);padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);vertical-align:var(--vertical-align);white-space:nowrap}.tr td:has([role=checkbox]){padding-inline-end:0}.separator{background-color:var(--color-default-border);height:1px;left:0;position:absolute;width:100%;z-index:1}.empty,.loading{padding-inline:1.5rem;text-align:center}@keyframes carousel{0%{transform:translate(-100%);width:50%}to{transform:translate(200%);width:50%}}
 </style>

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

@@ -1,40 +1,40 @@
-import type { ModelRef } from 'vue';
+import type { ComputedRef, ModelRef, Ref } from 'vue';
 export interface TabsContext {
     /**
      * Unique identifier for the entire tabs group.
      * Used as a prefix for generating accessible tab and panel IDs.
      */
-    id: string;
+    id: ComputedRef<string>;
     /**
      * Two-way bound active tab value.
      * `null` means no tab is selected (only possible when `allowTabDeactivation` is `true`).
      */
     active: ModelRef<string | null>;
     /** Whether keyboard navigation should loop from last to first (and vice versa). */
-    loop: boolean;
+    loop: Ref<boolean>;
     /** Whether pressing Enter/Space on a focused tab should activate it. */
-    activateTabWithKeyboard: boolean;
+    activateTabWithKeyboard: Ref<boolean>;
     /**
      * Allows clicking an already active tab to deactivate it (sets `active` to `null`).
      * Useful for "deselectable" tabs.
      */
-    allowTabDeactivation: boolean;
+    allowTabDeactivation: Ref<boolean>;
     /** Visual variant of the tabs component. */
-    variant: 'default' | 'pills' | 'outline';
+    variant: Ref<'default' | 'pills' | 'outline'>;
     /** Inverted color scheme (typically used on dark backgrounds). */
-    inverted: boolean;
+    inverted: Ref<boolean | undefined>;
     /**
      * Keep tab panels mounted in the DOM when inactive.
      * Useful for preserving state, animations, or SEO.
      */
-    keepMounted: boolean;
+    keepMounted: Ref<boolean>;
     /**
      * For vertical tabs: placement of the tab list relative to the panels.
      * `'left'` → tabs on the left, `'right'` → tabs on the right.
      */
-    placement: 'right' | 'left';
+    placement: Ref<'right' | 'left'>;
     /** Explicit orientation. Usually inferred from layout, but can be forced. */
-    orientation?: 'vertical' | 'horizontal';
+    orientation: Ref<'vertical' | 'horizontal'>;
     /**
      * Generates a unique accessible ID for a tab element based on its value.
      * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)
@@ -55,27 +55,27 @@ export declare const useProvideTabsContext: (args_0: TabsContext) => {
      * Unique identifier for the entire tabs group.
      * Used as a prefix for generating accessible tab and panel IDs.
      */
-    id: string;
+    id: ComputedRef<string>;
     /** Whether keyboard navigation should loop from last to first (and vice versa). */
-    loop: boolean;
+    loop: Ref<boolean>;
     /** Whether pressing Enter/Space on a focused tab should activate it. */
-    activateTabWithKeyboard: boolean;
+    activateTabWithKeyboard: Ref<boolean>;
     /** Visual variant of the tabs component. */
-    variant: "default" | "pills" | "outline";
+    variant: Ref<"default" | "pills" | "outline">;
     /** Inverted color scheme (typically used on dark backgrounds). */
-    inverted: boolean;
+    inverted: Ref<boolean | undefined>;
     /**
      * Keep tab panels mounted in the DOM when inactive.
      * Useful for preserving state, animations, or SEO.
      */
-    keepMounted: boolean;
+    keepMounted: Ref<boolean>;
     /**
      * For vertical tabs: placement of the tab list relative to the panels.
      * `'left'` → tabs on the left, `'right'` → tabs on the right.
      */
-    placement: "right" | "left";
+    placement: Ref<"right" | "left">;
     /** Explicit orientation. Usually inferred from layout, but can be forced. */
-    orientation?: "vertical" | "horizontal";
+    orientation: Ref<"vertical" | "horizontal">;
     /**
      * Generates a unique accessible ID for a tab element based on its value.
      * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)
@@ -106,27 +106,27 @@ export declare const useTabsState: () => {
      * Unique identifier for the entire tabs group.
      * Used as a prefix for generating accessible tab and panel IDs.
      */
-    id: string;
+    id: ComputedRef<string>;
     /** Whether keyboard navigation should loop from last to first (and vice versa). */
-    loop: boolean;
+    loop: Ref<boolean>;
     /** Whether pressing Enter/Space on a focused tab should activate it. */
-    activateTabWithKeyboard: boolean;
+    activateTabWithKeyboard: Ref<boolean>;
     /** Visual variant of the tabs component. */
-    variant: "default" | "pills" | "outline";
+    variant: Ref<"default" | "pills" | "outline">;
     /** Inverted color scheme (typically used on dark backgrounds). */
-    inverted: boolean;
+    inverted: Ref<boolean | undefined>;
     /**
      * Keep tab panels mounted in the DOM when inactive.
      * Useful for preserving state, animations, or SEO.
      */
-    keepMounted: boolean;
+    keepMounted: Ref<boolean>;
     /**
      * For vertical tabs: placement of the tab list relative to the panels.
      * `'left'` → tabs on the left, `'right'` → tabs on the right.
      */
-    placement: "right" | "left";
+    placement: Ref<"right" | "left">;
     /** Explicit orientation. Usually inferred from layout, but can be forced. */
-    orientation?: "vertical" | "horizontal";
+    orientation: Ref<"vertical" | "horizontal">;
     /**
      * Generates a unique accessible ID for a tab element based on its value.
      * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)

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

@@ -6,7 +6,7 @@ const [
   ...state,
   active,
   onUpdate: (tab) => {
-    if (allowTabDeactivation)
+    if (allowTabDeactivation.value)
       return active.value = active.value === tab ? null : tab;
     return active.value = tab;
   }

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

@@ -20,13 +20,13 @@ const style = computed(() => ({ "--tabs-justify": justify }));
 		:class='css.list'
 		role='tablist'
 		:mod='[mod, {
-  variant: ctx?.variant,
+  variant: ctx?.variant.value,
   grow,
-  orientation: ctx?.orientation,
-  placement: ctx?.orientation === "vertical" && ctx.placement,
-  inverted: ctx?.inverted
+  orientation: ctx?.orientation.value,
+  placement: ctx?.orientation.value === "vertical" && ctx.placement.value,
+  inverted: ctx?.inverted.value
 }]'
-		:aria-orientation='ctx?.orientation'
+		:aria-orientation='ctx?.orientation.value'
 	>
 		<slot />
 	</Box>

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

@@ -14,7 +14,7 @@ const ctx = useTabsState();
 	<Box
 		:is
 		:id='ctx?.getPanelId(value)'
-		:mod='[mod, { orientation: ctx?.orientation }]'
+		:mod='[mod, { orientation: ctx?.orientation.value }]'
 		:data-active='ctx?.active.value === value'
 		:class='css.panel'
 		role='tabpanel'

package/dist/runtime/components/tabs/tabs-root.d.vue.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;