@ponchia/ui 0.4.0 → 0.5.0

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 263 classes across 110 component groups
+- 474 classes across 148 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -66,6 +66,46 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.animateMatrix` | `ui-animate-matrix` | base |
 
+### `.ui-annotation`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.annotation` | `ui-annotation` | base |
+| `cls.annotationBadge` | `ui-annotation__badge` | part |
+| `cls.annotationConnector` | `ui-annotation__connector` | part |
+| `cls.annotationConnectorEnd` | `ui-annotation__connector-end` | part |
+| `cls.annotationLabel` | `ui-annotation__label` | part |
+| `cls.annotationNote` | `ui-annotation__note` | part |
+| `cls.annotationNoteLine` | `ui-annotation__note-line` | part |
+| `cls.annotationSubject` | `ui-annotation__subject` | part |
+| `cls.annotationTitle` | `ui-annotation__title` | part |
+| `cls.annotationAccent` | `ui-annotation--accent` | modifier |
+| `cls.annotationAxis` | `ui-annotation--axis` | modifier |
+| `cls.annotationBadgeVariant` | `ui-annotation--badge` | modifier |
+| `cls.annotationBand` | `ui-annotation--band` | modifier |
+| `cls.annotationBracket` | `ui-annotation--bracket` | modifier |
+| `cls.annotationCallout` | `ui-annotation--callout` | modifier |
+| `cls.annotationCircle` | `ui-annotation--circle` | modifier |
+| `cls.annotationCluster` | `ui-annotation--cluster` | modifier |
+| `cls.annotationCompare` | `ui-annotation--compare` | modifier |
+| `cls.annotationCurve` | `ui-annotation--curve` | modifier |
+| `cls.annotationDanger` | `ui-annotation--danger` | modifier |
+| `cls.annotationDraw` | `ui-annotation--draw` | modifier |
+| `cls.annotationElbow` | `ui-annotation--elbow` | modifier |
+| `cls.annotationEvidence` | `ui-annotation--evidence` | modifier |
+| `cls.annotationFocus` | `ui-annotation--focus` | modifier |
+| `cls.annotationInfo` | `ui-annotation--info` | modifier |
+| `cls.annotationLabelVariant` | `ui-annotation--label` | modifier |
+| `cls.annotationMuted` | `ui-annotation--muted` | modifier |
+| `cls.annotationPulse` | `ui-annotation--pulse` | modifier |
+| `cls.annotationRect` | `ui-annotation--rect` | modifier |
+| `cls.annotationReveal` | `ui-annotation--reveal` | modifier |
+| `cls.annotationSlope` | `ui-annotation--slope` | modifier |
+| `cls.annotationSuccess` | `ui-annotation--success` | modifier |
+| `cls.annotationThreshold` | `ui-annotation--threshold` | modifier |
+| `cls.annotationTimeline` | `ui-annotation--timeline` | modifier |
+| `cls.annotationWarning` | `ui-annotation--warning` | modifier |
+
 ### `.ui-app-content`
 
 | Registry key | Class | Kind |
@@ -172,6 +212,17 @@ each one matches a real selector in the stylesheet.
 | `cls.badgeSuccess` | `ui-badge--success` | modifier |
 | `cls.badgeWarning` | `ui-badge--warning` | modifier |
 
+### `.ui-bracket-note`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.bracketNote` | `ui-bracket-note` | base |
+| `cls.bracketNoteLabel` | `ui-bracket-note__label` | part |
+| `cls.bracketNoteAccent` | `ui-bracket-note--accent` | modifier |
+| `cls.bracketNoteDanger` | `ui-bracket-note--danger` | modifier |
+| `cls.bracketNoteInfo` | `ui-bracket-note--info` | modifier |
+| `cls.bracketNoteWarning` | `ui-bracket-note--warning` | modifier |
+
 ### `.ui-breadcrumb`
 
 | Registry key | Class | Kind |
@@ -179,6 +230,18 @@ each one matches a real selector in the stylesheet.
 | `cls.breadcrumb` | `ui-breadcrumb` | base |
 | `cls.breadcrumbItem` | `ui-breadcrumb__item` | part |
 
