vunor 0.3.0 → 0.3.1

package/README.md

@@ -280,7 +280,7 @@ Button and clickable element design variants:
 | `c8-outlined` | Border + colored text, transparent fill |
 | `c8-light`    | Light tinted background, colored text   |
 
-Each includes hover, active, focus, and disabled states. Apply on any element alongside `scope-{color}`:
+Each includes hover, active, and focus states. Hover and press do not paint on a disabled element: `disabled`, `aria-disabled="true"` or `data-disabled` (the same definition the `disabled-soft` shortcut uses to fade a disabled element). Keyboard focus still paints, so an `aria-disabled` control stays visibly focusable. Apply on any element alongside `scope-{color}`:
 
 ```html
 <button class="scope-primary c8-filled">Save</button>

package/dist/theme.mjs

@@ -29,6 +29,13 @@ const toastShortcuts = defineShortcuts({
 	}
 });
 //#endregion
+//#region src/theme/utils/disabled.ts
+const disabledSelectors = ":disabled,[disabled],[aria-disabled=true],[data-disabled]";
+/** Variant prefix that matches while the element is disabled. */
+const whenDisabled = `[&:is(${disabledSelectors})]:`;
+/** Variant prefix that matches only while the element is not disabled. */
+const whenEnabled = `[&:not(${disabledSelectors})]:`;
+//#endregion
 //#region src/components/Calendar/shortcuts.ts
 const calendarShortcuts = defineShortcuts({
 	"calendar-root": "inline-block",
@@ -42,7 +49,7 @@ const calendarShortcuts = defineShortcuts({
 		"before:": "absolute bottom-[0.6em] w-[1.5em] h-[2px] bg-scope-color-500/75 block",
 		"[&[data-today]::before]:": "content-['']",
 		"[&[data-today][data-selected]::before]:": "bg-white",
-		"hover:": {
+		[`${whenEnabled}hover:`]: {
 			"": "bg-scope-color-200",
 			"dark:": "bg-scope-color-700"
 		},
@@ -82,8 +89,8 @@ const checkboxShortcuts = defineShortcuts({
 	},
 	"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",
-		"group-active/cb:enabled:": "current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500",
-		"disabled:": "cursor-not-allowed border-1px",
+		[`group-active/cb:${whenEnabled}`]: "current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500",
+		[whenDisabled]: "cursor-not-allowed border-1px",
 		"group-[[data-error=true]]/cb:enabled:": "current-border-error-500 border-current",
 		"data-[state=unchecked]": "current-border-grey-500 border-current/40"
 	},
@@ -168,7 +175,7 @@ const shortcuts = [
 			"": "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",
+			[`${whenEnabled}active:`]: "bg-current/20",
 			"aria-[disabled=true]:": "scope-grey",
 			"data-[error=true]:": "current-border-error-500 current-bg-error-500"
 		},
@@ -209,7 +216,7 @@ const shortcuts = [
 		"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]]:": {
+			[whenEnabled]: {
 				"": "cursor-grab",
 				"hover:": "shadow-md",
 				"active:": "cursor-grabbing",
@@ -237,7 +244,7 @@ const btn = defineShortcuts({
 		"[&.btn-round]:": btnRound,
 		"[&.btn-square]:": btnSquare,
 		"[&.btn-round.btn-square]:": "px-0 [--btn-icon-pull:0]",
-		"disabled:": "opacity-80 cursor-not-allowed",
+		[`${whenDisabled}[&:where(:not(.disabled-soft))]:`]: "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"
@@ -254,35 +261,39 @@ const btn = defineShortcuts({
 const c8 = defineShortcuts({
 	"c8-filled": {
 		"": "current-bg-scope-color-500 rounded-r1 current-text-white current-icon-white icon-current/100 bg-current  text-current",
-		"hover:": "c8-filled-hover",
 		"focus-visible:": "c8-filled-hover",
-		"data-[highlighted]:": "c8-filled-hover",
-		"active:": "c8-filled-active",
-		"data-[active]:": "c8-filled-active"
+		[whenEnabled]: {
+			"hover:": "c8-filled-hover",
+			"data-[highlighted]:": "c8-filled-hover",
+			"active:": "c8-filled-active",
+			"data-[active]:": "c8-filled-active"
+		}
 	},
 	"c8-filled-hover": {
-		"not-([disabled]):": "current-bg-scope-color-600",
-		"dark:not-([disabled]):": "current-bg-scope-color-400"
+		"": "current-bg-scope-color-600",
+		"dark:": "current-bg-scope-color-400"
 	},
 	"c8-filled-active": {
-		"not-([disabled]):": "current-bg-scope-color-700",
-		"dark:not-([disabled]):": "current-bg-scope-color-300"
+		"": "current-bg-scope-color-700",
+		"dark:": "current-bg-scope-color-300"
 	},
 	"c8-flat": {
 		"": "current-bg-scope-color-500 rounded-r1 current-text-black current-icon-black bg-current/0 text-current/80 icon-current/50",
 		"dark:": "current-text-white current-icon-white",
-		"hover:": "c8-flat-hover",
 		"focus-visible:": "c8-flat-hover",
-		"data-[highlighted]:": "c8-flat-hover",
-		"active:": "c8-flat-active",
-		"data-[active]:": "c8-flat-active",
+		[whenEnabled]: {
+			"hover:": "c8-flat-hover",
+			"data-[highlighted]:": "c8-flat-hover",
+			"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"
 	},
-	"c8-flat-hover": { "not-([disabled]):": "bg-current/10" },
-	"c8-flat-active": { "not-([disabled]):": "bg-current/15" },
+	"c8-flat-hover": "bg-current/10",
+	"c8-flat-active": "bg-current/15",
 	"c8-flat-selected": {
 		"": "c8-flat-hover current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400"
@@ -290,33 +301,37 @@ const c8 = defineShortcuts({
 	"c8-outlined": {
 		"": "c8-flat border-scope-color-500 rounded-r1 border current-text-scope-color-500 current-icon-scope-color-500 icon-current/100",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
-		"hover:": "c8-outlined-hover",
 		"focus-visible:": "c8-outlined-hover",
-		"data-[highlighted]:": "c8-outlined-hover",
-		"active:": "c8-outlined-active",
-		"data-[active]:": "c8-outlined-active"
+		[whenEnabled]: {
+			"hover:": "c8-outlined-hover",
+			"data-[highlighted]:": "c8-outlined-hover",
+			"active:": "c8-outlined-active",
+			"data-[active]:": "c8-outlined-active"
+		}
 	},
 	"c8-outlined-hover": "c8-flat-hover",
 	"c8-outlined-active": "c8-flat-active",
 	"c8-chrome": {
 		"": "surface-0 rounded-r1 border",
-		"hover:": "c8-chrome-hover",
 		"focus-visible:": "c8-chrome-hover",
-		"data-[highlighted]:": "c8-chrome-hover",
-		"active:": "c8-chrome-active",
-		"data-[active]:": "c8-chrome-active",
+		[whenEnabled]: {
+			"hover:": "c8-chrome-hover",
+			"data-[highlighted]:": "c8-chrome-hover",
+			"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"
 	},
 	"c8-chrome-hover": {
-		"not-([disabled]):": "current-bg-scope-light-1 bg-current",
-		"dark:not-([disabled]):": "current-bg-scope-dark-1"
+		"": "current-bg-scope-light-1 bg-current",
+		"dark:": "current-bg-scope-dark-1"
 	},
 	"c8-chrome-active": {
-		"not-([disabled]):": "current-bg-scope-light-2 bg-current",
-		"dark:not-([disabled]):": "current-bg-scope-dark-2"
+		"": "current-bg-scope-light-2 bg-current",
+		"dark:": "current-bg-scope-dark-2"
 	},
 	"c8-chrome-selected": {
 		"": "current-bg-scope-light-1 bg-current current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
@@ -325,18 +340,20 @@ const c8 = defineShortcuts({
 	"c8-light": {
 		"": "current-bg-scope-color-500 rounded-r1 current-text-scope-color-500 current-icon-scope-color-500 bg-current/10 text-current icon-current/80",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
-		"hover:": "c8-light-hover",
 		"focus-visible:": "c8-light-hover",
-		"data-[highlighted]:": "c8-light-hover",
-		"active:": "c8-light-active",
-		"data-[active]:": "c8-light-active",
+		[whenEnabled]: {
+			"hover:": "c8-light-hover",
+			"data-[highlighted]:": "c8-light-hover",
+			"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"
 	},
-	"c8-light-hover": { "not-([disabled]):": "bg-current/20" },
-	"c8-light-active": { "not-([disabled]):": "bg-current/30" }
+	"c8-light-hover": "bg-current/20",
+	"c8-light-active": "bg-current/30"
 });
 //#endregion
 //#region src/theme/shortcuts/extras.ts
@@ -344,12 +361,7 @@ 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
-} });
+const disabledSoft = defineShortcuts({ "disabled-soft": { [whenDisabled]: "opacity-40 cursor-not-allowed" } });
 //#endregion
 //#region src/theme/shortcuts/i8.ts
 const M = "1em";
@@ -386,7 +398,7 @@ const rawVunorShortcuts = [
 		"i8-transparent": "bg-transparent!",
 		"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",
+			[`${whenEnabled}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"
 		},
