@dorsk/tsumikit 0.14.0 → 0.16.0

package/README.md

@@ -129,6 +129,10 @@ triggers, and `SegmentedControl`. Each renders an exact
 original ghost icon-button default. Use `control` on `Button` or `Popover` when
 the roomier shared `--control-height` composer contract is required.
 
+Button and Popover share the same semantic tones. For a confirmed positive
+action, `tone="success"` gives neutral controls a success tint; combine it with
+`variant="primary"` for a filled success action without consumer CSS.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/components/atoms/Button.svelte

@@ -6,8 +6,8 @@
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		// Semantic state tint layered on top of the variant: tints text/border and
 		// adds a subtle fill on hover. For stateful controls — an "on"/active toggle
-		// (`accent`), or cost/severity states (`info`, `warn`).
-		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+		// (`accent`), positive actions (`success`), or cost/severity states.
+		tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		control?: boolean;
 		block?: boolean;
@@ -66,6 +66,7 @@
 	class:btn-icon={icon}
 	class:btn-chip={chip}
 	class:btn-tone-accent={tone === 'accent'}
+	class:btn-tone-success={tone === 'success'}
 	class:btn-tone-info={tone === 'info'}
 	class:btn-tone-warn={tone === 'warn'}
 	class:btn-tone-danger={tone === 'danger'}
@@ -156,6 +157,9 @@
 	.btn-tone-accent {
 		--btn-tone: var(--accent);
 	}
+	.btn-tone-success {
+		--btn-tone: var(--ok);
+	}
 	.btn-tone-info {
 		--btn-tone: var(--info);
 	}
@@ -166,6 +170,7 @@
 		--btn-tone: var(--danger);
 	}
 	.btn-tone-accent,
+	.btn-tone-success,
 	.btn-tone-info,
 	.btn-tone-warn,
 	.btn-tone-danger {
@@ -173,6 +178,7 @@
 		border-color: color-mix(in srgb, var(--btn-tone) 50%, var(--border));
 	}
 	.btn-tone-accent:hover:not(:disabled),
+	.btn-tone-success:hover:not(:disabled),
 	.btn-tone-info:hover:not(:disabled),
 	.btn-tone-warn:hover:not(:disabled),
 	.btn-tone-danger:hover:not(:disabled) {
@@ -234,6 +240,26 @@
 		border-color: var(--accent);
 		filter: brightness(1.08);
 	}
+	.btn-control.btn-tone-success {
+		color: var(--ok);
+		border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
+	}
+	.btn-control.btn-tone-success:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ok) 14%, transparent);
+		border-color: var(--ok);
+	}
+	/* A positive primary action uses success as its fill, not merely as the
+	   neutral tint. This follows the control override so both heights match. */
+	.btn-primary.btn-tone-success {
+		background: var(--ok);
+		border-color: var(--ok);
+		color: var(--text-on-success);
+	}
+	.btn-primary.btn-tone-success:hover:not(:disabled) {
+		background: var(--ok);
+		border-color: var(--ok);
+		filter: brightness(1.08);
+	}
 
 	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
 	.btn-icon {

package/dist/components/atoms/Button.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
-    tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+    tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     control?: boolean;
     block?: boolean;

package/dist/components/molecules/Popover.svelte

@@ -13,7 +13,7 @@
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
-	type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+	type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 	type TriggerSize = 'sm' | 'md' | 'lg';
 
 	let {
@@ -101,6 +101,7 @@
 	class:trigger-control={control}
 	class:trigger-block={block}
 	class:trigger-tone-accent={tone === 'accent'}
+	class:trigger-tone-success={tone === 'success'}
 	class:trigger-tone-info={tone === 'info'}
 	class:trigger-tone-warn={tone === 'warn'}
 	class:trigger-tone-danger={tone === 'danger'}
@@ -212,6 +213,9 @@
 	.pop-trigger.trigger-tone-accent {
 		--pop-trigger-tone: var(--accent);
 	}
+	.pop-trigger.trigger-tone-success {
+		--pop-trigger-tone: var(--ok);
+	}
 	.pop-trigger.trigger-tone-info {
 		--pop-trigger-tone: var(--info);
 	}
@@ -222,6 +226,7 @@
 		--pop-trigger-tone: var(--danger);
 	}
 	.pop-trigger.trigger-tone-accent,
+	.pop-trigger.trigger-tone-success,
 	.pop-trigger.trigger-tone-info,
 	.pop-trigger.trigger-tone-warn,
 	.pop-trigger.trigger-tone-danger {
@@ -229,12 +234,23 @@
 		border-color: color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border));
 	}
 	.pop-trigger.trigger-tone-accent:hover:not(:disabled),
