@xenosystem/elements-react 0.0.1 → 0.0.2

package/src/overlays/pill-filter.css

@@ -1,129 +1,129 @@
-/*
- * <PillFilter> — a wrapping row of small toggle pills (rounded squares) for multi-select. CSS-first:
- * each pill carries `data-selection` (on/off) and `data-availability`; a selected pill fills to
- * `var(--xeno-control)` with a `var(--xeno-muted)` hairline. Size metrics arrive as inline vars.
- * Monochrome only.
- */
-
-.xeno-pillfilter {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-/* The "on" fill is a LAYER that floods in from the leading edge, not a background that switches — the
-   same gesture <ToggleButton> makes, because these are the same thing: a button that stays pressed.
-   Clipped, never scaled, so the pill itself never changes size. */
-.xeno-pill {
-  --xeno-pill-goo-dur: 300ms;
-  --xeno-pill-goo-ease: var(--xeno-ease, cubic-bezier(0.22, 1, 0.36, 1));
-  position: relative;
-  isolation: isolate;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: var(--xeno-h, 28px);
-  padding: 0 var(--xeno-padx, 10px);
-  font-family: inherit;
-  font-size: var(--xeno-font, 13px);
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  color: var(--xeno-muted);
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-md);
-  cursor: pointer;
-  user-select: none;
-  transition:
-    color var(--xeno-dur) var(--xeno-ease),
-    background var(--xeno-dur) var(--xeno-ease),
-    border-color var(--xeno-dur) var(--xeno-ease);
-}
-
-.xeno-pill::before {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  /* -1px so the layer reaches under the border, exactly where a background would have painted. */
-  inset: -1px;
-  border-radius: inherit;
-  background: var(--xeno-control);
-  clip-path: circle(0% at var(--xeno-padx, 10px) 50%);
-}
-
-/* Hover reads in BOTH states: the fill covers any background tint once the pill is on, so the border
-   carries the affordance — it is visible either way. (It also settles an ordering bug: the hover rule
-   out-specified the selected rule, so hovering a selected pill used to swap `--xeno-control` for a
-   translucent tint and the pill appeared to un-fill.) */
-.xeno-pill:hover:not([data-availability='disabled']) {
-  color: var(--xeno-text);
-  background: var(--xeno-hover);
-  border-color: var(--xeno-muted);
-}
-
-.xeno-pill[data-selection='on'] {
-  color: var(--xeno-text);
-  border-color: var(--xeno-muted);
-}
-.xeno-pill[data-selection='on']::before {
-  clip-path: circle(150% at var(--xeno-padx, 10px) 50%);
-}
-/* Gated per pill on `data-motion="ready"`, set only once that pill's own selection has changed. */
-.xeno-pill[data-motion='ready'][data-selection='on']::before {
-  animation: xeno-pill-goo-in var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
-}
-.xeno-pill[data-motion='ready'][data-selection='off']::before {
-  animation: xeno-pill-goo-out var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
-}
-@keyframes xeno-pill-goo-in {
-  from { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
-  to { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
-}
-@keyframes xeno-pill-goo-out {
-  from { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
-  to { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
-}
-
-.xeno-pill:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--xeno-canvas),
-    0 0 0 4px var(--xeno-border);
-}
-
-.xeno-pill[data-availability='disabled'] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Count badge — a small inset rounded square, never a circle. */
-.xeno-pill-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--xeno-muted);
-  background: var(--xeno-control);
-  border-radius: var(--xeno-radius-xs);
-}
-
-.xeno-pill[data-selection='on'] .xeno-pill-count {
-  color: var(--xeno-text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-pill {
-    transition: none;
-  }
-  /* The fill still marks the pill — it just arrives instead of pouring. */
-  .xeno-pill::before {
-    animation: none !important;
-  }
-}
+/*
+ * <PillFilter> — a wrapping row of small toggle pills (rounded squares) for multi-select. CSS-first:
+ * each pill carries `data-selection` (on/off) and `data-availability`; a selected pill fills to
+ * `var(--xeno-control)` with a `var(--xeno-muted)` hairline. Size metrics arrive as inline vars.
+ * Monochrome only.
+ */
+
+.xeno-pillfilter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The "on" fill is a LAYER that floods in from the leading edge, not a background that switches — the
+   same gesture <ToggleButton> makes, because these are the same thing: a button that stays pressed.
+   Clipped, never scaled, so the pill itself never changes size. */
+.xeno-pill {
+  --xeno-pill-goo-dur: 300ms;
+  --xeno-pill-goo-ease: var(--xeno-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--xeno-h, 28px);
+  padding: 0 var(--xeno-padx, 10px);
+  font-family: inherit;
+  font-size: var(--xeno-font, 13px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color var(--xeno-dur) var(--xeno-ease),
+    background var(--xeno-dur) var(--xeno-ease),
+    border-color var(--xeno-dur) var(--xeno-ease);
+}
+
+.xeno-pill::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  /* -1px so the layer reaches under the border, exactly where a background would have painted. */
+  inset: -1px;
+  border-radius: inherit;
+  background: var(--xeno-control);
+  clip-path: circle(0% at var(--xeno-padx, 10px) 50%);
+}
+
+/* Hover reads in BOTH states: the fill covers any background tint once the pill is on, so the border
+   carries the affordance — it is visible either way. (It also settles an ordering bug: the hover rule
+   out-specified the selected rule, so hovering a selected pill used to swap `--xeno-control` for a
+   translucent tint and the pill appeared to un-fill.) */
+.xeno-pill:hover:not([data-availability='disabled']) {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+  border-color: var(--xeno-muted);
+}
+
+.xeno-pill[data-selection='on'] {
+  color: var(--xeno-text);
+  border-color: var(--xeno-muted);
+}
+.xeno-pill[data-selection='on']::before {
+  clip-path: circle(150% at var(--xeno-padx, 10px) 50%);
+}
+/* Gated per pill on `data-motion="ready"`, set only once that pill's own selection has changed. */
+.xeno-pill[data-motion='ready'][data-selection='on']::before {
+  animation: xeno-pill-goo-in var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
+}
+.xeno-pill[data-motion='ready'][data-selection='off']::before {
+  animation: xeno-pill-goo-out var(--xeno-pill-goo-dur) var(--xeno-pill-goo-ease);
+}
+@keyframes xeno-pill-goo-in {
+  from { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
+  to { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
+}
+@keyframes xeno-pill-goo-out {
+  from { clip-path: circle(150% at var(--xeno-padx, 10px) 50%); }
+  to { clip-path: circle(0% at var(--xeno-padx, 10px) 50%); }
+}
+
+.xeno-pill:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-pill[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Count badge — a small inset rounded square, never a circle. */
+.xeno-pill-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--xeno-muted);
+  background: var(--xeno-control);
+  border-radius: var(--xeno-radius-xs);
+}
+
+.xeno-pill[data-selection='on'] .xeno-pill-count {
+  color: var(--xeno-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-pill {
+    transition: none;
+  }
+  /* The fill still marks the pill — it just arrives instead of pouring. */
+  .xeno-pill::before {
+    animation: none !important;
+  }
+}

package/src/overlays/reveal.css

@@ -1,56 +1,56 @@
-/*
- * Reveal — an in-flow animated disclosure. The region's height (inline, animated) pushes following
- * content DOWN so the panel never floats over the page; the clip is panel-WIDTH so a wide child shows
- * full width and only unfolds VERTICALLY; the content fades up a beat after. Tokens only, motion is
- * transform/opacity/height behind the reduce guard.
- */
-
-.xeno-reveal {
-  position: relative;
-  height: 0;
-  margin-top: 7px;
-  transition: height 240ms var(--xeno-ease);
-}
-
-/* Absolute + panel-width (max-content), so a wide calendar shows FULL width (never cut on the side);
-   as tall as the region (height:100%), so the reveal only clips VERTICALLY. `data-clip=false` lifts it
-   once open so edge focus rings are not cut. */
-.xeno-reveal-clip {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: max-content;
-  height: 100%;
-  overflow: hidden;
-  z-index: 50;
-}
-.xeno-reveal-clip[data-align='end'] {
-  left: auto;
-  right: 0;
-}
-.xeno-reveal-clip[data-clip='false'] {
-  overflow: visible;
-}
-
-.xeno-reveal-content {
-  opacity: 0;
-  transform: translateY(8px);
-  transition:
-    opacity 200ms ease-out 40ms,
-    transform 200ms ease-out 40ms;
-}
-.xeno-reveal[data-open='true'] .xeno-reveal-content {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-reveal,
-  .xeno-reveal-content {
-    transition: none;
-  }
-  .xeno-reveal-content {
-    opacity: 1;
-    transform: none;
-  }
-}
+/*
+ * Reveal — an in-flow animated disclosure. The region's height (inline, animated) pushes following
+ * content DOWN so the panel never floats over the page; the clip is panel-WIDTH so a wide child shows
+ * full width and only unfolds VERTICALLY; the content fades up a beat after. Tokens only, motion is
+ * transform/opacity/height behind the reduce guard.
+ */
+
+.xeno-reveal {
+  position: relative;
+  height: 0;
+  margin-top: 7px;
+  transition: height 240ms var(--xeno-ease);
+}
+
+/* Absolute + panel-width (max-content), so a wide calendar shows FULL width (never cut on the side);
+   as tall as the region (height:100%), so the reveal only clips VERTICALLY. `data-clip=false` lifts it
+   once open so edge focus rings are not cut. */
+.xeno-reveal-clip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  height: 100%;
+  overflow: hidden;
+  z-index: 50;
+}
+.xeno-reveal-clip[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+.xeno-reveal-clip[data-clip='false'] {
+  overflow: visible;
+}
+
+.xeno-reveal-content {
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity 200ms ease-out 40ms,
+    transform 200ms ease-out 40ms;
+}
+.xeno-reveal[data-open='true'] .xeno-reveal-content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-reveal,
+  .xeno-reveal-content {
+    transition: none;
+  }
+  .xeno-reveal-content {
+    opacity: 1;
+    transform: none;
+  }
+}