@xenosystem/elements-react 0.0.1

package/src/overlays/menu.css

@@ -0,0 +1,195 @@
+/*
+ * Popover / Menu / MenuItem — a hand-rolled anchored overlay (no portal lib). CSS-first: the panel is an
+ * absolutely-positioned card anchored to a `position:relative` wrapper; the anchored edge flips on the
+ * `data-align` attribute. Depth is a hairline border + one soft (uncoloured) shadow. Monochrome shell,
+ * rounded squares only, tokens from `xeno-theme.css`. Motion is transform/opacity, behind reduced-motion.
+ */
+
+/* ── Popover (anchor + panel) ─────────────────────────────────────────────────────── */
+.xeno-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+.xeno-popover-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  min-width: 180px;
+  padding: 6px;
+  background: var(--xeno-elevated);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  box-shadow:
+    0 12px 32px -12px rgba(0, 0, 0, 0.55),
+    0 2px 8px rgba(0, 0, 0, 0.24);
+  color: var(--xeno-text);
+  outline: none;
+}
+.xeno-popover-panel[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
+/* ── Menu (a Popover panel that is a role=menu list) ──────────────────────────────── */
+/* `position: relative` + `isolation` come from `xeno-goo-host`, which the component also puts on this
+   element; the 4px padding is what `--xeno-goo-inset` defaults to, so the pill lines up with the rows. */
+.xeno-menu {
+  min-width: 200px;
+  padding: 4px;
+}
+
+/* The travelling hover pill is a PRIMITIVE, not a menu feature — see `goo.css` and `useGooPill()`. A
+ * menu was simply the first list that needed it; a command palette or a product's own hand-rolled
+ * dropdown wants the same behaviour, so it does not live here. `<Menu>` carries `xeno-goo-host` and
+ * renders the pill as its first child, and the rows below give up painting their own hover background
+ * because the pill IS the filled surface. */
+
+/* ── MenuItem (row: lead · label · shortcut · chevron) ────────────────────────────── */
+.xeno-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  /* 32, not the 34 this was written with. The system's own control scale is xs 24 / sm 28 / md 32 /
+     lg 36 and there is no 34 in it — the number was picked by eye and never checked against the table
+     it belongs to. Found by measuring a product's menu rows against this component: the product was on
+     the scale and the library was not. */
+  height: 32px;
+  margin: 0;
+  padding: 0 8px;
+  background: transparent;
+  border: none;
+  /* `md`, not `sm`. The locked radius scale is explicit that overlay chrome is "6px throughout", and a
+     menu row is overlay chrome; 5px is the badge/checkbox step. */
+  border-radius: var(--xeno-radius-md);
+  color: var(--xeno-text);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+/* The row paints no background of its own: the travelling pill is the filled surface, and two of them
+   would read as two highlights. */
+.xeno-menu-item:hover:not(:disabled),
+.xeno-menu-item:focus-visible {
+  outline: none;
+}
+.xeno-menu-item:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--xeno-border);
+}
+.xeno-menu-item[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.xeno-menu-item[data-variant='danger'] {
+  color: var(--xeno-danger);
+}
+.xeno-menu-item[data-variant='danger']:hover:not(:disabled),
+.xeno-menu-item[data-variant='danger']:focus-visible {
+  color: var(--xeno-danger-hover);
+  background: var(--xeno-hover);
+}
+
+/* Leading slot — reserved icon/check column (a rounded box, never a circle). */
+.xeno-menu-item-lead {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--xeno-muted);
+}
+.xeno-menu-item[data-selection='on'] .xeno-menu-item-lead {
+  color: var(--xeno-text);
+}
+.xeno-menu-item[data-variant='danger'] .xeno-menu-item-lead {
+  color: inherit;
+}
+
+/* Label — grows and truncates. */
+.xeno-menu-item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Shortcut — trailing, muted mono. */
+.xeno-menu-item-shortcut {
+  flex: none;
+  margin-left: 12px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--xeno-muted);
+}
+
+/* Value — trailing, muted, but in the UI font, and that is the whole point of it being a separate
+   slot. A shortcut is a KEY: mono, tracked out, because it stands for something the reader will
+   press. A value is a WORD the reader chose ("All", "Last activity") and setting a word in mono
+   makes it read as a key too. Same slot, same muted colour, different typeface — the distinction
+   the shortcut rule alone could not draw. Sits before the chevron, so a submenu row reads
+   label → current value → "there is more this way". */
+.xeno-menu-item-value {
+  flex: none;
+  /* 2, not the shortcut's 12 — the row's own 10px `gap` is already between them, and a value is a
+     word rather than a key glyph, so it needs the label's width more than it needs the air. At 12 a
+     "Last activity / All ›" row ran out of room and ellipsed its own label. */
+  margin-left: 2px;
+  color: var(--xeno-muted);
+}
+
+/* Submenu chevron — trailing, muted. */
+.xeno-menu-item-chevron {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 2px;
+  color: var(--xeno-muted);
+}
+
+/* A DISCLOSURE row turns the same chevron a quarter — the region it opens is below, not beside, and
+   the arrow should point at it. It turns rather than swapping to a chevron-down so the reader can
+   see WHICH row moved; the rotation is the state change, not a redraw. */
+.xeno-menu-item-chevron[data-state] {
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.xeno-menu-item-chevron[data-state='open'] {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .xeno-menu-item-chevron[data-state] {
+    transition: none;
+  }
+}
+
+/* ── Motion (transform/opacity only; opt-in) ─────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-popover-panel {
+    animation: xeno-popover-in var(--xeno-dur) var(--xeno-ease);
+    transform-origin: top left;
+  }
+  .xeno-popover-panel[data-align='end'] {
+    transform-origin: top right;
+  }
+}
+
+@keyframes xeno-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}

package/src/overlays/modal.css

@@ -0,0 +1,167 @@
+/*
+ * Modal / Sheet — the locked floating-window overlay. CSS-first: the placement is driven by the
+ * `data-variant` attribute on the scrim and the card, everything else is tokens from `xeno-theme.css`.
+ * Depth is a hairline border + one soft (uncoloured) shadow; the scrim tints from `--xeno-canvas` so it
+ * stays monochrome in both themes. No literal colours, no coloured glow.
+ */
+
+/* ── Scrim / overlay ─────────────────────────────────────────────────────────────── */
+.xeno-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: color-mix(in srgb, var(--xeno-canvas) 72%, transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+.xeno-modal-overlay[data-variant='sheet'] {
+  align-items: flex-end;
+  padding: 0;
+}
+
+/* ── Card ────────────────────────────────────────────────────────────────────────── */
+/*
+ * The card is a chrome stack, like a panel — §"Panel Structure"'s construction, floated. Every value
+ * comes from `--xeno-chrome-*`, so the same DOM renders as a shell carrying three plates with 2px
+ * gaps (`separated`) or as one clipped card with hairline dividers and a soft shadow (`unified`).
+ */
+.xeno-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xeno-chrome-gap);
+  padding: var(--xeno-chrome-inset);
+  width: min(92vw, 480px);
+  max-height: min(85vh, 640px);
+  background: var(--xeno-chrome-shell);
+  border: 1px solid var(--xeno-chrome-border);
+  border-radius: var(--xeno-chrome-radius);
+  box-shadow: var(--xeno-chrome-shadow);
+  outline: none;
+  overflow: hidden;
+}
+.xeno-modal[data-variant='sheet'] {
+  width: 100%;
+  max-width: 640px;
+  max-height: 85vh;
+  border-bottom: none;
+  /* radius only on the top corners — it meets the bottom edge */
+  border-radius: var(--xeno-chrome-radius) var(--xeno-chrome-radius) 0 0;
+}
+
+/* ── Header (title + close) ──────────────────────────────────────────────────────── */
+.xeno-modal-header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: var(--xeno-chrome-dialog-header-pad);
+  background: var(--xeno-chrome-plate);
+  -webkit-backdrop-filter: var(--xeno-chrome-plate-filter);
+  backdrop-filter: var(--xeno-chrome-plate-filter);
+  border-bottom: var(--xeno-chrome-divider);
+}
+.xeno-modal-title {
+  min-width: 0;
+  margin: 0;
+  font-size: var(--xeno-chrome-dialog-title-size);
+  font-weight: var(--xeno-chrome-dialog-title-weight);
+  letter-spacing: 0.03em;
+  line-height: 1.3;
+  color: var(--xeno-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Pushes the close button to the trailing edge, with or without a title. */
+.xeno-modal-close {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+}
+
+/* ── Body (the one scroll region) ────────────────────────────────────────────────── */
+.xeno-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--xeno-chrome-dialog-body-pad);
+  background: var(--xeno-chrome-body);
+  color: var(--xeno-text);
+  font-size: var(--xeno-chrome-dialog-body-size);
+  line-height: 1.55;
+}
+
+/* ── Footer (right-aligned actions) ──────────────────────────────────────────────── */
+.xeno-modal-footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--xeno-chrome-dialog-footer-gap);
+  padding: var(--xeno-chrome-dialog-footer-pad);
+  background: var(--xeno-chrome-plate);
+  border-top: var(--xeno-chrome-divider);
+}
+
+/* ── Motion (transform/opacity only; opt-in) ─────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-modal-overlay {
+    animation: xeno-modal-scrim-in var(--xeno-dur) var(--xeno-ease);
+  }
+  .xeno-modal {
+    animation: xeno-modal-pop-in calc(var(--xeno-dur) * 1.4) var(--xeno-ease);
+  }
+  .xeno-modal[data-variant='sheet'] {
+    animation: xeno-modal-sheet-in calc(var(--xeno-dur) * 1.7) var(--xeno-ease);
+  }
+}
+
+@keyframes xeno-modal-scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes xeno-modal-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes xeno-modal-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/*
+ * §4 "Radius Is Per-Corner, Not Per-Element": a corner is rounded only where the surface meets
+ * NOTHING. Each plate faces its neighbour across the 2px gap, so the facing corners are SQUARE — a
+ * uniform radius on every plate is the tell that this section was skipped, and it was.
+ *
+ * Declared on first/last child rather than per plate so a stack with no header, or no footer, still
+ * presents a rounded outer edge instead of a square one against the rounded shell.
+ */
+.xeno-modal > * {
+  border-radius: 0;
+}
+.xeno-modal > :first-child {
+  border-top-left-radius: var(--xeno-chrome-radius-plate);
+  border-top-right-radius: var(--xeno-chrome-radius-plate);
+}
+.xeno-modal > :last-child {
+  border-bottom-left-radius: var(--xeno-chrome-radius-plate);
+  border-bottom-right-radius: var(--xeno-chrome-radius-plate);
+}

