@dorsk/tsumikit 0.62.0 → 0.63.1

package/README.md

@@ -206,6 +206,7 @@ sanctioned escape hatch for everything else.
 | `GitRef` | `--git-ref-tone`, `--git-ref-max-width` |
 | `EmptyState` | `--empty-tone` |
 | `Combobox` | `--cb-bg`, `--cb-border`, `--cb-radius`, `--cb-active-bg`, `--cb-min-width`, `--cb-max-height` |
+| `Toggle` | `--toggle-accent`, `--toggle-size` |
 | `Popover` | `--pop-trigger-bg`, `--pop-trigger-fg`, `--pop-trigger-border`, `--pop-trigger-radius`, `--pop-trigger-size`, `--pop-trigger-pad`, `--pop-box`, `--pop-count-bg`, `--pop-count-fg`, `--pop-count-size` |
 
 `tests/css-custom-property-contract.test.js` reads this table and fails if a
@@ -763,6 +764,21 @@ 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.
 
+`variant="toggle"` renders the trigger as a `Toggle` chip — the component
+itself, not a copy of its chrome — so a popover trigger sitting next to a
+`Toggle` in a toolbar shares one box. `size` (`sm` default, `md`), `pill`,
+`pressed` and `tone` behave as they do on `Toggle`; a `Toggle`'s height comes
+from `--toggle-size`, never from its content, so an emoji, an `Icon` and text
+all leave the chip the same height.
+
+```svelte
+<Toggle pressed={auto} onclick={toggleAuto}><Icon name="zap" size={12} /> Auto</Toggle>
+<Popover label="Pins" variant="toggle" pressed={pinned.length > 0} count={pinned.length}>
+  {#snippet trigger()}Pins{/snippet}
+  {#snippet children()}…{/snippet}
+</Popover>
+```
+
 `Toolbar` implements the keyboard contract its `role="toolbar"` announces: the
 bar is a **single tab stop**, and `←`/`→` (plus `Home`/`End`) move between the
 controls that are actually visible — collapsed `data-overflow` children drop out

package/dist/components/atoms/Icon.svelte

@@ -95,6 +95,7 @@
 		sun: '<circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />',
 		moon: '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />',
 		flame: '<path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" />',
+		zap: '<path d="M13 2 4.093 12.688a1 1 0 0 0 .764 1.642H11l-1 7.67L18.907 11.31a1 1 0 0 0-.764-1.642H13z" />',
 		loader: '<path d="M21 12a9 9 0 1 1-6.219-8.56" />',
 
 		// — circled status —

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

