add .lg

.changeset/cute-webs-mix.md

@@ -0,0 +1,26 @@
+---
+'@fuzdev/fuz_css': minor
+---
+
+add `.lg` size composite class, rename `input_height_sm` to `input_height_compact`, remove `--min_height`, add chip padding chain and min-height override hooks
+
+**New:**
+
+- `.lg` composite class — larger sizing, cascading to children. Symmetric with `.sm` and `.md`. Sets `--font_size_lg`, `--input_height: space_xl6`, `--input_height_compact: space_xl5`, `--input_padding_x: space_xl`, `--chip_padding_x: space_sm`, `--icon_size_lg`, `--menuitem_padding`, `--flow_margin: space_xl`.
+- `--chip_padding_x` override variable — chip horizontal padding now reads `var(--chip_padding_x, var(--space_xs))`. Size composites set it so chips scale with `.sm` / `.md` / `.lg` (previously chips only scaled font-size).
+- `--button_min_height` override variable — button `min-height` reads `var(--button_min_height, var(--input_height))` on regular buttons and `var(--button_min_height, var(--input_height_compact))` on inline buttons.
+- `--menuitem_min_height` override variable — menuitem `min-height` reads `var(--menuitem_min_height, var(--input_height_compact))`.
+
+**Breaking changes:**
+
+- rename CSS variable `--input_height_sm` to `--input_height_compact` — used for checkboxes, radio buttons, and inline buttons. The old name conflicted with the size composite naming convention where `_sm` means "value when `.sm` is active."
+- remove CSS variable `--min_height` — buttons now read `min-height: var(--button_min_height, var(--input_height))` directly, and inline buttons read `var(--button_min_height, var(--input_height_compact))`. The indirection layer is replaced by an explicit override hook.
+- rename JS export `input_height_sm` to `input_height_compact` in `variables.ts`
+- remove `input_height_inner` variable — was defined but unused
+- menuitem default `min-height` changes from `var(--icon_size_sm)` (2rem) to `var(--input_height_compact)` (3.3rem)
+
+**Migration:**
+
+- find-replace `--input_height_sm` → `--input_height_compact` in CSS and inline styles
+- find-replace `input_height_sm` → `input_height_compact` in JS/TS imports
+- replace `--min_height` overrides with `--button_min_height` (for buttons) or `--menuitem_min_height` (for menuitems)

.changeset/slimy-hands-find.md

@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_css': minor
+---
+
+bump node@24.14

.github/workflows/check.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ['22.15']
+        node-version: ['24.14']
 
     steps:
       - uses: actions/checkout@v2

CLAUDE.md

@@ -115,7 +115,7 @@ See `GenFuzCssOptions` and `VitePluginFuzCssOptions` types for configuration.
 - **Composite classes** - Multi-property shortcuts: `box`, `column`, `row`,
   `ellipsis`, `pixelated`, `circular`, `selectable`, `clickable`, `pane`,
   `panel`, `sm` (tighter sizing), `md` (default sizing / cascade reset),
-  `icon_button`, `plain`, `menuitem`, `chevron`, `chip`
+  `lg` (larger sizing), `icon_button`, `plain`, `menuitem`, `chevron`, `chip`
 - **Literal classes** - CSS `property:value` syntax: `display:flex`, `opacity:50%`
 
 All class types support modifiers: responsive (`md:`), state (`hover:`),

package.json

