# Layout types

Pibbl layout is opt-in and immediate-mode. Parents inspect normalized direct-child
styles, resolve finite allocations, and render one child descriptor at a time;
they do not retain drawing commands. Style is local and never cascades.

## AbsoluteStyle

`AbsoluteStyle` is the declared container style for `Absolute`, including its
finite box and the independent `left`/`top` placement vocabulary for children.

## BoxStyle

`BoxStyle` is the shared declared-box vocabulary: dimensions, min/max limits,
padding, and the local inputs needed to resolve a finite box.

## CanvasMeasurementService

`CanvasMeasurementService` supplies the caller-owned Canvas measurement
operation used by pure `measureElement`; it cannot render or acquire runtime
resources.

## Constraints

`Constraints` defines finite minimum and maximum width/height limits for
layout resolution and pure measurement.

## Edges

`Edges` is the normalized finite top/right/bottom/left edge record.

## EdgeValues

`EdgeValues` is the public shorthand accepted for edge values. A scalar applies
to all sides and omitted sides resolve to zero.

## FlexItemStyle

`FlexItemStyle` is the direct-child participation style consumed by a `Flex`
parent; it does not create a CSS cascade.

## FlexProps

`FlexProps` accepts recursive `PibblNode` children for Pibbl's supported Flexbox
subset.

## FlexStyle

`FlexStyle` is the declared container style for `Flex`. Reverse/reordered
flexing, advanced intrinsic sizing, margins, and scrolling are unsupported.

## FlowProps

`FlowProps` accepts recursive `PibblNode` children for sequential flow layout.

## FlowStyle

`FlowStyle` configures the direction, wrapping, and declared box for `Flow`.

## GridItemStyle

`GridItemStyle` is the direct-child placement style consumed by an explicit
`Grid` parent.

## GridProps

`GridProps` accepts recursive `PibblNode` children for explicit-track grid layout.

## GridStyle

`GridStyle` configures the declared box and explicit tracks for `Grid`; CSS
auto-placement and advanced intrinsic sizing are not supported.

## GridTrack

`GridTrack` describes one explicit Grid track in Pibbl's supported subset.

## LayoutBox

`LayoutBox` is the stable readonly child-local allocation available during
render through `useLayoutBox`.

## LayoutDiagnosticContext

`LayoutDiagnosticContext` carries component and algorithm context for a public
layout/style validation failure.

## LayoutDiagnosticInput

`LayoutDiagnosticInput` is the structured public input accepted by
`layoutDiagnostic` to identify property, supplied value, and optional
constraints.

## LayoutItemStyle

`LayoutItemStyle` is the shared direct-child participation vocabulary for
Absolute, Overlay, Flex, and Grid parents.

## Length

`Length` is Pibbl's public numeric/percentage/`"auto"` length vocabulary.
Resolution requires a definite percentage basis when a percentage is used.

## MeasureInput

`MeasureInput` describes an opt-in primitive's pure measurement request.

## MeasureResult

`MeasureResult` is the result of `measureElement` and distinguishes supported
measurement from an unsupported primitive capability.

## OverlayStyle

`OverlayStyle` is the declared shared-allocation style for `Overlay` children.

## Percentage

`Percentage` is the public percentage-length form. It resolves only against a
definite nonnegative reference dimension.

## ResolvedBoxStyle

`ResolvedBoxStyle` is the finite box result with its resolved border/content
geometry after box-style validation.

## Size

`Size` is the finite width/height record used by layout and measurement.

## API details from source

<span id="api-AbsoluteStyle"></span>

### AbsoluteStyle

Supported geometry and presentation properties for Absolute.

```ts
type AbsoluteStyle = BoxStyle & LayoutItemStyle
```