+### `.ui-break-after`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.breakAfter` | `ui-break-after` | base |
+
+### `.ui-break-before`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.breakBefore` | `ui-break-before` | base |
+
 ### `.ui-button`
 
 | Registry key | Class | Kind |
@@ -226,6 +289,19 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.center` | `ui-center` | base |
 
+### `.ui-chart`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.chart` | `ui-chart` | base |
+| `cls.chartBar` | `ui-chart__bar` | part |
+| `cls.chartCaption` | `ui-chart__caption` | part |
+| `cls.chartFallback` | `ui-chart__fallback` | part |
+| `cls.chartFill` | `ui-chart__fill` | part |
+| `cls.chartLabel` | `ui-chart__label` | part |
+| `cls.chartPlot` | `ui-chart__plot` | part |
+| `cls.chartTrack` | `ui-chart__track` | part |
+
 ### `.ui-check`
 
 | Registry key | Class | Kind |
@@ -239,6 +315,13 @@ each one matches a real selector in the stylesheet.
 | `cls.chip` | `ui-chip` | base |
 | `cls.chipAccent` | `ui-chip--accent` | modifier |
 
+### `.ui-citation`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.citation` | `ui-citation` | base |
+| `cls.citationChip` | `ui-citation--chip` | modifier |
+
 ### `.ui-cluster`
 
 | Registry key | Class | Kind |
@@ -256,6 +339,35 @@ each one matches a real selector in the stylesheet.
 | `cls.comboboxList` | `ui-combobox__list` | part |
 | `cls.comboboxOption` | `ui-combobox__option` | part |
 
+### `.ui-command`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.command` | `ui-command` | base |
+| `cls.commandEmpty` | `ui-command__empty` | part |
+| `cls.commandGroup` | `ui-command__group` | part |
+| `cls.commandInput` | `ui-command__input` | part |
+| `cls.commandItem` | `ui-command__item` | part |
+| `cls.commandList` | `ui-command__list` | part |
+| `cls.commandMeta` | `ui-command__meta` | part |
+| `cls.commandShortcut` | `ui-command__shortcut` | part |
+
+### `.ui-connector`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.connector` | `ui-connector` | base |
+| `cls.connectorEnd` | `ui-connector__end` | part |
+| `cls.connectorPath` | `ui-connector__path` | part |
+| `cls.connectorAccent` | `ui-connector--accent` | modifier |
+| `cls.connectorDanger` | `ui-connector--danger` | modifier |
+| `cls.connectorDashed` | `ui-connector--dashed` | modifier |
+| `cls.connectorDraw` | `ui-connector--draw` | modifier |
+| `cls.connectorInfo` | `ui-connector--info` | modifier |
+| `cls.connectorMuted` | `ui-connector--muted` | modifier |
+| `cls.connectorSuccess` | `ui-connector--success` | modifier |
+| `cls.connectorWarning` | `ui-connector--warning` | modifier |
+
 ### `.ui-container`
 
 | Registry key | Class | Kind |
@@ -270,6 +382,17 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.cq` | `ui-cq` | base |
 
+### `.ui-crosshair`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.crosshair` | `ui-crosshair` | base |
+| `cls.crosshairBadge` | `ui-crosshair__badge` | part |
+| `cls.crosshairLine` | `ui-crosshair__line` | part |
+| `cls.crosshairLineX` | `ui-crosshair__line--x` | modifier |
+| `cls.crosshairLineY` | `ui-crosshair__line--y` | modifier |
+| `cls.crosshairMuted` | `ui-crosshair--muted` | modifier |
+
 ### `.ui-display`
 
 | Registry key | Class | Kind |
@@ -380,6 +503,13 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.file` | `ui-file` | base |
 
+### `.ui-generated`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.generated` | `ui-generated` | base |
+| `cls.generatedLabel` | `ui-generated__label` | part |
+
 ### `.ui-grid`
 
 | Registry key | Class | Kind |
@@ -420,12 +550,26 @@ each one matches a real selector in the stylesheet.
 | `cls.inputIconSlot` | `ui-input-icon__icon` | part |
 | `cls.inputIconEnd` | `ui-input-icon--end` | modifier |
 
