# Resizable Item

A passive panel slot inside a resizable layout — carries size, min, max, locked, and hidden attributes that the parent kai-resizable reads to lay out and constrain each panel.

<p class="kai-tag-sub">kai-resizable-item</p>

A passive panel slot that carries layout config for its enclosing `<kai-resizable>` — set `size`, `min`, `max`, `locked`, or `hidden` as attributes and the parent handles the rest.

## Preview

> **tip:** 
Use `<kai-resizable-item>` as a direct child of `<kai-resizable>` to define each panel. Give panels with a natural default width an explicit `size` (e.g. a sidebar at `"260px"`); leave `size` off the main content area so it fills remaining space. Use `locked` for chrome panels that must never resize, and toggle `hidden` to collapse a panel on demand.

## Usage

`<kai-resizable-item>` has no standalone rendering — always place it inside `<kai-resizable>`:

```html
<kai-resizable orientation="horizontal" style="display:block;height:400px">
  <kai-resizable-item size="260px" min="160px" locked>
    <!-- sidebar content -->
  </kai-resizable-item>
  <kai-resizable-item>
    <!-- main content fills remaining space -->
  </kai-resizable-item>
  <kai-resizable-item size="35%" min="200px">
    <!-- preview / inspector pane -->
  </kai-resizable-item>
</kai-resizable>

<script type="module">

</script>
```

- **`size`** — initial main-axis size: `"280px"` or `"25%"`. Omit for a flexible panel (`flex: 1 1 0%`).
- **`min` / `max`** — drag bounds in px or %, e.g. `min="120px"`, `max="50%"`.
- **`locked`** — fixes the panel; adjacent dividers become non-draggable separators.
- **`hidden`** — removes the panel and its divider; remaining panels reflow. Toggle via JS to collapse/restore.

Resize events (`kai-change`, `kai-maximize-change`) fire on the parent `<kai-resizable>`, not the item. See the [Resizable](/components/resizable) page for the full event reference.

## Examples

### Flexible Panel

No `size` — stretches to fill whatever space siblings leave. Right choice for the primary content area.

### Sized Panel

`size="260px"` sets the initial width. The user can still drag to resize unless `locked` is also set.

### Locked Panel

`locked` fixes the panel at its `size` — adjacent dividers become non-draggable. Use for nav sidebars and tool panels.

## Slots

## Props

## Composed from