vunor 0.2.2 → 0.3.0

package/dist/ButtonBase.mjs

@@ -1,4 +1,4 @@
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { Primitive } from "reka-ui";
 import VuIcon from "vunor/Icon";
 import VuLoadingIndicator from "vunor/LoadingIndicator";
@@ -46,7 +46,7 @@ var ButtonBase_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Primitive), {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n    `group/btn` is no longer read by any vunor rule: since 0.3.0 the label and\n    icon take their cue from inherited custom properties instead of\n    `group-[.btn-square]/btn:` descendant rules. It stays because it is public\n    surface that consumer-authored `group-*/btn:` rules may still key on.\n  "), createVNode(unref(Primitive), {
 				class: "btn group/btn",
 				as: __props.as,
 				href: __props.href,
@@ -77,7 +77,7 @@ var ButtonBase_default = /* @__PURE__ */ defineComponent({
 				"data-has-icon",
 				"data-loading",
 				"disabled"
-			]);
+			])], 2112);
 		};
 	}
 });

package/dist/theme.mjs

@@ -161,11 +161,8 @@ const shortcuts = [
 	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-root": { "": "flex [flex-direction:var(--rb-dir,column)] gap-x-$l gap-y-$m" },
+		"rb-row": { "": "[--rb-dir:row] flex-wrap" },
 		"rb-item-wrapper": { "": "flex" },
 		"rb-item": {
 			"": "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",
@@ -232,14 +229,14 @@ const shortcuts = [
 ];
 //#endregion
 //#region src/theme/shortcuts/btn.ts
-const btnSquare = "size-fingertip px-0";
-const btnRound = "px-fingertip-half rounded-fingertip-half";
+const btnRound = "px-fingertip-half rounded-fingertip-half [--btn-icon-pull:-0.5em]";
+const btnSquare = "size-fingertip px-0 [--btn-label-display:none] [--btn-icon-fs:1.5em] [--btn-icon-pull:0]";
 const btn = defineShortcuts({
 	"btn": {
 		"": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
 		"[&.btn-round]:": btnRound,
 		"[&.btn-square]:": btnSquare,
-		"[&.btn-round.btn-square]:": "px-0",
+		"[&.btn-round.btn-square]:": "px-0 [--btn-icon-pull: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",
@@ -247,17 +244,10 @@ const btn = defineShortcuts({
 	},
 	"btn-round": { "": btnRound },
 	"btn-square": { "": btnSquare },
-	"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!"
-	}
+	"btn-label": { "": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible display-[var(--btn-label-display,revert)]" },
+	"btn-icon": { "": "size-1em font-size-[var(--btn-icon-fs,1.25em)]" },
+	"btn-icon-left": { "": "ml-[var(--btn-icon-pull,0)]" },
+	"btn-icon-right": { "": "mr-[var(--btn-icon-pull,0)]" }
 });
 //#endregion
 //#region src/theme/shortcuts/c8.ts
@@ -361,6 +351,13 @@ const disabledSoft = defineShortcuts({ "disabled-soft": {
 	"data-[disabled]:": disabledPaint
 } });
 //#endregion
+//#region src/theme/shortcuts/i8.ts
+const M = "1em";
+const FINGERTIP_HALF = "var(--v-fingertip-half)";
+const pad = (v) => `[--i8-pl:${v}] [--i8-pr:${v}] [--i8-hint-px:${v}]`;
+const filledSignal = `${pad(M)} [--i8-underline-display:none]`;
+const roundSignal = pad(FINGERTIP_HALF);
+//#endregion
 //#region src/theme/shortcuts/raw.ts
 const rawVunorShortcuts = [
 	defineShortcuts({
@@ -371,18 +368,22 @@ const rawVunorShortcuts = [
 			"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",
+				"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1",
 				"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"
 			},
+			"[&.segmented.i8-round:not(:first-child)]:": `[--i8-pl:${M}]`,
+			"[&.segmented.i8-round:not(:last-child)]:": `[--i8-pr:${M}]`,
 			"group-[[data-error=true]]/i8:": { "": "current-border-error-500 current-outline-error-500 border-opacity-100 border-current" }
 		},
+		"i8-filled": filledSignal,
+		"i8-round": roundSignal,
+		"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",
@@ -395,8 +396,7 @@ const rawVunorShortcuts = [
 		},
 		"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",
+			"": "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 display-[var(--i8-underline-display,revert)]",
 			"group-[[data-active=true]]/i8:": "left-0 right-0"
 		},
 		"segmented": {
@@ -412,24 +412,16 @@ const rawVunorShortcuts = [
 		"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",
+			"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
+			"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]",
 			"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"
+			"group-[[data-has-label]]/i8:": "pt-$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"
+			"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
+			"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]",
+			"selection:": "bg-scope-color-500 text-white"
 		},
 		"i8-ta-wrapper": {
 			"": "w-full pt-0.75em",
@@ -444,21 +436,12 @@ const rawVunorShortcuts = [
 		},
 		"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"
+			"[&:not([data-has-prepend=true])]:": "pl-[var(--i8-pl,0)]",
+			"[&:not([data-has-append=true])]:": "pr-[var(--i8-pr,0)]"
 		},
 		"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": { "": "relative flex justify-between px-[var(--i8-hint-px,0)]" },
 		"i8-hint-wrapper-stack": { "": "relative flex justify-between" },
 		"i8-stack-label": { "": "relative pb-$xxs" },
 		"i8-prepend": {
@@ -590,6 +573,8 @@ const componentClasses = {
 		"[grid-area:_title]",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"c8-flat",
 		"fw-$bold",
@@ -598,6 +583,7 @@ const componentClasses = {
 		"loading-indicator",
 		"loading-indicator-ring",
 		"mb-$s",
+		"surface",
 		"text-body-s",
 		"toast-root",
 		"toasts-viewport"
@@ -605,24 +591,32 @@ const componentClasses = {
 	Button: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"icon-color",
 		"icon-size",
 		"loading-indicator",
-		"loading-indicator-ring"
+		"loading-indicator-ring",
+		"surface"
 	],
 	ButtonBase: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"icon-color",
 		"icon-size",
 		"loading-indicator",
-		"loading-indicator-ring"
+		"loading-indicator-ring",
+		"surface"
 	],
 	Calendar: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"btn-square",
 		"c8-flat",
@@ -648,6 +642,7 @@ const componentClasses = {
 		"relative",
 		"rounded",
 		"select-none",
+		"surface",
 		"text-center"
 	],
 	Card: [
@@ -717,6 +712,7 @@ const componentClasses = {
 		"i8-before",
 		"i8-border-none",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -729,6 +725,7 @@ const componentClasses = {
 		"i8-loading",
 		"i8-outline-none",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -773,6 +770,8 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"btn-square",
 		"c8-flat",
@@ -801,6 +800,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -812,6 +812,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -833,6 +834,7 @@ const componentClasses = {
 		"scope-error",
 		"segmented",
 		"select-none",
+		"surface",
 		"text-body",
 		"text-center",
 		"text-ellipsis",
@@ -847,6 +849,8 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"btn-square",
 		"c8-flat",
@@ -895,6 +899,7 @@ const componentClasses = {
 		"rounded",
 		"segmented",
 		"select-none",
+		"surface",
 		"text-center",
 		"top-0"
 	],
@@ -908,6 +913,8 @@ const componentClasses = {
 	DatePickerPopup: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"btn-square",
 		"c8-flat",
@@ -932,6 +939,7 @@ const componentClasses = {
 		"relative",
 		"rounded",
 		"select-none",
+		"surface",
 		"text-center"
 	],
 	DelayedSwitch: ["visible"],
@@ -946,6 +954,8 @@ const componentClasses = {
 		"border-grey-500/50",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"btn-square",
 		"c8-flat",
@@ -1026,6 +1036,7 @@ const componentClasses = {
 		"slider-range",
 		"slider-thumb",
 		"slider-track",
+		"surface",
 		"surface-500",
 		"tab",
 		"tabs-indicator",
@@ -1057,6 +1068,8 @@ const componentClasses = {
 		"b",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"c8-filled",
 		"c8-flat",
@@ -1082,6 +1095,7 @@ const componentClasses = {
 		"px-$card-spacing",
 		"py-$m",
 		"rounded",
+		"surface",
 		"text-card-header",
 		"text-mt-0"
 	],
@@ -1105,6 +1119,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1116,6 +1131,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -1147,6 +1163,7 @@ const componentClasses = {
 		"flex-grow",
 		"i8",
 		"i8-append",
+		"i8-filled",
 		"i8-icon-clickable",
 		"i8-icon-wrap",
 		"i8-input",
@@ -1155,6 +1172,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-ta-wrapper",
 		"i8-textarea",
 		"i8-underline",
@@ -1185,6 +1203,8 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"cursor-pointer",
 		"flex",
@@ -1197,6 +1217,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1208,6 +1229,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -1233,6 +1255,7 @@ const componentClasses = {
 		"scope-error",
 		"scope-grey",
 		"segmented",
+		"surface",
 		"text-body",
 		"text-caption",
 		"text-center",
@@ -1247,18 +1270,22 @@ const componentClasses = {
 	MenuItem: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"icon-color",
 		"icon-size",
 		"loading-indicator",
 		"loading-indicator-ring",
 		"menu-item",
-		"scope-grey"
+		"scope-grey",
+		"surface"
 	],
 	OverflowContainer: ["flex", "whitespace-nowrap"],
 	Pagination: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
 		"btn-square",
 		"c8-flat",
 		"flex",
@@ -1274,11 +1301,14 @@ const componentClasses = {
 	Popover: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"icon-color",
 		"icon-size",
 		"loading-indicator",
-		"loading-indicator-ring"
+		"loading-indicator-ring",
+		"surface"
 	],
 	ProgressBar: [
 		"progress-bar",
@@ -1296,6 +1326,7 @@ const componentClasses = {
 		"rb-item-wrapper",
 		"rb-label",
 		"rb-root",
+		"rb-row",
 		"text-caption",
 		"text-error-500",
 		"text-mt-0",
@@ -1317,6 +1348,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1328,6 +1360,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -2069,6 +2102,7 @@ const rules = [
 					"--card-heading-ls": props["letter-spacing"],
 					"--card-heading-bc": props["--font-bc"],
 					"--card-heading-tc": props["--font-tc"],
+					"--card-heading-font": props["font-family"] || "inherit",
 					"padding": "var(--card-spacing)"
 				};
 			}
@@ -2270,7 +2304,8 @@ const themeFactory = (opts) => {
 		"--font-tc": "var(--card-heading-tc)",
 		"font-weight": "var(--card-heading-weight)",
 		"line-height": "var(--card-heading-lh)",
-		"letter-spacing": "var(--card-heading-ls)"
+		"letter-spacing": "var(--card-heading-ls)",
+		"font-family": "var(--card-heading-font, inherit)"
 	}] };
 	for (const [name, val] of Object.entries(opts.typography)) {
 		if (!val) continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "files": [
     "dist"
   ],