---

## SegmentGroup
Inline segment control with animated sliding indicator for single-selection scenarios.
Compact mode/view switcher with smooth animation.

**Import:** `import { SegmentGroup } from '@urbicon-ui/blocks';`

### Examples
```svelte
<SegmentGroup bind:value={view}>
  <SegmentItem value="list">List</SegmentItem>
  <SegmentItem value="grid">Grid</SegmentItem>
  <SegmentItem value="board">Board</SegmentItem>
</SegmentGroup>
```

### Variants
- size: lg, md, sm (default: md)
- appearance: default, text (default: default)
- disabled: true (default: false)
- fullWidth: true (default: false)
- tier: commit, modify (default: commit)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...SegmentGroupVariants | `VariantProps` | no |  | Styling variants from SegmentGroupVariants |
| ariaLabel | `string` | no |  | Accessible label for the segment group. |
| children | `Snippet` | no |  | Segment items to render. Must be SegmentItem components. |
| class | `string` | no |  | Extra classes merged onto the root element. |
| collapseOnOverflow | `boolean` | no | true | When the segments can't fit their available width, collapse the horizontal track to a vertical radio-style stack (all options stay visible) instead of overflowing. Triggered by real measured overflow (ResizeObserver), not a viewport breakpoint, so it only engages when an instance genuinely doesn't fit — a 2-segment switcher that fits stays horizontal. Set `false` to keep the track horizontal (it still won't push the page wider than its parent). |
| disabled | `boolean` | no | false | Prevent interaction and dim the control. |
| mint | `MintProp` | no | 'none' | Micro-interaction effect applied to each segment item (per-item, not the container). Accepts a preset name, an array of names, or configured mint objects. |
| onValueChange | `(value: string) => void` | no |  | Fires after the selected value changes. Receives the new value. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ SegmentGroup: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| slotClasses | `Partial<Record<SegmentGroupSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. |
| value | `string` | no |  | Currently selected value. Supports `bind:value` for two-way binding. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the SegmentGroup. Affects the component's physical footprint. Available options: lg, md, sm. |
| appearance | `'default' | 'text'` | no | default | Controls the appearance behavior and appearance of the SegmentGroup component. Available options: default, text. |
| fullWidth | `'true'` | no | false | Controls the fullWidth behavior and appearance of the SegmentGroup component. Available options: true. |
| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the SegmentGroup component. Available options: commit, modify. |

Inherited from:
- SegmentGroupVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)