+	.pop-trigger.trigger-tone-success:hover:not(:disabled),
 	.pop-trigger.trigger-tone-info:hover:not(:disabled),
 	.pop-trigger.trigger-tone-warn:hover:not(:disabled),
 	.pop-trigger.trigger-tone-danger:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--pop-trigger-tone) 14%, transparent);
 		border-color: var(--pop-trigger-tone);
 	}
+	.pop-trigger.trigger-primary.trigger-tone-success {
+		background: var(--ok);
+		border-color: var(--ok);
+		color: var(--text-on-success);
+	}
+	.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
+		background: var(--ok);
+		border-color: var(--ok);
+		filter: brightness(1.08);
+	}
 	.pop-trigger:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

package/dist/components/molecules/Popover.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
-type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 type TriggerSize = 'sm' | 'md' | 'lg';
 type $$ComponentProps = {
     placement?: Placement;

package/dist/components/molecules/Timestamp.svelte

@@ -32,6 +32,7 @@
 		value,
 		mode = 'datetime',
 		utc = false,
+		precision = false,
 		details = true,
 		selectable = false,
 		mono = false,
@@ -49,6 +50,9 @@
 		 *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
 		 *  value would otherwise show the wrong day. */
 		utc?: boolean;
+		/** Relative mode only: render two units ("1d 15h", "1h 55m") instead of a
+		 *  single rounded unit. Default false. */
+		precision?: boolean;
 		/** Click to open the details popover (UTC / local / relative / zone /
 		 *  epoch). Default true. When false, renders as a bare inline <time>. */
 		details?: boolean;
@@ -83,7 +87,7 @@
 	});
 
 	const date = $derived(toDate(value));
-	const label = $derived(formatTimestamp(value, current, now, utc));
+	const label = $derived(formatTimestamp(value, current, now, utc, precision));
 	// datetime= wants a valid ISO string; omit it entirely on bad input.
 	const machine = $derived(date ? toISO(date) : undefined);
 	const showPopover = $derived(details || selectable);
@@ -105,7 +109,7 @@
 			? [
 					{ k: 'UTC', v: toISO(date) },
 					{ k: 'Local', v: toLocale(date, 'datetime') },
-					{ k: 'Relative', v: relativeTime(date, now) },
+					{ k: 'Relative', v: relativeTime(date, now, true) },
 					{ k: 'Time zone', v: localTimeZone() },
 					{ k: 'Unix', v: String(toEpochSeconds(date)) }
 				]

package/dist/components/molecules/Timestamp.svelte.d.ts

