@xenosystem/elements-react 0.0.1 → 0.0.3

package/src/fonts.css

@@ -1,34 +1,34 @@
-/*
- * The XENO typeface — vendored, not merely declared.
- *
- * `font-family: 'Inter'` alone SILENTLY falls back when Inter is not installed, and on Windows that
- * means Segoe UI: a fine reading face and the wrong one for dense dark chrome. The app then looks
- * identical to having declared nothing, which is most of why an interface reads as cheap. It is a
- * live bug in xeno-hub today. Vendoring the woff2 means it works offline and needs no CSP exception.
- *
- * OPT-IN, deliberately. This is a library, not an app: forcing ~100 kB of font into every consumer's
- * bundle is not ours to decide, and a product with its own licensed face must be able to say no. Same
- * shape as the `motion` entry point — the platform SHIPS it so nobody re-derives it, and the consumer
- * chooses.
- *
- *   import '@xenosystem/elements-react/fonts.css'
- *
- * A product that skips this gets the fallback stack below and should know that it has.
- */
-@import '@fontsource-variable/inter/index.css';
-
-.xeno {
-  /*
-   * `--xeno-font-*` and NOT `--xeno-text-*`. That prefix is already the colour ramp, and reusing it
-   * would silently overwrite `--xeno-text` app-wide — a documented failure, not a hypothetical.
-   */
-  --xeno-font-sans: 'Inter Variable', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
-  --xeno-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-
-  font-family: var(--xeno-font-sans);
-  /* cv11 disambiguates 1/l/I — the one that matters most in dense UI and in code-adjacent labels. */
-  font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss01' 1;
-  font-optical-sizing: auto;
-  /* Inter runs a touch wide at UI sizes. */
-  letter-spacing: -0.006em;
-}
+/*
+ * The XENO typeface — vendored, not merely declared.
+ *
+ * `font-family: 'Inter'` alone SILENTLY falls back when Inter is not installed, and on Windows that
+ * means Segoe UI: a fine reading face and the wrong one for dense dark chrome. The app then looks
+ * identical to having declared nothing, which is most of why an interface reads as cheap. It is a
+ * live bug in xeno-hub today. Vendoring the woff2 means it works offline and needs no CSP exception.
+ *
+ * OPT-IN, deliberately. This is a library, not an app: forcing ~100 kB of font into every consumer's
+ * bundle is not ours to decide, and a product with its own licensed face must be able to say no. Same
+ * shape as the `motion` entry point — the platform SHIPS it so nobody re-derives it, and the consumer
+ * chooses.
+ *
+ *   import '@xenosystem/elements-react/fonts.css'
+ *
+ * A product that skips this gets the fallback stack below and should know that it has.
+ */
+@import '@fontsource-variable/inter/index.css';
+
+.xeno {
+  /*
+   * `--xeno-font-*` and NOT `--xeno-text-*`. That prefix is already the colour ramp, and reusing it
+   * would silently overwrite `--xeno-text` app-wide — a documented failure, not a hypothetical.
+   */
+  --xeno-font-sans: 'Inter Variable', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
+  --xeno-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  font-family: var(--xeno-font-sans);
+  /* cv11 disambiguates 1/l/I — the one that matters most in dense UI and in code-adjacent labels. */
+  font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss01' 1;
+  font-optical-sizing: auto;
+  /* Inter runs a touch wide at UI sizes. */
+  letter-spacing: -0.006em;
+}

package/src/forms/Checkbox.css

