@dorsk/tsumikit 0.40.1 → 0.41.0

package/README.md

@@ -167,7 +167,8 @@ Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
-CapBar (consumption track with a draggable, keyboard-steppable cap handle; `oninput` live, `onchange` on commit),
+CapBar (consumption track with a draggable, keyboard-steppable cap handle that
+shows a `N%` bubble while it is moved; `oninput` live, `onchange` on commit),
 Drawer (side-panel `<dialog>`: `side`, `width` clamped to the viewport, full-screen
 under 48rem; `nav` page column that turns into a horizontal strip on narrow
 screens, or `navMobile`; sticky `footer`; Escape / scrim / close button all close),

package/dist/components/molecules/CapBar.svelte

@@ -63,6 +63,7 @@
 
 	let trackEl = $state<HTMLDivElement | null>(null);
 	let dragging = $state(false);
+	let keying = $state(false);
 	let committed = cap;
 
 	function setCap(next: number) {
@@ -98,6 +99,7 @@
 		const next = capKeyStep(e.key, e.shiftKey, snapCap(cap, step, min, max), step, min, max);
 		if (next === null) return;
 		e.preventDefault();
+		keying = true;
 		setCap(next);
 	}
 	function keyUp(e: KeyboardEvent) {
@@ -111,6 +113,7 @@
 	class="cap-bar size-{size} tone-{tone} {klass}"
 	class:readonly
 	class:dragging
+	class:keying
 	style="--label-w: {labelWidth}; --readout-w: {readoutWidth}; --pct: {pct}%; --cap: {capPct}%; {styleProp}"
 >
 	{#if label}
@@ -141,7 +144,9 @@
 			aria-disabled={readonly ? 'true' : undefined}
 			onkeydown={keyDown}
 			onkeyup={keyUp}
+			onblur={() => (keying = false)}
 		></div>
+		<div class="bubble" aria-hidden="true">{cap}%</div>
 	</div>
 	<div class="readout" title={readoutTitle}>
 		{#if readout === undefined}{readoutText}{:else if typeof readout === 'string'}{readout}{:else}{@render readout()}{/if}
@@ -225,6 +230,34 @@
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
 	}
+	.bubble {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		left: var(--cap);
+		transform: translateX(-50%);
+		padding: 1px var(--sp-1);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-sm);
+		background: var(--bg-elevated-2);
+		box-shadow: var(--shadow-sm);
+		color: var(--text);
+		font-size: var(--fs-xs);
+		line-height: 1.4;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+		pointer-events: none;
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity 0.12s var(--ease),
+			visibility 0.12s;
+		z-index: 3;
+	}
+	.dragging .bubble,
+	.keying .bubble {
+		opacity: 1;
+		visibility: visible;
+	}
 	.readonly .track,
 	.readonly .handle {
 		cursor: default;
@@ -251,7 +284,8 @@
 		grid-column: 1 / 3;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.fill {
+		.fill,
+		.bubble {
 			transition: none;
 		}
 	}

package/dist/components/molecules/Popover.svelte

@@ -174,10 +174,17 @@
 	/* The trigger owns its look (a ghost icon-button) from tokens — it no longer
 	   borrows global .btn classes, so a consumer can restyle it via `triggerClass`
 	   (+ `bare`) from their own scoped CSS instead of fighting globals. */
-	.pop-trigger {
+	/* Default trigger chrome. Zero specificity (`:where`) so any consumer class
+	   (triggerClass) overrides it; `:not(.bare)` keeps it off bare triggers such
+	   as the Timestamp <time>, which stay plain inline text. */
+	:where(.pop-trigger:not(.bare)) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		min-height: var(--box-md);
+		min-width: var(--box-md);
+		padding: var(--sp-2);
+		border: 1px solid transparent;
 		border-radius: var(--r-md);
 		background: transparent;
 		color: var(--text);
@@ -185,15 +192,7 @@
 			background 0.12s var(--ease),
 			border-color 0.12s var(--ease);
 	}
-	/* Box sizing stays off `bare` triggers so an inline trigger (e.g. a
-	   Timestamp <time>) keeps its text's line box. */
-	.pop-trigger:not(.bare) {
-		min-height: var(--box-md);
-		min-width: var(--box-md);
-		padding: var(--sp-2);
-		border: 1px solid transparent;
-	}
-	.pop-trigger:hover:not(:disabled) {
+	:where(.pop-trigger:not(.bare):hover:not(:disabled)) {
 		background: var(--bg-elevated-2);
 	}
 	/* Supplying canonical chrome props opts into the same dimensions, variants
@@ -328,19 +327,15 @@
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
 	:where(.pop-trigger.bare) {
 		display: inline;
-		height: auto;
-		min-height: 0;
-		min-width: 0;
-		width: auto;
 		padding: 0;
 		border: 0;
+		border-radius: 0;
 		background: none;
+		color: inherit;
 		font: inherit;
 		line-height: inherit;
 		vertical-align: baseline;
-	}
-	:where(.pop-trigger.bare:hover:not(:disabled)) {
-		background: none;
+		cursor: pointer;
 	}
 	.pop-panel {
 		position: fixed;

package/package.json

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