Related API: [AbsoluteStyle](/reference/types/layout/#absolutestyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[Absolute](/reference/components/absolute/)

[View source — packages/core/src/lib/layout/absolute.ts:55](/source/packages/core/src/lib/layout/absolute-ts/#L55)

#### Properties and methods

<span id="api-AbsoluteStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-AbsoluteStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-AbsoluteStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-AbsoluteStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-AbsoluteStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-AbsoluteStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-AbsoluteStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-AbsoluteStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-AbsoluteStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-AbsoluteStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-AbsoluteStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-AbsoluteStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-AbsoluteStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-AbsoluteStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-AbsoluteStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-AbsoluteStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-AbsoluteStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-AbsoluteStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-AbsoluteStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-AbsoluteStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-AbsoluteStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-AbsoluteStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-OverlayStyle"></span>

### OverlayStyle

Supported geometry and presentation properties for Overlay.

```ts
interface OverlayStyle extends BoxStyle, LayoutItemStyle
```

Related API: [OverlayStyle](/reference/types/layout/#overlaystyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[Overlay](/reference/components/overlay/)

[View source — packages/core/src/lib/layout/overlay.ts:38](/source/packages/core/src/lib/layout/overlay-ts/#L38)

#### Properties and methods

<span id="api-OverlayStyle-alignItems"></span>
<details>
<summary>alignItems (optional)</summary>


```ts
alignItems?: OverlayAlignment | undefined
```

Default alignment of children on the cross or block axis. See OverlayAlignment.

[View source — packages/core/src/lib/layout/overlay.ts:40](/source/packages/core/src/lib/layout/overlay-ts/#L40)

</details>

<span id="api-OverlayStyle-justifyItems"></span>
<details>
<summary>justifyItems (optional)</summary>


```ts
justifyItems?: OverlayAlignment | undefined
```

Default inline-axis alignment of grid or overlay children. See OverlayAlignment.

[View source — packages/core/src/lib/layout/overlay.ts:42](/source/packages/core/src/lib/layout/overlay-ts/#L42)

</details>

<span id="api-OverlayStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-OverlayStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-OverlayStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-OverlayStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-OverlayStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-OverlayStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-OverlayStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-OverlayStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-OverlayStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-OverlayStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-OverlayStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-OverlayStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-OverlayStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-OverlayStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-OverlayStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-OverlayStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-OverlayStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-OverlayStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-OverlayStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-OverlayStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-OverlayStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-OverlayStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-FlowProps"></span>

### FlowProps

Authored inputs for Flow, including the declared data and presentation options.

```ts
interface FlowProps extends PibblStructuralEventProps
```

Related API: [FlowProps](/reference/types/layout/#flowprops).

#### See also

[PibblNodeInput](/reference/types/elements-components/#pibblnodeinput)

[Flow](/reference/components/flow/)

[View source — packages/core/src/lib/layout/flow.ts:67](/source/packages/core/src/lib/layout/flow-ts/#L67)

#### Properties and methods

<span id="api-FlowProps-children"></span>
<details>
<summary>children</summary>


```ts
children: PibblNodeInput
```

Related API: [PibblNodeInput](/reference/types/elements-components/#pibblnodeinput).

Descendant content or the callback that supplies it. See PibblNodeInput.

[View source — packages/core/src/lib/layout/flow.ts:69](/source/packages/core/src/lib/layout/flow-ts/#L69)

</details>

<span id="api-FlowStyle"></span>

### FlowStyle

Supported geometry and presentation properties for Flow.

```ts
interface FlowStyle extends BoxStyle, LayoutItemStyle
```

Related API: [FlowStyle](/reference/types/layout/#flowstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[Flow](/reference/components/flow/)

[View source — packages/core/src/lib/layout/flow.ts:48](/source/packages/core/src/lib/layout/flow-ts/#L48)

#### Properties and methods

<span id="api-FlowStyle-direction"></span>
<details>
<summary>direction (optional)</summary>


```ts
direction?: FlowDirection | undefined
```

Direction in which this operation proceeds. See FlowDirection.

[View source — packages/core/src/lib/layout/flow.ts:50](/source/packages/core/src/lib/layout/flow-ts/#L50)

</details>

<span id="api-FlowStyle-wrap"></span>
<details>
<summary>wrap (optional)</summary>


```ts
wrap?: boolean | undefined
```

Whether content may wrap into additional lines. See FlowStyle.

[View source — packages/core/src/lib/layout/flow.ts:52](/source/packages/core/src/lib/layout/flow-ts/#L52)

</details>

<span id="api-FlowStyle-gap"></span>
<details>
<summary>gap (optional)</summary>


```ts
gap?: number | undefined
```

Spacing between adjacent items. See FlowStyle.

[View source — packages/core/src/lib/layout/flow.ts:54](/source/packages/core/src/lib/layout/flow-ts/#L54)

</details>

<span id="api-FlowStyle-lineGap"></span>
<details>
<summary>lineGap (optional)</summary>


```ts
lineGap?: number | undefined
```

Space between wrapped flow lines. See FlowStyle.

[View source — packages/core/src/lib/layout/flow.ts:56](/source/packages/core/src/lib/layout/flow-ts/#L56)

</details>

<span id="api-FlowStyle-alignItems"></span>
<details>
<summary>alignItems (optional)</summary>


```ts
alignItems?: FlowAlignment | undefined
```

Default alignment of children on the cross or block axis. See FlowAlignment.

[View source — packages/core/src/lib/layout/flow.ts:58](/source/packages/core/src/lib/layout/flow-ts/#L58)

</details>

<span id="api-FlowStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-FlowStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-FlowStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-FlowStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-FlowStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-FlowStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-FlowStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-FlowStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-FlowStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-FlowStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-FlowStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-FlowStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-FlowStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-FlowStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-FlowStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-FlowStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-FlowStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-FlowStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-FlowStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-FlowStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-FlowStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-FlowStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-FlexProps"></span>

### FlexProps

Authored inputs for Flex, including the declared data and presentation options.

```ts
interface FlexProps extends PibblStructuralEventProps
```

Related API: [FlexProps](/reference/types/layout/#flexprops).

#### See also

[PibblNodeInput](/reference/types/elements-components/#pibblnodeinput)

[Flex](/reference/components/flex/)

[View source — packages/core/src/lib/layout/flex.ts:89](/source/packages/core/src/lib/layout/flex-ts/#L89)

#### Properties and methods

<span id="api-FlexProps-children"></span>
<details>
<summary>children</summary>


```ts
children: PibblNodeInput
```

Related API: [PibblNodeInput](/reference/types/elements-components/#pibblnodeinput).

Descendant content or the callback that supplies it. See PibblNodeInput.

[View source — packages/core/src/lib/layout/flex.ts:91](/source/packages/core/src/lib/layout/flex-ts/#L91)

</details>

<span id="api-FlexStyle"></span>

### FlexStyle

Supported geometry and presentation properties for Flex.

```ts
interface FlexStyle extends BoxStyle, LayoutItemStyle
```

Related API: [FlexStyle](/reference/types/layout/#flexstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[Flex](/reference/components/flex/)

[View source — packages/core/src/lib/layout/flex.ts:61](/source/packages/core/src/lib/layout/flex-ts/#L61)

#### Properties and methods

<span id="api-FlexStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-FlexStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-FlexStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-FlexStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-FlexStyle-flexDirection"></span>
<details>
<summary>flexDirection (optional)</summary>


```ts
flexDirection?: FlexDirection | undefined
```

The main axis along which flex children are placed. See FlexDirection.

[View source — packages/core/src/lib/layout/flex.ts:63](/source/packages/core/src/lib/layout/flex-ts/#L63)

</details>

<span id="api-FlexStyle-flexWrap"></span>
<details>
<summary>flexWrap (optional)</summary>


```ts
flexWrap?: FlexWrap | undefined
```

Whether children may wrap onto additional flex lines. See FlexWrap.

[View source — packages/core/src/lib/layout/flex.ts:65](/source/packages/core/src/lib/layout/flex-ts/#L65)

</details>

<span id="api-FlexStyle-justifyContent"></span>
<details>
<summary>justifyContent (optional)</summary>


```ts
justifyContent?: MainAlignment | undefined
```

Distribution of children along the main axis. See MainAlignment.

[View source — packages/core/src/lib/layout/flex.ts:67](/source/packages/core/src/lib/layout/flex-ts/#L67)

</details>

<span id="api-FlexStyle-alignItems"></span>
<details>
<summary>alignItems (optional)</summary>


```ts
alignItems?: CrossAlignment | undefined
```

Default alignment of children on the cross or block axis. See CrossAlignment.

[View source — packages/core/src/lib/layout/flex.ts:69](/source/packages/core/src/lib/layout/flex-ts/#L69)

</details>

<span id="api-FlexStyle-alignContent"></span>
<details>
<summary>alignContent (optional)</summary>


```ts
alignContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined
```

Distribution of wrapped flex lines within the available cross-axis space. See
CrossAlignment, MainAlignment.

[View source — packages/core/src/lib/layout/flex.ts:74](/source/packages/core/src/lib/layout/flex-ts/#L74)

</details>

<span id="api-FlexStyle-gap"></span>
<details>
<summary>gap (optional)</summary>


```ts
gap?: number | undefined
```

Spacing between adjacent items. See FlexStyle.

[View source — packages/core/src/lib/layout/flex.ts:76](/source/packages/core/src/lib/layout/flex-ts/#L76)

</details>

<span id="api-FlexStyle-rowGap"></span>
<details>
<summary>rowGap (optional)</summary>


```ts
rowGap?: number | undefined
```

Space between adjacent rows or items on the row axis. See FlexStyle.

[View source — packages/core/src/lib/layout/flex.ts:78](/source/packages/core/src/lib/layout/flex-ts/#L78)

</details>

<span id="api-FlexStyle-columnGap"></span>
<details>
<summary>columnGap (optional)</summary>


```ts
columnGap?: number | undefined
```

Space between adjacent columns or items on the column axis. See FlexStyle.

[View source — packages/core/src/lib/layout/flex.ts:80](/source/packages/core/src/lib/layout/flex-ts/#L80)

</details>

<span id="api-FlexStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-FlexStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-FlexStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-FlexStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-FlexStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-FlexStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-FlexStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-FlexStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-FlexStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-FlexStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-FlexStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-FlexStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-FlexStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-FlexStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-FlexStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-FlexStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-FlexStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-FlexStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-GridProps"></span>

### GridProps

Authored inputs for Grid, including the declared data and presentation options.

```ts
interface GridProps extends PibblStructuralEventProps
```

Related API: [GridProps](/reference/types/layout/#gridprops).

#### See also

[PibblNodeInput](/reference/types/elements-components/#pibblnodeinput)

[Grid](/reference/components/grid/)

[View source — packages/core/src/lib/layout/grid.ts:87](/source/packages/core/src/lib/layout/grid-ts/#L87)

#### Properties and methods

<span id="api-GridProps-children"></span>
<details>
<summary>children</summary>


```ts
children: PibblNodeInput
```

Related API: [PibblNodeInput](/reference/types/elements-components/#pibblnodeinput).

Descendant content or the callback that supplies it. See PibblNodeInput.

[View source — packages/core/src/lib/layout/grid.ts:89](/source/packages/core/src/lib/layout/grid-ts/#L89)

</details>

<span id="api-GridStyle"></span>

### GridStyle

Supported geometry and presentation properties for Grid.

```ts
interface GridStyle extends BoxStyle, LayoutItemStyle
```

Related API: [GridStyle](/reference/types/layout/#gridstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[GridTrack](/reference/types/layout/#gridtrack)

[Grid](/reference/components/grid/)

[View source — packages/core/src/lib/layout/grid.ts:64](/source/packages/core/src/lib/layout/grid-ts/#L64)

#### Properties and methods

<span id="api-GridStyle-gridTemplateColumns"></span>
<details>
<summary>gridTemplateColumns</summary>


```ts
gridTemplateColumns: readonly GridTrack[]
```

Related API: [GridTrack](/reference/types/layout/#gridtrack).

Explicit grid column track definitions. See GridTrack.

[View source — packages/core/src/lib/layout/grid.ts:66](/source/packages/core/src/lib/layout/grid-ts/#L66)

</details>

<span id="api-GridStyle-gridTemplateRows"></span>
<details>
<summary>gridTemplateRows</summary>


```ts
gridTemplateRows: readonly GridTrack[]
```

Related API: [GridTrack](/reference/types/layout/#gridtrack).

Explicit grid row track definitions. See GridTrack.

[View source — packages/core/src/lib/layout/grid.ts:68](/source/packages/core/src/lib/layout/grid-ts/#L68)

</details>

<span id="api-GridStyle-justifyItems"></span>
<details>
<summary>justifyItems (optional)</summary>


```ts
justifyItems?: GridAlignment | undefined
```

Default inline-axis alignment of grid or overlay children. See GridAlignment.

[View source — packages/core/src/lib/layout/grid.ts:70](/source/packages/core/src/lib/layout/grid-ts/#L70)

</details>

<span id="api-GridStyle-alignItems"></span>
<details>
<summary>alignItems (optional)</summary>


```ts
alignItems?: GridAlignment | undefined
```

Default alignment of children on the cross or block axis. See GridAlignment.

[View source — packages/core/src/lib/layout/grid.ts:72](/source/packages/core/src/lib/layout/grid-ts/#L72)

</details>

<span id="api-GridStyle-gap"></span>
<details>
<summary>gap (optional)</summary>


```ts
gap?: number | undefined
```

Spacing between adjacent items. See GridStyle.

[View source — packages/core/src/lib/layout/grid.ts:74](/source/packages/core/src/lib/layout/grid-ts/#L74)

</details>

<span id="api-GridStyle-rowGap"></span>
<details>
<summary>rowGap (optional)</summary>


```ts
rowGap?: number | undefined
```

Space between adjacent rows or items on the row axis. See GridStyle.

[View source — packages/core/src/lib/layout/grid.ts:76](/source/packages/core/src/lib/layout/grid-ts/#L76)

</details>

<span id="api-GridStyle-columnGap"></span>
<details>
<summary>columnGap (optional)</summary>


```ts
columnGap?: number | undefined
```

Space between adjacent columns or items on the column axis. See GridStyle.

[View source — packages/core/src/lib/layout/grid.ts:78](/source/packages/core/src/lib/layout/grid-ts/#L78)

</details>

<span id="api-GridStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-GridStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-GridStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-GridStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-GridStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-GridStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-GridStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-GridStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-GridStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-GridStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-GridStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-GridStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-GridStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-GridStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-GridStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-GridStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-GridStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-GridStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-GridStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-GridStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-GridStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-GridStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-GridTrack"></span>

### GridTrack

A fixed logical size, percentage of available space, or fractional share of remaining grid space.

```ts
type GridTrack = number | `${number}%` | `${number}fr`
```

Related API: [GridTrack](/reference/types/layout/#gridtrack).

#### See also

[GridStyle](/reference/types/layout/#gridstyle)

[View source — packages/core/src/lib/layout/grid.ts:49](/source/packages/core/src/lib/layout/grid-ts/#L49)

<span id="api-BoxStyle"></span>

### BoxStyle

Declared box dimensions, size limits, padding, and overflow behavior.

```ts
interface BoxStyle extends SystemStyle
```

Related API: [BoxStyle](/reference/types/layout/#boxstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

[SystemStyle](/reference/types/styles/#systemstyle)

[Length](/reference/types/layout/#length)

[EdgeValues](/reference/types/layout/#edgevalues)

[ImgStyle](/reference/types/styles/#imgstyle)

[PathStyle](/reference/types/styles/#pathstyle)

[RectStyle](/reference/types/styles/#rectstyle)

[View source — packages/core/src/lib/style/types.ts:79](/source/packages/core/src/lib/style/types-ts/#L79)

#### Properties and methods

<span id="api-BoxStyle-width"></span>
<details>
<summary>width (optional)</summary>


```ts
width?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Horizontal extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:81](/source/packages/core/src/lib/style/types-ts/#L81)

</details>

<span id="api-BoxStyle-height"></span>
<details>
<summary>height (optional)</summary>


```ts
height?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Vertical extent in the units of the containing geometry or surface. See Length.

[View source — packages/core/src/lib/style/types.ts:83](/source/packages/core/src/lib/style/types-ts/#L83)

</details>

<span id="api-BoxStyle-minWidth"></span>
<details>
<summary>minWidth (optional)</summary>


```ts
minWidth?: number | `${number}%` | undefined
```

Minimum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:85](/source/packages/core/src/lib/style/types-ts/#L85)

</details>

<span id="api-BoxStyle-maxWidth"></span>
<details>
<summary>maxWidth (optional)</summary>


```ts
maxWidth?: number | `${number}%` | undefined
```

Maximum permitted width. See Length.

[View source — packages/core/src/lib/style/types.ts:87](/source/packages/core/src/lib/style/types-ts/#L87)

</details>

<span id="api-BoxStyle-minHeight"></span>
<details>
<summary>minHeight (optional)</summary>


```ts
minHeight?: number | `${number}%` | undefined
```

Minimum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:89](/source/packages/core/src/lib/style/types-ts/#L89)

</details>

<span id="api-BoxStyle-maxHeight"></span>
<details>
<summary>maxHeight (optional)</summary>


```ts
maxHeight?: number | `${number}%` | undefined
```

Maximum permitted height. See Length.

[View source — packages/core/src/lib/style/types.ts:91](/source/packages/core/src/lib/style/types-ts/#L91)

</details>

<span id="api-BoxStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See EdgeValues.

[View source — packages/core/src/lib/style/types.ts:93](/source/packages/core/src/lib/style/types-ts/#L93)

</details>

<span id="api-BoxStyle-overflow"></span>
<details>
<summary>overflow (optional)</summary>


```ts
overflow?: "clip" | "visible" | undefined
```

Selects `"visible"`, `"clip"` for overflow. See BoxStyle.

[View source — packages/core/src/lib/style/types.ts:95](/source/packages/core/src/lib/style/types-ts/#L95)

</details>

<span id="api-BoxStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-BoxStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-BoxStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-EdgeValues"></span>

### EdgeValues

One inset for every edge or independently specified top, right, bottom, and left insets.

```ts
type EdgeValues = | number
  | Readonly<{
      /** Top edge value or top envelope guide. See {@link EdgeValues}. */
      top?: number;
      /** Right edge coordinate or inset. See {@link EdgeValues}. */
      right?: number;
      /** Bottom edge value or bottom envelope guide. See {@link EdgeValues}. */
      bottom?: number;
      /** Left edge coordinate or inset. See {@link EdgeValues}. */
      left?: number;
    }>
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[normalizeEdges](/reference/functions/normalize-edges/)

[View source — packages/core/src/lib/style/types.ts:56](/source/packages/core/src/lib/style/types-ts/#L56)

<span id="api-FlexItemStyle"></span>

### FlexItemStyle

The supported flex sizing and cross-axis alignment properties of a child.

```ts
type FlexItemStyle = Pick<
  LayoutItemStyle,
  'flexBasis' | 'flexGrow' | 'flexShrink'
> & {
  /** This child's cross-axis or block-axis alignment override. See {@link FlexItemStyle}. */
  alignSelf?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center';
}
```

Related API: [FlexItemStyle](/reference/types/layout/#flexitemstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[View source — packages/core/src/lib/style/types.ts:145](/source/packages/core/src/lib/style/types-ts/#L145)

#### Properties and methods

<span id="api-FlexItemStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-FlexItemStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-FlexItemStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-FlexItemStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "flex-end" | "flex-start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See FlexItemStyle.

[View source — packages/core/src/lib/style/types.ts:150](/source/packages/core/src/lib/style/types-ts/#L150)

</details>

<span id="api-GridItemStyle"></span>

### GridItemStyle

Explicit grid cell placement, spans, and alignment of a child.

```ts
interface GridItemStyle extends SystemStyle
```

Related API: [GridItemStyle](/reference/types/layout/#griditemstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

[SystemStyle](/reference/types/styles/#systemstyle)

[GridStyle](/reference/types/layout/#gridstyle)

[View source — packages/core/src/lib/style/types.ts:159](/source/packages/core/src/lib/style/types-ts/#L159)

#### Properties and methods

<span id="api-GridItemStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:161](/source/packages/core/src/lib/style/types-ts/#L161)

</details>

<span id="api-GridItemStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:163](/source/packages/core/src/lib/style/types-ts/#L163)

</details>

<span id="api-GridItemStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:165](/source/packages/core/src/lib/style/types-ts/#L165)

</details>

<span id="api-GridItemStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:167](/source/packages/core/src/lib/style/types-ts/#L167)

</details>

<span id="api-GridItemStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:169](/source/packages/core/src/lib/style/types-ts/#L169)

</details>

<span id="api-GridItemStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See GridItemStyle.

[View source — packages/core/src/lib/style/types.ts:171](/source/packages/core/src/lib/style/types-ts/#L171)

</details>

<span id="api-GridItemStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-GridItemStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-GridItemStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-LayoutItemStyle"></span>

### LayoutItemStyle

Parent-layout participation: positioning, self-alignment, flex sizing, and explicit grid placement.

```ts
interface LayoutItemStyle extends PositioningStyle
```

Related API: [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[Length](/reference/types/layout/#length)

[FlexItemStyle](/reference/types/layout/#flexitemstyle)

[ImgStyle](/reference/types/styles/#imgstyle)

[PathStyle](/reference/types/styles/#pathstyle)

[View source — packages/core/src/lib/style/types.ts:119](/source/packages/core/src/lib/style/types-ts/#L119)

#### Properties and methods

<span id="api-LayoutItemStyle-left"></span>
<details>
<summary>left (optional)</summary>


```ts
left?: number | `${number}%` | undefined
```

Left edge coordinate or inset. See Length.

[View source — packages/core/src/lib/style/positioning.ts:127](/source/packages/core/src/lib/style/positioning-ts/#L127)

</details>

<span id="api-LayoutItemStyle-top"></span>
<details>
<summary>top (optional)</summary>


```ts
top?: number | `${number}%` | undefined
```

Top edge value or top envelope guide. See Length.

[View source — packages/core/src/lib/style/positioning.ts:129](/source/packages/core/src/lib/style/positioning-ts/#L129)

</details>

<span id="api-LayoutItemStyle-alignSelf"></span>
<details>
<summary>alignSelf (optional)</summary>


```ts
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefined
```

This child's cross-axis or block-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:121](/source/packages/core/src/lib/style/types-ts/#L121)

</details>

<span id="api-LayoutItemStyle-justifySelf"></span>
<details>
<summary>justifySelf (optional)</summary>


```ts
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefined
```

This child's inline-axis alignment override. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:123](/source/packages/core/src/lib/style/types-ts/#L123)

</details>

<span id="api-LayoutItemStyle-flexBasis"></span>
<details>
<summary>flexBasis (optional)</summary>


```ts
flexBasis?: Length | undefined
```

Related API: [Length](/reference/types/layout/#length).

Initial main-axis size before flex growth or shrinkage. See Length.

[View source — packages/core/src/lib/style/types.ts:125](/source/packages/core/src/lib/style/types-ts/#L125)

</details>

<span id="api-LayoutItemStyle-flexGrow"></span>
<details>
<summary>flexGrow (optional)</summary>


```ts
flexGrow?: number | undefined
```

Relative share of positive free space assigned to this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:127](/source/packages/core/src/lib/style/types-ts/#L127)

</details>

<span id="api-LayoutItemStyle-flexShrink"></span>
<details>
<summary>flexShrink (optional)</summary>


```ts
flexShrink?: number | undefined
```

Relative factor used when reducing main-axis size. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:129](/source/packages/core/src/lib/style/types-ts/#L129)

</details>

<span id="api-LayoutItemStyle-gridColumnStart"></span>
<details>
<summary>gridColumnStart (optional)</summary>


```ts
gridColumnStart?: number | undefined
```

Explicit starting grid column. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:131](/source/packages/core/src/lib/style/types-ts/#L131)

</details>

<span id="api-LayoutItemStyle-gridColumnSpan"></span>
<details>
<summary>gridColumnSpan (optional)</summary>


```ts
gridColumnSpan?: number | undefined
```

Number of columns occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:133](/source/packages/core/src/lib/style/types-ts/#L133)

</details>

<span id="api-LayoutItemStyle-gridRowStart"></span>
<details>
<summary>gridRowStart (optional)</summary>


```ts
gridRowStart?: number | undefined
```

Explicit starting grid row. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:135](/source/packages/core/src/lib/style/types-ts/#L135)

</details>

<span id="api-LayoutItemStyle-gridRowSpan"></span>
<details>
<summary>gridRowSpan (optional)</summary>


```ts
gridRowSpan?: number | undefined
```

Number of rows occupied by this child. See LayoutItemStyle.

[View source — packages/core/src/lib/style/types.ts:137](/source/packages/core/src/lib/style/types-ts/#L137)

</details>

<span id="api-LayoutItemStyle-transition"></span>
<details>
<summary>transition (optional)</summary>


```ts
transition?: PibblTransitionBinding | undefined
```

Related API: [PibblTransitionBinding](/reference/hooks/use-visibility-transition/).

Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.

[View source — packages/core/src/lib/types.ts:69](/source/packages/core/src/lib/types-ts/#L69)

</details>

<span id="api-LayoutItemStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: unknown
```

Application-defined style payload passed through the runtime. See SystemStyle.

[View source — packages/core/src/lib/types.ts:71](/source/packages/core/src/lib/types-ts/#L71)

</details>

<span id="api-LayoutItemStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: PibblFilter | readonly PibblFilter[] | undefined
```

Related API: [PibblFilter](/reference/types/filters/#pibblfilter).

Ordered pixel-only filters applied to the receiving primitive and its descendants. See
PibblFilter.

[View source — packages/core/src/lib/types.ts:76](/source/packages/core/src/lib/types-ts/#L76)

</details>

<span id="api-Length"></span>

### Length

A layout length in logical units, a parent-relative percentage, or automatic sizing.

```ts
type Length = number | Percentage | 'auto'
```

Related API: [Length](/reference/types/layout/#length), [Percentage](/reference/types/layout/#percentage).

#### See also

[Percentage](/reference/types/layout/#percentage)

[BoxStyle](/reference/types/layout/#boxstyle)

[LayoutItemStyle](/reference/types/layout/#layoutitemstyle)

[RectStyle](/reference/types/styles/#rectstyle)

[View source — packages/core/src/lib/style/types.ts:33](/source/packages/core/src/lib/style/types-ts/#L33)

<span id="api-ResolvedBoxStyle"></span>

### ResolvedBoxStyle

Resolved border and content boxes after sizing and padding are applied.

```ts
interface ResolvedBoxStyle
```

Related API: [ResolvedBoxStyle](/reference/types/layout/#resolvedboxstyle).

#### See also

[LayoutBox](/reference/types/layout/#layoutbox)

[resolveBox](/reference/functions/resolve-box/)

[View source — packages/core/src/lib/style/types.ts:104](/source/packages/core/src/lib/style/types-ts/#L104)

#### Properties and methods

<span id="api-ResolvedBoxStyle-borderBox"></span>
<details>
<summary>borderBox</summary>


```ts
borderBox: LayoutBox
```

Related API: [LayoutBox](/reference/types/layout/#layoutbox).

The resolved outer rectangle including padding. See LayoutBox.

[View source — packages/core/src/lib/style/types.ts:106](/source/packages/core/src/lib/style/types-ts/#L106)

</details>

<span id="api-ResolvedBoxStyle-contentBox"></span>
<details>
<summary>contentBox</summary>


```ts
contentBox: LayoutBox
```

Related API: [LayoutBox](/reference/types/layout/#layoutbox).

The resolved rectangle available to content after padding. See LayoutBox.

[View source — packages/core/src/lib/style/types.ts:108](/source/packages/core/src/lib/style/types-ts/#L108)

</details>

<span id="api-Percentage"></span>

### Percentage

A percentage string resolved against the relevant parent layout dimension.

```ts
type Percentage = `${number}%`
```

Related API: [Percentage](/reference/types/layout/#percentage).

#### See also

[Length](/reference/types/layout/#length)

[View source — packages/core/src/lib/style/types.ts:24](/source/packages/core/src/lib/style/types-ts/#L24)

<span id="api-LayoutDiagnosticContext"></span>

### LayoutDiagnosticContext

Component and source context attached to a layout diagnostic.

```ts
interface LayoutDiagnosticContext
```

Related API: [LayoutDiagnosticContext](/reference/types/layout/#layoutdiagnosticcontext).

#### See also

[Constraints](/reference/types/layout/#constraints)

[LayoutDiagnosticInput](/reference/types/layout/#layoutdiagnosticinput)

[normalizeEdges](/reference/functions/normalize-edges/)

[resolveLength](/reference/functions/resolve-length/)

[View source — packages/core/src/lib/style/diagnostics.ts:13](/source/packages/core/src/lib/style/diagnostics-ts/#L13)

#### Properties and methods

<span id="api-LayoutDiagnosticContext-component"></span>
<details>
<summary>component (optional)</summary>


```ts
component?: string | undefined
```

Component identity or diagnostic name associated with this value. See
LayoutDiagnosticContext.

[View source — packages/core/src/lib/style/diagnostics.ts:18](/source/packages/core/src/lib/style/diagnostics-ts/#L18)

</details>

<span id="api-LayoutDiagnosticContext-algorithm"></span>
<details>
<summary>algorithm (optional)</summary>


```ts
algorithm?: string | undefined
```

Name of the layout algorithm producing this diagnostic or resolution. See
LayoutDiagnosticContext.

[View source — packages/core/src/lib/style/diagnostics.ts:23](/source/packages/core/src/lib/style/diagnostics-ts/#L23)

</details>

<span id="api-LayoutDiagnosticContext-constraints"></span>
<details>
<summary>constraints (optional)</summary>


```ts
constraints?: Readonly<Constraints> | undefined
```

Related API: [Constraints](/reference/types/layout/#constraints).

Sizing limits and available dimensions for this operation. See Constraints.

[View source — packages/core/src/lib/style/diagnostics.ts:25](/source/packages/core/src/lib/style/diagnostics-ts/#L25)

</details>

<span id="api-LayoutDiagnosticInput"></span>

### LayoutDiagnosticInput

Validation-failure details used to construct a layout diagnostic.

```ts
interface LayoutDiagnosticInput extends LayoutDiagnosticContext
```

Related API: [LayoutDiagnosticInput](/reference/types/layout/#layoutdiagnosticinput), [LayoutDiagnosticContext](/reference/types/layout/#layoutdiagnosticcontext).

#### See also

[LayoutDiagnosticContext](/reference/types/layout/#layoutdiagnosticcontext)

[layoutDiagnostic](/reference/functions/layout-diagnostic/)

[View source — packages/core/src/lib/style/diagnostics.ts:34](/source/packages/core/src/lib/style/diagnostics-ts/#L34)

#### Properties and methods

<span id="api-LayoutDiagnosticInput-property"></span>
<details>
<summary>property</summary>


```ts
property: string
```

Name of the affected input property. See LayoutDiagnosticInput.

[View source — packages/core/src/lib/style/diagnostics.ts:36](/source/packages/core/src/lib/style/diagnostics-ts/#L36)

</details>

<span id="api-LayoutDiagnosticInput-value"></span>
<details>
<summary>value</summary>


```ts
value: unknown
```

Value associated with this sample, input, or result. See LayoutDiagnosticInput.

[View source — packages/core/src/lib/style/diagnostics.ts:38](/source/packages/core/src/lib/style/diagnostics-ts/#L38)

</details>

<span id="api-LayoutDiagnosticInput-reason"></span>
<details>
<summary>reason</summary>


```ts
reason: string
```

Reason the operation could not produce its ordinary result. See LayoutDiagnosticInput
.

[View source — packages/core/src/lib/style/diagnostics.ts:43](/source/packages/core/src/lib/style/diagnostics-ts/#L43)

</details>

<span id="api-LayoutDiagnosticInput-component"></span>
<details>
<summary>component (optional)</summary>


```ts
component?: string | undefined
```

Component identity or diagnostic name associated with this value. See
LayoutDiagnosticContext.

[View source — packages/core/src/lib/style/diagnostics.ts:18](/source/packages/core/src/lib/style/diagnostics-ts/#L18)

</details>

<span id="api-LayoutDiagnosticInput-algorithm"></span>
<details>
<summary>algorithm (optional)</summary>


```ts
algorithm?: string | undefined
```

Name of the layout algorithm producing this diagnostic or resolution. See
LayoutDiagnosticContext.

[View source — packages/core/src/lib/style/diagnostics.ts:23](/source/packages/core/src/lib/style/diagnostics-ts/#L23)

</details>

<span id="api-LayoutDiagnosticInput-constraints"></span>
<details>
<summary>constraints (optional)</summary>


```ts
constraints?: Readonly<Constraints> | undefined
```

Related API: [Constraints](/reference/types/layout/#constraints).

Sizing limits and available dimensions for this operation. See Constraints.

[View source — packages/core/src/lib/style/diagnostics.ts:25](/source/packages/core/src/lib/style/diagnostics-ts/#L25)

</details>

<span id="api-Constraints"></span>

### Constraints

Available and limiting dimensions supplied to layout and measurement.

```ts
interface Constraints
```

Related API: [Constraints](/reference/types/layout/#constraints).

#### See also

[measureElement](/reference/functions/measure-element/)

[resolveBox](/reference/functions/resolve-box/)

[LayoutDiagnosticContext](/reference/types/layout/#layoutdiagnosticcontext)

[View source — packages/core/src/lib/layout/types.ts:29](/source/packages/core/src/lib/layout/types-ts/#L29)

#### Properties and methods

<span id="api-Constraints-minWidth"></span>
<details>
<summary>minWidth</summary>


```ts
minWidth: number
```

Minimum permitted width. See Constraints.

[View source — packages/core/src/lib/layout/types.ts:31](/source/packages/core/src/lib/layout/types-ts/#L31)

</details>

<span id="api-Constraints-maxWidth"></span>
<details>
<summary>maxWidth</summary>


```ts
maxWidth: number
```

Maximum permitted width. See Constraints.

[View source — packages/core/src/lib/layout/types.ts:33](/source/packages/core/src/lib/layout/types-ts/#L33)

</details>

<span id="api-Constraints-minHeight"></span>
<details>
<summary>minHeight</summary>


```ts
minHeight: number
```

Minimum permitted height. See Constraints.

[View source — packages/core/src/lib/layout/types.ts:35](/source/packages/core/src/lib/layout/types-ts/#L35)

</details>

<span id="api-Constraints-maxHeight"></span>
<details>
<summary>maxHeight</summary>


```ts
maxHeight: number
```

Maximum permitted height. See Constraints.

[View source — packages/core/src/lib/layout/types.ts:37](/source/packages/core/src/lib/layout/types-ts/#L37)

</details>

<span id="api-Edges"></span>

### Edges

Resolved numeric insets for the four sides of a box.

```ts
interface Edges
```

Related API: [Edges](/reference/types/layout/#edges).

#### See also

[normalizeEdges](/reference/functions/normalize-edges/)

[BoxStyle](/reference/types/layout/#boxstyle)

[View source — packages/core/src/lib/layout/types.ts:73](/source/packages/core/src/lib/layout/types-ts/#L73)

#### Properties and methods

<span id="api-Edges-top"></span>
<details>
<summary>top</summary>


```ts
top: number
```

Top edge value or top envelope guide. See Edges.

[View source — packages/core/src/lib/layout/types.ts:75](/source/packages/core/src/lib/layout/types-ts/#L75)

</details>

<span id="api-Edges-right"></span>
<details>
<summary>right</summary>


```ts
right: number
```

Right edge coordinate or inset. See Edges.

[View source — packages/core/src/lib/layout/types.ts:77](/source/packages/core/src/lib/layout/types-ts/#L77)

</details>

<span id="api-Edges-bottom"></span>
<details>
<summary>bottom</summary>


```ts
bottom: number
```

Bottom edge value or bottom envelope guide. See Edges.

[View source — packages/core/src/lib/layout/types.ts:79](/source/packages/core/src/lib/layout/types-ts/#L79)

</details>

<span id="api-Edges-left"></span>
<details>
<summary>left</summary>


```ts
left: number
```

Left edge coordinate or inset. See Edges.

[View source — packages/core/src/lib/layout/types.ts:81](/source/packages/core/src/lib/layout/types-ts/#L81)

</details>

<span id="api-LayoutBox"></span>

### LayoutBox

An axis-aligned rectangle in the layout coordinate system.

```ts
interface LayoutBox extends Size
```

Related API: [LayoutBox](/reference/types/layout/#layoutbox), [Size](/reference/types/layout/#size).

#### See also

[Size](/reference/types/layout/#size)

[PibblRenderLayerTarget](/reference/types/canvas-runtime/#pibblrenderlayertarget)

[ResolvedBoxStyle](/reference/types/layout/#resolvedboxstyle)

[useLayoutBox](/reference/hooks/use-layout-box/)

[View source — packages/core/src/lib/layout/types.ts:48](/source/packages/core/src/lib/layout/types-ts/#L48)

#### Properties and methods

<span id="api-LayoutBox-x"></span>
<details>
<summary>x</summary>


```ts
x: number
```

Horizontal coordinate or displacement in the containing coordinate system. See
LayoutBox.

[View source — packages/core/src/lib/layout/types.ts:53](/source/packages/core/src/lib/layout/types-ts/#L53)

</details>

<span id="api-LayoutBox-y"></span>
<details>
<summary>y</summary>


```ts
y: number
```

Vertical coordinate or displacement in the containing coordinate system. See LayoutBox
.

[View source — packages/core/src/lib/layout/types.ts:58](/source/packages/core/src/lib/layout/types-ts/#L58)

</details>

<span id="api-LayoutBox-width"></span>
<details>
<summary>width</summary>


```ts
width: number
```

Horizontal extent in the units of the containing geometry or surface. See Size.

[View source — packages/core/src/lib/layout/types.ts:17](/source/packages/core/src/lib/layout/types-ts/#L17)

</details>

<span id="api-LayoutBox-height"></span>
<details>
<summary>height</summary>


```ts
height: number
```

Vertical extent in the units of the containing geometry or surface. See Size.

[View source — packages/core/src/lib/layout/types.ts:19](/source/packages/core/src/lib/layout/types-ts/#L19)

</details>

<span id="api-Size"></span>

### Size

Width and height in logical Canvas units.

```ts
interface Size
```

Related API: [Size](/reference/types/layout/#size).

#### See also

[LayoutBox](/reference/types/layout/#layoutbox)

[MeasureResult](/reference/types/layout/#measureresult)

[View source — packages/core/src/lib/layout/types.ts:15](/source/packages/core/src/lib/layout/types-ts/#L15)

#### Properties and methods

<span id="api-Size-width"></span>
<details>
<summary>width</summary>


```ts
width: number
```

Horizontal extent in the units of the containing geometry or surface. See Size.

[View source — packages/core/src/lib/layout/types.ts:17](/source/packages/core/src/lib/layout/types-ts/#L17)

</details>

<span id="api-Size-height"></span>
<details>
<summary>height</summary>


```ts
height: number
```

Vertical extent in the units of the containing geometry or surface. See Size.

[View source — packages/core/src/lib/layout/types.ts:19](/source/packages/core/src/lib/layout/types-ts/#L19)

</details>

<span id="api-CanvasMeasurementService"></span>

### CanvasMeasurementService

Canvas text measurement services supplied to pure layout measurement.

```ts
interface CanvasMeasurementService
```

Related API: [CanvasMeasurementService](/reference/types/layout/#canvasmeasurementservice).

#### See also

[MeasureInput](/reference/types/layout/#measureinput)

[measureElement](/reference/functions/measure-element/)

[View source — packages/core/src/lib/types.ts:328](/source/packages/core/src/lib/types-ts/#L328)

#### Properties and methods

<span id="api-CanvasMeasurementService-measureText"></span>
<details>
<summary>measureText</summary>


```ts
measureText: (text: string, font: string) => TextMetrics
```

Measures text using the requested Canvas font configuration. See
CanvasMeasurementService.

##### Parameters

- **`text`** — Text to measure.

- **`font`** — Canvas font string used for measurement.

##### Returns

Canvas text metrics for the supplied text and font.

[View source — packages/core/src/lib/types.ts:336](/source/packages/core/src/lib/types-ts/#L336)

</details>

<span id="api-MeasureInput"></span>

### MeasureInput

Declared style, props, and constraints passed to a primitive's measurement callback.

```ts
interface MeasureInput<P, S extends SystemStyle = SystemStyle>
```

Related API: [MeasureInput](/reference/types/layout/#measureinput), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

[SystemStyle](/reference/types/styles/#systemstyle)

[NormalizedStyle](/reference/types/styles/#normalizedstyle)

[Constraints](/reference/types/layout/#constraints)

[CanvasMeasurementService](/reference/types/layout/#canvasmeasurementservice)

[PibblElement](/reference/types/elements-components/#pibblelement)

[MeasureResult](/reference/types/layout/#measureresult)

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[View source — packages/core/src/lib/types.ts:372](/source/packages/core/src/lib/types-ts/#L372)

#### Properties and methods

<span id="api-MeasureInput-props"></span>
<details>
<summary>props</summary>


```ts
props: Readonly<P>
```

Component props supplied to evaluation or measurement. See MeasureInput.

[View source — packages/core/src/lib/types.ts:374](/source/packages/core/src/lib/types-ts/#L374)

</details>

<span id="api-MeasureInput-style"></span>
<details>
<summary>style</summary>


```ts
style: Readonly<S>
```

Declared presentation and layout properties. See NormalizedStyle.

[View source — packages/core/src/lib/types.ts:376](/source/packages/core/src/lib/types-ts/#L376)

</details>

<span id="api-MeasureInput-constraints"></span>
<details>
<summary>constraints</summary>


```ts
constraints: Readonly<Constraints>
```

Related API: [Constraints](/reference/types/layout/#constraints).

Sizing limits and available dimensions for this operation. See Constraints.

[View source — packages/core/src/lib/types.ts:378](/source/packages/core/src/lib/types-ts/#L378)

</details>

<span id="api-MeasureInput-service"></span>
<details>
<summary>service</summary>


```ts
service: CanvasMeasurementService
```

Related API: [CanvasMeasurementService](/reference/types/layout/#canvasmeasurementservice).

Measurement services available while evaluating this input. See
CanvasMeasurementService.

[View source — packages/core/src/lib/types.ts:383](/source/packages/core/src/lib/types-ts/#L383)

</details>

<span id="api-MeasureInput-measureElement"></span>
<details>
<summary>measureElement</summary>


```ts
measureElement: (element: PibblElement<any>, constraints: Readonly<Constraints>) => MeasureResult
```

Related API: [measureElement](/reference/functions/measure-element/), [PibblElement](/reference/types/elements-components/#pibblelement), [Constraints](/reference/types/layout/#constraints), [MeasureResult](/reference/types/layout/#measureresult).

Measures a nested element using the current measurement context. See MeasureResult.

##### Parameters

- **`element`** — Child element to measure. See [PibblElement](/reference/types/elements-components/#pibblelement).

- **`constraints`** — Available dimensions in logical units. See [Constraints](/reference/types/layout/#constraints).

##### Returns

Measured dimensions or an unsupported measurement result. See [MeasureResult](/reference/types/layout/#measureresult).

[View source — packages/core/src/lib/types.ts:390](/source/packages/core/src/lib/types-ts/#L390)

</details>

<span id="api-MeasureResult"></span>

### MeasureResult

Measured dimensions, or an explicit unsupported result with a diagnostic reason.

```ts
type MeasureResult = | {
      /** The literal "measured" identifying this variant. See {@link MeasureResult}. */
      status: "measured";
      /** Measured logical width and height. See {@link Size}. */
      size: Readonly<Size>;
    }
  | {
      /** The literal "unsupported" identifying this variant. See {@link MeasureResult}. */
      status: "unsupported";
      /** Reason the operation could not produce its ordinary result. See {@link MeasureResult}. */
      reason: string;
    }
```

Related API: [MeasureResult](/reference/types/layout/#measureresult), [Size](/reference/types/layout/#size).

#### See also

[Size](/reference/types/layout/#size)

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[MeasureInput](/reference/types/layout/#measureinput)

[measureElement](/reference/functions/measure-element/)

[View source — packages/core/src/lib/types.ts:347](/source/packages/core/src/lib/types-ts/#L347)

#### Properties and methods

<span id="api-MeasureResult-status"></span>
<details>
<summary>status</summary>


```ts
status: "measured" | "unsupported"
```

The literal "measured" identifying this variant. See MeasureResult.
The literal "unsupported" identifying this variant. See MeasureResult.

[View source — packages/core/src/lib/types.ts:350](/source/packages/core/src/lib/types-ts/#L350)

</details>

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Absolute and overlay layout](/minimal-examples/layout/absolute-overlay/): Position a block absolutely and center content within an overlay. [Plain source](/minimal/layout/absolute-overlay.tsx)
- [Box resolution](/minimal-examples/layout/box-helpers/): Resolve padding, percentages, and a constrained box with typed diagnostics. [Plain source](/minimal/layout/box-helpers.ts)
- [Intrinsic measurement](/minimal-examples/layout/measure/): Measure a Text element with a Canvas service and display its computed dimensions. [Plain source](/minimal/layout/measure.tsx)
- [Flow and flex layout](/minimal-examples/layout/flow-flex/): Stack a banner with a flexible row of marks. [Plain source](/minimal/layout/flow-flex.tsx)
- [Grid and responsive style](/minimal-examples/layout/grid-responsive/): Place marks on explicit grid tracks and apply a local width rule. [Plain source](/minimal/layout/grid-responsive.tsx)
- [Allocated layout box](/minimal-examples/layout/layout-box/): Read the current canvas allocation and draw an inset panel. [Plain source](/minimal/layout/layout-box.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.