+### `.ui-inspector`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.inspector` | `ui-inspector` | base |
+| `cls.inspectorBody` | `ui-inspector__body` | part |
+| `cls.inspectorHeader` | `ui-inspector__header` | part |
+
 ### `.ui-kbd`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.kbd` | `ui-kbd` | base |
 
+### `.ui-keep`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.keep` | `ui-keep` | base |
+
 ### `.ui-key-value`
 
 | Registry key | Class | Kind |
@@ -438,6 +582,39 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.label` | `ui-label` | base |
 
+### `.ui-legend`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.legend` | `ui-legend` | base |
+| `cls.legendCaption` | `ui-legend__caption` | part |
+| `cls.legendItem` | `ui-legend__item` | part |
+| `cls.legendLabel` | `ui-legend__label` | part |
+| `cls.legendSwatch` | `ui-legend__swatch` | part |
+| `cls.legendSwatch1` | `ui-legend__swatch--1` | modifier |
+| `cls.legendSwatch2` | `ui-legend__swatch--2` | modifier |
+| `cls.legendSwatch3` | `ui-legend__swatch--3` | modifier |
+| `cls.legendSwatch4` | `ui-legend__swatch--4` | modifier |
+| `cls.legendSwatch5` | `ui-legend__swatch--5` | modifier |
+| `cls.legendSwatch6` | `ui-legend__swatch--6` | modifier |
+| `cls.legendSwatch7` | `ui-legend__swatch--7` | modifier |
+| `cls.legendSwatch8` | `ui-legend__swatch--8` | modifier |
+| `cls.legendSwatchCircle` | `ui-legend__swatch--circle` | modifier |
+| `cls.legendSwatchLine` | `ui-legend__swatch--line` | modifier |
+| `cls.legendSymbol` | `ui-legend__symbol` | part |
+| `cls.legendTick` | `ui-legend__tick` | part |
+| `cls.legendTicks` | `ui-legend__ticks` | part |
+| `cls.legendTitle` | `ui-legend__title` | part |
+| `cls.legendTrack` | `ui-legend__track` | part |
+| `cls.legendValue` | `ui-legend__value` | part |
+| `cls.legendCompact` | `ui-legend--compact` | modifier |
+| `cls.legendDiverging` | `ui-legend--diverging` | modifier |
+| `cls.legendGradient` | `ui-legend--gradient` | modifier |
+| `cls.legendInteractive` | `ui-legend--interactive` | modifier |
+| `cls.legendThreshold` | `ui-legend--threshold` | modifier |
+| `cls.legendVertical` | `ui-legend--vertical` | modifier |
+| `cls.legendWithValues` | `ui-legend--with-values` | modifier |
+
 ### `.ui-lightbox`
 
 | Registry key | Class | Kind |
@@ -453,6 +630,22 @@ each one matches a real selector in the stylesheet.
 | `cls.linkArrow` | `ui-link--arrow` | modifier |
 | `cls.linkCta` | `ui-link--cta` | modifier |
 
+### `.ui-mark`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.mark` | `ui-mark` | base |
+| `cls.markAccent` | `ui-mark--accent` | modifier |
+| `cls.markBox` | `ui-mark--box` | modifier |
+| `cls.markDanger` | `ui-mark--danger` | modifier |
+| `cls.markDraw` | `ui-mark--draw` | modifier |
+| `cls.markInfo` | `ui-mark--info` | modifier |
+| `cls.markMuted` | `ui-mark--muted` | modifier |
+| `cls.markStrike` | `ui-mark--strike` | modifier |
+| `cls.markSuccess` | `ui-mark--success` | modifier |
+| `cls.markUnderline` | `ui-mark--underline` | modifier |
+| `cls.markWarning` | `ui-mark--warning` | modifier |
+
 ### `.ui-matrix`
 
 | Registry key | Class | Kind |
@@ -525,6 +718,13 @@ each one matches a real selector in the stylesheet.
 | `cls.numNeg` | `ui-num--neg` | modifier |
 | `cls.numPos` | `ui-num--pos` | modifier |
 
