On this page

Data & status

Description released

The details of one thing as rows of a term and its value — a property and its reading, a setting and the control that changes it — on the platform's description list.

Source

Import@pacit/components/description
Selectorsdl[pctDescriptionList], div[pctDescription]

Semantics come from the native <dl> — no role and no keyboard handling of ours

Supply: 21.4 °C
Mode: Heating

import { Component } from '@angular/core';
import {
  PctDescription,
  PctDescriptionList,
} from '@pacit/components/description';

/** Terms and their values on the platform's dl. */
@Component({
  selector: 'demo-description',
  imports: [PctDescriptionList, PctDescription],
  template: `
    <dl
      pctDescriptionList
      style="inline-size: 260px; --pct-description-term-width: 8rem"
    >
      <div pctDescription>
        <span pctDescriptionTerm>Supply</span>
        21.4 °C
      </div>
      <div pctDescription>
        <span pctDescriptionTerm>Mode</span>
        Heating
      </div>
    </dl>
  `,
})
export class DescriptionDemo {}

description.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctDescriptionList, PctDescription } from '@pacit/components/description';

Exported	What it is
`PctDescriptionList`componentunreleased`dl[pctDescriptionList]`	A description list: the details of one thing as terms and their values — a property and its reading, a setting and its control.
`PctDescription`componentunreleased`div[pctDescription]`	One pair of the list: the term, its value, and a control that changes the value when the thing can be changed. The host is the `<div>` a `<dl>` may group a pair in; the `<dt>` and the `<dd>`s are this component's own.

<dl pctDescriptionList>
  <div pctDescription>
    <span pctDescriptionTerm>Supply temperature</span>
    21.4 °C
  </div>
</dl>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

A pair with a control, the control named by its term through termId.

Supply temperature: 21.4 °C
Heating: On

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

unreleased marks 2 of them: on main, and not in @pacit/components@0.2.0 — the next release names the version.

A description list: the details of one thing as terms and their values — a property and its reading, a setting and its control.

Inputs

Name	Type	What it does
No inputs — the element is configured by its content.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-description-list`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctDescriptionListHarness, PctDescriptionHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`control`	`[data-pct-part="control"]`	the `<dd>` of the control, empty and hidden when none
`term`	`[data-pct-part="term"]`	the `<dt>` of the pair
`value`	`[data-pct-part="value"]`	the `<dd>` of the value

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-description-border{pct.border}`#e2e8f0 · #334155	Colour of the line between rows.
`--pct-description-fg{pct.text}`#0f172a · #ffffff	Text colour of a value.
`--pct-description-gap{pct.space.5}`16px	Gap between the term, the value and the control of a row.
`--pct-description-min-width`8rem	The narrowest a value stands beside its term before it wraps under it.
`--pct-description-padding-y{pct.space.3}`8px	Block padding of a row.
`--pct-description-term-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of a term.
`--pct-description-term-width`12rem	Width of a term while the row holds it.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-description-term-fg: #115e59;
  --pct-description-term-width: 16rem;
}

Supply: 21.4 °C
Mode: Heating

Accessibility

Measured, not assumed

Pattern: a native <dl> — the platform's term and definition roles, which the pair writes as <dt> and <dd> itself. Named in the class JSDoc.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

91.67%mutation score11 of 12 mutants killed

—e2e casescovered by the shared suites only

3colour pairs measuredlight and dark, at every token build

0visual baselinesChromium, the sandbox's own pictures

11elements in the preview0 listeners · 1 render to settle · 2347 µs in jsdom, held exactly but for the clock

Known limitations

One value per term. HTML allows several <dd> for one <dt>; the pair writes one value and one control. Two values are one value of the consumer's two lines.
The terms line up by a width, not a column. --pct-description-term-width is the term's basis: a term longer than it wraps inside its own width rather than widening every row.
The control's name is the consumer's binding. termId has to be passed to the control's ariaLabelledby; a control without a name is a control the axe audit finds, not this list.
NVDA said list alone on the switch in a pair. In the walk of 2026-11-02 NVDA with Firefox read the control named by termId as the list it stands in, with no name and no role, where Orca reads Heating · switch pressed.. The axe audit and the e2e both find the switch named Heating.
A pair outside a <dl> warns in dev mode, and draws a <dt> the platform reads as no term at all.

pacit

Usage

Every state, running

A pair with a control, the control named by its term through termId.

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations