@xenosystem/elements-react 0.0.1

package/src/containers/panel.css

@@ -0,0 +1,120 @@
+/*
+ * Panel — a chrome stack: heading, body, footer.
+ *
+ * Every construction value comes from the `--xeno-chrome-*` tokens, so the SAME DOM renders as either
+ * chrome. Under `separated` (the default, required by DESIGN_SYSTEM.md §"Panel Structure") the wrapper
+ * paints the page colour and the three plates float on it with a 2px gap. Under `unified` the gap
+ * collapses to 0, the plates go transparent, the wrapper paints the surface and clips them, and the
+ * dividers come back — one card, exactly as this set rendered before the chrome axis existed.
+ *
+ * Nothing here knows a theme exists. That is the point: no component is built twice.
+ *
+ * Scrolling is chrome-independent — give the panel a bounded height and the body scrolls on its own
+ * (`min-height: 0` lets a flex child shrink below its content).
+ */
+.xeno-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xeno-chrome-gap);
+  padding: var(--xeno-chrome-inset);
+  min-height: 0;
+  background: var(--xeno-chrome-shell);
+  /* `separated` draws no border on the wrapper — the plates carry their own. `unified` needs one,
+     and gets it because the shell is painted and clipped. Both read the same token. */
+  border: 1px solid var(--xeno-chrome-border);
+  border-radius: var(--xeno-chrome-radius);
+  overflow: hidden;
+  color: var(--xeno-text);
+}
+
+/*
+ * Heading plate. §"Panel Structure" fixes it at 34px so headings line up with sidebar navigation
+ * across a product; the padding sets the text inside that rather than defining the height.
+ */
+.xeno-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+  min-height: var(--xeno-chrome-panel-header-min-h);
+  padding: var(--xeno-chrome-panel-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);
+}
+
+/*
+ * §"Headers and Footers": the header text is "small, uppercase, with letter-spacing. It functions as
+ * a label, not a headline." Matches the convention the code-block language chip already uses.
+ */
+.xeno-panel-title {
+  min-width: 0;
+  color: var(--xeno-chrome-title-color);
+  font-size: var(--xeno-chrome-title-size);
+  font-weight: 600;
+  letter-spacing: var(--xeno-chrome-title-spacing);
+  text-transform: var(--xeno-chrome-title-transform);
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xeno-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+/* Body plate — the scroll region. */
+.xeno-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--xeno-chrome-panel-body-pad);
+  overflow: auto;
+  background: var(--xeno-chrome-body);
+  color: var(--xeno-text);
+}
+
+/*
+ * Footer plate — §"Headers and Footers": "Footer padding matches header padding exactly. Headers and
+ * footers are visually symmetric." Every box metric below is the header's, duplicated deliberately
+ * rather than shared through a common class: the symmetry is a design rule a future change must break
+ * on purpose, and a shared class would let one drift silently while the other did not.
+ *
+ * `space-between` gives the dismiss-left / confirm-right arrangement the products already use.
+ */
+.xeno-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+  min-height: var(--xeno-chrome-panel-header-min-h);
+  padding: var(--xeno-chrome-panel-header-pad);
+  background: var(--xeno-chrome-plate);
+  border-top: var(--xeno-chrome-divider);
+}
+
+/*
+ * §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-panel > * {
+  border-radius: 0;
+}
+.xeno-panel > :first-child {
+  border-top-left-radius: var(--xeno-chrome-radius-plate);
+  border-top-right-radius: var(--xeno-chrome-radius-plate);
+}
+.xeno-panel > :last-child {
+  border-bottom-left-radius: var(--xeno-chrome-radius-plate);
+  border-bottom-right-radius: var(--xeno-chrome-radius-plate);
+}

package/src/containers/table.css

@@ -0,0 +1,102 @@
+/*
+ * Dense table styles — the locked grammar for Table / DataTable. CSS-first: appearance is driven by
+ * the `xeno-*` classes plus the `data-align` / `data-selection` seams, reading only the theme custom
+ * properties from `xeno-theme.css`. Border-collapse with hairline BOTTOM row rules only — no vertical
+ * rules, no zebra striping. Monochrome throughout; no literal colours.
+ */
+
+.xeno-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  color: var(--xeno-text);
+}
+
+.xeno-th,
+.xeno-td {
+  padding: 6px 11px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.xeno-th {
+  color: var(--xeno-muted);
+  font-weight: 600;
+  font-size: 0.85em;
+}
+
+/* Bottom border only on rows — the sole rule; header row divider comes for free. */
+.xeno-tr {
+  border-bottom: 1px solid var(--xeno-border);
+}
+
+/* ── Tracking a row ───────────────────────────────────────────────────────────────────
+ * A dense table is READ by running your eye along a line, and until now nothing under the pointer
+ * answered — which is what makes a table feel like a picture of data instead of data.
+ *
+ * The restraint here is deliberate and is the opposite of the choice made for the toggles: no flood,
+ * no travel. You cross a dozen rows in a second while scanning, and anything with a 300ms gesture
+ * would still be arriving when you have already left. A wash that is simply THERE is the correct
+ * answer; the only thing that moves is a hairline on the leading edge, and it moves in 140ms.
+ *
+ * Body rows only. The header is not a row you track, and neither is the empty-state row — there is
+ * nothing under the pointer there to answer for. */
+.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) {
+  background: var(--xeno-hover);
+}
+
+/* Selection axis — a step ABOVE the hover wash, not the same token. They used to share
+   `--xeno-hover`, so once rows answered the pointer a hovered row and a selected row were the same
+   colour, and the selection stopped meaning anything. */
+.xeno-tr[data-selection='on'] {
+  background: var(--xeno-control);
+}
+
+/* The leading-edge mark: a hairline that grows from the middle of the row, on hover and on selection.
+   It lives on the first cell rather than the row, because a `<tr>` is not a reliable containing block
+   under `border-collapse` — cells are. */
+.xeno-tbody .xeno-tr > :first-child {
+  position: relative;
+}
+.xeno-tbody .xeno-tr > :first-child::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair, 1.5px);
+  transform: scaleY(0);
+  transform-origin: center;
+}
+.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) > :first-child::before,
+.xeno-tbody .xeno-tr[data-selection='on'] > :first-child::before {
+  transform: scaleY(1);
+}
+
+/* Alignment overrides (data-* seam). */
+.xeno-th[data-align='center'],
+.xeno-td[data-align='center'] {
+  text-align: center;
+}
+.xeno-th[data-align='right'],
+.xeno-td[data-align='right'] {
+  text-align: right;
+}
+
+/* Empty state — muted, roomy, column-spanning. */
+.xeno-table-empty {
+  padding: 18px 11px;
+  color: var(--xeno-muted);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-tr {
+    transition: background var(--xeno-dur) var(--xeno-ease);
+  }
+  .xeno-tbody .xeno-tr > :first-child::before {
+    transition: transform var(--xeno-dur) var(--xeno-ease);
+  }
+}

