# MenuGroup

A labeled group for related items inside a `MenuList`.

## Usage

Use inside `MenuList`, grouping `MenuItem`s.
```svelte
<MenuList>
  <MenuGroup label="Group" {...props}>
    <MenuItem {...props}>Item</MenuItem>
  </MenuGroup>
</MenuList>
```

## Anatomy

The `class` attribute values represent part names. Other attributes represent their corresponding props.

```svelte
<div class="whole" {...rest} role="group" aria-labelledby={uid}>
  <div id={uid} class="label">{label}</div>
  {children}
</div>
```

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it; local `styling` wins.

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `children*` | `Snippet` | - | Grouped `MenuItem`s; receives the variant as its argument |
| `label*` | `Snippet` | - | Required accessible name rendered in the `label` part and referenced by `aria-labelledby` |
| `attach` | `Attachment` | - | Svelte attachment on the root group |
| `element` | `HTMLDivElement` | - | Bindable root element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Group variant |
`*` required. Other `HTMLAttributes` are passed to `<div>` via rest props; `class` is merged onto the root.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-menu-group`

## Behavior

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it; local `styling` wins.

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Group (`whole` `<div>`): `role="group"` and `aria-labelledby` pointing to the rendered label part.

Provide the required `label` prop for the group's accessible name; the component renders it and wires it with `aria-labelledby`.

## Exports

### Types

```ts
interface MenuGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
  children: Snippet<[string]>; // Snippet<[variant]>; grouped MenuItems
  label: string | Snippet<[string]>; // required accessible name, rendered and referenced by aria-labelledby
  attach?: Attachment<HTMLDivElement>;
  element?: HTMLDivElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other HTMLAttributes are passed to <div> via ...rest; `class` is merged onto root
  // role and aria-labelledby are component-owned
}
type MenuGroupReqdProps = "children" | "label";
type MenuGroupBindProps = "element";
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=MenuGroupBasic.svelte
<script lang="ts">
  import { MenuGroup, MenuItem, MenuList } from "svseeds";

  const childStyle1 = {
    whole: "flex min-w-48 flex-col gap-2 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
  };
  const styling = {
    whole: "space-y-1",
    label: "px-2 py-1 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400",
  };
  const childStyle2 = {
    whole:
      "rounded-sm px-2 py-1 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-hidden dark:hover:bg-gray-800 dark:focus:bg-gray-800",
  };
</script>

<MenuList styling={childStyle1}>
  <MenuGroup label="Project" {styling}>
    <MenuItem styling={childStyle2}>New file</MenuItem>
    <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  </MenuGroup>
  <MenuGroup label="Account" {styling}>
    <MenuItem styling={childStyle2}>Profile</MenuItem>
    <MenuItem styling={childStyle2}>Sign out</MenuItem>
  </MenuGroup>
</MenuList>
```
### With Interactive Variant

**Code**

```svelte src=MenuGroupPract.svelte
<script lang="ts">
  import { MenuGroup, MenuItem, MenuList } from "svseeds";

  let { variant = $bindable() } = $props();
  const variantStyle1 = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const variantStyle2 = {
    neutral: "text-gray-500 dark:text-gray-400",
    active: "text-teal-700 dark:text-teal-300",
    inactive: "text-red-700 dark:text-red-300",
    blue: "text-blue-700 dark:text-blue-300",
    yellow: "text-yellow-700 dark:text-yellow-300",
    sky: "text-sky-700 dark:text-sky-300",
  };
  const variantStyle3 = {
    neutral: "hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
    active: "hover:bg-teal-100 focus:bg-teal-100 dark:hover:bg-teal-900 dark:focus:bg-teal-900",
    inactive: "hover:bg-red-100 focus:bg-red-100 dark:hover:bg-red-900 dark:focus:bg-red-900",
    blue: "hover:bg-blue-100 focus:bg-blue-100 dark:hover:bg-blue-900 dark:focus:bg-blue-900",
    yellow: "hover:bg-yellow-100 focus:bg-yellow-100 dark:hover:bg-yellow-900 dark:focus:bg-yellow-900",
    sky: "hover:bg-sky-100 focus:bg-sky-100 dark:hover:bg-sky-900 dark:focus:bg-sky-900",
  };
  const childStyle1 = {
    whole: {
      base: "flex min-w-48 flex-col gap-2 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const styling = {
    whole: "space-y-1",
    label: {
      base: "px-2 py-1 text-xs font-semibold uppercase",
      ...variantStyle2,
    },
  };
  const childStyle2 = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm focus:outline-hidden",
      ...variantStyle3,
    },
  };
</script>

<MenuList {variant} styling={childStyle1}>
  <MenuGroup label="Project" {styling}>
    <MenuItem styling={childStyle2}>New file</MenuItem>
    <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  </MenuGroup>
  <MenuGroup label="Account" {styling}>
    <MenuItem styling={childStyle2}>Profile</MenuItem>
    <MenuItem styling={childStyle2}>Sign out</MenuItem>
  </MenuGroup>
</MenuList>
```