@xenosystem/elements-react 0.0.1

package/src/overlays/segmented-control.css

@@ -0,0 +1,185 @@
+/*
+ * <SegmentedControl> — connected options in one bordered track (rounded square). CSS-first: the chosen
+ * option carries `data-selection="on"`; a disabled option carries `data-availability="disabled"`. Size
+ * metrics arrive as inline vars. Monochrome only.
+ *
+ * The fill is ONE thumb that slides between options, not a background each option paints for itself —
+ * the same shared-indicator idea as the sidebar's goo pill, laid on its side. A fill that simply
+ * appears on the new option and vanishes from the old one tells you nothing about where it came from;
+ * one that travels does.
+ *
+ * How it can slide with no measuring. The track is a GRID of `1fr` columns, so every segment is exactly
+ * as wide as the widest label — which makes a segment's width pure arithmetic (track minus padding
+ * minus gaps, over the count) instead of something only layout knows. React supplies the two numbers it
+ * already has, `--xeno-seg-count` and `--xeno-seg-index`, as plain data; CSS does the rest. No
+ * measuring, no animation runtime, and the thumb lands on the segment to the pixel.
+ *
+ * It must be grid, not `flex: 1 1 0`. A flex item's `min-width` defaults to `auto`, i.e. its own
+ * min-content, so each option gets clamped to the width of its own label and the segments come out
+ * UNEQUAL — the thumb then computes an average width and sits beside the option instead of on it.
+ * Grid's `1fr` has no such floor: every track resolves to the largest contribution, so they are equal
+ * by construction and the arithmetic below is exact.
+ */
+
+/* Registering the index as a real `<number>` is what makes the slide smooth. An unregistered custom
+   property is a string as far as the engine is concerned: it flips from "0" to "2" in one frame, and
+   anything computed from it flips with it. Typed, it interpolates — so the transition below runs on the
+   NUMBER, and the thumb's offset is simply recomputed every frame from a value that is genuinely
+   travelling. That is also why the thumb itself does not transition `translate`: two easings stacked on
+   the same movement smear it. */
+@property --xeno-seg-index {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.xeno-segmented {
+  /* The goo. Mid-flight the thumb ELONGATES along the direction it is travelling and thins across it —
+     a body of liquid reaching for where it is going — then rebounds a hair the other way as it lands.
+     Both amounts are multiplied by how far it is going (`--xeno-seg-dist`, from React), so a jump
+     across the whole control stretches visibly more than a step to the neighbour. That is the part
+     that sells it as matter rather than as a rectangle with an easing curve. */
+  --xeno-seg-stretch: 0.16;
+  --xeno-seg-squeeze: 0.07;
+  --xeno-seg-goo-x: calc(1 + var(--xeno-seg-stretch) * var(--xeno-seg-dist, 1));
+  --xeno-seg-goo-y: calc(1 - var(--xeno-seg-squeeze) * var(--xeno-seg-dist, 1));
+  /* The rebound: a small counter-squash on the way out of the stretch. */
+  --xeno-seg-goo-x2: calc(1 - var(--xeno-seg-squeeze) * 0.45);
+  --xeno-seg-goo-y2: calc(1 + var(--xeno-seg-squeeze) * 0.45);
+  /* ONE duration for the travel and the deformation. If they drift apart the stretch peaks somewhere
+     other than mid-flight and the whole thing reads as a glitch. */
+  --xeno-seg-dur: 300ms;
+  --xeno-seg-gap: 2px;
+  /* The track's own inset, named once: the thumb's width subtracts exactly this, twice. Hard-coding it
+     in two places is how a thumb drifts a couple of pixels off its segment. */
+  --xeno-seg-pad: 2px;
+  --xeno-seg-ease: cubic-bezier(0.34, 1.12, 0.5, 1);
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr; /* equal segments, by construction */
+  /* Explicit content-width so a column parent (align-items:stretch) cannot stretch the track to full
+     width — a segmented control always hugs its options. */
+  width: fit-content;
+  align-items: stretch;
+  gap: var(--xeno-seg-gap);
+  padding: var(--xeno-seg-pad);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  /* The travel itself: the index slides, and everything computed from it slides with it. */
+  transition: --xeno-seg-index var(--xeno-seg-dur) var(--xeno-seg-ease);
+}
+
+/* The travelling fill. `100%` in `translate` is the thumb's OWN width, so one segment plus one gap is
+   exactly `100% + var(--xeno-seg-gap)` — the stride, without ever naming a pixel width. */
+.xeno-segmented-thumb {
+  position: absolute;
+  z-index: -1;
+  top: var(--xeno-seg-pad);
+  bottom: var(--xeno-seg-pad);
+  left: var(--xeno-seg-pad);
+  /* `100%` here is the track's PADDING box, so the options' row is that minus the padding on both
+     sides; take out the gaps and divide by the count and you have one segment, exactly. */
+  width: calc(
+    (100% - var(--xeno-seg-pad) * 2 - var(--xeno-seg-gap) * (var(--xeno-seg-count, 1) - 1)) /
+      var(--xeno-seg-count, 1)
+  );
+  translate: calc(var(--xeno-seg-index, 0) * (100% + var(--xeno-seg-gap))) 0;
+  background: var(--xeno-control);
+  border-radius: var(--xeno-radius-xs);
+  pointer-events: none;
+}
+/* Nothing selected (a `value` matching no option) — no thumb rather than a thumb parked on the first. */
+.xeno-segmented[data-selection='off'] .xeno-segmented-thumb {
+  opacity: 0;
+}
+
+.xeno-segmented-option {
+  position: relative;
+  z-index: 1; /* over the thumb */
+  display: inline-flex;
+  min-width: 0; /* the grid track owns the width; do not let the label put a floor under it */
+  align-items: center;
+  justify-content: center;
+  gap: var(--xeno-gap, 6px);
+  height: calc(var(--xeno-h, 32px) - 4px);
+  padding: 0 var(--xeno-padx, 12px);
+  font-family: inherit;
+  font-size: var(--xeno-font, 14px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--xeno-radius-xs);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color var(--xeno-dur) var(--xeno-ease),
+    background var(--xeno-dur) var(--xeno-ease);
+}
+
+/* Hover brightens the LABEL and nothing else. A tint behind an unselected option is a second filled
+   surface sliding under the thumb — which is exactly what reads as the background being wrong mid-swap.
+   One control, one fill: the thumb. */
+.xeno-segmented-option:hover:not([data-availability='disabled']):not([data-selection='on']) {
+  color: var(--xeno-text);
+}
+
+/* The selected option no longer paints a fill of its own — the thumb under it is the fill. */
+.xeno-segmented-option[data-selection='on'] {
+  color: var(--xeno-text);
+}
+
+.xeno-segmented-option:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-segmented-option[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* The squash, keyed off the track's `data-index`. One keyframe track per position, all identical, for
+   the same reason as the sidebar's: moving to another segment only changes which rule matches, and a
+   browser will not restart an animation whose name did not change. Eight positions — a segmented
+   control with more options than that wants to be a Select. Past eight the thumb still travels; it
+   just stops squashing. */
+.xeno-segmented[data-index='0'] .xeno-segmented-thumb { animation: xeno-seg-goo-0 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='1'] .xeno-segmented-thumb { animation: xeno-seg-goo-1 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='2'] .xeno-segmented-thumb { animation: xeno-seg-goo-2 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='3'] .xeno-segmented-thumb { animation: xeno-seg-goo-3 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='4'] .xeno-segmented-thumb { animation: xeno-seg-goo-4 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='5'] .xeno-segmented-thumb { animation: xeno-seg-goo-5 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='6'] .xeno-segmented-thumb { animation: xeno-seg-goo-6 var(--xeno-seg-dur) 1; }
+.xeno-segmented[data-index='7'] .xeno-segmented-thumb { animation: xeno-seg-goo-7 var(--xeno-seg-dur) 1; }
+/* Armed only once the value has actually changed — otherwise every segmented control on the page
+   squashes itself on load. */
+.xeno-segmented:not([data-motion='ready']) .xeno-segmented-thumb { animation: none; }
+
+@keyframes xeno-seg-goo-0 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-1 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-2 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-3 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-4 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-5 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-6 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-seg-goo-7 { 0% { scale: 1 1; } 34% { scale: var(--xeno-seg-goo-x) var(--xeno-seg-goo-y); } 72% { scale: var(--xeno-seg-goo-x2) var(--xeno-seg-goo-y2); } 100% { scale: 1 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  /* The travel lives on the track (the index), so that is where it has to be switched off. */
+  .xeno-segmented,
+  .xeno-segmented-option {
+    transition: none;
+  }
+  /* The thumb still marks the segment — it just gets there without travelling or squashing. */
+  .xeno-segmented-thumb {
+    animation: none !important;
+  }
+}

package/src/overlays/tabs.css

@@ -0,0 +1,143 @@
+/*
+ * <Tabs> — a horizontal tablist over a hairline baseline, plus an optional panel. CSS-first: the
+ * selected tab carries `data-selection="on"`, a disabled tab carries `data-availability="disabled"`.
+ * Size metrics arrive as inline `--xeno-h/-padx/-gap/-font` vars from the size tokens. Monochrome only.
+ */
+
+.xeno-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.xeno-tablist {
+  position: relative; /* the containing block the indicator's measured offset is relative to */
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  border-bottom: 1px solid var(--xeno-border);
+}
+
+.xeno-tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--xeno-gap, 6px);
+  height: var(--xeno-h, 32px);
+  padding: 0 var(--xeno-padx, 12px);
+  font-family: inherit;
+  font-size: var(--xeno-font, 14px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--xeno-dur) var(--xeno-ease);
+}
+
+/* The underline — ONE hairline bar for the whole tablist, which SLIDES from the tab you left to the tab
+   you chose. It used to be a `::after` on each tab scaling from 0 to 1, so it appeared on the new tab
+   and vanished from the old one: two events, no journey, and no clue where it came from.
+   Its position and width arrive as `--xeno-tab-x` / `--xeno-tab-w`, measured by the component (a tab is
+   as wide as its label — layout is the only thing that can answer that). Everything after those two
+   numbers is CSS: the travel, the stretch, and the settle. */
+.xeno-tab-indicator {
+  /* Mid-flight the bar ELONGATES along its travel and thins — reaching for where it is going — then
+     rebounds a hair as it lands. Both scale with how far it has to go (`--xeno-tab-dist`). */
+  --xeno-tab-stretch: 0.22;
+  --xeno-tab-thin: 0.2;
+  --xeno-tab-goo-x: calc(1 + var(--xeno-tab-stretch) * var(--xeno-tab-dist, 1));
+  --xeno-tab-goo-y: calc(1 - var(--xeno-tab-thin) * var(--xeno-tab-dist, 1));
+  --xeno-tab-goo-x2: calc(1 - var(--xeno-tab-thin) * 0.25);
+  --xeno-tab-goo-y2: calc(1 + var(--xeno-tab-thin) * 0.25);
+  /* ONE duration for the travel and the deformation, or the stretch peaks off-centre and reads as a
+     glitch rather than as weight. */
+  --xeno-tab-dur: 300ms;
+  --xeno-tab-ease: cubic-bezier(0.34, 1.12, 0.5, 1);
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  width: var(--xeno-tab-w, 0px);
+  height: 2px;
+  translate: var(--xeno-tab-x, 0px) 0;
+  background: var(--xeno-text);
+  /* Square. At 2px tall even `--xeno-radius-hair` is 75% of the height — semicircular ends, i.e. a
+     capsule. Below about 4px there is no radius that reads as a corner, so a hairline stays a hairline. */
+  border-radius: 0;
+  pointer-events: none;
+}
+/* Not armed until the selection has actually changed once — otherwise the first measurement after mount
+   would slide the bar in from the left edge on page load. */
+.xeno-tablist[data-motion='ready'] .xeno-tab-indicator {
+  transition:
+    translate var(--xeno-tab-dur) var(--xeno-tab-ease),
+    width var(--xeno-tab-dur) var(--xeno-tab-ease);
+}
+
+.xeno-tab:hover:not([data-availability='disabled']) {
+  color: var(--xeno-text);
+}
+
+.xeno-tab[data-selection='on'] {
+  color: var(--xeno-text);
+}
+
+/* The stretch, keyed off the tablist's `data-index`. One keyframe track per position, all identical:
+   moving to another tab only changes which rule matches, and a browser will not restart an animation
+   whose name did not change. Eight positions; past that the bar still travels, it just stops
+   stretching. */
+.xeno-tablist[data-motion='ready'][data-index='0'] .xeno-tab-indicator { animation: xeno-tab-goo-0 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='1'] .xeno-tab-indicator { animation: xeno-tab-goo-1 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='2'] .xeno-tab-indicator { animation: xeno-tab-goo-2 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='3'] .xeno-tab-indicator { animation: xeno-tab-goo-3 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='4'] .xeno-tab-indicator { animation: xeno-tab-goo-4 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='5'] .xeno-tab-indicator { animation: xeno-tab-goo-5 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='6'] .xeno-tab-indicator { animation: xeno-tab-goo-6 var(--xeno-tab-dur) 1; }
+.xeno-tablist[data-motion='ready'][data-index='7'] .xeno-tab-indicator { animation: xeno-tab-goo-7 var(--xeno-tab-dur) 1; }
+@keyframes xeno-tab-goo-0 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-1 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-2 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-3 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-4 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-5 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-6 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+@keyframes xeno-tab-goo-7 { 0% { scale: 1 1; } 34% { scale: var(--xeno-tab-goo-x) var(--xeno-tab-goo-y); } 72% { scale: var(--xeno-tab-goo-x2) var(--xeno-tab-goo-y2); } 100% { scale: 1 1; } }
+
+.xeno-tab:focus-visible {
+  outline: none;
+  border-radius: var(--xeno-radius-xs);
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-tab[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.xeno-tab-panel {
+  color: var(--xeno-text);
+  outline: none;
+}
+.xeno-tab-panel:focus-visible {
+  border-radius: var(--xeno-radius-sm);
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-tab,
+  .xeno-tablist[data-motion='ready'] .xeno-tab-indicator {
+    transition: none;
+  }
+  /* The bar still marks the tab — it just gets there without travelling or stretching. */
+  .xeno-tab-indicator {
+    animation: none !important;
+  }
+}

package/src/overlays/tooltip.css

@@ -0,0 +1,126 @@
+/*
+ * Tooltip — a hover/focus hint. CSS-first reveal driven by `data-state` (JS-controlled), positioned on
+ * a `data-side` of the trigger. Monochrome shell: an elevated panel with a hairline border and muted
+ * 12px mono text; rounded squares only. Motion is transform/opacity, behind reduced-motion.
+ */
+
+.xeno-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.xeno-tooltip-panel {
+  position: absolute;
+  z-index: 50;
+  width: max-content;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: var(--xeno-elevated);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+  color: var(--xeno-muted);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  text-align: left;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
+  transition:
+    opacity var(--xeno-dur) var(--xeno-ease),
+    transform var(--xeno-dur) var(--xeno-ease),
+    visibility 0s linear var(--xeno-dur);
+}
+
+/* Sides — centre with inset + auto margins (works even when the panel is wider than the trigger) so
+ * the entrance transform stays free to animate. A small gap separates the panel from the trigger. */
+.xeno-tooltip-panel[data-side='top'] {
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  margin-bottom: 8px;
+  transform: translateY(4px);
+}
+.xeno-tooltip-panel[data-side='bottom'] {
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  margin-top: 8px;
+  transform: translateY(-4px);
+}
+.xeno-tooltip-panel[data-side='left'] {
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  margin-block: auto;
+  margin-right: 8px;
+  transform: translateX(4px);
+}
+.xeno-tooltip-panel[data-side='right'] {
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  margin-block: auto;
+  margin-left: 8px;
+  transform: translateX(-4px);
+}
+
+/* Revealed — settle to the resting position; keep visibility on until the fade completes on close. */
+.xeno-tooltip-panel[data-state='open'] {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(0, 0);
+  transition:
+    opacity var(--xeno-dur) var(--xeno-ease),
+    transform var(--xeno-dur) var(--xeno-ease),
+    visibility 0s linear 0s;
+}
+
+/* Arrow — a small rounded square rotated 45°, overlapping the panel edge so it reads as a pointer. */
+.xeno-tooltip-arrow {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  background: var(--xeno-elevated);
+  border-radius: var(--xeno-radius-hair);
+}
+.xeno-tooltip-panel[data-side='top'] .xeno-tooltip-arrow {
+  left: 50%;
+  bottom: -3px;
+  transform: translateX(-50%) rotate(45deg);
+}
+.xeno-tooltip-panel[data-side='bottom'] .xeno-tooltip-arrow {
+  left: 50%;
+  top: -3px;
+  transform: translateX(-50%) rotate(45deg);
+}
+.xeno-tooltip-panel[data-side='left'] .xeno-tooltip-arrow {
+  top: 50%;
+  right: -3px;
+  transform: translateY(-50%) rotate(45deg);
+}
+.xeno-tooltip-panel[data-side='right'] .xeno-tooltip-arrow {
+  top: 50%;
+  left: -3px;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-tooltip-panel {
+    transform: none;
+    transition:
+      opacity var(--xeno-dur) linear,
+      visibility 0s linear var(--xeno-dur);
+  }
+  .xeno-tooltip-panel[data-state='open'] {
+    transform: none;
+    transition:
+      opacity var(--xeno-dur) linear,
+      visibility 0s linear 0s;
+  }
+}

package/src/scrollbar.css

@@ -0,0 +1,184 @@
+/*
+ * The XENO scrollbar.
+ *
+ * A scrollbar is the one control the user does not summon: it appears because there is more, and it
+ * has to say so without becoming furniture. XENO's answer is to not draw it at all until you are in
+ * the region — and then to draw it properly, as an instrument with a rail, rather than as a lone mark
+ * floating in space. Three states:
+ *
+ *   idle              NOTHING. The gutter is reserved but nothing is painted.
+ *   container hovered the rail appears — a hairline track with a thumb riding it
+ *   thumb hovered     brightest, and thicker, and it stays that way while you drag
+ *
+ * The rail is the half people get wrong. A thumb alone, arriving out of nowhere, reads as a stray
+ * mark; the same thumb sitting on a track reads as a control that was always there and simply became
+ * visible. It also gives the thumb something to be measured against — you can see how much document a
+ * drag covers, which a floating bar never tells you.
+ *
+ * The gutter is reserved even while nothing is drawn, so appearing costs no reflow: the content does
+ * not shift sideways the moment your pointer enters.
+ *
+ * ## What it cannot do
+ *
+ * It appears rather than FADES in. The pseudo-elements below take no transitions in any engine that
+ * implements them, so hiding and showing is a snap either way. A true fade — and a bar that also wakes
+ * on a keyboard scroll, where there is no pointer to hover — needs the overlay model: a real element
+ * over the content, positioned from `scrollTop`. That costs a listener per scroll container and a
+ * component wrapping every one of them, which is not a trade this library makes for its default.
+ * The playground's Scrollbar gallery has that version standing next to this one.
+ *
+ * ## The two engines are mutually exclusive — this is the part that bites
+ *
+ * There are two ways to style a scrollbar and they cannot be combined. `scrollbar-width` /
+ * `scrollbar-color` are the standard properties, and since Chrome 121 setting EITHER of them makes the
+ * `::-webkit-scrollbar` pseudo-elements be ignored on that element. Declare both and Blink silently
+ * drops the detailed version, which is exactly how a stylesheet ends up with a thumb that has no
+ * corner radius and no hover state despite ten lines asking for them.
+ *
+ * So they are branched on `@supports selector(::-webkit-scrollbar)`: the pseudo-elements where they
+ * exist (Blink, WebKit), the standard properties where they do not (Gecko). Firefox gets the colours
+ * and the thin width; it does not get the radius or the growth, because the standard properties cannot
+ * express them.
+ *
+ * ## Scope
+ *
+ * Only inside `.xeno`. A component library has no business restyling the host page's scrollbars, and a
+ * consumer who does want them can opt in by putting `.xeno-scroll` on `<html>` (with the tokens in
+ * scope). Everything is wrapped in `:where()`, so the specificity is zero and any component can
+ * override it by naming its own class — see the time picker, which only re-declares the SIZE token.
+ */
+
+/* ---- Gecko: the standard properties, on their own ----------------------------
+   `scrollbar-color` cannot express a rail, so Firefox gets the hover gating and the colours and
+   nothing else: absent at rest, thumb-on-a-faint-track when you are in the region. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(.xeno, .xeno *, .xeno-scroll) {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  :where(.xeno, .xeno *, .xeno-scroll):hover {
+    scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
+  }
+}
+
+/* ---- Blink / WebKit: the pseudo-elements ------------------------------------- */
+@supports selector(::-webkit-scrollbar) {
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar {
+    width: var(--xeno-scroll-size);
+    height: var(--xeno-scroll-size);
+  }
+  /* The stepper arrows are a relic; nothing in the system has them. */
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  /* ---- Idle: the gutter is there, nothing is painted in it ---- */
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-corner,
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  /*
+   * Both pieces are drawn the same way: a transparent border plus `background-clip: padding-box`
+   * insets the paint without anything having to be positioned. The border is what sets the WIDTH —
+   * 5px of border on a 12px gutter leaves a 2px rail, 3px leaves a 6px thumb, and 2px leaves the 8px
+   * the thumb grows to under the pointer. Because only the border changes, the gutter never does, so
+   * nothing reflows at any point.
+   *
+   * Radius is `--xeno-radius-hair` (1.5px of 6px, 25%), plus the border so the outer edge stays true.
+   * `--xeno-radius-xs` would be half the thumb's own width — a capsule with semicircular ends, and
+   * the grammar has no circles in it.
+   */
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border: solid transparent;
+  }
+  /* The rail is square. Its painted strip is only 2px wide, where `--xeno-radius-hair` would be 75%
+     of the width — semicircular ends. The radius here is exactly the border, so the PAINTED corner
+     comes out at zero. */
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track {
+    border-width: var(--xeno-scroll-rail-pad);
+    border-radius: var(--xeno-scroll-rail-pad);
+  }
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
+    border-width: var(--xeno-scroll-pad);
+    border-radius: calc(var(--xeno-radius-hair, 1.5px) + var(--xeno-scroll-pad));
+    min-height: 28px; /* never let a long document shrink the grab target to nothing */
+  }
+
+  /* ---- In the region: the rail arrives, with the thumb on it ---- */
+  :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-track {
+    background-color: var(--xeno-scroll-rail);
+  }
+  :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-thumb {
+    background-color: var(--xeno-scroll-thumb-hover);
+  }
+
+  /* ---- On the thumb: brightest, and thicker, and it holds while you drag ---- */
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:hover,
+  :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:active {
+    background-color: var(--xeno-scroll-thumb-active);
+    border-width: var(--xeno-scroll-pad-hover);
+  }
+}
+
+/*
+ * ## `.xeno-scroll-wake` — for a scroller where `:hover` means nothing
+ *
+ * The document element is hovered whenever the pointer is anywhere in the window, so gating the page's
+ * own bar on hover leaves it permanently on — the opposite of the intent. This variant gates on
+ * ACTIVITY instead: it shows while `data-scrolling` is present and hides when it is gone.
+ *
+ * That one attribute is the app's job, because it is the only part a stylesheet cannot observe. Set it
+ * on scroll, drop it a beat after the last event:
+ *
+ *   let idle
+ *   addEventListener('scroll', () => {
+ *     root.setAttribute('data-scrolling', '')
+ *     clearTimeout(idle)
+ *     idle = setTimeout(() => root.removeAttribute('data-scrolling'), 600)
+ *   }, { passive: true })
+ *
+ * Pointing at the gutter still reveals the thumb even while idle — an invisible thumb still occupies
+ * its track, so going for it deliberately works.
+ */
+@supports selector(::-webkit-scrollbar) {
+  .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-track,
+  .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+  .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-track {
+    background-color: var(--xeno-scroll-rail);
+  }
+  .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-thumb {
+    background-color: var(--xeno-scroll-thumb-hover);
+  }
+  /* Under the pointer still wins, exactly as everywhere else. */
+  .xeno-scroll-wake::-webkit-scrollbar-thumb:hover,
+  .xeno-scroll-wake::-webkit-scrollbar-thumb:active {
+    background-color: var(--xeno-scroll-thumb-active);
+    border-width: var(--xeno-scroll-pad-hover);
+  }
+}
+@supports not selector(::-webkit-scrollbar) {
+  .xeno-scroll-wake:not([data-scrolling]) {
+    scrollbar-color: transparent transparent;
+  }
+  .xeno-scroll-wake[data-scrolling] {
+    scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
+  }
+}
+
+/*
+ * Opt-in: reserve the gutter so content does not jump sideways the moment it becomes scrollable. Not
+ * on by default — it costs the width permanently, which is wrong in a narrow panel and right in a long
+ * document. `stable both-edges` keeps the centring honest when the content is centred.
+ */
+.xeno-scroll-gutter {
+  scrollbar-gutter: stable;
+}
+.xeno-scroll-gutter-both {
+  scrollbar-gutter: stable both-edges;
+}