# Segmentation
> Inter-VLAN policy matrix: select a cell to see its traffic, select it again to cycle Allow, Limit and Block; blocked traffic stops at the gate.
- Element: `<ln-segments>`
- React: `import { LnSegments } from "@/components/lumesec/ln-segments"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-segments.json
- Page: https://elements.lumesec.ai/components/network/segments



Live preview: https://elements.lumesec.ai/view/ln-segments

```html
<ln-segments></ln-segments>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-segments
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/ln-segments.json
```

## Usage

React:

```tsx
import { LnSegments } from "@/components/lumesec/ln-segments";

export function Example() {
  return (
    <LnSegments />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-segments.js"></script>

<ln-segments></ln-segments>
```

## Behaviour

Which network may open connections to which. Select a cell to see its traffic; select it again to cycle Allow, Limit and Block. Blocked traffic stops at the gate.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                                                                | Description                                                                                               |
| -------- | ---------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ from: string, to: string, policy: "allow" \| "limit" \| "block" }` | Fires when a cell's policy changes. `from` is the source network (row) and `to` the destination (column). |

## Keyboard

| Keys                                         | Action                                         |
| -------------------------------------------- | ---------------------------------------------- |
| ArrowLeft / ArrowRight / ArrowUp / ArrowDown | Move the selected cell, skipping the diagonal. |
| Enter / Space                                | Cycle the selected cell: Allow, Limit, Block.  |

## Accessibility

* The matrix has `role="grid"` with `columnheader` and `rowheader` labels and `gridcell` buttons. It uses a roving `tabindex`, so only the selected cell is in the tab order.
* Each cell has `aria-selected` and an `aria-label` such as "Staff to AIOP: Allow".
* The summary line under the lane is `aria-live="polite"` and refreshes its rate every second.
* The lane canvas is `aria-hidden`.
* Reduced motion: traffic pixels and the red flash at the gate are not drawn, and colour transitions in the matrix are removed.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--background`, `--border`, `--card`, `--foreground`, `--input`, `--lumesec`, `--lumesec-success`, `--lumesec-warning` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-border-strong`, `--ui-faint`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-surface` and `--ui-warn`.

## Notes

* Shows six built-in networks (Management, Staff, AIOP, Cameras, IoT, Guest) with a default policy and simulated demand. No attribute selects other data; Staff to AIOP is selected on load.
* Limit caps the flow at 10 Mb/s. Diagonal cells (a network to itself) cannot be changed.
* Uses a container query: below 470px cells show only a colour dot and headers use short names; each cell keeps its `aria-label`.