@@ -27,7 +27,7 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=22.15"
+    "node": ">=24.14"
   },
   "peerDependencies": {
     "@fuzdev/blake3_wasm": "^0.1.0",
@@ -69,14 +69,14 @@
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/blake3_wasm": "^0.1.1",
     "@fuzdev/fuz_code": "^0.45.1",
-    "@fuzdev/fuz_ui": "^0.191.4",
+    "@fuzdev/fuz_ui": "^0.192.0",
     "@fuzdev/fuz_util": "^0.57.0",
     "@fuzdev/gro": "^0.198.0",
     "@jridgewell/trace-mapping": "^0.3.31",
     "@ryanatkn/eslint-config": "^0.11.0",
     "@sveltejs/acorn-typescript": "^1.0.9",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.58.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/estree": "^1.0.8",
@@ -89,8 +89,8 @@
     "magic-string": "^0.30.21",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
-    "svelte": "^5.55.0",
-    "svelte-check": "^4.4.4",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
     "svelte2tsx": "^0.7.51",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",

src/lib/css_class_composites.ts

@@ -114,9 +114,9 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 		declaration: `
 			--font_size: var(--font_size_sm);
 			--input_height: var(--space_xl3);
-			--input_height_sm: var(--space_xl2);
+			--input_height_compact: var(--space_xl2);
 			--input_padding_x: var(--space_sm);
-			--min_height: var(--space_xl3);
+			--chip_padding_x: var(--space_xs2);
 			--icon_size: var(--icon_size_sm);
 			--menuitem_padding: var(--space_xs4) var(--space_xs3);
 			--flow_margin: var(--space_md);
@@ -127,14 +127,28 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 		declaration: `
 			--font_size: var(--font_size_md);
 			--input_height: var(--space_xl5);
-			--input_height_sm: var(--space_xl4);
+			--input_height_compact: var(--space_xl4);
 			--input_padding_x: var(--space_lg);
-			--min_height: var(--input_height);
+			--chip_padding_x: var(--space_xs);
 			--icon_size: var(--icon_size_md);
 			--menuitem_padding: var(--space_xs3) var(--space_xs);
 			--flow_margin: var(--space_lg);
 		`,
 	},
+	lg: {
+		comment:
+			'Larger sizing by overriding variables, cascading to children. Works on individual elements or containers.',
+		declaration: `
+			--font_size: var(--font_size_lg);
+			--input_height: var(--space_xl6);
+			--input_height_compact: var(--space_xl5);
+			--input_padding_x: var(--space_xl);
+			--chip_padding_x: var(--space_sm);
+			--icon_size: var(--icon_size_lg);
+			--menuitem_padding: var(--space_xs2) var(--space_sm);
+			--flow_margin: var(--space_xl);
+		`,
+	},
 	mb_flow: {
 		comment: 'Flow-aware margin-bottom that responds to --flow_margin overrides like .sm.',
 		declaration: 'margin-bottom: var(--flow_margin, var(--space_lg));',
@@ -183,7 +197,7 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 				z-index: 2;
 				cursor: pointer;
 				width: 100%;
-				min-height: var(--min_height, var(--icon_size_sm));
+				min-height: var(--menuitem_min_height, var(--input_height_compact));
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
@@ -254,8 +268,8 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 			.chip {
 				font-weight: 500;
 				font-size: var(--font_size, inherit);
-				padding-left: var(--space_xs);
-				padding-right: var(--space_xs);
+				padding-left: var(--chip_padding_x, var(--space_xs));
+				padding-right: var(--chip_padding_x, var(--space_xs));
 				background-color: var(--fg_10);
 				border-radius: var(--border_radius, var(--border_radius_xs));
 			}

src/lib/style.css

@@ -344,10 +344,10 @@ but not for the identical user action of clicking the track,
 so for consistent visuals we opt to include no active state */
 :where(input[type='checkbox']:not(.unstyled)) {
 	cursor: pointer;
-	width: var(--input_height_sm);
-	height: var(--input_height_sm);
-	min-width: var(--input_height_sm);
-	min-height: var(--input_height_sm);
+	width: var(--input_height_compact);
+	height: var(--input_height_compact);
+	min-width: var(--input_height_compact);
+	min-height: var(--input_height_compact);
 	border-radius: var(--border_radius, var(--border_radius_xs));
 	--input_padding_x: 0;
 	--checkbox_content: var(--checkbox_content_empty, '');
@@ -374,11 +374,11 @@ so for consistent visuals we opt to include no active state */
 
 :where(input[type='radio']:not(.unstyled)) {
 	cursor: pointer;
-	width: var(--input_height_sm);
-	height: var(--input_height_sm);
+	width: var(--input_height_compact);
+	height: var(--input_height_compact);
 	border-radius: 50%;
-	min-width: var(--input_height_sm);
-	min-height: var(--input_height_sm);
+	min-width: var(--input_height_compact);
+	min-height: var(--input_height_compact);
 	--input_padding_x: 0;
 }
 :where(input[type='radio']:not(.unstyled):checked)::before {
@@ -517,7 +517,6 @@ TODO think through these patterns to get somewhere consistent
 
 */
 :where(button:not(.unstyled)) {
-	--min_height: var(--input_height);
 	--text_color: var(--text_70);
 	--button_text_color: var(--text_color);
 	--button_fill: color-mix(in hsl, var(--fill, var(--shade_50)) 8%, transparent);
@@ -539,7 +538,7 @@ TODO think through these patterns to get somewhere consistent
 	font-size: var(--font_size, inherit);
 	font-weight: 700;
 	line-height: normal;
-	min-height: var(--min_height);
+	min-height: var(--button_min_height, var(--input_height));
 	padding: 0 var(--input_padding_x);
 	box-shadow: var(--shadow, var(--button_shadow));
 	border-width: var(--border_width);
@@ -681,7 +680,8 @@ TODO think through these patterns to get somewhere consistent
 
 :where(button:not(.unstyled).inline, p button:not(.unstyled)) {
 	display: inline-block;
-	--min_height: var(--input_height_sm); /* TODO this increases paragraph line spacing */
+	/* TODO this increases paragraph line spacing */
+	min-height: var(--button_min_height, var(--input_height_compact));
 }
 
 :where(small) {

src/lib/theme.css

@@ -649,10 +649,7 @@
 	--input_padding_x: var(--space_lg);
 	--input_width_min: 100px;
 	--input_height: var(--space_xl5);
-	--input_height_sm: var(--space_xl4);
-	--input_height_inner: calc(
-		var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y)
-	);
+	--input_height_compact: var(--space_xl4);
 	--shadow_xs: 0 0 3px 0px;
 	--shadow_sm: 0 0 4px 0px;
 	--shadow_md: 0 0 6px 0px;

src/lib/variables.ts

@@ -1417,10 +1417,9 @@ export const input_padding_y: StyleVariable = {name: 'input_padding_y', light: '
 export const input_padding_x: StyleVariable = {name: 'input_padding_x', light: 'var(--space_lg)'};
 export const input_width_min: StyleVariable = {name: 'input_width_min', light: '100px'};
 export const input_height: StyleVariable = {name: 'input_height', light: 'var(--space_xl5)'};
-export const input_height_sm: StyleVariable = {name: 'input_height_sm', light: 'var(--space_xl4)'};
-export const input_height_inner: StyleVariable = {
-	name: 'input_height_inner',
-	light: 'calc(var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y))',
+export const input_height_compact: StyleVariable = {
+	name: 'input_height_compact',
+	light: 'var(--space_xl4)',
 };
 
 /*
@@ -2225,8 +2224,7 @@ export const default_variables: Array<StyleVariable> = [
 	input_padding_x,
 	input_width_min,
 	input_height,
-	input_height_sm,
-	input_height_inner,
+	input_height_compact,
 
 	/* shadows and glows */
 	shadow_xs,