nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/switch/switch-group.vue

@@ -20,10 +20,10 @@ const {
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
-  radius: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
   variant: { type: String, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
 });
 const value = defineModel({ type: Array, ...{ default: [] } });
 const id = useId();

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

@@ -1,5 +1,8 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/ui/input-inline.vue.js';
+export interface SwitchVars {
+    root: '--switch-radius' | '--switch-height' | '--switch-width' | '--switch-thumb-size' | '--switch-label-font-size' | '--switch-track-label-padding' | '--switch-color';
+}
 export interface SwitchProps extends Omit<InlineInputProps, 'id'> {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;

package/dist/runtime/components/switch/switch.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
@@ -66,21 +66,23 @@ const disabled = computed(() => {
     return ctx.isDisabled(value);
   return false;
 });
-const style = computed(() => useStyleResolver((theme) => ({
-  "--switch-radius": radius === void 0 ? void 0 : getRadius(radius),
-  "--switch-height": getSize(size.value, "switch-height"),
-  "--switch-width": getSize(size.value, "switch-width"),
-  "--switch-thumb-size": getSize(size.value, "switch-thumb-size"),
-  "--switch-label-font-size": getSize(size.value, "switch-label-font-size"),
-  "--switch-track-label-padding": getSize(size.value, "switch-track-label-padding"),
-  "--switch-color": color ? getThemeColor(color, theme) : void 0
-})));
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--switch-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--switch-height": getSize(size.value, "switch-height"),
+    "--switch-width": getSize(size.value, "switch-width"),
+    "--switch-thumb-size": getSize(size.value, "switch-thumb-size"),
+    "--switch-label-font-size": getSize(size.value, "switch-label-font-size"),
+    "--switch-track-label-padding": getSize(size.value, "switch-track-label-padding"),
+    "--switch-color": color ? getThemeColor(color, theme) : void 0
+  }
+}));
 </script>
 
 <template>
 	<InputInline
 		:id='uuid'
-		:style
+		:style='style.root'
 		:class='$style.root'
 		body-element='label'
 		label-element='span'