package/src/overlays/picker-field.css

@@ -0,0 +1,81 @@
+/*
+ * PickerField — a form field that reveals a panel with the chat's "Scheduled" open/close animation:
+ * the panel slides DOWN from behind the field (clipped by the popover's overflow) while its content
+ * fades up a beat later, so nothing pops. Reverses on close. Monochrome, tokens only, motion is
+ * transform/opacity behind the reduce guard.
+ */
+
+.xeno-field {
+  position: relative;
+  display: inline-block;
+}
+
+/* ── Trigger (the field itself) ──────────────────────────────────────────────────── */
+.xeno-field-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 156px;
+  height: 34px;
+  padding: 0 10px;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--xeno-text);
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  cursor: pointer;
+  transition:
+    border-color var(--xeno-dur) ease,
+    background var(--xeno-dur) ease;
+}
+.xeno-field-trigger:hover {
+  border-color: var(--xeno-muted);
+}
+.xeno-field-trigger[data-open='true'] {
+  border-color: var(--xeno-muted);
+  background: var(--xeno-hover);
+}
+.xeno-field-trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-field-icon {
+  display: inline-flex;
+  color: var(--xeno-muted);
+}
+.xeno-field-label {
+  color: var(--xeno-muted);
+  font-size: 12px;
+}
+.xeno-field-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}
+.xeno-field-value[data-placeholder='true'] {
+  color: var(--xeno-muted);
+}
+.xeno-field-chevron {
+  display: inline-flex;
+  color: var(--xeno-muted);
+  transform: rotate(90deg); /* chevron-right → points down when closed */
+  transition: transform var(--xeno-dur) ease;
+}
+.xeno-field-trigger[data-open='true'] .xeno-field-chevron {
+  transform: rotate(-90deg); /* points up when open */
+}
+
+/* The reveal itself (the unfolding panel) lives in reveal.css — PickerField composes <Reveal>. */
+@media (prefers-reduced-motion: reduce) {
+  .xeno-field-chevron {
+    transition: none;
+  }
+}

