Overview
Changes to the catalog's elements, newest first. Each element page lists its own entries under Latest updates. Releases are numbered yy.mm.build: 26.10.1 is the first release of October 2026, and the build count starts again at 1 each month. Entries from before the first release are version 0.1.
Release notes
| Date | Version | Affects | Breaking | Description |
|---|---|---|---|---|
| 2026-10-20 | 0.1 | Validation | No |
Validation (C-53), a live requirement checklist under a Field, modeled on the USWDS Validation:
a titled list of __item, each data-state="met" or
"unmet" with its icon and a visually hidden "met" / "not met", and one polite live
region (__summary[role="status"]) that reports the count after the user pauses,
never per keystroke. The input names the checklist in aria-describedby;
data-invalid after a failed submit turns what is unmet to the error ink. js/docs.js
runs the specimen live (components/validation.css)
|
| 2026-10-20 | 0.1 | LanguageSelector | No |
LanguageSelector (C-52), UI only, modeled on the USWDS Language selector: a Button naming the
current language in that language (__current[lang], after a visually hidden
"Language:") opens a C-07 Menu of menuitemradio languages, each its own name with
lang (and dir="rtl" for Arabic) glossed in the page's language, the
current one checked; a two-language app uses __toggle, a link in the other language
with lang and hreflang. Keyboard is the Menu's. Adds the Tabler
language glyph to the sprite (components/language-selector.css)
|
| 2026-10-20 | 0.1 | Footer · App shell | No |
Footer (C-51): the app's page footer (footer.qf-footer, the contentinfo landmark):
__product (__name, __version), a
nav.__links of the accessibility statement, privacy, terms and support (24px
targets), and the __legal copyright line; data-variant="compact" puts
it on one line (components/footer.css). The App shell gains an optional footer slot,
.qf-container > .qf-footer, on the chrome under the content; shells without one
are laid out as before
|
| 2026-10-20 | 0.1 | StatusBar | No | StatusBar: its description and guidance now tell it apart from Footer (C-51): the status bar holds live document facts and controls, the footer the version and legal links |
| 2026-10-20 | 0.1 | SideNavigation · App shell | No |
SideNavigation (C-50) catalogs the shell's .qf-nav rail as a standalone component:
its rules move from composites/shell.css to components/side-navigation.css (rows, twisties,
nested __subitems, aria-current="page" and the fill its parents keep,
__section, __badge), with a specimen outside the shell. The shell
keeps only placement (.qf-shell > .qf-nav: the nav column, clipping, the drawer
layer, the list's room under the masthead) and the fillets that join the current row to the app
bar, now off outside the shell. Element pages credit .qf-nav to SideNavigation
instead of the App shell
|
| 2026-10-20 | 0.1 | Breadcrumb · App shell | No |
Breadcrumb (C-49): the shell's .qf-breadcrumbs is cataloged and its rules move from
composites/shell.css to components/breadcrumb.css; the content header
(.qf-page-header) keeps using it. nav[aria-label="Breadcrumb"] ›
ol.__list › li.__item, every level a __link but the
current page (aria-current="page"), CSS-drawn separators, 24px targets. Long paths
wrap by default; data-overflow="truncate" keeps one line and cuts the levels above
the current page first; a deep path hides its middle (__item[hidden]) behind a
__more button that reveals it in place
|
| 2026-10-20 | 0.1 | MemorableDate | No |
MemorableDate (C-48), modeled on the USWDS Memorable date: a fieldset and legend around three
C-09 Fields (Month as a native select, or data-month="text" for a two-digit box;
Day and Year as type="text" boxes with inputmode="numeric"), the hint
"For example: January 19 2000" every box points at with aria-describedby, an error
state (data-invalid on the fieldset and on the wrong box's Field,
aria-invalid on its input, the message added to its description) and
autocomplete="bday-*" for a date of birth (components/memorable-date.css)
|
| 2026-10-20 | 0.1 | StepIndicator | No |
StepIndicator (C-47), modeled on the USWDS Step indicator: an ordered list of segments
(.qf-step-indicator__segment), each complete (data-state="complete"),
current (aria-current="step") or upcoming, with a visually hidden "completed" /
"not completed" in each label, under a "Step N of M" heading that names the current step.
data-variant="counters" puts a numbered circle on each segment (data-size="sm"
for the small one); data-labels="hidden" leaves the heading to name the step, and
below 30rem of width the labels hide on their own (components/step-indicator.css,
tokens-components.css)
|
| 2026-10-20 | 0.1 | Tabs | Yes |
Tabs: the stepper variant (.qf-stepper, __step[data-state],
__dot) is gone; StepIndicator (C-47) is the system's one stepper. Replace
.qf-stepper with .qf-step-indicator:
data-state="active" becomes aria-current="step", pending steps carry
no state, and each label states completion in text
|
| 2026-10-20 | 0.1 | App shell · OverlaySystem · Search · Inbox | Yes |
Classic is the only skin: css/modern/ and js/skin.js are removed, so consumers link
css/classic/index.css directly (no data-skin-sheet swap) and keep
data-skin="classic" on <html> for scripts. The skin switch is gone from the
site's app bar, the shell's identity menu and the Office review strip; theme stays. The per-skin
composite pages are single pages: composites/shell.html, inbox.html, overlay-system.html and
search.html replace the *.classic.html and *.modern.html pairs
|
| 2026-10-20 | 0.1 | Button | Yes |
Button: the pressed disclosure. A button that shows and hides a region in place (the search
toolbar's Filters) carries data-disclosure beside aria-expanded and
aria-controls; open, it reads as pressed in on every screen: an info-200 fill, the
selected border and an inset shade (--qf-shadow-pressed, dropped under the focus
ring). __badge (the applied-filter count, sized by --qf-badge-text)
now takes the button as its containing block wherever the button is
(components/button-states.css). Breaking: the inbox-only
.qf-search.qf-inbox .qf-button[data-selected] tint is gone; set
data-disclosure on the Filters button instead, classic skin
|
| 2026-10-20 | 0.1 | IconPicker | No |
IconPicker (.qf-icon-picker), new: choose a sprite icon and its color, as for a saved search's
sidebar row. A search field, __colors (a .qf-color-picker of the ten color keys),
__label naming the chosen icon, and __grid · __row ·
__cell (role=grid · row · gridcell; command-height cells, ten to a row, seven rows
then it scrolls), __empty for no match; aria-selected marks the choice
and --_tint on the block draws it in the chosen color (components/icon-picker.css),
classic skin
|
| 2026-10-20 | 0.1 | App shell | No |
App shell: a skip link (.qf-skip-link, the shell's first child, to the .qf-content), hidden
until focused, then drawn at the top-left with the focus ring rather than a shadow. Classic
sidebar rows carry icons (inbox, files, folder, file-search, checklist, cube; a saved search's
own icon and color), so the twisty gutter (--qf-nav-gutter) narrows to the twisty's
24px target (--qf-space-6), the item padding (--qf-nav-item-pad) to --qf-space-1,
and the label sits --qf-nav-item-gap (--qf-space-2) from its icon. The workflows
entry reads Tasks; a saved search's row menu gains Change icon…. The utility links always show
their icons beside their labels, alone when compact. At 200% zoom the app bar's tablist shrinks
and scrolls inside the bar instead of being clipped; collapsing the nav still hides only the
rail, so the masthead's link labels stay. Classic skin
|
| 2026-10-20 | 0.1 | Search | No | Search: one toolbar on every screen, in one order: query · save-search bookmark (bookmark-plus, or bookmark with data-selected while a saved search is on screen; it opens a window) · Filters (the C-01 pressed disclosure, with its badge) · sort · spacer · Column settings (the gear, left of the layout switch, disabled where a layout has none) · list width (Narrower · Wider · Reset, two-pane only) · layout and More (layouts only). The toolbar's saved-view chips, result count and More ▸ Saved views are gone from the composite. The two-pane split is resizable: .qf-search__resizer, a C-28 Resizable handle in a gap widened to --qf-space-6, with --qf-search-list-width and data-list-width on .qf-search__two-pane and data-resizing while dragged; stacked below 44rem the handle goes (composites/search-split.css), classic skin |
| 2026-10-20 | 0.1 | Inbox | No | Inbox: the toolbar is the search toolbar as the app has it: query (with Search on Enter) · bookmark · Filters · sort · spacer · export · auto-refresh (a switch) · task list width (Narrower · Wider · Reset). The Saved searches chips and menu are gone (saved searches live in the sidebar and the bookmark), classic skin |
| 2026-10-20 | 0.1 | OverlaySystem | No | OverlaySystem: the save-search window the search toolbar's bookmark opens, non-modal (Edit saved search: Name, a note when the search on screen differs, Delete… · Cancel · Save as new · Update), classic skin |
| 2026-10-14 | 0.1 | — | No | Indexing workspace (.qf-indexing): the frame Index batch opens in place of the Index Documents queue, a header (__header, __title, __meta, __progress), the batch's documents (__docs; a listed but unselectable document is aria-disabled), the index form (__form), the viewer (__viewer, with __frame for the document), a footer (__footer, __hint), and __actions, the queue pane's primary action row; one column under 64rem. The Index Documents mockup now uses it, both skins |
| 2026-10-10 | 0.1 | — | No | Office dialogs: .qf-office-dialog__trim, the trim range of Trim video and Trim audio: a track with the kept span (__trim-range) between --_start and --_end, and green start and red end __trim-handle elements (role=slider, data-edge=start|end, placed by --_at), both skins |
| 2026-10-10 | 0.1 | ColorPicker | No | ColorPicker custom colors for the Colors dialog (More colors…): .qf-color-picker__mixer holds __spectrum (a saturation and brightness field for the hue in --_hue-color, role=slider) above __hue (the hue strip, role=slider), each with a __thumb placed by --_x/--_y or --_value; __compare labels New and Current over __preview, whose two children take --_swatch. Tokens --qf-color-spectrum-height, --qf-color-hue-height, --qf-color-thumb-size and --qf-color-hue-gradient, both skins |
| 2026-10-10 | 0.1 | Gallery | No | Gallery: a selected or current item's label takes --qf-command-pressed-ink on the pressed fill; the secondary ink fell to 4.3:1 on the presentation accent in dark (1.4.3), both skins |
| 2026-10-10 | 0.1 | PublishVersion · VersionHistory | No | Legal hold before publishing: the Publish version dialog's Under legal hold banner is named in the dialog's aria-describedby so it is read on open (You can publish. No version of this document can be deleted or pruned while it is held.); new .qf-hold-badge (a warning Chip with the gavel and On hold) for a pane header's .qf-object__meta and the new .qf-version-history__head title row, both skins (QF-10830) |
| 2026-10-08 | 0.1 | SaveState | No | SaveState (.qf-save-state): Saving…, Saved, Offline and Not saved with Retry now; a polite status region, the glyph takes a title bar's ink; js/versions.js setSaveState (QF-10840) |
| 2026-10-08 | 0.1 | PublishVersion | No | PublishVersion (.qf-publish): the Publish version dialog body with the version change (2.3 → 3.0), checked-out / legal-hold / open-in-editor warnings and a required comment (QF-10840) |
| 2026-10-08 | 0.1 | VersionHistory | No | VersionHistory (.qf-version-history, .qf-version): versions grouped by published version with draft checkpoints beneath, Published only filter, Draft / Published / Superseded badges, Open, Compare and Restore as checkpoint (QF-10840) |
| 2026-10-08 | 0.1 | VersionRetention | No | VersionRetention (.qf-retention): draft-version retention for a classification and document type pair (inherit, days, keep all) with the effective rule and its source (QF-10840) |
| 2026-10-02 | 0.1 | Ribbon | No | One shared ribbon field (.qf-ribbon__field/__fields) and check box (.qf-ribbon__check) in ribbon.css, and the phone command bar and sheet (.qf-office-app__commandbar/__sheet) in office-shell.css, replacing the Document and Presentation copies; office:shared-pieces check (QF-10740) |
| 2026-10-02 | 0.1 | Ribbon | No | Compact kept labels size to their content on one line; .qf-ribbon__check for ribbon check boxes replaces the Spreadsheet inline styles; ribbon-fit and office:ribbon-check assertions (QF-10740) |
| 2026-10-02 | 0.1 | Icon | No | Editor icon exception — Fluent Regular only, scoped to the editor |
| 2026-10-02 | 0.1 | Icon | No | Office symbols reset stroke so .qf-icon no longer outlines them |
| 2026-10-02 | 0.1 | DocumentViewer | No | Retire the vendor imitation in X-07; qf-office hosts the editor |
| 2026-10-02 | 0.1 | Icon | No | Inline every icon sprite, not only icons.svg |
| 2026-10-02 | 0.1 | Icon | No | Office icon list and a --check that fails on missing glyphs |
| 2026-10-02 | 0.1 | Tooltip · Menu · Select · Tabs · Toolbar | No | Extend Tooltip, Menu, Select, Tabs and Toolbar for office surfaces |
| 2026-09-30 | 0.1 | Inbox | No | Inbox (both skins): the query field prefers 20rem and gives way first, so it takes the toolbar's room before the spacer does |
| 2026-09-30 | 0.1 | Icon | No | Nav (both skins): D-9's icon is drawn without .qf-icon's stroke, so circle-plus-filled keeps its plus; the sprite stays as provided (QF-10570) |
| 2026-09-30 | 0.1 | Inbox | No | Task view vs Object view is a user setting; task-centric header and grouped cards; only v2-backed task data (X-12) |
| 2026-09-30 | 0.1 | Inbox | No | Inbox (classic): two task presentations, Task view and Object view, switched per user from the toolbar (X-12) |
| 2026-09-30 | 0.1 | Icon | No | Revert "sprites: a -filled glyph sets stroke="none", so .qf-icon's inherited stroke no longer closes its cut-outs (QF-10570)" |
| 2026-09-30 | 0.1 | Icon | No | A -filled glyph sets stroke="none", so .qf-icon's inherited stroke no longer closes its cut-outs (QF-10570) |
| 2026-09-26 | 0.1 | Icon | No | Classic dark: surfaces, ink and borders from the info scale; nav icons at full strength (QF-10566) |
| 2026-09-15 | 0.1 | Inbox | No | Table, cards and list results; inbox two-pane composite (X-12) |
| 2026-09-15 | 0.1 | Icon | No | Utility links: icons with tooltips when labels overflow, one-row masthead, ellipsis menu at 30rem |
| 2026-09-15 | 0.1 | Icon | No | Skin toggle icons |
| 2026-09-13 | 0.1 | App shell | No | Host composite pages in the app shell and sync specimens from them |
To record a change, add an entry to changelog.json (date, version
"unreleased", the catalog IDs it affects, breaking, description) and run
bun scripts/design-pages/build-element-pages.mjs. bun run release gives the
unreleased entries the next version.