vunor 0.1.2 → 0.1.3

package/dist/theme.mjs

@@ -1,10 +1,8 @@
 import defu$1, { defu } from "defu";
 import { presetWind } from "unocss";
 import { color, palitra } from "@prostojs/palitra";
-
 //#region src/theme/utils/define-sc.ts
 const defineShortcuts = (sc) => sc;
-
 //#endregion
 //#region src/components/AppToasts/shortcuts.ts
 const toastShortcuts = defineShortcuts({
@@ -30,7 +28,6 @@ const toastShortcuts = defineShortcuts({
 		"data-[swipe=right]:": "[--toast-out-x:calc(100%+var(--viewport-padding))]"
 	}
 });
-
 //#endregion
 //#region src/components/Button/shortcuts.ts
 const buttonShortcuts = defineShortcuts({
@@ -57,7 +54,6 @@ const buttonShortcuts = defineShortcuts({
 		"group-[.btn-round.btn-square]/btn:": "m-0!"
 	}
 });
-
 //#endregion
 //#region src/components/Calendar/shortcuts.ts
 const calendarShortcuts = defineShortcuts({
@@ -90,10 +86,7 @@ const calendarShortcuts = defineShortcuts({
 		}
 	}
 });
-
-//#endregion
-//#region src/components/Card/shortcuts.ts
-const headers = [
+const cardShortcuts = defineShortcuts({ card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${[
 	"h1",
 	"h2",
 	"h3",
@@ -105,9 +98,7 @@ const headers = [
 	"body",
 	"body-s",
 	"callout"
-];
-const cardShortcuts = defineShortcuts({ card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${headers.map((header) => `data-[level=${header}]:card-${header}`).join(" ")}` });
-
+].map((header) => `data-[level=${header}]:card-${header}`).join(" ")}` });
 //#endregion
 //#region src/components/Checkbox/shortcuts.ts
 const checkboxShortcuts = defineShortcuts({
@@ -127,7 +118,6 @@ const checkboxShortcuts = defineShortcuts({
 	"checkbox-icon": { "": "size-0.9em animate-cb-appear animate-duration-200 animate-ease" },
 	"checkbox-label": { "": "select-none text-body lh-1.5em" }
 });
-
 //#endregion
 //#region src/components/Combobox/shortcuts.ts
 const comboboxShortcuts = defineShortcuts({
@@ -139,7 +129,6 @@ const comboboxShortcuts = defineShortcuts({
 		"group-[[aria-expanded=true]]/i8:": "-scale-100"
 	}
 });
-
 //#endregion
 //#region src/components/Dialog/shortcuts.ts
 const dialogShortcuts = defineShortcuts({
@@ -156,7 +145,6 @@ const dialogShortcuts = defineShortcuts({
 	"dialog-close": "absolute right-$card-spacing top-$card-spacing hover:bg-grey-500/10 rounded p-$xxs",
 	"dialog-footer": "flex-shrink-0 flex gap-$s justify-end border-t px-$card-spacing py-$m"
 });
-
 //#endregion
 //#region src/components/Loading/shortcuts.ts
 const loadingShortcuts = defineShortcuts({
@@ -167,14 +155,12 @@ const loadingShortcuts = defineShortcuts({
 	},
 	"inner-loading": "bg-white/50 dark:bg-black/50 flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 z-5 cursor-wait"
 });
-
 //#endregion
 //#region src/components/Menu/shortcuts.ts
 const menuShortcuts = defineShortcuts({
 	"menu-root": "flex flex-col overflow-hidden",
 	"menu-item": "justify-start c8-flat gap-$m w-full fw-400"
 });
-
 //#endregion
 //#region src/components/ProgressBar/shortcuts.ts
 const progressShortcuts = defineShortcuts({
@@ -200,84 +186,6 @@ const progressShortcuts = defineShortcuts({
 		"dark:": "bg-scope-color-600"
 	}
 });
-
-//#endregion
-//#region src/components/RadioGroup/shortcuts.ts
-const radioShortcuts = defineShortcuts({
-	"rb-container": { "": "flex flex-col gap-$s text-body" },
-	"rb-label": { "": "text-label text-grey-400" },
-	"rb-root": {
-		"": "flex gap-x-$l gap-y-$m",
-		"[&.rb-row]:": "flex-wrap",
-		"not-[.rb-row]:": "flex-col"
-	},
-	"rb-item-wrapper": { "": "flex" },
-	"rb-item": {
-		"": "select-none shrink-0 current-bg-scope-color-500 bg-current/0 size-1.25em rounded-full cursor-default current-border-grey-500 border-current/40 border-[0.16em] transition-none",
-		"data-[state=checked]:not-[[data-error='true']]:": "current-border-scope-color-500 border-current",
-		"data-[state=checked]:": "bg-current",
-		"active:enabled:": "bg-current/20",
-		"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed",
-		"data-[error=true]:": "current-border-error-500 current-bg-error-500"
-	},
-	"rb-item-indicator": { "": "flex items-center justify-center w-full h-full rounded-full relative after:content-[''] after:block after:size-[0.5em] after:rounded-[50%] after:bg-white animate-zoom-in animate-duration-100" },
-	"rb-item-label": {
-		"": "select-none px-$s text-body leading-none lh-1.25em",
-		"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
-	}
-});
-
-//#endregion
-//#region src/components/Select/shortcuts.ts
-const selectShortcuts = defineShortcuts({
-	"select-content": {
-		"": "min-w-[60px] rounded-base surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
-		"data-[design=round]:": "rounded-fingertip-half",
-		"[&>div[data-reka-combobox-viewport]]:": "max-h-[var(--reka-popper-available-height)] [scrollbar-width:auto]",
-		"[&>div[data-reka-combobox-viewport]::-webkit-scrollbar]:": "block"
-	},
-	"select-scroll-btn": "flex items-center justify-center h-fingertip cursor-default",
-	"select-grp-label": {
-		"": "px-$m h-fingertip flex items-center ",
-		"group-data-[design=round]:": "px-fingertip-half",
-		"[&>span]:": "text-label text-grey-400"
-	},
-	"select-item": {
-		"": "text-body leading-none flex items-center min-h-fingertip relative select-none relative",
-		"data-[disabled]:": "opacity-40 pointer-events-none",
-		"data-[highlighted]:": "outline-none bg-scope-color-500/15",
-		"[&>span]:": "px-$m",
-		"group-data-[design=round]:[&>span]:": "px-fingertip-half",
-		"[&>span]:data-[state=checked]:": "text-scope-color-500 fw-700!"
-	},
-	"select-separator": "h-[1px] bg-grey-500/10 mx-$s"
-});
-
-//#endregion
-//#region src/components/Slider/shortcuts.ts
-const sliderShortcuts = defineShortcuts({
-	"slider": { "": "relative flex items-center select-none touch-none min-w-2em min-h-2em" },
-	"slider-track": { "": "bg-grey-500/20 relative grow rounded-full h-[0.25em]" },
-	"slider-range": { "": "absolute bg-scope-color-500 rounded-full h-full" },
-	"slider-thumb": {
-		"": "block w-[1.5em] h-[1.5em] bg-scope-color-500 rounded-full border-scope-light-0 border-[3px] outline-scope-color-500/10 outline-0px outline-solid",
-		"dark:": "border-scope-dark-0",
-		"not-[[disabled]]:": {
-			"": "cursor-grab",
-			"hover:": "shadow-md",
-			"active:": "cursor-grabbing",
-			"focus:": "outline-[0.5em]"
-		}
-	}
-});
-
-//#endregion
-//#region src/components/Tabs/shortcuts.ts
-const tabShortcuts = defineShortcuts({
-	"tabs-indicator": "absolute left-0 h-[2px] bottom-0 w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-all duration-200 bg-scope-color-500",
-	"tab": "h-fingertip rounded flex items-center justify-center px-$m gap-$m select-none"
-});
-
 //#endregion
 //#region src/components/shortcuts.ts
 const shortcuts = [
@@ -285,19 +193,79 @@ const shortcuts = [
 	menuShortcuts,
 	buttonShortcuts,
 	checkboxShortcuts,
-	radioShortcuts,
-	selectShortcuts,
+	defineShortcuts({
+		"rb-container": { "": "flex flex-col gap-$s text-body" },
+		"rb-label": { "": "text-label text-grey-400" },
+		"rb-root": {
+			"": "flex gap-x-$l gap-y-$m",
+			"[&.rb-row]:": "flex-wrap",
+			"not-[.rb-row]:": "flex-col"
+		},
+		"rb-item-wrapper": { "": "flex" },
+		"rb-item": {
+			"": "select-none shrink-0 current-bg-scope-color-500 bg-current/0 size-1.25em rounded-full cursor-default current-border-grey-500 border-current/40 border-[0.16em] transition-none",
+			"data-[state=checked]:not-[[data-error='true']]:": "current-border-scope-color-500 border-current",
+			"data-[state=checked]:": "bg-current",
+			"active:enabled:": "bg-current/20",
+			"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed",
+			"data-[error=true]:": "current-border-error-500 current-bg-error-500"
+		},
+		"rb-item-indicator": { "": "flex items-center justify-center w-full h-full rounded-full relative after:content-[''] after:block after:size-[0.5em] after:rounded-[50%] after:bg-white animate-zoom-in animate-duration-100" },
+		"rb-item-label": {
+			"": "select-none px-$s text-body leading-none lh-1.25em",
+			"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
+		}
+	}),
+	defineShortcuts({
+		"select-content": {
+			"": "min-w-[60px] rounded-base surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
+			"data-[design=round]:": "rounded-fingertip-half",
+			"[&>div[data-reka-combobox-viewport]]:": "max-h-[var(--reka-popper-available-height)] [scrollbar-width:auto]",
+			"[&>div[data-reka-combobox-viewport]::-webkit-scrollbar]:": "block"
+		},
+		"select-scroll-btn": "flex items-center justify-center h-fingertip cursor-default",
+		"select-grp-label": {
+			"": "px-$m h-fingertip flex items-center ",
+			"group-data-[design=round]:": "px-fingertip-half",
+			"[&>span]:": "text-label text-grey-400"
+		},
+		"select-item": {
+			"": "text-body leading-none flex items-center min-h-fingertip relative select-none relative",
+			"data-[disabled]:": "opacity-40 pointer-events-none",
+			"data-[highlighted]:": "outline-none bg-scope-color-500/15",
+			"[&>span]:": "px-$m",
+			"group-data-[design=round]:[&>span]:": "px-fingertip-half",
+			"[&>span]:data-[state=checked]:": "text-scope-color-500 fw-700!"
+		},
+		"select-separator": "h-[1px] bg-grey-500/10 mx-$s"
+	}),
 	comboboxShortcuts,
-	sliderShortcuts,
+	defineShortcuts({
+		"slider": { "": "relative flex items-center select-none touch-none min-w-2em min-h-2em" },
+		"slider-track": { "": "bg-grey-500/20 relative grow rounded-full h-[0.25em]" },
+		"slider-range": { "": "absolute bg-scope-color-500 rounded-full h-full" },
+		"slider-thumb": {
+			"": "block w-[1.5em] h-[1.5em] bg-scope-color-500 rounded-full border-scope-light-0 border-[3px] outline-scope-color-500/10 outline-0px outline-solid",
+			"dark:": "border-scope-dark-0",
+			"not-[[disabled]]:": {
+				"": "cursor-grab",
+				"hover:": "shadow-md",
+				"active:": "cursor-grabbing",
+				"focus:": "outline-[0.5em]"
+			}
+		}
+	}),
 	loadingShortcuts,
-	tabShortcuts,
+	defineShortcuts({
+		"tabs-indicator": "absolute left-0 h-[2px] bottom-0 w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-all duration-200 bg-scope-color-500",
+		"tab": "h-fingertip rounded flex items-center justify-center px-$m gap-$m select-none"
+	}),
 	dialogShortcuts,
 	calendarShortcuts,
 	progressShortcuts,
 	toastShortcuts,
 	{ "shadow-popup": "shadow-[0_0_10px_rgba(0,0,0,0.1),0_4px_20px_rgba(0,0,0,0.15)]" }
 ];
-
 //#endregion
 //#region src/theme/shortcuts/c8.ts
 const c8 = defineShortcuts({
@@ -358,7 +326,6 @@ const c8 = defineShortcuts({
 	"c8-light-hover": { "not-([disabled]):": "bg-current/15" },
 	"c8-light-active": { "not-([disabled]):": "bg-current/20" }
 });
-
 //#endregion
 //#region src/theme/shortcuts/i8.ts
 const i8 = defineShortcuts({
@@ -475,7 +442,6 @@ const i8 = defineShortcuts({
 		"[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
 	}
 });
-
 //#endregion
 //#region src/theme/utils/shortcut-obj.ts
 /**
@@ -509,17 +475,20 @@ function prepareScArray(input) {
 const mergeTwoVunorShortcuts = (target, source) => {
 	const result = {};
 	const keys = new Set([...Object.keys(source), ...Object.keys(target)]);
-	for (const key of Array.from(keys)) if (!Object.prototype.hasOwnProperty.call(source, key)) result[key] = target[key];
-	else if (!Object.prototype.hasOwnProperty.call(target, key)) result[key] = source[key];
-	else {
-		let sourceValue = source[key];
-		let targetValue = target[key];
-		if (Array.isArray(sourceValue)) sourceValue = sourceValue.join(" ");
-		if (Array.isArray(targetValue)) targetValue = targetValue.join(" ");
-		if (typeof sourceValue === "string" && typeof targetValue === "string") result[key] = `${targetValue} ${sourceValue}`;
-		else if (typeof sourceValue === "object" && typeof targetValue === "string") result[key] = `${targetValue} ${toUnoShortcut(sourceValue)}`;
-		else if (typeof sourceValue === "string" && typeof targetValue === "object") result[key] = `${toUnoShortcut(targetValue)} ${sourceValue}`;
-		else if (typeof sourceValue === "object" && typeof targetValue === "object") result[key] = `${toUnoShortcut(targetValue)} ${toUnoShortcut(sourceValue)}`;
+	for (const key of Array.from(keys)) {
+		const inSource = Object.prototype.hasOwnProperty.call(source, key);
+		const inTarget = Object.prototype.hasOwnProperty.call(target, key);
+		if (inSource && inTarget) {
+			let sourceValue = source[key];
+			let targetValue = target[key];
+			if (Array.isArray(sourceValue)) sourceValue = sourceValue.join(" ");
+			if (Array.isArray(targetValue)) targetValue = targetValue.join(" ");
+			if (typeof sourceValue === "string" && typeof targetValue === "string") result[key] = `${targetValue} ${sourceValue}`;
+			else if (typeof sourceValue === "object" && typeof targetValue === "string") result[key] = `${targetValue} ${toUnoShortcut(sourceValue)}`;
+			else if (typeof sourceValue === "string" && typeof targetValue === "object") result[key] = `${toUnoShortcut(targetValue)} ${sourceValue}`;
+			else if (typeof sourceValue === "object" && typeof targetValue === "object") result[key] = `${toUnoShortcut(targetValue)} ${toUnoShortcut(sourceValue)}`;
+		} else if (inSource) result[key] = source[key];
+		else result[key] = target[key];
 	}
 	return result;
 };
@@ -531,7 +500,6 @@ const mergeTwoVunorShortcuts = (target, source) => {
 * @returns TVunorShortcut
 */
 const mergeVunorShortcuts = (shortcuts) => shortcuts.reduce((acc, shortcut) => mergeTwoVunorShortcuts(acc, shortcut), {});
-
 //#endregion
 //#region src/theme/palitra.ts
 const defaultOpts = {
@@ -584,6 +552,7 @@ const defaultOpts = {
 	lightest: .97,
 	darkest: .24,
 	layersDepth: .08,
+	flatness: 1,
 	mainPalette: {
 		preserveInputColor: false,
 		luminance: {
@@ -746,6 +715,7 @@ function generatePalette(_opts) {
 	const bgOptions = {
 		count: 5,
 		preserveInputColor: false,
+		flatness: opts.layerPalette.flatness ?? opts.flatness,
 		luminance: {
 			dark: opts.layerPalette.luminance?.dark ?? opts.darkest,
 			light: opts.layerPalette.luminance?.light ?? opts.darkest + opts.layersDepth,
@@ -769,8 +739,9 @@ function generatePalette(_opts) {
 		"light-3",
 		"light-4"
 	].toReversed();
+	const lumDark = bgOptions.luminance?.dark ?? opts.darkest;
 	bgOptions.luminance = {
-		dark: 1 - (bgOptions.luminance.light - bgOptions.luminance.dark),
+		dark: 1 - ((bgOptions.luminance?.light ?? opts.darkest + opts.layersDepth) - lumDark),
 		light: 1,
 		useMiddle: false
 	};
@@ -786,6 +757,7 @@ function generatePalette(_opts) {
 	}, {
 		count: 10,
 		preserveInputColor: opts.mainPalette.preserveInputColor,
+		flatness: opts.mainPalette.flatness ?? opts.flatness,
 		luminance: {
 			dark: opts.mainPalette.luminance?.dark ?? opts.darkest + opts.layersDepth + .02,
 			light: opts.mainPalette.luminance?.light ?? opts.lightest,
@@ -816,23 +788,21 @@ function multiplySaturation(colors, m = .5) {
 	}
 	return newObj;
 }
+const layerN = (n, reverse) => reverse ? 4 - n : n;
 function getPaletteShortcuts() {
-	const layerN = (n, reverse) => reverse ? 4 - n : n;
 	return [
 		[/^layer-([0-4])$/, ([, a], { theme }) => {
 			const d = layerN(Number(a), theme.reverseDarkLayers);
-			const l = layerN(Number(a), theme.reverseLightLayers);
 			return toUnoShortcut({
-				"": `current-bg-scope-light-${l} current-text-scope-dark-2 current-icon-scope-dark-2 current-border-grey-500 bg-current text-current`,
+				"": `current-bg-scope-light-${layerN(Number(a), theme.reverseLightLayers)} current-text-scope-dark-2 current-icon-scope-dark-2 current-border-grey-500 bg-current text-current`,
 				"dark:": `current-bg-scope-dark-${d} current-text-scope-light-2 current-icon-scope-light-2`,
 				"[&.dark]:": `current-bg-scope-dark-${d} current-text-scope-light-2 current-icon-scope-light-2`
 			});
 		}],
 		[/^(bg|text|current-text|current-bg|current-icon|current-border|current-outline|current-caret|current-hl|i8-bg|i8-border|i8-outline)-layer-([0-4])$/, ([, target, a], { theme }) => {
 			const d = layerN(Number(a), theme.reverseDarkLayers);
-			const l = layerN(Number(a), theme.reverseLightLayers);
 			return toUnoShortcut({
-				"": `${target}-scope-light-${l}`,
+				"": `${target}-scope-light-${layerN(Number(a), theme.reverseLightLayers)}`,
 				"dark:": `${target}-scope-dark-${d}`,
 				"[&.dark]:": `${target}-scope-dark-${d}`
 			});
@@ -845,74 +815,6 @@ function getPaletteShortcuts() {
 		{ surface: "surface-100" }
 	];
 }
-
-//#endregion
-//#region src/theme/utils/round.ts
-function round(v, decimals = 0) {
-	const d = 10 ** decimals;
-	return Math.round(v * d) / d;
-}
-
-//#endregion
-//#region src/theme/utils/unit-by.ts
-function unitBy(input, factor, roundTo = 3) {
-	const v = Number.parseFloat(input);
-	const units = /(px|em|rem|%)$/.exec(input)?.[1] || "";
-	return `${round(v * factor, roundTo)}${units}`;
-}
-
-//#endregion
-//#region src/theme/preflights.ts
-const fontsPreflights = { getCSS: ({ theme }) => `${renderFontCss("body", theme.fontSize.body) + renderFontCss("figcaption", theme.fontSize.caption) + renderFontCss("h1", theme.fontSize.h1) + renderFontCss("h2", theme.fontSize.h2) + renderFontCss("h3", theme.fontSize.h3) + renderFontCss("h4", theme.fontSize.h4) + renderFontCss("h5", theme.fontSize.h5) + renderFontCss("h6", theme.fontSize.h6)}
-:root {
-  --un-border-opacity: 0.25;
-  --un-default-border-color: rgb(150 150 150 / var(--un-border-opacity));
-  --scope-black: 0 0 0;
-  --scope-white: 255 255 255;
-  --scope-hl: var(--scope-color-500);
-  --v-fingertip: ${theme.spacing["fingertip-m"] || "3em"};
-  --v-fingertip-half: ${unitBy(theme.spacing["fingertip-m"] || "3em", .5)};
-}
-
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: rgba(0,0,0,0.05);
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.2);
-    border-radius: 5px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0,0,0,0.3);
-}
-
-
-.dark ::-webkit-scrollbar-track {
-    background: rgba(255,255,255,0.05);
-}
-
-.dark ::-webkit-scrollbar-thumb {
-    background-color: rgba(255,255,255,0.2);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255,255,255,0.3);
-}
-` };
-function renderFontCss(selector, font) {
-	return `${selector} { font-size: ${font[0]}; ${Object.entries(font[1]).map((e) => `${e[0]}: ${e[1]};`).join(" ")} }\n`;
-}
-
 //#endregion
 //#region src/theme/rules/palette.ts
 function colorToRgbWithOpacity(c) {
@@ -947,6 +849,37 @@ function getCssTarget(key) {
 		ring: "--un-ring-color"
 	}[key];
 }
+const SCOPE_SHADES = [
+	"50",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900"
+];
+const SCOPE_LAYERS = [
+	"0",
+	"1",
+	"2",
+	"3",
+	"4"
+];
+function getScopeCssVars(c, theme) {
+	const col = theme.colors[c];
+	if (!col) return;
+	const vars = { "--scope-color": colorToRgbWithOpacity(col) };
+	for (const shade of SCOPE_SHADES) vars[`--scope-color-${shade}`] = colorToRgbWithOpacity(theme.colors[`${c}-${shade}`]) || "";
+	for (const layer of SCOPE_LAYERS) {
+		vars[`--scope-light-${layer}`] = colorToRgbWithOpacity(theme.colors[`${c}-light-${layer}`]) || "";
+		vars[`--scope-dark-${layer}`] = colorToRgbWithOpacity(theme.colors[`${c}-dark-${layer}`]) || "";
+	}
+	vars["--current-hl"] = colorToRgbWithOpacity(theme.colors[`${c}-500`]) || "";
+	return vars;
+}
 const paletteRules = [
 	[/^current-(text|bg|icon|border|outline|caret|hl)-(.+)$/, (match, { theme }) => {
 		const t = match[1];
@@ -977,34 +910,7 @@ const paletteRules = [
 			[cssVar]: `rgb(var(--current${source}) / ${opacityVal})`
 		};
 	}],
-	[/^scope-(.*)$/, (match, { theme }) => {
-		const c = match[1];
-		const col = theme.colors[c];
-		if (col) return {
-			"--scope-color": colorToRgbWithOpacity(col),
-			"--scope-color-50": colorToRgbWithOpacity(theme.colors[`${c}-50`]) || "",
-			"--scope-color-100": colorToRgbWithOpacity(theme.colors[`${c}-100`]) || "",
-			"--scope-color-200": colorToRgbWithOpacity(theme.colors[`${c}-200`]) || "",
-			"--scope-color-300": colorToRgbWithOpacity(theme.colors[`${c}-300`]) || "",
-			"--scope-color-400": colorToRgbWithOpacity(theme.colors[`${c}-400`]) || "",
-			"--scope-color-500": colorToRgbWithOpacity(theme.colors[`${c}-500`]) || "",
-			"--scope-color-600": colorToRgbWithOpacity(theme.colors[`${c}-600`]) || "",
-			"--scope-color-700": colorToRgbWithOpacity(theme.colors[`${c}-700`]) || "",
-			"--scope-color-800": colorToRgbWithOpacity(theme.colors[`${c}-800`]) || "",
-			"--scope-color-900": colorToRgbWithOpacity(theme.colors[`${c}-900`]) || "",
-			"--scope-light-0": colorToRgbWithOpacity(theme.colors[`${c}-light-0`]) || "",
-			"--scope-light-1": colorToRgbWithOpacity(theme.colors[`${c}-light-1`]) || "",
-			"--scope-light-2": colorToRgbWithOpacity(theme.colors[`${c}-light-2`]) || "",
-			"--scope-light-3": colorToRgbWithOpacity(theme.colors[`${c}-light-3`]) || "",
-			"--scope-light-4": colorToRgbWithOpacity(theme.colors[`${c}-light-4`]) || "",
-			"--scope-dark-0": colorToRgbWithOpacity(theme.colors[`${c}-dark-0`]) || "",
-			"--scope-dark-1": colorToRgbWithOpacity(theme.colors[`${c}-dark-1`]) || "",
-			"--scope-dark-2": colorToRgbWithOpacity(theme.colors[`${c}-dark-2`]) || "",
-			"--scope-dark-3": colorToRgbWithOpacity(theme.colors[`${c}-dark-3`]) || "",
-			"--scope-dark-4": colorToRgbWithOpacity(theme.colors[`${c}-dark-4`]) || "",
-			"--current-hl": colorToRgbWithOpacity(theme.colors[`${c}-500`]) || ""
-		};
-	}],
+	[/^scope-(.*)$/, (match, { theme }) => getScopeCssVars(match[1], theme)],
 	[/^(bg|text|fill|stroke|border|outline|icon|caret)-scope-((?:color|dark|light|text|bg|white|black|icon)(?:-\d+)?)(\/\d{1,3})?$/, (match, { theme }) => {
 		const cssVar = getCssTarget(match[1]);
 		const opacityVar = getOpacityVar(match[1]);
@@ -1033,7 +939,75 @@ const paletteRules = [
 		height: `var(--icon-size, 1em)`
 	})]
 ];
+//#endregion
+//#region src/theme/utils/round.ts
+function round(v, decimals = 0) {
+	const d = 10 ** decimals;
+	return Math.round(v * d) / d;
+}
+//#endregion
+//#region src/theme/utils/unit-by.ts
+function unitBy(input, factor, roundTo = 3) {
+	const v = Number.parseFloat(input);
+	const units = /(px|em|rem|%)$/.exec(input)?.[1] || "";
+	return `${round(v * factor, roundTo)}${units}`;
+}
+//#endregion
+//#region src/theme/preflights.ts
+const fontsPreflights = { getCSS: ({ theme }) => `${renderFontCss("body", theme.fontSize.body) + renderFontCss("figcaption", theme.fontSize.caption) + renderFontCss("h1", theme.fontSize.h1) + renderFontCss("h2", theme.fontSize.h2) + renderFontCss("h3", theme.fontSize.h3) + renderFontCss("h4", theme.fontSize.h4) + renderFontCss("h5", theme.fontSize.h5) + renderFontCss("h6", theme.fontSize.h6)}
+:root {
+  --un-border-opacity: 0.25;
+  --un-default-border-color: rgb(150 150 150 / var(--un-border-opacity));
+  --scope-black: 0 0 0;
+  --scope-white: 255 255 255;
+  --scope-hl: var(--scope-color-500);
+  --v-fingertip: ${theme.spacing["fingertip-m"] || "3em"};
+  --v-fingertip-half: ${unitBy(theme.spacing["fingertip-m"] || "3em", .5)};
+${renderDefaultScope(theme)}}
+
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.05);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 5px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0,0,0,0.3);
+}
+
+
+.dark ::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.05);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,0.2);
+}
 
+.dark ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,0.3);
+}
+` };
+function renderDefaultScope(theme) {
+	const vars = getScopeCssVars("neutral", theme);
+	if (!vars) return "";
+	return `${Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`).join("\n")}\n`;
+}
+function renderFontCss(selector, font) {
+	return `${selector} { font-size: ${font[0]}; ${Object.entries(font[1]).map((e) => `${e[0]}: ${e[1]};`).join(" ")} }\n`;
+}
 //#endregion
 //#region src/theme/rules/i8-rules.ts
 const i8Rules = [
@@ -1082,99 +1056,92 @@ const i8Rules = [
 		};
 	}]
 ];
-
-//#endregion
-//#region src/theme/rules/spacing.ts
-const spacingRules = [
-	[
-		/^text-m([bty])?-(.*)$/,
-		(match, { theme }) => {
-			const dir = match[1];
-			const size = match[2];
-			const d = dir ? {
-				y: ["top", "bottom"],
-				t: ["top"],
-				b: ["bottom"]
-			}[dir] : [
-				"top",
-				"bottom",
-				"left",
-				"right"
-			];
-			const result = {};
-			if (theme.spacing[size]) {
-				for (const prop of d) result[`margin-${prop}`] = ["left", "right"].includes(prop) ? theme.spacing[size] : `calc(${theme.spacing[size]} + var(--font-${prop === "top" ? "tc" : "bc"}))`;
-				return result;
-			} else if (/^\d+(em|rem|px)?$/.test(size)) {
-				let s = size;
-				if (/^[\d.]+$/.test(size)) s = `${Number(size) * .25}rem`;
-				for (const prop of d) result[`margin-${prop}`] = ["left", "right"].includes(prop) ? s : `calc(${s} + var(--font-${prop === "top" ? "tc" : "bc"}))`;
-				return result;
-			}
-		},
-		{ layer: "utilities" }
-	],
-	[
-		/^card-dense$/,
-		(_match, { theme: _theme }) => ({ "--card-spacing": "var(--card-spacing-dense)" }),
-		{ layer: "utilities" }
-	],
-	[/^card-(.*)$/, (match, { theme }) => {
-		const name = match[1];
-		if (theme.fontSize[name]) {
-			const props = theme.fontSize[name][1];
-			return {
-				"--card-spacing": `${unitBy(props["--font-corrected"], theme.cardSpacingFactor.regular)}`,
-				"--card-spacing-dense": `${unitBy(props["--font-corrected"], theme.cardSpacingFactor.dense)}`,
-				"--card-heading-size": props["--font-size"],
-				"--card-heading-bold": props["--font-bold"],
-				"--card-heading-corrected": props["--font-corrected"],
-				"--card-heading-weight": props["font-weight"],
-				"--card-heading-lh": props["line-height"],
-				"--card-heading-ls": props["letter-spacing"],
-				"--card-heading-bc": props["--font-bc"],
-				"--card-heading-tc": props["--font-tc"],
-				"padding": "var(--card-spacing)"
-			};
-		}
-	}],
-	[/^fingertip-(.*)/, (match, { theme }) => {
-		const name = match[1];
-		if (name.startsWith("[") && name.endsWith("]")) return {
-			"--v-fingertip": name.slice(1, -1),
-			"--v-fingertip-half": unitBy(name.slice(1, -1), .5)
-		};
-		if ([
-			"xs",
-			"s",
-			"m",
-			"l",
-			"xl"
-		].includes(name)) return {
-			"--v-fingertip": theme.spacing[`fingertip-${name}`],
-			"--v-fingertip-half": unitBy(theme.spacing[`fingertip-${name}`], .5)
-		};
-		if (theme.spacing[name]) return {
-			"--v-fingertip": theme.spacing[name],
-			"--v-fingertip-half": unitBy(theme.spacing[name], .5)
-		};
-	}]
-];
-
 //#endregion
 //#region src/theme/rules/index.ts
 const rules = [
-	...spacingRules,
+	...[
+		[
+			/^text-m([bty])?-(.*)$/,
+			(match, { theme }) => {
+				const dir = match[1];
+				const size = match[2];
+				const d = dir ? {
+					y: ["top", "bottom"],
+					t: ["top"],
+					b: ["bottom"]
+				}[dir] : [
+					"top",
+					"bottom",
+					"left",
+					"right"
+				];
+				const result = {};
+				if (theme.spacing[size]) {
+					for (const prop of d) result[`margin-${prop}`] = ["left", "right"].includes(prop) ? theme.spacing[size] : `calc(${theme.spacing[size]} + var(--font-${prop === "top" ? "tc" : "bc"}))`;
+					return result;
+				} else if (/^\d+(em|rem|px)?$/.test(size)) {
+					let s = size;
+					if (/^[\d.]+$/.test(size)) s = `${Number(size) * .25}rem`;
+					for (const prop of d) result[`margin-${prop}`] = ["left", "right"].includes(prop) ? s : `calc(${s} + var(--font-${prop === "top" ? "tc" : "bc"}))`;
+					return result;
+				}
+			},
+			{ layer: "utilities" }
+		],
+		[
+			/^card-dense$/,
+			(_match, { theme: _theme }) => ({ "--card-spacing": "var(--card-spacing-dense)" }),
+			{ layer: "utilities" }
+		],
+		[/^card-(.*)$/, (match, { theme }) => {
+			const name = match[1];
+			if (theme.fontSize[name]) {
+				const props = theme.fontSize[name][1];
+				return {
+					"--card-spacing": `${unitBy(props["--font-corrected"], theme.cardSpacingFactor.regular)}`,
+					"--card-spacing-dense": `${unitBy(props["--font-corrected"], theme.cardSpacingFactor.dense)}`,
+					"--card-heading-size": props["--font-size"],
+					"--card-heading-bold": props["--font-bold"],
+					"--card-heading-corrected": props["--font-corrected"],
+					"--card-heading-weight": props["font-weight"],
+					"--card-heading-lh": props["line-height"],
+					"--card-heading-ls": props["letter-spacing"],
+					"--card-heading-bc": props["--font-bc"],
+					"--card-heading-tc": props["--font-tc"],
+					"padding": "var(--card-spacing)"
+				};
+			}
+		}],
+		[/^fingertip-(.*)/, (match, { theme }) => {
+			const name = match[1];
+			if (name.startsWith("[") && name.endsWith("]")) return {
+				"--v-fingertip": name.slice(1, -1),
+				"--v-fingertip-half": unitBy(name.slice(1, -1), .5)
+			};
+			if ([
+				"xs",
+				"s",
+				"m",
+				"l",
+				"xl"
+			].includes(name)) return {
+				"--v-fingertip": theme.spacing[`fingertip-${name}`],
+				"--v-fingertip-half": unitBy(theme.spacing[`fingertip-${name}`], .5)
+			};
+			if (theme.spacing[name]) return {
+				"--v-fingertip": theme.spacing[name],
+				"--v-fingertip-half": unitBy(theme.spacing[name], .5)
+			};
+		}]
+	],
 	...paletteRules,
 	...i8Rules
 ];
-
 //#endregion
 //#region src/theme/types.ts
 function k$1(n, base = 1) {
 	return base * 1.618 ** n;
 }
-
 //#endregion
 //#region src/theme/typography.ts
 function font(weight, boldWeight, size, height, spacing) {
@@ -1227,7 +1194,6 @@ function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actu
 		}]
 	};
 }
-
 //#endregion
 //#region src/theme/theme.ts
 const themeFactory = (opts) => {
@@ -1319,7 +1285,6 @@ const themeFactory = (opts) => {
 		}
 	};
 };
-
 //#endregion
 //#region src/theme/generated/component-classes.ts
 const componentClasses = {
@@ -1702,19 +1667,25 @@ const componentClasses = {
 	],
 	DelayedSwitch: ["visible"],
 	DevTools: [
+		"[&>.checkbox]:hover:bg-neutral-100",
 		"absolute",
 		"b",
 		"bg-transparent",
-		"blur",
 		"border",
+		"border-0",
 		"border-b",
+		"border-grey-500/30",
 		"border-grey-500/50",
-		"bottom-0",
 		"btn",
 		"btn-icon",
 		"btn-label",
 		"c8-flat",
 		"card",
+		"checkbox",
+		"checkbox-icon",
+		"checkbox-indicator",
+		"checkbox-label",
+		"checkbox-root",
 		"current-outline-primary-700",
 		"cursor-grab",
 		"cursor-grabbing",
@@ -1725,12 +1696,15 @@ const componentClasses = {
 		"flex",
 		"flex-col",
 		"flex-grow",
+		"flex-row-reverse",
 		"fw-$bold",
 		"gap-$xs",
 		"grid",
+		"grid-cols-1",
+		"grid-cols-2",
 		"grow",
 		"h-[3em]",
-		"h-[40em]",
+		"h-[44em]",
 		"h1",
 		"h2",
 		"h3",
@@ -1738,29 +1712,10 @@ const componentClasses = {
 		"h5",
 		"h6",
 		"hover:opacity-100",
-		"i8",
-		"i8-after",
-		"i8-append",
-		"i8-before",
-		"i8-counter",
-		"i8-hint",
-		"i8-hint-wrapper",
-		"i8-hint-wrapper-stack",
-		"i8-icon-clickable",
-		"i8-icon-wrap",
-		"i8-input",
-		"i8-input-wrapper",
-		"i8-label",
-		"i8-label-wrapper",
-		"i8-loading",
-		"i8-prepend",
-		"i8-stack-label",
-		"i8-ta-wrapper",
-		"i8-textarea",
-		"i8-underline",
 		"icon-color",
 		"icon-size",
 		"items-center",
+		"items-start",
 		"justify-between",
 		"justify-center",
 		"layer-0",
@@ -1771,7 +1726,7 @@ const componentClasses = {
 		"max-h-screen",
 		"max-w-100%",
 		"max-w-screen",
-		"mb-$l",
+		"mb-$xs",
 		"opacity-0",
 		"opacity-50",
 		"outline-[2px]",
@@ -1782,18 +1737,17 @@ const componentClasses = {
 		"overflow-hidden",
 		"p-$card-spacing",
 		"p-0",
+		"pb-$xs",
+		"pl-$m",
 		"pointer-events-none",
 		"pt-$l",
-		"px",
+		"px-$xs",
+		"py-1",
 		"relative",
-		"resize",
-		"right-0",
 		"rounded",
 		"rounded-full",
 		"scale-100",
 		"scale-20",
-		"scope-error",
-		"segmented",
 		"select-none",
 		"shadow-[0_0_5px_2px_rgb(var(--scope-color-500))]",
 		"shadow-md",
@@ -1809,23 +1763,25 @@ const componentClasses = {
 		"text-11px",
 		"text-16px",
 		"text-body",
+		"text-caption",
 		"text-card-header",
 		"text-ellipsis",
 		"text-error-500",
 		"text-grey-400",
 		"text-label",
 		"text-mb-0",
+		"text-mt-$s",
 		"text-mt-0",
-		"text-primary-700",
+		"text-right",
 		"top-0",
 		"transform",
 		"transform-origin-tl",
 		"transition-all-200",
 		"transition-opacity-200",
-		"w-12em",
-		"w-[30em]",
+		"truncate",
+		"w-6em",
+		"w-[34em]",
 		"w-[3em]",
-		"w-full",
 		"whitespace-nowrap"
 	],
 	Dialog: [
@@ -2188,7 +2144,6 @@ function getComponentClasses(...components) {
 	}
 	return [...set];
 }
-
 //#endregion
 //#region src/theme/preset-vunor.ts
 function createVunorExtractor() {
@@ -2324,7 +2279,6 @@ function getFixedWind() {
 	});
 	return wind;
 }
-
 //#endregion
 //#region src/theme.ts
 /**
@@ -2351,6 +2305,5 @@ function vunorShortcuts(customShortcuts, baseShortcuts = mergedVunorShortcuts) {
 	for (const [key, val] of Object.entries(merged)) merged[key] = typeof val === "string" ? val : toUnoShortcut(val);
 	return merged;
 }
-
 //#endregion
-export { componentClasses, defineShortcuts, getComponentClasses, mergeVunorShortcuts, mergedVunorShortcuts, presetVunor, rawVunorShortcuts, toUnoShortcut, vunorShortcuts };
+export { componentClasses, defineShortcuts, getComponentClasses, mergeVunorShortcuts, mergedVunorShortcuts, presetVunor, rawVunorShortcuts, toUnoShortcut, vunorShortcuts };