@ponchia/ui 0.3.3 → 0.3.5

package/classes/index.d.ts

@@ -39,6 +39,7 @@ export declare const cls: {
   readonly badgeSuccess: 'ui-badge--success';
   readonly badgeWarning: 'ui-badge--warning';
   readonly badgeDanger: 'ui-badge--danger';
+  readonly badgeInfo: 'ui-badge--info';
   readonly badgeMuted: 'ui-badge--muted';
   readonly badgeDot: 'ui-badge--dot';
   readonly chip: 'ui-chip';
@@ -53,6 +54,7 @@ export declare const cls: {
   readonly dotSuccess: 'ui-dot--success';
   readonly dotWarning: 'ui-dot--warning';
   readonly dotDanger: 'ui-dot--danger';
+  readonly dotInfo: 'ui-dot--info';
   readonly dotLive: 'ui-dot--live';
   readonly dotgrid: 'ui-dotgrid';
   readonly dotgridAccent: 'ui-dotgrid--accent';
@@ -83,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';
@@ -96,6 +101,7 @@ export declare const cls: {
   readonly alertSuccess: 'ui-alert--success';
   readonly alertWarning: 'ui-alert--warning';
   readonly alertDanger: 'ui-alert--danger';
+  readonly alertInfo: 'ui-alert--info';
   readonly toastStack: 'ui-toast-stack';
   readonly toastStackAssertive: 'ui-toast-stack--assertive';
   readonly toast: 'ui-toast';
@@ -105,12 +111,22 @@ export declare const cls: {
   readonly toastSuccess: 'ui-toast--success';
   readonly toastWarning: 'ui-toast--warning';
   readonly toastDanger: 'ui-toast--danger';
+  readonly toastInfo: 'ui-toast--info';
   readonly tooltip: 'ui-tooltip';
   readonly tooltipBubble: 'ui-tooltip__bubble';
   readonly popover: 'ui-popover';
   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';
@@ -128,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';
@@ -146,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';
@@ -186,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';
@@ -196,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';
@@ -255,7 +289,7 @@ export interface CardOpts {
   interactive?: boolean;
 }
 export interface BadgeOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'muted';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'muted';
   dot?: boolean;
 }
 export interface NumOpts {
@@ -269,7 +303,7 @@ export interface LinkOpts {
   cta?: boolean;
 }
 export interface DotOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   live?: boolean;
 }
 export interface DotgridOpts {
@@ -293,7 +327,7 @@ export interface ClusterOpts {
 export interface StaggerOpts {
   auto?: boolean;
 }
-export type Tone = 'accent' | 'success' | 'warning' | 'danger';
+export type Tone = 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface AlertOpts {
   tone?: Tone;
 }
@@ -303,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';
 }
@@ -330,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;
@@ -348,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;
@@ -356,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

@@ -43,6 +43,7 @@ export const cls = Object.freeze({
   badgeSuccess: 'ui-badge--success',
   badgeWarning: 'ui-badge--warning',
   badgeDanger: 'ui-badge--danger',
+  badgeInfo: 'ui-badge--info',
   badgeMuted: 'ui-badge--muted',
   badgeDot: 'ui-badge--dot',
   chip: 'ui-chip',
@@ -58,6 +59,7 @@ export const cls = Object.freeze({
   dotSuccess: 'ui-dot--success',
   dotWarning: 'ui-dot--warning',
   dotDanger: 'ui-dot--danger',
+  dotInfo: 'ui-dot--info',
   dotLive: 'ui-dot--live',
   dotgrid: 'ui-dotgrid',
   dotgridAccent: 'ui-dotgrid--accent',
@@ -89,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',
@@ -103,6 +108,7 @@ export const cls = Object.freeze({
   alertSuccess: 'ui-alert--success',
   alertWarning: 'ui-alert--warning',
   alertDanger: 'ui-alert--danger',
+  alertInfo: 'ui-alert--info',
   toastStack: 'ui-toast-stack',
   toastStackAssertive: 'ui-toast-stack--assertive',
   toast: 'ui-toast',
@@ -112,12 +118,22 @@ export const cls = Object.freeze({
   toastSuccess: 'ui-toast--success',
   toastWarning: 'ui-toast--warning',
   toastDanger: 'ui-toast--danger',
+  toastInfo: 'ui-toast--info',
   tooltip: 'ui-tooltip',
   tooltipBubble: 'ui-tooltip__bubble',
   popover: 'ui-popover',
   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',
@@ -136,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',
@@ -155,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',
@@ -199,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',
@@ -209,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',
@@ -287,6 +321,7 @@ export const ui = {
       tone === 'success' && cls.badgeSuccess,
       tone === 'warning' && cls.badgeWarning,
       tone === 'danger' && cls.badgeDanger,
+      tone === 'info' && cls.badgeInfo,
       tone === 'muted' && cls.badgeMuted,
       dot && cls.badgeDot,
     ),
@@ -306,6 +341,7 @@ export const ui = {
       tone === 'success' && cls.dotSuccess,
       tone === 'warning' && cls.dotWarning,
       tone === 'danger' && cls.dotDanger,
+      tone === 'info' && cls.dotInfo,
       live && cls.dotLive,
     ),
   dotgrid: ({ accent, dense } = {}) =>
@@ -328,6 +364,7 @@ export const ui = {
       tone === 'success' && cls.alertSuccess,
       tone === 'warning' && cls.alertWarning,
       tone === 'danger' && cls.alertDanger,
+      tone === 'info' && cls.alertInfo,
     ),
   toast: ({ tone } = {}) =>
     j(
@@ -336,8 +373,17 @@ export const ui = {
       tone === 'success' && cls.toastSuccess,
       tone === 'warning' && cls.toastWarning,
       tone === 'danger' && cls.toastDanger,
+      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),
@@ -349,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/classes/vscode.css-custom-data.json

@@ -85,6 +85,10 @@
       "name": "--bronto-color-focus",
       "description": "Global scale token. Value: `var(--focus-ring)`"
     },
+    {
+      "name": "--bronto-color-info",
+      "description": "Global scale token. Value: `var(--info)`"
+    },
     {
       "name": "--bronto-color-on-action",
       "description": "Global scale token. Value: `var(--button-text)`"
@@ -131,7 +135,7 @@
     },
     {
       "name": "--display",
-      "description": "Global scale token. Value: `'Doto', var(--mono)`"
+      "description": "Global scale token. Value: `var(--dot-font)`"
     },
     {
       "name": "--dot-font",
@@ -185,6 +189,14 @@
       "name": "--focus-ring",
       "description": "Theme token. Light: `var(--accent)` · Dark: `var(--accent)`"
     },
+    {
+      "name": "--info",
+      "description": "Theme token. Light: `#1f63c4` · Dark: `#6fb0e6`"
+    },
+    {
+      "name": "--info-soft",
+      "description": "Theme token. Light: `rgb(31, 99, 196, 0.12)` · Dark: `rgb(111, 176, 230, 0.14)`"
+    },
     {
       "name": "--line",
       "description": "Theme token. Light: `#d8d8d4` · Dark: `#2a2a2a`"

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/dots.css

@@ -94,6 +94,10 @@
   background: var(--danger);
 }
 
+.ui-dot--info {
+  background: var(--info);
+}
+
 .ui-dot--live {
   background: var(--success);
   box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);
@@ -229,7 +233,7 @@
 
 .ui-dotbar i {
   background: var(--field-dot);
-  border-radius: 1px;
+  border-radius: var(--radius-sm);
   flex: 1;
   block-size: 0.5rem;
 }

package/css/feedback.css

@@ -95,6 +95,14 @@
   background: var(--danger);
 }
 
+.ui-alert--info {
+  border-inline-start-color: var(--info);
+}
+
+.ui-alert--info::before {
+  background: var(--info);
+}
+
 @media (hover: hover) {
   .ui-alert__dismiss:hover {
     color: var(--text);
@@ -201,6 +209,10 @@
   background: var(--danger);
 }
 
+.ui-toast--info::before {
+  background: var(--info);
+}
+
 /* --- Tooltip — CSS-only, hover/focus, no JS --- */
 
 .ui-tooltip {
@@ -326,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);
+}