@dorsk/tsumikit 0.21.0 → 0.23.0

package/README.md

@@ -80,13 +80,38 @@ 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), NavItem
+sidebar on desktop, overlay drawer on mobile, optionally resizable;
+`layout="sidebar-full"` runs the sidebar the full height with the header over
+the content column only, `stickySidebar` pins it to the viewport, and
+`sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
+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
+
+`size` caps the column (`--content-max` by default; `size="none"` fills the parent),
+`gutter` overrides the `--sp-4` inline padding (safe-area insets still win),
+`align="start"` drops the centering. `fullWidth` is a *viewport* breakout for
+edge-to-edge sections — inside AppShell's main column use `size="none"` instead;
+`inset="<left> <right>"` keeps a `fullWidth` container clear of docked panels.
+Children can bleed to the column edge with
+`margin-inline: calc(-1 * var(--container-gutter))`.
 
 ### Stacked distribution + legend
 
@@ -184,6 +209,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/layouts/AppShell.svelte

@@ -24,7 +24,10 @@
 		resizableSidebar = false,
 		minSidebar = 64,
 		maxSidebar = 360,
-		sidebarWidthKey
+		sidebarWidthKey,
+		layout = 'header-top',
+		stickySidebar = false,
+		sidebarPadding = 'md'
 	}: {
 		header?: Snippet;
 		sidebar?: Snippet;
@@ -41,6 +44,14 @@
 		maxSidebar?: number;
 		/** localStorage key to persist the resized width. */
 		sidebarWidthKey?: string;
+		/** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+		 *  and the header only covers the content column (brand sits top-left). */
+		layout?: 'header-top' | 'sidebar-full';
+		/** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+		 *  footer stays visible on long pages. */
+		stickySidebar?: boolean;
+		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+		sidebarPadding?: 'none' | 'sm' | 'md';
 	} = $props();
 
 	let open = $state(false);
@@ -115,7 +126,14 @@
 
 <svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
 
-<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}" data-tsu="AppShell">
+<div
+	class="shell"
+	class:dragging
+	class:sidebar-full={layout === 'sidebar-full'}
+	class:sticky-sidebar={stickySidebar}
+	style="--shell-sidebar-w: {widthCss}"
+	data-tsu="AppShell"
+>
 	<header class="shell-header">
 		{#if sidebar}
 			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own
@@ -143,6 +161,7 @@
 		<aside
 			class="shell-sidebar"
 			class:open
+			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
 		>
@@ -190,6 +209,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--sp-3);
+		min-width: 0;
 		height: var(--header-h);
 		padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 		padding-top: var(--safe-top);
@@ -197,6 +217,9 @@
 		backdrop-filter: blur(8px);
 		border-bottom: 1px solid var(--border);
 	}
+	.shell-header > :global(*) {
+		min-width: 0;
+	}
 	.shell-menu-btn {
 		display: inline-flex;
 		align-items: center;
@@ -229,15 +252,22 @@
 		-webkit-overflow-scrolling: touch;
 		background: var(--bg-elevated);
 		border-right: 1px solid var(--border);
-		padding: var(--sp-3);
-		padding-top: max(var(--sp-3), var(--safe-top));
-		padding-bottom: max(var(--sp-3), var(--safe-bottom));
+		--shell-sidebar-pad: var(--sp-3);
+		padding: var(--shell-sidebar-pad);
+		padding-top: max(var(--shell-sidebar-pad), var(--safe-top));
+		padding-bottom: max(var(--shell-sidebar-pad), var(--safe-bottom));
 		/* A query container named `sidebar` so nav items collapse to an icon rail
 		   based on the sidebar's own width (see NavItem). */
 		container: sidebar / inline-size;
 		transform: translateX(-100%);
 		transition: transform 0.2s var(--ease);
 	}
+	.shell-sidebar[data-padding='sm'] {
+		--shell-sidebar-pad: var(--sp-2);
+	}
+	.shell-sidebar[data-padding='none'] {
+		--shell-sidebar-pad: 0px;
+	}
 	.shell-sidebar.open {
 		transform: translateX(0);
 		box-shadow: var(--shadow-lg);
@@ -273,6 +303,12 @@
 				'sidebar main'
 				'footer footer';
 		}
+		.shell.sidebar-full {
+			grid-template-areas:
+				'sidebar header'
+				'sidebar main'
+				'sidebar footer';
+		}
 		.shell-sidebar {
 			position: relative; /* anchor the absolute resize handle */
 			grid-area: sidebar;
@@ -281,6 +317,12 @@
 			box-shadow: none;
 			border-right: 1px solid var(--border);
 		}
+		.shell.sticky-sidebar .shell-sidebar {
+			position: sticky;
+			top: 0;
+			height: 100dvh;
+			align-self: start;
+		}
 		.shell-scrim,
 		.shell-menu-btn {
 			display: none !important;

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

@@ -15,6 +15,14 @@ type $$ComponentProps = {
     maxSidebar?: number;
     /** localStorage key to persist the resized width. */
     sidebarWidthKey?: string;
+    /** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+     *  and the header only covers the content column (brand sits top-left). */
+    layout?: 'header-top' | 'sidebar-full';
+    /** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+     *  footer stays visible on long pages. */
+    stickySidebar?: boolean;
+    /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+    sidebarPadding?: 'none' | 'sm' | 'md';
 };
 declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;

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;

package/dist/components/layouts/Container.svelte

@@ -1,31 +1,51 @@
 <script lang="ts">
-	// Centered, max-width content column with token gutters that respect safe-area
-	// insets. `size` overrides the default --content-max; `pad` toggles vertical
-	// padding. `fullWidth` releases the max-width constraint and lets the content
-	// bleed to the full viewport width even when nested inside a centered ancestor
-	// (the `margin-inline: calc(50% - 50vw)` trick), for edge-to-edge sections.
-	// Polymorphic via `as` so it can be a <main>, <section>, etc.
+	// Max-width content column with token gutters that respect safe-area insets.
+	// Self-contained: does not depend on the global `.container` utility. Exposes
+	// `--container-gutter` so children can bleed to the column edge with
+	// `margin-inline: calc(-1 * var(--container-gutter))`.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		size,
+		gutter,
+		align = 'center',
 		pad = false,
 		fullWidth = false,
+		inset,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'main' | 'section' | 'article';
-		/** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-		size?: string;
+		/** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+		size?: string | 'none';
+		/** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+		gutter?: string;
+		/** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+		align?: 'center' | 'start';
 		pad?: boolean;
-		/** Break out to the full viewport width, ignoring `size`/--content-max. */
+		/** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+		 *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
 		fullWidth?: boolean;
+		/** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+		 *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+		inset?: string;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const style = $derived.by(() => {
+		const vars: string[] = [];
+		if (!fullWidth && size && size !== 'none') vars.push(`--ct-max: ${size}`);
+		if (gutter) vars.push(`--container-gutter: ${gutter}`);
+		if (fullWidth && inset) {
+			const [left, right = left] = inset.trim().split(/\s+/);
+			vars.push(`--ct-inset-l: ${left}`, `--ct-inset-r: ${right}`);
+		}
+		return vars.length ? vars.join('; ') : undefined;
+	});
 </script>
 
 <svelte:element
@@ -33,25 +53,46 @@
 	data-tsu="Container"
 	class="container ct {klass}"
 	class:pad
+	class:none={size === 'none'}
+	class:start={align === 'start'}
 	class:full={fullWidth}
-	style={!fullWidth && size ? `max-width: ${size}` : undefined}
+	{style}
 	{...rest}
 >
 	{@render children?.()}
 </svelte:element>
 
 <style>
+	.ct {
+		--container-gutter: var(--sp-4);
+		width: 100%;
+		max-width: var(--ct-max, var(--content-max));
+		margin-inline: auto;
+		padding-inline: max(var(--container-gutter), var(--safe-left))
+			max(var(--container-gutter), var(--safe-right));
+	}
+
+	.ct.none {
+		max-width: none;
+	}
+
+	.ct.start {
+		margin-inline: 0;
+	}
+
 	.ct.pad {
 		padding-top: var(--sp-6);
 		padding-bottom: var(--sp-12);
 	}
 
-	/* Break out of any centered ancestor to span the full viewport width.
+	/* Break out of any centered ancestor to span the viewport (minus `inset`).
 	   `margin-inline: calc(50% - 50vw)` pulls each edge out to the viewport,
 	   keeping the element in normal flow (no transform/overflow side-effects). */
 	.ct.full {
+		--ct-inset-l: 0px;
+		--ct-inset-r: 0px;
 		max-width: none;
-		width: 100vw;
-		margin-inline: calc(50% - 50vw);
+		width: calc(100vw - var(--ct-inset-l) - var(--ct-inset-r));
+		margin-inline: calc(50% - 50vw + var(--ct-inset-l)) calc(50% - 50vw + var(--ct-inset-r));
 	}
 </style>

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

@@ -1,11 +1,19 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'main' | 'section' | 'article';
-    /** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-    size?: string;
+    /** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+    size?: string | 'none';
+    /** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+    gutter?: string;
+    /** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+    align?: 'center' | 'start';
     pad?: boolean;
-    /** Break out to the full viewport width, ignoring `size`/--content-max. */
+    /** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+     *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
     fullWidth?: boolean;
+    /** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+     *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+    inset?: string;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/CopyButton.svelte

@@ -13,7 +13,9 @@
 		label = 'Copy',
 		copiedLabel = 'Copied',
 		variant = 'ghost',
-		showLabel = true,
+		showLabel,
+		box,
+		hitArea = 'auto',
 		resetMs = 1500,
 		class: klass = ''
 	}: {
@@ -22,11 +24,16 @@
 		label?: string;
 		copiedLabel?: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		/** Defaults to true, or false when `box` makes it icon-only. */
 		showLabel?: boolean;
+		/** Shared square box scale (`--box-xs/sm/md/lg`): a square icon-only copy control. */
+		box?: 'xs' | 'sm' | 'md' | 'lg';
+		hitArea?: 'auto' | 'compact';
 		resetMs?: number;
 		class?: string;
 	} = $props();
 
+	const labelShown = $derived(showLabel ?? box === undefined);
 	let copied = $state(false);
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -46,12 +53,14 @@
 <Button
 	data-tsu="CopyButton"
 	{variant}
+	{box}
+	{hitArea}
 	class={klass}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
 	<Icon name={copied ? 'check' : 'copy'} />
-	{#if showLabel}<span>{copied ? copiedLabel : label}</span>{/if}
+	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>