# resizeHandle

> Pointer-driven resize for one handle of a Resizable panel group: turns a pointer press into a `ResizeSession`, feeds it pointer position along the group's axis, and mirrors solved panel sizes back as CSS custom properties.

```ts
import { resizeHandle } from "@sdxc/ui/mixins";
```

Adds pointer-driven resizing to one handle of a Resizable panel group,
sharing `session` with every other handle in the group; unmounting only
cancels a handle's own in-progress drag, leaving a sibling's drag alone.

## Signature

```ts
resizeHandle(axis: ResizableAxis, session: ResizeSession): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `axis` | `"horizontal" \| "vertical"` | Axis the enclosing group resizes along. |
| `session` | `ResizeSession` | Resize session shared by every handle in the same panel group. |

## Examples

```tsx
let session = new ResizeSession();
<div data-resizable-group>
  <section data-resizable-panel id="sidebar">Sidebar</section>
  <div
    data-resizable-handle
    role="separator"
    aria-orientation="vertical"
    aria-label={resizeSidebarLabel}
    tabIndex={0}
    mix={resizeHandle("horizontal", session)}
  />
  <section data-resizable-panel id="content">Content</section>
</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### ResizableLayoutChangeEvent

Dispatched on a Resizable group's host by resizeHandle once a
drag ends by releasing over the handle, carrying every panel's settled
size; a cancelled drag reverts the panels instead of dispatching this.

#### Signature

```ts
new ResizableLayoutChangeEvent(panels: readonly ResizeSession.Panel[])
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `panels` | `readonly readonly ResizeSession.Panel[]` | Every panel's settled size, min, and max, in group order. |

### RESIZABLE_GROUP_ATTRIBUTE

Attribute a Resizable panel group's own host element carries.
`resizeHandle()` walks up to the nearest ancestor carrying it to find the
group to coordinate, so a nested group's handles never reach outside it.

#### Signature

```ts
const RESIZABLE_GROUP_ATTRIBUTE = "data-resizable-group"
```

### RESIZABLE_PANEL_ATTRIBUTE

Attribute every panel in a Resizable group carries as a direct child of
the group's host element. `resizeHandle()` reads matching direct children,
in document order, as the panel list `ResizeSession`'s `panels` indexes by.

#### Signature

```ts
const RESIZABLE_PANEL_ATTRIBUTE = "data-resizable-panel"
```

### RESIZABLE_HANDLE_ATTRIBUTE

Attribute every handle in a Resizable group carries as a direct child of
the group's host element. `resizeHandle()` reads matching direct children,
in document order, to resolve which pair of panels its host sits between.

#### Signature

```ts
const RESIZABLE_HANDLE_ATTRIBUTE = "data-resizable-handle"
```

### RESIZABLE_PANEL_MIN_ATTRIBUTE

Attribute a panel optionally carries to set the smallest percentage of the
group's main-axis size it may shrink to, as a plain number (`"20"`, not
`"20%"`). Omitted entirely, a panel is free to shrink to 0.

#### Signature

```ts
const RESIZABLE_PANEL_MIN_ATTRIBUTE = "data-resizable-min"
```

### RESIZABLE_PANEL_MAX_ATTRIBUTE

Attribute a panel optionally carries to set the largest percentage of the
group's main-axis size it may grow to, as a plain number (`"80"`, not
`"80%"`). Omitted entirely, a panel is free to grow to 100.

#### Signature

```ts
const RESIZABLE_PANEL_MAX_ATTRIBUTE = "data-resizable-max"
```

### RESIZABLE_PANEL_SIZE_PROPERTY

CSS custom property `resizeHandle()` writes on every panel with its
current resolved size as a percentage (`"42.5%"`) of the group's
main-axis size, letting a panel's own styles read it back directly.

#### Signature

```ts
const RESIZABLE_PANEL_SIZE_PROPERTY = "--ui-resizable-panel-size"
```

### ResizableAxis

Axis a Resizable panel group lays its panels out along, and the direction
`resizeHandle()` reads pointer movement on: `"horizontal"` drags
left/right between side-by-side panels; `"vertical"` drags up/down.

#### Signature

```ts
type ResizableAxis = "horizontal" | "vertical"
```

One of `"horizontal"`, `"vertical"`.