# Style and primitive types

Styles are local, closed contracts: there is no inheritance or cascade. Author
input is specified, then normalized, then resolved against a finite allocation.
`definePrimitive` exposes the extension seam without turning Pibbl into a retained
scene graph.

## ArcStyle

`ArcStyle` is the stroke-only local style for an open circular sweep: radius,
finite radian angles, optional center/direction, paint, and interaction fields.

## CircleStyle

`CircleStyle` requires `radius` and accepts optional `cx`/`cy`, local paint,
events, focus geometry, and applicable declared-box fields.

## ClipStyle

`ClipStyle` supplies a clipping `Path2D`, fill rule, local composition fields,
and applicable filter behavior for `Clip`.

## CursorStyle

`CursorStyle` is the local CSS cursor vocabulary used by primitives and the
cursor hook; cursor regions use original logical geometry.

## EllipseStyle

`EllipseStyle` requires `radiusX` and `radiusY` and accepts optional center and
finite radian rotation with local paint and interaction fields.

## FillStyle

`FillStyle` is the shared local fill-paint vocabulary.

## GStyle

`GStyle` is the local transform/composition style for `Group`.

## HorizontalLineStyle

`HorizontalLineStyle` is the local stroke and allocation-aware endpoint style
for `HorizontalLine`.

## ImgStyle

`ImgStyle` is the local geometry, border, paint, and interaction style for
browser-decoded images.

## LayerStyle

`LayerStyle` is the local presentation style for persistent offscreen `Layer`
content, including its composition-boundary filter behavior.

## LineStyle

`LineStyle` is the local numeric-coordinate and stroke-interaction style for a
polyline `Line`.

## NormalizedStyle

`NormalizedStyle` is Pibbl's immutable parsed style stage: shorthands and
component defaults are resolved, but no parent-derived geometry is retained.

## PaintStyle

`PaintStyle` is the shared local paint vocabulary, including opacity and
applicable Canvas painting settings.

## PathStyle

`PathStyle` is the local paint and interaction style for a caller-owned `Path2D`.

## PibblResponsiveStyle

`PibblResponsiveStyle<S>` is the primitive's ordinary signal-capable style plus an
optional readonly `when` list. Required base fields stay required. Whole-style
signals and signals in base or patch fields are supported; conditions and lists
are plain values. Use `satisfies PibblResponsiveStyle<FlowStyle>` for reusable
styles. Unmatched patch signals are not read. No styles cascade or inherit.

The [responsive local styles guide](/guides/responsive-styles/) explains
outer placement versus inner content. Custom primitives must leave `when` out
of their specified, normalized, and resolved styles: Pibbl supplies that field on
inputs and removes it before callbacks.

## PibblSizeQuery

`PibblSizeQuery` requires at least one inclusive, finite nonnegative bound:
`minWidth`, `maxWidth`, `minHeight`, or `maxHeight`. All bounds must match the
available containing size in logical units. A direct Grid item's rules see the
Grid content box; rules inside the placed component see its assigned cell.

## PibblStyleRule

`PibblStyleRule<S>` pairs a `query` with a partial local `style` patch. Matching
patches apply in list order, with the last assignment winning. Patches cannot
contain another `when`; objects and arrays replace rather than deep-merge.

## PixelGridAlignment

`PixelGridAlignment` is `"none" | "round" | "ceil" | "floor"`, the supported
numeric alignment modes for path helpers and applicable primitive geometry.

## PolygonStyle

`PolygonStyle` requires finite numeric coordinate pairs and supports local
paint, interaction, and rounded-corner fields; fewer than three points are
safe empty geometry.

## PrimitiveCapabilities

`PrimitiveCapabilities` declares the optional normalization, resolution, and
pure measurement capabilities of a primitive made with `definePrimitive`.

## PrimitiveInput

`PrimitiveInput` is the public element input shape for a primitive's props and
local style.

## PrimitiveInputOf

`PrimitiveInputOf<T>` derives that public input shape from a primitive type.

## PrimitiveProgramProps

`PrimitiveProgramProps` is the props portion of a primitive input after Pibbl's
reserved `key` and `style` metadata are separated.

## PrimitiveRender

`PrimitiveRender` is the render callback contract supplied to `definePrimitive`.
It executes in Pibbl's isolated render traversal, not as a standalone function.

## RectStyle

`RectStyle` is the local signed-box, paint, interaction, and rounded-corner
style for `Rectangle`.

## RegularPolygonStyle

`RegularPolygonStyle` requires integer sides and exactly one of circumradius,
inradius, or side length, with local paint and rounded-corner fields.

## ResolvedStyle

`ResolvedStyle` is Pibbl's immutable finite style stage for the current containing
box and allocation; it is passed to primitive rendering.

## RoundedCornerStyle

`RoundedCornerStyle` is the shared component corner vocabulary. Per-corner
entries fall back through `cornerRadii?.[i] ?? cornerRadius ?? 0`.

## SpecifiedStyle

`SpecifiedStyle` is the immutable author-supplied local style stored on an
element before parsing and resolution.

## StarStyle

`StarStyle` requires integer points and ordered nonnegative outer/inner radii,
forming one concave alternating outline rather than intersecting triangles.

## StrokeStyle

`StrokeStyle` is the shared local stroke-paint and interaction-width vocabulary.

## StyleResolutionContext

`StyleResolutionContext` gives primitive style resolution its allocation,
percentage basis, constraints, component identity, and algorithm context.

## SvgPathStyle

`SvgPathStyle` is the local paint and interaction style for browser-parsed SVG
path-data geometry.

## SystemStyle

`SystemStyle` is the opt-in base style with optional `custom` and framework-
owned `filter`. It has no index signature, so component styles remain closed.

## TextStyle

`TextStyle` is the local paint, wrapping, fitting, and measurement style for
recursive textual content.

## VerticalLineStyle

`VerticalLineStyle` is the local stroke and allocation-aware endpoint style for
`VerticalLine`.

## WedgeStyle

`WedgeStyle` is the local center-closed circular-sector style. Partial sweeps
include radial edges; full turns omit them for a seam-free circular stroke.

## API details from source

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

### ArcStyle

Supported geometry and presentation properties for Arc.