+### `.ui-origin-label`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.originLabel` | `ui-origin-label` | base |
+| `cls.originLabelAi` | `ui-origin-label--ai` | modifier |
+
 ### `.ui-pagehead`
 
 | Registry key | Class | Kind |
@@ -553,6 +753,18 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.popover` | `ui-popover` | base |
 
+### `.ui-print-exact`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.printExact` | `ui-print-exact` | base |
+
+### `.ui-print-only`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.printOnly` | `ui-print-only` | base |
+
 ### `.ui-progress`
 
 | Registry key | Class | Kind |
@@ -561,6 +773,14 @@ each one matches a real selector in the stylesheet.
 | `cls.progressBar` | `ui-progress__bar` | part |
 | `cls.progressIndeterminate` | `ui-progress--indeterminate` | modifier |
 
+### `.ui-property`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.property` | `ui-property` | base |
+| `cls.propertyLabel` | `ui-property__label` | part |
+| `cls.propertyValue` | `ui-property__value` | part |
+
 ### `.ui-prose`
 
 | Registry key | Class | Kind |
@@ -568,6 +788,13 @@ each one matches a real selector in the stylesheet.
 | `cls.prose` | `ui-prose` | base |
 | `cls.proseCompact` | `ui-prose--compact` | modifier |
 
+### `.ui-provenance`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.provenance` | `ui-provenance` | base |
+| `cls.provenanceItem` | `ui-provenance__item` | part |
+
 ### `.ui-quote`
 
 | Registry key | Class | Kind |
@@ -587,12 +814,69 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.ratio` | `ui-ratio` | base |
 
+### `.ui-readout`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.readout` | `ui-readout` | base |
+
+### `.ui-reasoning`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.reasoning` | `ui-reasoning` | base |
+| `cls.reasoningBody` | `ui-reasoning__body` | part |
+
+### `.ui-report`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.report` | `ui-report` | base |
+| `cls.reportAppendix` | `ui-report__appendix` | part |
+| `cls.reportCaption` | `ui-report__caption` | part |
+| `cls.reportCover` | `ui-report__cover` | part |
+| `cls.reportCoverCompact` | `ui-report__cover--compact` | modifier |
+| `cls.reportEvidence` | `ui-report__evidence` | part |
+| `cls.reportFigure` | `ui-report__figure` | part |
+| `cls.reportFinding` | `ui-report__finding` | part |
+| `cls.reportFootnotes` | `ui-report__footnotes` | part |
+| `cls.reportHeader` | `ui-report__header` | part |
+| `cls.reportMeta` | `ui-report__meta` | part |
+| `cls.reportSection` | `ui-report__section` | part |
+| `cls.reportSectionUnnumbered` | `ui-report__section--unnumbered` | modifier |
+| `cls.reportSectionHead` | `ui-report__section-head` | part |
+| `cls.reportSources` | `ui-report__sources` | part |
+| `cls.reportSubtitle` | `ui-report__subtitle` | part |
+| `cls.reportSummary` | `ui-report__summary` | part |
+| `cls.reportTitle` | `ui-report__title` | part |
+| `cls.reportToc` | `ui-report__toc` | part |
+| `cls.reportCompact` | `ui-report--compact` | modifier |
+| `cls.reportNumbered` | `ui-report--numbered` | modifier |
+
 ### `.ui-reveal`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.reveal` | `ui-reveal` | base |
 
+### `.ui-screen-only`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.screenOnly` | `ui-screen-only` | base |
+
+### `.ui-scroll-progress`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.scrollProgress` | `ui-scroll-progress` | base |
+
+### `.ui-scroll-reveal`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.scrollReveal` | `ui-scroll-reveal` | base |
+
 ### `.ui-search`
 
 | Registry key | Class | Kind |
@@ -606,12 +890,36 @@ each one matches a real selector in the stylesheet.
 | `cls.segmented` | `ui-segmented` | base |
 | `cls.segmentedOption` | `ui-segmented__option` | part |
 
