@dorsk/tsumikit 0.60.1 → 0.60.3

package/README.md

@@ -516,12 +516,15 @@ page. Adornment widths are measured with a `ResizeObserver` into
 The adornments sit flush inside the field's padding as ghost/primary controls,
 no dividers: pick a control one step below the group (`size="sm"`/`box="sm"` in
 an `md` group, `box="xs"` in `sm`, `box="lg"` in `lg`). `align="end"` (default)
-pins them to the bottom edge as a textarea grows; `align="center"` is for a
+pins them to the bottom edge as a textarea grows. A square control (`box`,
+`iconOnly`) drops its fixed box and stretches square to the slot height, so its
+glyph centres on the field; `align="center"` is for a
 single-line `Input`. `size` sm/md/lg, `disabled` and `error` flow to the field
 through context (a `size`/`invalid`/`disabled` set on the field still wins).
 `Textarea` keeps `autoresize`, `maxHeight` and `resize="top"` (the grip is
 clipped to the space between the adornments). Once a `Textarea` needs more
-than one row (content, `rows`, or a dragged floor) the adornments move into a
+than one row (content, `rows`, or a dragged floor; a wrapping placeholder does
+not count, it stays on one clipped line) the adornments move into a
 bar under the text: every line then runs the full width with the normal
 padding, the textarea's box (and its scrollbar) ends above the controls, and
 the bar continues the field's border, the controls still flush against its

package/dist/components/atoms/Textarea.svelte

@@ -87,6 +87,7 @@
 	// Grouped: report whether the content needs more than one row when laid out
 	// with the single-line padding (measured in that layout so the bar cannot
 	// flip back and forth), which moves the adornments into a bar under the text.
+	// An empty field has no content height: its scrollHeight counts the placeholder.
 	function probeBar() {
 		if (!el || !group) return;
 		const node = el;
@@ -98,7 +99,8 @@
 		node.style.minHeight = '';
 		const cs = getComputedStyle(node);
 		const borders = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
-		const height = Math.max(node.scrollHeight + borders, floor, rowsFloor(node));
+		const content = node.value === '' ? 0 : node.scrollHeight + borders;
+		const height = Math.max(content, floor, rowsFloor(node));
 		const oneRow = Math.max(rowsHeight(node, 1), parseFloat(cs.minHeight) || 0);
 		node.style.height = prevHeight;
 		if (floor) node.style.minHeight = `${floor}px`;
@@ -323,6 +325,11 @@
 		padding-inline: max(var(--ig-pad-x), var(--ig-leading-w, 0px) + var(--ig-gap))
 			max(var(--ig-pad-x), var(--ig-trailing-w, 0px) + var(--ig-gap));
 	}
+	.textarea.grouped:not(.bar)::placeholder {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 	.textarea.grouped:focus-visible {
 		outline: none;
 	}

package/dist/components/molecules/InputGroup.svelte

@@ -157,14 +157,17 @@
 	.ig-adorn > :global(*) {
 		pointer-events: auto;
 		align-self: stretch;
-		height: auto;
-		min-height: 0;
 		--btn-size: 100%;
 		--btn-radius: 0;
 		--pop-trigger-radius: 0;
 		border-radius: 0;
 	}
-	.ig-adorn > :global(:is(.btn-box, .btn-square, .btn-icon, .icon-only)) {
+	/* The doubled class outranks an adornment's own fixed box (e.g. FileButton `box`). */
+	.ig.ig .ig-adorn > :global(*) {
+		height: auto;
+		min-height: 0;
+	}
+	.ig .ig-adorn > :global(:is(.btn-box, .btn-square, .btn-icon, .icon-only)) {
 		width: auto;
 		min-width: 0;
 		aspect-ratio: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.60.1",
+  "version": "0.60.3",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",