@xenosystem/elements-react 0.0.3 → 0.0.5

package/src/containers/card.css

@@ -1,75 +1,75 @@
-/*
- * Card — the base surface box. Monochrome shell: background + hairline border + card radius; depth on the
- * `elevated` variant is the darker `--xeno-elevated` token plus one soft (hue-free) shadow. The hover-lift
- * is opt-in via `data-interactive` and its transform lives behind `prefers-reduced-motion` — the border
- * brighten still applies when motion is reduced. Only theme tokens; no literal colours (shadow excepted).
- */
-.xeno-card {
-  display: flex;
-  flex-direction: column;
-  padding: var(--xeno-chrome-card-pad);
-  background: var(--xeno-chrome-card-bg);
-  border: var(--xeno-chrome-card-border);
-  border-radius: var(--xeno-chrome-card-radius);
-  color: var(--xeno-text);
-}
-
-.xeno-card[data-variant='elevated'] {
-  background: var(--xeno-chrome-card-elevated-bg);
-  box-shadow: var(--xeno-chrome-card-shadow);
-}
-
-/* Body — the default slot. min-width:0 keeps flex-row children from overflowing the card. */
-.xeno-card-body {
-  min-width: 0;
-}
-
-/* Header — a titled slot split from the body by an inset hairline. */
-.xeno-card-header {
-  margin-bottom: 11px;
-  padding-bottom: 11px;
-  border-bottom: var(--xeno-chrome-divider);
-  color: var(--xeno-text);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-/* Footer — a trailing slot, mirror of the header, quieter text. */
-.xeno-card-footer {
-  margin-top: 11px;
-  padding-top: 11px;
-  border-top: var(--xeno-chrome-divider);
-  color: var(--xeno-muted);
-  font-size: 13px;
-  line-height: 1.3;
-}
-
-/* Interactive — the sole hover-lift XENO allows. Border brighten is safe without motion. */
-.xeno-card[data-interactive='true'] {
-  cursor: pointer;
-}
-.xeno-card[data-interactive='true']:hover {
-  border-color: var(--xeno-muted);
-}
-
-/* Strong lift — the artifact-card affordance: a bigger rise + one soft, hue-free shadow. The shadow is
-   safe without motion, so it sits outside the reduced-motion guard; only the transform is gated. */
-.xeno-card[data-interactive='true'][data-lift='strong']:hover {
-  box-shadow: var(--xeno-chrome-card-lift);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .xeno-card[data-interactive='true'] {
-    transition:
-      transform var(--xeno-dur) var(--xeno-ease),
-      border-color var(--xeno-dur) ease,
-      box-shadow var(--xeno-dur) ease;
-  }
-  .xeno-card[data-interactive='true']:hover {
-    transform: translateY(-1px);
-  }
-  .xeno-card[data-interactive='true'][data-lift='strong']:hover {
-    transform: translateY(-3px);
-  }
-}
+/*
+ * Card — the base surface box. Monochrome shell: background + hairline border + card radius; depth on the
+ * `elevated` variant is the darker `--xeno-elevated` token plus one soft (hue-free) shadow. The hover-lift
+ * is opt-in via `data-interactive` and its transform lives behind `prefers-reduced-motion` — the border
+ * brighten still applies when motion is reduced. Only theme tokens; no literal colours (shadow excepted).
+ */
+.xeno-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--xeno-chrome-card-pad);
+  background: var(--xeno-chrome-card-bg);
+  border: var(--xeno-chrome-card-border);
+  border-radius: var(--xeno-chrome-card-radius);
+  color: var(--xeno-text);
+}
+
+.xeno-card[data-variant='elevated'] {
+  background: var(--xeno-chrome-card-elevated-bg);
+  box-shadow: var(--xeno-chrome-card-shadow);
+}
+
+/* Body — the default slot. min-width:0 keeps flex-row children from overflowing the card. */
+.xeno-card-body {
+  min-width: 0;
+}
+
+/* Header — a titled slot split from the body by an inset hairline. */
+.xeno-card-header {
+  margin-bottom: 11px;
+  padding-bottom: 11px;
+  border-bottom: var(--xeno-chrome-divider);
+  color: var(--xeno-text);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+/* Footer — a trailing slot, mirror of the header, quieter text. */
+.xeno-card-footer {
+  margin-top: 11px;
+  padding-top: 11px;
+  border-top: var(--xeno-chrome-divider);
+  color: var(--xeno-muted-text);
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+/* Interactive — the sole hover-lift XENO allows. Border brighten is safe without motion. */
+.xeno-card[data-interactive='true'] {
+  cursor: pointer;
+}
+.xeno-card[data-interactive='true']:hover {
+  border-color: var(--xeno-muted);
+}
+
+/* Strong lift — the artifact-card affordance: a bigger rise + one soft, hue-free shadow. The shadow is
+   safe without motion, so it sits outside the reduced-motion guard; only the transform is gated. */
+.xeno-card[data-interactive='true'][data-lift='strong']:hover {
+  box-shadow: var(--xeno-chrome-card-lift);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-card[data-interactive='true'] {
+    transition:
+      transform var(--xeno-dur) var(--xeno-ease),
+      border-color var(--xeno-dur) ease,
+      box-shadow var(--xeno-dur) ease;
+  }
+  .xeno-card[data-interactive='true']:hover {
+    transform: translateY(-1px);
+  }
+  .xeno-card[data-interactive='true'][data-lift='strong']:hover {
+    transform: translateY(-3px);
+  }
+}

package/src/containers/chip.css

@@ -1,103 +1,103 @@
-/*
- * Chip — a small selectable/removable token. SQUARE (radius-control), 1px hairline border, monochrome
- * shell. State is driven by `data-*` on the root; size metrics arrive as inline `--xeno-h/-padx/-gap/
- * -font` vars set from the size tokens, so a size can never drift from the data. No literal colours.
- */
-.xeno-chip {
-  display: inline-flex;
-  align-items: center;
-  height: var(--xeno-h, 32px);
-  max-width: 100%;
-  color: var(--xeno-text);
-  background: transparent;
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-control);
-  font-family: inherit;
-  font-size: var(--xeno-font, 14px);
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  user-select: none;
-  overflow: hidden; /* clips inner hover fills to the rounded corners */
-}
-.xeno-chip[data-selection='on'] {
-  background: var(--xeno-control);
-}
-.xeno-chip[data-availability='disabled'] {
-  opacity: 0.4;
-}
-
-/* Body — the label region: a plain span, or a toggle <button> when selectable. */
-.xeno-chip-body {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--xeno-gap, 6px);
-  height: 100%;
-  min-width: 0;
-  padding: 0 var(--xeno-padx, 12px);
-  color: inherit;
-  background: transparent;
-  border: none;
-  font: inherit;
-  line-height: 1;
-}
-.xeno-chip[data-removable='true'] .xeno-chip-body {
-  padding-right: var(--xeno-gap, 6px);
-}
-.xeno-chip-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Selectable body toggles the selection axis (aria-pressed); hover/press are CSS, not attributes. */
-.xeno-chip-select {
-  cursor: pointer;
-  transition:
-    background var(--xeno-dur) ease,
-    color var(--xeno-dur) ease;
-}
-.xeno-chip-select:hover:not(:disabled) {
-  background: var(--xeno-hover);
-}
-.xeno-chip-select:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--xeno-border);
-}
-.xeno-chip-select:disabled {
-  cursor: not-allowed;
-}
-
-/* Remove — a bare 'x' button; muted ink that resolves to text on hover. */
-.xeno-chip-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0 6px;
-  color: var(--xeno-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition:
-    background var(--xeno-dur) ease,
-    color var(--xeno-dur) ease;
-}
-.xeno-chip-remove:hover:not(:disabled) {
-  color: var(--xeno-text);
-  background: var(--xeno-hover);
-}
-.xeno-chip-remove:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--xeno-border);
-}
-.xeno-chip-remove:disabled {
-  cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-chip-select,
-  .xeno-chip-remove {
-    transition: none;
-  }
-}
+/*
+ * Chip — a small selectable/removable token. SQUARE (radius-control), 1px hairline border, monochrome
+ * shell. State is driven by `data-*` on the root; size metrics arrive as inline `--xeno-h/-padx/-gap/
+ * -font` vars set from the size tokens, so a size can never drift from the data. No literal colours.
+ */
+.xeno-chip {
+  display: inline-flex;
+  align-items: center;
+  height: var(--xeno-h, 32px);
+  max-width: 100%;
+  color: var(--xeno-text);
+  background: transparent;
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-control);
+  font-family: inherit;
+  font-size: var(--xeno-font, 14px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  overflow: hidden; /* clips inner hover fills to the rounded corners */
+}
+.xeno-chip[data-selection='on'] {
+  background: var(--xeno-control);
+}
+.xeno-chip[data-availability='disabled'] {
+  opacity: 0.4;
+}
+
+/* Body — the label region: a plain span, or a toggle <button> when selectable. */
+.xeno-chip-body {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xeno-gap, 6px);
+  height: 100%;
+  min-width: 0;
+  padding: 0 var(--xeno-padx, 12px);
+  color: inherit;
+  background: transparent;
+  border: none;
+  font: inherit;
+  line-height: 1;
+}
+.xeno-chip[data-removable='true'] .xeno-chip-body {
+  padding-right: var(--xeno-gap, 6px);
+}
+.xeno-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Selectable body toggles the selection axis (aria-pressed); hover/press are CSS, not attributes. */
+.xeno-chip-select {
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-chip-select:hover:not(:disabled) {
+  background: var(--xeno-hover);
+}
+.xeno-chip-select:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-chip-select:disabled {
+  cursor: not-allowed;
+}
+
+/* Remove — a bare 'x' button; muted ink that resolves to text on hover. */
+.xeno-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 6px;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-chip-remove:hover:not(:disabled) {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+}
+.xeno-chip-remove:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-chip-remove:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-chip-select,
+  .xeno-chip-remove {
+    transition: none;
+  }
+}