@@ -78,6 +78,7 @@ declare const ICONS: {
     readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\" /><path d=\"M12 2v2\" /><path d=\"M12 20v2\" /><path d=\"m4.93 4.93 1.41 1.41\" /><path d=\"m17.66 17.66 1.41 1.41\" /><path d=\"M2 12h2\" /><path d=\"M20 12h2\" /><path d=\"m6.34 17.66-1.41 1.41\" /><path d=\"m19.07 4.93-1.41 1.41\" />";
     readonly moon: "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />";
     readonly flame: "<path d=\"M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4\" />";
+    readonly zap: "<path d=\"M13 2 4.093 12.688a1 1 0 0 0 .764 1.642H11l-1 7.67L18.907 11.31a1 1 0 0 0-.764-1.642H13z\" />";
     readonly loader: "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />";
     readonly info: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />";
     readonly warning: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />";

package/dist/components/layouts/ResizablePanel.svelte

@@ -525,7 +525,9 @@
 
 	/* Overlay mode: a fixed non-modal drawer on the viewport edge. The page
 	   (`.main`) flows as normal underneath; the handle overhang is a viewport
-	   edge, so the container clamp does not apply. */
+	   edge, so the container clamp does not apply. Widths clamp against the
+	   containing block, never `100vw`: the reset's `scrollbar-gutter: stable`
+	   makes `100vw` wider than the viewport and clips the panel's leading edge. */
 	.panel-layout.overlay {
 		display: block;
 		container: none;
@@ -535,7 +537,7 @@
 		inset-block: 0;
 		left: 0;
 		z-index: var(--z-drawer);
-		width: min(var(--panel-current-width), 100vw);
+		width: min(var(--panel-current-width), 100%);
 		box-shadow: var(--shadow-md);
 		outline: none;
 		animation: panel-slide-left 0.18s var(--ease);
@@ -549,7 +551,9 @@
 		--handle-shift: -6px;
 	}
 	.overlay.full-bleed .panel {
-		width: 100vw;
+		left: 0;
+		right: 0;
+		width: auto;
 		border: 0;
 		box-shadow: none;
 	}

package/dist/components/layouts/Toolbar.svelte

@@ -9,7 +9,7 @@
 	// controls actually visible, the `…` trigger included. Children are arbitrary
 	// snippet content, so the ring is read from the DOM rather than a list prop.
 	import type { Snippet } from 'svelte';
-	import IconButton from '../molecules/IconButton.svelte';
+	import Icon from '../atoms/Icon.svelte';
 	import Menu, { type MenuItem } from '../molecules/Menu.svelte';
 	import Popover from '../molecules/Popover.svelte';
 	import {
@@ -161,12 +161,12 @@
 	{@render children()}
 	{#if collapsed && hasOverflow}
 		{#if items?.length}
-			<Menu label={overflowLabel} {items} placement="bottom-end" box="sm">
-				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+			<Menu label={overflowLabel} title={overflowLabel} {items} placement="bottom-end" box="sm">
+				{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
 			</Menu>
 		{:else if overflow}
-			<Popover label={overflowLabel} placement="bottom-end" box="sm">
-				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+			<Popover label={overflowLabel} title={overflowLabel} placement="bottom-end" box="sm">
+				{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
 				<div class="overflow-panel">{@render overflow()}</div>
 			</Popover>
 		{/if}

package/dist/components/molecules/Drawer.svelte

@@ -266,7 +266,7 @@
 
 	@media (min-width: 48rem) {
 		.panel {
-			width: min(var(--drawer-w), 100vw);
+			width: min(var(--drawer-w), 100%);
 			padding-top: 0;
 			padding-bottom: 0;
 			border-left: 1px solid var(--border-strong);

package/dist/components/molecules/Menu.svelte

@@ -52,6 +52,7 @@
 		| 'control'
 		| 'block'
 		| 'triggerClass'
+		| 'title'
 		| 'bare'
 		| 'hitArea'
 		| 'disabled'
@@ -74,6 +75,7 @@
 		control,
 		block,
 		triggerClass,
+		title,
 		bare,
 		hitArea,
 		disabled,
@@ -148,6 +150,7 @@
 	{control}
 	{block}
 	{triggerClass}
+	{title}
 	class={klass}
 	style={styleProp}
 	{panelClass}

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

@@ -27,7 +27,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' | 'pill' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'title' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
 type $$ComponentProps = {
     label: string;
     items: MenuItem[];

package/dist/components/molecules/Popover.svelte

@@ -13,10 +13,11 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { formatCount, hasCount } from '../../count';
 	import { place } from '../../floating';
+	import Toggle from './Toggle.svelte';
 	import { HOVER_CLOSE_GRACE, HOVER_OPEN_DELAY, createHoverIntent, opensOnHover } from './popover-hover.js';
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
+	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger' | 'toggle';
 	type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 	type TriggerSize = 'sm' | 'md' | 'lg';
 	type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
@@ -42,8 +43,12 @@
 		 *  you fully own (pair with `triggerClass`). */
 		bare?: boolean;
 		/** Button-compatible trigger chrome. Omitting every chrome prop preserves
-		 *  the original ghost icon-button trigger. */
+		 *  the original ghost icon-button trigger. `toggle` renders the trigger as
+		 *  the `Toggle` chip itself, so a trigger and a Toggle side by side share
+		 *  one box — `size`, `pill` and `pressed` behave as they do on `Toggle`. */
 		variant?: TriggerVariant;
+		/** `variant="toggle"` only: paint the chip in its "on" tint. */
+		pressed?: boolean;
 		tone?: TriggerTone;
 		size?: TriggerSize;
 		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
@@ -96,6 +101,7 @@
 		triggerClass = '',
 		bare = false,
 		variant,
+		pressed = false,
 		tone = 'none',
 		size,
 		box,
@@ -122,12 +128,29 @@
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
+	// The Toggle chip is not restyled here, it is rendered: the trigger *is* a
+	// `Toggle`, so the two cannot drift apart. A link trigger keeps the canonical
+	// chrome — `Toggle` is always a button.
+	const toggleChrome = $derived(variant === 'toggle' && as === 'button');
 	const canonicalChrome = $derived(
-		variant !== undefined || tone !== 'none' || size !== undefined || control || block
+		!toggleChrome && (variant !== undefined || tone !== 'none' || size !== undefined || control || block)
 	);
 	const counted = $derived(hasCount(count));
 	const countText = $derived(hasCount(count) ? formatCount(count, countMax) : '');
 	const triggerName = $derived(counted ? `${label}, ${count}` : label);
+	const toneVar = $derived(
+		{ none: undefined, accent: 'var(--accent)', success: 'var(--ok)', info: 'var(--info)', warn: 'var(--warn)', danger: 'var(--danger)' }[
+			tone
+		]
+	);
+	// The count pill is absolutely positioned against the chip, which therefore
+	// needs to be its containing block; Popover's scoped CSS cannot reach an
+	// element rendered by `Toggle`, so the two declarations ride inline.
+	const toggleStyle = $derived(
+		[counted ? 'position:relative' : '', toneVar ? `--toggle-accent:${toneVar}` : '', styleProp]
+			.filter(Boolean)
+			.join(';')
+	);
 
 	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
 	let triggerEl = $state<HTMLElement | null>(null);
@@ -241,7 +264,30 @@
 	}
 </script>
 
-<svelte:element
+{#if toggleChrome}
+	<Toggle
+		{...rest}
+		{...triggerAttrs}
+		{pressed}
+		{pill}
+		size={size === 'md' ? 'md' : 'sm'}
+		data-tsu="Popover"
+		class="pop-trigger trigger-toggle {triggerClass} {klass}"
+		style={toggleStyle}
+		aria-label={triggerName}
+		aria-haspopup={haspopup}
+		aria-expanded={open}
+		onpointerenter={onPointerEnter}
+		onpointerleave={onPointerLeave}
+		{@attach (node) => {
+			triggerEl = node;
+		}}
+	>
+		{@render trigger()}
+		{#if counted}<span class="pop-count count-sm" aria-hidden="true">{countText}</span>{/if}
+	</Toggle>
+{:else}
+	<svelte:element
 	this={as}
 	bind:this={triggerEl}
 	{...rest}
@@ -280,6 +326,7 @@
 	{@render trigger()}
 	{#if counted}<span class="pop-count" aria-hidden="true">{countText}</span>{/if}
 </svelte:element>
+{/if}
 
 <div
 	bind:this={panelEl}
@@ -495,7 +542,8 @@
 		pointer-events: none;
 	}
 	.trigger-sm .pop-count,
-	.bare .pop-count {
+	.bare .pop-count,
+	.pop-count.count-sm {
 		--pop-count-size: 1rem;
 		font-size: calc(var(--fs-xs) * 0.85);
 	}

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

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
+type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger' | 'toggle';
 type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 type TriggerSize = 'sm' | 'md' | 'lg';
 type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
@@ -28,8 +28,12 @@ type Own = {
      *  you fully own (pair with `triggerClass`). */
     bare?: boolean;
     /** Button-compatible trigger chrome. Omitting every chrome prop preserves
-     *  the original ghost icon-button trigger. */
+     *  the original ghost icon-button trigger. `toggle` renders the trigger as
+     *  the `Toggle` chip itself, so a trigger and a Toggle side by side share
+     *  one box — `size`, `pill` and `pressed` behave as they do on `Toggle`. */
     variant?: TriggerVariant;
+    /** `variant="toggle"` only: paint the chip in its "on" tint. */
+    pressed?: boolean;
     tone?: TriggerTone;
     size?: TriggerSize;
     /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,

package/dist/components/molecules/Toggle.svelte

@@ -54,16 +54,20 @@
 </button>
 
 <style>
+	/* The height is pinned to the `--toggle-size` box, never to the line box:
+	   an emoji, a 12px Icon and plain text all leave the chip the same height. */
 	.toggle {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		gap: 4px;
-		padding: 0.15rem var(--sp-2);
+		box-sizing: border-box;
+		height: var(--toggle-size, var(--box-xs));
+		padding: 0 var(--sp-2);
 		border-radius: var(--r-sm);
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-medium);
-		line-height: 1.4;
+		line-height: 1;
 		background: var(--bg-elevated-2);
 		color: var(--text-muted);
 		border: 1px solid var(--border);
@@ -82,7 +86,7 @@
 		border-radius: var(--r-pill);
 	}
 	.toggle.md {
-		padding: 0.3rem var(--sp-2);
+		height: var(--toggle-size, var(--control-height-compact));
 		font-size: var(--fs-sm);
 	}
 	.toggle.grow {

package/package.json

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