@kennycorrea/ui 0.9.1 → 0.11.0

package/tokens.css

@@ -209,6 +209,68 @@
   }
 }
 
+/**
+ * The mobile presentation layer: a "grouped" surface style, the list-on-tinted-canvas look of
+ * native settings screens. Opt-in — nothing above reads these, so existing atoms are untouched.
+ *
+ * Colours live on `.radix-themes` for the reason given above, with one rule per appearance
+ * because the pairing flips: in light the canvas is the darker of the two (gray-3 under a white
+ * card), in dark it is the darker too (gray-1 under a gray-3 card). Both pairs are asserted at
+ * WCAG AA for gray-11 and gray-12 text in `test/grouped.test.tsx`.
+ *
+ * The non-colour tokens carry no Radix variable, so they sit on `:root` and also work in a
+ * portal that escapes the Theme.
+ */
+:root {
+  --press-scale: 0.97;
+  --press-duration: 120ms;
+  --radius-group: 12px;
+  --space-row-y: 10px;
+  --space-row-x: 12px;
+  --tap-min: 44px;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  --material-bar-filter: saturate(180%) blur(20px);
+}
+
+@layer base {
+  .radix-themes {
+    /* Card on the tinted canvas: no border, the contrast between the two does the separating. */
+    --surface-grouped: var(--color-panel-solid);
+    --canvas-grouped: var(--gray-3);
+    --separator-inset: var(--gray-a6);
+    /* Translucent bar over scrolling content. 80% of the canvas keeps text AA over any content
+       the blur leaves behind, and is still a legible bar where backdrop-filter is unsupported. */
+    --material-bar: color-mix(in srgb, var(--canvas-grouped) 80%, transparent);
+  }
+  .radix-themes:is(.dark, .dark-theme) {
+    --surface-grouped: var(--gray-3);
+    --canvas-grouped: var(--gray-1);
+  }
+}
+
+@theme inline {
+  --color-grouped: var(--surface-grouped);
+  --color-canvas-grouped: var(--canvas-grouped);
+  --color-separator-inset: var(--separator-inset);
+}
+
+@utility rounded-group { border-radius: var(--radius-group); }
+@utility min-h-tap { min-height: var(--tap-min); }
+@utility pt-safe { padding-top: var(--safe-top); }
+@utility pb-safe { padding-bottom: var(--safe-bottom); }
+@utility px-safe {
+  padding-left: var(--safe-left);
+  padding-right: var(--safe-right);
+}
+@utility bg-material {
+  background-color: var(--material-bar);
+  -webkit-backdrop-filter: var(--material-bar-filter);
+  backdrop-filter: var(--material-bar-filter);
+}
+
 /**
  * Pins a subtree to the light appearance whatever the provider chose.
  *
@@ -258,6 +320,13 @@
 .ui-toast[data-swipe='move'] { transform: translateX(var(--radix-toast-swipe-move-x)); }
 .ui-toast[data-swipe='cancel'] { transform: translateX(0); transition: transform 200ms ease-out; }
 .ui-toast[data-swipe='end'] { animation: ui-toast-swipe-out 120ms ease-out forwards; }
+/* Centred stacks dismiss vertically: up when anchored to the top, down at the bottom. */
+@keyframes ui-toast-swipe-out-y {
+  to { transform: translateY(calc(var(--radix-toast-swipe-end-y) + (var(--ui-toast-swipe-sign) * 100%))); opacity: 0; }
+}
+.ui-toast[data-swipe-axis='y'][data-swipe='move'] { transform: translateY(var(--radix-toast-swipe-move-y)); }
+.ui-toast[data-swipe-axis='y'][data-swipe='cancel'] { transform: translateY(0); }
+.ui-toast[data-swipe-axis='y'][data-swipe='end'] { animation-name: ui-toast-swipe-out-y; }
 @media (prefers-reduced-motion: reduce) {
   .ui-toast[data-state] { animation-duration: 1ms; }
 }
@@ -455,3 +524,388 @@
   pointer-events: none;
   color: var(--gray-a10);
 }