@@ -131,198 +133,6 @@ const style = computed(() => useStyleResolver((theme) => ({
 	</InputInline>
 </template>
 
-<style lang="postcss" module>
-.root {
-	--switch-height-xs: rem(16px);
-	--switch-height-sm: rem(20px);
-	--switch-height-md: rem(24px);
-	--switch-height-lg: rem(30px);
-	--switch-height-xl: rem(36px);
-
-	--switch-width-xs: rem(32px);
-	--switch-width-sm: rem(38px);
-	--switch-width-md: rem(46px);
-	--switch-width-lg: rem(56px);
-	--switch-width-xl: rem(72px);
-
-	--switch-thumb-size-xs: rem(12px);
-	--switch-thumb-size-sm: rem(14px);
-	--switch-thumb-size-md: rem(18px);
-	--switch-thumb-size-lg: rem(22px);
-	--switch-thumb-size-xl: rem(28px);
-
-	--switch-label-font-size-xs: rem(7px);
-	--switch-label-font-size-sm: rem(9px);
-	--switch-label-font-size-md: rem(10px);
-	--switch-label-font-size-lg: rem(12px);
-	--switch-label-font-size-xl: rem(16px);
-
-	--switch-track-label-padding-xs: rem(3px);
-	--switch-track-label-padding-sm: rem(3px);
-	--switch-track-label-padding-md: rem(3.5px);
-	--switch-track-label-padding-lg: rem(3.5px);
-	--switch-track-label-padding-xl: rem(4px);
-
-	--switch-height: var(--switch-height-sm);
-	--switch-width: var(--switch-width-sm);
-	--switch-thumb-size: var(--switch-thumb-size-sm);
-	--switch-label-font-size: var(--switch-label-font-size-sm);
-	--switch-track-label-padding: var(--switch-track-label-padding-sm);
-	--switch-radius: 1000px;
-	--switch-color: var(--color-primary-filled);
-	--switch-disabled-color: var(--color-disabled);
-
-	position: relative;
-}
-
-.input {
-	position: absolute;
-
-	overflow: hidden;
-
-	width: 100%;
-	/* Hide the input visually without removing it from the accessibility tree or obscuring it in the DOM */
-	height: 100%;
-
-	margin: 0;
-	padding: 0;
-
-	white-space: nowrap;
-
-	opacity: 0;
-}
-
-.track {
-	cursor: var(--switch-cursor, pointer);
-	user-select: none;
-
-	position: relative;
-	z-index: 0;
-
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	order: var(--switch-order, 1);
-
-	min-width: var(--switch-width);
-	height: var(--switch-height);
-	margin: 0;
-	border-radius: var(--switch-radius);
-
-	font-size: var(--switch-label-font-size);
-	font-weight: var(--font-weight-medium);
-	line-height: 0;
-	color: var(--switch-text-color);
-
-	appearance: none;
-	background-color: var(--switch-bg);
-
-	transition:
-		background-color 150ms ease,
-		border-color 150ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-without-labels]) {
-		width: var(--switch-width);
-	}
-
-	.input:focus-visible+& {
-		outline: 2px solid var(--color-primary-filled);
-		outline-offset: 2px;
-	}
-
-	.input:checked+& {
-		--switch-bg: var(--switch-color);
-		--switch-text-color: var(--color-white);
-	}
-
-	.input:disabled+&,
-	.input[data-disabled]+& {
-		--switch-bg: var(--switch-disabled-color);
-		--switch-cursor: not-allowed;
-	}
-
-	&[data-label-position='left'] {
-		--switch-order: 2;
-	}
-
-	@mixin where-light {
-		--switch-bg: var(--color-gray-3);
-		--switch-text-color: var(--color-gray-6);
-	}
-
-	@mixin where-dark {
-		--switch-bg: var(--color-dark-5);
-		--switch-text-color: var(--color-dark-1);
-	}
-}
-
-.thumb {
-	position: absolute;
-	z-index: 1;
-	inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
-
-	display: flex;
-
-	width: var(--switch-thumb-size);
-	height: var(--switch-thumb-size);
-	border-radius: var(--switch-radius);
-
-	background-color: var(--switch-thumb-bg, var(--color-white));
-
-	transition: inset-inline-start 150ms ease;
-
-	&:where([data-with-indicator])::before {
-		content: '';
-
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-
-		width: 40%;
-		height: 40%;
-		border-radius: var(--switch-radius);
-
-		background-color: var(--switch-bg);
-	}
-
-	&>* {
-		margin: auto;
-	}
-
-	.input:checked+*>& {
-		--switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
-	}
-
-	.input:disabled+*>&,
-	.input[data-disabled]+*>& {
-		--switch-thumb-bg: var(--switch-thumb-bg-disabled);
-	}
-
-	@mixin where-light {
-		--switch-thumb-bg-disabled: var(--color-gray-0);
-	}
-
-	@mixin where-dark {
-		--switch-thumb-bg-disabled: var(--color-dark-3);
-	}
-}
-
-.trackLabel {
-	display: grid;
-	place-content: center;
-
-	min-width: calc(var(--switch-width) - var(--switch-thumb-size));
-	height: 100%;
-	margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
-	padding-inline: var(--switch-track-label-padding);
-
-	transition: margin 150ms ease;
-
-	.input:checked+*>& {
-		margin-inline-start: 0;
-		margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
-	}
-}
+<style module>
+.root{--switch-height-xs:rem(16px);--switch-height-sm:rem(20px);--switch-height-md:rem(24px);--switch-height-lg:rem(30px);--switch-height-xl:rem(36px);--switch-width-xs:rem(32px);--switch-width-sm:rem(38px);--switch-width-md:rem(46px);--switch-width-lg:rem(56px);--switch-width-xl:rem(72px);--switch-thumb-size-xs:rem(12px);--switch-thumb-size-sm:rem(14px);--switch-thumb-size-md:rem(18px);--switch-thumb-size-lg:rem(22px);--switch-thumb-size-xl:rem(28px);--switch-label-font-size-xs:rem(7px);--switch-label-font-size-sm:rem(9px);--switch-label-font-size-md:rem(10px);--switch-label-font-size-lg:rem(12px);--switch-label-font-size-xl:rem(16px);--switch-track-label-padding-xs:rem(3px);--switch-track-label-padding-sm:rem(3px);--switch-track-label-padding-md:rem(3.5px);--switch-track-label-padding-lg:rem(3.5px);--switch-track-label-padding-xl:rem(4px);--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:1000px;--switch-color:var(--color-primary-filled);--switch-disabled-color:var(--color-disabled);position:relative}.input{height:100%;opacity:0;padding:0;position:absolute;white-space:nowrap;width:100%}.input,.track{margin:0;overflow:hidden}.track{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--switch-bg);border-radius:var(--switch-radius);color:var(--switch-text-color);cursor:var(--switch-cursor,pointer);display:flex;font-size:var(--switch-label-font-size);font-weight:var(--font-weight-medium);height:var(--switch-height);line-height:0;min-width:var(--switch-width);order:var(--switch-order,1);position:relative;transition:background-color .15s ease,border-color .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:0;-webkit-tap-highlight-color:transparent}.track:where([data-without-labels]){width:var(--switch-width)}.input:focus-visible+.track{outline:2px solid var(--color-primary-filled);outline-offset:2px}.input:checked+.track{--switch-bg:var(--switch-color);--switch-text-color:var(--color-white)}.input:disabled+.track,.input[data-disabled]+.track{--switch-bg:var(--switch-disabled-color);--switch-cursor:not-allowed}.track[data-label-position=left]{--switch-order:2}.track{@mixin where-light{--switch-bg:var(--color-gray-3);--switch-text-color:var(--color-gray-6)}}.track{@mixin where-dark{--switch-bg:var(--color-dark-5);--switch-text-color:var(--color-dark-1)}}.thumb{background-color:var(--switch-thumb-bg,var(--color-white));border-radius:var(--switch-radius);display:flex;height:var(--switch-thumb-size);inset-inline-start:var(--switch-thumb-start,var(--switch-track-label-padding));position:absolute;transition:inset-inline-start .15s ease;width:var(--switch-thumb-size);z-index:1}.thumb:where([data-with-indicator]):before{background-color:var(--switch-bg);border-radius:var(--switch-radius);content:"";height:40%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40%}.thumb>*{margin:auto}.input:checked+*>.thumb{--switch-thumb-start:calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding))}.input:disabled+*>.thumb,.input[data-disabled]+*>.thumb{--switch-thumb-bg:var(--switch-thumb-bg-disabled)}.thumb{@mixin where-light{--switch-thumb-bg-disabled:var(--color-gray-0)}}.thumb{@mixin where-dark{--switch-thumb-bg-disabled:var(--color-dark-3)}}.trackLabel{display:grid;height:100%;margin-inline-start:calc(var(--switch-thumb-size) + var(--switch-track-label-padding));min-width:calc(var(--switch-width) - var(--switch-thumb-size));padding-inline:var(--switch-track-label-padding);place-content:center;transition:margin .15s ease}.input:checked+*>.trackLabel{margin-inline-end:calc(var(--switch-thumb-size) + var(--switch-track-label-padding));margin-inline-start:0}
 </style>

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