package/src/overlays/pill-filter.css

@@ -0,0 +1,129 @@
+/*
+ * <PillFilter> — a wrapping row of small toggle pills (rounded squares) for multi-select. CSS-first:
+ * each pill carries `data-selection` (on/off) and `data-availability`; a selected pill fills to
+ * `var(--xeno-control)` with a `var(--xeno-muted)` hairline. Size metrics arrive as inline vars.
+ * Monochrome only.
+ */
+
+.xeno-pillfilter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The "on" fill is a LAYER that floods in from the leading edge, not a background that switches — the
+   same gesture <ToggleButton> makes, because these are the same thing: a button that stays pressed.
+   Clipped, never scaled, so the pill itself never changes size. */
+.xeno-pill {
+  --xeno-pill-goo-dur: 300ms;
+  --xeno-pill-goo-ease: var(--xeno-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--xeno-h, 28px);
+  padding: 0 var(--xeno-padx, 10px);
+  font-family: inherit;
+  font-size: var(--xeno-font, 13px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color var(--xeno-dur) var(--xeno-ease),
+    background var(--xeno-dur) var(--xeno-ease),
+    border-color var(--xeno-dur) var(--xeno-ease);
+}
+
+.xeno-pill::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  /* -1px so the layer reaches under the border, exactly where a background would have painted. */
+  inset: -1px;
+  border-radius: inherit;
+  background: var(--xeno-control);
+  clip-path: circle(0% at var(--xeno-padx, 10px) 50%);
+}
+
+/* Hover reads in BOTH states: the fill covers any background tint once the pill is on, so the border
+   carries the affordance — it is visible either way. (It also settles an ordering bug: the hover rule
+   out-specified the selected rule, so hovering a selected pill used to swap `--xeno-control` for a
+   translucent tint and the pill appeared to un-fill.) */
+.xeno-pill:hover:not([data-availability='disabled']) {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+  border-color: var(--xeno-muted);
+}
+
+.xeno-pill[data-selection='on'] {
+  color: var(--xeno-text);
+  border-color: var(--xeno-muted);
+}
+.xeno-pill[data-selection='on']::before {
+  clip-path: circle(150% at var(--xeno-padx, 10px) 50%);
+}
+/* Gated per pill on `data-motion="ready"`, set only once that pill's own selection has changed. */
+.xeno-pill[data-motion='ready'][data-selection='on']::before {
+  animation: xeno-pill-goo-in var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
+}
+.xeno-pill[data-motion='ready'][data-selection='off']::before {
+  animation: xeno-pill-goo-out var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
+}
+@keyframes xeno-pill-goo-in {
+  from { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
+  to { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
+}
+@keyframes xeno-pill-goo-out {
+  from { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
+  to { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
+}
+
+.xeno-pill:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-pill[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Count badge — a small inset rounded square, never a circle. */
+.xeno-pill-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--xeno-muted);
+  background: var(--xeno-control);
+  border-radius: var(--xeno-radius-xs);
+}
+
+.xeno-pill[data-selection='on'] .xeno-pill-count {
+  color: var(--xeno-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-pill {
+    transition: none;
+  }
+  /* The fill still marks the pill — it just arrives instead of pouring. */
+  .xeno-pill::before {
+    animation: none !important;
+  }
+}

package/src/overlays/reveal.css

@@ -0,0 +1,56 @@
+/*
+ * Reveal — an in-flow animated disclosure. The region's height (inline, animated) pushes following
+ * content DOWN so the panel never floats over the page; the clip is panel-WIDTH so a wide child shows
+ * full width and only unfolds VERTICALLY; the content fades up a beat after. Tokens only, motion is
+ * transform/opacity/height behind the reduce guard.
+ */
+
+.xeno-reveal {
+  position: relative;
+  height: 0;
+  margin-top: 7px;
+  transition: height 240ms var(--xeno-ease);
+}
+
+/* Absolute + panel-width (max-content), so a wide calendar shows FULL width (never cut on the side);
+   as tall as the region (height:100%), so the reveal only clips VERTICALLY. `data-clip=false` lifts it
+   once open so edge focus rings are not cut. */
+.xeno-reveal-clip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  height: 100%;
+  overflow: hidden;
+  z-index: 50;
+}
+.xeno-reveal-clip[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+.xeno-reveal-clip[data-clip='false'] {
+  overflow: visible;
+}
+
+.xeno-reveal-content {
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity 200ms ease-out 40ms,
+    transform 200ms ease-out 40ms;
+}
+.xeno-reveal[data-open='true'] .xeno-reveal-content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-reveal,
+  .xeno-reveal-content {
+    transition: none;
+  }
+  .xeno-reveal-content {
+    opacity: 1;
+    transform: none;
+  }
+}