# @wmcadigital/ui-details

Lightweight styles and markup patterns for progressive disclosure using native `<details>`/`<summary>` semantics.

## Install

pnpm add @wmcadigital/ui-details

## What this package provides

- CSS (compiled at `dist/styles/main.css`) implementing the `.ds-details` block, summary styling and content area.
- SCSS source at `src/styles/main.scss` for customization.
- Small patterns to present a summary with an animated chevron and a bordered content area when opened.

## Markup

Use native elements where possible to retain built-in keyboard and screen reader support:

```html
<details class="ds-details">
  <summary class="ds-details__summary">
    <svg aria-hidden="true" class="ds-details__icon" width="16" height="16">
      <use href="#icon-caret-right"></use>
    </svg>
    <span>Summary title</span>
  </summary>
  <div class="ds-details__content">
    <p>Detail content</p>
  </div>
</details>
```

Notes:

• The styles hide the browser native disclosure marker and use an inline SVG chevron that rotates when the details[open] attribute is present.
• The .ds-details__content area receives a left border and spacing to visually separate revealed content.

Accessibility

• Prefer the native <details>/<summary> markup — it provides keyboard and accessibility behaviour out of the box.
• If you must implement a custom disclosure widget, ensure it exposes the same keyboard interactions and ARIA semantics as the native elements (aria-expanded, aria-controls, proper focus handling).
• Decorative SVGs should use aria-hidden="true" and not duplicate visible text.

Customisation

• Colours and spacing are driven by design tokens and SCSS variables (e.g. --color-cta, --color-secondary, $size-*). Override these in your project to fit your theme.
• The rotation transition on the chevron uses transition: transform 200ms ease and can be adjusted in the SCSS.

Development

• SCSS source: src/styles/main.scss.
• Build artifacts: dist/styles/main.css.
• Build the package from the monorepo root:

pnpm -w -r run build