HeadingScope

Establishes an ambient heading level read by nested headings and scopes.

Deploying to the edge

Rendered as <h1>: no scope wraps this one.

Choosing a region

Rendered as <h2>: one level past the scope above.

Latency budgets

Rendered as <h3>.

No measurements yet

Empty.Title reads the same ambient depth, so it renders as <h3> too.

View code

<HeadingScope>
	<Heading>Deploying to the edge</Heading>
	<Text>Rendered as &lt;h1&gt;: no scope wraps this one.</Text>

	<HeadingScope>
		<Heading>Choosing a region</Heading>
		<Text>Rendered as &lt;h2&gt;: one level past the scope above.</Text>

		<HeadingScope>
			<Heading>Latency budgets</Heading>
			<Text>Rendered as &lt;h3&gt;.</Text>

			<Empty>
				<Empty.Title>No measurements yet</Empty.Title>
				<Empty.Description>
					Empty.Title reads the same ambient depth, so it renders as &lt;h3&gt; too.
				</Empty.Description>
			</Empty>
		</HeadingScope>
	</HeadingScope>
</HeadingScope>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { HeadingScope } from "@sdxc/ui";

Establishes an ambient heading level for descendants: an explicit level fixes it, otherwise one level past the nearest ancestor HeadingScope, read before this scope publishes its own depth, or 1 with no ancestor.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`level?`	`HeadingLevel`	Explicit semantic depth for this scope. Defaults to one level past the nearest ancestor scope's depth, or `1` where no scope wraps this one at all.

Also accepts everything in TagProps<"div">.

Other components this module publishes.

readAmbientLevel
resolveHeadingLevel