registry:ui · General
text — one word, three ways to say it
The family the Owner designed: base <Text> renders <p> by default (the Chakra <Text>-is-a-paragraph precedent) and mark switches the element and paint. ONE vocabulary — the prop value, the sugar name, and the HTML element are the same word: strong renders <strong> whether you wrote <Text mark="strong"> or <Strong>. mark is a LITERAL slot (defineLiteralSlot, own 'p' — the kbd variant precedent): element vocabulary, never prominence, never zone-ambient. Two members deliberately override face channels (recorded settles, not accidents): strong's font-semibold (600 — the GitHub/Tailwind Typography emphasis weight, settling the UA's 700) and mark's highlight ground with the 0.05em/0.25em padding box mirroring the face's mark so standalone and in-face agree. FACE-COMPOSING: no member escapes the prose face — an inline escape would virally descope the code chips and nested marks a link legitimately contains — and no member stamps a font-size; the ambient scale flows by inheritance.
$npx jixoai-ui add text
https://ui.jixoai.com/r/text.json
usage
Usage
Pick your ergonomic: the base with mark for data-driven rendering (the markdown map's choice — the mark comes from the AST), the Raw sugars for hand-authored composition. Zero behavioral difference between them.
<script lang="ts">
import Text, { P, Strong, Em, Del, Mark, Ins, Sub, Sup } from '@ui/text';
</script>
<!-- the base: <p> by default (the Chakra <Text>-is-a-paragraph precedent) -->
<Text>A paragraph, face-composing.</Text>
<!-- mark switches the element and the paint -->
<Text mark="strong">semantically strong, 600 weight</Text>
<!-- the Raw sugars — the same vocabulary, one component per word -->
<Strong>strong</Strong> <Em>em</Em> <Del>del</Del> <Mark>mark</Mark>
<Ins>ins</Ins> H<Sub>2</Sub>O x<Sup>2</Sup>text
The mark matrix — all eight forms in one pass, each rendered by its Raw sugar (identical to the base with that mark). Every member is the semantic element itself; the paint column is what the family adds on channels the prose face does not declare for these elements.
p a plain paragraph — face-composing
no utilities — face-composingstrong strong emphasis at the 600 settle font-semibold (the 600 settle)
em italic stress italic
del struck-through revision line-through
mark the highlighted passage highlight ground + the 0.05em/0.25em box
ins the inserted revision underline
sub H2O — subscript none — the UA-baseline-shift law, preflight-reimplemented
sup x2 — superscript none — the UA-baseline-shift law, preflight-reimplemented
<script lang="ts">
import Text, { P, Strong, Em, Del, Mark, Ins, Sub, Sup } from '@ui/text';
</script>
<!-- the base: <p> by default (the Chakra <Text>-is-a-paragraph precedent) -->
<Text>A paragraph, face-composing.</Text>
<!-- mark switches the element and the paint -->
<Text mark="strong">semantically strong, 600 weight</Text>
<!-- the Raw sugars — the same vocabulary, one component per word -->
<Strong>strong</Strong> <Em>em</Em> <Del>del</Del> <Mark>mark</Mark>
<Ins>ins</Ins> H<Sub>2</Sub>O x<Sup>2</Sup>text · modifiers
The six text modifiers, live — the kernel Text and inline-code share (lineHeight, weight, italic, tracking, family, fontSize). Every control re-renders the base paragraph, the strong form and the chip together, and the drawer's usage file always shows the exact props on screen — italic off and family inherit are omitted, because absent = ambient.
The quick brown fox jumps over the lazy dog — every modifier lands after the form's own utilities, never before the consumer class.
strong composes too — an explicit weight replaces its own 600
var(--font-mono) — the chip folds fontSize × lineHeight into its padding calc
<script lang="ts">
import Text, { Strong } from '@ui/text';
import InlineCode from '@ui/inline-code.svelte';
</script>
<!-- the six text modifiers, one kernel: absent = ambient, explicit
beats ambient, and the consumer class still merges last -->
<Text lineHeight={1.5} weight="medium" tracking="normal" fontSize="14px">
The quick brown fox jumps over the lazy dog — every modifier lands
after the form's own utilities, never before the consumer class.
</Text>
<Strong lineHeight={1.5} weight="medium" tracking="normal" fontSize="14px">strong composes too — an explicit weight replaces its own 600</Strong>
<InlineCode lang="text" lineHeight={1.5} weight="medium" tracking="normal" fontSize="14px">var(--font-mono)</InlineCode>law
Sugar ≡ base, by construction
Each Raw sugar is a ~5-line wrapper that renders the base with its mark fixed, forwarding class/children/attrs — the learning-cost ruling: one vocabulary, two ergonomic forms, zero behavioral difference. Same element, same data-jx-text hook, same class-merge order (consumer LAST). The sugars re-export from the base's module script and ride the barrel.
<!-- these two are IDENTICAL at render: same element, same
data-jx-text hook, same class-merge order (consumer LAST) -->
<Text mark="em">italic</Text>
<Em>italic</Em>italic via the base
italic via the sugar
One component prop swap apart — render both and diff: identical markup, identical data-jx-text="em", identical merge
order.
a11y
Accessibility
Every member is the semantic element itself — strong means strong, del means deleted, sub means subscript. The meaning ships with the markup; nothing is a styled span.
Keyboard
| Key | Action |
|---|---|
| — | Not focusable — reading content, not a control |
ARIA
| Attribute | Value | Description |
|---|---|---|
| p / strong / em / del / mark / ins / sub / sup | native elements | Semantic inline semantics from the platform — screen readers announce emphasis, deletion, insertion and baseline shifts from the elements themselves. |
| data-jx-text | form | Hook attribute carrying the rendered form (the mark, or p) for styling. |
axes
Universal props
The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. The reading family flows by inheritance — the size axis is the root font-size lever, the modifier kernel's own fontSize prop stays a separate (non-colliding) name.
Text · universal props
size 14 · density small
size large · density large
<!-- the eight-axis surface on the reading family -->
<Text size={14} density="small">px number</Text>
<Text size="large">named steps</Text>api
API
One style prop and a verbatim spread; the Raw sugars take the same surface minus mark (fixed per sugar).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| mark | 'p' | 'strong' | 'em' | 'del' | 'mark' | 'ins' | 'sub' | 'sup' | 'p' · Own default, not ambient | The element vocabulary — ONE word is the prop value, the sugar name, and the HTML element. A literal slot, own 'p', never zone-ambient (an element choice is not prominence; the kbd precedent). Omitted resolves explicit ?? own, no context read. |
| children | Snippet | — | The inline content. |
| class | string | '' | Forwarded to the rendered element; consumer classes land last. |
| ...rest | HTMLAttributes<HTMLElement> | spread | Every other attribute passes through to the chosen element untouched. |
| Raw exports | P · Strong · Em · Del · Mark · Ins · Sub · Sup | — | The eight sugar components — each renders the base with its mark fixed (class/children/attrs forwarded); identical markup to <Text mark="{word}">. |
Universal props
| Property | Type | Default | Description |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | the base scale — root font-size; parts size in em |
| shape | 'round' | 'scoop' | 'bevel' | 'notch' | 'square' | 'squircle' | 'auto' | 'auto' · ambient scope | corner geometry (CSS corner-shape; §14 degrade table) |
| radius | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | corner size; auto = the concentric broadcast (§3) |
| density | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | spacing/leading scale over the kernel channels (§4) |
| color | 'primary' | 'secondary' | 'error' | 'warn' | 'success' | 'info' | 'auto' | number | string | 'auto' · ambient scope | the hue axis of the fixed oklch primary system (§5) |
| theme | 'light' | 'dark' | 'system' | 'auto' | 'auto' · ambient scope | light/dark profile; system = the JS-mutable global (§6) |
| elevation | 'level-1' | 'level0' | 'level1' | 'level2' | 'level3' | 'level4' | 'level5' | 'auto' | number | 'auto' · ambient scope | official M3 levels over the surface ladder (§7) |
| motion | 'reduced' | 'subtle' | 'normal' | 'expressive' | 'auto' | number | 'auto' · ambient scope | intensity across the motion kernels (§8) |