package/src/containers/list-row.css

@@ -1,132 +1,132 @@
-/*
- * ListRow — a selectable / actionable list row. CSS-first: the `selection` and `availability` axes
- * arrive as `data-*` attributes on the root; interaction (hover / press / focus) is pure CSS. Depth is
- * hairline borders only — monochrome shell, no coloured glow. Only the theme tokens from
- * `xeno-theme.css` are used; no literal colours.
- */
-
-.xeno-list-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  box-sizing: border-box;
-  min-width: 0;
-  margin: 0;
-  padding: 8px 12px;
-  color: var(--xeno-text);
-  text-align: left;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--xeno-radius-md);
-  cursor: default;
-  transition:
-    background var(--xeno-dur) ease,
-    border-color var(--xeno-dur) ease;
-}
-
-/* Reset the native <button> chrome so a button row reads exactly like a div row. */
-button.xeno-list-row {
-  font: inherit;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-/* Interactive rows (a real button, or a div carrying role=button / role=option) invite the pointer. */
-button.xeno-list-row:not(:disabled),
-.xeno-list-row[role='button'],
-.xeno-list-row[role='option'] {
-  cursor: pointer;
-}
-
-/* Hover — only interactive, enabled, unselected rows lift onto --xeno-hover. */
-button.xeno-list-row:not(:disabled):hover,
-.xeno-list-row[role='button']:not([aria-disabled='true']):hover,
-.xeno-list-row[role='option']:not([aria-disabled='true']):hover {
-  background: var(--xeno-hover);
-}
-
-/* Selection wins over hover — a selected row stays on the solid control fill. */
-.xeno-list-row[data-selection='on'],
-button.xeno-list-row[data-selection='on']:not(:disabled):hover,
-.xeno-list-row[role='button'][data-selection='on']:hover,
-.xeno-list-row[role='option'][data-selection='on']:hover {
-  background: var(--xeno-control);
-}
-
-.xeno-list-row:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--xeno-canvas),
-    0 0 0 4px var(--xeno-border);
-}
-
-button.xeno-list-row:active:not(:disabled) {
-  transform: scale(0.995);
-}
-
-.xeno-list-row:disabled,
-.xeno-list-row[data-availability='disabled'] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ── Slots ───────────────────────────────────────────────────────────────────────── */
-
-/* Leading — glyph / avatar. Fixed, never shrinks. Its own children keep their intrinsic colour. */
-.xeno-list-row-leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  color: var(--xeno-muted);
-}
-
-/* Middle — the truncation column. min-width:0 lets the title/subtitle ellipsize inside the flex row. */
-.xeno-list-row-body {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.xeno-list-row-title {
-  overflow: hidden;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.3;
-  color: var(--xeno-text);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.xeno-list-row-subtitle {
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.3;
-  color: var(--xeno-muted);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* Trailing — meta / actions pinned to the end. Fixed, never shrinks. */
-.xeno-list-row-trailing {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--xeno-muted);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-list-row {
-    transition: none;
-  }
-  button.xeno-list-row:active:not(:disabled) {
-    transform: none;
-  }
-}
+/*
+ * ListRow — a selectable / actionable list row. CSS-first: the `selection` and `availability` axes
+ * arrive as `data-*` attributes on the root; interaction (hover / press / focus) is pure CSS. Depth is
+ * hairline borders only — monochrome shell, no coloured glow. Only the theme tokens from
+ * `xeno-theme.css` are used; no literal colours.
+ */
+
+.xeno-list-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--xeno-text);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--xeno-radius-md);
+  cursor: default;
+  transition:
+    background var(--xeno-dur) ease,
+    border-color var(--xeno-dur) ease;
+}
+
+/* Reset the native <button> chrome so a button row reads exactly like a div row. */
+button.xeno-list-row {
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Interactive rows (a real button, or a div carrying role=button / role=option) invite the pointer. */
+button.xeno-list-row:not(:disabled),
+.xeno-list-row[role='button'],
+.xeno-list-row[role='option'] {
+  cursor: pointer;
+}
+
+/* Hover — only interactive, enabled, unselected rows lift onto --xeno-hover. */
+button.xeno-list-row:not(:disabled):hover,
+.xeno-list-row[role='button']:not([aria-disabled='true']):hover,
+.xeno-list-row[role='option']:not([aria-disabled='true']):hover {
+  background: var(--xeno-hover);
+}
+
+/* Selection wins over hover — a selected row stays on the solid control fill. */
+.xeno-list-row[data-selection='on'],
+button.xeno-list-row[data-selection='on']:not(:disabled):hover,
+.xeno-list-row[role='button'][data-selection='on']:hover,
+.xeno-list-row[role='option'][data-selection='on']:hover {
+  background: var(--xeno-control);
+}
+
+.xeno-list-row:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+button.xeno-list-row:active:not(:disabled) {
+  transform: scale(0.995);
+}
+
+.xeno-list-row:disabled,
+.xeno-list-row[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Slots ───────────────────────────────────────────────────────────────────────── */
+
+/* Leading — glyph / avatar. Fixed, never shrinks. Its own children keep their intrinsic colour. */
+.xeno-list-row-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--xeno-muted);
+}
+
+/* Middle — the truncation column. min-width:0 lets the title/subtitle ellipsize inside the flex row. */
+.xeno-list-row-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.xeno-list-row-title {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--xeno-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.xeno-list-row-subtitle {
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--xeno-muted);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Trailing — meta / actions pinned to the end. Fixed, never shrinks. */
+.xeno-list-row-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--xeno-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-list-row {
+    transition: none;
+  }
+  button.xeno-list-row:active:not(:disabled) {
+    transform: none;
+  }
+}