@ponchia/ui 0.3.4 → 0.3.5

package/classes/index.d.ts

@@ -85,6 +85,9 @@ export declare const cls: {
   readonly hintError: 'ui-hint--error';
   readonly inputGroup: 'ui-input-group';
   readonly inputGroupAddon: 'ui-input-group__addon';
+  readonly inputIcon: 'ui-input-icon';
+  readonly inputIconSlot: 'ui-input-icon__icon';
+  readonly inputIconEnd: 'ui-input-icon--end';
   readonly file: 'ui-file';
   readonly range: 'ui-range';
   readonly errorSummary: 'ui-error-summary';
@@ -115,6 +118,15 @@ export declare const cls: {
   readonly progress: 'ui-progress';
   readonly progressBar: 'ui-progress__bar';
   readonly progressIndeterminate: 'ui-progress--indeterminate';
+  readonly meter: 'ui-meter';
+  readonly meterFill: 'ui-meter__fill';
+  readonly meterAccent: 'ui-meter--accent';
+  readonly meterSuccess: 'ui-meter--success';
+  readonly meterWarning: 'ui-meter--warning';
+  readonly meterDanger: 'ui-meter--danger';
+  readonly steps: 'ui-steps';
+  readonly stepsItem: 'ui-steps__item';
+  readonly stepsItemDone: 'ui-steps__item--done';
   readonly modal: 'ui-modal';
   readonly modalHead: 'ui-modal__head';
   readonly modalTitle: 'ui-modal__title';
@@ -132,6 +144,8 @@ export declare const cls: {
   readonly comboboxList: 'ui-combobox__list';
   readonly comboboxOption: 'ui-combobox__option';
   readonly comboboxEmpty: 'ui-combobox__empty';
+  readonly lightbox: 'ui-lightbox';
+  readonly lightboxClose: 'ui-lightbox__close';
   readonly tabs: 'ui-tabs';
   readonly tabsList: 'ui-tabs__list';
   readonly tab: 'ui-tab';
@@ -150,6 +164,15 @@ export declare const cls: {
   readonly avatarSm: 'ui-avatar--sm';
   readonly avatarLg: 'ui-avatar--lg';
   readonly avatarGroup: 'ui-avatar-group';
+  readonly carousel: 'ui-carousel';
+  readonly carouselStage: 'ui-carousel__stage';
+  readonly carouselViewport: 'ui-carousel__viewport';
+  readonly carouselSlide: 'ui-carousel__slide';
+  readonly carouselPrev: 'ui-carousel__prev';
+  readonly carouselNext: 'ui-carousel__next';
+  readonly carouselStatus: 'ui-carousel__status';
+  readonly carouselThumbs: 'ui-carousel__thumbs';
+  readonly carouselThumb: 'ui-carousel__thumb';
   readonly table: 'ui-table';
   readonly tableDense: 'ui-table--dense';
   readonly tableComfortable: 'ui-table--comfortable';
@@ -190,6 +213,9 @@ export declare const cls: {
   readonly siteheaderSticky: 'ui-siteheader--sticky';
   readonly siteheaderBrand: 'ui-siteheader__brand';
   readonly siteheaderActions: 'ui-siteheader__actions';
+  readonly pagehead: 'ui-pagehead';
+  readonly pageheadTitle: 'ui-pagehead__title';
+  readonly pageheadActions: 'ui-pagehead__actions';
   readonly sitenav: 'ui-sitenav';
   readonly sitemenu: 'ui-sitemenu';
   readonly sitemenuPanel: 'ui-sitemenu__panel';
@@ -200,6 +226,10 @@ export declare const cls: {
   readonly tagAccent: 'ui-tag--accent';
   readonly meta: 'ui-meta';
   readonly metaItem: 'ui-meta__item';
+  readonly timeline: 'ui-timeline';
+  readonly timelineItem: 'ui-timeline__item';
+  readonly timelineTime: 'ui-timeline__time';
+  readonly kbd: 'ui-kbd';
   readonly display: 'ui-display';
   readonly mono: 'ui-mono';
   readonly muted: 'ui-muted';
@@ -307,6 +337,9 @@ export interface ToastOpts {
 export interface ProgressOpts {
   indeterminate?: boolean;
 }
+export interface MeterOpts {
+  tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
 export interface DotspinnerOpts {
   size?: 'sm' | 'lg';
 }
@@ -334,6 +367,10 @@ export interface ContainerOpts {
 export interface TagOpts {
   accent?: boolean;
 }
+export interface InputIconOpts {
+  /** Place the icon at the inline-end instead of the start. */
+  end?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -352,6 +389,7 @@ export interface Ui {
   alert(opts?: AlertOpts): string;
   toast(opts?: ToastOpts): string;
   progress(opts?: ProgressOpts): string;
+  meter(opts?: MeterOpts): string;
   dotspinner(opts?: DotspinnerOpts): string;
   dotbar(opts?: DotbarOpts): string;
   modal(opts?: ModalOpts): string;
@@ -360,6 +398,7 @@ export interface Ui {
   prose(opts?: ProseOpts): string;
   container(opts?: ContainerOpts): string;
   tag(opts?: TagOpts): string;
+  inputIcon(opts?: InputIconOpts): string;
 }
 
 export declare const ui: Ui;

package/classes/index.js

@@ -91,6 +91,9 @@ export const cls = Object.freeze({
   hintError: 'ui-hint--error',
   inputGroup: 'ui-input-group',
   inputGroupAddon: 'ui-input-group__addon',
+  inputIcon: 'ui-input-icon',
+  inputIconSlot: 'ui-input-icon__icon',
+  inputIconEnd: 'ui-input-icon--end',
   file: 'ui-file',
   range: 'ui-range',
   errorSummary: 'ui-error-summary',
@@ -122,6 +125,15 @@ export const cls = Object.freeze({
   progress: 'ui-progress',
   progressBar: 'ui-progress__bar',
   progressIndeterminate: 'ui-progress--indeterminate',
+  meter: 'ui-meter',
+  meterFill: 'ui-meter__fill',
+  meterAccent: 'ui-meter--accent',
+  meterSuccess: 'ui-meter--success',
+  meterWarning: 'ui-meter--warning',
+  meterDanger: 'ui-meter--danger',
+  steps: 'ui-steps',
+  stepsItem: 'ui-steps__item',
+  stepsItemDone: 'ui-steps__item--done',
   // overlay
   modal: 'ui-modal',
   modalHead: 'ui-modal__head',
@@ -140,6 +152,8 @@ export const cls = Object.freeze({
   comboboxList: 'ui-combobox__list',
   comboboxOption: 'ui-combobox__option',
   comboboxEmpty: 'ui-combobox__empty',
+  lightbox: 'ui-lightbox',
+  lightboxClose: 'ui-lightbox__close',
   // disclosure
   tabs: 'ui-tabs',
   tabsList: 'ui-tabs__list',
@@ -159,6 +173,15 @@ export const cls = Object.freeze({
   avatarSm: 'ui-avatar--sm',
   avatarLg: 'ui-avatar--lg',
   avatarGroup: 'ui-avatar-group',
+  carousel: 'ui-carousel',
+  carouselStage: 'ui-carousel__stage',
+  carouselViewport: 'ui-carousel__viewport',
+  carouselSlide: 'ui-carousel__slide',
+  carouselPrev: 'ui-carousel__prev',
+  carouselNext: 'ui-carousel__next',
+  carouselStatus: 'ui-carousel__status',
+  carouselThumbs: 'ui-carousel__thumbs',
+  carouselThumb: 'ui-carousel__thumb',
   // table
   table: 'ui-table',
   tableDense: 'ui-table--dense',
@@ -203,6 +226,9 @@ export const cls = Object.freeze({
   siteheaderSticky: 'ui-siteheader--sticky',
   siteheaderBrand: 'ui-siteheader__brand',
   siteheaderActions: 'ui-siteheader__actions',
+  pagehead: 'ui-pagehead',
+  pageheadTitle: 'ui-pagehead__title',
+  pageheadActions: 'ui-pagehead__actions',
   sitenav: 'ui-sitenav',
   sitemenu: 'ui-sitemenu',
   sitemenuPanel: 'ui-sitemenu__panel',
@@ -213,6 +239,10 @@ export const cls = Object.freeze({
   tagAccent: 'ui-tag--accent',
   meta: 'ui-meta',
   metaItem: 'ui-meta__item',
+  timeline: 'ui-timeline',
+  timelineItem: 'ui-timeline__item',
+  timelineTime: 'ui-timeline__time',
+  kbd: 'ui-kbd',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -346,6 +376,14 @@ export const ui = {
       tone === 'info' && cls.toastInfo,
     ),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
+  meter: ({ tone } = {}) =>
+    j(
+      cls.meter,
+      tone === 'accent' && cls.meterAccent,
+      tone === 'success' && cls.meterSuccess,
+      tone === 'warning' && cls.meterWarning,
+      tone === 'danger' && cls.meterDanger,
+    ),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
@@ -357,6 +395,7 @@ export const ui = {
   container: ({ narrow, wide } = {}) =>
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
+  inputIcon: ({ end } = {}) => j(cls.inputIcon, end && cls.inputIconEnd),
 };
 
 export default ui;

package/css/disclosure.css

@@ -321,3 +321,183 @@
 .ui-avatar-group .ui-avatar:not(:first-child) {
   margin-inline-start: -0.5rem;
 }
+
+/* --- Carousel — a scroll-snap track of slides with an optional thumbnail
+   strip. Native horizontal scroll gives touch/trackpad swipe + momentum
+   for free; initCarousel adds prev/next, keyboard, thumbnail sync and the
+   position counter. A full-screen gallery is this same carousel inside a
+   native <dialog class="ui-lightbox"> (see overlay.css) — the dialog
+   brings the top layer, focus-trap and Esc; nothing is re-implemented. --- */
+
+.ui-carousel {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+/* Positioned frame for the viewport + overlay controls. The arrows can't
+   live inside the scroll viewport (absolute children of a scroll container
+   scroll away with the content), so they anchor to this stage instead. */
+.ui-carousel__stage {
+  position: relative;
+}
+
+.ui-carousel__viewport {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.ui-carousel__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-carousel__viewport:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.ui-carousel__slide {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+}
+
+.ui-carousel__slide > :is(img, picture, .ui-ratio) {
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/* Prev / next — hairline round controls over the stage edges. */
+.ui-carousel__prev,
+.ui-carousel__next {
+  align-items: center;
+  background: color-mix(in srgb, var(--panel-strong) 80%, transparent);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  color: var(--text);
+  cursor: pointer;
+  display: inline-flex;
+  block-size: 2.2rem;
+  inline-size: 2.2rem;
+  inset-block-start: 50%;
+  justify-content: center;
+  position: absolute;
+  transform: translateY(-50%);
+  z-index: var(--z-raised);
+}
+
+.ui-carousel__prev {
+  inset-inline-start: var(--space-xs);
+}
+
+.ui-carousel__next {
+  inset-inline-end: var(--space-xs);
+}
+
+/* Chevron glyph, mirrors for RTL via the logical border edges. */
+.ui-carousel__prev::before,
+.ui-carousel__next::before {
+  block-size: 0.5rem;
+  border-block-start: 1.5px solid currentColor;
+  border-inline-end: 1.5px solid currentColor;
+  content: '';
+  inline-size: 0.5rem;
+}
+
+.ui-carousel__prev::before {
+  margin-inline-start: 0.2rem;
+  transform: rotate(-135deg);
+}
+
+.ui-carousel__next::before {
+  margin-inline-end: 0.2rem;
+  transform: rotate(45deg);
+}
+
+/* The chevron direction is a physical rotation, so flip it for RTL (the
+   buttons already swap sides via the logical insets above). */
+[dir='rtl'] .ui-carousel__prev::before {
+  transform: rotate(45deg);
+}
+
+[dir='rtl'] .ui-carousel__next::before {
+  transform: rotate(-135deg);
+}
+
+.ui-carousel__prev:disabled,
+.ui-carousel__next:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.ui-carousel__prev:focus-visible,
+.ui-carousel__next:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Position counter ("3 / 12") — initCarousel fills the text; aria-live. */
+.ui-carousel__status {
+  background: color-mix(in srgb, var(--panel-strong) 75%, transparent);
+  border-radius: var(--radius-pill);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inset-block-end: var(--space-xs);
+  inset-inline-start: var(--space-xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.2rem 0.5rem;
+  position: absolute;
+}
+
+/* Thumbnail strip — clicking a thumb jumps the track; active = accent. */
+.ui-carousel__thumbs {
+  display: flex;
+  gap: 0.4rem;
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.ui-carousel__thumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-carousel__thumb {
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  flex: 0 0 auto;
+  block-size: 3rem;
+  inline-size: 4rem;
+  overflow: hidden;
+  padding: 0;
+}
+
+.ui-carousel__thumb > img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.ui-carousel__thumb[aria-current='true'] {
+  border-color: var(--accent);
+}
+
+.ui-carousel__thumb:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-carousel__viewport,
+  .ui-carousel__thumbs {
+    scroll-behavior: auto;
+  }
+}

package/css/feedback.css

@@ -338,3 +338,114 @@
     animation: none;
   }
 }
+
+/* --- Meter — a labelled proportion / threshold bar. Unlike ui-progress
+   (task progress, can be indeterminate), a meter shows a measured static
+   value for data display (coverage, capacity, a KPI against a target).
+   Drive the fill with the same --value knob as progress; tone the fill by
+   threshold. Author role="meter" + aria-valuenow/min/max for AT. --- */
+
+.ui-meter {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+  inline-size: 100%;
+}
+
+/* Default (untoned) fill is --text-dim, not --line-strong: the fill
+   conveys the measured value, so it must clear the 3:1 non-text floor
+   against the --panel-soft track (--line-strong is only ~2:1). --text-dim
+   on --surface-muted is already a gated contrast pairing (≥4.5:1). */
+.ui-meter__fill {
+  background: var(--text-dim);
+  block-size: 100%;
+  transition: inline-size var(--duration-base) var(--ease-out);
+  inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
+}
+
+.ui-meter--accent .ui-meter__fill {
+  background: var(--accent);
+}
+
+.ui-meter--success .ui-meter__fill {
+  background: var(--success);
+}
+
+.ui-meter--warning .ui-meter__fill {
+  background: var(--warning);
+}
+
+.ui-meter--danger .ui-meter__fill {
+  background: var(--danger);
+}
+
+/* --- Steps — progress through a multi-step flow. Use an <ol>; the
+   current step is aria-current="step" (no class), completed steps take
+   --done. Counter-numbered markers, hairline connectors. --- */
+
+.ui-steps {
+  counter-reset: ui-step;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-steps__item {
+  align-items: center;
+  color: var(--text-dim);
+  counter-increment: ui-step;
+  display: inline-flex;
+  flex: 1 1 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.5rem;
+  letter-spacing: var(--tracking-wide);
+  min-inline-size: max-content;
+  text-transform: uppercase;
+}
+
+.ui-steps__item::before {
+  align-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--text-dim);
+  content: counter(ui-step);
+  display: inline-flex;
+  flex: 0 0 auto;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  justify-content: center;
+}
+
+/* Connector hairline trailing every item except the last. */
+.ui-steps__item:not(:last-child)::after {
+  background: var(--line);
+  block-size: 1px;
+  content: '';
+  flex: 1 1 1.5rem;
+  min-inline-size: 1rem;
+}
+
+.ui-steps__item[aria-current='step'] {
+  color: var(--text);
+}
+
+.ui-steps__item[aria-current='step']::before {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-steps__item--done {
+  color: var(--text-soft);
+}
+
+.ui-steps__item--done::before {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--button-text);
+}

package/css/forms.css

@@ -131,6 +131,50 @@
   white-space: nowrap;
 }
 
+/* --- Input icon: a leading (or trailing) glyph *inside* a single
+   control, distinct from input-group's adjacent affix. Wrap the input:
+   <span class="ui-input-icon"><svg class="ui-input-icon__icon"/>
+   <input class="ui-input"></span>. The icon is a decorative overlay; the
+   input keeps full width and gains padding on the icon side. --end moves
+   the icon to the inline-end. RTL falls out of the logical props. --- */
+.ui-input-icon {
+  display: block;
+  position: relative;
+}
+
+.ui-input-icon > .ui-input {
+  padding-inline-start: 2.2rem;
+}
+
+.ui-input-icon--end > .ui-input {
+  padding-inline: 0.7rem 2.2rem;
+}
+
+.ui-input-icon__icon {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  inset-block-start: 50%;
+  inset-inline-start: 0.7rem;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.ui-input-icon--end .ui-input-icon__icon {
+  inset-inline: auto 0.7rem;
+}
+
+.ui-input-icon__icon svg {
+  block-size: 1rem;
+  inline-size: 1rem;
+}
+
+.ui-input-icon:focus-within .ui-input-icon__icon {
+  color: var(--accent);
+}
+
 /* --- File input --- */
 .ui-file {
   color: var(--text-soft);

package/css/overlay.css

@@ -105,6 +105,54 @@
   }
 }
 
+/* --- Lightbox — a full-viewport <dialog> wrapping a .ui-carousel. The
+   native <dialog> brings the top layer, focus-trap and Escape; initDialog
+   adds open (`data-bronto-open`) + focus-return; initCarousel drives the
+   inner carousel. No bespoke overlay/focus code — that is the whole point
+   of building it on <dialog>. --- */
+.ui-lightbox {
+  background: color-mix(in srgb, var(--bg) 92%, #000);
+  border: 0;
+  block-size: 100vh;
+  color: var(--text);
+  max-block-size: 100vh;
+  max-inline-size: 100vw;
+  padding: 0;
+  inline-size: 100vw;
+}
+
+.ui-lightbox::backdrop {
+  background: color-mix(in srgb, #000 80%, transparent);
+}
+
+.ui-lightbox[open] {
+  align-content: center;
+  display: grid;
+}
+
+.ui-lightbox .ui-carousel {
+  inline-size: 100%;
+  margin: auto;
+  max-inline-size: min(64rem, 100vw);
+}
+
+/* Lightbox images are shown whole (contain), not cropped like the inline
+   carousel's cover thumbnails. */
+.ui-lightbox .ui-carousel__slide > img {
+  margin-inline: auto;
+  max-block-size: 80vh;
+  max-inline-size: 100%;
+  inline-size: auto;
+  object-fit: contain;
+}
+
+.ui-lightbox__close {
+  inset-block-start: var(--space-sm);
+  inset-inline-end: var(--space-sm);
+  position: fixed;
+  z-index: var(--z-raised);
+}
+
 /* --- Dropdown menu — pairs with native <details> --- */
 
 /* The positioned host for a <details> dropdown: .ui-menu is absolute, so

package/css/primitives.css

@@ -631,3 +631,63 @@
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
+
+/* --- Keyboard key — inline glyph for shortcut hints. Wrap a <kbd>. --- */
+
+.ui-kbd {
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  justify-content: center;
+  line-height: 1;
+  min-inline-size: 1.4rem;
+  padding: 0.18rem 0.4rem;
+}
+
+/* --- Timeline — vertical event list on a hairline spine. Use an <ol>;
+   each <li> is a __item with an optional __time label. aria-current marks
+   the live/most-recent event (accent marker). --- */
+
+.ui-timeline {
+  display: grid;
+  gap: var(--space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-timeline__item {
+  border-inline-start: 1px solid var(--line);
+  display: grid;
+  gap: 0.2rem;
+  padding-inline-start: var(--space-md);
+  position: relative;
+}
+
+.ui-timeline__item::before {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  inline-size: 0.5rem;
+  inset-block-start: 0.18rem;
+  inset-inline-start: calc(-0.25rem - 0.5px);
+  position: absolute;
+}
+
+.ui-timeline__item[aria-current]::before {
+  background: var(--accent);
+}
+
+.ui-timeline__time {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/css/site.css

@@ -91,6 +91,39 @@
   gap: var(--space-xs);
 }
 
+/* --- Page header — the in-page title bar every view re-hand-rolls:
+   eyebrow/breadcrumb + title on the start, actions on the end, one
+   hairline beneath. Compose the existing ui-eyebrow / ui-breadcrumb in
+   the title block (don't duplicate them); __actions is a cluster. --- */
+
+.ui-pagehead {
+  align-items: flex-end;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block-end: var(--space-md);
+}
+
+.ui-pagehead__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  letter-spacing: var(--tracking-wide);
+  line-height: 1.1;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-pagehead__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
 /* --- Nav — desktop inline, dot active cue via aria-current --- */
 
 .ui-sitenav {