+### `.ui-sel`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.sel` | `ui-sel` | base |
+| `cls.selMaybe` | `ui-sel--maybe` | modifier |
+| `cls.selOff` | `ui-sel--off` | modifier |
+| `cls.selOn` | `ui-sel--on` | modifier |
+
 ### `.ui-select`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.select` | `ui-select` | base |
 
+### `.ui-selectionbar`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.selectionbar` | `ui-selectionbar` | base |
+| `cls.selectionbarActions` | `ui-selectionbar__actions` | part |
+| `cls.selectionbarCount` | `ui-selectionbar__count` | part |
+
+### `.ui-shortcut`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.shortcut` | `ui-shortcut` | base |
+| `cls.shortcutSep` | `ui-shortcut__sep` | part |
+
 ### `.ui-sidebar`
 
 | Registry key | Class | Kind |
@@ -659,12 +967,49 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.skiplink` | `ui-skiplink` | base |
 
+### `.ui-source-card`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.sourceCard` | `ui-source-card` | base |
+| `cls.sourceCardActions` | `ui-source-card__actions` | part |
+| `cls.sourceCardExcerpt` | `ui-source-card__excerpt` | part |
+| `cls.sourceCardOrigin` | `ui-source-card__origin` | part |
+| `cls.sourceCardTime` | `ui-source-card__time` | part |
+| `cls.sourceCardTitle` | `ui-source-card__title` | part |
+
+### `.ui-source-list`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.sourceList` | `ui-source-list` | base |
+| `cls.sourceListItem` | `ui-source-list__item` | part |
+
 ### `.ui-spinner`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.spinner` | `ui-spinner` | base |
 
+### `.ui-spotlight`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.spotlight` | `ui-spotlight` | base |
+| `cls.spotlightHole` | `ui-spotlight__hole` | part |
+| `cls.spotlightRing` | `ui-spotlight--ring` | modifier |
+
+### `.ui-src`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.srcConflict` | `ui-src--conflict` | modifier |
+| `cls.srcGenerated` | `ui-src--generated` | modifier |
+| `cls.srcReviewed` | `ui-src--reviewed` | modifier |
+| `cls.srcStale` | `ui-src--stale` | modifier |
+| `cls.srcUnverified` | `ui-src--unverified` | modifier |
+| `cls.srcVerified` | `ui-src--verified` | modifier |
+
 ### `.ui-stack`
 
 | Registry key | Class | Kind |
@@ -687,6 +1032,25 @@ each one matches a real selector in the stylesheet.
 | `cls.statLabel` | `ui-stat__label` | part |
 | `cls.statValue` | `ui-stat__value` | part |
 
+### `.ui-state`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.state` | `ui-state` | base |
+| `cls.stateDetail` | `ui-state__detail` | part |
+| `cls.stateLabel` | `ui-state__label` | part |
+| `cls.stateBusy` | `ui-state--busy` | modifier |
+| `cls.stateConflict` | `ui-state--conflict` | modifier |
+| `cls.stateError` | `ui-state--error` | modifier |
+| `cls.stateLocked` | `ui-state--locked` | modifier |
+| `cls.stateNeedsReview` | `ui-state--needs-review` | modifier |
+| `cls.stateOffline` | `ui-state--offline` | modifier |
+| `cls.stateQueued` | `ui-state--queued` | modifier |
+| `cls.stateReviewed` | `ui-state--reviewed` | modifier |
+| `cls.stateSaved` | `ui-state--saved` | modifier |
+| `cls.stateSaving` | `ui-state--saving` | modifier |
+| `cls.stateStale` | `ui-state--stale` | modifier |
+
 ### `.ui-statgrid`
 
 | Registry key | Class | Kind |
@@ -727,6 +1091,12 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.switcher` | `ui-switcher` | base |
 
+### `.ui-syncbar`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.syncbar` | `ui-syncbar` | base |
+
 ### `.ui-tab`
 
 | Registry key | Class | Kind |
@@ -819,6 +1189,21 @@ each one matches a real selector in the stylesheet.
 | `cls.toastStack` | `ui-toast-stack` | base |
 | `cls.toastStackAssertive` | `ui-toast-stack--assertive` | modifier |
 