@@ -12,6 +12,9 @@ type $$ComponentProps = {
      *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
      *  value would otherwise show the wrong day. */
     utc?: boolean;
+    /** Relative mode only: render two units ("1d 15h", "1h 55m") instead of a
+     *  single rounded unit. Default false. */
+    precision?: boolean;
     /** Click to open the details popover (UTC / local / relative / zone /
      *  epoch). Default true. When false, renders as a bare inline <time>. */
     details?: boolean;

package/dist/styles/variables.css

@@ -73,6 +73,9 @@
   --text-muted: var(--c-text-muted);
   --text-faint: var(--c-text-faint);
   --text-on-accent: var(--c-accent-ink);
+  /* Adaptive ink for filled positive actions: dark canvas ink on bright greens,
+     light canvas ink on the darker greens used by light themes. */
+  --text-on-success: var(--bg);
 
   --accent: var(--c-accent);
   --accent-dim: var(--c-accent-dim);

package/dist/timestamp.d.ts

@@ -28,11 +28,17 @@ export declare function localTimeZone(): string;
  * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
  * falling back to a locale date once past ~30 days. Future instants read
  * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ *
+ * The single-unit form **rounds to the nearest** unit (not truncating), so an
+ * instant 1d 15h away reads "in 2d" rather than the misleading "in 1d", and the
+ * rounding carries across boundaries (23h40m → "1d"). Pass `precision` for the
+ * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
+ * shows the remainder instead of rounding it away.
  */
-export declare function relativeTime(value: TimeInput | null | undefined, now?: number): string;
+export declare function relativeTime(value: TimeInput | null | undefined, now?: number, precision?: boolean): string;
 /**
  * Render a date in the chosen inline mode. `utc` selects UTC over the viewer's
  * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
  * `relative`, zoneless). Returns '' for unparseable input.
  */
-export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean): string;
+export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean, precision?: boolean): string;

package/dist/timestamp.js

@@ -49,12 +49,21 @@ export function toEpochSeconds(d) {
 export function localTimeZone() {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
+const MIN = 60;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
 /**
  * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
  * falling back to a locale date once past ~30 days. Future instants read
  * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ *
+ * The single-unit form **rounds to the nearest** unit (not truncating), so an
+ * instant 1d 15h away reads "in 2d" rather than the misleading "in 1d", and the
+ * rounding carries across boundaries (23h40m → "1d"). Pass `precision` for the
+ * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
+ * shows the remainder instead of rounding it away.
  */
-export function relativeTime(value, now = Date.now()) {
+export function relativeTime(value, now = Date.now(), precision = false) {
     const d = toDate(value);
     if (!d)
         return '';
@@ -62,15 +71,32 @@ export function relativeTime(value, now = Date.now()) {
     const future = deltaMs < 0;
     const secs = Math.floor(Math.abs(deltaMs) / 1000);
     const suffix = (s) => (future ? `in ${s}` : `${s} ago`);
-    if (secs < 60)
+    if (secs < MIN)
         return suffix(`${secs}s`);
-    const mins = Math.floor(secs / 60);
+    if (secs >= 30 * DAY)
+        return d.toLocaleDateString();
+    if (precision) {
+        if (secs < HOUR) {
+            const m = Math.floor(secs / MIN);
+            const s = secs % MIN;
+            return suffix(s ? `${m}m ${s}s` : `${m}m`);
+        }
+        if (secs < DAY) {
+            const h = Math.floor(secs / HOUR);
+            const m = Math.floor((secs % HOUR) / MIN);
+            return suffix(m ? `${h}h ${m}m` : `${h}h`);
+        }
+        const days = Math.floor(secs / DAY);
+        const h = Math.floor((secs % DAY) / HOUR);
+        return suffix(h ? `${days}d ${h}h` : `${days}d`);
+    }
+    const mins = Math.round(secs / MIN);
     if (mins < 60)
         return suffix(`${mins}m`);
-    const hrs = Math.floor(mins / 60);
+    const hrs = Math.round(secs / HOUR);
     if (hrs < 24)
         return suffix(`${hrs}h`);
-    const days = Math.floor(hrs / 24);
+    const days = Math.round(secs / DAY);
     if (days < 30)
         return suffix(`${days}d`);
     return d.toLocaleDateString();
@@ -80,7 +106,7 @@ export function relativeTime(value, now = Date.now()) {
  * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
  * `relative`, zoneless). Returns '' for unparseable input.
  */
-export function formatTimestamp(value, mode, now, utc = false) {
+export function formatTimestamp(value, mode, now, utc = false, precision = false) {
     const d = toDate(value);
     if (!d)
         return '';
@@ -92,6 +118,6 @@ export function formatTimestamp(value, mode, now, utc = false) {
         case 'datetime':
             return toLocale(d, mode, utc);
         case 'relative':
-            return relativeTime(d, now);
+            return relativeTime(d, now, precision);
     }
 }

package/package.json

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