@dorsk/tsumikit 0.22.0 → 0.24.0

package/README.md

@@ -57,15 +57,91 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 
 ## Theming
 
-- 17 themes ship (dark, light, sepia, **colorblind** — Okabe-Ito —, plus mocha,
-  dracula, nord, tokyonight, gruvbox, solarized, rosepine, onedark, everforest,
-  monokai, amoled, highcontrast).
-- A new theme = one entry in `THEMES` (`stores/theme.svelte.ts`) + one
-  `[data-theme="id"]` block in `variables.css`. Nothing else changes.
+- 23 themes ship (light, highcontrast, gruvboxlight, solarizedlight,
+  everforestlight, rosepinedawn, latte, nordlight, tokyoday, kanagawalotus,
+  sepia, dark, **colorblind** — Okabe-Ito —, mocha, dracula, nord, tokyonight,
+  gruvbox, solarized, rosepine, onedark, everforest, monokai, amoled).
 - `<ThemePicker />` and `<FontScalePicker />` wire the stores to the UI. Theme
   is persisted to `localStorage` and applied with no flash (head snippet in
   `app.html`) and updates the mobile `<meta name="theme-color">`.
 
+### Stylesheets
+
+`@dorsk/tsumikit/styles/app.css` is a shell over five files you can import
+individually, in this order:
+
+```css
+@import '@dorsk/tsumikit/styles/tokens.css';
+@import '@dorsk/tsumikit/styles/themes.css'; /* optional */
+@import '@dorsk/tsumikit/styles/reset.css';
+@import '@dorsk/tsumikit/styles/utilities.css';
+@import '@dorsk/tsumikit/styles/syntax.css';
+@import './brand.css';
+```
+
+| export | contents |
+| --- | --- |
+| `styles/tokens.css` | `:root` only — every token the kit reads (`--c-*` palette, `--bg`/`--text`/`--accent` aliases, type scale, spacing, radii, shadows, fonts, `--control-height`, …). Theme-less. |
+| `styles/themes.css` | the built-in `[data-theme="id"]` blocks, one per `THEMES` entry. |
+| `styles/reset.css` | reset + element defaults. |
+| `styles/utilities.css` | `.container`, `.stack`, `.row`, `.sr-only`, icon sizing, … |
+| `styles/syntax.css` | highlight.js / Prism class → `--syn-*` mapping. |
+
+`styles/variables.css` = `tokens.css` + `themes.css` (kept for compatibility).
+Nothing is wrapped in `@layer`: kit rules are unlayered so component-scoped
+styles cascade exactly as before, and a consumer stylesheet imported **after**
+the kit wins on source order at equal specificity. Do not put brand overrides
+inside a `@layer` of your own — layered rules lose to the kit's unlayered ones.
+
+### Your own theme, without vendoring
+
+```ts
+// +layout.ts (or any module that runs before first render)
+import { theme } from '@dorsk/tsumikit';
+theme.register({ id: 'kusaritoi', label: 'Kusaritoi', icon: '鎖', themeColor: '#2a2a2a', mode: 'dark' });
+theme.setDefault('kusaritoi');
+```
+
+```css
+/* brand.css — imported after the kit stylesheet(s) */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+:root { --font-mono: 'JetBrains Mono', ui-monospace, monospace; }
+
+[data-theme='kusaritoi'] {
+  color-scheme: dark;
+  --c-bg: #2a2a2a;         --c-bg-elev: #323232;    --c-bg-elev-2: #3a3a3a;
+  --c-surface: #323232;    --c-border: #484848;     --c-border-strong: #585858;
+  --c-text: #e8e8e8;       --c-text-muted: #b0b0b0; --c-text-faint: #808080;
+  --c-accent: #5ac8c8;     --c-accent-ink: #0d1f1f; --c-accent-dim: #3a8a8a;
+  --c-blue: #5a9fd4;       --c-amber: #d9a543;      --c-red: #e06060;
+  --c-green: #6abf69;      --c-violet: #b48ef0;     --c-gold: #d9a543;
+  --c-teal: #5ac8c8;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
+  --mach-bg-sl: 45% 24%;   --mach-fg-sl: 70% 82%;   --mach-border-sl: 45% 40%;
+}
+```
+
+Contract for a `[data-theme='x']` block: all nineteen `--c-*` palette tokens,
+`--shadow-sm|md|lg`, `--mach-bg-sl|fg-sl|border-sl`, and `color-scheme: light`
+for a light theme (`:root` defaults to dark, so dark themes may omit it).
+`--md-code-bg` is optional (derives from `--c-blue`). Everything else (`--bg`,
+`--text`, `--syn-*`, …) is an alias in `tokens.css` and follows automatically.
+
+- `theme.register(def | def[])` appends to `theme.all` (built-ins first); an
+  entry with a built-in `id` replaces that built-in. `icon` and `themeColor` are
+  optional. `ThemePicker` reads `theme.all`, so registered themes appear at once.
+- `theme.setDefault(id)` is the theme used when `localStorage` holds nothing
+  valid — set the same id as `data-theme` in your `app.html` so the no-flash
+  snippet and the store agree. A persisted id that only becomes valid after
+  `register()` is picked up as soon as it is registered.
+- Only the palette or only the fonts? Import `tokens.css` + your `brand.css`
+  and skip `themes.css`; or import the full `app.css` and override `:root`
+  tokens after it. Never copy the kit files.
+- Adding a built-in theme to the kit = one entry in `THEMES`
+  (`stores/theme.svelte.ts`) + one block in `styles/themes.css`.
+
 ## Components
 
 **Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
