@dorsk/tsumikit 0.52.0 → 0.53.0

package/README.md

@@ -190,7 +190,7 @@ sanctioned escape hatch for everything else.
 | component | published properties |
 | --- | --- |
 | `Button` | `--btn-bg`, `--btn-fg`, `--btn-border`, `--btn-size`, `--btn-radius`, `--btn-tone`, `--btn-on`, `--btn-box` |
-| `Badge` | `--badge-bg`, `--badge-fg`, `--badge-border`, `--badge-radius`, `--badge-tone`, `--badge-max-width` |
+| `Badge` | `--badge-bg`, `--badge-fg`, `--badge-border`, `--badge-radius`, `--badge-tone`, `--badge-max-width`, `--badge-fs`, `--badge-fw`, `--badge-min-size` |
 | `Text` | `--txt-fg`, `--txt-size` |
 | `Select` | `--select-bg`, `--select-fg`, `--select-border`, `--select-size`, `--select-radius` |
 | `Input` | `--input-bg`, `--input-fg`, `--input-border`, `--input-size`, `--input-radius` |
@@ -204,10 +204,24 @@ sanctioned escape hatch for everything else.
 | `Fieldset` | `--fieldset-pad`, `--fieldset-border` |
 | `GitRef` | `--git-ref-tone`, `--git-ref-max-width` |
 | `EmptyState` | `--empty-tone` |
+| `Popover` | `--pop-trigger-bg`, `--pop-trigger-fg`, `--pop-trigger-border`, `--pop-trigger-radius`, `--pop-trigger-size`, `--pop-trigger-pad`, `--pop-box` |
 
 `tests/css-custom-property-contract.test.js` reads this table and fails if a
 listed property is not actually read by its component, so the docs cannot drift.
 
