Skip to content

ui/build/layout/layout.shared

ui/build/layout/layout.shared

Type Aliases

ColumnParentContext

type ColumnParentContext =
  | {
  kind: "grid";
}
  | {
  count: () => number;
  kind: "columns";
};

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:22

LayoutAttributes

type LayoutAttributes = Omit<HTMLAttributes<HTMLDivElement>, "children"> & Pick<HTMLButtonAttributes, "type" | "disabled" | "form" | "name" | "value"> & Pick<HTMLAnchorAttributes, "href" | "target" | "rel" | "download" | "hreflang"> & Pick<HTMLLabelAttributes, "for"> & object;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:6

Attributes a primitive accepts: any element's, plus the few a button, a or label rendering needs (as="button" takes type and disabled; as="a" takes href).

Type Declaration

ref?
optional ref?: HTMLElement | null;

The rendered element, for measurement or focus.

LayoutElement

type LayoutElement =
  | "div"
  | "span"
  | "section"
  | "article"
  | "main"
  | "aside"
  | "header"
  | "footer"
  | "nav"
  | "form"
  | "fieldset"
  | "figure"
  | "figcaption"
  | "dl"
  | "ol"
  | "ul"
  | "li"
  | "button"
  | "a"
  | "label";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:19

The elements a layout primitive may render as.

The list is a whitelist of flow and inline containers, which is what keeps as from becoming a way to render a layout primitive as a heading or anything else that carries typography of its own. button, a and label are here because a control whose content is laid out is otherwise a raw flex element or a control wrapping a layout span. Semantic sectioning elements belong here — the point of as is to let a region be a <section> or an <article> without giving up the primitive's layout.

LayoutGap

type LayoutGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:20

LayoutPad

type LayoutPad = Exclude<LayoutGap, "xl">;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:21

ScrollAxis

type ScrollAxis = "x" | "y" | "both";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:36

ScrollPort

type ScrollPort = object;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:67

Properties

Property Modifier Type Defined in
element readonly HTMLElement | null apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:68

Variables

COLUMN_PARENT_CONTEXT

const COLUMN_PARENT_CONTEXT: unique symbol;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:28

GAP_CLASSES

const GAP_CLASSES: Record<LayoutGap, string>;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:33

The gap scale. Every stacking primitive spends it; it is exported for the same reason INSET_MX_CLASS is — a box that cannot be a primitive still owes the same rhythm.

INSET_CLASS

const INSET_CLASS: "px-4 py-2 sm:px-6" = "px-4 py-2 sm:px-6";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:54

The one app inset: content regions. The only legal consumer is the single inset owner.

INSET_MX_CLASS

const INSET_MX_CLASS: "mx-4 sm:mx-6" = "mx-4 sm:mx-6";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:73

Chrome that draws its own background and so cannot pad itself (tab list).

INSET_X_CLASS

const INSET_X_CLASS: "px-4 sm:px-6" = "px-4 sm:px-6";

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:71

Full-bleed chrome with its own vertical rhythm (PageHeader).

LAYOUT_INSET_CONTEXT

const LAYOUT_INSET_CONTEXT: unique symbol;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:60

Set by a Bound inset for its subtree: the page already owns the horizontal inset, so chrome that would otherwise supply its own (a default tab strip) aligns with the content instead of stepping in a second time.

PAD_CLASSES

const PAD_CLASSES: Record<LayoutPad, string>;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:52

ROW_GAP_CLASSES

const ROW_GAP_CLASSES: Record<LayoutGap, string>;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:35

The same scale on the block axis alone, for a grid whose rows sit tighter than its columns.

SCROLL_AXIS_CLASSES

const SCROLL_AXIS_CLASSES: Record<ScrollAxis, string>;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:51

The scrollport classes, per axis — the one definition of what "this region scrolls" means.

Per-axis overscroll-contain: an x-only reel must not trap the parent's vertical scroll, and the axis that does not scroll is clipped rather than left visible, so a wide child cannot paint outside the region.

Scroll is how a region declares itself a scrollport, and is what almost every caller wants. This token exists for the boxes Scroll cannot be: it fills its parent unconditionally, so a pane bounded by its own max-height (a popover, a collapsible) or by a fixed height (a chip reel) cannot be one — and neither can an element a third-party component or a ProseMirror editor owns. Those honour the same contract by naming it, the way INSET_MX_CLASS lets chrome that cannot pad itself still keep the app inset.

SCROLL_PORT_CONTEXT

const SCROLL_PORT_CONTEXT: unique symbol;

Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:66

Set by every Scroll for its subtree: the nearest element that scrolls vertically. An x-only reel forwards its parent's, so a virtual list in a lane of a horizontal board still finds the lane.