@@ -80,7 +156,15 @@ any custom SVG).
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
 
-**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
+**Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
+`layout="fixed"` makes column widths authoritative, `Column.truncate` /
+`nowrap` / `hideBelow="sm|md|lg"` (container-query on the table's own box),
+`hideHeader` clips the header but keeps it for assistive tech, `rowTone(row)`
+paints a left accent bar + `data-tone`, `rowClass(row)`, `rowActions` snippet
+for a hover/focus-revealed trailing cell (always visible on touch),
+`stickyOffset` for the sticky header's `top`, `size="sm"`, `loading`,
+`onloadmore` footer button, `empty` as string or snippet; `data-part`
+hooks on head/row/cell).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
 sidebar on desktop, overlay drawer on mobile, optionally resizable;
@@ -90,8 +174,10 @@ the content column only, `stickySidebar` pins it to the viewport, and
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
 mobile), NavItem
 (collapses to an icon rail when the sidebar is narrow), Container, Stack
-(vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
-no media/container query needed).
+(vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
+query container and stacks children full-width below 18/30/40/48rem — phone
+action rows without a viewport query), AutoGrid (intrinsically responsive
+columns — no media/container query needed).
 
 ### Container
 
@@ -103,6 +189,32 @@ edge-to-edge sections — inside AppShell's main column use `size="none"` instea
 Children can bleed to the column edge with
 `margin-inline: calc(-1 * var(--container-gutter))`.
 
