@xenosystem/elements-react 0.0.3 → 0.0.5

package/src/overlays/modal.css

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

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