@dorsk/tsumikit 0.32.0 → 0.33.0

package/dist/components/molecules/Menu.svelte

@@ -14,21 +14,52 @@
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
 	// (inherited from the native popover).
-	import type { Snippet } from 'svelte';
+	import type { ComponentProps, Snippet } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
 
+	type PopoverProps = ComponentProps<typeof Popover>;
+	type TriggerChrome = Pick<
+		PopoverProps,
+		| 'variant'
+		| 'tone'
+		| 'size'
+		| 'box'
+		| 'control'
+		| 'block'
+		| 'triggerClass'
+		| 'bare'
+		| 'hitArea'
+		| 'disabled'
+		| 'gap'
+		| 'onopen'
+		| 'onclose'
+	>;
+
 	let {
 		label,
 		items,
 		trigger,
-		placement = 'bottom-start'
+		placement = 'bottom-start',
+		variant,
+		tone,
+		size,
+		box,
+		control,
+		block,
+		triggerClass,
+		bare,
+		hitArea,
+		disabled,
+		gap,
+		onopen,
+		onclose
 	}: {
 		label: string;
 		items: MenuItem[];
 		trigger: Snippet;
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-	} = $props();
+	} & TriggerChrome = $props();
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
@@ -66,7 +97,27 @@
 	}
 </script>
 
-<Popover {label} {placement} {trigger} onopen={() => queueMicrotask(() => focusAt(0))}>
+<Popover
+	{label}
+	{placement}
+	{trigger}
+	{variant}
+	{tone}
+	{size}
+	{box}
+	{control}
+	{block}
+	{triggerClass}
+	{bare}
+	{hitArea}
+	{disabled}
+	{gap}
+	{onclose}
+	onopen={() => {
+		queueMicrotask(() => focusAt(0));
+		onopen?.();
+	}}
+>
 	<div bind:this={listEl} role="menu" aria-label={label} class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button

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

@@ -5,13 +5,16 @@ export interface MenuItem {
     danger?: boolean;
     disabled?: boolean;
 }
-import type { Snippet } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import Popover from './Popover.svelte';
+type PopoverProps = ComponentProps<typeof Popover>;
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
 type $$ComponentProps = {
     label: string;
     items: MenuItem[];
     trigger: Snippet;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-};
+} & TriggerChrome;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/molecules/SegmentedControl.svelte

@@ -35,7 +35,11 @@
 		label = 'Options',
 		// `mobile` hides segment labels below the mobile breakpoint, collapsing
 		// labelled segments to centered icon-only squares (aria-label preserved).
+		// `container` does the same when the nearest size container is at most
+		// 35rem wide (the breakpoint is fixed: `@container` cannot read a var).
 		collapseLabels = 'never',
+		scroll = false,
+		block = false,
 		class: klass = '',
 		// Custom rendering per option (overrides the built-in label/count/icon).
 		option: optionSnippet
@@ -48,7 +52,11 @@
 		 *  `control`) so the whole segmented control height-matches its siblings. */
 		control?: boolean;
 		label?: string;
-		collapseLabels?: 'never' | 'mobile';
+		collapseLabels?: 'never' | 'mobile' | 'container';
+		/** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */
+		scroll?: boolean;
+		/** Fill the parent width, sharing it equally between segments. */
+		block?: boolean;
 		class?: string;
 		option?: Snippet<[SegmentOption, boolean]>;
 	} = $props();
@@ -90,6 +98,9 @@
 	class="seg seg-{variant} seg-{size} {klass}"
 	class:seg-control={control}
 	class:seg-collapse-mobile={collapseLabels === 'mobile'}
+	class:collapse-container={collapseLabels === 'container'}
+	class:seg-scroll={scroll}
+	class:seg-block={block}
 	data-tsu="SegmentedControl"
 	{onkeydown}
 >
@@ -132,6 +143,28 @@
 	.seg-icon {
 		border-radius: var(--r-md);
 	}
+	.seg-scroll {
+		flex: 1 0 100%;
+		flex-wrap: nowrap;
+		max-width: 100%;
+		overflow-x: auto;
+		scrollbar-width: none;
+		-webkit-overflow-scrolling: touch;
+	}
+	.seg-scroll::-webkit-scrollbar {
+		display: none;
+	}
+	.seg-scroll .seg-item {
+		flex: none;
+	}
+	.seg-block {
+		display: flex;
+		width: 100%;
+	}
+	.seg-block .seg-item {
+		flex: 1 1 0;
+		justify-content: center;
+	}
 
 	.seg-item {
 		display: inline-flex;
@@ -209,6 +242,18 @@
 			padding: 0.25rem;
 		}
 	}
+	@container (max-width: 35rem) {
+		.collapse-container .seg-item.has-label .seg-label {
+			display: none;
+		}
+		.collapse-container .seg-item.has-label {
+			gap: 0;
+			padding: 0.35rem;
+		}
+		.collapse-container.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

@@ -19,7 +19,11 @@ type $$ComponentProps = {
      *  `control`) so the whole segmented control height-matches its siblings. */
     control?: boolean;
     label?: string;
-    collapseLabels?: 'never' | 'mobile';
+    collapseLabels?: 'never' | 'mobile' | 'container';
+    /** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */
+    scroll?: boolean;
+    /** Fill the parent width, sharing it equally between segments. */
+    block?: boolean;
     class?: string;
     option?: Snippet<[SegmentOption, boolean]>;
 };

package/package.json

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