+`Popover`'s hooks paint the **trigger**; hover states keep their own feedback
+colours. `--pop-box: auto` releases the square floor, so `pill` plus
+`--pop-trigger-pad` reshapes the default trigger into a chip of any height. `--pop-trigger-border` needs the chromed trigger — `bare` means no ring
+by definition. `Badge`'s `--badge-min-size` pairs with `numeric` (already centred
+and tabular) to turn a count badge into a square/circular counter.
+
+A `triggerClass` on `Popover` (or `class` on the pickers that wrap it) is a hook
+for a **globally loaded** stylesheet only. Your component's *scoped* CSS cannot
+reach it: Svelte's scoping attribute is added to elements your own template
+renders, and the trigger belongs to `Popover`, so `.toolbar .my-trigger` compiles
+to `.toolbar.svelte-x .my-trigger.svelte-x` and matches nothing. Use `style` and
+the properties above instead.
+
 ## Components
 
 **Atoms:** Text, Heading, Button, Input (`icon` inset leading glyph,

package/dist/components/atoms/Badge.svelte

@@ -167,8 +167,8 @@
 		gap: var(--sp-1);
 		padding: 0.15rem var(--sp-2);
 		border-radius: var(--badge-radius, var(--r-pill));
-		font-size: var(--fs-xs);
-		font-weight: var(--fw-medium);
+		font-size: var(--badge-fs, var(--fs-xs));
+		font-weight: var(--badge-fw, var(--fw-medium));
 		line-height: 1.4;
 		background: var(--badge-bg, var(--bg-elevated-2));
 		color: var(--badge-fg, var(--text-muted));
@@ -178,7 +178,7 @@
 	}
 	.badge-sm,
 	.badge-xs {
-		font-size: calc(var(--fs-xs) * 0.92);
+		font-size: var(--badge-fs, calc(var(--fs-xs) * 0.92));
 		gap: 0.15rem;
 	}
 	.badge-sm {
@@ -205,16 +205,17 @@
 	}
 	.mono {
 		font-family: var(--font-mono);
-		font-weight: var(--fw-normal);
+		font-weight: var(--badge-fw, var(--fw-normal));
 	}
 	.uppercase {
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		font-weight: var(--fw-semibold);
+		font-weight: var(--badge-fw, var(--fw-semibold));
 	}
 	.numeric {
 		font-variant-numeric: tabular-nums;
-		min-width: 1.5em;
+		min-width: var(--badge-min-size, 1.5em);
+		min-height: var(--badge-min-size, auto);
 		justify-content: center;
 	}
 	.truncate {

package/dist/components/molecules/FontScalePicker.svelte

@@ -4,18 +4,53 @@
 	// Everything inside the popover is sized in plain rem, never --fs-*: if the
 	// panel rescaled with the page the slider would move under the pointer
 	// mid-drag and oscillate between steps.
+	import type { ComponentProps } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Slider from '../atoms/Slider.svelte';
 	import { fontScale, SCALE_LEVELS } from '../../stores/fontscale.svelte';
 
-	let { class: klass = '' }: { class?: string } = $props();
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
+	let {
+		box = 'md',
+		placement = 'bottom-end',
+		variant,
+		tone,
+		size,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
+		class: klass = '',
+		style: styleProp = '',
+	}: TriggerChrome & { class?: string; style?: string } = $props();
 
 	const index = $derived(Math.max(0, SCALE_LEVELS.findIndex((l) => l.id === fontScale.levelId)));
 	const level = $derived(SCALE_LEVELS[index]);
 	const set = (i: number) => fontScale.set(SCALE_LEVELS[Math.max(0, Math.min(SCALE_LEVELS.length - 1, i))].id);
 </script>
 
-<Popover label="Text size" placement="bottom-end" triggerClass={klass} box="md">
+<Popover
+	label="Text size"
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{size}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+>
 	{#snippet trigger()}<span class="glyph" data-tsu="FontScalePicker" title="Text size: {level.label}">A</span>{/snippet}
 	<div class="panel">
 		<div class="row">

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

@@ -1,5 +1,9 @@
-type $$ComponentProps = {
+import type { ComponentProps } from 'svelte';
+import Popover from './Popover.svelte';
+type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
+type $$ComponentProps = TriggerChrome & {
     class?: string;
+    style?: string;
 };
 declare const FontScalePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type FontScalePicker = ReturnType<typeof FontScalePicker>;

package/dist/components/molecules/Menu.svelte

@@ -34,6 +34,7 @@
 		| 'tone'
 		| 'size'
 		| 'box'
+		| 'pill'
 		| 'control'
 		| 'block'
 		| 'triggerClass'
@@ -55,6 +56,7 @@
 		tone,
 		size,
 		box,
+		pill,
 		control,
 		block,
 		triggerClass,
@@ -135,6 +137,7 @@
 	{tone}
 	{size}
 	{box}
+	{pill}
 	{control}
 	{block}
 	{triggerClass}

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

@@ -15,7 +15,7 @@ export interface MenuItem {
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';
 type PopoverProps = ComponentProps<typeof Popover>;
-type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
 type $$ComponentProps = {
     label: string;
     items: MenuItem[];

package/dist/components/molecules/Popover.svelte

@@ -32,6 +32,7 @@
 		tone = 'none',
 		size,
 		box,
+		pill = false,
 		control = false,
 		block = false,
 		hitArea = 'auto',
@@ -58,8 +59,11 @@
 		/** Panel content. Receives `{ close }` to dismiss the panel from inside;
 		 *  zero-argument snippets keep working. */
 		children: Snippet<[{ close: () => void }]>;
-		/** Extra class on the trigger button — style it from your own scoped CSS,
-		 *  no :global needed (you supply the class). */
+		/** Extra class on the trigger button, for a stylesheet you already load
+		 *  globally. Your *scoped* CSS cannot reach it: the element is rendered by
+		 *  `Popover`, so it carries `Popover`'s scope hash, not yours, and a
+		 *  selector like `.toolbar .my-trigger` matches nothing. Use `style` and
+		 *  the published `--pop-trigger-*` / `--pop-box` properties instead. */
 		triggerClass?: string;
 		/** Drop the default ghost-icon chrome so the trigger is an unstyled button
 		 *  you fully own (pair with `triggerClass`). */
@@ -71,9 +75,11 @@
 		size?: TriggerSize;
 		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
 		 *  pinning the square exactly. The default trigger floors at the `sm` box
-		 *  and grows with its content; override that floor from `triggerClass`
-		 *  with `--pop-box`. */
+		 *  and grows with its content; override that floor with
+		 *  `style="--pop-box: …"` for any square the four tiers do not cover. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Fully rounded trigger (`--r-pill`), as on `Button`. */
+		pill?: boolean;
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
@@ -226,6 +232,7 @@
 	class:trigger-control={control}
 	class:trigger-block={block}
 	class:trigger-box={box !== undefined}
+	class:trigger-pill={pill}
 	class:hit-compact={hitArea === 'compact'}
 	style:--pop-box={box ? `var(--box-${box})` : undefined}
 	class:trigger-tone-accent={tone === 'accent'}
@@ -271,19 +278,20 @@
 	   (triggerClass) overrides it; `:not(.bare)` keeps it off bare triggers such
 	   as the Timestamp <time>, which stay plain inline text. */
 	/* The square is one knob, `--pop-box`: the `box` prop sets it inline, and a
-	   consumer's `triggerClass` can set it too (`--pop-box: var(--box-xs)`) — a
-	   plain width/height there would not have beaten a `min-*` floor. */
+	   consumer reaches it with `style="--pop-box: var(--box-xs)"` — a plain
+	   width/height would not have beaten a `min-*` floor. */
 	:where(.pop-trigger:not(.bare)) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-height: var(--pop-box, var(--box-sm));
 		min-width: var(--pop-box, var(--box-sm));
-		padding: var(--sp-1);
-		border: 1px solid transparent;
-		border-radius: var(--r-md);
-		background: transparent;
-		color: var(--text);
+		padding: var(--pop-trigger-pad, var(--sp-1));
+		border: 1px solid var(--pop-trigger-border, transparent);
+		border-radius: var(--pop-trigger-radius, var(--r-md));
+		background: var(--pop-trigger-bg, transparent);
+		color: var(--pop-trigger-fg, var(--text));
+		font-size: var(--pop-trigger-size, inherit);
 		transition:
 			background 0.12s var(--ease),
 			border-color 0.12s var(--ease);
@@ -296,11 +304,11 @@
 	.pop-trigger.canonical {
 		min-width: 0;
 		min-height: var(--control-height-default);
-		padding: var(--sp-2) var(--sp-4);
-		border-color: var(--border-strong);
-		background: var(--surface);
+		padding: var(--pop-trigger-pad, var(--sp-2) var(--sp-4));
+		border-color: var(--pop-trigger-border, var(--border-strong));
+		background: var(--pop-trigger-bg, var(--surface));
 		font-weight: var(--fw-medium);
-		font-size: var(--fs-sm);
+		font-size: var(--pop-trigger-size, var(--fs-sm));
 		line-height: 1;
 		user-select: none;
 		white-space: nowrap;
@@ -310,9 +318,9 @@
 		background: var(--surface);
 	}
 	.pop-trigger.trigger-primary {
-		background: var(--accent);
-		border-color: var(--accent);
-		color: var(--text-on-accent);
+		background: var(--pop-trigger-bg, var(--accent));
+		border-color: var(--pop-trigger-border, var(--accent));
+		color: var(--pop-trigger-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
 	.pop-trigger.trigger-primary:hover:not(:disabled) {
@@ -321,16 +329,16 @@
 		filter: brightness(1.08);
 	}
 	.pop-trigger.trigger-ghost {
-		background: transparent;
-		border-color: transparent;
+		background: var(--pop-trigger-bg, transparent);
+		border-color: var(--pop-trigger-border, transparent);
 	}
 	.pop-trigger.trigger-ghost:hover:not(:disabled) {
 		background: var(--bg-elevated-2);
 		border-color: transparent;
 	}
 	.pop-trigger.trigger-danger {
-		color: var(--danger);
-		border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+		color: var(--pop-trigger-fg, var(--danger));
+		border-color: var(--pop-trigger-border, color-mix(in srgb, var(--danger) 50%, var(--border)));
 	}
 	.pop-trigger.trigger-danger:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--danger) 14%, transparent);
@@ -339,28 +347,31 @@
 	.pop-trigger.trigger-sm {
 		height: var(--control-height-compact);
 		min-height: var(--control-height-compact);
-		padding: var(--sp-1) var(--sp-3);
-		font-size: var(--fs-xs);
+		padding: var(--pop-trigger-pad, var(--sp-1) var(--sp-3));
+		font-size: var(--pop-trigger-size, var(--fs-xs));
 	}
 	.pop-trigger.trigger-lg {
 		min-height: var(--control-height-large);
-		padding: var(--sp-3) var(--sp-5);
-		font-size: var(--fs-base);
+		padding: var(--pop-trigger-pad, var(--sp-3) var(--sp-5));
+		font-size: var(--pop-trigger-size, var(--fs-base));
 	}
 	.pop-trigger.trigger-control {
 		height: var(--control-height);
 		min-height: var(--control-height);
-		padding: 0 var(--sp-3);
+		padding: var(--pop-trigger-pad, 0 var(--sp-3));
 	}
 	.pop-trigger.trigger-block {
 		width: 100%;
 	}
+	.pop-trigger.trigger-pill {
+		border-radius: var(--pop-trigger-radius, var(--r-pill));
+	}
 	.pop-trigger.trigger-box {
 		width: var(--pop-box);
 		min-width: var(--pop-box);
 		height: var(--pop-box);
 		min-height: var(--pop-box);
-		padding: 0;
+		padding: var(--pop-trigger-pad, 0);
 		flex: none;
 	}
 	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
@@ -395,8 +406,8 @@
 	.pop-trigger.trigger-tone-info,
 	.pop-trigger.trigger-tone-warn,
 	.pop-trigger.trigger-tone-danger {
-		color: var(--pop-trigger-tone);
-		border-color: color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border));
+		color: var(--pop-trigger-fg, var(--pop-trigger-tone));
+		border-color: var(--pop-trigger-border, 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),
@@ -407,9 +418,9 @@
 		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);
+		background: var(--pop-trigger-bg, var(--ok));
+		border-color: var(--pop-trigger-border, var(--ok));
+		color: var(--pop-trigger-fg, var(--text-on-success));
 	}
 	.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
 		background: var(--ok);
@@ -431,12 +442,13 @@
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
 	:where(.pop-trigger.bare) {
 		display: inline;
-		padding: 0;
+		padding: var(--pop-trigger-pad, 0);
 		border: 0;
-		border-radius: 0;
-		background: none;
-		color: inherit;
+		border-radius: var(--pop-trigger-radius, 0);
+		background: var(--pop-trigger-bg, none);
+		color: var(--pop-trigger-fg, inherit);
 		font: inherit;
+		font-size: var(--pop-trigger-size, inherit);
 		line-height: inherit;
 		vertical-align: baseline;
 		cursor: pointer;

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

@@ -17,8 +17,11 @@ type $$ComponentProps = {
     children: Snippet<[{
         close: () => void;
     }]>;
-    /** Extra class on the trigger button — style it from your own scoped CSS,
-     *  no :global needed (you supply the class). */
+    /** Extra class on the trigger button, for a stylesheet you already load
+     *  globally. Your *scoped* CSS cannot reach it: the element is rendered by
+     *  `Popover`, so it carries `Popover`'s scope hash, not yours, and a
+     *  selector like `.toolbar .my-trigger` matches nothing. Use `style` and
+     *  the published `--pop-trigger-*` / `--pop-box` properties instead. */
     triggerClass?: string;
     /** Drop the default ghost-icon chrome so the trigger is an unstyled button
      *  you fully own (pair with `triggerClass`). */
@@ -30,9 +33,11 @@ type $$ComponentProps = {
     size?: TriggerSize;
     /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
      *  pinning the square exactly. The default trigger floors at the `sm` box
-     *  and grows with its content; override that floor from `triggerClass`
-     *  with `--pop-box`. */
+     *  and grows with its content; override that floor with
+     *  `style="--pop-box: …"` for any square the four tiers do not cover. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Fully rounded trigger (`--r-pill`), as on `Button`. */
+    pill?: boolean;
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;

package/dist/components/molecules/ThemePicker.svelte

@@ -5,18 +5,36 @@
 	// (--c-bg, --c-surface, --c-text, --c-accent; the derived --bg etc. are
 	// resolved once at :root and would not re-scope). The root default theme
 	// has no [data-theme] block, so its swatch carries the :root values.
+	import type { ComponentProps } from 'svelte';
 	import Popover from './Popover.svelte';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 	import { AUTO_THEME } from '../../theme-mode';
 
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
 	let {
+		box = 'md',
+		placement = 'bottom-end',
+		variant,
+		tone,
+		size,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
 		auto = false,
 		autoLabel = 'Auto',
 		autoHelp = 'Follow the system light/dark setting',
 		lightLabel = 'Light',
 		darkLabel = 'Dark',
 		class: klass = '',
-	}: {
+		style: styleProp = '',
+	}: TriggerChrome & {
 		/** Offer an "auto" row that follows `prefers-color-scheme`, remembering
 		 *  one light and one dark theme. */
 		auto?: boolean;
@@ -25,6 +43,7 @@
 		lightLabel?: string;
 		darkLabel?: string;
 		class?: string;
+		style?: string;
 	} = $props();
 
 	let hovered = $state<ThemeDef | null>(null);
@@ -54,7 +73,22 @@
 	</span>
 {/snippet}
 
-<Popover label={title} placement="bottom-end" triggerClass={klass} box="md">
+<Popover
+	label={title}
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{size}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+>
 	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(theme.current)}{#if isAuto}<span class="auto-dot" aria-hidden="true">◐</span>{/if}</span>{/snippet}
 	<div class="panel">
 		{#each groups as g (g.mode)}

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

@@ -1,4 +1,7 @@
-type $$ComponentProps = {
+import type { ComponentProps } from 'svelte';
+import Popover from './Popover.svelte';
+type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
+type $$ComponentProps = TriggerChrome & {
     /** Offer an "auto" row that follows `prefers-color-scheme`, remembering
      *  one light and one dark theme. */
     auto?: boolean;
@@ -7,6 +10,7 @@ type $$ComponentProps = {
     lightLabel?: string;
     darkLabel?: string;
     class?: string;
+    style?: string;
 };
 declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemePicker = ReturnType<typeof ThemePicker>;

package/package.json

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