@@ -1,114 +1,114 @@
-/*
- * `<Checkbox>` — rounded-SQUARE box + optional label. CSS-first: paint is keyed off `data-selection`
- * (off|on|mixed) and `data-availability`. Monochrome shell — only theme tokens, no literal colours.
- */
-.xeno-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  color: var(--xeno-text);
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1;
-  text-align: left;
-  cursor: pointer;
-  user-select: none;
-}
-
-.xeno-checkbox-box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 17px;
-  height: 17px;
-  /* The stamped glyph inherits this via currentColor; only visible once the box is filled. */
-  color: var(--xeno-on-accent);
-  background: var(--xeno-canvas);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-sm);
-  transition:
-    background var(--xeno-dur) var(--xeno-ease),
-    border-color var(--xeno-dur) var(--xeno-ease);
-}
-
-.xeno-checkbox:hover:not(:disabled) .xeno-checkbox-box {
-  border-color: var(--xeno-muted);
-}
-
-.xeno-checkbox[data-selection='on'] .xeno-checkbox-box,
-.xeno-checkbox[data-selection='mixed'] .xeno-checkbox-box {
-  background: var(--xeno-text);
-  border-color: var(--xeno-text);
-}
-
-/* ── Ticking ──────────────────────────────────────────────────────────────────────────
- * The tick DRAWS itself, heel to tip. Nothing new is authored here: `xeno.check` already carries that
- * animation in `icon-motion.css`, where it plays on hover — the glyph's own rule sets `--part-anim`,
- * `--part-dur` and the `stroke-dasharray` it needs. All this does is play the SAME animation on the
- * event that actually matters for a checkbox, which is the tick appearing.
- *
- * Reading it through `var(--part-anim)` rather than naming the keyframe keeps the two loosely coupled:
- * redraw the check glyph's animation and the checkbox follows it, with no edit here.
- *
- * The 900ms the gallery uses is a showcase pace; a control that answers a click wants ~a third of that.
- *
- * Everything is gated on `data-motion="ready"`, which the component sets only after `checked` has
- * genuinely changed — otherwise a form rendered with ticked boxes draws all of them on load. */
-.xeno-checkbox[data-motion='ready'][data-selection='on'] .xeno-part[data-part='0'] {
-  --part-dur: 340ms;
-  animation: var(--part-anim) var(--part-dur) var(--xeno-icon-ease);
-}
-/* The box answers with it: a quick compress and overshoot, so the fill lands with the tick instead of
-   snapping into place a beat ahead of it. */
-.xeno-checkbox[data-motion='ready'][data-selection='on'] .xeno-checkbox-box,
-.xeno-checkbox[data-motion='ready'][data-selection='mixed'] .xeno-checkbox-box {
-  animation: xeno-checkbox-stamp 280ms var(--xeno-ease-overshoot, cubic-bezier(0.34, 1.4, 0.5, 1));
-}
-@keyframes xeno-checkbox-stamp {
-  0% { scale: 0.86; }
-  60% { scale: 1.06; }
-  100% { scale: 1; }
-}
-/* Indeterminate has no stroke to draw — the bar just arrives, widening from the middle. */
-.xeno-checkbox[data-motion='ready'][data-selection='mixed'] .xeno-part[data-part='0'] {
-  animation: xeno-checkbox-dash 240ms var(--xeno-ease, cubic-bezier(0.22, 1, 0.36, 1));
-}
-@keyframes xeno-checkbox-dash {
-  0% { scale: 0 1; opacity: 0; }
-  100% { scale: 1 1; opacity: 1; }
-}
-
-.xeno-checkbox-label {
-  color: var(--xeno-text);
-}
-
-.xeno-checkbox:focus-visible {
-  outline: none;
-}
-.xeno-checkbox:focus-visible .xeno-checkbox-box {
-  box-shadow:
-    0 0 0 2px var(--xeno-canvas),
-    0 0 0 4px var(--xeno-border);
-}
-
-.xeno-checkbox:disabled,
-.xeno-checkbox[data-availability='disabled'] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-checkbox-box {
-    transition: none;
-  }
-  /* The tick is still there — it just does not draw itself in. */
-  .xeno-checkbox-box,
-  .xeno-checkbox .xeno-part {
-    animation: none !important;
-  }
-}
+/*
+ * `<Checkbox>` — rounded-SQUARE box + optional label. CSS-first: paint is keyed off `data-selection`
+ * (off|on|mixed) and `data-availability`. Monochrome shell — only theme tokens, no literal colours.
+ */
+.xeno-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--xeno-text);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.xeno-checkbox-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 17px;
+  height: 17px;
+  /* The stamped glyph inherits this via currentColor; only visible once the box is filled. */
+  color: var(--xeno-on-accent);
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+  transition:
+    background var(--xeno-dur) var(--xeno-ease),
+    border-color var(--xeno-dur) var(--xeno-ease);
+}
+
+.xeno-checkbox:hover:not(:disabled) .xeno-checkbox-box {
+  border-color: var(--xeno-muted);
+}
+
+.xeno-checkbox[data-selection='on'] .xeno-checkbox-box,
+.xeno-checkbox[data-selection='mixed'] .xeno-checkbox-box {
+  background: var(--xeno-text);
+  border-color: var(--xeno-text);
+}
+
+/* ── Ticking ──────────────────────────────────────────────────────────────────────────
+ * The tick DRAWS itself, heel to tip. Nothing new is authored here: `xeno.check` already carries that
+ * animation in `icon-motion.css`, where it plays on hover — the glyph's own rule sets `--part-anim`,
+ * `--part-dur` and the `stroke-dasharray` it needs. All this does is play the SAME animation on the
+ * event that actually matters for a checkbox, which is the tick appearing.
+ *
+ * Reading it through `var(--part-anim)` rather than naming the keyframe keeps the two loosely coupled:
+ * redraw the check glyph's animation and the checkbox follows it, with no edit here.
+ *
+ * The 900ms the gallery uses is a showcase pace; a control that answers a click wants ~a third of that.
+ *
+ * Everything is gated on `data-motion="ready"`, which the component sets only after `checked` has
+ * genuinely changed — otherwise a form rendered with ticked boxes draws all of them on load. */
+.xeno-checkbox[data-motion='ready'][data-selection='on'] .xeno-part[data-part='0'] {
+  --part-dur: 340ms;
+  animation: var(--part-anim) var(--part-dur) var(--xeno-icon-ease);
+}
+/* The box answers with it: a quick compress and overshoot, so the fill lands with the tick instead of
+   snapping into place a beat ahead of it. */
+.xeno-checkbox[data-motion='ready'][data-selection='on'] .xeno-checkbox-box,
+.xeno-checkbox[data-motion='ready'][data-selection='mixed'] .xeno-checkbox-box {
+  animation: xeno-checkbox-stamp 280ms var(--xeno-ease-overshoot, cubic-bezier(0.34, 1.4, 0.5, 1));
+}
+@keyframes xeno-checkbox-stamp {
+  0% { scale: 0.86; }
+  60% { scale: 1.06; }
+  100% { scale: 1; }
+}
+/* Indeterminate has no stroke to draw — the bar just arrives, widening from the middle. */
+.xeno-checkbox[data-motion='ready'][data-selection='mixed'] .xeno-part[data-part='0'] {
+  animation: xeno-checkbox-dash 240ms var(--xeno-ease, cubic-bezier(0.22, 1, 0.36, 1));
+}
+@keyframes xeno-checkbox-dash {
+  0% { scale: 0 1; opacity: 0; }
+  100% { scale: 1 1; opacity: 1; }
+}
+
+.xeno-checkbox-label {
+  color: var(--xeno-text);
+}
+
+.xeno-checkbox:focus-visible {
+  outline: none;
+}
+.xeno-checkbox:focus-visible .xeno-checkbox-box {
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-checkbox:disabled,
+.xeno-checkbox[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-checkbox-box {
+    transition: none;
+  }
+  /* The tick is still there — it just does not draw itself in. */
+  .xeno-checkbox-box,
+  .xeno-checkbox .xeno-part {
+    animation: none !important;
+  }
+}

package/src/forms/RadioGroup.css

@@ -1,115 +1,115 @@
-/*
- * `<RadioGroup>` / `<RadioRow>` — SQUARE markers (radius-xs) with a smaller inner square, never circles.
- * CSS-first: paint is keyed off `data-selection` (off|on) and `data-availability`; layout off
- * `data-orientation`. Monochrome shell — only theme tokens, no literal colours.
- */
-.xeno-radiogroup {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.xeno-radiogroup[data-orientation='horizontal'] {
-  flex-direction: row;
-  gap: 12px;
-}
-
-.xeno-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  margin: 0;
-  padding: 6px 8px;
-  background: transparent;
-  border: 1px solid transparent;
-  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) var(--xeno-ease);
-}
-.xeno-radio:hover:not(:disabled) {
-  background: var(--xeno-hover);
-}
-
-.xeno-radio-marker {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  background: var(--xeno-canvas);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-xs);
-  transition: border-color var(--xeno-dur) var(--xeno-ease);
-}
-.xeno-radio:hover:not(:disabled) .xeno-radio-marker {
-  border-color: var(--xeno-muted);
-}
-.xeno-radio[data-selection='on'] .xeno-radio-marker {
-  border-color: var(--xeno-text);
-}
-
-/* The mark is a SQUARE, and at 8px it has to be drawn like one. It carried `--xeno-radius-xs` (3px),
-   which is 37% of its own width — enough rounding that at this size it reads as a dot rather than as a
-   square. `--xeno-radius-hair` puts it at 19%, in the same family as the switch knob's 21%. */
-.xeno-radio-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--xeno-text);
-  border-radius: var(--xeno-radius-hair, 1.5px);
-  scale: 0;
-  opacity: 0;
-  transition:
-    scale var(--xeno-dur) var(--xeno-ease),
-    opacity var(--xeno-dur) var(--xeno-ease);
-}
-.xeno-radio[data-selection='on'] .xeno-radio-dot {
-  scale: 1;
-  opacity: 1;
-}
-/* Choosing STAMPS: the square overshoots and settles, so the choice lands rather than fades in. Only on
-   the way in — letting go is quiet, and the transition above still handles it.
-   Armed at the group, which is safe HERE and would not be on a multi-select: exactly one radio can be
-   on, so the only one whose rule starts matching when the group arms is the one that just changed. */
-.xeno-radiogroup[data-motion='ready'] .xeno-radio[data-selection='on'] .xeno-radio-dot {
-  animation: xeno-radio-stamp 260ms var(--xeno-ease-overshoot, cubic-bezier(0.34, 1.4, 0.5, 1));
-}
-@keyframes xeno-radio-stamp {
-  0% { scale: 0; opacity: 0; }
-  45% { scale: 1.22; opacity: 1; }
-  100% { scale: 1; opacity: 1; }
-}
-
-.xeno-radio-label {
-  color: var(--xeno-text);
-}
-
-.xeno-radio:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--xeno-canvas),
-    0 0 0 4px var(--xeno-border);
-}
-
-.xeno-radio:disabled,
-.xeno-radio[data-availability='disabled'] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-radio,
-  .xeno-radio-marker,
-  .xeno-radio-dot {
-    transition: none;
-  }
-  /* The mark still appears — it just does not stamp. */
-  .xeno-radio-dot {
-    animation: none !important;
-  }
-}
+/*
+ * `<RadioGroup>` / `<RadioRow>` — SQUARE markers (radius-xs) with a smaller inner square, never circles.
+ * CSS-first: paint is keyed off `data-selection` (off|on) and `data-availability`; layout off
+ * `data-orientation`. Monochrome shell — only theme tokens, no literal colours.
+ */
+.xeno-radiogroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.xeno-radiogroup[data-orientation='horizontal'] {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.xeno-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0;
+  padding: 6px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  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) var(--xeno-ease);
+}
+.xeno-radio:hover:not(:disabled) {
+  background: var(--xeno-hover);
+}
+
+.xeno-radio-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-xs);
+  transition: border-color var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-radio:hover:not(:disabled) .xeno-radio-marker {
+  border-color: var(--xeno-muted);
+}
+.xeno-radio[data-selection='on'] .xeno-radio-marker {
+  border-color: var(--xeno-text);
+}
+
+/* The mark is a SQUARE, and at 8px it has to be drawn like one. It carried `--xeno-radius-xs` (3px),
+   which is 37% of its own width — enough rounding that at this size it reads as a dot rather than as a
+   square. `--xeno-radius-hair` puts it at 19%, in the same family as the switch knob's 21%. */
+.xeno-radio-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair, 1.5px);
+  scale: 0;
+  opacity: 0;
+  transition:
+    scale var(--xeno-dur) var(--xeno-ease),
+    opacity var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-radio[data-selection='on'] .xeno-radio-dot {
+  scale: 1;
+  opacity: 1;
+}
+/* Choosing STAMPS: the square overshoots and settles, so the choice lands rather than fades in. Only on
+   the way in — letting go is quiet, and the transition above still handles it.
+   Armed at the group, which is safe HERE and would not be on a multi-select: exactly one radio can be
+   on, so the only one whose rule starts matching when the group arms is the one that just changed. */
+.xeno-radiogroup[data-motion='ready'] .xeno-radio[data-selection='on'] .xeno-radio-dot {
+  animation: xeno-radio-stamp 260ms var(--xeno-ease-overshoot, cubic-bezier(0.34, 1.4, 0.5, 1));
+}
+@keyframes xeno-radio-stamp {
+  0% { scale: 0; opacity: 0; }
+  45% { scale: 1.22; opacity: 1; }
+  100% { scale: 1; opacity: 1; }
+}
+
+.xeno-radio-label {
+  color: var(--xeno-text);
+}
+
+.xeno-radio:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-radio:disabled,
+.xeno-radio[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-radio,
+  .xeno-radio-marker,
+  .xeno-radio-dot {
+    transition: none;
+  }
+  /* The mark still appears — it just does not stamp. */
+  .xeno-radio-dot {
+    animation: none !important;
+  }
+}