# MenuSeparator

A non-interactive separator between groups of menu items.

## Usage

Use inside `MenuList`.
```svelte
<MenuList>
  <MenuSeparator {...props} />
</MenuList>
```

## Anatomy

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

```svelte
<div class="whole" {...rest} role="separator" aria-orientation={ariaOrientation}></div>
```

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it. `ariaOrientation` is ARIA-only: by default a vertical menu renders a horizontal separator, and a horizontal menu renders a vertical separator.

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `ariaOrientation` | `<enum>` | - | ARIA-only orientation; by default inferred opposite to the containing `MenuList` orientation |
| `attach` | `Attachment` | - | Svelte attachment on the root separator |
| `element` | `HTMLDivElement` | - | Bindable root element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Separator variant |
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-separator`

## Behavior

When embedded in `MenuList`, `variant` defaults to the menu's and `styling` falls back to it. `ariaOrientation` is ARIA-only: by default a vertical menu renders a horizontal separator, and a horizontal menu renders a vertical separator.

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Separator (`whole` `<div>`): `role="separator"` and `aria-orientation`.

`aria-orientation` defaults from the enclosing `MenuList` orientation, or from the `ariaOrientation` prop when supplied.

## Exports

### Types

```ts
interface MenuSeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-orientation"> {
  ariaOrientation?: "horizontal" | "vertical"; // inferred from MenuList orientation when absent
  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-orientation are component-owned
}
type MenuSeparatorReqdProps = never;
type MenuSeparatorBindProps = "element";
```

### Others

No additional exports are available.

## Examples

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

### Basic

**Code**

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

  const childStyle1 = {
    whole: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
  };
  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",
  };
  const styling = {
    whole: "my-1 border-t border-gray-200 dark:border-gray-800",
  };
</script>

<MenuList styling={childStyle1}>
  <MenuItem styling={childStyle2}>New file</MenuItem>
  <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Archive</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Delete</MenuItem>
</MenuList>
```
### With Interactive Variant

**Code**

```svelte src=MenuSeparatorPract.svelte
<script lang="ts">
  import { MenuItem, MenuList, MenuSeparator } 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: "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 variantStyle3 = {
    neutral: "border-gray-200 dark:border-gray-800",
    active: "border-teal-200 dark:border-teal-900",
    inactive: "border-red-200 dark:border-red-900",
    blue: "border-blue-200 dark:border-blue-900",
    yellow: "border-yellow-200 dark:border-yellow-900",
    sky: "border-sky-200 dark:border-sky-900",
  };
  const childStyle1 = {
    whole: {
      base: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const childStyle2 = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm focus:outline-hidden",
      ...variantStyle2,
    },
  };
  const styling = {
    whole: {
      base: "my-1 border-t",
      ...variantStyle3,
    },
  };
</script>

<MenuList {variant} styling={childStyle1}>
  <MenuItem styling={childStyle2}>New file</MenuItem>
  <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Archive</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Delete</MenuItem>
</MenuList>
```