package/src/containers/tile.css

@@ -0,0 +1,17 @@
+/*
+ * Tile — a square icon tile. Rounded square (radius-md), a surface ground, a hairline border, and a
+ * centred glyph in muted ink. The box edge arrives as an inline `--xeno-tile-size` var. No literal
+ * colours; monochrome shell.
+ */
+.xeno-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--xeno-tile-size, 32px);
+  height: var(--xeno-tile-size, 32px);
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+}

package/src/content/callout.css

@@ -0,0 +1,77 @@
+/*
+ * <Callout> — a left-ruled blockquote. Monochrome by default (muted italic ink, hairline rule); the
+ * `danger` tone is the sole exception, swapping the rule and the glyph to `--xeno-danger`. Tokens only.
+ *
+ * The rule is a pseudo-element rather than a `border-left` for one reason: a border cannot be scaled
+ * from its top edge, and the entrance below is the rule DRAWING DOWN. Everything else about it is
+ * identical — 2px wide, flush left, the same total 14px inset to the text.
+ */
+.xeno-callout {
+  position: relative;
+  margin: 0;
+  padding-left: 14px;
+  color: var(--xeno-muted);
+  font-style: italic;
+}
+.xeno-callout::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--xeno-border);
+  /* Square: at 2px wide a 1.5px radius is 75% of the width, which is a capsule, not a corner. */
+  border-radius: 0;
+  transform-origin: top center;
+}
+.xeno-callout[data-tone='danger']::before {
+  background: var(--xeno-danger);
+}
+
+/* The flex row exists ONLY when there is a glyph. Without one the children stay direct descendants of
+   the blockquote, so a run of `<p>`s lays out as prose rather than as a row of flex items. */
+.xeno-callout[data-icon] {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+}
+.xeno-callout-icon {
+  display: inline-flex;
+  flex: none;
+  margin-top: 1px; /* optical: the glyph's box sits a hair above the italic x-height */
+  color: var(--xeno-muted);
+}
+.xeno-callout[data-tone='danger'] .xeno-callout-icon {
+  color: var(--xeno-danger);
+}
+.xeno-callout-body {
+  min-width: 0;
+}
+
+/* ── Entrance ─────────────────────────────────────────────────────────────────────────
+ * The rule leads and the text follows it in. Two tracks rather than one fade, because the rule IS the
+ * callout's form — a block that simply fades up could be any block, while a rule drawing down from the
+ * top is unmistakably this one. The rule takes longer than the text on purpose: it is still arriving
+ * as the words settle, so the two read as one gesture instead of two. */
+.xeno-callout[data-enter] {
+  animation: xeno-callout-in var(--xeno-dur-entrance, 240ms) var(--xeno-ease) both;
+}
+.xeno-callout[data-enter]::before {
+  animation: xeno-callout-rule 320ms var(--xeno-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+@keyframes xeno-callout-in {
+  from { opacity: 0; translate: 5px 0; }
+  to { opacity: 1; translate: 0 0; }
+}
+@keyframes xeno-callout-rule {
+  from { scale: 1 0; }
+  to { scale: 1 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-callout[data-enter],
+  .xeno-callout[data-enter]::before {
+    animation: none;
+  }
+}

package/src/content/caret.css

@@ -0,0 +1,30 @@
+/*
+ * <Caret> — a thin streaming caret. A hairline `--xeno-text` block, `radius-hair` corners, sized to the
+ * line via `1em`. It blinks only under `prefers-reduced-motion: no-preference`; otherwise it holds solid.
+ */
+.xeno-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-caret {
+    animation: xeno-caret-blink 1s steps(1, end) infinite;
+  }
+}
+
+@keyframes xeno-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}

package/src/content/code-block.css

@@ -0,0 +1,159 @@
+/*
+ * CodeBlock — a monochrome code surface. Shell is greyscale (canvas card + hairline border); the code is
+ * the ink. State is CSS-first: `data-collapsed` on the root swaps body↔summary and rotates the chevron;
+ * `data-selection` on the copy button reflects the transient copied state. Tokens only — the sole hue is
+ * `--xeno-danger`, and only on an error output. Motion is transform/opacity, behind the reduce guard.
+ */
+.xeno-code {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-card);
+  color: var(--xeno-text);
+  overflow: hidden;
+}
+
+/* ── Header: language label + action row ─────────────────────────────────────────── */
+.xeno-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px 6px 5px 12px;
+  background: var(--xeno-surface);
+  border-bottom: 1px solid var(--xeno-border);
+}
+
+.xeno-code-lang {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--xeno-muted);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.xeno-code-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Copy button reflects the ~1.5s copied confirmation (icon swaps to Check; ink lifts to full text). */
+.xeno-code-copy.is-copied {
+  color: var(--xeno-text);
+}
+
+/* Collapse chevron: points down when open, rotates to point right when collapsed. */
+.xeno-code-collapse .xeno-element {
+  transition: transform var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-code[data-collapsed='true'] .xeno-code-collapse .xeno-element {
+  transform: rotate(-90deg);
+}
+
+/* ── Body: <pre><code>, monospace, horizontally scrollable ───────────────────────── */
+.xeno-code-body {
+  margin: 0;
+  padding: 12px 14px;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--xeno-text);
+  tab-size: 2;
+}
+.xeno-code-body:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-code-code {
+  display: block;
+  font: inherit;
+  color: inherit;
+  white-space: pre;
+}
+
+/* Collapsed ↔ expanded: swap body for the summary line. */
+.xeno-code[data-collapsed='true'] .xeno-code-body {
+  display: none;
+}
+.xeno-code[data-collapsed='false'] .xeno-code-summary {
+  display: none;
+}
+
+.xeno-code-summary {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--xeno-muted);
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color var(--xeno-dur) ease,
+    background var(--xeno-dur) ease;
+}
+.xeno-code-summary:hover {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+}
+.xeno-code-summary:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+
+/* ── Output panel: Running… / result / error ─────────────────────────────────────── */
+.xeno-code-output {
+  padding: 10px 14px;
+  background: var(--xeno-elevated);
+  border-top: 1px solid var(--xeno-border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+.xeno-code-output-running {
+  color: var(--xeno-muted);
+}
+.xeno-code-output-text {
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  color: var(--xeno-text);
+}
+.xeno-code-output[data-status='error'] {
+  border-top-color: var(--xeno-danger);
+}
+.xeno-code-output[data-status='error'] .xeno-code-output-text {
+  color: var(--xeno-danger);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-code-output[data-status='running'] .xeno-code-output-running {
+    animation: xeno-code-pulse 1.2s var(--xeno-ease) infinite;
+  }
+}
+@keyframes xeno-code-pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-code-collapse .xeno-element,
+  .xeno-code-summary {
+    transition: none;
+  }
+}

package/src/content/collapsible.css

@@ -0,0 +1,80 @@
+/*
+ * <Collapsible> — a "Thoughts"-style disclosure. Borderless summary (lightbulb glyph + label + chevron)
+ * over a Callout-like body (2px `--xeno-border` left rule, 12px inset). CSS-first: `data-open` on the root
+ * rotates the chevron and lifts the label ink. Tokens only; motion is transform/opacity behind the guard.
+ */
+.xeno-collapsible {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Summary — a borderless text button, left-aligned to its content. */
+.xeno-collapsible-summary {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 6px;
+  padding: 2px 4px 2px 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--xeno-radius-sm);
+  color: var(--xeno-muted);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: color var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-collapsible-summary:hover {
+  color: var(--xeno-text);
+}
+.xeno-collapsible-summary:focus-visible {
+  outline: none;
+  color: var(--xeno-text);
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+.xeno-collapsible[data-open] .xeno-collapsible-summary {
+  color: var(--xeno-text);
+}
+
+.xeno-collapsible-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--xeno-muted);
+}
+
+.xeno-collapsible-label {
+  flex: none;
+}
+
+/* Chevron — points right when closed, down when open (root carries the seam). */
+.xeno-collapsible-chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--xeno-muted);
+  transform: rotate(-90deg);
+  transition: transform var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-collapsible[data-open] .xeno-collapsible-chevron {
+  transform: rotate(0deg);
+}
+
+/* Body — set apart like a Callout; hidden until open. */
+.xeno-collapsible-body {
+  margin-top: 6px;
+  padding-left: 12px;
+  border-left: 2px solid var(--xeno-border);
+  color: var(--xeno-muted);
+}
+.xeno-collapsible-body[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-collapsible-summary,
+  .xeno-collapsible-chevron {
+    transition: none;
+  }
+}

package/src/content/inline-code.css

@@ -0,0 +1,14 @@
+/*
+ * <InlineCode> — an inline monospace chip for prose. Monochrome shell: a `--xeno-surface` fill and
+ * `--xeno-text` ink (never the legacy peach), `radius-sm` corners, tight padding. Tokens only, no hue.
+ */
+.xeno-inline-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 2px 6px;
+  background: var(--xeno-surface);
+  border-radius: var(--xeno-radius-sm);
+  color: var(--xeno-text);
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}