pienter-release-bot
released this
2026-09-15 23:35:38 +00:00
| 135 commits to main since this release
Breaking
RecordLayout is retired, one release after it shipped: with the page
container providing the main column and the new PageAside taking the
sidebar's place on the right, nothing of it was left but a gap. Panel
stays. Migration: drop the RecordLayout wrapper and its sidebar slot,
render the main column's Tabs and Panels directly in RecordForm's
fields slot, and move the sidebar Panel's children into
<PageAside :title="…"> in RecordForm's new aside slot (the title
comes from the panel; sidebar-labelledby and title-id go, the aside
names itself). The ./components/RecordLayout.vue export is gone.
Changed
- The page container no longer stacks the aside below the main row under
56em. PageAside owns that breakpoint: the column becomes a rail at the
right edge and the toggle opens the content as a drawer. The aside track is
now auto and the component sets its own width, so a consumer-written
<aside class="pui-page__aside"> without the component gets no size; use
PageAside.
RecordDetails stacks each label over its value when its own container is
narrower than 24rem, so it reads in a PageAside or any other narrow
column without the consumer overriding its grid.
Added
PageAside, the right band of a CMS page: filters beside a module index,
settings beside a record form. title (required; heads the column and
names the landmark), description, a default slot, toggle (default on)
with toggle-label, and v-model:open (default open). Open, it is the
sticky, self-scrolling aside column with a flat header and a left rule;
closed, a rail one toggle wide in the same column, its content hidden
but mounted so fields in the band still submit; below 56em the rail stays
and the toggle opens a drawer from the right with the Sidebar drawer's
mechanics (backdrop, focus trap, Escape, the same toggle closing it). The
toggle keeps the sidebar-right icon in both states and carries the state
in aria-expanded and its name, "Hide {title}" / "Show {title}".Form has an aside slot rendered as a direct child of <form>, between
the body and the actions row, and RecordForm forwards it. A PageAside
in it becomes the page's aside column through the form's display: contents while its fields keep their form owner. The page's :has()
switch matches that path too.
Downloads