+### ResizablePanel
+
+Inline by default: `panel` shares the row with `children` on its `side`, drag the
+edge or use the arrow keys/Home/End on the separator, collapse it with the edge
+chevron; `width`/`minWidth`/`maxWidth` (px numbers or CSS lengths such as
+`'12rem'`) and `widthKey` persist the width. `mode="overlay"` turns it into a
+fixed non-modal drawer (`role="dialog"`) on the viewport edge: `bind:open`,
+`onclose` fires on Escape, scrim click or the edge control, `scrim={false}` drops
+the dim backdrop, `fullWidthBelow="960px"` makes the drawer span the viewport (no
+handle, no scrim) on small screens, and `clampToViewport` (default true) keeps a
+stored width inside a shrunken window. `children` is optional in overlay mode.
+
+```svelte
+<ResizablePanel mode="overlay" side="right" label="Conversation" bind:open
+  width={720} minWidth={360} maxWidth="90vw" widthKey="conv-w" fullWidthBelow="960px">
+  {#snippet panel()}…{/snippet}
+</ResizablePanel>
+```
+
+`Scrim` (`onclose`, `hideBelow`, `z`, `label`) is the drawer's backdrop atom,
+exported for custom overlays: click or Escape (document-level) calls `onclose`.
+`resizeHandle` is the shared drag action behind every grip: `use:resizeHandle={{
+side, min, max, step, onwidth, oncommit, onreset, onactive, measure }}` gives
+any element pointer-capture + rAF-coalesced dragging, arrow/Home/End keys and
+double-click reset; the width defaults to the element's parent box.
+
 ### Stacked distribution + legend
 
 `SegmentedProgress mode="stacked"` turns the bar into one shared track whose slice
@@ -199,6 +311,37 @@ 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.
 
+### Square boxes & touch targets
+
+Icon-ish controls share one square scale, `box="xs" | "sm" | "md" | "lg"` =
+`--box-xs/sm/md/lg` (1.5rem / `--control-height-compact` / 2.25rem /
+`--control-height-default`): `IconButton`, `Button`, `SelectButton`, `Popover`
+(trigger), `CopyButton` (hides its label) and `FileButton` (implies `iconOnly`).
+A boxed control is always square, padding-less and `flex: none`, so a header
+row of IconButton + SelectButton + Popover lines up with no per-app overrides.
+`md` is the classic 2.25rem icon button and the default; `chip` is an outlined
+`lg`. `Button square` instead takes its side from the height contract in force
+(`size` tier, or `--control-height` with `control`), for a square text glyph in
+a toolbar. `IconButton glyphSize` sets the exact glyph size for SVG *and* text
+glyphs (`size` stays the SVG px, emoji ×1.35).
+
+On `(pointer: coarse)` every icon-only/square control (and `Popover`'s default
+trigger) carries an invisible `::after` slab that extends its hit area to
+`--touch-target` (44px, WCAG 2.5.8) without moving layout; fine pointers are
+untouched. `hitArea="compact"` opts a dense-table row out. `Button
+collapseLabel="mobile" | "container"` hides `<span data-label>` children below
+40rem viewport / 30rem container, drops to icon padding, and names the button
+from the hidden text unless `aria-label` is set:
+
+```svelte
+<Button collapseLabel="container"><Icon name="search" /><span data-label>Search</span></Button>
+<Cluster stackAt="md"><Button grow>Cancel</Button><Button grow variant="primary">Save</Button></Cluster>
+```
+
+`--control-height-*` and `--box-*` are **required tokens**: a consumer that
+forks `variables.css` must keep them (Button `control`, Select `sm`, every `box`)
+or those controls render with unresolved sizes.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/components/atoms/Button.svelte

@@ -21,15 +21,29 @@
 		href?: string;
 		target?: string;
 		rel?: string;
-		// Square 2.25rem icon-only tap target (IconButton). `iconInline` is the
-		// borderless, compact variant (chip-remove ✕, inline edit ✎); pair with
-		// `hoverDanger` to tint it red on hover (delete affordances).
+		// Square icon-only tap target (IconButton), `--box-md` (2.25rem) unless
+		// `box` says otherwise. `iconInline` is the borderless, compact variant
+		// (chip-remove ✕, inline edit ✎); pair with `hoverDanger` to tint it red on
+		// hover (delete affordances).
 		icon?: boolean;
