Text Wrapper

Typography utility for applying Material Design 3 typescale and semantic color styles to projected text content. Not intended to replace semantic HTML headings and landmarks.

Basic Usage

Use the default body medium style for general text content. It provides token-driven typography without custom CSS per instance.

Default body text

<ds-text-wrapper>Default body text</ds-text-wrapper>

Initial Value

Set variant and color directly in markup.

Product title

<ds-text-wrapper variant="headline-small" color="primary">
  Product title
</ds-text-wrapper>

Variants

Apply MD3 display, title, and body scales.

Display Small

Headline Medium

Title Large

Body Medium

Label Large

Truncation

This single-line text truncates when it exceeds the available width in its container.

This text is clamped to two lines. Additional content is clipped so layouts remain stable and predictable across breakpoints.

States

Use semantic colors and alignment to express context.

Default

Secondary

Error text

Centered text

Interactive Example

Change variant and color dynamically.

Variant Color

Interactive text sample

Event log:

API

Attributes

Attribute	Type	Default	Description
`variant`	string	`body-medium`	MD3 typescale value.
`color`	string	`on-surface`	Semantic text color token mapping.
`align`	string	`start`	Text alignment.
`truncate`	boolean	false	Enables single-line truncation.
`lines`	number	null	Multi-line clamp limit.

Events

Event	Detail	Description
None	-	Display utility component emits no custom events.

CSS Parts

Part	Description
`text`	Inner wrapper around projected content.

Methods

Method	Description
None	Configure behavior through attributes and properties.

CSS Custom Properties

Property	Description
`--md-sys-typescale-*-size`	Type scale sizing per selected variant.
`--md-sys-color-*`	Semantic color token mapping for text color.

Accessibility

Uses semantic text content through projected slot nodes.
Supports host ARIA attributes for custom labeling context.
Keeps visible text in DOM for screen reader access.

Usage Guidelines

Use body variants for long-form text and paragraphs.
Use title/headline variants for hierarchy and scanability.
Apply truncation only where layout constraints require it.
Prefer semantic color tokens over hard-coded values.