@dorsk/tsumikit 0.9.4 → 0.9.6

package/dist/components/atoms/Card.svelte

@@ -19,6 +19,7 @@
 		tap = false,
 		as = 'div',
 		padding = 'md',
+		surface = 'base',
 		stacked = false,
 		stackTone = 'neutral',
 		stackY = 8,
@@ -31,6 +32,7 @@
 		tap?: boolean;
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
 		padding?: 'none' | 'sm' | 'md' | 'lg';
+		surface?: 'base' | 'raised' | 'sunken';
 		stacked?: boolean;
 		stackTone?: Tone;
 		stackY?: number;
@@ -53,6 +55,8 @@
 	class:pad-none={padding === 'none'}
 	class:pad-sm={padding === 'sm'}
 	class:pad-lg={padding === 'lg'}
+	class:surface-raised={surface === 'raised'}
+	class:surface-sunken={surface === 'sunken'}
 	class:card-tap={tap}
 	class:card-stacked={stacked}
 	class:stack-ok={stacked && stackTone === 'ok'}
@@ -72,6 +76,15 @@
 		border-radius: var(--r-lg);
 		padding: var(--sp-4);
 	}
+	/* Theme-aware surface shade, selected by prop so it adapts across themes
+	   instead of being overridden with app-level :global hacks. `base` is the
+	   default (.card already paints --bg-elevated). */
+	.surface-raised {
+		background: var(--surface);
+	}
+	.surface-sunken {
+		background: var(--bg-elevated-2);
+	}
 	.pad-none {
 		padding: 0;
 	}

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     tap?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
     padding?: 'none' | 'sm' | 'md' | 'lg';
+    surface?: 'base' | 'raised' | 'sunken';
     stacked?: boolean;
     stackTone?: Tone;
     stackY?: number;

package/dist/components/molecules/Metric.svelte

@@ -22,6 +22,9 @@
 		tone = 'neutral',
 		// Tint the value itself with the tone (not just the chip).
 		tintValue = false,
+		// Theme-aware surface shade, forwarded to the composed Card so tiles can
+		// opt into the same shade as sibling panels (no app-level :global override).
+		surface = 'base',
 		class: klass = '',
 		// Raw SVG markup for a custom icon — passed through to `Icon` so any glyph
 		// outside the registry can fill the chip.
@@ -35,6 +38,7 @@
 		icon?: IconName;
 		tone?: Tone;
 		tintValue?: boolean;
+		surface?: 'base' | 'raised' | 'sunken';
 		class?: string;
 		iconChildren?: Snippet;
 		[key: string]: unknown;
@@ -44,6 +48,7 @@
 <Card
 	data-tsu="Metric"
 	class="metric metric-{tone} {tintValue ? 'metric-tint' : ''} {klass}"
+	{surface}
 	{...rest}
 >
 	<div class="metric-head">

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

@@ -9,6 +9,7 @@ type $$ComponentProps = {
     icon?: IconName;
     tone?: Tone;
     tintValue?: boolean;
+    surface?: 'base' | 'raised' | 'sunken';
     class?: string;
     iconChildren?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/SegmentedControl.svelte

@@ -31,6 +31,9 @@
 		variant = 'pill',
 		size = 'md',
 		label = 'Options',
+		// `mobile` hides segment labels below the mobile breakpoint, collapsing
+		// labelled segments to centered icon-only squares (aria-label preserved).
+		collapseLabels = 'never',
 		class: klass = '',
 		// Custom rendering per option (overrides the built-in label/count/icon).
 		option: optionSnippet
@@ -40,6 +43,7 @@
 		variant?: 'pill' | 'icon';
 		size?: 'sm' | 'md';
 		label?: string;
+		collapseLabels?: 'never' | 'mobile';
 		class?: string;
 		option?: Snippet<[SegmentOption, boolean]>;
 	} = $props();
@@ -94,6 +98,7 @@
 	aria-label={label}
 	tabindex="-1"
 	class="seg seg-{variant} seg-{size} {klass}"
+	class:seg-collapse-mobile={collapseLabels === 'mobile'}
 	data-tsu="SegmentedControl"
 	{onkeydown}
 >
@@ -107,6 +112,7 @@
 			aria-label={variant === 'icon' && !o.label ? o.value : o.label}
 			tabindex={selected ? 0 : -1}
 			class="seg-item"
+			class:has-label={!!o.label}
 			class:selected
 			disabled={o.disabled}
 			onclick={() => select(o.value)}
@@ -169,6 +175,32 @@
 		padding: 0.25rem;
 		font-size: var(--fs-sm);
 	}
+	/* A labelled icon segment renders <icon><label>, so it must keep the normal
+	   icon/label gap and the roomier pill padding — only true icon-only segments
+	   collapse to the square gap:0 layout above. */
+	.seg-icon .seg-item.has-label {
+		gap: var(--sp-2);
+		padding: 0.3rem var(--sp-3);
+	}
+	.seg-icon.seg-sm .seg-item.has-label {
+		padding: 0.2rem var(--sp-2);
+	}
+
+	/* collapseLabels='mobile': below the breakpoint, drop the label text and
+	   tighten labelled segments back to a square icon button. The aria-label on
+	   the button preserves the accessible name. */
+	@media (max-width: 47.999rem) {
+		.seg-collapse-mobile .seg-item.has-label .seg-label {
+			display: none;
+		}
+		.seg-collapse-mobile .seg-item.has-label {
+			gap: 0;
+			padding: 0.35rem;
+		}
+		.seg-collapse-mobile.seg-sm .seg-item.has-label {
+			padding: 0.25rem;
+		}
+	}
 
 	.seg-item:hover:not(:disabled):not(.selected) {
 		color: var(--text);

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

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     variant?: 'pill' | 'icon';
     size?: 'sm' | 'md';
     label?: string;
+    collapseLabels?: 'never' | 'mobile';
     class?: string;
     option?: Snippet<[SegmentOption, boolean]>;
 };

package/package.json

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