-		// Larger 2.5rem outlined square icon-chip (header/toolbar action). Pairs
-		// with `tone` for tinted severity chips (back/archive/interrupt/more).
+		// Shared square box scale (`--box-xs/sm/md/lg`): always square, no padding,
+		// never flexes. Implies an icon-only control.
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		// Square text/icon control whose side equals the current height contract:
+		// `size` tier, or `--control-height` with `control`.
+		square?: boolean;
+		// Outlined `--box-lg` icon-chip (header/toolbar action). Pairs with `tone`
+		// for tinted severity chips (back/archive/interrupt/more).
 		chip?: boolean;
 		iconInline?: boolean;
 		hoverDanger?: boolean;
+		// Hide `[data-label]` children below 40rem viewport (`mobile`) or 30rem
+		// container (`container`) so the button becomes icon-only; the hidden text
+		// becomes the aria-label unless one is set.
+		collapseLabel?: 'never' | 'mobile' | 'container';
+		// Icon-only/square buttons grow a 44px hit slab on coarse pointers without
+		// moving layout; `compact` opts out in dense tables.
+		hitArea?: 'auto' | 'compact';
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
 		// disabled-equivalent while true (so a double-submit can't fire).
 		loading?: boolean;
@@ -47,9 +61,13 @@
 		as = 'button',
 		href,
 		icon = false,
+		box,
+		square = false,
 		chip = false,
 		iconInline = false,
 		hoverDanger = false,
+		collapseLabel = 'never',
+		hitArea = 'auto',
 		loading = false,
 		type = 'button',
 		disabled = false,
@@ -69,10 +87,22 @@
 			? { href, 'aria-disabled': inactive || undefined }
 			: { type, disabled: inactive }
 	);
+
+	let el = $state<HTMLElement | null>(null);
+	const explicitName = $derived(rest['aria-label'] ?? rest['aria-labelledby']);
+	$effect(() => {
+		if (!el || collapseLabel === 'never' || explicitName) return;
+		const text = Array.from(el.querySelectorAll('[data-label]'), (n) => n.textContent?.trim())
+			.filter(Boolean)
+			.join(' ');
+		if (text) el.setAttribute('aria-label', text);
+		else el.removeAttribute('aria-label');
+	});
 </script>
 
 <svelte:element
 	this={tag}
+	bind:this={el}
 	data-tsu="Button"
 	{...rest}
 	{...elementAttrs}
@@ -88,7 +118,13 @@
 	class:btn-control={control}
 	class:btn-block={block}
 	class:btn-icon={icon}
+	class:btn-box={box !== undefined}
+	class:btn-square={square}
 	class:btn-chip={chip}
+	class:btn-collapse-mobile={collapseLabel === 'mobile'}
+	class:btn-collapse-container={collapseLabel === 'container'}
+	class:hit-compact={hitArea === 'compact'}
+	style:--btn-box={box ? `var(--box-${box})` : undefined}
 	class:btn-tone-accent={tone === 'accent'}
 	class:btn-tone-success={tone === 'success'}
 	class:btn-tone-info={tone === 'info'}
@@ -226,11 +262,12 @@
 	/* Icon-chip: larger square outlined tap target for header/toolbar actions.
 	   Combines with a tone for tinted severity chips. */
 	.btn-chip {
-		min-height: 2.5rem;
-		min-width: 2.5rem;
-		height: 2.5rem;
-		width: 2.5rem;
+		min-height: var(--box-lg);
+		min-width: var(--box-lg);
+		height: var(--box-lg);
+		width: var(--box-lg);
 		padding: 0;
+		flex: none;
 		border-radius: var(--r-md);
 	}
 
@@ -317,12 +354,41 @@
 		filter: brightness(1.08);
 	}
 
-	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
+	/* Icon-only buttons (IconButton). Square box = consistent --box-md tap target. */
 	.btn-icon {
-		min-height: 2.25rem;
-		min-width: 2.25rem;
+		min-height: var(--box-md);
+		min-width: var(--box-md);
 		padding: var(--sp-2);
 	}
