@xenosystem/elements-react 0.0.1

package/src/layout/ResizablePanel.css

@@ -0,0 +1,79 @@
+/*
+ * ResizablePanel — a fixed-width panel + a 4px draggable divider. CSS-first: `data-side` places the
+ * handle, `data-dragging` locks the grab cursor + text selection during a drag, `data-availability`
+ * carries the disabled axis. Monochrome shell: the handle rests on the hairline `--xeno-border` and
+ * lifts to `--xeno-muted` on hover/focus. No literal colours, no hue.
+ */
+
+.xeno-resizable {
+  display: flex;
+  align-items: stretch;
+  min-height: 0;
+}
+
+/* While dragging, the grab cursor should persist even as the pointer leaves the 4px handle. */
+.xeno-resizable[data-dragging='true'] {
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* The sized child — width is the only driven property; contents scroll within. */
+.xeno-resizable-panel {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* The divider: a hairline strip that lifts on hover/focus. Rounded-square grammar (no circles). */
+.xeno-resizable-handle {
+  position: relative;
+  flex: 0 0 auto;
+  align-self: stretch;
+  width: 4px;
+  padding: 0;
+  border: none;
+  border-radius: var(--xeno-radius-hair);
+  background: var(--xeno-border);
+  cursor: col-resize;
+  touch-action: none;
+  transition: background var(--xeno-dur) var(--xeno-ease);
+}
+
+/* Widen the pointer/press target beyond the 4px visual without shifting layout. */
+.xeno-resizable-handle::before {
+  content: '';
+  position: absolute;
+  inset: 0 -4px;
+}
+
+.xeno-resizable-handle:hover {
+  background: var(--xeno-muted);
+}
+
+.xeno-resizable-handle:focus-visible {
+  outline: none;
+  background: var(--xeno-muted);
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+/* Active drag reads a touch brighter than hover. */
+.xeno-resizable[data-dragging='true'] .xeno-resizable-handle {
+  background: var(--xeno-active);
+}
+
+/* Disabled: inert hairline, not-allowed cursor, dimmed. */
+.xeno-resizable[data-availability='disabled'] .xeno-resizable-handle,
+.xeno-resizable-handle[data-availability='disabled'] {
+  background: var(--xeno-border);
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-resizable-handle {
+    transition: none;
+  }
+}

package/src/nav/sidebar.css

@@ -0,0 +1,296 @@
+/*
+ * Sidebar — the slide-in left navigation panel. Locked geometry: SQUARE corners, flush to the viewport
+ * edge; a fixed ~260px column on `var(--xeno-surface)`. CSS-first: the only state that drives appearance
+ * is `data-state="open|closed"` on the panel + backdrop. The only animated property is `transform`
+ * (translateX), guarded by reduced-motion. Monochrome — the scrim is a neutral, hueless black.
+ */
+
+.xeno-sidebar {
+  /* One row's stride, in one place: the pill's travel is computed from these, so a row that changes
+     height can never leave the pill landing between two rows. */
+  --xeno-sidebar-row: 36px;
+  --xeno-sidebar-row-gap: 2px;
+  /* How much the goo pill misbehaves. The squash is deliberately restrained — enough deformation to
+     read as mass, not enough to look like jelly on a nav you use all day — and the travel easing
+     overshoots only slightly (1.12, against the 1.4 of the library's overshoot token). Turn these
+     three up together to get the full CodePen bounce back. */
+  --xeno-goo-squash-x: 0.95;
+  --xeno-goo-squash-y: 1.1;
+  --xeno-goo-ease: cubic-bezier(0.34, 1.12, 0.5, 1);
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  max-width: 85vw;
+  height: 100%;
+  background: var(--xeno-surface);
+  border-inline-end: 1px solid var(--xeno-border);
+  border-radius: 0; /* locked: square, flush */
+  color: var(--xeno-text);
+  transform: translateX(0);
+  transition: transform var(--xeno-dur) var(--xeno-ease);
+  will-change: transform;
+}
+.xeno-sidebar[data-state='closed'] {
+  transform: translateX(-100%);
+}
+
+/* ── Header (brand + search) ─────────────────────────────────────────────────────── */
+.xeno-sidebar-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: none;
+  padding: 16px;
+  border-bottom: 1px solid var(--xeno-border);
+}
+.xeno-sidebar-brand {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  color: var(--xeno-text);
+}
+/* Make the shared TextInput fill the header width. */
+.xeno-sidebar-search {
+  display: flex;
+  width: 100%;
+}
+
+/* ── Nav (scrollable list of rows) ───────────────────────────────────────────────── */
+.xeno-sidebar-nav {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+}
+.xeno-sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xeno-sidebar-row-gap);
+}
+/* The rows of one group + the pill that backs them. `position: relative` makes this the pill's
+   containing block, so its travel is measured from the first row of THIS group — which is why the
+   heading can sit outside and the trick survives sections of different shapes. */
+.xeno-sidebar-items {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--xeno-sidebar-row-gap);
+}
+.xeno-sidebar-section + .xeno-sidebar-section {
+  margin-top: 8px;
+}
+.xeno-sidebar-heading {
+  padding: 10px 10px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--xeno-muted);
+}
+
+/* ── Row (self-contained; NOT ListRow) ───────────────────────────────────────────── */
+.xeno-sidebar-item {
+  position: relative;
+  z-index: 1; /* over the pill, which is painted behind the whole group */
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: var(--xeno-sidebar-row);
+  padding: 0 10px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  text-align: left;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--xeno-radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+/* Neither hover nor selection paints its OWN background any more — the travelling pill below is the
+   single filled surface for the whole group. Two of them would read as two selections. */
+.xeno-sidebar-item:hover,
+.xeno-sidebar-item[data-selection='on'] {
+  color: var(--xeno-text);
+}
+.xeno-sidebar-item:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-surface),
+    0 0 0 4px var(--xeno-border);
+}
+.xeno-sidebar-item[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── The goo pill (the travelling hover surface) ──────────────────────────────────────
+ * ONE filled pill per group, painted behind the rows, that FLIES to whichever row you point at and
+ * squashes on the way — narrower and taller as it launches, back to true as it lands. That squash is
+ * the whole illusion: a rectangle that only slid would read as a scrollbar; one that deforms reads as
+ * something with mass. Adapted from One_div's gooey nav, in XENO ink: the pill is `--xeno-control`,
+ * the monochrome step above the panel, not an accent colour.
+ *
+ * Pure CSS, no measuring: the pill is the LAST child of the group, so every row keeps its natural
+ * `:nth-child` number and a hovered row reaches the pill with `~`. Travel is `row index x stride`, and
+ * the stride comes from the row tokens above, so it cannot drift out of step with the layout. */
+.xeno-sidebar-goo {
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: calc(var(--xeno-goo-row, 0) * (var(--xeno-sidebar-row) + var(--xeno-sidebar-row-gap)));
+  width: 100%;
+  height: var(--xeno-sidebar-row);
+  background: var(--xeno-control);
+  border-radius: var(--xeno-radius-md);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    top var(--xeno-dur-entrance, 240ms) var(--xeno-goo-ease),
+    opacity var(--xeno-dur, 0.14s) ease;
+}
+/* The pill RESTS on the selected row of its group (so the selection indicator is the same object
+   that flies), and is invisible in a group with no selection. */
+.xeno-sidebar-item[data-selection='on'] ~ .xeno-sidebar-goo { opacity: 1; }
+.xeno-sidebar-item[data-selection='on']:nth-child(1) ~ .xeno-sidebar-goo { --xeno-goo-row: 0; }
+.xeno-sidebar-item[data-selection='on']:nth-child(2) ~ .xeno-sidebar-goo { --xeno-goo-row: 1; }
+.xeno-sidebar-item[data-selection='on']:nth-child(3) ~ .xeno-sidebar-goo { --xeno-goo-row: 2; }
+.xeno-sidebar-item[data-selection='on']:nth-child(4) ~ .xeno-sidebar-goo { --xeno-goo-row: 3; }
+.xeno-sidebar-item[data-selection='on']:nth-child(5) ~ .xeno-sidebar-goo { --xeno-goo-row: 4; }
+.xeno-sidebar-item[data-selection='on']:nth-child(6) ~ .xeno-sidebar-goo { --xeno-goo-row: 5; }
+.xeno-sidebar-item[data-selection='on']:nth-child(7) ~ .xeno-sidebar-goo { --xeno-goo-row: 6; }
+.xeno-sidebar-item[data-selection='on']:nth-child(8) ~ .xeno-sidebar-goo { --xeno-goo-row: 7; }
+.xeno-sidebar-item[data-selection='on']:nth-child(9) ~ .xeno-sidebar-goo { --xeno-goo-row: 8; }
+.xeno-sidebar-item[data-selection='on']:nth-child(10) ~ .xeno-sidebar-goo { --xeno-goo-row: 9; }
+.xeno-sidebar-item[data-selection='on']:nth-child(11) ~ .xeno-sidebar-goo { --xeno-goo-row: 10; }
+.xeno-sidebar-item[data-selection='on']:nth-child(12) ~ .xeno-sidebar-goo { --xeno-goo-row: 11; }
+
+/* Hover takes it over. Same specificity as the rules above ON PURPOSE — these come later, so pointing
+   at a row always wins over the resting position, and letting go hands it back. */
+.xeno-sidebar-item:hover ~ .xeno-sidebar-goo { opacity: 1; }
+.xeno-sidebar-item:nth-child(1):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 0; animation: xeno-goo-1 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(2):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 1; animation: xeno-goo-2 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(3):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 2; animation: xeno-goo-3 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(4):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 3; animation: xeno-goo-4 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(5):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 4; animation: xeno-goo-5 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(6):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 5; animation: xeno-goo-6 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(7):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 6; animation: xeno-goo-7 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(8):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 7; animation: xeno-goo-8 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(9):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 8; animation: xeno-goo-9 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(10):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 9; animation: xeno-goo-10 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(11):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 10; animation: xeno-goo-11 var(--xeno-dur-entrance, 240ms) 1; }
+.xeno-sidebar-item:nth-child(12):hover ~ .xeno-sidebar-goo { --xeno-goo-row: 11; animation: xeno-goo-12 var(--xeno-dur-entrance, 240ms) 1; }
+
+/* One keyframe track PER ROW, all identical. They have to be separate NAMES: re-pointing at another row
+   only swaps which rule matches, and a browser does not restart an animation whose name did not change —
+   so a single shared `xeno-goo` would squash once and then never again as you slide down the list. */
+@keyframes xeno-goo-1 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-2 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-3 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-4 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-5 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-6 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-7 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-8 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-9 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-10 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-11 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-12 { 0% { scale: 1 1; } 50% { scale: var(--xeno-goo-squash-x) var(--xeno-goo-squash-y); } 100% { scale: 1 1; } }
+
+/* ── The XENO nav hover animation ─────────────────────────────────────────────────────
+ * The icon + label NUDGE right — the icon leads, the label follows a beat later (a small cascade), on
+ * the interaction easing (E2). There is no left rail: the goo pill above already marks both the hovered
+ * row and the active one, and a second marker on the same edge only competed with it. */
+.xeno-sidebar-item-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--xeno-muted);
+  transition:
+    color var(--xeno-dur) ease,
+    transform var(--xeno-dur-entrance, 240ms) var(--xeno-ease-stagger, cubic-bezier(0.22, 0.7, 0.2, 1));
+}
+.xeno-sidebar-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: transform var(--xeno-dur-entrance, 240ms) var(--xeno-ease-stagger, cubic-bezier(0.22, 0.7, 0.2, 1));
+}
+.xeno-sidebar-item:hover .xeno-sidebar-item-icon,
+.xeno-sidebar-item[data-selection='on'] .xeno-sidebar-item-icon {
+  color: var(--xeno-text);
+}
+.xeno-sidebar-item:hover .xeno-sidebar-item-icon {
+  transform: translateX(6px);
+}
+.xeno-sidebar-item:hover .xeno-sidebar-item-label {
+  transform: translateX(6px);
+  transition-delay: 45ms; /* label follows the icon — the cascade */
+}
+
+/* Per-glyph icon animations are global now — see `icon-motion.css`, triggered by
+ * `.xeno-sidebar-item:hover .xeno-element[data-glyph]`. The nudge above stays sidebar-specific. */
+
+/* ── Footer ──────────────────────────────────────────────────────────────────────── */
+.xeno-sidebar-footer {
+  flex: none;
+  padding: 12px 16px;
+  border-top: 1px solid var(--xeno-border);
+}
+
+/* ── Backdrop (small screens only) ───────────────────────────────────────────────── */
+.xeno-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 39;
+  background: rgba(0, 0, 0, 0.5); /* neutral scrim — hueless, like a shadow */
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--xeno-dur) ease,
+    visibility var(--xeno-dur) ease;
+}
+.xeno-sidebar-backdrop[data-state='open'] {
+  opacity: 1;
+  visibility: visible;
+}
+@media (min-width: 900px) {
+  .xeno-sidebar-backdrop {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-sidebar,
+  .xeno-sidebar-backdrop,
+  .xeno-sidebar-item,
+  .xeno-sidebar-item-icon,
+  .xeno-sidebar-item-label,
+  .xeno-sidebar-goo {
+    transition: none;
+  }
+  /* The pill still MARKS the row it belongs to — it just gets there without flying or squashing. */
+  .xeno-sidebar-goo {
+    animation: none !important;
+  }
+  /* States still apply (the pill marks the row, colours change); motion does not — no nudge, no per-glyph play. */
+  .xeno-sidebar-item:hover .xeno-sidebar-item-icon,
+  .xeno-sidebar-item:hover .xeno-sidebar-item-label {
+    transform: none;
+  }
+  .xeno-sidebar-item-icon .xeno-element {
+    animation: none !important;
+  }
+}

package/src/overlays/date-time-picker.css

@@ -0,0 +1,238 @@
+/*
+ * DateTimePicker — a faithful port of the chat's "Scheduled" date/time popover. Monochrome, tokens
+ * only, `rounded-md` (6px) everywhere. The SELECTION is a soft `--xeno-control` fill (never bright
+ * inverted ink); adjacent-month days are greyed; the time columns are quiet bordered lists with a thin
+ * scrollbar, and AM/PM is two flat buttons. State is CSS-first via `data-selection` on the cells.
+ */
+
+/* ── DatePicker ──────────────────────────────────────────────────────────────────── */
+.xeno-datepicker {
+  --xeno-cell: 26px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+  width: fit-content;
+  padding: 6px;
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  color: var(--xeno-text);
+  user-select: none;
+}
+
+.xeno-datepicker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 2px 0;
+}
+
+.xeno-datepicker-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--xeno-text);
+}
+
+/* The prev/next chevrons are one glyph (chevron-right); the prev button mirrors it to point left. */
+.xeno-datepicker-prev .xeno-element {
+  transform: rotate(180deg);
+}
+
+.xeno-datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, var(--xeno-cell));
+  gap: 2px;
+}
+
+.xeno-datepicker-weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--xeno-muted);
+}
+
+.xeno-datepicker-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.xeno-datepicker-week {
+  display: grid;
+  grid-template-columns: repeat(7, var(--xeno-cell));
+  gap: 2px;
+}
+
+.xeno-datepicker-cell {
+  width: var(--xeno-cell);
+  height: var(--xeno-cell);
+}
+
+.xeno-datepicker-day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--xeno-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--xeno-radius-md);
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-datepicker-day:hover {
+  background: var(--xeno-hover);
+}
+.xeno-datepicker-day:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-surface),
+    0 0 0 4px var(--xeno-border);
+}
+/* Adjacent-month days: present (real, clickable) but greyed back. */
+.xeno-datepicker-day[data-outside] {
+  color: var(--xeno-muted);
+  opacity: 0.45;
+}
+/* Selection — the soft control fill the product uses, not bright inverted ink. */
+.xeno-datepicker-day[data-selection='on'] {
+  color: var(--xeno-text);
+  opacity: 1;
+  background: var(--xeno-control);
+}
+
+.xeno-datepicker-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 2px;
+  padding-top: 6px;
+  border-top: 1px solid var(--xeno-border);
+}
+/* If Clear is hidden, Today still sits at the right edge. */
+.xeno-datepicker-footer > .xeno-datepicker-today:only-child {
+  margin-left: auto;
+}
+
+/* ── TimePicker ──────────────────────────────────────────────────────────────────── */
+.xeno-timepicker {
+  display: flex;
+  gap: 4px;
+  width: fit-content;
+  /* Match the calendar's natural height (26px cells → ~258px) so the two fields' panels are consistent
+     in size; the Hour/Min lists fill and scroll within it. */
+  min-height: 258px;
+  padding: 6px;
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  color: var(--xeno-text);
+  user-select: none;
+}
+
+/* Equal-width columns that stretch to the panel height, so all three boxes match — and the panel can
+   grow to match a taller sibling (e.g. the calendar) with the lists filling it, not leaving a gap. */
+.xeno-timepicker-col {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 58px;
+  min-height: 0;
+}
+
+.xeno-timepicker-col-head {
+  flex: 0 0 auto;
+  padding: 0 2px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--xeno-muted);
+}
+
+.xeno-timepicker-list {
+  display: flex;
+  /* basis 0: the list FILLS the column height without its content inflating the panel — so the
+     calendar drives the shared height and the time panel matches it exactly (scrolling within). */
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  padding: 2px;
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+}
+/* Hour + Min scroll within the shared height; AM/PM (no data-scroll) sits flush at the top.
+   The scrollbar itself comes from `scrollbar.css`; a column this narrow only wants a slimmer one, so
+   it re-declares the SIZE TOKEN and nothing else. It used to re-implement the whole thing — and set
+   `scrollbar-width` alongside its own `::-webkit-scrollbar` rules, which since Chrome 121 means Blink
+   ignored every one of them and drew the default bar. */
+.xeno-timepicker-list[data-scroll] {
+  --xeno-scroll-size: 9px;
+  --xeno-scroll-pad: 2px;
+  --xeno-scroll-pad-hover: 1px;
+  --xeno-scroll-rail-pad: 4px; /* 9 − 2×4 = a 1px rail; the default 5 would leave none at all */
+  overflow-y: auto;
+}
+
+.xeno-timepicker-option {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  width: 100%;
+  padding: 0;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--xeno-radius-sm);
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-timepicker-option:hover {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+}
+.xeno-timepicker-option:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-surface),
+    0 0 0 4px var(--xeno-border);
+}
+.xeno-timepicker-option[data-selection='on'] {
+  color: var(--xeno-text);
+  background: var(--xeno-control);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-datepicker-day,
+  .xeno-timepicker-option {
+    transition: none;
+  }
+}