## `<w-box>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| bleed | `boolean` | `false` | Makes the box bleed to the container edge. |
| bordered | `boolean` | `false` | Shows the box as a bordered surface. |
| info | `boolean` | `false` | Shows the box with information styling. |
| neutral | `boolean` | `false` | Shows the box with neutral styling. |
| role | `string` | `"region"` | ARIA role for the box wrapper. |

### Property Details

#### bleed

Makes the box bleed to the container edge.
Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.

- Type: `boolean`
- Default: `false`

#### bordered

Shows the box as a bordered surface.
Use this when the content needs a clear visual boundary from the surrounding page.

- Type: `boolean`
- Default: `false`

#### info

Shows the box with information styling.
Use this for supporting informational content that should be visually separated from the surrounding page.

- Type: `boolean`
- Default: `false`

#### neutral

Shows the box with neutral styling.
Use this for quiet grouped content that needs a background without strong emphasis.

- Type: `boolean`
- Default: `false`

#### role

ARIA role for the box wrapper.
Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.

- Type: `string`
- Default: `"region"`