@dorsk/tsumikit 0.9.3 → 0.9.5

package/dist/components/atoms/Badge.svelte

@@ -16,6 +16,7 @@
 		size = 'md',
 		mono = false,
 		uppercase = false,
+		border = true,
 		active = false,
 		removable = false,
 		onremove,
@@ -29,6 +30,9 @@
 		mono?: boolean;
 		// Uppercase, letter-spaced label — for status tags/eyebrows.
 		uppercase?: boolean;
+		// Borderless "soft" variant: tone-tinted fill pill with no ring. The
+		// default (`true`) keeps the outlined look for backwards compatibility.
+		border?: boolean;
 		// Interactive "on" state for a toggle/count badge (`as="button"`): fills the
 		// pill with its tone instead of just tinting the border.
 		active?: boolean;
@@ -51,6 +55,7 @@
 	class:badge-sm={size === 'sm'}
 	class:mono
 	class:uppercase
+	class:borderless={!border}
 	class:active
 	class:interactive={as === 'button'}
 	{...rest}
@@ -109,6 +114,11 @@
 		border-color: color-mix(in srgb, var(--info) 40%, transparent);
 		background: color-mix(in srgb, var(--info) 12%, transparent);
 	}
+	/* Soft variant: drop the ring, keep the tinted fill. Transparent (not
+	   `border: 0`) so layout/baseline matches the outlined default exactly. */
+	.borderless {
+		border-color: transparent;
+	}
 	.mono {
 		font-family: var(--font-mono);
 		font-weight: var(--fw-normal);

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

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     size?: 'sm' | 'md';
     mono?: boolean;
     uppercase?: boolean;
+    border?: boolean;
     active?: boolean;
     removable?: boolean;
     onremove?: (e: MouseEvent) => void;

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.3",
+  "version": "0.9.5",
   "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",