@@ -874,6 +886,7 @@ const componentClasses = {
 		"h6",
 		"i8",
 		"i8-append",
+		"i8-filled",
 		"i8-icon-clickable",
 		"i8-icon-wrap",
 		"i8-input",
@@ -882,6 +895,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-ta-wrapper",
 		"i8-textarea",
 		"i8-underline",
@@ -1288,6 +1302,7 @@ const componentClasses = {
 		"btn-icon-left",
 		"btn-square",
 		"c8-flat",
+		"disabled-soft",
 		"flex",
 		"gap-1",
 		"icon-color",
@@ -1735,13 +1750,13 @@ function multiplySaturation(colors, m = .5) {
 	return newObj;
 }
 const layerN = (n, reverse) => reverse ? 4 - n : n;
+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`;
+};
 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);
@@ -2442,6 +2457,13 @@ const defaultOptions = {
 		}
 	}
 };
+const DISABLED_SOFT = "disabled-soft";
+const DISABLED_SOFT_LITERAL = "__vunor-disabled-soft";
+const disabledSoftLiteral = {
+	name: "vunor:disabled-soft-literal",
+	order: -1e3,
+	match: (matcher, { generator }) => matcher === DISABLED_SOFT && generator.config.shortcuts.some((sc) => sc[0] === DISABLED_SOFT) ? { matcher: DISABLED_SOFT_LITERAL } : void 0
+};
 const presetVunor = (_opts) => {
 	const opts = defu(_opts, defaultOptions);
 	const wind = getFixedWind();
@@ -2460,7 +2482,8 @@ const presetVunor = (_opts) => {
 		...wind,
 		name: "vunor",
 		theme: defu(theme.theme, wind.theme),
-		shortcuts: paletteShortcuts,
+		variants: [disabledSoftLiteral, ...wind.variants ?? []],
+		shortcuts: [...paletteShortcuts, [DISABLED_SOFT_LITERAL, DISABLED_SOFT]],
 		extractors: [createVunorExtractor()],
 		layers: {
 			preflights: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "files": [
     "dist"
   ],
@@ -215,4 +215,4 @@
     "vue-router": "^5.0.4",
     "vue-tsc": "^3.2.6"
   }
-}
+}