vunor 0.1.6 → 0.2.1

package/dist/theme.mjs

@@ -29,32 +29,6 @@ const toastShortcuts = defineShortcuts({
 	}
 });
 //#endregion
-//#region src/components/Button/shortcuts.ts
-const buttonShortcuts = defineShortcuts({
-	"btn": {
-		"": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
-		"[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
-		"[&.btn-square]:": "size-fingertip px-0",
-		"[&.btn-round.btn-square]:": "px-0",
-		"disabled:": "opacity-80 cursor-not-allowed",
-		"[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
-		"[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
-		"[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
-	},
-	"btn-square": { "": "" },
-	"btn-label": {
-		"": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible",
-		"group-[.btn-square]/btn:": "hidden"
-	},
-	"btn-icon": {
-		"": "size-1em font-size-1.25em",
-		"group-[.btn-round]/btn:[&.btn-icon-left]:": "ml-[-0.5em]",
-		"group-[.btn-round]/btn:[&.btn-icon-right]:": "mr-[-0.5em]",
-		"group-[.btn-square]/btn:": "font-size-1.5em m-0!",
-		"group-[.btn-round.btn-square]/btn:": "m-0!"
-	}
-});
-//#endregion
 //#region src/components/Calendar/shortcuts.ts
 const calendarShortcuts = defineShortcuts({
 	"calendar-root": "inline-block",
@@ -62,9 +36,8 @@ const calendarShortcuts = defineShortcuts({
 	"calendar-grid-row": "grid grid-cols-7 text-body-s",
 	"calendar-month-grid": "flex flex-col gap-$m sm:flex-row flex-wrap sm:gap-$m",
 	"calendar-cell": {
-		"": "c8-flat relative flex items-center justify-center lh-1em rounded-r0 whitespace-nowrap font-normal size-3em outline-none",
+		"": "disabled-soft c8-flat relative flex items-center justify-center lh-1em rounded-r0 whitespace-nowrap font-normal size-3em outline-none",
 		"focus-visible:": "shadow-[0_0_0_2px] shadow-black",
-		"data-[disabled]:": "opacity-30",
 		"data-[unavailable]:": "pointer-events-none opacity-50 line-through",
 		"before:": "absolute bottom-[0.6em] w-[1.5em] h-[2px] bg-scope-color-500/75 block",
 		"[&[data-today]::before]:": "content-['']",
@@ -103,9 +76,9 @@ const cardShortcuts = defineShortcuts({ card: `data-[rounded=true]:rounded-$card
 //#region src/components/Checkbox/shortcuts.ts
 const checkboxShortcuts = defineShortcuts({
 	"checkbox-root": {
-		"": "text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
+		"": "disabled-soft text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
 		"data-[error=true]:": "current-border-error-500",
-		"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
+		"aria-[disabled=true]:": "scope-grey"
 	},
 	"checkbox": {
 		"": "cursor-default shrink-0 select-none rounded-r0 transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 border-current border-[0.16em] current-icon-white",
@@ -156,12 +129,6 @@ 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({
 	"progress-track": {
@@ -190,8 +157,6 @@ const progressShortcuts = defineShortcuts({
 //#region src/components/shortcuts.ts
 const shortcuts = [
 	cardShortcuts,
-	menuShortcuts,
-	buttonShortcuts,
 	checkboxShortcuts,
 	defineShortcuts({
 		"rb-container": { "": "flex flex-col gap-$s text-body" },
@@ -203,22 +168,22 @@ const shortcuts = [
 		},
 		"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",
+			"": "disabled-soft 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",
+			"aria-[disabled=true]:": "scope-grey",
 			"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"
+			"": "disabled-soft select-none px-$s text-body leading-none lh-1.25em",
+			"aria-[disabled=true]:": "scope-grey"
 		}
 	}),
 	defineShortcuts({
 		"select-content": {
-			"": "min-w-[60px] rounded-r1 surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
+			"": "popup-card min-w-[60px]",
 			"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"
@@ -230,8 +195,8 @@ const shortcuts = [
 			"[&>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",
+			"": "disabled-soft text-body leading-none flex items-center min-h-fingertip relative select-none relative",
+			"data-[disabled]:": "pointer-events-none",
 			"data-[highlighted]:": "outline-none bg-scope-color-500/15",
 			"[&>span]:": "px-$m",
 			"group-data-[design=round]:[&>span]:": "px-fingertip-half",
@@ -263,10 +228,35 @@ const shortcuts = [
 	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)]" }
+	toastShortcuts
 ];
 //#endregion
+//#region src/theme/shortcuts/btn.ts
+const btn = defineShortcuts({
+	"btn": {
+		"": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
+		"[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
+		"[&.btn-square]:": "size-fingertip px-0",
+		"[&.btn-round.btn-square]:": "px-0",
+		"disabled:": "opacity-80 cursor-not-allowed",
+		"[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
+		"[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
+		"[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
+	},
+	"btn-square": { "": "" },
+	"btn-label": {
+		"": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible",
+		"group-[.btn-square]/btn:": "hidden"
+	},
+	"btn-icon": {
+		"": "size-1em font-size-1.25em",
+		"group-[.btn-round]/btn:[&.btn-icon-left]:": "ml-[-0.5em]",
+		"group-[.btn-round]/btn:[&.btn-icon-right]:": "mr-[-0.5em]",
+		"group-[.btn-square]/btn:": "font-size-1.5em m-0!",
+		"group-[.btn-round.btn-square]/btn:": "m-0!"
+	}
+});
+//#endregion
 //#region src/theme/shortcuts/c8.ts
 const c8 = defineShortcuts({
 	"c8-filled": {
@@ -294,6 +284,7 @@ const c8 = defineShortcuts({
 		"active:": "c8-flat-active",
 		"data-[active]:": "c8-flat-active",
 		"data-[selected=true]:": "c8-flat-selected",
+		"data-[on=true]:": "c8-flat-selected",
 		"aria-[selected=true]:": "c8-flat-selected",
 		"aria-[pressed=true]:": "c8-flat-selected"
 	},
@@ -322,6 +313,7 @@ const c8 = defineShortcuts({
 		"active:": "c8-chrome-active",
 		"data-[active]:": "c8-chrome-active",
 		"data-[selected=true]:": "c8-chrome-selected",
+		"data-[on=true]:": "c8-chrome-selected",
 		"aria-[selected=true]:": "c8-chrome-selected",
 		"aria-[pressed=true]:": "c8-chrome-selected"
 	},
@@ -346,6 +338,7 @@ const c8 = defineShortcuts({
 		"active:": "c8-light-active",
 		"data-[active]:": "c8-light-active",
 		"data-[selected=true]:": "c8-light-hover",
+		"data-[on=true]:": "c8-light-hover",
 		"aria-[selected=true]:": "c8-light-hover",
 		"aria-[pressed=true]:": "c8-light-hover"
 	},
@@ -353,121 +346,149 @@ const c8 = defineShortcuts({
 	"c8-light-active": { "not-([disabled]):": "bg-current/30" }
 });
 //#endregion
-//#region src/theme/shortcuts/i8.ts
-const i8 = defineShortcuts({
-	"i8": {
-		"": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box",
-		"data-[type=textarea]:": "min-h-fingertip h-auto items-start",
-		"data-[active=true]:": "icon-current-hl",
-		"focus-within:": "icon-current-hl",
-		"[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
-		"[&.i8-filled]:": {
-			"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
-			"data-[active=true]:": "current-border-hl outline i8-apply-outline",
-			"focus-within:": "current-border-hl outline i8-apply-outline"
+//#region src/theme/shortcuts/extras.ts
+const popupCard = defineShortcuts({
+	"shadow-popup": "shadow-[0_0_10px_rgba(0,0,0,0.1),0_4px_20px_rgba(0,0,0,0.15)]",
+	"popup-card": { "": "surface-0 bg-current rounded-r2 overflow-hidden shadow-popup z-[100] border current-border-grey-400 border-current/20" }
+});
+const disabledPaint = "opacity-40 cursor-not-allowed";
+const disabledSoft = defineShortcuts({ "disabled-soft": {
+	"disabled:": disabledPaint,
+	"aria-[disabled=true]:": disabledPaint,
+	"data-[disabled]:": disabledPaint
+} });
+//#endregion
+//#region src/theme/shortcuts/raw.ts
+const rawVunorShortcuts = [
+	defineShortcuts({
+		"i8": {
+			"": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box disabled-soft",
+			"data-[type=textarea]:": "min-h-fingertip h-auto items-start",
+			"data-[active=true]:": "icon-current-hl",
+			"focus-within:": "icon-current-hl",
+			"[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
+			"[&.i8-filled]:": {
+				"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
+				"data-[active=true]:": "current-border-hl outline i8-apply-outline",
+				"focus-within:": "current-border-hl outline i8-apply-outline"
+			},
+			"[&.i8-transparent]:": "bg-transparent!",
+			"[&.i8-round]:": {
+				"": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
+				"data-[active=true]:": "current-border-hl outline i8-apply-outline",
+				"focus-within:": "current-border-hl outline i8-apply-outline"
+			},
+			"group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
 		},
-		"[&.i8-transparent]:": "bg-transparent!",
-		"[&.i8-round]:": {
-			"": "i8-apply-bg current-outline-hl rounded-fingertip-half i8-apply-border",
-			"data-[active=true]:": "current-border-hl outline i8-apply-outline",
-			"focus-within:": "current-border-hl outline i8-apply-outline"
+		"i8-bare": {
+			"": "i8-apply-bg i8-apply-border current-outline-hl rounded-r1 outline-none text-current placeholder:text-current/50 disabled-soft",
+			"hover:": "border-current-hover",
+			"focus:": "current-border-hl outline i8-apply-outline",
+			"data-[error=true]:": "current-border-error-500 current-outline-error-500 border-current"
 		},
-		"aria-[disabled=true]:": "opacity-50 cursor-not-allowed",
-		"group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
-	},
-	"i8-loading": {
-		"": "text-current-icon pl-$m",
-		"last:": "pr-$m"
-	},
-	"i8-icon-wrap": "size-fingertip flex items-center justify-center",
-	"i8-underline": {
-		"group-[.i8-filled]/i8:": "hidden",
-		"": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
-		"group-[[data-active=true]]/i8:": "left-0 right-0"
-	},
-	"segmented": {
-		"": {
-			"first-of-type:": "rounded-r-0!",
-			"last-of-type:": "rounded-lt-0! rounded-lb-0!",
-			"not-last-of-type:not-first-of-type:": "rounded-0!",
-			"not-first-of-type:": "border-l-0! border-l-grey-500/20",
-			"data-[active=true]:": "z-2"
+		"i8-loading": {
+			"": "text-current-icon pl-$m",
+			"last:": "pr-$m"
 		},
-		"[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
-	},
-	"i8-input-wrapper": { "": "relative w-full h-full" },
-	"i8-input": {
-		"": "w-full outline-none h-full bg-transparent",
-		"group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
-		"group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
-		"selection:": "bg-scope-color-500 text-white",
-		"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
-		"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
-		"group-[[data-has-label]]/i8:": "pt-$m",
-		"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
-		"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
-	},
-	"i8-textarea": {
-		"": "w-full outline-none h-full bg-transparent text-body",
-		"group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
-		"group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
-		"selection:": "bg-scope-color-500 text-white",
-		"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
-		"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
-		"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
-		"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
-	},
-	"i8-ta-wrapper": {
-		"": "w-full pt-0.75em",
-		"group-[[data-has-label]]/i8:": "mt-$m"
-	},
-	"i8-label": {
-		"": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
-		"group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
-		"group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
-		"group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
-		"group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
-	},
-	"i8-label-wrapper": {
-		"": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
-		"group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
-		"group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
-		"group-[.i8-filled]/i8:": "px-$m",
-		"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
-		"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
-		"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
-		"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
-	},
-	"i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
-	"i8-counter": { "": "text-caption pt-$xs text-grey-400" },
-	"i8-hint-wrapper": {
-		"": "relative flex justify-between",
-		"group-[.i8-round]/i8:": "px-fingertip-half",
-		"group-[.i8-filled]/i8:": "px-$m"
-	},
-	"i8-hint-wrapper-stack": { "": "relative flex justify-between" },
-	"i8-stack-label": { "": "relative pb-$xxs" },
-	"i8-prepend": {
-		"": "flex items-center",
-		"group-[[data-type=textarea]]/i8:": "my-$m"
-	},
-	"i8-append": {
-		"": "flex items-center",
-		"group-[[data-type=textarea]]/i8:": "my-$m"
-	},
-	"i8-before": {
-		"": "h-fingertip flex items-center icon-current",
-		"group-[[data-group-active=true]]/i8:": "icon-current-hl"
-	},
-	"i8-after": {
-		"": "h-fingertip flex items-center icon-current",
-		"group-[[data-group-active=true]]/i8:": "icon-current-hl"
-	},
-	"i8-icon-clickable": {
-		"[&>.i8-icon-wrap]:": "cursor-pointer",
-		"[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
-	}
-});
+		"i8-icon-wrap": "size-fingertip flex items-center justify-center",
+		"i8-underline": {
+			"group-[.i8-filled]/i8:": "hidden",
+			"": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
+			"group-[[data-active=true]]/i8:": "left-0 right-0"
+		},
+		"segmented": {
+			"": {
+				"first-of-type:": "rounded-r-0!",
+				"last-of-type:": "rounded-lt-0! rounded-lb-0!",
+				"not-last-of-type:not-first-of-type:": "rounded-0!",
+				"not-first-of-type:": "border-l-0! border-l-grey-500/20",
+				"data-[active=true]:": "z-2"
+			},
+			"[&.i8-flat]:": { "not-first-of-type:": "ml-$xs" }
+		},
+		"i8-input-wrapper": { "": "relative w-full h-full" },
+		"i8-input": {
+			"": "w-full outline-none h-full bg-transparent",
+			"group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
+			"group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
+			"selection:": "bg-scope-color-500 text-white",
+			"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
+			"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
+			"group-[[data-has-label]]/i8:": "pt-$m",
+			"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
+			"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
+		},
+		"i8-textarea": {
+			"": "w-full outline-none h-full bg-transparent text-body",
+			"group-[.i8-filled]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
+			"group-[.i8-filled]/i8:[&:not([data-has-append=true])]:": "pr-$m",
+			"selection:": "bg-scope-color-500 text-white",
+			"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
+			"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
+			"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
+			"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
+		},
+		"i8-ta-wrapper": {
+			"": "w-full pt-0.75em",
+			"group-[[data-has-label]]/i8:": "mt-$m"
+		},
+		"i8-label": {
+			"": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
+			"group-[:focus-within]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
+			"group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-current-hl",
+			"group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
+			"group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
+		},
+		"i8-label-wrapper": {
+			"": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
+			"group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
+			"group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
+			"group-[.i8-filled]/i8:": "px-$m",
+			"group-[.i8-round]/i8:[&:not([data-has-prepend=true])]:": "pl-fingertip-half",
+			"group-[.i8-round]/i8:[&:not([data-has-append=true])]:": "pr-fingertip-half",
+			"group-[.segmented.i8-round:not(:first-child)]/i8:[&:not([data-has-prepend=true])]:": "pl-$m",
+			"group-[.segmented.i8-round:not(:last-child)]/i8:[&:not([data-has-append=true])]:": "pr-$m"
+		},
+		"i8-hint": { "": "text-caption pt-$xs text-grey-400 flex-1" },
+		"i8-counter": { "": "text-caption pt-$xs text-grey-400" },
+		"i8-hint-wrapper": {
+			"": "relative flex justify-between",
+			"group-[.i8-round]/i8:": "px-fingertip-half",
+			"group-[.i8-filled]/i8:": "px-$m"
+		},
+		"i8-hint-wrapper-stack": { "": "relative flex justify-between" },
+		"i8-stack-label": { "": "relative pb-$xxs" },
+		"i8-prepend": {
+			"": "flex items-center",
+			"group-[[data-type=textarea]]/i8:": "my-$m"
+		},
+		"i8-append": {
+			"": "flex items-center",
+			"group-[[data-type=textarea]]/i8:": "my-$m"
+		},
+		"i8-before": {
+			"": "h-fingertip flex items-center icon-current",
+			"group-[[data-group-active=true]]/i8:": "icon-current-hl"
+		},
+		"i8-after": {
+			"": "h-fingertip flex items-center icon-current",
+			"group-[[data-group-active=true]]/i8:": "icon-current-hl"
+		},
+		"i8-icon-clickable": {
+			"[&>.i8-icon-wrap]:": "cursor-pointer",
+			"[&>.i8-icon-wrap:hover]:": "current-icon-hl icon-current"
+		}
+	}),
+	c8,
+	btn,
+	defineShortcuts({
+		"menu-root": "flex flex-col overflow-hidden",
+		"menu-item": "justify-start c8-flat gap-$m w-full fw-400"
+	}),
+	popupCard,
+	disabledSoft,
+	...shortcuts
+];
 //#endregion
 //#region src/theme/utils/shortcut-obj.ts
 /**
@@ -527,833 +548,6 @@ const mergeTwoVunorShortcuts = (target, source) => {
 */
 const mergeVunorShortcuts = (shortcuts) => shortcuts.reduce((acc, shortcut) => mergeTwoVunorShortcuts(acc, shortcut), {});
 //#endregion
-//#region src/theme/palitra.ts
-const defaultOpts = {
-	colors: {
-		primary: {
-			color: "#004eaf",
-			preserveInputColor: true,
-			saturate: {
-				dark: -.2,
-				light: -.2
-			}
-		},
-		grey: {
-			color: "#858892",
-			saturate: {
-				dark: 0,
-				light: 0
-			}
-		},
-		secondary: {
-			color: "#edd812",
-			vivid: {
-				dark: .4,
-				light: .4
-			}
-		},
-		neutral: {
-			color: "#5da0c5",
-			vivid: {
-				dark: .1,
-				light: .1
-			}
-		},
-		good: {
-			color: "#7bc76a",
-			vivid: {
-				dark: .2,
-				light: .5
-			}
-		},
-		warn: {
-			color: "#ef9421",
-			vivid: {
-				dark: .2,
-				light: .3
-			}
-		},
-		error: { color: "#bf5a5f" }
-	},
-	lightest: .97,
-	darkest: .24,
-	layersDepth: .08,
-	flatness: 1,
-	mainPalette: {
-		preserveInputColor: false,
-		luminance: {
-			useMiddle: true,
-			middle: .62
-		},
-		saturate: {
-			dark: -.25,
-			light: -.25
-		},
-		vivid: {
-			dark: .1,
-			light: .2
-		}
-	},
-	layerPalette: {
-		desaturate: .2,
-		saturate: {
-			dark: -.2,
-			light: -.2
-		},
-		vivid: {
-			dark: 0,
-			light: 0
-		}
-	},
-	surfaces: {
-		"0": [
-			"scope-light-0",
-			"scope-dark-1",
-			"scope-color-100",
-			"scope-dark-0",
-			"scope-light-1",
-			"scope-color-800"
-		],
-		"1": [
-			"scope-light-1",
-			"scope-dark-1",
-			"scope-color-100",
-			"scope-dark-1",
-			"scope-light-1",
-			"scope-color-800"
-		],
-		"2": [
-			"scope-light-2",
-			"scope-dark-1",
-			"scope-color-100",
-			"scope-dark-2",
-			"scope-light-1",
-			"scope-color-800"
-		],
-		"3": [
-			"scope-light-3",
-			"scope-dark-1",
-			"scope-color-100",
-			"scope-dark-3",
-			"scope-light-1",
-			"scope-color-800"
-		],
-		"4": [
-			"scope-light-4",
-			"scope-dark-1",
-			"scope-color-100",
-			"scope-dark-4",
-			"scope-light-1",
-			"scope-color-800"
-		],
-		"50": [
-			"scope-color-50",
-			"scope-color-700",
-			"scope-color-200",
-			"scope-color-900",
-			"scope-color-200",
-			"scope-color-500"
-		],
-		"100": [
-			"scope-color-100",
-			"scope-color-800",
-			"scope-color-200",
-			"scope-color-800",
-			"scope-color-200",
-			"scope-color-500"
-		],
-		"200": [
-			"scope-color-200",
-			"scope-color-800",
-			"scope-color-400",
-			"scope-color-700",
-			"scope-color-100",
-			"scope-color-400"
-		],
-		"300": [
-			"scope-color-300",
-			"scope-color-900",
-			"scope-color-500",
-			"scope-color-600",
-			"scope-color-100",
-			"scope-color-300"
-		],
-		"400": [
-			"scope-color-400",
-			"scope-color-50",
-			"scope-color-200",
-			"scope-color-500",
-			"scope-color-50",
-			"scope-color-200"
-		],
-		"500": [
-			"scope-color-500",
-			"scope-color-50",
-			"scope-color-200",
-			"scope-color-400",
-			"scope-color-50",
-			"scope-color-100"
-		],
-		"600": [
-			"scope-color-600",
-			"scope-color-100",
-			"scope-color-300",
-			"scope-color-300",
-			"scope-color-900",
-			"scope-color-700"
-		],
-		"700": [
-			"scope-color-700",
-			"scope-color-100",
-			"scope-color-300",
-			"scope-color-200",
-			"scope-color-800",
-			"scope-color-600"
-		],
-		"800": [
-			"scope-color-800",
-			"scope-color-200",
-			"scope-color-400",
-			"scope-color-100",
-			"scope-color-800",
-			"scope-color-500"
-		],
-		"900": [
-			"scope-color-900",
-			"scope-color-200",
-			"scope-color-400",
-			"scope-color-50",
-			"scope-color-700",
-			"scope-color-500"
-		]
-	}
-};
-function generatePalette(_opts) {
-	const _colors = _opts?.colors || {};
-	for (const key of Object.keys(_colors)) {
-		const col = _opts?.colors?.[key];
-		if (typeof col === "string") _colors[key] = { color: col };
-	}
-	const opts = defu$1({
-		..._opts,
-		colors: _colors
-	}, defaultOpts);
-	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,
-			useMiddle: false
-		},
-		saturate: opts.layerPalette.saturate,
-		vivid: opts.layerPalette.vivid,
-		suffixes: [
-			"dark-0",
-			"dark-1",
-			"dark-2",
-			"dark-3",
-			"dark-4"
-		]
-	};
-	const darks = palitra(multiplySaturation(opts.colors, opts.layerPalette.desaturate), bgOptions).toStrings();
-	bgOptions.suffixes = [
-		"light-0",
-		"light-1",
-		"light-2",
-		"light-3",
-		"light-4"
-	].toReversed();
-	const lumDark = bgOptions.luminance?.dark ?? opts.darkest;
-	bgOptions.luminance = {
-		dark: 1 - ((bgOptions.luminance?.light ?? opts.darkest + opts.layersDepth) - lumDark),
-		light: 1,
-		useMiddle: false
-	};
-	const lights = palitra(multiplySaturation(opts.colors, opts.layerPalette.desaturate), bgOptions).toStrings();
-	const colors = palitra({
-		primary: opts.colors.primary,
-		grey: opts.colors.grey,
-		secondary: opts.colors.secondary,
-		neutral: opts.colors.neutral,
-		good: opts.colors.good,
-		warn: opts.colors.warn,
-		error: opts.colors.error
-	}, {
-		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,
-			useMiddle: opts.mainPalette.luminance?.useMiddle,
-			middle: opts.mainPalette.luminance?.middle
-		},
-		saturate: opts.mainPalette.saturate,
-		vivid: opts.mainPalette.vivid
-	}).toStrings();
-	return {
-		opts,
-		colors: {
-			...darks,
-			...lights,
-			...colors
-		},
-		surfaces: opts.surfaces
-	};
-}
-function multiplySaturation(colors, m = .5) {
-	const newObj = {};
-	for (const [key, val] of Object.entries(colors)) {
-		const col = typeof val === "string" ? val : val.color;
-		if (col) {
-			const [h, s, l] = color(col).hsl();
-			newObj[key] = color(h, s * m, l, "hsl").hex();
-		}
-	}
-	return newObj;
-}
-const layerN = (n, reverse) => reverse ? 4 - n : n;
-function getPaletteShortcuts() {
-	return [
-		[/^layer-([0-4])$/, ([, a], { theme }) => {
-			const d = layerN(Number(a), theme.reverseDarkLayers);
-			return toUnoShortcut({
-				"": `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);
-			return toUnoShortcut({
-				"": `${target}-scope-light-${layerN(Number(a), theme.reverseLightLayers)}`,
-				"dark:": `${target}-scope-dark-${d}`,
-				"[&.dark]:": `${target}-scope-dark-${d}`
-			});
-		}],
-		[/^surface-(.+)$/, ([, s], { theme }) => theme.surfaces[s] ? toUnoShortcut({
-			"": `current-bg-${theme.surfaces[s][0]} current-text-${theme.surfaces[s][1]} current-icon-${theme.surfaces[s][1]} current-border-${theme.surfaces[s][2]} bg-current text-current border-current icon-current`,
-			"dark:": `current-bg-${theme.surfaces[s][3]} current-text-${theme.surfaces[s][4]} current-icon-${theme.surfaces[s][4]} current-border-${theme.surfaces[s][5]} shadow-black/30`,
-			"[&.dark]:": `current-bg-${theme.surfaces[s][3]} current-text-${theme.surfaces[s][4]} current-icon-${theme.surfaces[s][4]} current-border-${theme.surfaces[s][5]} shadow-black/30`
-		}) : ""],
-		{ surface: "surface-100" }
-	];
-}
-//#endregion
-//#region src/theme/rules/palette.ts
-function colorToRgbWithOpacity(c) {
-	const [r, g, b, _a] = color(c).rgba();
-	return `${r} ${g} ${b}`;
-}
-function getOpacityVar(key) {
-	return {
-		bg: "--un-bg-opacity",
-		text: "--un-text-opacity",
-		fill: "--un-text-opacity",
-		stroke: "--un-text-opacity",
-		icon: "--un-icon-opacity",
-		border: "--un-border-opacity",
-		outline: "--un-outline-opacity",
-		caret: "--un-caret-opacity",
-		shadow: "--un-shadow-opacity",
-		ring: "--un-ring-opacity"
-	}[key];
-}
-function getCssTarget(key) {
-	return {
-		bg: "background-color",
-		text: "color",
-		fill: "fill",
-		stroke: "stroke",
-		icon: "color",
-		border: "border-color",
-		outline: "outline-color",
-		caret: "caret-color",
-		shadow: "--un-shadow-color",
-		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];
-		const c = match[2];
-		if (c.startsWith("scope-")) return { [`--current-${t}`]: `var(--${c})` };
-		if (c === "hl") return { [`--current-${t}`]: `var(--current-hl)` };
-		const col = theme.colors[c] || c;
-		if (col) return { [`--current-${t}`]: colorToRgbWithOpacity(col.DEFAULT || col) };
-	}],
-	[/^(text|bg|icon|border|outline|caret|fill|shadow|ring)-current(-text|-bg|-icon|-border|-outline|-caret|-hl)?(\/\d{1,3})?$/, (match, { theme: _theme }) => {
-		const target = match[1];
-		const source = match[2] || `-${target}`;
-		const opacityVar = getOpacityVar(target);
-		const cssVar = getCssTarget(target);
-		const o = match[3];
-		const opacity = o ? Number(o.slice(1)) / 100 : 1;
-		const opacityVal = opacity === 1 ? `var(${opacityVar})` : opacity;
-		if (target === "icon") return {
-			[opacityVar]: opacity,
-			"--current-icon": source === "-hl" ? `var(--current${source})` : void 0
-		};
-		if (["shadow", "ring"].includes(target) && source === "-border") return {
-			[opacityVar]: opacity === 1 ? `var(--un-border-opacity)` : opacity,
-			[`--un-${target}-color`]: `rgb(var(--current-border) / ${opacityVal})`
-		};
-		return {
-			[opacityVar]: opacity,
-			[cssVar]: `rgb(var(--current${source}) / ${opacityVal})`
-		};
-	}],
-	[/^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]);
-		const source = match[2];
-		const o = match[3];
-		const opacity = o ? Number(o.slice(1)) / 100 : 1;
-		const fallback = source.startsWith("color") ? `grey-${source.slice(6)}` : `grey-${source}`;
-		const opacityVal = opacity === 1 ? `var(${opacityVar})` : opacity;
-		return {
-			[opacityVar]: opacity,
-			[cssVar]: `rgb(var(--scope-${source}, ${theme.colors[fallback] || ""}) / ${opacityVal})`
-		};
-	}],
-	[/^icon-opacity-(\d{1,3})$/, (match, { theme: _theme }) => {
-		const o = match[1];
-		return { "--un-icon-opacity": Number(o) / 100 };
-	}],
-	[/^icon-color$/, () => ({ color: `rgb(var(--current-icon) / var(--un-icon-opacity, 1))` })],
-	[/^icon-size-(.*)$/, (match, { theme }) => {
-		const name = match[1];
-		if (name.startsWith("[") && name.endsWith("]")) return { "--icon-size": name.slice(1, -1) };
-		if (theme.spacing[name]) return { "--icon-size": theme.spacing[name] };
-	}],
-	[/^icon-size$/, () => ({
-		width: `var(--icon-size, 1em)`,
-		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 = [
-	[/^i8-(border|outline|bg)-(.+)$/, (match, { theme }) => {
-		const target = match[1];
-		const value = match[2];
-		if (value === "none") return { [`--i8-${target}-width`]: "0" };
-		if (value === "transparent") return { [`--i8-${target}-color`]: "0" };
-		if (value.startsWith("scope-")) return { [`--i8-${target}-color`]: `var(--${value})` };
-		const col = theme.colors[value];
-		if (col) return { [`--i8-${target}-color`]: colorToRgbWithOpacity(String(col.DEFAULT || col)) };
-		const width = theme.spacing[value];
-		if (width) return { [`--i8-${target}-width`]: width };
-		if (value.endsWith("px") || value.endsWith("em") || value.endsWith("rem")) return { [`--i8-${target}-width`]: value };
-		if (value.startsWith("[") && value.endsWith("]")) {
-			const v = value.slice(1, -1);
-			if (v.endsWith("px") || v.endsWith("em") || v.endsWith("rem")) return { [`--i8-${target}-width`]: v };
-			return { [`--i8-${target}-color`]: v };
-		}
-	}],
-	[/^i8-(border|outline|bg)-opacity-(\d{1,3})$/, (match, { theme: _theme }) => {
-		const target = match[1];
-		const value = match[2];
-		return { [`--i8-${target}-opacity`]: Number(value) / 100 };
-	}],
-	[/^i8-apply-(border|outline|bg)$/, (match, { theme: _theme }) => {
-		const target = match[1];
-		const prop = {
-			border: "border-color",
-			outline: "outline-color",
-			bg: "background-color"
-		}[target];
-		const variable = {
-			border: "--i8-border-color, var(--current-border)",
-			outline: "--i8-outline-color, var(--current-outline)",
-			bg: "--i8-bg-color, var(--current-bg)"
-		}[target];
-		const op = {
-			border: `--i8-border-opacity, 0.2`,
-			outline: `--i8-outline-opacity, 0.5`,
-			bg: "--i8-bg-opacity, 1"
-		}[target];
-		return target === "bg" ? { [prop]: `rgb(var(${variable}) / var(${op}))` } : {
-			[prop]: `rgb(var(${variable}) / var(${op}))`,
-			[`${target}-width`]: `var(--i8-${target}-width, ${target === "border" ? 1 : 2}px)`
-		};
-	}]
-];
-//#endregion
-//#region src/theme/rules/index.ts
-const rules = [
-	...[
-		[
-			/^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) {
-	return {
-		weight,
-		boldWeight,
-		size,
-		height,
-		spacing
-	};
-}
-const defaultTypography = {
-	"h1": font(400, 700, k$1(3.5), k$1(.5), -.025),
-	"h2": font(400, 700, k$1(2.5), k$1(.5), -.022),
-	"h3": font(400, 700, k$1(2), k$1(.5), -.022),
-	"h4": font(400, 600, k$1(1), k$1(.5), -.02),
-	"h5": font(400, 600, k$1(.5), k$1(.5), -.017),
-	"h6": font(600, 700, k$1(.25), k$1(.5), -.014),
-	"subheading": font(400, 600, k$1(-.2), k$1(.5), -.007),
-	"body-l": font(400, 600, k$1(.5), k$1(.75), -.014),
-	"body": font(400, 600, k$1(0), k$1(.75), -.011),
-	"body-s": font(400, 600, k$1(-.5), k$1(1), 0),
-	"callout": font(400, 600, k$1(-.25), k$1(.5), -.009),
-	"label": font(500, 700, k$1(-.25), k$1(.5), -.004),
-	"caption": font(400, 600, k$1(-.5), k$1(.5), -.007),
-	"overline": font(400, 600, k$1(-.5), k$1(.5), .0618)
-};
-function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actualFontHeightTopBottomRatio = .5) {
-	const correctedSize = size * actualFontHeightFactor;
-	const m = (lh * size - correctedSize) / size;
-	const half = correctedSize / 2;
-	const offt = correctedSize * actualFontHeightTopBottomRatio - half + m / 2;
-	const offb = correctedSize * (1 - actualFontHeightTopBottomRatio) - half + m / 2;
-	const mt = round(offt, 4);
-	const mb = round(offb, 4);
-	return {
-		mt,
-		mb,
-		size,
-		correctedSize,
-		theme: [`${size}em`, {
-			"--font-bold": wBold,
-			"--font-size": `${size}em`,
-			"--font-corrected": `${correctedSize}em`,
-			"--font-bc": `${-mb}em`,
-			"--font-tc": `${-mt}em`,
-			"font-weight": w,
-			"line-height": `${lh}em`,
-			"letter-spacing": `${ls}em`
-		}]
-	};
-}
-//#endregion
-//#region src/theme/utils/radius-scale.ts
-const ROOT_FONT_PX = 16;
-function parseRadius(input) {
-	const m = input.trim().match(/^(-?\d*\.?\d+)(px|em|rem)?$/);
-	if (!m) return null;
-	const n = Number.parseFloat(m[1]);
-	if (!Number.isFinite(n)) return null;
-	return {
-		n,
-		unit: m[2] ?? ""
-	};
-}
-function computeRadiusScale(baseRadius) {
-	const parsed = parseRadius(baseRadius);
-	if (!parsed) return {
-		r0: `min(${baseRadius}, clamp(2px, calc(${baseRadius} / 2), 4px))`,
-		r1: baseRadius,
-		r2: `calc(${baseRadius} * 1.5)`,
-		r3: `calc(${baseRadius} * 2)`,
-		r4: `calc(${baseRadius} * 2.5)`
-	};
-	const { n, unit } = parsed;
-	if (n === 0) return {
-		r0: "0",
-		r1: "0",
-		r2: "0",
-		r3: "0",
-		r4: "0"
-	};
-	const basePx = unit === "em" || unit === "rem" ? n * ROOT_FONT_PX : n;
-	const r0Px = Math.min(basePx, Math.max(2, Math.min(basePx / 2, 4)));
-	const scaled = unit ? baseRadius : `${n}px`;
-	return {
-		r0: `${round(r0Px, 3)}px`,
-		r1: baseRadius,
-		r2: unitBy(scaled, 1.5),
-		r3: unitBy(scaled, 2),
-		r4: unitBy(scaled, 2.5)
-	};
-}
-//#endregion
-//#region src/theme/theme.ts
-const themeFactory = (opts) => {
-	/**
-	* Spacing
-	*/
-	const spacing = {
-		"$xxs": `${round(1 / opts.spacingFactor ** 3, 3)}em`,
-		"$xs": `${round(1 / opts.spacingFactor ** 2, 3)}em`,
-		"$s": `${round(1 / opts.spacingFactor, 3)}em`,
-		"$m": "1em",
-		"$l": `${round(opts.spacingFactor, 3)}em`,
-		"$xl": `${round(opts.spacingFactor ** 2, 3)}em`,
-		"$xxl": `${round(opts.spacingFactor ** 3, 3)}em`,
-		"fingertip": "var(--v-fingertip)",
-		"fingertip-half": "var(--v-fingertip-half)",
-		"fingertip-xs": opts.fingertip.xs,
-		"fingertip-s": opts.fingertip.s,
-		"fingertip-m": opts.fingertip.m,
-		"fingertip-l": opts.fingertip.l,
-		"fingertip-xl": opts.fingertip.xl,
-		"$font-tc": "var(--font-bc)",
-		"$font-bc": "var(--font-tc)",
-		"$font-size": "var(--font-size)",
-		"$font-corrected": "var(--font-corrected)",
-		"$card-spacing": "var(--card-spacing)",
-		"$card-spacing-dense": "var(--card-spacing-dense)",
-		"$card-heading-size": "var(--card-heading-size)",
-		"$card-heading-corrected": "var(--card-heading-corrected)",
-		"base-radius": opts.baseRadius
-	};
-	const lineHeight = {
-		"fingertip": "var(--v-fingertip)",
-		"fingertip-half": "var(--v-fingertip-half)",
-		"fingertip-xs": opts.fingertip.xs,
-		"fingertip-s": opts.fingertip.s,
-		"fingertip-m": opts.fingertip.m,
-		"fingertip-l": opts.fingertip.l,
-		"fingertip-xl": opts.fingertip.xl
-	};
-	const borderRadius = {
-		...spacing,
-		base: opts.baseRadius,
-		...computeRadiusScale(opts.baseRadius)
-	};
-	/**
-	* Typography
-	*/
-	const fontWeight = { $bold: "var(--font-bold)" };
-	const fontSize = { "card-header": ["var(--card-heading-size)", {
-		"--font-bold": "var(--card-heading-bold)",
-		"--font-size": "var(--card-heading-size)",
-		"--font-corrected": "var(--card-heading-corrected)",
-		"--font-bc": "var(--card-heading-bc)",
-		"--font-tc": "var(--card-heading-tc)",
-		"font-weight": "var(--card-heading-weight)",
-		"line-height": "var(--card-heading-lh)",
-		"letter-spacing": "var(--card-heading-ls)"
-	}] };
-	for (const [name, val] of Object.entries(opts.typography)) if (val?.size) {
-		const ft = buildFontTheme(val.size || 1, val.weight || 400, val.boldWeight || 700, val.height || 1, val.spacing || 0, val.actualHeightFactor || opts.actualFontHeightFactor, val.actualHeightTopBottomRatio || opts.actualFontHeightTopBottomRatio);
-		fontSize[name] = ft.theme;
-		spacing[name] = `${ft.size}em`;
-	}
-	const palette = generatePalette(opts.palette);
-	/**
-	* Putting all together
-	*/
-	return {
-		paletteOpts: palette.opts,
-		theme: {
-			colors: palette.colors,
-			surfaces: palette.surfaces,
-			reverseLightLayers: opts.layers.reverseLight,
-			reverseDarkLayers: opts.layers.reverseDark,
-			lineHeight,
-			spacing,
-			fontWeight,
-			actualFontHeightFactor: opts.actualFontHeightFactor,
-			cardSpacingFactor: opts.cardSpacingFactor,
-			fontSize,
-			width: spacing,
-			height: spacing,
-			maxWidth: spacing,
-			maxHeight: spacing,
-			minWidth: spacing,
-			minHeight: spacing,
-			borderRadius,
-			animation: opts.animation
-		}
-	};
-};
-//#endregion
 //#region src/theme/generated/component-classes.ts
 const componentClasses = {
 	AppLayout: [
@@ -1737,7 +931,6 @@ const componentClasses = {
 	DevTools: [
 		"[&>.checkbox]:hover:bg-neutral-100",
 		"absolute",
-		"b",
 		"bg-transparent",
 		"border",
 		"border-0",
@@ -2059,7 +1252,6 @@ const componentClasses = {
 		"btn",
 		"btn-icon",
 		"c8-flat",
-		"disabled:opacity-30",
 		"flex",
 		"gap-1",
 		"icon-color",
@@ -2195,24 +1387,899 @@ const componentClasses = {
 		"text-label",
 		"whitespace-nowrap"
 	],
-	Tabs: [
-		"c8-flat",
-		"flex",
-		"grow",
-		"relative",
-		"tab",
-		"tabs-indicator"
-	]
+	Tabs: [
+		"c8-flat",
+		"flex",
+		"grow",
+		"relative",
+		"tab",
+		"tabs-indicator"
+	]
+};
+function getComponentClasses(...components) {
+	const set = /* @__PURE__ */ new Set();
+	for (const name of components) {
+		const key = name.startsWith("Vu") ? name.slice(2) : name;
+		for (const cls of componentClasses[key] ?? []) set.add(cls);
+	}
+	return [...set];
+}
+//#endregion
+//#region src/theme/palitra.ts
+const defaultOpts = {
+	colors: {
+		primary: {
+			color: "#004eaf",
+			preserveInputColor: true,
+			saturate: {
+				dark: -.2,
+				light: -.2
+			}
+		},
+		grey: {
+			color: "#858892",
+			saturate: {
+				dark: 0,
+				light: 0
+			}
+		},
+		secondary: {
+			color: "#edd812",
+			vivid: {
+				dark: .4,
+				light: .4
+			}
+		},
+		neutral: {
+			color: "#5da0c5",
+			vivid: {
+				dark: .1,
+				light: .1
+			}
+		},
+		good: {
+			color: "#7bc76a",
+			vivid: {
+				dark: .2,
+				light: .5
+			}
+		},
+		warn: {
+			color: "#ef9421",
+			vivid: {
+				dark: .2,
+				light: .3
+			}
+		},
+		error: { color: "#bf5a5f" }
+	},
+	lightest: .97,
+	darkest: .24,
+	layersDepth: .08,
+	flatness: 1,
+	mainPalette: {
+		preserveInputColor: false,
+		luminance: {
+			useMiddle: true,
+			middle: .62
+		},
+		saturate: {
+			dark: -.25,
+			light: -.25
+		},
+		vivid: {
+			dark: .1,
+			light: .2
+		}
+	},
+	layerPalette: {
+		desaturate: .2,
+		saturate: {
+			dark: -.2,
+			light: -.2
+		},
+		vivid: {
+			dark: 0,
+			light: 0
+		}
+	},
+	surfaces: {
+		"0": [
+			"scope-light-0",
+			"scope-dark-1",
+			"scope-color-100",
+			"scope-dark-0",
+			"scope-light-1",
+			"scope-color-800"
+		],
+		"1": [
+			"scope-light-1",
+			"scope-dark-1",
+			"scope-color-100",
+			"scope-dark-1",
+			"scope-light-1",
+			"scope-color-800"
+		],
+		"2": [
+			"scope-light-2",
+			"scope-dark-1",
+			"scope-color-100",
+			"scope-dark-2",
+			"scope-light-1",
+			"scope-color-800"
+		],
+		"3": [
+			"scope-light-3",
+			"scope-dark-1",
+			"scope-color-100",
+			"scope-dark-3",
+			"scope-light-1",
+			"scope-color-800"
+		],
+		"4": [
+			"scope-light-4",
+			"scope-dark-1",
+			"scope-color-100",
+			"scope-dark-4",
+			"scope-light-1",
+			"scope-color-800"
+		],
+		"50": [
+			"scope-color-50",
+			"scope-color-700",
+			"scope-color-200",
+			"scope-color-900",
+			"scope-color-200",
+			"scope-color-500"
+		],
+		"100": [
+			"scope-color-100",
+			"scope-color-800",
+			"scope-color-200",
+			"scope-color-800",
+			"scope-color-200",
+			"scope-color-500"
+		],
+		"200": [
+			"scope-color-200",
+			"scope-color-800",
+			"scope-color-400",
+			"scope-color-700",
+			"scope-color-100",
+			"scope-color-400"
+		],
+		"300": [
+			"scope-color-300",
+			"scope-color-900",
+			"scope-color-500",
+			"scope-color-600",
+			"scope-color-100",
+			"scope-color-300"
+		],
+		"400": [
+			"scope-color-400",
+			"scope-color-50",
+			"scope-color-200",
+			"scope-color-500",
+			"scope-color-50",
+			"scope-color-200"
+		],
+		"500": [
+			"scope-color-500",
+			"scope-color-50",
+			"scope-color-200",
+			"scope-color-400",
+			"scope-color-50",
+			"scope-color-100"
+		],
+		"600": [
+			"scope-color-600",
+			"scope-color-100",
+			"scope-color-300",
+			"scope-color-300",
+			"scope-color-900",
+			"scope-color-700"
+		],
+		"700": [
+			"scope-color-700",
+			"scope-color-100",
+			"scope-color-300",
+			"scope-color-200",
+			"scope-color-800",
+			"scope-color-600"
+		],
+		"800": [
+			"scope-color-800",
+			"scope-color-200",
+			"scope-color-400",
+			"scope-color-100",
+			"scope-color-800",
+			"scope-color-500"
+		],
+		"900": [
+			"scope-color-900",
+			"scope-color-200",
+			"scope-color-400",
+			"scope-color-50",
+			"scope-color-700",
+			"scope-color-500"
+		]
+	}
+};
+function generatePalette(_opts) {
+	const _colors = _opts?.colors || {};
+	for (const key of Object.keys(_colors)) {
+		const col = _opts?.colors?.[key];
+		if (typeof col === "string") _colors[key] = { color: col };
+	}
+	const opts = defu$1({
+		..._opts,
+		colors: _colors
+	}, defaultOpts);
+	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,
+			useMiddle: false
+		},
+		saturate: opts.layerPalette.saturate,
+		vivid: opts.layerPalette.vivid,
+		suffixes: [
+			"dark-0",
+			"dark-1",
+			"dark-2",
+			"dark-3",
+			"dark-4"
+		]
+	};
+	const darks = palitra(multiplySaturation(opts.colors, opts.layerPalette.desaturate), bgOptions).toStrings();
+	bgOptions.suffixes = [
+		"light-0",
+		"light-1",
+		"light-2",
+		"light-3",
+		"light-4"
+	].toReversed();
+	const lumDark = bgOptions.luminance?.dark ?? opts.darkest;
+	bgOptions.luminance = {
+		dark: 1 - ((bgOptions.luminance?.light ?? opts.darkest + opts.layersDepth) - lumDark),
+		light: 1,
+		useMiddle: false
+	};
+	const lights = palitra(multiplySaturation(opts.colors, opts.layerPalette.desaturate), bgOptions).toStrings();
+	const colors = palitra({
+		primary: opts.colors.primary,
+		grey: opts.colors.grey,
+		secondary: opts.colors.secondary,
+		neutral: opts.colors.neutral,
+		good: opts.colors.good,
+		warn: opts.colors.warn,
+		error: opts.colors.error
+	}, {
+		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,
+			useMiddle: opts.mainPalette.luminance?.useMiddle,
+			middle: opts.mainPalette.luminance?.middle
+		},
+		saturate: opts.mainPalette.saturate,
+		vivid: opts.mainPalette.vivid
+	}).toStrings();
+	return {
+		opts,
+		colors: {
+			...darks,
+			...lights,
+			...colors
+		},
+		surfaces: opts.surfaces
+	};
+}
+function multiplySaturation(colors, m = .5) {
+	const newObj = {};
+	for (const [key, val] of Object.entries(colors)) {
+		const col = typeof val === "string" ? val : val.color;
+		if (col) {
+			const [h, s, l] = color(col).hsl();
+			newObj[key] = color(h, s * m, l, "hsl").hex();
+		}
+	}
+	return newObj;
+}
+const layerN = (n, reverse) => reverse ? 4 - n : n;
+function getPaletteShortcuts() {
+	return [
+		[/^layer-([0-4])$/, ([, a], { theme }) => {
+			const sideTemplate = (bg, n) => {
+				const fg = bg === "light" ? "dark" : "light";
+				return `current-bg-scope-${bg}-${n} current-text-scope-${fg}-0 current-icon-scope-${fg}-0 current-text-muted-scope-${fg}-2 current-icon-muted-scope-${fg}-2 current-bg-hover-scope-${bg}-${Math.min(n + 1, 4)} current-border-hover-scope-${bg}-3 current-text-hover-scope-${fg}-0`;
+			};
+			const d = layerN(Number(a), theme.reverseDarkLayers);
+			const l = layerN(Number(a), theme.reverseLightLayers);
+			const dark = sideTemplate("dark", d);
+			return toUnoShortcut({
+				"": `${sideTemplate("light", l)} current-border-grey-500 bg-current text-current`,
+				"dark:": dark,
+				"[&.dark]:": dark
+			});
+		}],
+		[/^(current-text-muted|current-icon-muted|current-text-hover|current-bg-hover|current-border-hover|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);
+			return toUnoShortcut({
+				"": `${target}-scope-light-${layerN(Number(a), theme.reverseLightLayers)}`,
+				"dark:": `${target}-scope-dark-${d}`,
+				"[&.dark]:": `${target}-scope-dark-${d}`
+			});
+		}],
+		[/^surface-(.+)$/, ([, s], { theme }) => theme.surfaces[s] ? toUnoShortcut({
+			"": `current-bg-${theme.surfaces[s][0]} current-text-${theme.surfaces[s][1]} current-icon-${theme.surfaces[s][1]} current-border-${theme.surfaces[s][2]} bg-current text-current border-current icon-current`,
+			"dark:": `current-bg-${theme.surfaces[s][3]} current-text-${theme.surfaces[s][4]} current-icon-${theme.surfaces[s][4]} current-border-${theme.surfaces[s][5]} shadow-black/30`,
+			"[&.dark]:": `current-bg-${theme.surfaces[s][3]} current-text-${theme.surfaces[s][4]} current-icon-${theme.surfaces[s][4]} current-border-${theme.surfaces[s][5]} shadow-black/30`
+		}) : ""],
+		{ surface: "surface-100" }
+	];
+}
+//#endregion
+//#region src/theme/rules/palette.ts
+function colorToRgbWithOpacity(c) {
+	const [r, g, b, _a] = color(c).rgba();
+	return `${r} ${g} ${b}`;
+}
+function getOpacityVar(key) {
+	return {
+		bg: "--un-bg-opacity",
+		text: "--un-text-opacity",
+		fill: "--un-text-opacity",
+		stroke: "--un-text-opacity",
+		icon: "--un-icon-opacity",
+		border: "--un-border-opacity",
+		outline: "--un-outline-opacity",
+		caret: "--un-caret-opacity",
+		shadow: "--un-shadow-opacity",
+		ring: "--un-ring-opacity"
+	}[key];
+}
+function getCssTarget(key) {
+	return {
+		bg: "background-color",
+		text: "color",
+		fill: "fill",
+		stroke: "stroke",
+		icon: "color",
+		border: "border-color",
+		outline: "outline-color",
+		caret: "caret-color",
+		shadow: "--un-shadow-color",
+		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"
+];
+const CURRENT_SLOTS = [
+	"text-muted",
+	"icon-muted",
+	"text-hover",
+	"bg-hover",
+	"border-hover",
+	"text",
+	"bg",
+	"icon",
+	"border",
+	"outline",
+	"caret",
+	"hl"
+];
+const slotAlt = CURRENT_SLOTS.join("|");
+const sourceAlt = [
+	...CURRENT_SLOTS,
+	"muted",
+	"hover"
+].map((s) => `-${s}`).join("|");
+const currentSlotRe = new RegExp(`^current-(${slotAlt})-(.+)$`);
+const currentPaintRe = new RegExp(`^(text|bg|icon|border|outline|caret|fill|shadow|ring)-current(${sourceAlt})?(\\/\\d{1,3})?$`);
+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`]) || "";
+	const greyMuted = colorToRgbWithOpacity(theme.colors[`grey-500`]) || "";
+	vars["--current-text-muted"] = greyMuted;
+	vars["--current-icon-muted"] = greyMuted;
+	vars["--current-text-hover"] = colorToRgbWithOpacity(theme.colors[`${c}-dark-0`]) || "";
+	vars["--current-bg-hover"] = colorToRgbWithOpacity(theme.colors[`${c}-light-1`]) || "";
+	vars["--current-border-hover"] = colorToRgbWithOpacity(theme.colors[`${c}-light-3`]) || "";
+	return vars;
+}
+const paletteRules = [
+	[currentSlotRe, (match, { theme }) => {
+		const t = match[1];
+		const c = match[2];
+		if (c.startsWith("scope-")) return { [`--current-${t}`]: `var(--${c})` };
+		if (c === "hl") return { [`--current-${t}`]: `var(--current-hl)` };
+		const themeCol = theme.colors[c];
+		const colStr = typeof themeCol === "string" ? themeCol : themeCol?.DEFAULT;
+		if (!colStr) return;
+		try {
+			return { [`--current-${t}`]: colorToRgbWithOpacity(colStr) };
+		} catch {
+			return;
+		}
+	}],
+	[currentPaintRe, (match, { theme: _theme }) => {
+		const target = match[1];
+		let source = match[2] || `-${target}`;
+		if (source === "-muted" || source === "-hover") source = `-${target}${source}`;
+		const opacityVar = getOpacityVar(target);
+		const cssVar = getCssTarget(target);
+		const o = match[3];
+		const opacity = o ? Number(o.slice(1)) / 100 : 1;
+		const opacityVal = opacity === 1 ? `var(${opacityVar})` : opacity;
+		if (target === "icon") {
+			const indirect = [
+				"-hl",
+				"-icon-muted",
+				"-icon-hover"
+			].includes(source);
+			return {
+				[opacityVar]: opacity,
+				"--current-icon": indirect ? `var(--current${source})` : void 0
+			};
+		}
+		if (["shadow", "ring"].includes(target) && source === "-border") return {
+			[opacityVar]: opacity === 1 ? `var(--un-border-opacity)` : opacity,
+			[`--un-${target}-color`]: `rgb(var(--current-border) / ${opacityVal})`
+		};
+		return {
+			[opacityVar]: opacity,
+			[cssVar]: `rgb(var(--current${source}) / ${opacityVal})`
+		};
+	}],
+	[/^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]);
+		const source = match[2];
+		const o = match[3];
+		const opacity = o ? Number(o.slice(1)) / 100 : 1;
+		const fallback = source.startsWith("color") ? `grey-${source.slice(6)}` : `grey-${source}`;
+		const opacityVal = opacity === 1 ? `var(${opacityVar})` : opacity;
+		return {
+			[opacityVar]: opacity,
+			[cssVar]: `rgb(var(--scope-${source}, ${theme.colors[fallback] || ""}) / ${opacityVal})`
+		};
+	}],
+	[/^icon-opacity-(\d{1,3})$/, (match, { theme: _theme }) => {
+		const o = match[1];
+		return { "--un-icon-opacity": Number(o) / 100 };
+	}],
+	[/^icon-color$/, () => ({ color: `rgb(var(--current-icon) / var(--un-icon-opacity, 1))` })],
+	[/^icon-size-(.*)$/, (match, { theme }) => {
+		const name = match[1];
+		if (name.startsWith("[") && name.endsWith("]")) return { "--icon-size": name.slice(1, -1) };
+		if (theme.spacing[name]) return { "--icon-size": theme.spacing[name] };
+	}],
+	[/^icon-size$/, () => ({
+		width: `var(--icon-size, 1em)`,
+		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 = [
+	[/^i8-(border|outline|bg)-(.+)$/, (match, { theme }) => {
+		const target = match[1];
+		const value = match[2];
+		if (value === "none") return { [`--i8-${target}-width`]: "0" };
+		if (value === "transparent") return { [`--i8-${target}-color`]: "0" };
+		if (value.startsWith("scope-")) return { [`--i8-${target}-color`]: `var(--${value})` };
+		const col = theme.colors[value];
+		if (col) return { [`--i8-${target}-color`]: colorToRgbWithOpacity(String(col.DEFAULT || col)) };
+		const width = theme.spacing[value];
+		if (width) return { [`--i8-${target}-width`]: width };
+		if (value.endsWith("px") || value.endsWith("em") || value.endsWith("rem")) return { [`--i8-${target}-width`]: value };
+		if (value.startsWith("[") && value.endsWith("]")) {
+			const v = value.slice(1, -1);
+			if (v.endsWith("px") || v.endsWith("em") || v.endsWith("rem")) return { [`--i8-${target}-width`]: v };
+			return { [`--i8-${target}-color`]: v };
+		}
+	}],
+	[/^i8-(border|outline|bg)-opacity-(\d{1,3})$/, (match, { theme: _theme }) => {
+		const target = match[1];
+		const value = match[2];
+		return { [`--i8-${target}-opacity`]: Number(value) / 100 };
+	}],
+	[/^i8-apply-(border|outline|bg)$/, (match, { theme: _theme }) => {
+		const target = match[1];
+		const prop = {
+			border: "border-color",
+			outline: "outline-color",
+			bg: "background-color"
+		}[target];
+		const variable = {
+			border: "--i8-border-color, var(--current-border)",
+			outline: "--i8-outline-color, var(--current-outline)",
+			bg: "--i8-bg-color, var(--current-bg)"
+		}[target];
+		const op = {
+			border: `--i8-border-opacity, 0.2`,
+			outline: `--i8-outline-opacity, 0.5`,
+			bg: "--i8-bg-opacity, 1"
+		}[target];
+		return target === "bg" ? { [prop]: `rgb(var(${variable}) / var(${op}))` } : {
+			[prop]: `rgb(var(${variable}) / var(${op}))`,
+			[`${target}-width`]: `var(--i8-${target}-width, ${target === "border" ? 1 : 2}px)`
+		};
+	}]
+];
+//#endregion
+//#region src/theme/rules/index.ts
+const rules = [
+	...[
+		[
+			/^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) {
+	return {
+		weight,
+		boldWeight,
+		size,
+		height,
+		spacing
+	};
+}
+const defaultTypography = {
+	"h1": font(400, 700, k$1(3.5), k$1(.5), -.025),
+	"h2": font(400, 700, k$1(2.5), k$1(.5), -.022),
+	"h3": font(400, 700, k$1(2), k$1(.5), -.022),
+	"h4": font(400, 600, k$1(1), k$1(.5), -.02),
+	"h5": font(400, 600, k$1(.5), k$1(.5), -.017),
+	"h6": font(600, 700, k$1(.25), k$1(.5), -.014),
+	"subheading": font(400, 600, k$1(-.2), k$1(.5), -.007),
+	"body-l": font(400, 600, k$1(.5), k$1(.75), -.014),
+	"body": font(400, 600, k$1(0), k$1(.75), -.011),
+	"body-s": font(400, 600, k$1(-.5), k$1(1), 0),
+	"callout": font(400, 600, k$1(-.25), k$1(.5), -.009),
+	"label": font(500, 700, k$1(-.25), k$1(.5), -.004),
+	"caption": font(400, 600, k$1(-.5), k$1(.5), -.007),
+	"overline": font(400, 600, k$1(-.5), k$1(.5), .0618)
 };
-function getComponentClasses(...components) {
-	const set = /* @__PURE__ */ new Set();
-	for (const name of components) {
-		const key = name.startsWith("Vu") ? name.slice(2) : name;
-		for (const cls of componentClasses[key] ?? []) set.add(cls);
-	}
-	return [...set];
+function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actualFontHeightTopBottomRatio = .5) {
+	const correctedSize = size * actualFontHeightFactor;
+	const m = (lh * size - correctedSize) / size;
+	const half = correctedSize / 2;
+	const offt = correctedSize * actualFontHeightTopBottomRatio - half + m / 2;
+	const offb = correctedSize * (1 - actualFontHeightTopBottomRatio) - half + m / 2;
+	const mt = round(offt, 4);
+	const mb = round(offb, 4);
+	return {
+		mt,
+		mb,
+		size,
+		correctedSize,
+		theme: [`${size}em`, {
+			"--font-bold": wBold,
+			"--font-size": `${size}em`,
+			"--font-corrected": `${correctedSize}em`,
+			"--font-bc": `${-mb}em`,
+			"--font-tc": `${-mt}em`,
+			"font-weight": w,
+			"line-height": `${lh}em`,
+			"letter-spacing": `${ls}em`
+		}]
+	};
+}
+//#endregion
+//#region src/theme/utils/radius-scale.ts
+const ROOT_FONT_PX = 16;
+function parseRadius(input) {
+	const m = input.trim().match(/^(-?\d*\.?\d+)(px|em|rem)?$/);
+	if (!m) return null;
+	const n = Number.parseFloat(m[1]);
+	if (!Number.isFinite(n)) return null;
+	return {
+		n,
+		unit: m[2] ?? ""
+	};
+}
+function computeRadiusScale(baseRadius) {
+	const parsed = parseRadius(baseRadius);
+	if (!parsed) return {
+		r0: `min(${baseRadius}, clamp(2px, calc(${baseRadius} / 2), 4px))`,
+		r1: baseRadius,
+		r2: `calc(${baseRadius} * 1.5)`,
+		r3: `calc(${baseRadius} * 2)`,
+		r4: `calc(${baseRadius} * 2.5)`
+	};
+	const { n, unit } = parsed;
+	if (n === 0) return {
+		r0: "0",
+		r1: "0",
+		r2: "0",
+		r3: "0",
+		r4: "0"
+	};
+	const basePx = unit === "em" || unit === "rem" ? n * ROOT_FONT_PX : n;
+	const r0Px = Math.min(basePx, Math.max(2, Math.min(basePx / 2, 4)));
+	const scaled = unit ? baseRadius : `${n}px`;
+	return {
+		r0: `${round(r0Px, 3)}px`,
+		r1: baseRadius,
+		r2: unitBy(scaled, 1.5),
+		r3: unitBy(scaled, 2),
+		r4: unitBy(scaled, 2.5)
+	};
 }
 //#endregion
+//#region src/theme/theme.ts
+const themeFactory = (opts) => {
+	/**
+	* Spacing
+	*/
+	const spacing = {
+		"$xxs": `${round(1 / opts.spacingFactor ** 3, 3)}em`,
+		"$xs": `${round(1 / opts.spacingFactor ** 2, 3)}em`,
+		"$s": `${round(1 / opts.spacingFactor, 3)}em`,
+		"$m": "1em",
+		"$l": `${round(opts.spacingFactor, 3)}em`,
+		"$xl": `${round(opts.spacingFactor ** 2, 3)}em`,
+		"$xxl": `${round(opts.spacingFactor ** 3, 3)}em`,
+		"fingertip": "var(--v-fingertip)",
+		"fingertip-half": "var(--v-fingertip-half)",
+		"fingertip-xs": opts.fingertip.xs,
+		"fingertip-s": opts.fingertip.s,
+		"fingertip-m": opts.fingertip.m,
+		"fingertip-l": opts.fingertip.l,
+		"fingertip-xl": opts.fingertip.xl,
+		"$font-tc": "var(--font-bc)",
+		"$font-bc": "var(--font-tc)",
+		"$font-size": "var(--font-size)",
+		"$font-corrected": "var(--font-corrected)",
+		"$card-spacing": "var(--card-spacing)",
+		"$card-spacing-dense": "var(--card-spacing-dense)",
+		"$card-heading-size": "var(--card-heading-size)",
+		"$card-heading-corrected": "var(--card-heading-corrected)",
+		"base-radius": opts.baseRadius
+	};
+	const lineHeight = {
+		"fingertip": "var(--v-fingertip)",
+		"fingertip-half": "var(--v-fingertip-half)",
+		"fingertip-xs": opts.fingertip.xs,
+		"fingertip-s": opts.fingertip.s,
+		"fingertip-m": opts.fingertip.m,
+		"fingertip-l": opts.fingertip.l,
+		"fingertip-xl": opts.fingertip.xl
+	};
+	const borderRadius = {
+		...spacing,
+		base: opts.baseRadius,
+		...computeRadiusScale(opts.baseRadius)
+	};
+	/**
+	* Typography
+	*/
+	const fontWeight = { $bold: "var(--font-bold)" };
+	const fontSize = { "card-header": ["var(--card-heading-size)", {
+		"--font-bold": "var(--card-heading-bold)",
+		"--font-size": "var(--card-heading-size)",
+		"--font-corrected": "var(--card-heading-corrected)",
+		"--font-bc": "var(--card-heading-bc)",
+		"--font-tc": "var(--card-heading-tc)",
+		"font-weight": "var(--card-heading-weight)",
+		"line-height": "var(--card-heading-lh)",
+		"letter-spacing": "var(--card-heading-ls)"
+	}] };
+	for (const [name, val] of Object.entries(opts.typography)) if (val?.size) {
+		const ft = buildFontTheme(val.size || 1, val.weight || 400, val.boldWeight || 700, val.height || 1, val.spacing || 0, val.actualHeightFactor || opts.actualFontHeightFactor, val.actualHeightTopBottomRatio || opts.actualFontHeightTopBottomRatio);
+		fontSize[name] = ft.theme;
+		spacing[name] = `${ft.size}em`;
+	}
+	const palette = generatePalette(opts.palette);
+	/**
+	* Putting all together
+	*/
+	return {
+		paletteOpts: palette.opts,
+		theme: {
+			colors: palette.colors,
+			surfaces: palette.surfaces,
+			reverseLightLayers: opts.layers.reverseLight,
+			reverseDarkLayers: opts.layers.reverseDark,
+			lineHeight,
+			spacing,
+			fontWeight,
+			actualFontHeightFactor: opts.actualFontHeightFactor,
+			cardSpacingFactor: opts.cardSpacingFactor,
+			fontSize,
+			width: spacing,
+			height: spacing,
+			maxWidth: spacing,
+			maxHeight: spacing,
+			minWidth: spacing,
+			minHeight: spacing,
+			borderRadius,
+			animation: opts.animation
+		}
+	};
+};
+//#endregion
 //#region src/theme/preset-vunor.ts
 function createVunorExtractor() {
 	return {
@@ -2319,10 +2386,11 @@ const presetVunor = (_opts) => {
 	wind.rules.push(...rules);
 	const paletteShortcuts = getPaletteShortcuts();
 	const theme = themeFactory(opts);
-	wind.preflights.push({ getCSS: () => `__vunor_palette_options {background-image: url("data:image/gif;base64,${Buffer.from(JSON.stringify({
+	const paletteOptsCss = `__vunor_palette_options {background-image: url("data:image/gif;base64,${Buffer.from(JSON.stringify({
 		...theme.paletteOpts,
 		surfaces: void 0
-	})).toString("base64")}")}` });
+	})).toString("base64")}")}`;
+	wind.preflights.push({ getCSS: () => paletteOptsCss });
 	return {
 		...wind,
 		name: "vunor",
@@ -2350,14 +2418,6 @@ function getFixedWind() {
 //#endregion
 //#region src/theme.ts
 /**
-* Array of raw vunor shortcuts (not merged)
-*/
-const rawVunorShortcuts = [
-	i8,
-	c8,
-	...shortcuts
-];
-/**
 * Vunor shortcuts (merged version of rawVunorShortcuts)
 */
 const mergedVunorShortcuts = mergeVunorShortcuts(rawVunorShortcuts);