@xenosystem/elements-react 0.0.4 → 0.0.5

package/src/containers/table.css

@@ -1,102 +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);
-  }
-}
+/*
+ * 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

@@ -1,17 +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);
-}
+/*
+ * 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

@@ -1,77 +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;
-  }
-}
+/*
+ * <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

@@ -1,30 +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;
-  }
-}
+/*
+ * <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;
+  }
+}