src/shared/ui/Button/ButtonGroup.svelte

@@ -0,0 +1,33 @@
+<!--
+    Component: SwissButtonGroup
+    Wraps SwissButtons in a warm-surface pill with a 1px gap and subtle border.
+    Use for segmented controls, view toggles, or any mutually exclusive button set.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    class?: string;
+}
+
+let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'flex items-center gap-1 p-1',
+        'bg-surface dark:bg-dark-bg',
+        'border border-black/5 dark:border-white/10',
+        'rounded-none',
+        'transition-colors duration-500',
+        className,
+    )}
+    {...rest}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>