vunor 0.2.1 → 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.d.mts

@@ -16,7 +16,7 @@ interface TVunorUnoPresetOpts {
     regular: number;
     dense: number;
   };
-  typography?: Record<TTypographyNames, TTypography | undefined>;
+  typography?: Partial<Record<TTypographyNames, TTypography>>;
   layers?: {
     reverseDark?: boolean;
     reverseLight?: boolean;

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,29 +229,25 @@ const shortcuts = [
 ];
 //#endregion
 //#region src/theme/shortcuts/btn.ts
+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]:": "px-fingertip-half rounded-fingertip-half",
-		"[&.btn-square]:": "size-fingertip px-0",
-		"[&.btn-round.btn-square]:": "px-0",
+		"[&.btn-round]:": btnRound,
+		"[&.btn-square]:": btnSquare,
+		"[&.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",
 		"[&>.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!"
-	}
+	"btn-round": { "": btnRound },
+	"btn-square": { "": btnSquare },
+	"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
@@ -358,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({
@@ -368,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",
@@ -392,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": {
@@ -409,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",
@@ -441,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": {
@@ -587,6 +573,8 @@ const componentClasses = {
 		"[grid-area:_title]",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"c8-flat",
 		"fw-$bold",
@@ -595,6 +583,7 @@ const componentClasses = {
 		"loading-indicator",
 		"loading-indicator-ring",
 		"mb-$s",
+		"surface",
 		"text-body-s",
 		"toast-root",
 		"toasts-viewport"
@@ -602,25 +591,34 @@ 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",
 		"calendar-cell",
 		"calendar-grid-row",
@@ -644,6 +642,7 @@ const componentClasses = {
 		"relative",
 		"rounded",
 		"select-none",
+		"surface",
 		"text-center"
 	],
 	Card: [
@@ -713,6 +712,7 @@ const componentClasses = {
 		"i8-before",
 		"i8-border-none",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -725,6 +725,7 @@ const componentClasses = {
 		"i8-loading",
 		"i8-outline-none",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -769,7 +770,10 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
+		"btn-square",
 		"c8-flat",
 		"calendar-cell",
 		"calendar-grid-row",
@@ -796,6 +800,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -807,6 +812,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -828,6 +834,7 @@ const componentClasses = {
 		"scope-error",
 		"segmented",
 		"select-none",
+		"surface",
 		"text-body",
 		"text-center",
 		"text-ellipsis",
@@ -842,7 +849,10 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
+		"btn-square",
 		"c8-flat",
 		"calendar-cell",
 		"calendar-grid-row",
@@ -889,6 +899,7 @@ const componentClasses = {
 		"rounded",
 		"segmented",
 		"select-none",
+		"surface",
 		"text-center",
 		"top-0"
 	],
@@ -902,7 +913,10 @@ const componentClasses = {
 	DatePickerPopup: [
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
+		"btn-square",
 		"c8-flat",
 		"calendar-cell",
 		"calendar-grid-row",
@@ -925,6 +939,7 @@ const componentClasses = {
 		"relative",
 		"rounded",
 		"select-none",
+		"surface",
 		"text-center"
 	],
 	DelayedSwitch: ["visible"],
@@ -939,7 +954,10 @@ const componentClasses = {
 		"border-grey-500/50",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
+		"btn-square",
 		"c8-flat",
 		"card",
 		"checkbox",
@@ -1018,6 +1036,7 @@ const componentClasses = {
 		"slider-range",
 		"slider-thumb",
 		"slider-track",
+		"surface",
 		"surface-500",
 		"tab",
 		"tabs-indicator",
@@ -1049,6 +1068,8 @@ const componentClasses = {
 		"b",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"c8-filled",
 		"c8-flat",
@@ -1074,6 +1095,7 @@ const componentClasses = {
 		"px-$card-spacing",
 		"py-$m",
 		"rounded",
+		"surface",
 		"text-card-header",
 		"text-mt-0"
 	],
@@ -1097,6 +1119,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1108,6 +1131,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -1139,6 +1163,7 @@ const componentClasses = {
 		"flex-grow",
 		"i8",
 		"i8-append",
+		"i8-filled",
 		"i8-icon-clickable",
 		"i8-icon-wrap",
 		"i8-input",
@@ -1147,6 +1172,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-ta-wrapper",
 		"i8-textarea",
 		"i8-underline",
@@ -1177,6 +1203,8 @@ const componentClasses = {
 		"bottom-0",
 		"btn",
 		"btn-icon",
+		"btn-icon-left",
+		"btn-icon-right",
 		"btn-label",
 		"cursor-pointer",
 		"flex",
@@ -1189,6 +1217,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1200,6 +1229,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -1225,6 +1255,7 @@ const componentClasses = {
 		"scope-error",
 		"scope-grey",
 		"segmented",
+		"surface",
 		"text-body",
 		"text-caption",
 		"text-center",
@@ -1239,18 +1270,23 @@ 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",
 		"gap-1",
@@ -1265,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",
@@ -1287,6 +1326,7 @@ const componentClasses = {
 		"rb-item-wrapper",
 		"rb-label",
 		"rb-root",
+		"rb-row",
 		"text-caption",
 		"text-error-500",
 		"text-mt-0",
@@ -1308,6 +1348,7 @@ const componentClasses = {
 		"i8-append",
 		"i8-before",
 		"i8-counter",
+		"i8-filled",
 		"i8-hint",
 		"i8-hint-wrapper",
 		"i8-hint-wrapper-stack",
@@ -1319,6 +1360,7 @@ const componentClasses = {
 		"i8-label-wrapper",
 		"i8-loading",
 		"i8-prepend",
+		"i8-round",
 		"i8-stack-label",
 		"i8-ta-wrapper",
 		"i8-textarea",
@@ -2060,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)"
 				};
 			}
@@ -2121,7 +2164,22 @@ const defaultTypography = {
 	"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) {
+/**
+* Builds the UnoCSS `fontSize` theme entry for one typography level.
+*
+* Takes the whole {@link TTypography} rather than its numeric fields: this
+* function owns the shape of the emitted tuple, so fields that carry no
+* geometry (`font`, `css`) reach the output instead of being dropped at a call
+* site that can only forward numbers.
+*/
+function buildFontTheme(t, defaults) {
+	const size = t.size || 1;
+	const w = t.weight || 400;
+	const wBold = t.boldWeight || 700;
+	const lh = t.height || 1;
+	const ls = t.spacing || 0;
+	const actualFontHeightFactor = t.actualHeightFactor || defaults.actualHeightFactor;
+	const actualFontHeightTopBottomRatio = t.actualHeightTopBottomRatio || defaults.actualHeightTopBottomRatio;
 	const correctedSize = size * actualFontHeightFactor;
 	const m = (lh * size - correctedSize) / size;
 	const half = correctedSize / 2;
@@ -2142,7 +2200,9 @@ function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actu
 			"--font-tc": `${-mt}em`,
 			"font-weight": w,
 			"line-height": `${lh}em`,
-			"letter-spacing": `${ls}em`
+			"letter-spacing": `${ls}em`,
+			...t.font && { "font-family": t.font },
+			...t.css
 		}]
 	};
 }
@@ -2244,10 +2304,15 @@ 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?.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);
+	for (const [name, val] of Object.entries(opts.typography)) {
+		if (!val) continue;
+		const ft = buildFontTheme(val, {
+			actualHeightFactor: opts.actualFontHeightFactor,
+			actualHeightTopBottomRatio: opts.actualFontHeightTopBottomRatio
+		});
 		fontSize[name] = ft.theme;
 		spacing[name] = `${ft.size}em`;
 	}

package/package.json

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