---

## SegmentGroup
Segment control with an animated sliding indicator for single selection; collapses to a vertical radio-style stack when its row can't fit the available width.
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
- variant: default, text (default: default)
- size: lg, md, sm (default: md)
- 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. An `aria-label` attribute is used when this is unset. |
| children | `Snippet` | no |  | Segment items to render. Must be SegmentItem components. |
| class | `string` | no |  | Extra classes merged onto the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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 preset applied to each segment item (per-item via context). Only applies while the item is not disabled. 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<Exclude<SegmentGroupSlots, 'item'>, string>>` | no |  | Per-slot class overrides merged with tv() styles.  `item` is deliberately absent: the group renders only the track and the indicator, so an `item` entry here would type-check and then do nothing. It belongs on each `SegmentItem`, which owns that slot. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. |
| value | `string` | no |  | Currently selected value. Supports `bind:value` for two-way binding. |
| variant | `'default' | 'text'` | no | default | Controls the visual style and presentation of the SegmentGroup. Determines the component's visual treatment. Available options: default, text. |
| 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. |
| fullWidth | `'true'` | no | false | Controls the fullWidth behavior and appearance of the SegmentGroup component. Available options: true. |
| tier | `'commit' | 'modify'` | no | commit | Selects the semantic radius tier of the SegmentGroup — the shape family it belongs to (`--radius-commit`/`-modify`/`-contain`/`-bridge`). Shape is retuned per family in your theme, so this picks the family rather than a pixel value. Available options: commit, modify. |

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

### Types
```ts
interface RegisteredSegment {
element: HTMLElement;
  isDisabled: () => boolean;
}
```

```ts
interface SegmentGroupContext {
registerItem: (value: string, element: HTMLElement, isDisabled: () => boolean) => () => void;
  selectItem: (value: string) => void;
  isActive: (value: string) => boolean;
  isTabStop: (value: string) => boolean;
  readonly size: NonNullable<SegmentGroupVariants['size']>;
  readonly variant: NonNullable<SegmentGroupVariants['variant']>;
  readonly tier: InteractiveTier;
  readonly disabled: boolean;
  readonly unstyled: boolean;
  readonly mint: MintProp;
}
```

```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type InteractiveTier = 'commit' | 'modify'
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`base`, `indicator`, `item`