# In-text Step

Small inline step component for use within paragraphs.

@wmcadigital/ui-in-text-step

Small inline step component for visually indicating step numbers inside text or lists.

## Installation

Using pnpm (monorepo/workspace):

```bash
pnpm add @wmcadigital/ui-in-text-step
```

Using npm:

npm install @wmcadigital/ui-in-text-step

Using yarn:

yarn add @wmcadigital/ui-in-text-step

What this package provides

• SCSS source at src/styles/main.scss and compiled CSS at dist/styles/main.css.
• A .ds-in-text-step container with .ds-in-text-step__item (or direct li) children that automatically number steps using CSS counters and render circular numeric markers.

This package is styling-first — it does not ship JavaScript components. Import the CSS to use the classes in your markup.

Usage

Inline step within a paragraph (visually displayed as a circular numbered marker):

<span class="ds-in-text-step">
  <span class="ds-in-text-step__item">Step 1</span>
</span>

Use as a list of steps:

<div class="ds-in-text-step">
  <div class="ds-in-text-step__item">First step</div>
  <div class="ds-in-text-step__item">Second step</div>
  <div class="ds-in-text-step__item">Third step</div>
</div>

Notes:

• The numbered marker is created with the CSS counter() and styled as a circle. The marker colour follows --color-primary and can be themed via design tokens.
• The component also supports li elements inside the container for semantic lists.

Accessibility

• The visual numbering is decorative; ensure the textual content conveys the step meaning. Use semantic lists (ol/li) if the order is important to assistive technologies.

Customisation

• Override colours using CSS variables (for example --color-primary).

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.