---
title: "Feature: More components in the library"
manual: "Frontend Theme for Extension Development"
version: "main"
source: "Changelog/2.0/Feature-ExtendedComponentLibrary.rst"
modified: "2026-09-17T04:52:50+00:00"
---

# Feature: More components in the library

## Description

The [component library](Feature-ComponentLibrary.html#feature-component-library) gains the components a
theme for extension development is most often asked to show, all of them pure
HTML and CSS first, flat and framed like the rest of the library:

-   **Tabs**, **dialog** and **tooltip** \- the three components that need the
    theme's script. Each of them stays usable without it: tabs fall back to
    every panel shown under its own heading - also when JavaScript is on but
    the script fails to load - a dialog opener is not shown, and a tooltip
    still appears on hover and focus.
-   **Panel**, for grouped content with a header, a body and a footer, and the
    **close button**.
-   **Button**: a link variant, an icon-only variant, a pressed and a busy
    state, and an attached button group for one control in several parts.
-   **Forms**: the input group - a control joined to text or a button - and the
    choice group for a set of checkboxes or radio buttons.
-   **Alert**: two asides next to the four severities, `--note` and
    `--tip`. The tip follows the selected colour palette.
-   **Typography**: heading levels four to six have a step of their own, and
    three text roles - display, lead and eyebrow - are classes.

A state these components draw in colour - a selected tab, a pressed toggle -
is drawn in the system highlight colour under forced colours, and the
components that depend on a fill for their edge get a border there instead.

What each one expects, and which of them need JavaScript, is on
[Components](../../Components/Index.html#components). The styleguide renders all of them, the three that need the
script in a section of their own - see [Feature: A styleguide page](Feature-Styleguide.html#feature-styleguide).

## Impact

Headings of level four to six render differently wherever they occur, content
from the rich text editor included: they used to hold at the size of level
three, and now step down to the body size and below it, with levels five and
six set in capitals. The titles of the hero and the teaser, which follow the
heading level an editor picks, look as before on every level.

Everything else is new and changes nothing that renders today.
`Resources/Public/JavaScript/theme.js` binds the new components in
addition to what it did before, and still has no dependency. The compiled
stylesheet grows from roughly 63 kB to roughly 78 kB, uncompressed and before
transport compression, and one design token is added,
`--theme-letter-spacing-caps`, for text set in capitals.