+	/* `square`: side = the height contract in force (size tier or control). */
+	.btn-square {
+		width: var(--control-height-default);
+		min-width: var(--control-height-default);
+		padding: 0;
+		flex: none;
+	}
+	.btn-square.btn-sm {
+		width: var(--control-height-compact);
+		min-width: var(--control-height-compact);
+	}
+	.btn-square.btn-lg {
+		width: var(--control-height-large);
+		min-width: var(--control-height-large);
+		height: var(--control-height-large);
+	}
+	.btn-square.btn-control {
+		width: var(--control-height);
+		min-width: var(--control-height);
+	}
+	/* `box`: explicit square scale, wins over icon/chip/square/size sizing. */
+	.btn-box {
+		width: var(--btn-box);
+		min-width: var(--btn-box);
+		height: var(--btn-box);
+		min-height: var(--btn-box);
+		padding: 0;
+		flex: none;
+	}
 	.btn-icon-inline {
 		min-height: 0;
 		min-width: 0;
@@ -340,6 +406,49 @@
 		color: var(--danger);
 	}
 
+	/* Label collapse: `[data-label]` children disappear below the threshold and
+	   the button falls back to icon-only padding. */
+	@media (max-width: 40rem) {
+		.btn-collapse-mobile :global([data-label]) {
+			display: none;
+		}
+		.btn-collapse-mobile {
+			padding: var(--sp-2);
+			gap: 0;
+		}
+	}
+	@container (max-width: 30rem) {
+		.btn-collapse-container :global([data-label]) {
+			display: none;
+		}
+		.btn-collapse-container {
+			padding: var(--sp-2);
+			gap: 0;
+		}
+	}
+
+	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
+	   extends the hit area to --touch-target without changing layout. Buttons
+	   already at or above the target keep their own box (inset never positive). */
+	@media (pointer: coarse) {
+		.btn-icon:not(.hit-compact),
+		.btn-icon-inline:not(.hit-compact),
+		.btn-box:not(.hit-compact),
+		.btn-square:not(.hit-compact),
+		.btn-chip:not(.hit-compact) {
+			position: relative;
+		}
+		.btn-icon:not(.hit-compact)::after,
+		.btn-icon-inline:not(.hit-compact)::after,
+		.btn-box:not(.hit-compact)::after,
+		.btn-square:not(.hit-compact)::after,
+		.btn-chip:not(.hit-compact)::after {
+			content: '';
+			position: absolute;
+			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+		}
+	}
+
 	/* Two-state (toggle) buttons — e.g. an IconButton with `pressed`. Reacts to
 	   the native aria-pressed that flows through, so no extra class. Tint defaults
 	   to the accent; override per-instance with `style="--btn-on: var(--warn)"`. */

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

