@dorsk/tsumikit 0.60.0 → 0.60.2

package/README.md

@@ -524,7 +524,8 @@ 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
 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 textarea measures that in the
+the bar continues the field's border, the controls still flush against its
+bottom and side edges. The textarea measures that in the
 single-line layout, so the switch cannot flip back and forth; the single-line
 look is untouched. Tab order is leading → field → trailing; the group shows
 the focus ring around the whole unit.

package/dist/components/molecules/InputGroup.svelte

@@ -134,82 +134,85 @@
 		width: 100%;
 		min-width: 0;
 	}
+	/* The adornments fill the field inside its 1px border, their outer corners
+	   following the field's; inner corners go square. In the bar they hug the
+	   bottom and side borders, so only the bottom-outer corner is rounded. */
 	.ig-adorn {
+		--ig-fuse-r: calc(var(--ig-radius) - 1px);
 		position: absolute;
-		bottom: 0;
+		top: 1px;
+		bottom: 1px;
 		z-index: 1;
 		display: flex;
 		align-items: center;
 		gap: var(--ig-inset);
-		height: var(--ig-h);
-		padding-inline: var(--ig-inset);
 		pointer-events: none;
 	}
-	.ig-adorn > :global(*) {
-		pointer-events: auto;
-	}
 	.ig-leading {
-		inset-inline-start: 0;
-	}
-	.ig-trailing {
-		inset-inline-end: 0;
-	}
-	.ig-center .ig-adorn {
-		top: 0;
-		height: auto;
-	}
-	/* Until the field grows into a bar, the adornments fill it inside its 1px
-	   border, their outer corners following the field's; inner corners go square. */
-	.ig:not(.ig-bar) .ig-adorn {
-		--ig-fuse-r: calc(var(--ig-radius) - 1px);
-		top: 1px;
-		bottom: 1px;
-		height: auto;
-		padding-inline: 0;
-	}
-	.ig:not(.ig-bar) .ig-leading {
 		inset-inline-start: 1px;
 	}
-	.ig:not(.ig-bar) .ig-trailing {
+	.ig-trailing {
 		inset-inline-end: 1px;
 	}
-	.ig:not(.ig-bar) .ig-adorn > :global(*) {
+	.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:not(.ig-bar) .ig-adorn > :global(:is(.btn-box, .btn-square, .btn-icon, .icon-only)) {
+	/* `.ig` outranks an adornment's own fixed box (e.g. FileButton `box`). */
+	.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;
 	}
-	.ig:not(.ig-bar) .ig-leading > :global(:first-child) {
+	.ig-leading > :global(:first-child) {
 		--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
 		border-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
 	}
-	.ig:not(.ig-bar) .ig-trailing > :global(:last-child) {
+	.ig-trailing > :global(:last-child) {
 		--btn-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
 		border-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
 	}
-	.ig:not(.ig-bar) .ig-adorn :global(.split-main) {
+	.ig-adorn :global(.split-main) {
 		--btn-radius: 0;
 	}
-	.ig:not(.ig-bar) .ig-adorn :global(.split-caret) {
+	.ig-adorn :global(.split-caret) {
 		--pop-trigger-radius: 0;
 	}
-	.ig:not(.ig-bar) .ig-adorn :global(.split-caret .pop-trigger) {
+	.ig-adorn :global(.split-caret .pop-trigger) {
 		height: 100%;
 	}
-	.ig:not(.ig-bar) .ig-leading > :global(:first-child .split-main) {
+	.ig-leading > :global(:first-child .split-main) {
 		--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
 	}
-	.ig:not(.ig-bar) .ig-trailing > :global(:last-child .split-caret) {
+	.ig-trailing > :global(:last-child .split-caret) {
 		--pop-trigger-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
 	}
+	.ig-bar .ig-adorn {
+		top: auto;
+		height: calc(var(--ig-h) - 1px);
+	}
+	.ig-bar .ig-leading > :global(:first-child) {
+		--btn-radius: 0 0 0 var(--ig-fuse-r);
+		border-radius: 0 0 0 var(--ig-fuse-r);
+	}
+	.ig-bar .ig-trailing > :global(:last-child) {
+		--btn-radius: 0 0 var(--ig-fuse-r) 0;
+		border-radius: 0 0 var(--ig-fuse-r) 0;
+	}
+	.ig-bar .ig-leading > :global(:first-child .split-main) {
+		--btn-radius: 0 0 0 var(--ig-fuse-r);
+	}
+	.ig-bar .ig-trailing > :global(:last-child .split-caret) {
+		--pop-trigger-radius: 0 0 var(--ig-fuse-r) 0;
+	}
 	.ig-bar .ig-field {
 		padding-bottom: var(--ig-h);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.60.0",
+  "version": "0.60.2",
   "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",