@@ -1,5 +1,8 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/ui/input-inline.vue.js';
+export interface SwitchVars {
+    root: '--switch-radius' | '--switch-height' | '--switch-width' | '--switch-thumb-size' | '--switch-label-font-size' | '--switch-track-label-padding' | '--switch-color';
+}
 export interface SwitchProps extends Omit<InlineInputProps, 'id'> {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;

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

@@ -1,4 +1,4 @@
-import type { Classes, NuanceColor } from '@nui/types';
+import type { AnyString, Classes, NuanceColor } from '@nui/types';
 import type { RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnPinningOptions, ColumnSizingOptions, CoreOptions, ExpandedOptions, FacetedOptions, GlobalFilterOptions, GroupingOptions, HeaderContext, PaginationOptions, Row, RowPinningOptions, RowSelectionOptions, SortingOptions, VisibilityOptions } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
@@ -24,6 +24,7 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-top': (props?: object) => any;
     'body-bottom': (props?: object) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
+export type TableClasses = 'root' | 'table' | 'thead' | 'th' | 'td' | 'tr' | 'tbody' | 'tfoot' | 'caption' | 'loading' | 'empty' | 'separator';
 export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ Omit<TableHTMLAttributes, 'columns' | 'onSelect' | 'onContextmenu'> {
     /** Row data */
     data?: T[];
@@ -67,7 +68,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * Color of the loading overlay
      * @defaultValue 'primary'
      */
-    loadingColor?: NuanceColor | string;
+    loadingColor?: NuanceColor | AnyString;
     /** Vertical alignment of cell content */
     verticalAlign?: CSSProperties['verticalAlign'];
     /** Called when a row is clicked */
@@ -77,7 +78,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /** Called on right-click on a row */
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
     /** Styles API */
-    classes?: Classes<'root' | 'table' | 'thead' | 'th' | 'td' | 'tr' | 'tbody' | 'tfoot' | 'caption' | 'loading' | 'empty' | 'separator'>;
+    classes?: Classes<TableClasses>;
     /**
      * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
      * @see [API](https://vuejs.org/api/options-state.html#watch)

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -10,19 +10,20 @@ const {
   color = "gray",
   ...rest
 } = defineProps({
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  spacing: { type: String, required: false },
-  variant: { type: String, required: false },
+  spacing: { type: [String, Number, Object], required: false },
   gradient: { type: Object, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  justify: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   loading: { type: Boolean, required: false },
-  color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  leftSectionPE: { type: null, required: false },
-  leftSectionProps: { type: Object, required: false },
   icon: { type: String, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   column: { type: Object, required: true },

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

@@ -9,7 +9,7 @@ import {
   useVueTable
 } from "@tanstack/vue-table";
 import { reactivePick, unrefElement } from "@vueuse/core";
-import { useStyleResolver } from "#imports";
+import { useVarsResolver } from "#imports";
 import { computed, ref, useTemplateRef, watch } from "vue";
 import Box from "../../box.vue";
 import { createRowHandlers, processColumns, resolveValue, valueUpdater } from "../lib";
@@ -201,10 +201,12 @@ const rows = computed(() => table.getRowModel().rows);
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
-const style = computed(() => useStyleResolver((theme) => ({
-  "--table-loader-color": props.loadingColor ? getThemeColor(props.loadingColor, theme) : void 0,
-  "--vertical-align": props.verticalAlign
-})));
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--table-loader-color": props.loadingColor ? getThemeColor(props.loadingColor, theme) : void 0,
+    "--vertical-align": props.verticalAlign
+  }
+}));
 const { onRowContextmenu, onRowHover, onRowSelect } = createRowHandlers(props);
 defineExpose({
   get $el() {
@@ -362,173 +364,6 @@ defineExpose({
 	</Box>
 </template>
 
-<style lang="postcss" 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;
-
-	position: relative;
-
-	overflow: auto;
-
-	&:not([data-virtualize]) {
-		.table {
-			overflow: clip;
-		}
-
-		.tbody>tr:not(:last-of-type) {
-			border-bottom: 1px solid var(--table-bd-color);
-		}
-	}
-
-	@mixin where-light {
-		--table-active-bg: alpha(var(--color-slate-1), .5);
-		--table-c: var(--color-slate-7);
-		--table-bd-color: var(--color-slate-3);
-	}
-
-	@mixin where-dark {
-		--table-active-bg: alpha(var(--color-slate-7), .5);
-		--table-c: var(--color-slate-4);
-		--table-bd-color: var(--color-slate-7);
-	}
-}
-
-.table {
-	border-collapse: collapse;
-
-	min-width: 100%;
-}
-
-.thead {
-	position: relative;
-
-	&[data-loading]::after {
-		content: '';
-
-		position: absolute;
-		z-index: 1;
-
-		height: 1px;
-
-		background-color: alpha(var(--table-loader-color), .75);
-
-		animation: var(--table-loader-animation);
-	}
-
-	&[data-sticky] {
-		position: sticky;
-		z-index: 1;
-		top: 0;
-		inset-inline: 0rem;
-
-		background-color: alpha(var(--color-body), .75);
-		backdrop-filter: blur(8px);
-	}
-}
-
-.th {
-	padding-block: var(--table-padding-y);
-	padding-inline: var(--table-padding-x);
-
-	font-weight: 600;
-	color: var(--table-c);
-	text-align: left;
-	vertical-align: var(--vertical-align);
-
-	&:has([role='checkbox']) {
-		padding-inline-end: 0;
-	}
-}
-
-.th[data-pinned],
-.tr td[data-pinned] {
-	position: sticky;
-	z-index: 1;
-
-	background-color: alpha(var(--color-body), .75);
-}
-
-.tbody {
-	isolation: isolate;
-}
-
-.tfoot {
-	position: relative;
-
-	&[data-sticky] {
-		position: sticky;
-		z-index: 1;
-		bottom: 0;
-		inset-inline: 0rem;
-
-		background-color: var(--color-body);
-		backdrop-filter: blur(8px);
-	}
-}
-
-.tr {
-	&[data-selectable] {
-		&:hover {
-			background-color: var(--table-active-bg);
-		}
-
-		&:focus-visible {
-			outline: 1px solid var(--table-color);
-		}
-	}
-
-	&[data-selected] {
-		background-color: var(--table-active-bg);
-	}
-
-	td {
-		padding-block: var(--table-padding-y);
-		padding-inline: var(--table-padding-x);
-
-		color: var(--table-c);
-		white-space: nowrap;
-		vertical-align: var(--vertical-align);
-
-		&:has([role='checkbox']) {
-			padding-inline-end: 0;
-		}
-	}
-}
-
-.separator {
-	position: absolute;
-	z-index: 1;
-	left: 0;
-
-	width: 100%;
-	height: 1px;
-
-	background-color: var(--table-bd-color);
-}
-
-.loading,
-.empty {
-	padding-inline: 1.5rem;
-
-	text-align: center;
-}
-
-@keyframes carousel {
-	0% {
-		transform: translate(-100%);
-
-		width: 50%;
-	}
-
-	to {
-		transform: translate(200%);
-
-		width: 50%;
-	}
-}
+<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-slate-1),.5);--table-c:var(--color-slate-7);--table-bd-color:var(--color-slate-3)}}.root{@mixin where-dark{--table-active-bg:alpha(var(--color-slate-7),.5);--table-c:var(--color-slate-4);--table-bd-color:var(--color-slate-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%}}
 </style>

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

@@ -1,8 +1,7 @@
 import type { NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+export type TabsVariant = 'default' | 'pills' | 'outline';
 export interface TabsRootProps extends BoxProps {
-    /** Value of the tab activated by default (uncontrolled) */
-    defaultTab?: string;
     /**
      * Tabs orientation
      * @default `'horizontal'`
@@ -13,11 +12,21 @@ export interface TabsRootProps extends BoxProps {
      * @default `'left'`
      */
     placement?: 'left' | 'right';
+    /** Visual variant */
+    variant?: TabsVariant;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Border radius */
+    radius?: NuanceRadius;
     /**
-     * Visual variant
-     * @default `'default'`
+     * Inverts tab styles
+     * @default `false`
      */
-    variant?: 'default' | 'pills' | 'outline';
+    inverted?: boolean;
+    /** Root element id */
+    id?: string;
+    /** Value of the tab activated by default (uncontrolled) */
+    defaultTab?: string;
     /**
      * Whether arrow key presses loop through items
      * @default `true`
@@ -33,22 +42,11 @@ export interface TabsRootProps extends BoxProps {
      * @default `false`
      */
     allowTabDeactivation?: boolean;
-    /** Color from theme */
-    color?: NuanceColor;
-    /** Border radius */
-    radius?: NuanceRadius;
-    /**
-     * Inverts tab styles
-     * @default `false`
-     */
-    inverted?: boolean;
     /**
      * If `false`, panel content is unmounted when inactive
      * @default `true`
      */
     keepMounted?: boolean;
-    /** Root element id */
-    id?: string;
 }
 type __VLS_Props = TabsRootProps;
 type __VLS_ModelProps = {

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

@@ -1,7 +1,7 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getRadius, getThemeColor } from "@nui/utils";
-import { computed, onMounted, useId } from "vue";
+import { onMounted, useId } from "vue";
 import Box from "../box.vue";
 import { getSafeId, useProvideTabsContext } from "./lib";
 import css from "./tabs.module.css";
@@ -18,22 +18,21 @@ const {
   defaultTab,
   ...rest
 } = defineProps({
-  defaultTab: { type: String, required: false },
   orientation: { type: String, required: false },
   placement: { type: String, required: false },
   variant: { type: String, required: false },
-  loop: { type: Boolean, required: false },
-  activateTabWithKeyboard: { type: Boolean, required: false },
-  allowTabDeactivation: { type: Boolean, required: false },
   color: { type: null, required: false },
   radius: { type: [String, Number], required: false },
   inverted: { type: Boolean, required: false },
-  keepMounted: { type: Boolean, required: false },
   id: { type: String, required: false },
+  defaultTab: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  activateTabWithKeyboard: { type: Boolean, required: false },
+  allowTabDeactivation: { type: Boolean, required: false },
+  keepMounted: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const VALUE_ERROR = "component was rendered with invalid value or without value";
 const uid = id ?? useId();
 const active = defineModel({ type: [String, null], ...{ default: null } });
 onMounted(() => {
@@ -41,10 +40,13 @@ onMounted(() => {
     active.value = defaultTab;
   }
 });
-const style = computed(() => useStyleResolver((theme) => ({
-  "--tabs-radius": getRadius(radius),
-  "--tabs-color": getThemeColor(color, theme)
-})));
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--tabs-radius": getRadius(radius),
+    "--tabs-color": getThemeColor(color, theme)
+  }
+}));
+const VALUE_ERROR = "component was rendered with invalid value or without value";
 useProvideTabsContext({
   ...rest,
   id: uid,