+
+/**
+ * NotificationCard — a persistent rich toast. Only Radix Themes variables, so it follows the
+ * `.light`/`.dark` class on the nearest <Theme> rather than the OS. z-index sits below Radix
+ * Themes dialogs and the Drawer (50) and above page content.
+ */
+.ui-notification-card {
+  position: fixed;
+  z-index: 40;
+  width: min(24rem, 100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--color-panel-solid);
+  color: var(--gray-12);
+  border: 1px solid var(--gray-a6);
+  border-radius: var(--radius-4);
+  box-shadow: var(--shadow-5);
+  font-family: var(--default-font-family);
+  --ui-nc-from: translateY(calc(100% + 16px));
+}
+.ui-notification-card[data-position='bottom-right'] { bottom: 16px; right: 16px; }
+.ui-notification-card[data-position='bottom-left'] { bottom: 16px; left: 16px; }
+.ui-notification-card[data-position='top-right'] { top: 16px; right: 16px; --ui-nc-from: translateY(calc(-100% - 16px)); }
+.ui-notification-card[data-position='top-left'] { top: 16px; left: 16px; --ui-nc-from: translateY(calc(-100% - 16px)); }
+.ui-notification-card[data-state='open'] { animation: ui-nc-in 220ms ease-out; }
+.ui-notification-card[data-state='closed'] { animation: ui-nc-out 160ms ease-in forwards; }
+@keyframes ui-nc-in { from { transform: var(--ui-nc-from); opacity: 0; } }
+@keyframes ui-nc-out { to { transform: var(--ui-nc-from); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .ui-notification-card[data-state] { animation-duration: 1ms; }
+}
+.ui-notification-card__header { display: flex; align-items: flex-start; gap: var(--space-3); }
+.ui-notification-card__icon { flex-shrink: 0; display: flex; }
+.ui-notification-card__text { flex: 1; min-width: 0; }
+.ui-notification-card__title { margin: 0; font-size: var(--font-size-3); font-weight: var(--font-weight-medium); line-height: var(--line-height-3); }
+.ui-notification-card__description { margin: var(--space-1) 0 0; font-size: var(--font-size-2); line-height: var(--line-height-2); color: var(--gray-11); }
+.ui-notification-card__close,
+.ui-notification-card__toggle {
+  appearance: none; border: 0; background: transparent; color: var(--gray-11);
+  cursor: pointer; font: inherit; border-radius: var(--radius-2);
+}
+.ui-notification-card__close {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  width: var(--space-6); height: var(--space-6); margin: calc(var(--space-1) * -1);
+}
+.ui-notification-card__toggle {
+  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1);
+  font-size: var(--font-size-2); color: var(--accent-11);
+}
+.ui-notification-card__close:hover,
+.ui-notification-card__toggle:hover { background: var(--gray-a3); }
+.ui-notification-card__close:focus-visible,
+.ui-notification-card__toggle:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+.ui-notification-card__body { font-size: var(--font-size-2); color: var(--gray-12); }
+.ui-notification-card__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
+
+/**
+ * Card variant and density. Generated per Radix Themes breakpoint (xs 520, sm 768, md 1024,
+ * lg 1280, xl 1640) because a responsive prop is a data attribute here, not a class: Tailwind's own
+ * `md` is 768. Ascending media queries of equal specificity, so the widest match wins. The card's
+ * pseudo-elements carry the surface and ring, so grouped/plain switch them off with `content`.
+ */
+.ui-card-header, .ui-card-body { padding: 16px 20px; }
+.ui-card-title { font-size: 1rem; font-weight: 500; }
+.ui-card.rt-Card[data-variant="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+.ui-card.rt-Card[data-variant="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+.ui-card.rt-Card[data-variant="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+.ui-card.rt-Card[data-variant="outlined"]::before { content: '';}
+.ui-card.rt-Card[data-variant="grouped"]::before { content: none;}
+.ui-card.rt-Card[data-variant="plain"]::before { content: none;}
+.ui-card.rt-Card[data-variant="outlined"]::after { content: '';}
+.ui-card.rt-Card[data-variant="grouped"]::after { content: none;}
+.ui-card.rt-Card[data-variant="plain"]::after { content: none;}
+.ui-card-header[data-variant="grouped"] { --color-hairline: var(--separator-inset); }
+.ui-card-header[data-variant="outlined"] { border-bottom-width: 1px; }
+.ui-card-header[data-variant="plain"] { border-bottom-width: 0; }
+.ui-card-header[data-density="comfortable"], .ui-card-body[data-density="comfortable"] { padding: 16px 20px; }
+.ui-card-header[data-density="compact"], .ui-card-body[data-density="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+.ui-card-title[data-density="comfortable"] { font-size: 1rem; font-weight: 500; }
+.ui-card-title[data-density="compact"] { font-size: 0.875rem; font-weight: 400; }
+@media (min-width: 520px) {
+  .ui-card.rt-Card[data-variant-xs="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+  .ui-card.rt-Card[data-variant-xs="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+  .ui-card.rt-Card[data-variant-xs="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+  .ui-card.rt-Card[data-variant-xs="outlined"]::before { content: '';}
+  .ui-card.rt-Card[data-variant-xs="grouped"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-xs="plain"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-xs="outlined"]::after { content: '';}
+  .ui-card.rt-Card[data-variant-xs="grouped"]::after { content: none;}
+  .ui-card.rt-Card[data-variant-xs="plain"]::after { content: none;}
+  .ui-card-header[data-variant-xs="grouped"] { --color-hairline: var(--separator-inset); }
+  .ui-card-header[data-variant-xs="outlined"] { border-bottom-width: 1px; }
+  .ui-card-header[data-variant-xs="plain"] { border-bottom-width: 0; }
+  .ui-card-header[data-density-xs="comfortable"], .ui-card-body[data-density-xs="comfortable"] { padding: 16px 20px; }
+  .ui-card-header[data-density-xs="compact"], .ui-card-body[data-density-xs="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+  .ui-card-title[data-density-xs="comfortable"] { font-size: 1rem; font-weight: 500; }
+  .ui-card-title[data-density-xs="compact"] { font-size: 0.875rem; font-weight: 400; }
+}
+@media (min-width: 768px) {
+  .ui-card.rt-Card[data-variant-sm="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+  .ui-card.rt-Card[data-variant-sm="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+  .ui-card.rt-Card[data-variant-sm="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+  .ui-card.rt-Card[data-variant-sm="outlined"]::before { content: '';}
+  .ui-card.rt-Card[data-variant-sm="grouped"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-sm="plain"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-sm="outlined"]::after { content: '';}
+  .ui-card.rt-Card[data-variant-sm="grouped"]::after { content: none;}
+  .ui-card.rt-Card[data-variant-sm="plain"]::after { content: none;}
+  .ui-card-header[data-variant-sm="grouped"] { --color-hairline: var(--separator-inset); }
+  .ui-card-header[data-variant-sm="outlined"] { border-bottom-width: 1px; }
+  .ui-card-header[data-variant-sm="plain"] { border-bottom-width: 0; }
+  .ui-card-header[data-density-sm="comfortable"], .ui-card-body[data-density-sm="comfortable"] { padding: 16px 20px; }
+  .ui-card-header[data-density-sm="compact"], .ui-card-body[data-density-sm="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+  .ui-card-title[data-density-sm="comfortable"] { font-size: 1rem; font-weight: 500; }
+  .ui-card-title[data-density-sm="compact"] { font-size: 0.875rem; font-weight: 400; }
+}
+@media (min-width: 1024px) {
+  .ui-card.rt-Card[data-variant-md="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+  .ui-card.rt-Card[data-variant-md="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+  .ui-card.rt-Card[data-variant-md="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+  .ui-card.rt-Card[data-variant-md="outlined"]::before { content: '';}
+  .ui-card.rt-Card[data-variant-md="grouped"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-md="plain"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-md="outlined"]::after { content: '';}
+  .ui-card.rt-Card[data-variant-md="grouped"]::after { content: none;}
+  .ui-card.rt-Card[data-variant-md="plain"]::after { content: none;}
+  .ui-card-header[data-variant-md="grouped"] { --color-hairline: var(--separator-inset); }
+  .ui-card-header[data-variant-md="outlined"] { border-bottom-width: 1px; }
+  .ui-card-header[data-variant-md="plain"] { border-bottom-width: 0; }
+  .ui-card-header[data-density-md="comfortable"], .ui-card-body[data-density-md="comfortable"] { padding: 16px 20px; }
+  .ui-card-header[data-density-md="compact"], .ui-card-body[data-density-md="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+  .ui-card-title[data-density-md="comfortable"] { font-size: 1rem; font-weight: 500; }
+  .ui-card-title[data-density-md="compact"] { font-size: 0.875rem; font-weight: 400; }
+}
+@media (min-width: 1280px) {
+  .ui-card.rt-Card[data-variant-lg="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+  .ui-card.rt-Card[data-variant-lg="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+  .ui-card.rt-Card[data-variant-lg="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+  .ui-card.rt-Card[data-variant-lg="outlined"]::before { content: '';}
+  .ui-card.rt-Card[data-variant-lg="grouped"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-lg="plain"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-lg="outlined"]::after { content: '';}
+  .ui-card.rt-Card[data-variant-lg="grouped"]::after { content: none;}
+  .ui-card.rt-Card[data-variant-lg="plain"]::after { content: none;}
+  .ui-card-header[data-variant-lg="grouped"] { --color-hairline: var(--separator-inset); }
+  .ui-card-header[data-variant-lg="outlined"] { border-bottom-width: 1px; }
+  .ui-card-header[data-variant-lg="plain"] { border-bottom-width: 0; }
+  .ui-card-header[data-density-lg="comfortable"], .ui-card-body[data-density-lg="comfortable"] { padding: 16px 20px; }
+  .ui-card-header[data-density-lg="compact"], .ui-card-body[data-density-lg="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+  .ui-card-title[data-density-lg="comfortable"] { font-size: 1rem; font-weight: 500; }
+  .ui-card-title[data-density-lg="compact"] { font-size: 0.875rem; font-weight: 400; }
+}
+@media (min-width: 1640px) {
+  .ui-card.rt-Card[data-variant-xl="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
+  .ui-card.rt-Card[data-variant-xl="grouped"] { background: var(--surface-grouped); box-shadow: none; --base-card-border-radius: var(--radius-group);}
+  .ui-card.rt-Card[data-variant-xl="plain"] { background: transparent; box-shadow: none; --base-card-border-radius: 0px;}
+  .ui-card.rt-Card[data-variant-xl="outlined"]::before { content: '';}
+  .ui-card.rt-Card[data-variant-xl="grouped"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-xl="plain"]::before { content: none;}
+  .ui-card.rt-Card[data-variant-xl="outlined"]::after { content: '';}
+  .ui-card.rt-Card[data-variant-xl="grouped"]::after { content: none;}
+  .ui-card.rt-Card[data-variant-xl="plain"]::after { content: none;}
+  .ui-card-header[data-variant-xl="grouped"] { --color-hairline: var(--separator-inset); }
+  .ui-card-header[data-variant-xl="outlined"] { border-bottom-width: 1px; }
+  .ui-card-header[data-variant-xl="plain"] { border-bottom-width: 0; }
+  .ui-card-header[data-density-xl="comfortable"], .ui-card-body[data-density-xl="comfortable"] { padding: 16px 20px; }
+  .ui-card-header[data-density-xl="compact"], .ui-card-body[data-density-xl="compact"] { padding: var(--space-row-y) var(--space-row-x); }
+  .ui-card-title[data-density-xl="comfortable"] { font-size: 1rem; font-weight: 500; }
+  .ui-card-title[data-density-xl="compact"] { font-size: 0.875rem; font-weight: 400; }
+}
+
+/* ---- Grouped list: ListSection / ListRow ---- */
+.ui-list-section { --list-lead-w: 28px; --list-gap: 12px; }
+.ui-list-section[data-variant="inset"] { margin-inline: var(--space-row-x); }
+.ui-list-header, .ui-list-footer { font-size: 0.8125rem; line-height: 1.3; color: var(--gray-11); padding: 6px calc(var(--space-row-x) + 4px); }
+.ui-list-header { text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.75rem; }
+.ui-list { list-style: none; margin: 0; padding: 0; background: var(--surface-grouped); overflow: hidden; }
+.ui-list-section[data-variant="inset"] .ui-list { border-radius: var(--radius-group); }
+.ui-list-item { position: relative; list-style: none; }
+/* Hairline above every row but the first; it starts after the leading slot when this row has one. */
+.ui-list-item + .ui-list-item::before { content: ""; position: absolute; top: 0; right: 0; height: 1px; background: var(--separator-inset); left: var(--space-row-x); }
+.ui-list-item + .ui-list-item[data-has-lead]::before { left: calc(var(--space-row-x) + var(--list-lead-w) + var(--list-gap)); }
+.ui-list-section[data-variant="full"] .ui-list-item + .ui-list-item::before { left: 0; }
+.ui-list-row { display: flex; align-items: center; gap: var(--list-gap); box-sizing: border-box; width: 100%; min-height: var(--tap-min); padding: var(--space-row-y) var(--space-row-x); background: transparent; border: 0; margin: 0; font: inherit; text-align: start; color: var(--gray-12); text-decoration: none; -webkit-tap-highlight-color: transparent; }
+.ui-list-row[data-interactive] { cursor: pointer; }
+.ui-list-row[data-interactive] { transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; }
+.ui-list-row[data-interactive]:active { background: var(--gray-a4); transform: scale(var(--press-scale)); }
+@media (hover: hover) { .ui-list-row[data-interactive]:hover { background: var(--gray-a3); } .ui-list-row[data-interactive]:hover:active { background: var(--gray-a4); } }
+.ui-list-row:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; }
+.ui-list-row[data-disabled] { opacity: 0.5; cursor: default; pointer-events: none; }
+.ui-list-row[data-destructive] .ui-list-title { color: var(--red-11); }
+.ui-list-lead { flex: none; width: var(--list-lead-w); height: var(--list-lead-w); display: inline-flex; align-items: center; justify-content: center; }
+.ui-list-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ui-list-title, .ui-list-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-list-title { font-size: 1rem; line-height: 1.3; }
+.ui-list-subtitle { font-size: 0.8125rem; line-height: 1.3; color: var(--gray-11); }
+.ui-list-trailing { flex: none; max-width: 50%; display: inline-flex; align-items: center; gap: 8px; color: var(--gray-11); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-list-chevron { flex: none; color: var(--gray-9); width: 16px; height: 16px; margin-inline-end: -4px; }
+.ui-list-skeleton { display: flex; align-items: center; gap: var(--list-gap); flex: 1; min-width: 0; }
+.ui-list-item-swipe { overflow: hidden; }
+.ui-list-surface { position: relative; display: flex; align-items: stretch; background: var(--surface-grouped); touch-action: pan-y; }
+.ui-list-surface[data-swipe] { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+.ui-list-surface[data-dragging] { transition: none; user-select: none; }
+.ui-list-surface > .ui-list-row { flex: 1 1 auto; width: auto; min-width: 0; }
+.ui-list-more { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); padding: 0; margin-inline-end: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--gray-11); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.ui-list-more:hover { background: var(--gray-a3); }
+.ui-list-more:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; }
+.ui-list-more[data-hidden]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
+.ui-list-tray { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; }
+.ui-list-tray[data-side="leading"] { left: 0; }
+.ui-list-tray[data-side="trailing"] { right: 0; }
+.ui-list-action { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; padding: 0 4px; font: inherit; font-size: 0.75rem; color: white; cursor: pointer; background: var(--gray-9); }
+.ui-list-action[data-tone="brand"] { background: var(--accent-9); color: var(--accent-contrast, white); }
+.ui-list-action[data-tone="danger"] { background: var(--red-9); }
+.ui-list-action:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -3px; }
+.ui-list-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+@media (prefers-reduced-motion: reduce) { .ui-list-surface[data-swipe] { transition: none; } }
+.ui-list-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/**
+ * Sheet motion. The drag offset is a custom property rather than an inline transform so the exit
+ * animation can start from wherever the finger let go.
+ */
+.ui-sheet { transform: translateY(var(--sheet-drag, 0px)); }
+.ui-sheet:not([data-dragging]) { transition: transform 200ms ease-out, height 200ms ease-out; }
+.ui-sheet[data-state='open'] { animation: ui-sheet-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+.ui-sheet[data-state='closed'] { animation: ui-sheet-out 200ms ease-in forwards; }
+.ui-sheet-scrim[data-state='open'] { animation: ui-sheet-fade-in 200ms ease-out; }
+.ui-sheet-scrim[data-state='closed'] { animation: ui-sheet-fade-out 200ms ease-in forwards; }
+@keyframes ui-sheet-in { from { transform: translateY(100%); } }
+@keyframes ui-sheet-out { from { transform: translateY(var(--sheet-drag, 0px)); } to { transform: translateY(100%); } }
+@keyframes ui-sheet-fade-in { from { opacity: 0; } }
+@keyframes ui-sheet-fade-out { to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .ui-sheet, .ui-sheet-scrim { transition: none !important; }
+  .ui-sheet[data-state], .ui-sheet-scrim[data-state] { animation-duration: 1ms; }
+}
+
+/**
+ * TabBar. 49px of bar plus the home-indicator inset; `--tabbar-height` is that sum so content can
+ * pad itself. Hidden from the chosen Radix Themes breakpoint upward.
+ */
+:root { --tabbar-height: calc(49px + var(--safe-bottom, 0px)); }
+.ui-tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; box-sizing: border-box;
+  height: var(--tabbar-height); padding: 0 var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
+  background-color: var(--material-bar); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+  box-shadow: inset 0 0.5px 0 var(--color-hairline); }
+.ui-tabbar-spacer { height: var(--tabbar-height); flex: none; }
+.ui-tabbar__cell { flex: 1 1 0; min-width: 0; display: flex; }
+.ui-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
+  min-width: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--gray-11); text-decoration: none;
+  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+.ui-tabbar__item[data-active="true"] { color: var(--accent-11); }
+.ui-tabbar__item { border-radius: 8px; transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; }
+.ui-tabbar__item:active { background: var(--gray-a3); transform: scale(var(--press-scale)); }
+.ui-tabbar__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: 8px; }
+.ui-tabbar__icon { position: relative; display: inline-flex; font-size: 24px; line-height: 1; }
+.ui-tabbar__label { font-size: 10px; line-height: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-tabbar__badge { position: absolute; top: -4px; left: calc(100% - 8px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
+  border-radius: 8px; background: var(--red-9); color: white; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; }
+.ui-tabbar__badge[data-dot="true"] { min-width: 8px; width: 8px; height: 8px; padding: 0; top: -1px; left: calc(100% - 4px); }
+@media (prefers-reduced-motion: reduce) { .ui-tabbar__item { transition: none; } .ui-tabbar__item:active { transform: none; } }
+@media (min-width: 520px) { .ui-tabbar[data-hide-from="xs"], .ui-tabbar-spacer[data-hide-from="xs"] { display: none; } }
+@media (min-width: 768px) { .ui-tabbar[data-hide-from="sm"], .ui-tabbar-spacer[data-hide-from="sm"] { display: none; } }
+@media (min-width: 1024px) { .ui-tabbar[data-hide-from="md"], .ui-tabbar-spacer[data-hide-from="md"] { display: none; } }
+@media (min-width: 1280px) { .ui-tabbar[data-hide-from="lg"], .ui-tabbar-spacer[data-hide-from="lg"] { display: none; } }
+@media (min-width: 1640px) { .ui-tabbar[data-hide-from="xl"], .ui-tabbar-spacer[data-hide-from="xl"] { display: none; } }
+
+/**
+ * NavBar. A sticky 44px bar plus the top inset; transparent until content scrolls beneath it,
+ * then `--material-bar` with a hairline. The large title lives in the flow below it.
+ */
+:root { --navbar-height: calc(44px + var(--safe-top, 0px)); }
+.ui-navbar { position: sticky; top: 0; z-index: 30; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
+  height: var(--navbar-height); padding: var(--safe-top, 0px) max(8px, var(--safe-right, 0px)) 0 max(8px, var(--safe-left, 0px));
+  background-color: transparent; box-shadow: inset 0 -0.5px 0 transparent; transition: background-color 150ms, box-shadow 150ms; }
+.ui-navbar[data-scrolled="true"] { background-color: var(--material-bar); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+  box-shadow: inset 0 -0.5px 0 var(--color-hairline); }
+.ui-navbar__side { display: flex; align-items: center; gap: 4px; min-width: 0; }
+.ui-navbar__side--trailing { justify-content: flex-end; }
+.ui-navbar__title { margin: 0; max-width: 60vw; font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 150ms; }
+.ui-navbar[data-large="true"] .ui-navbar__title { opacity: 0; }
+.ui-navbar[data-large="true"][data-scrolled="true"] .ui-navbar__title { opacity: 1; }
+.ui-navbar__large { padding: 0 max(16px, var(--safe-left, 0px)) 8px; }
+.ui-navbar__large-title { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; }
+.ui-navbar__sentinel { height: 0; margin-top: -1px; pointer-events: none; }
+.ui-backbutton { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; font: inherit; font-size: 17px;
+  color: var(--accent-11); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: opacity 80ms; }
+.ui-backbutton__icon { width: 28px; height: 28px; flex: none; }
+.ui-backbutton:not(:has(.ui-backbutton__label)) { justify-content: center; padding: 0; }
+.ui-backbutton__label { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-backbutton:active { opacity: 0.55; }
+.ui-backbutton:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: 8px; }
+@media (prefers-reduced-motion: reduce) { .ui-navbar, .ui-navbar__title, .ui-backbutton { transition: none; } }
+
+/* SegmentedControl */
+.ui-segmented { --seg-pad: 2px; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+  padding: var(--seg-pad); box-sizing: border-box; border-radius: 999px; background: var(--gray-a4); }
+.ui-segmented[data-full="true"] { display: grid; width: 100%; }
+.ui-segmented__thumb { position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); left: var(--seg-pad);
+  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-count)); border-radius: 999px; background: var(--color-panel-solid, #fff);
+  box-shadow: 0 1px 3px var(--black-a4), 0 0 0 0.5px var(--black-a3);
+  transform: translateX(calc(var(--seg-index) * 100%)); transition: transform 220ms cubic-bezier(0.3, 0.7, 0.2, 1); }
+.ui-segmented__item { position: relative; z-index: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 500;
+  color: var(--gray-11); border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color 150ms; }
+.ui-segmented[data-size="md"] .ui-segmented__item { min-height: 32px; padding: 0 16px; font-size: 14px; }
+.ui-segmented[data-size="sm"] .ui-segmented__item { min-height: 24px; padding: 0 12px; font-size: 12px; }
+.ui-segmented__item[aria-checked="true"] { color: var(--gray-12); }
+.ui-segmented__item:disabled { opacity: 0.4; cursor: not-allowed; }
+.ui-segmented__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+@media (prefers-reduced-motion: reduce) { .ui-segmented__thumb, .ui-segmented__item { transition: none; } }
+
+/* ChipGroup */
+.ui-chips { position: relative; min-width: 0; --chips-fade: 24px; }
+.ui-chips__scroller { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
+  padding: 2px 0; -webkit-overflow-scrolling: touch; }
+.ui-chips__scroller::-webkit-scrollbar { display: none; }
+.ui-chips[data-fade-start="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade)); mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade)); }
+.ui-chips[data-fade-end="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--chips-fade)); mask-image: linear-gradient(to left, transparent, #000 var(--chips-fade)); }
+.ui-chips[data-fade-start="true"][data-fade-end="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade), #000 calc(100% - var(--chips-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade), #000 calc(100% - var(--chips-fade)), transparent); }
+.ui-chips__chip { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--chips-fade); min-height: 32px; padding: 0 14px;
+  border: 0; border-radius: 999px; background: var(--gray-a4); color: var(--gray-12); font: inherit; font-size: 14px; font-weight: 500;
+  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 120ms, color 120ms; }
+.ui-chips__chip[data-selected="true"] { background: var(--accent-9); color: var(--accent-contrast); }
+.ui-chips__chip:active { opacity: 0.7; }
+.ui-chips__chip:disabled { opacity: 0.4; cursor: not-allowed; }
+.ui-chips__chip:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+
+/* ---- StatTile ---- */
+.ui-stat-card { height: 100%; }
+.ui-stat { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 16px 20px; text-align: start; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; }
+.ui-stat-card[data-density="compact"] .ui-stat { padding: var(--space-row-y) var(--space-row-x); }
+.ui-stat[data-interactive] { cursor: pointer; padding-inline-end: 36px; }
+.ui-stat[data-interactive] { transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; -webkit-tap-highlight-color: transparent; }
+.ui-stat[data-interactive]:active { background: var(--gray-a3); transform: scale(var(--press-scale)); }
+@media (hover: hover) { .ui-stat[data-interactive]:hover { background: var(--gray-a2); } .ui-stat[data-interactive]:hover:active { background: var(--gray-a3); } }
+.ui-stat[data-interactive]:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: inherit; }
+.ui-stat-label { font-size: 0.8125rem; color: var(--color-ink-muted); }
+.ui-stat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
+.ui-stat-value { font-size: 1.5rem; line-height: 1.2; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
+.ui-stat-card[data-density="compact"] .ui-stat-value { font-size: 1.25rem; }
+.ui-stat-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink-muted); }
+.ui-stat-delta[data-tone="positive"] { color: var(--green-11); }
+.ui-stat-delta[data-tone="negative"] { color: var(--color-danger-ink); }
+.ui-stat-spark { display: block; height: 32px; margin-top: 4px; }
+.ui-stat-chevron { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--color-ink-muted); }
+
+/* ---- ScrollStrip ---- */
+.ui-strip { --strip-item: 78%; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--page-gutter, 16px); scroll-padding-inline: var(--page-gutter, 16px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+.ui-strip::-webkit-scrollbar { display: none; }
+.ui-strip > * { flex: 0 0 var(--strip-item); min-width: 0; scroll-snap-align: start; }
+@media (prefers-reduced-motion: no-preference) { .ui-strip { scroll-behavior: smooth; } }
+@media (min-width: 520px) { .ui-strip[data-grid-from="xs"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="xs"] > * { scroll-snap-align: none; } }
+@media (min-width: 768px) { .ui-strip[data-grid-from="sm"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="sm"] > * { scroll-snap-align: none; } }
+@media (min-width: 1024px) { .ui-strip[data-grid-from="md"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="md"] > * { scroll-snap-align: none; } }
+@media (min-width: 1280px) { .ui-strip[data-grid-from="lg"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="lg"] > * { scroll-snap-align: none; } }
+@media (min-width: 1640px) { .ui-strip[data-grid-from="xl"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="xl"] > * { scroll-snap-align: none; } }
+
+/**
+ * Touch feedback. One pressed state for every tappable atom: scale to `--press-scale` and a gray
+ * tint over `--press-duration`. Our own hover styles sit inside `@media (hover: hover)` so a tap
+ * on a touch screen never leaves a sticky hover behind (Radix Themes scopes its own that way).
+ */
+.ui-button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; }
+.ui-button:where(:active:not([data-disabled], :disabled)) { transform: scale(var(--press-scale)); }
+.ui-button[data-variant='ghost']:where(:active:not([data-disabled], :disabled)), .ui-button[data-variant='secondary']:where(:active:not([data-disabled], :disabled)) { background-color: var(--accent-a5); }
+.ui-button[data-size='touch'] { min-height: var(--tap-min); }
+/* Icon-only buttons keep their visual size; the hit area grows with an invisible ::before. */
+.ui-button[data-icon-only] { position: relative; }
+@media (pointer: coarse) {
+  .ui-button[data-icon-only]::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--tap-min)); height: max(100%, var(--tap-min)); transform: translate(-50%, -50%); }
+  /* iOS Safari zooms the page when a focused field is under 16px. */
+  .ui-input, .ui-input input, .ui-textarea, .ui-textarea textarea, .ui-select-trigger { font-size: 16px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-button, .ui-list-row[data-interactive], .ui-tabbar__item, .ui-stat[data-interactive] { transition: none; }
+  .ui-button:active, .ui-list-row[data-interactive]:active, .ui-tabbar__item:active, .ui-stat[data-interactive]:active { transform: none; }
+}