On this page

Layout & theming

Stack released

A column of blocks standing one chosen step apart, the step taken from the spacing scale.

Source

Import@pacit/components/stack
Selectorpct-stack

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

First

Second

Third

import { Component } from '@angular/core';
import { PctStack } from '@pacit/components/stack';

/** Vertical rhythm from the spacing scale — nobody hand-rolls margins between siblings. */
@Component({
  selector: 'demo-stack',
  imports: [PctStack],
  // A column shrink-wrapped by the stage is three words wide; the host gives the rhythm a
  // readable width and the stage centres it (lesson-146).
  styles:
    ':host { display: block; inline-size: min(100%, 22rem); } div { border: 1px solid var(--pct-border); border-radius: 8px; padding: 8px 12px; }',
  template: `
    <pct-stack gap="lg">
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </pct-stack>
  `,
})
export class StackDemo {}

stack.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 { PctStack } from '@pacit/components/stack';

Exported	What it is
`PctStack`component`pct-stack`	Vertical rhythm: a flex column whose blocks stand one chosen step apart, instead of each block bringing its own margin and the space between two of them being their sum. The second layout primitive (0057): no ARIA, no parts, one input.

<pct-stack gap="lg">
  <div>First</div>
  <div>Second</div>
</pct-stack>

Examples

Every state, running

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

Three rhythms

gap rides the library's shared size axis — sm, md, lg — so the space between a form's rows is the same decision as the space between a page's sections, taken once.

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.

Vertical rhythm: a flex column whose blocks stand one chosen step apart, instead of each block bringing its own margin and the space between two of them being their sum. The second layout primitive (0057): no ARIA, no parts, one input.

Inputs

Name	Type	What it does
`gap`default `'md'`	`PctSize`	The step of the spacing scale between blocks.

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-stack`
`data-pct-gap`	`gap()`

Styling

Parts to select, tokens to override

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

Parts

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

No parts of its own — the element you write is the whole of it.

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-stack-gap{pct.space.5}`16px	Gap between the stack's children.
`--pct-stack-gap-lg{pct.space.6}`24px	Gap between the stack's children at size lg.
`--pct-stack-gap-sm{pct.space.3}`8px	Gap between the stack's children at size sm.

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-stack-gap: 32px;
}

First

Second

Third

Accessibility

Measured, not assumed

Pattern: none — layout is presentational and this host carries no ARIA at all (0057). The unit suite pins the absence 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.

100%mutation score1 of 1 mutants killed

7 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

0colour pairs measuredlight and dark, at every token build

0visual baselinesChromium, the sandbox's own pictures

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

Why it is built this way

The second layout primitive (0057): a flex column whose blocks stand one chosen step apart. The step comes from the spacing scale through the shared sm | md | lg axis, so rhythm is picked, not typed — and because it is a flex gap, it cannot collapse, spaces between blocks only, and leaves the first and last block flush with the host: three properties margins never manage together.

Known limitations

No horizontal mode. A wrapping row is a different primitive (pct-cluster), refused in 0057 until something in the repository needs it twice — the extraction law of lesson-21.
The scale is the only input. An arbitrary length is not a gap value; a consumer who truly needs 13px overrides --pct-stack-gap in a scope and owns the deviation.
Foreign margins still apply. The stack does not reset the margins its blocks bring; gap adds to them. Resetting other people's styles is a thing this library does not do anywhere, and starting here would be the surprise.

pacit

Usage

Every state, running

Three rhythms

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

Why it is built this way

Known limitations