@@ -12,9 +12,13 @@ type ButtonProps = HTMLButtonAttributes & {
     target?: string;
     rel?: string;
     icon?: boolean;
+    box?: 'xs' | 'sm' | 'md' | 'lg';
+    square?: boolean;
     chip?: boolean;
     iconInline?: boolean;
     hoverDanger?: boolean;
+    collapseLabel?: 'never' | 'mobile' | 'container';
+    hitArea?: 'auto' | 'compact';
     loading?: boolean;
     class?: string;
     children?: Snippet;

package/dist/components/atoms/Scrim.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { browser } from '../../env';
+
+	let {
+		onclose,
+		hideBelow,
+		z = 'var(--z-drawer)',
+		label = 'Close'
+	}: {
+		/** Called on click anywhere on the scrim and on Escape (document-level). */
+		onclose?: () => void;
+		/** Viewport width (CSS length) under which the scrim is not rendered,
+		 *  for overlays that go full-bleed on small screens. */
+		hideBelow?: string;
+		/** z-index; defaults to the drawer layer. */
+		z?: string | number;
+		/** Accessible name of the click target. */
+		label?: string;
+	} = $props();
+
+	let hidden = $state(false);
+
+	$effect(() => {
+		if (!browser || !hideBelow) {
+			hidden = false;
+			return;
+		}
+		const query = matchMedia(`(max-width: ${hideBelow})`);
+		const sync = () => {
+			hidden = query.matches;
+		};
+		sync();
+		query.addEventListener('change', sync);
+		return () => query.removeEventListener('change', sync);
+	});
+
+	$effect(() => {
+		if (!browser) return;
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key !== 'Escape' || event.defaultPrevented) return;
+			event.preventDefault();
+			onclose?.();
+		};
+		document.addEventListener('keydown', onKeydown);
+		return () => document.removeEventListener('keydown', onKeydown);
+	});
+</script>
+
+{#if !hidden}
+	<button
+		type="button"
+		class="scrim"
+		style:z-index={z}
+		aria-label={label}
+		tabindex="-1"
+		onclick={() => onclose?.()}
+		data-tsu="Scrim"
+	></button>
+{/if}
+
+<style>
+	.scrim {
+		position: fixed;
+		inset: 0;
+		padding: 0;
+		border: 0;
+		background: color-mix(in srgb, var(--bg) 45%, transparent);
+		cursor: default;
+		animation: scrim-fade 0.18s var(--ease);
+	}
+	@keyframes scrim-fade {
+		from {
+			opacity: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.scrim {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** Called on click anywhere on the scrim and on Escape (document-level). */
+    onclose?: () => void;
+    /** Viewport width (CSS length) under which the scrim is not rendered,
+     *  for overlays that go full-bleed on small screens. */
+    hideBelow?: string;
+    /** z-index; defaults to the drawer layer. */
+    z?: string | number;
+    /** Accessible name of the click target. */
+    label?: string;
+};
+declare const Scrim: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scrim = ReturnType<typeof Scrim>;
+export default Scrim;

package/dist/components/layouts/Cluster.svelte

@@ -10,6 +10,9 @@
 	// SegmentedControl/Select `control`), so a whole toolbar lines up from one prop
 	// instead of per-child sizing. `grow` makes direct children share the row width
 	// equally (flex: 1) — the toolbar equivalent of `style="flex:1"` on each child.
+	// `stackAt` turns the cluster into its own inline-size query container and
+	// stacks children full-width once it is narrower than the tier (18/30/40/48rem),
+	// for phone action rows; the cluster then no longer shrink-wraps its content.
 	const CONTROL_TIER = {
 		sm: 'var(--control-height-compact)',
 		md: 'var(--control-height-default)',
@@ -24,6 +27,7 @@
 		wrap = true,
 		size,
 		grow = false,
+		stackAt,
 		class: klass = '',
 		children,
 		...rest
@@ -35,6 +39,7 @@
 		wrap?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		grow?: boolean;
+		stackAt?: 'xs' | 'sm' | 'md' | 'lg';
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -46,6 +51,11 @@
 	data-tsu="Cluster"
 	class="cluster-c {klass}"
 	class:cluster-grow={grow}
+	class:cluster-stack={stackAt !== undefined}
+	class:stack-xs={stackAt === 'xs'}
+	class:stack-sm={stackAt === 'sm'}
+	class:stack-md={stackAt === 'md'}
+	class:stack-lg={stackAt === 'lg'}
 	style:gap
 	style:align-items={align}
 	style:justify-content={justify}
@@ -64,4 +74,27 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.cluster-stack {
+		container-type: inline-size;
+	}
+	@container (max-width: 18rem) {
+		.stack-xs > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 30rem) {
+		.stack-sm > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 40rem) {
+		.stack-md > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
+	@container (max-width: 48rem) {
+		.stack-lg > :global(*) {
+			flex: 1 1 100%;
+		}
+	}
 </style>

package/dist/components/layouts/Cluster.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     wrap?: boolean;
     size?: 'sm' | 'md' | 'lg';
     grow?: boolean;
+    stackAt?: 'xs' | 'sm' | 'md' | 'lg';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;