```ts
interface ArcStyle extends SystemStyle, Omit<PaintStyle, "fill">, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [ArcStyle](/reference/types/styles/#arcstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[Arc](/reference/components/arc/)

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

#### Properties and methods

<span id="api-ArcStyle-radius"></span>
<details>
<summary>radius</summary>


```ts
radius: number | `${number}%`
```

Radius in the coordinate system of this geometry or effect. See Length.

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

</details>

<span id="api-ArcStyle-startAngle"></span>
<details>
<summary>startAngle</summary>


```ts
startAngle: number
```

Angle at which the arc or slice begins. See ArcStyle.

[View source — packages/core/src/lib/components/arc.ts:60](/source/packages/core/src/lib/components/arc-ts/#L60)

</details>

<span id="api-ArcStyle-endAngle"></span>
<details>
<summary>endAngle</summary>


```ts
endAngle: number
```

Angle at which the arc or slice ends. See ArcStyle.

[View source — packages/core/src/lib/components/arc.ts:62](/source/packages/core/src/lib/components/arc-ts/#L62)

</details>

<span id="api-ArcStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

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

</details>

<span id="api-ArcStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

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

</details>

<span id="api-ArcStyle-counterclockwise"></span>
<details>
<summary>counterclockwise (optional)</summary>


```ts
counterclockwise?: boolean | undefined
```

Whether the arc follows the counterclockwise direction. See ArcStyle.

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

</details>

<span id="api-ArcStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
ArcStyle.

[View source — packages/core/src/lib/components/arc.ts:73](/source/packages/core/src/lib/components/arc-ts/#L73)

</details>

<span id="api-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-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-ArcStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-ArcStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-ArcStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-ArcStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-ArcStyle-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-ArcStyle-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-ArcStyle-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-CircleStyle"></span>

### CircleStyle

Supported geometry and presentation properties for Circle.

```ts
interface CircleStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [CircleStyle](/reference/types/styles/#circlestyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[Circle](/reference/components/circle/)

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

#### Properties and methods

<span id="api-CircleStyle-radius"></span>
<details>
<summary>radius</summary>


```ts
radius: number | `${number}%`
```

Radius in the coordinate system of this geometry or effect. See Length.

[View source — packages/core/src/lib/components/circle.ts:53](/source/packages/core/src/lib/components/circle-ts/#L53)

</details>

<span id="api-CircleStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

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

</details>

<span id="api-CircleStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

[View source — packages/core/src/lib/components/circle.ts:57](/source/packages/core/src/lib/components/circle-ts/#L57)

</details>

<span id="api-CircleStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
CircleStyle.

[View source — packages/core/src/lib/components/circle.ts:62](/source/packages/core/src/lib/components/circle-ts/#L62)

</details>

<span id="api-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-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-CircleStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-CircleStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-CircleStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-CircleStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-CircleStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-CircleStyle-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-CircleStyle-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-CircleStyle-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-ClipStyle"></span>

### ClipStyle

Supported geometry and presentation properties for Clip.

```ts
interface ClipStyle extends SystemStyle, BoxStyle, LayoutItemStyle
```

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

#### See also

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

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

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

[PathGeometry](/reference/functions/path-geometry/)

[Clip](/reference/components/clip/)

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

#### Properties and methods

<span id="api-ClipStyle-d"></span>
<details>
<summary>d</summary>


```ts
d: Path2D | PathGeometry
```

Related API: [PathGeometry](/reference/functions/path-geometry/).

Geometry to draw or clip, supplied in the declared path representation. See
PathGeometry.

[View source — packages/core/src/lib/components/clip.ts:43](/source/packages/core/src/lib/components/clip-ts/#L43)

</details>

<span id="api-ClipStyle-fillRule"></span>
<details>
<summary>fillRule (optional)</summary>


```ts
fillRule?: CanvasFillRule | undefined
```

Canvas winding rule used to determine the path interior. See ClipStyle.

[View source — packages/core/src/lib/components/clip.ts:45](/source/packages/core/src/lib/components/clip-ts/#L45)

</details>

<span id="api-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-ClipStyle-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-EllipseStyle"></span>

### EllipseStyle

Supported geometry and presentation properties for Ellipse.

```ts
interface EllipseStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [EllipseStyle](/reference/types/styles/#ellipsestyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[Ellipse](/reference/components/ellipse/)

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

#### Properties and methods

<span id="api-EllipseStyle-radiusX"></span>
<details>
<summary>radiusX</summary>


```ts
radiusX: number | `${number}%`
```

Horizontal ellipse radius. See Length.

[View source — packages/core/src/lib/components/ellipse.ts:53](/source/packages/core/src/lib/components/ellipse-ts/#L53)

</details>

<span id="api-EllipseStyle-radiusY"></span>
<details>
<summary>radiusY</summary>


```ts
radiusY: number | `${number}%`
```

Vertical ellipse radius. See Length.

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

</details>

<span id="api-EllipseStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

[View source — packages/core/src/lib/components/ellipse.ts:57](/source/packages/core/src/lib/components/ellipse-ts/#L57)

</details>

<span id="api-EllipseStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

[View source — packages/core/src/lib/components/ellipse.ts:59](/source/packages/core/src/lib/components/ellipse-ts/#L59)

</details>

<span id="api-EllipseStyle-rotation"></span>
<details>
<summary>rotation (optional)</summary>


```ts
rotation?: number | undefined
```

Rotation applied to the containing geometry. See EllipseStyle.

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

</details>

<span id="api-EllipseStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
EllipseStyle.

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

</details>

<span id="api-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-EllipseStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-EllipseStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-EllipseStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-EllipseStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-EllipseStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-EllipseStyle-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-EllipseStyle-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-EllipseStyle-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-GStyle"></span>

### GStyle

Transforms, layout participation, and shared style properties for Group.

```ts
interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle
```

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

#### See also

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

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

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

[Group](/reference/components/group/)

[PibblDragHandleStyle](/reference/types/events/#pibbldraghandlestyle)

[HtmlBoxStyle](/reference/types/html-box/#htmlboxstyle)

[View source — packages/core/src/lib/components/g.ts:43](/source/packages/core/src/lib/components/g-ts/#L43)

#### Properties and methods

<span id="api-GStyle-scaleX"></span>
<details>
<summary>scaleX (optional)</summary>


```ts
scaleX?: number | undefined
```

Horizontal scale factor. See GStyle.

[View source — packages/core/src/lib/components/g.ts:45](/source/packages/core/src/lib/components/g-ts/#L45)

</details>

<span id="api-GStyle-scaleY"></span>
<details>
<summary>scaleY (optional)</summary>


```ts
scaleY?: number | undefined
```

Vertical scale factor. See GStyle.

[View source — packages/core/src/lib/components/g.ts:47](/source/packages/core/src/lib/components/g-ts/#L47)

</details>

<span id="api-GStyle-rotationDegrees"></span>
<details>
<summary>rotationDegrees (optional)</summary>


```ts
rotationDegrees?: number | undefined
```

Clockwise rotation in degrees.

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

</details>

<span id="api-GStyle-rotationOrigin"></span>
<details>
<summary>rotationOrigin (optional)</summary>


```ts
rotationOrigin?: [number, number] | undefined
```

Point around which the rotation is applied. See GStyle.

[View source — packages/core/src/lib/components/g.ts:51](/source/packages/core/src/lib/components/g-ts/#L51)

</details>

<span id="api-GStyle-translateX"></span>
<details>
<summary>translateX (optional)</summary>


```ts
translateX?: number | undefined
```

Horizontal translation in the current logical coordinate system. See GStyle.

[View source — packages/core/src/lib/components/g.ts:53](/source/packages/core/src/lib/components/g-ts/#L53)

</details>

<span id="api-GStyle-translateY"></span>
<details>
<summary>translateY (optional)</summary>


```ts
translateY?: number | undefined
```

Vertical translation in the current logical coordinate system. See GStyle.

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

</details>

<span id="api-GStyle-skewX"></span>
<details>
<summary>skewX (optional)</summary>


```ts
skewX?: number | undefined
```

Horizontal skew angle in degrees.

[View source — packages/core/src/lib/components/g.ts:57](/source/packages/core/src/lib/components/g-ts/#L57)

</details>

<span id="api-GStyle-skewY"></span>
<details>
<summary>skewY (optional)</summary>


```ts
skewY?: number | undefined
```

Vertical skew angle in degrees.

[View source — packages/core/src/lib/components/g.ts:59](/source/packages/core/src/lib/components/g-ts/#L59)

</details>

<span id="api-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-GStyle-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-HorizontalLineStyle"></span>

### HorizontalLineStyle

Supported geometry and presentation properties for HorizontalLine.

```ts
interface HorizontalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'>
```

Related API: [HorizontalLineStyle](/reference/types/styles/#horizontallinestyle), [SystemStyle](/reference/types/styles/#systemstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle), [LineStyle](/reference/types/styles/#linestyle).

#### See also

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

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

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

[LineStyle](/reference/types/styles/#linestyle)

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

[PixelGridAlignment](/reference/types/styles/#pixelgridalignment)

[HorizontalLine](/reference/components/horizontal-line/)

[View source — packages/core/src/lib/components/horizontal-line.ts:50](/source/packages/core/src/lib/components/horizontal-line-ts/#L50)

#### Properties and methods

<span id="api-HorizontalLineStyle-y"></span>
<details>
<summary>y</summary>


```ts
y: number | `${number}%`
```

Vertical coordinate or displacement in the containing coordinate system. See Length.

[View source — packages/core/src/lib/components/horizontal-line.ts:55](/source/packages/core/src/lib/components/horizontal-line-ts/#L55)

</details>

<span id="api-HorizontalLineStyle-x1"></span>
<details>
<summary>x1 (optional)</summary>


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

Horizontal coordinate of the first endpoint. See Length.

[View source — packages/core/src/lib/components/horizontal-line.ts:57](/source/packages/core/src/lib/components/horizontal-line-ts/#L57)

</details>

<span id="api-HorizontalLineStyle-x2"></span>
<details>
<summary>x2 (optional)</summary>


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

Horizontal coordinate of the second endpoint. See Length.

[View source — packages/core/src/lib/components/horizontal-line.ts:59](/source/packages/core/src/lib/components/horizontal-line-ts/#L59)

</details>

<span id="api-HorizontalLineStyle-alignToPixelGrid"></span>
<details>
<summary>alignToPixelGrid (optional)</summary>


```ts
alignToPixelGrid?: PixelGridAlignment | undefined
```

Related API: [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.

[View source — packages/core/src/lib/components/horizontal-line.ts:63](/source/packages/core/src/lib/components/horizontal-line-ts/#L63)

</details>

<span id="api-HorizontalLineStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
HorizontalLineStyle.

[View source — packages/core/src/lib/components/horizontal-line.ts:68](/source/packages/core/src/lib/components/horizontal-line-ts/#L68)

</details>

<span id="api-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-HorizontalLineStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-HorizontalLineStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-HorizontalLineStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-HorizontalLineStyle-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-HorizontalLineStyle-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-HorizontalLineStyle-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-LayerStyle"></span>

### LayerStyle

Supported geometry and presentation properties for Layer.

```ts
interface LayerStyle extends SystemStyle, BoxStyle, LayoutItemStyle
```

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

#### See also

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

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

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

[Layer](/reference/components/layer/)

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

#### Properties and methods

<span id="api-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LayerStyle-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-LineStyle"></span>

### LineStyle

Supported geometry and presentation properties for Line.

```ts
interface LineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<PaintStyle, 'fill'>, CursorStyle
```

Related API: [LineStyle](/reference/types/styles/#linestyle), [SystemStyle](/reference/types/styles/#systemstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle).

#### See also

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

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

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

[Line](/reference/components/line/)

[HorizontalLineStyle](/reference/types/styles/#horizontallinestyle)

[VerticalLineStyle](/reference/types/styles/#verticallinestyle)

[View source — packages/core/src/lib/components/line.ts:51](/source/packages/core/src/lib/components/line-ts/#L51)

#### Properties and methods

<span id="api-LineStyle-coords"></span>
<details>
<summary>coords</summary>


```ts
coords: [number, number][]
```

Ordered coordinate pairs describing the path vertices. See LineStyle.

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

</details>

<span id="api-LineStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
LineStyle.

[View source — packages/core/src/lib/components/line.ts:59](/source/packages/core/src/lib/components/line-ts/#L59)

</details>

<span id="api-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-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-LineStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-LineStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-LineStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-LineStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-LineStyle-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-LineStyle-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-LineStyle-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-PolygonStyle"></span>

### PolygonStyle

Supported geometry and presentation properties for Polygon.

```ts
interface PolygonStyle extends
    RoundedCornerStyle,
    SystemStyle,
    PaintStyle,
    CursorStyle,
    BoxStyle,
    LayoutItemStyle
```

Related API: [PolygonStyle](/reference/types/styles/#polygonstyle), [RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle)

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[Polygon](/reference/components/polygon/)

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

#### Properties and methods

<span id="api-PolygonStyle-coords"></span>
<details>
<summary>coords</summary>


```ts
coords: [number, number][]
```

Ordered coordinate pairs describing the path vertices. See PolygonStyle.

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

</details>

<span id="api-PolygonStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
PolygonStyle.

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

</details>

<span id="api-PolygonStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


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

Uniform corner radius used where no per-corner override is supplied. See Length.

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

</details>

<span id="api-PolygonStyle-cornerRadii"></span>
<details>
<summary>cornerRadii (optional)</summary>


```ts
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefined
```

Per-corner radii; nullish entries use the uniform corner radius. See Length.

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

</details>

<span id="api-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-PolygonStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-PolygonStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-PolygonStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-PolygonStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-PolygonStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-PolygonStyle-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-PolygonStyle-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-PolygonStyle-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-RegularPolygonStyle"></span>

### RegularPolygonStyle

Supported geometry and presentation properties for RegularPolygon.

```ts
type RegularPolygonStyle = RegularPolygonCommonStyle &
  RegularPolygonSizeStyle &
  SystemStyle &
  PaintStyle &
  CursorStyle &
  BoxStyle &
  LayoutItemStyle
```

Related API: [RegularPolygonStyle](/reference/types/styles/#regularpolygonstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[RegularPolygon](/reference/components/regular-polygon/)

[View source — packages/core/src/lib/components/regular-polygon.ts:130](/source/packages/core/src/lib/components/regular-polygon-ts/#L130)

#### Properties and methods

<span id="api-RegularPolygonStyle-sides"></span>
<details>
<summary>sides</summary>


```ts
sides: number
```

Number of sides of the regular polygon. See RegularPolygonCommonStyle.

[View source — packages/core/src/lib/components/regular-polygon.ts:57](/source/packages/core/src/lib/components/regular-polygon-ts/#L57)

</details>

<span id="api-RegularPolygonStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

[View source — packages/core/src/lib/components/regular-polygon.ts:59](/source/packages/core/src/lib/components/regular-polygon-ts/#L59)

</details>

<span id="api-RegularPolygonStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

[View source — packages/core/src/lib/components/regular-polygon.ts:61](/source/packages/core/src/lib/components/regular-polygon-ts/#L61)

</details>

<span id="api-RegularPolygonStyle-rotation"></span>
<details>
<summary>rotation (optional)</summary>


```ts
rotation?: number | undefined
```

Rotation applied to the containing geometry. See RegularPolygonCommonStyle.

[View source — packages/core/src/lib/components/regular-polygon.ts:63](/source/packages/core/src/lib/components/regular-polygon-ts/#L63)

</details>

<span id="api-RegularPolygonStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
RegularPolygonCommonStyle.

[View source — packages/core/src/lib/components/regular-polygon.ts:68](/source/packages/core/src/lib/components/regular-polygon-ts/#L68)

</details>

<span id="api-RegularPolygonStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


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

Uniform corner radius used where no per-corner override is supplied. See Length.

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

</details>

<span id="api-RegularPolygonStyle-cornerRadii"></span>
<details>
<summary>cornerRadii (optional)</summary>


```ts
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefined
```

Per-corner radii; nullish entries use the uniform corner radius. See Length.

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

</details>

<span id="api-RegularPolygonStyle-circumradius"></span>
<details>
<summary>circumradius (optional)</summary>


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

Distance from the polygon center to a vertex. See Length.
Not accepted in this variant; use the alternative fields instead. See
RegularPolygonSizeStyle.

[View source — packages/core/src/lib/components/regular-polygon.ts:79](/source/packages/core/src/lib/components/regular-polygon-ts/#L79)

</details>

<span id="api-RegularPolygonStyle-inradius"></span>
<details>
<summary>inradius (optional)</summary>


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

Not accepted in this variant; use the alternative fields instead. See
RegularPolygonSizeStyle.
Distance from the polygon center to an edge. See Length.

[View source — packages/core/src/lib/components/regular-polygon.ts:84](/source/packages/core/src/lib/components/regular-polygon-ts/#L84)

</details>

<span id="api-RegularPolygonStyle-sideLength"></span>
<details>
<summary>sideLength (optional)</summary>


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

Not accepted in this variant; use the alternative fields instead. See
RegularPolygonSizeStyle.
Length of one polygon edge. See Length.

[View source — packages/core/src/lib/components/regular-polygon.ts:89](/source/packages/core/src/lib/components/regular-polygon-ts/#L89)

</details>

<span id="api-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-RegularPolygonStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-RegularPolygonStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-RegularPolygonStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-RegularPolygonStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-RegularPolygonStyle-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-StarStyle"></span>

### StarStyle

Supported geometry and presentation properties for Star.

```ts
interface StarStyle extends
    RoundedCornerStyle,
    SystemStyle,
    PaintStyle,
    CursorStyle,
    BoxStyle,
    LayoutItemStyle
```

Related API: [StarStyle](/reference/types/styles/#starstyle), [RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle)

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[Star](/reference/components/star/)

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

#### Properties and methods

<span id="api-StarStyle-points"></span>
<details>
<summary>points</summary>


```ts
points: number
```

Points defining the geometry or reported by the contact query. See StarStyle.

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

</details>

<span id="api-StarStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

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

</details>

<span id="api-StarStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

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

</details>

<span id="api-StarStyle-outerRadius"></span>
<details>
<summary>outerRadius</summary>


```ts
outerRadius: number | `${number}%`
```

Radius of the outer boundary. See Length.

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

</details>

<span id="api-StarStyle-innerRadius"></span>
<details>
<summary>innerRadius</summary>


```ts
innerRadius: number | `${number}%`
```

Radius of the inner boundary. See Length.

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

</details>

<span id="api-StarStyle-rotation"></span>
<details>
<summary>rotation (optional)</summary>


```ts
rotation?: number | undefined
```

Rotation applied to the containing geometry. See StarStyle.

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

</details>

<span id="api-StarStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
StarStyle.

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

</details>

<span id="api-StarStyle-cornerRadii"></span>
<details>
<summary>cornerRadii (optional)</summary>


```ts
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefined
```

Per-corner radii; nullish entries use the uniform corner radius. See Length.

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

</details>

<span id="api-StarStyle-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-StarStyle-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-StarStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


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

Uniform corner radius used where no per-corner override is supplied. See Length.

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

</details>

<span id="api-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-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-StarStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-StarStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-StarStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-StarStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-StarStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-StarStyle-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-StarStyle-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-StarStyle-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-VerticalLineStyle"></span>

### VerticalLineStyle

Supported geometry and presentation properties for VerticalLine.

```ts
interface VerticalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'>
```

Related API: [VerticalLineStyle](/reference/types/styles/#verticallinestyle), [SystemStyle](/reference/types/styles/#systemstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle), [LineStyle](/reference/types/styles/#linestyle).

#### See also

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

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

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

[LineStyle](/reference/types/styles/#linestyle)

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

[PixelGridAlignment](/reference/types/styles/#pixelgridalignment)

[VerticalLine](/reference/components/vertical-line/)

[View source — packages/core/src/lib/components/vertical-line.ts:50](/source/packages/core/src/lib/components/vertical-line-ts/#L50)

#### Properties and methods

<span id="api-VerticalLineStyle-x"></span>
<details>
<summary>x</summary>


```ts
x: number | `${number}%`
```

Horizontal coordinate or displacement in the containing coordinate system. See Length
.

[View source — packages/core/src/lib/components/vertical-line.ts:56](/source/packages/core/src/lib/components/vertical-line-ts/#L56)

</details>

<span id="api-VerticalLineStyle-y1"></span>
<details>
<summary>y1 (optional)</summary>


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

Vertical coordinate of the first endpoint. See Length.

[View source — packages/core/src/lib/components/vertical-line.ts:58](/source/packages/core/src/lib/components/vertical-line-ts/#L58)

</details>

<span id="api-VerticalLineStyle-y2"></span>
<details>
<summary>y2 (optional)</summary>


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

Vertical coordinate of the second endpoint. See Length.

[View source — packages/core/src/lib/components/vertical-line.ts:60](/source/packages/core/src/lib/components/vertical-line-ts/#L60)

</details>

<span id="api-VerticalLineStyle-alignToPixelGrid"></span>
<details>
<summary>alignToPixelGrid (optional)</summary>


```ts
alignToPixelGrid?: PixelGridAlignment | undefined
```

Related API: [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.

[View source — packages/core/src/lib/components/vertical-line.ts:64](/source/packages/core/src/lib/components/vertical-line-ts/#L64)

</details>

<span id="api-VerticalLineStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
VerticalLineStyle.

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

</details>

<span id="api-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-VerticalLineStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-VerticalLineStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-VerticalLineStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-VerticalLineStyle-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-VerticalLineStyle-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-VerticalLineStyle-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-WedgeStyle"></span>

### WedgeStyle

Supported geometry and presentation properties for Wedge.

```ts
interface WedgeStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [WedgeStyle](/reference/types/styles/#wedgestyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[Wedge](/reference/components/wedge/)

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

#### Properties and methods

<span id="api-WedgeStyle-radius"></span>
<details>
<summary>radius</summary>


```ts
radius: number | `${number}%`
```

Radius in the coordinate system of this geometry or effect. See Length.

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

</details>

<span id="api-WedgeStyle-startAngle"></span>
<details>
<summary>startAngle</summary>


```ts
startAngle: number
```

Angle at which the arc or slice begins. See WedgeStyle.

[View source — packages/core/src/lib/components/wedge.ts:60](/source/packages/core/src/lib/components/wedge-ts/#L60)

</details>

<span id="api-WedgeStyle-endAngle"></span>
<details>
<summary>endAngle</summary>


```ts
endAngle: number
```

Angle at which the arc or slice ends. See WedgeStyle.

[View source — packages/core/src/lib/components/wedge.ts:62](/source/packages/core/src/lib/components/wedge-ts/#L62)

</details>

<span id="api-WedgeStyle-cx"></span>
<details>
<summary>cx (optional)</summary>


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

Horizontal coordinate of the center. See Length.

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

</details>

<span id="api-WedgeStyle-cy"></span>
<details>
<summary>cy (optional)</summary>


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

Vertical coordinate of the center. See Length.

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

</details>

<span id="api-WedgeStyle-counterclockwise"></span>
<details>
<summary>counterclockwise (optional)</summary>


```ts
counterclockwise?: boolean | undefined
```

Whether the arc follows the counterclockwise direction. See WedgeStyle.

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

</details>

<span id="api-WedgeStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
WedgeStyle.

[View source — packages/core/src/lib/components/wedge.ts:73](/source/packages/core/src/lib/components/wedge-ts/#L73)

</details>

<span id="api-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-WedgeStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-WedgeStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-WedgeStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-WedgeStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-WedgeStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-WedgeStyle-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-WedgeStyle-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-WedgeStyle-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-CursorStyle"></span>

### CursorStyle

Cursor presentation for an interactive primitive.

```ts
interface CursorStyle extends SystemStyle
```

Related API: [CursorStyle](/reference/types/styles/#cursorstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

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

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

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

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

#### Properties and methods

<span id="api-CursorStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-CursorStyle-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-CursorStyle-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-CursorStyle-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-ImgStyle"></span>

### ImgStyle

Image source, sizing, opacity, outline, and pixel-grid alignment.

```ts
interface ImgStyle extends SystemStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [ImgStyle](/reference/types/styles/#imgstyle), [SystemStyle](/reference/types/styles/#systemstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[StrokeStyle](/reference/types/styles/#strokestyle)

[PixelGridAlignment](/reference/types/styles/#pixelgridalignment)

[Image](/reference/components/image/)

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

#### Properties and methods

<span id="api-ImgStyle-src"></span>
<details>
<summary>src</summary>


```ts
src: string
```

Image URL loaded by the drawing primitive. See ImgStyle.

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

</details>

<span id="api-ImgStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-ImgStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See ImgStyle.

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

</details>

<span id="api-ImgStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See ImgStyle.

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

</details>

<span id="api-ImgStyle-alignToPixelGrid"></span>
<details>
<summary>alignToPixelGrid (optional)</summary>


```ts
alignToPixelGrid?: PixelGridAlignment | undefined
```

Related API: [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.

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

</details>

<span id="api-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-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-ImgStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-ImgStyle-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-ImgStyle-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-ImgStyle-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-PaintStyle"></span>

### PaintStyle

Fill, stroke, stroke width, and opacity shared by drawing primitives.

```ts
interface PaintStyle extends SystemStyle
```

Related API: [PaintStyle](/reference/types/styles/#paintstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

[FillStyle](/reference/types/styles/#fillstyle)

[StrokeStyle](/reference/types/styles/#strokestyle)

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

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

[SvgPathStyle](/reference/types/styles/#svgpathstyle)

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

#### Properties and methods

<span id="api-PaintStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-PaintStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-PaintStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-PaintStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-PaintStyle-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-PaintStyle-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-PaintStyle-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-PathStyle"></span>

### PathStyle

Geometry, paint, layout, and interaction width for drawing a path.

```ts
interface PathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [PathStyle](/reference/types/styles/#pathstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[PathGeometry](/reference/functions/path-geometry/)

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

#### Properties and methods

<span id="api-PathStyle-d"></span>
<details>
<summary>d</summary>


```ts
d: Path2D | PathGeometry
```

Related API: [PathGeometry](/reference/functions/path-geometry/).

Geometry to draw or clip, supplied in the declared path representation. See
PathGeometry.

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

</details>

<span id="api-PathStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
PathStyle.

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

</details>

<span id="api-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-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-PathStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-PathStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-PathStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-PathStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-PathStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-PathStyle-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-PathStyle-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-PathStyle-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-RectStyle"></span>

### RectStyle

Rectangle dimensions, paint, corner rounding, and pixel-grid alignment.

```ts
interface RectStyle extends
    RoundedCornerStyle,
    SystemStyle,
    PaintStyle,
    CursorStyle,
    BoxStyle,
    LayoutItemStyle
```

Related API: [RectStyle](/reference/types/styles/#rectstyle), [RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

[RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle)

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

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

[PixelGridAlignment](/reference/types/styles/#pixelgridalignment)

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

#### Properties and methods

<span id="api-RectStyle-width"></span>
<details>
<summary>width</summary>


```ts
width: Length
```

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:260](/source/packages/core/src/lib/style/types-ts/#L260)

</details>

<span id="api-RectStyle-height"></span>
<details>
<summary>height</summary>


```ts
height: Length
```

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:262](/source/packages/core/src/lib/style/types-ts/#L262)

</details>

<span id="api-RectStyle-alignToPixelGrid"></span>
<details>
<summary>alignToPixelGrid (optional)</summary>


```ts
alignToPixelGrid?: PixelGridAlignment | undefined
```

Related API: [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.

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

</details>

<span id="api-RectStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
RectStyle.

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

</details>

<span id="api-RectStyle-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-RectStyle-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-RectStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


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

Uniform corner radius used where no per-corner override is supplied. See Length.

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

</details>

<span id="api-RectStyle-cornerRadii"></span>
<details>
<summary>cornerRadii (optional)</summary>


```ts
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefined
```

Per-corner radii; nullish entries use the uniform corner radius. See Length.

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

</details>

<span id="api-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-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-RectStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-RectStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-RectStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-RectStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-RectStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-RectStyle-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-RectStyle-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-RectStyle-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-SvgPathStyle"></span>

### SvgPathStyle

SVG path data together with paint, layout, and interaction styling.

```ts
interface SvgPathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [SvgPathStyle](/reference/types/styles/#svgpathstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[SvgPath](/reference/components/svg-path/)

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

#### Properties and methods

<span id="api-SvgPathStyle-d"></span>
<details>
<summary>d</summary>


```ts
d: string
```

Geometry to draw or clip, supplied in the declared path representation. See
SvgPathStyle.

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

</details>

<span id="api-SvgPathStyle-lineInteractionWidth"></span>
<details>
<summary>lineInteractionWidth (optional)</summary>


```ts
lineInteractionWidth?: number | undefined
```

Width used for line hit testing independently of the visible stroke width. See
SvgPathStyle.

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

</details>

<span id="api-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-SvgPathStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-SvgPathStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-SvgPathStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-SvgPathStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-SvgPathStyle-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-SvgPathStyle-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-SvgPathStyle-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-TextStyle"></span>

### TextStyle

Font, alignment, wrapping, overflow fitting, paint, and layout of Canvas text.

```ts
interface TextStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle
```

Related API: [TextStyle](/reference/types/styles/#textstyle), [SystemStyle](/reference/types/styles/#systemstyle), [PaintStyle](/reference/types/styles/#paintstyle), [CursorStyle](/reference/types/styles/#cursorstyle), [BoxStyle](/reference/types/layout/#boxstyle), [LayoutItemStyle](/reference/types/layout/#layoutitemstyle).

#### See also

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

[PaintStyle](/reference/types/styles/#paintstyle)

[CursorStyle](/reference/types/styles/#cursorstyle)

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

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

[TextFit](/reference/types/elements-components/#textfit)

[Text](/reference/components/text/)

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

#### Properties and methods

<span id="api-TextStyle-lineHeight"></span>
<details>
<summary>lineHeight (optional)</summary>


```ts
lineHeight?: number | undefined
```

Spacing between successive text lines. See TextStyle.

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

</details>

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


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

Whether content may wrap into additional lines. See TextStyle.

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

</details>

<span id="api-TextStyle-fit"></span>
<details>
<summary>fit (optional)</summary>


```ts
fit?: TextFit | undefined
```

Related API: [TextFit](/reference/types/elements-components/#textfit).

Policy for fitting content within its available box. See TextFit.

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

</details>

<span id="api-TextStyle-font"></span>
<details>
<summary>font (optional)</summary>


```ts
font?: string | undefined
```

Canvas font string used to draw or measure text. See TextStyle.

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

</details>

<span id="api-TextStyle-textBaseline"></span>
<details>
<summary>textBaseline (optional)</summary>


```ts
textBaseline?: CanvasTextBaseline | undefined
```

Canvas baseline used when placing text. See TextStyle.

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

</details>

<span id="api-TextStyle-textAlign"></span>
<details>
<summary>textAlign (optional)</summary>


```ts
textAlign?: CanvasTextAlign | undefined
```

Canvas horizontal alignment used when placing text. See TextStyle.

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

</details>

<span id="api-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-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-TextStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

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

</details>

<span id="api-TextStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

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

</details>

<span id="api-TextStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
strokeWidth?: number | undefined
```

Width of the painted outline. See PaintStyle.

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

</details>

<span id="api-TextStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
opacity?: number | undefined
```

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

Opacity of the painted result. See PaintStyle.

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

</details>

<span id="api-TextStyle-cursor"></span>
<details>
<summary>cursor (optional)</summary>


```ts
cursor?: string | undefined
```

Cursor shown while this target owns pointer presentation. See CursorStyle.

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

</details>

<span id="api-TextStyle-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-TextStyle-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-TextStyle-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-RoundedCornerStyle"></span>

### RoundedCornerStyle

Uniform and per-vertex corner radii for supported drawing primitives.

```ts
interface RoundedCornerStyle
```

Related API: [RoundedCornerStyle](/reference/types/styles/#roundedcornerstyle).

#### See also

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

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

[PolygonStyle](/reference/types/styles/#polygonstyle)

[StarStyle](/reference/types/styles/#starstyle)

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

#### Properties and methods

<span id="api-RoundedCornerStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


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

Uniform corner radius used where no per-corner override is supplied. See Length.

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

</details>

<span id="api-RoundedCornerStyle-cornerRadii"></span>
<details>
<summary>cornerRadii (optional)</summary>


```ts
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefined
```

Per-corner radii; nullish entries use the uniform corner radius. See Length.

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

</details>

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

### PibblSizeQuery

Conditions on the available containing size, in logical units. All bounds are inclusive.

<details>
<summary>Full type declaration</summary>

```ts
type PibblSizeQuery = Readonly<
  {
    /** Minimum permitted width. See {@link PibblSizeQuery}. */
    minWidth?: number;
    /** Maximum permitted width. See {@link PibblSizeQuery}. */
    maxWidth?: number;
    /** Minimum permitted height. See {@link PibblSizeQuery}. */
    minHeight?: number;
    /** Maximum permitted height. See {@link PibblSizeQuery}. */
    maxHeight?: number;
  } & (
    | {
        /** Minimum permitted width. See {@link PibblSizeQuery}. */
        minWidth: number;
      }
    | {
        /** Maximum permitted width. See {@link PibblSizeQuery}. */
        maxWidth: number;
      }
    | {
        /** Minimum permitted height. See {@link PibblSizeQuery}. */
        minHeight: number;
      }
    | {
        /** Maximum permitted height. See {@link PibblSizeQuery}. */
        maxHeight: number;
      }
  )
>
```

</details>

Related API: [PibblSizeQuery](/reference/types/styles/#pibblsizequery).

#### See also

[PibblStyleRule](/reference/types/styles/#pibblstylerule)

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

#### Properties and methods

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


```ts
minWidth?: number | undefined
```

Minimum permitted width. See PibblSizeQuery.

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

</details>

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


```ts
maxWidth?: number | undefined
```

Maximum permitted width. See PibblSizeQuery.

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

</details>

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


```ts
minHeight?: number | undefined
```

Minimum permitted height. See PibblSizeQuery.

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

</details>

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


```ts
maxHeight?: number | undefined
```

Maximum permitted height. See PibblSizeQuery.

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

</details>

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

### PibblStyleRule

A conditional style contribution selected by a responsive size query.

```ts
type PibblStyleRule<S extends SystemStyle> = Readonly<{
  /** Query that selects a style rule or resolves a hover result. See {@link PibblSizeQuery}. */
  query: PibblSizeQuery;
  /** Declared presentation and layout properties. See {@link SignalStyle}. */
  style: Partial<SignalStyle<S>> & {
    /** Not accepted in this variant; use the alternative fields instead. See {@link PibblStyleRule}. */
    readonly when?: never;
  };
}>
```

Related API: [PibblStyleRule](/reference/types/styles/#pibblstylerule), [SystemStyle](/reference/types/styles/#systemstyle), [PibblSizeQuery](/reference/types/styles/#pibblsizequery).

#### See also

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

[PibblSizeQuery](/reference/types/styles/#pibblsizequery)

`SignalStyle`

[PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle)

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

#### Properties and methods

<span id="api-PibblStyleRule-query"></span>
<details>
<summary>query</summary>


```ts
query: PibblSizeQuery
```

Related API: [PibblSizeQuery](/reference/types/styles/#pibblsizequery).

Query that selects a style rule or resolves a hover result. See PibblSizeQuery.

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

</details>

<span id="api-PibblStyleRule-style"></span>
<details>
<summary>style</summary>


```ts
style: Partial<Readonly<{ [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }>> & { readonly when?: never; }
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Declared presentation and layout properties. See SignalStyle.

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

</details>

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

### PibblResponsiveStyle

Local ordered patches. Layout-item rules query the parent; internal rules query the assigned box.

```ts
type PibblResponsiveStyle<S extends SystemStyle> = SignalStyle<S> & Readonly<{
  /**
   * Ordered local patches against the available containing size, not this
   * receiver's final size. All matches merge in order; later fields win.
   * Hoist stable lists for Layer cache reuse. Intrinsic responsive measurement
   * is unsupported: use a definite allocation and adapt its inner content.
   */
  when?: readonly PibblStyleRule<S>[];
}>
```

Related API: [PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle), [SystemStyle](/reference/types/styles/#systemstyle), [Layer](/reference/components/layer/), [PibblStyleRule](/reference/types/styles/#pibblstylerule).

#### See also

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

`SignalStyle`

[PibblStyleRule](/reference/types/styles/#pibblstylerule)

[PrimitiveInput](/reference/types/styles/#primitiveinput)

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

#### Properties and methods

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


```ts
transition?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["transition"] | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

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-PibblResponsiveStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["custom"] | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

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-PibblResponsiveStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["filter"] | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

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-PibblResponsiveStyle-when"></span>
<details>
<summary>when (optional)</summary>


```ts
when?: readonly Readonly<{ query: PibblSizeQuery; style: Partial<Readonly<{ [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }>> & { readonly when?: never; }; }>[] | undefined
```

Related API: [PibblSizeQuery](/reference/types/styles/#pibblsizequery), [SignalValue](/reference/types/signal-inputs/#signalvalue).

Ordered local patches against the available containing size, not this
receiver's final size. All matches merge in order; later fields win.
Hoist stable lists for Layer cache reuse. Intrinsic responsive measurement
is unsupported: use a definite allocation and adapt its inner content.

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

</details>

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

### PrimitiveInputOf

Extracts the authored-input type from a branded primitive component.

```ts
type PrimitiveInputOf<C> = C extends PibblPrimitiveComponent<any, infer I> ? I : never
```

Related API: [PrimitiveInputOf](/reference/types/styles/#primitiveinputof), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent).

#### See also

[PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent)

[View source — packages/core/src/lib/element/types.ts:141](/source/packages/core/src/lib/element/types-ts/#L141)

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

### PrimitiveCapabilities

Declares the style and measurement features supported by a custom primitive.

```ts
interface PrimitiveCapabilities<P, S extends SystemStyle = SystemStyle, N extends SystemStyle = S, R extends SystemStyle = N>
```

Related API: [PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

[SpecifiedStyle](/reference/types/styles/#specifiedstyle)

[NormalizedStyle](/reference/types/styles/#normalizedstyle)

[StyleResolutionContext](/reference/types/styles/#styleresolutioncontext)

[ResolvedStyle](/reference/types/styles/#resolvedstyle)

[MeasureInput](/reference/types/layout/#measureinput)

[PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops)

[MeasureResult](/reference/types/layout/#measureresult)

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

#### Properties and methods

<span id="api-PrimitiveCapabilities-preserveSignalProps"></span>
<details>
<summary>preserveSignalProps (optional)</summary>


```ts
preserveSignalProps?: readonly PreservedSignalPropKey<P>[] | undefined
```

Names props whose signal identity is preserved for the primitive program. See
PreservedSignalPropKey.

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

</details>

<span id="api-PrimitiveCapabilities-childInput"></span>
<details>
<summary>childInput (optional)</summary>


```ts
childInput?: "structural" | "text" | undefined
```

Declares how the primitive receives and resolves its children. See
PrimitiveCapabilities.

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

</details>

<span id="api-PrimitiveCapabilities-normalizeStyle"></span>
<details>
<summary>normalizeStyle (optional)</summary>


```ts
normalizeStyle?: ((style: SpecifiedStyle<S>) => NormalizedStyle<N>) | undefined
```

Related API: [SpecifiedStyle](/reference/types/styles/#specifiedstyle), [NormalizedStyle](/reference/types/styles/#normalizedstyle).

Applies primitive defaults and shorthand normalization before layout resolution. See
SpecifiedStyle, NormalizedStyle.

##### Parameters

- **`style`** — Specified style values before normalization. See [SpecifiedStyle](/reference/types/styles/#specifiedstyle).

##### Returns

Normalized style with the primitive's shorthand and defaults applied. See
[NormalizedStyle](/reference/types/styles/#normalizedstyle) .

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

</details>

<span id="api-PrimitiveCapabilities-resolveStyle"></span>
<details>
<summary>resolveStyle (optional)</summary>


```ts
resolveStyle?: ((style: NormalizedStyle<N>, context: Readonly<StyleResolutionContext>) => ResolvedStyle<R>) | undefined
```

Related API: [NormalizedStyle](/reference/types/styles/#normalizedstyle), [StyleResolutionContext](/reference/types/styles/#styleresolutioncontext), [ResolvedStyle](/reference/types/styles/#resolvedstyle).

Resolves normalized style using the current layout context. See NormalizedStyle,
StyleResolutionContext, ResolvedStyle.

##### Parameters

- **`style`** — Normalized style to resolve. See [NormalizedStyle](/reference/types/styles/#normalizedstyle).

- **`context`** — Layout and diagnostic context for resolution. See
[StyleResolutionContext](/reference/types/styles/#styleresolutioncontext) .

##### Returns

Resolved style ready for rendering. See [ResolvedStyle](/reference/types/styles/#resolvedstyle).

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

</details>

<span id="api-PrimitiveCapabilities-measure"></span>
<details>
<summary>measure (optional)</summary>


```ts
measure?: ((input: MeasureInput<PrimitiveProgramProps<P>, N>) => MeasureResult) | undefined
```

Related API: [MeasureInput](/reference/types/layout/#measureinput), [PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops), [MeasureResult](/reference/types/layout/#measureresult).

Measures declared primitive inputs without painting or retaining draw commands. See
MeasureInput, PrimitiveProgramProps, MeasureResult.

##### Parameters

- **`input`** — Props, normalized style, constraints, and nested measurement services. See
[MeasureInput](/reference/types/layout/#measureinput) , [PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops) .

##### Returns

Measured dimensions or an unsupported measurement result. See [MeasureResult](/reference/types/layout/#measureresult).

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

</details>

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

### PrimitiveInput

The authored props and signal-capable inputs accepted by a primitive.

```ts
type PrimitiveInput<P, S extends SystemStyle = SystemStyle> = SignalProgramProps<P> & StyleField<PibblResponsiveStyle<SpecifiedStyle<S>>>
```

Related API: [PrimitiveInput](/reference/types/styles/#primitiveinput), [SystemStyle](/reference/types/styles/#systemstyle), [PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle), [SpecifiedStyle](/reference/types/styles/#specifiedstyle).

#### See also

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

`SignalProgramProps`

[PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle)

[SpecifiedStyle](/reference/types/styles/#specifiedstyle)

[PibblPhysics2DPropExtension](/reference/types/elements-components/#pibblphysics2dpropextension)

[definePrimitive](/reference/functions/define-primitive/)

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

#### Properties and methods

<span id="api-PrimitiveInput-style"></span>
<details>
<summary>style (optional)</summary>


```ts
style?: Signal<PibblResponsiveStyle<Readonly<S>> | undefined> | Signal<PibblResponsiveStyle<Readonly<S>>> | PibblResponsiveStyle<Readonly<S>> | undefined
```

Related API: [Signal](/reference/types/canvas-runtime/#signal), [PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle).

Declared presentation and layout properties. See SignalValue.

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

</details>

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

### PrimitiveProgramProps

Resolved props passed into a primitive's rendering program.

```ts
type PrimitiveProgramProps<P> = 0 extends 1 & P
  ? P
  : Extract<UnionKeys<P>, PrimitiveReservedKey> extends never
    ? P
    : never
```

Related API: [PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops).

#### See also

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[PrimitiveRender](/reference/types/styles/#primitiverender)

[definePrimitive](/reference/functions/define-primitive/)

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

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

### PrimitiveRender

The synchronous drawing callback of a custom primitive.

```ts
type PrimitiveRender<P, R extends SystemStyle = SystemStyle> = (
  props: Readonly<PrimitiveProgramProps<P>>,
  style: ResolvedStyle<R>,
  context: RenderingContext2D,
) => import('./element/types.js').PibblNodeInput | void
```

Related API: [PrimitiveRender](/reference/types/styles/#primitiverender), [SystemStyle](/reference/types/styles/#systemstyle), [PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops), [ResolvedStyle](/reference/types/styles/#resolvedstyle), [RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d), [PibblNodeInput](/reference/types/elements-components/#pibblnodeinput).

#### Parameters

- **`props`** — Component's resolved non-style inputs. See [PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops).

- **`style`** — Resolved primitive style. See [ResolvedStyle](/reference/types/styles/#resolvedstyle).

- **`context`** — Active Canvas 2D context. See [RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d).

#### Returns

Child nodes to traverse after the primitive, or no children.

#### See also

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

[PrimitiveProgramProps](/reference/types/styles/#primitiveprogramprops)

[ResolvedStyle](/reference/types/styles/#resolvedstyle)

[RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d)

[definePrimitive](/reference/functions/define-primitive/)

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

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

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

### FillStyle

A Canvas fill or Pibbl texture paint accepted by drawing primitives.

```ts
type FillStyle = CanvasRenderingContext2D["fillStyle"] | import('./textures/texture.js').TexturePaint
```

Related API: [FillStyle](/reference/types/styles/#fillstyle), [TexturePaint](/reference/types/texture-resources/#texturepaint).

#### See also

[TexturePaint](/reference/types/texture-resources/#texturepaint)

[PaintStyle](/reference/types/styles/#paintstyle)

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

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

### PixelGridAlignment

Policy for aligning drawing geometry to the pixel grid.

```ts
type PixelGridAlignment = "none" | "round" | "ceil" | "floor"
```

Related API: [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

#### See also

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

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

[HorizontalLineStyle](/reference/types/styles/#horizontallinestyle)

[VerticalLineStyle](/reference/types/styles/#verticallinestyle)

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

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

### NormalizedStyle

Style after default values and shorthand normalization have been applied.

```ts
type NormalizedStyle<N extends SystemStyle> = Readonly<N>
```

Related API: [NormalizedStyle](/reference/types/styles/#normalizedstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[MeasureInput](/reference/types/layout/#measureinput)

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

#### Properties and methods

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


```ts
transition?: N["transition"] | undefined
```

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-NormalizedStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: N["custom"] | undefined
```

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-NormalizedStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: N["filter"] | undefined
```

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-ResolvedStyle"></span>

### ResolvedStyle

Style after input resolution, normalization, and layout resolution.

```ts
type ResolvedStyle<R extends SystemStyle> = Readonly<R>
```

Related API: [ResolvedStyle](/reference/types/styles/#resolvedstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[PrimitiveRender](/reference/types/styles/#primitiverender)

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

#### Properties and methods

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


```ts
transition?: R["transition"] | undefined
```

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-ResolvedStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: R["custom"] | undefined
```

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-ResolvedStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: R["filter"] | undefined
```

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-SpecifiedStyle"></span>

### SpecifiedStyle

The caller-specified style before normalization and layout resolution.

```ts
type SpecifiedStyle<S extends SystemStyle> = Readonly<S>
```

Related API: [SpecifiedStyle](/reference/types/styles/#specifiedstyle), [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

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

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[PrimitiveInput](/reference/types/styles/#primitiveinput)

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

#### Properties and methods

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


```ts
transition?: S["transition"] | undefined
```

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-SpecifiedStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
custom?: S["custom"] | undefined
```

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-SpecifiedStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
filter?: S["filter"] | undefined
```

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-StyleResolutionContext"></span>

### StyleResolutionContext

Parent and measurement context available during primitive style resolution.

```ts
interface StyleResolutionContext
```

Related API: [StyleResolutionContext](/reference/types/styles/#styleresolutioncontext).

#### See also

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

[Constraints](/reference/types/layout/#constraints)

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

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

#### Properties and methods

<span id="api-StyleResolutionContext-allocation"></span>
<details>
<summary>allocation</summary>


```ts
allocation: Readonly<LayoutBox>
```

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

The layout rectangle assigned by the parent. See LayoutBox.

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

</details>

<span id="api-StyleResolutionContext-percentageBasis"></span>
<details>
<summary>percentageBasis</summary>


```ts
percentageBasis: Readonly<LayoutBox>
```

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

The containing rectangle against which percentages resolve. See LayoutBox.

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

</details>

<span id="api-StyleResolutionContext-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:309](/source/packages/core/src/lib/types-ts/#L309)

</details>

<span id="api-StyleResolutionContext-component"></span>
<details>
<summary>component</summary>


```ts
component: string
```

Component identity or diagnostic name associated with this value. See
StyleResolutionContext.

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

</details>

<span id="api-StyleResolutionContext-algorithm"></span>
<details>
<summary>algorithm</summary>


```ts
algorithm: "render-dispatch"
```

Name of the layout algorithm producing this diagnostic or resolution. See
StyleResolutionContext.

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

</details>

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

### StrokeStyle

A Canvas stroke or Pibbl texture paint accepted by drawing primitives.

```ts
type StrokeStyle = CanvasRenderingContext2D["strokeStyle"] | import('./textures/texture.js').TexturePaint
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle), [TexturePaint](/reference/types/texture-resources/#texturepaint).

#### See also

[TexturePaint](/reference/types/texture-resources/#texturepaint)

[PaintStyle](/reference/types/styles/#paintstyle)

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

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

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

### SystemStyle

Transition bindings, pixel filters, and application-defined style extensions understood by the
runtime.

```ts
interface SystemStyle
```

Related API: [SystemStyle](/reference/types/styles/#systemstyle).

#### See also

[PibblFilter](/reference/types/filters/#pibblfilter)

[PibblStyleRule](/reference/types/styles/#pibblstylerule)

[PibblResponsiveStyle](/reference/types/styles/#pibblresponsivestyle)

[PrimitiveCapabilities](/reference/types/styles/#primitivecapabilities)

[PibblTransitionBinding](/reference/hooks/use-visibility-transition/)

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

#### Properties and methods

<span id="api-SystemStyle-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-SystemStyle-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-SystemStyle-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>

## 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

- [Rounded and circular marks](/minimal-examples/drawing/round-shapes/): Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. [Plain source](/minimal/drawing/round-shapes.tsx)
- [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. [Plain source](/minimal/drawing/composition.tsx)
- [Lines and authored paths](/minimal-examples/drawing/strokes-paths/): Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. [Plain source](/minimal/drawing/strokes-paths.tsx)
- [Define a Canvas primitive](/minimal-examples/lifecycle/primitive/): Supply synchronous drawing, style normalization, resolution, and opt-in measurement. [Plain source](/minimal/lifecycle/primitive.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)
- [Memoized hit paths](/minimal-examples/events/paths/): Rectangle, line, and SVG path hooks define three independent geometric click targets. [Plain source](/minimal/events/paths.tsx)
- [Polygon marks](/minimal-examples/drawing/polygons/): Draw a rounded triangle, regular hexagon, and five-point star. [Plain source](/minimal/drawing/polygons.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.