+### `.ui-tool-call`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.toolCall` | `ui-tool-call` | base |
+| `cls.toolCallBody` | `ui-tool-call__body` | part |
+| `cls.toolCallName` | `ui-tool-call__name` | part |
+| `cls.toolCallStatus` | `ui-tool-call__status` | part |
+
+### `.ui-tool-log`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.toolLog` | `ui-tool-log` | base |
+
 ### `.ui-tooltip`
 
 | Registry key | Class | Kind |
@@ -826,12 +1211,28 @@ each one matches a real selector in the stylesheet.
 | `cls.tooltip` | `ui-tooltip` | base |
 | `cls.tooltipBubble` | `ui-tooltip__bubble` | part |
 
+### `.ui-tour-note`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.tourNote` | `ui-tour-note` | base |
+| `cls.tourNoteActions` | `ui-tour-note__actions` | part |
+| `cls.tourNoteBody` | `ui-tour-note__body` | part |
+| `cls.tourNoteStep` | `ui-tour-note__step` | part |
+| `cls.tourNoteTitle` | `ui-tour-note__title` | part |
+
 ### `.ui-visually-hidden`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.visuallyHidden` | `ui-visually-hidden` | base |
 
+### `.ui-vt`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.vt` | `ui-vt` | base |
+
 ## Table-local state classes
 
 Not in `cls` by design — these are plain `is-*` state hooks scoped to
@@ -919,10 +1320,10 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--z-overlay` | `30` |
 | `--z-popover` | `50` |
 | `--z-toast` | `60` |
-| `--accent-1` | `color-mix(in oklch, var(--accent) 8%, var(--bg))` |
-| `--accent-2` | `color-mix(in oklch, var(--accent) 16%, var(--bg))` |
-| `--accent-3` | `color-mix(in oklch, var(--accent) 32%, var(--bg))` |
-| `--accent-4` | `color-mix(in oklch, var(--accent) 60%, var(--bg))` |
+| `--accent-1` | `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))` |
+| `--accent-2` | `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))` |
+| `--accent-3` | `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))` |
+| `--accent-4` | `color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))` |
 | `--accent-5` | `var(--accent)` |
 | `--accent-6` | `var(--accent-strong)` |
 | `--surface-1` | `var(--bg)` |
@@ -967,6 +1368,7 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--text-soft` | `#353533` |
 | `--text-dim` | `#686863` |
 | `--accent` | `#d71921` |
+| `--accent-ramp-end` | `#ffffff` |
 | `--accent-strong` | `color-mix(in srgb, var(--accent) 83%, #000)` |
 | `--accent-text` | `var(--accent-strong)` |
 | `--accent-soft` | `color-mix(in srgb, var(--accent) 10%, transparent)` |
@@ -991,18 +1393,19 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 
 | Token | Value |
 | --- | --- |
-| `--bg` | `#000000` |
-| `--bg-elevated` | `#0a0a0a` |
+| `--bg` | `#121212` |
+| `--bg-elevated` | `#181818` |
 | `--bg-accent` | `color-mix(in srgb, var(--accent) 8%, transparent)` |
-| `--panel` | `#0c0c0c` |
-| `--panel-strong` | `#141414` |
-| `--panel-soft` | `#1a1a1a` |
-| `--line` | `#2a2a2a` |
-| `--line-strong` | `#444444` |
-| `--text` | `#f2f2f2` |
-| `--text-soft` | `#c4c4c4` |
-| `--text-dim` | `#858585` |
+| `--panel` | `#1c1c1c` |
+| `--panel-strong` | `#222222` |
+| `--panel-soft` | `#242424` |
+| `--line` | `#383838` |
+| `--line-strong` | `#555555` |
+| `--text` | `#e6e6e6` |
+| `--text-soft` | `#c8c8c8` |
+| `--text-dim` | `#a0a0a0` |
 | `--accent` | `#ff3b41` |
+| `--accent-ramp-end` | `#000000` |
 | `--accent-strong` | `color-mix(in srgb, var(--accent) 84%, #fff)` |
 | `--accent-text` | `var(--accent-strong)` |
 | `--accent-soft` | `color-mix(in srgb, var(--accent) 14%, transparent)` |