@fluixi-ui/tokens 0.4.0-alpha.1 → 0.4.0-alpha.10

package/dist/css/carousel.css

@@ -0,0 +1,80 @@
+@layer flx.components {
+  /* ----------------------------------------------------------------------------
+   * Carousel
+   * ------------------------------------------------------------------------- */
+  :where([data-carousel]) {
+    position: relative;
+  }
+  :where([data-carousel]:focus-visible) {
+    outline: none;
+    border-radius: var(--flx-ui-radius-md);
+    box-shadow: var(--flx-ui-ctl-ring);
+  }
+  :where([data-carousel-viewport]) {
+    overflow: hidden;
+    /* Let the page scroll along the cross axis; the carousel owns the main axis. */
+    touch-action: pan-y;
+  }
+  :where([data-carousel-viewport][data-orientation='vertical']) {
+    touch-action: pan-x;
+  }
+  :where([data-carousel-track]) {
+    display: flex;
+    transition: transform var(--flx-ui-duration-normal, 250ms) var(--flx-ui-ease-standard, ease);
+  }
+  /* Follow the pointer 1:1 while dragging — no animated lag. */
+  :where([data-carousel-track][data-dragging]) {
+    transition: none;
+    user-select: none;
+  }
+  :where([data-carousel-track][data-orientation='vertical']) {
+    flex-direction: column;
+    height: 100%;
+  }
+  /* One slide per view; the track translates by whole viewports. */
+  :where([data-carousel-slide]) {
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+
+  :where([data-carousel-dots]) {
+    display: flex;
+    justify-content: center;
+    gap: var(--flx-ui-space-2);
+    margin-top: var(--flx-ui-space-3);
+  }
+  :where([data-carousel-dot]) {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--flx-ui-radius-full, 999px);
+    background: var(--flx-ui-color-border-strong);
+    cursor: pointer;
+    transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  :where([data-carousel-dot]:hover) {
+    background: var(--flx-ui-color-fg-subtle);
+  }
+  :where([data-carousel-dot][data-active]) {
+    background: var(--flx-ui-color-primary);
+  }
+  :where([data-carousel-dot]:focus-visible) {
+    outline: none;
+    box-shadow: var(--flx-ui-ctl-ring);
+  }
+
+  :where([data-carousel-prev], [data-carousel-next]) {
+    cursor: pointer;
+  }
+  :where([data-carousel-prev][disabled], [data-carousel-next][disabled]) {
+    opacity: var(--flx-ui-opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-carousel-track]) {
+    transition: none;
+  }
+}

package/dist/css/checkbox-radio.css

@@ -23,6 +23,9 @@
   background: var(--flx-ui-color-primary);
   border-color: var(--flx-ui-color-primary);
 }
+:where([role='checkbox']:active:not([data-disabled])) {
+  transform: scale(0.92);
+}
 :where([role='checkbox'][data-state='checked'])::after {
   content: '';
   width: 5px;
@@ -31,6 +34,8 @@
   border: solid currentColor;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
+  transform-origin: center;
+  animation: flx-ui-check-pop var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
 }
 :where([role='checkbox'][data-state='indeterminate'])::after {
   content: '';
@@ -38,6 +43,7 @@
   height: 2px;
   background: currentColor;
   border-radius: 1px;
+  animation: flx-ui-scale-pop var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
 }
 
 :where([role='radio']) {
@@ -50,7 +56,12 @@
   border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
   border-radius: var(--flx-ui-radius-full);
   background: var(--flx-ui-color-bg);
-  transition: border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-width var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([role='radio']:active:not([data-disabled])) {
+  transform: scale(0.92);
 }
 :where([role='radio'][data-state='checked']) {
   border-color: var(--flx-ui-color-primary);
@@ -62,5 +73,48 @@
   inset: 3px;
   border-radius: var(--flx-ui-radius-full);
   background: var(--flx-ui-color-primary);
+  animation: flx-ui-scale-pop var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+}
+
+:where([role='checkbox']:hover:not([data-disabled])),
+:where([role='radio']:hover:not([data-disabled])) {
+  border-color: var(--flx-ui-color-primary);
+}
+:where([role='checkbox']:focus-visible),
+:where([role='radio']:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([role='checkbox'][data-disabled]),
+:where([role='radio'][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
+
+@keyframes flx-ui-check-pop {
+  from {
+    transform: rotate(45deg) scale(0.3);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(45deg) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes flx-ui-scale-pop {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([role='checkbox'][data-state]::after),
+  :where([role='radio'][data-state='checked'])::after {
+    animation: none;
+  }
 }
 }

package/dist/css/date-field.css

@@ -11,7 +11,7 @@
   font-size: var(--flx-ui-font-size-sm);
   font-weight: var(--flx-ui-font-weight-medium);
   color: var(--flx-ui-color-fg);
-  line-height: var(--flx-ui-leading-none);
+  line-height: var(--flx-ui-line-height-none);
 }
 :where([data-date-field-input]) {
   display: inline-flex;

package/dist/css/date-picker.css

@@ -11,7 +11,7 @@
   font-size: var(--flx-ui-font-size-sm);
   font-weight: var(--flx-ui-font-weight-medium);
   color: var(--flx-ui-color-fg);
-  line-height: var(--flx-ui-leading-none);
+  line-height: var(--flx-ui-line-height-none);
 }
 /* The control box owns the border; the embedded field input goes borderless. */
 :where([data-date-picker-control]) {
@@ -71,7 +71,7 @@
   border-radius: var(--flx-ui-radius-lg);
   background: var(--flx-ui-color-bg);
   box-shadow: var(--flx-ui-shadow-lg, 0 10px 30px rgba(17, 24, 39, 0.12));
-  animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 @media (prefers-reduced-motion: reduce) {
   :where([data-date-picker-content]) {

package/dist/css/descriptions.css

@@ -0,0 +1,29 @@
+@layer flx.components {
+/* Descriptions (from @fluixi-ui/descriptions). A key/value grid; `columns` drives
+   the track count and an item's `span` stretches it. */
+:where([data-descriptions]) {
+  display: grid;
+  grid-template-columns: repeat(var(--flx-descriptions-columns, 1), minmax(0, 1fr));
+  gap: var(--flx-ui-space-4) var(--flx-ui-space-6);
+  margin: 0;
+}
+:where([data-descriptions-item]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+  min-width: 0;
+}
+:where([data-descriptions-term]) {
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg-subtle);
+  letter-spacing: var(--flx-ui-letter-spacing-wide);
+}
+:where([data-descriptions-detail]) {
+  margin: 0;
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+}

package/dist/css/drawer.css

@@ -70,14 +70,14 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--flx-ui-space-3);
-  padding: var(--flx-ui-space-5);
+  padding: var(--flx-ui-space-4);
   border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
 }
 :where([data-drawer-title]) {
   margin: 0;
   font-size: var(--flx-ui-font-size-lg);
   font-weight: var(--flx-ui-font-weight-semibold);
-  line-height: var(--flx-ui-leading-tight);
+  line-height: var(--flx-ui-line-height-tight);
   color: var(--flx-ui-color-fg);
 }
 :where([data-drawer-description]) {
@@ -89,14 +89,14 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: var(--flx-ui-space-5);
+  padding: var(--flx-ui-space-4);
 }
 :where([data-drawer-footer]) {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--flx-ui-space-2);
-  padding: var(--flx-ui-space-5);
+  padding: var(--flx-ui-space-4);
   border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
 }
 

package/dist/css/empty.css

@@ -0,0 +1,40 @@
+@layer flx.components {
+/* Empty (from @fluixi-ui/empty). A centred empty-state: icon tile, title,
+   description, and an actions row. */
+:where([data-empty]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--flx-ui-space-2);
+  padding: var(--flx-ui-space-8) var(--flx-ui-space-4);
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-empty-icon]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: var(--flx-ui-space-1);
+  border-radius: var(--flx-ui-radius-lg);
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-empty-title]) {
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-empty-description]) {
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg-subtle);
+  max-width: 42ch;
+}
+:where([data-empty-actions]) {
+  margin-top: var(--flx-ui-space-3);
+  display: flex;
+  gap: var(--flx-ui-space-2);
+}
+}

package/dist/css/fab.css

@@ -0,0 +1,48 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * FAB — a circular, elevated [data-variant] button. Colours / states / ripple
+ * come from the button slice + skin; this owns size, shape and elevation.
+ * ------------------------------------------------------------------------- */
+:where([data-fab]) {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  min-width: 0;
+  flex: none;
+  border-radius: var(--flx-ui-radius-full);
+  box-shadow: var(--flx-ui-shadow-lg);
+}
+:where([data-fab]:hover:not([data-disabled])) {
+  box-shadow: var(--flx-ui-shadow-xl);
+}
+:where([data-fab][data-fab-size='sm']) {
+  width: 40px;
+  height: 40px;
+}
+:where([data-fab][data-fab-size='lg']) {
+  width: 64px;
+  height: 64px;
+}
+:where([data-fab] svg) {
+  width: 24px;
+  height: 24px;
+}
+:where([data-fab][data-fab-size='sm'] svg) {
+  width: 20px;
+  height: 20px;
+}
+
+/* Extended: a pill holding an icon plus a label. */
+:where([data-fab][data-fab-extended]) {
+  width: auto;
+  min-width: 56px;
+  padding: 0 var(--flx-ui-space-5);
+  gap: var(--flx-ui-space-2);
+  border-radius: var(--flx-ui-radius-full);
+  font-weight: var(--flx-ui-font-weight-semibold);
+}
+:where([data-fab][data-fab-extended][data-fab-size='sm']) {
+  min-width: 40px;
+  padding: 0 var(--flx-ui-space-4);
+}
+}

package/dist/css/field-variants.css

@@ -0,0 +1,139 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Field variants — an appearance axis shared by every field control that opts in
+ * via `data-field-variant` (Input, the Select trigger `button[role=combobox]`,
+ * the Combobox control, a field-styled dropdown trigger). `default` (no attr)
+ * keeps each skin's baseline; `outlined` and `filled` are explicit Material-style
+ * modes that every skin renders.
+ *
+ * These deliberately DON'T use `:where()` — the `[data-field-variant]` attribute
+ * carries a little specificity so the variant wins over a control's own baseline
+ * slice regardless of import order (per-component self-imports dedupe to the
+ * first position). Consumer CSS is unlayered and still wins over this whole
+ * layer; the skins (a higher @layer) still override per skin.
+ * ------------------------------------------------------------------------- */
+
+/* Give a plain trigger button (not the select's role=combobox, which already has
+   a field box) the field box model when it opts into a variant. */
+button[data-field-variant]:not([role='combobox']) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+  min-height: var(--flx-ui-size-md);
+  padding: 0 var(--flx-ui-space-3);
+  font: inherit;
+  color: var(--flx-ui-color-fg);
+  cursor: pointer;
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+
+/* Outlined — a bordered box on a transparent ground, with a more defined border
+   than the baseline so the two read as distinct. */
+[data-field-variant='outlined'] {
+  background: transparent;
+  border: var(--flx-ui-border-width-thin) solid
+    color-mix(in oklab, var(--flx-ui-color-border-strong), var(--flx-ui-color-fg) 22%);
+  border-radius: var(--flx-ui-radius-md);
+}
+[data-field-variant='outlined']:hover:not(:focus):not(:focus-within):not([data-invalid]) {
+  border-color: var(--flx-ui-color-fg-muted);
+}
+[data-field-variant='outlined']:focus,
+[data-field-variant='outlined']:focus-within {
+  outline: none;
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+[data-field-variant='outlined'][data-invalid] {
+  border-color: var(--flx-ui-color-danger);
+}
+
+/* Filled — a tinted fill with a bottom rule that thickens/colours on focus. */
+[data-field-variant='filled'] {
+  background: var(--flx-ui-color-bg-muted);
+  border: var(--flx-ui-border-width-thin) solid transparent;
+  border-bottom-color: var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-md) var(--flx-ui-radius-md) 0 0;
+}
+[data-field-variant='filled']:hover:not(:focus):not(:focus-within):not([data-invalid]) {
+  background: color-mix(in oklab, var(--flx-ui-color-bg-muted), var(--flx-ui-color-fg) 4%);
+}
+[data-field-variant='filled']:focus,
+[data-field-variant='filled']:focus-within {
+  outline: none;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--flx-ui-color-focus-ring);
+  box-shadow: none;
+}
+[data-field-variant='filled'][data-invalid] {
+  border-bottom-color: var(--flx-ui-color-danger);
+}
+
+/* ----------------------------------------------------------------------------
+ * Floating label — a frameless positioning wrapper. The INPUT keeps its own
+ * frame (base + variant + skin), so there's exactly one border and it always
+ * matches the active skin. The label overlays and lifts into the top strip on
+ * focus / when filled (driven by the input's :placeholder-shown). The input is
+ * taller with bottom-weighted text so the lifted label never overlaps the value.
+ * ------------------------------------------------------------------------- */
+[data-field-float] {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+[data-field-float] > [data-input] {
+  width: 100%;
+  min-height: calc(var(--flx-ui-size-md) + 14px);
+  padding-top: 20px;
+  padding-bottom: 4px;
+}
+/* Outlined notches the top border (label rides on the edge), so the value text
+   stays vertically centred rather than pushed down for an inside label. */
+[data-field-float] > [data-input][data-field-variant='outlined'] {
+  padding-top: var(--flx-ui-space-2);
+  padding-bottom: var(--flx-ui-space-2);
+}
+[data-field-float] > [data-field-float-label] {
+  position: absolute;
+  left: var(--flx-ui-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: left top;
+  max-width: calc(100% - 2 * var(--flx-ui-space-3));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--flx-ui-color-fg-muted);
+  pointer-events: none;
+  transition:
+    top var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+/* Lift to the top strip when focused or filled (default + filled: inside). */
+[data-field-float] > [data-input]:focus ~ [data-field-float-label],
+[data-field-float] > [data-input]:not(:placeholder-shown) ~ [data-field-float-label] {
+  top: 8px;
+  transform: translateY(0) scale(0.8);
+}
+/* Outlined lifts ONTO the top border and notches it (paints the surface behind
+   the label). Only outlined is reliably a transparent bordered box across skins. */
+[data-field-float] > [data-input][data-field-variant='outlined']:focus ~ [data-field-float-label],
+[data-field-float] > [data-input][data-field-variant='outlined']:not(:placeholder-shown) ~ [data-field-float-label] {
+  top: 0;
+  transform: translateY(-50%) scale(0.8);
+  padding: 0 var(--flx-ui-space-1);
+  background: var(--flx-ui-color-bg);
+}
+/* Accent the label only while the field is focused. */
+[data-field-float] > [data-input]:focus ~ [data-field-float-label] {
+  color: var(--flx-ui-color-focus-ring);
+}
+[data-field-float] > [data-input][data-invalid] ~ [data-field-float-label] {
+  color: var(--flx-ui-color-danger);
+}
+}

package/dist/css/file-upload.css

@@ -0,0 +1,40 @@
+@layer flx.components {
+/* File upload (from @fluixi-ui/file-upload). The dropzone is a dashed drop area
+   that also opens the file dialog on click; it lifts while a drag is over it. */
+:where([data-file-upload-dropzone]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--flx-ui-space-2);
+  padding: var(--flx-ui-space-6) var(--flx-ui-space-4);
+  text-align: center;
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg-muted);
+  background: var(--flx-ui-color-bg-subtle);
+  border: var(--flx-ui-border-width-thin) dashed var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-md);
+  cursor: pointer;
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-file-upload-dropzone]:hover),
+:where([data-file-upload-dropzone][data-dragging]) {
+  border-color: var(--flx-ui-color-focus-ring);
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-file-upload-dropzone][data-dragging]) {
+  border-style: solid;
+}
+:where([data-file-upload-dropzone]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-file-upload-dropzone][data-disabled]) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+}

package/dist/css/glow.css

@@ -0,0 +1,127 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Glow — an animated gradient border ring, opt-in via `data-glow` on any element
+ * (button, surface, card…). The ::after covers the border box and is masked to
+ * just the ring, so the element keeps its own fill and centred content. Colours
+ * follow the accent and are overridable per-instance with --flx-glow-from / -via
+ * / -to (and rest speed via --flx-glow-speed). `data-glow-side` restricts it to
+ * one edge that slides to the opposite side on hover.
+ * ------------------------------------------------------------------------- */
+:where([data-glow]) {
+  position: relative;
+  border-color: transparent;
+  /* Show the edge ring even when the host would otherwise clip (e.g. a card). */
+  overflow: visible;
+}
+:where([data-glow])::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(
+    from var(--flx-angle, 0deg),
+    var(--flx-glow-from, var(--flx-ui-color-primary)),
+    var(--flx-glow-via, var(--flx-ui-accent-5)),
+    var(--flx-glow-to, var(--flx-glow-from, var(--flx-ui-color-primary)))
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  animation: flx-border-spin var(--flx-glow-speed, 4s) linear infinite;
+  transition: filter var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+  pointer-events: none;
+}
+/* Comes alive on hover: the ring spins faster and blooms in its accent colour. */
+:where([data-glow]:hover:not([data-disabled]))::after {
+  --flx-glow-speed: 1.2s;
+  filter: drop-shadow(0 0 5px var(--flx-glow-via, var(--flx-ui-color-primary)));
+}
+
+/* Single-edge glow: reuse the fixed full ring mask, but paint the colour as a
+   band positioned on one side, so only that edge (and its corners) lights up.
+   Because it's the *background* that's positioned, hover slides it to the opposite
+   side smoothly. Positional, so no spin. */
+:where([data-glow][data-glow-side])::after {
+  animation: none;
+  background-repeat: no-repeat;
+  /* A soft resting glow so the lit edge reads as intentional even before hover. */
+  filter: drop-shadow(0 0 2px var(--flx-glow-via, var(--flx-ui-color-primary)));
+  transition:
+    background-position 450ms var(--flx-ui-ease-standard),
+    filter var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+/* Wider colour plateau (12%→88%) so the whole edge lights evenly and only the
+   far edge fades, rather than a thin central sliver. */
+:where([data-glow][data-glow-side='top'])::after,
+:where([data-glow][data-glow-side='bottom'])::after {
+  background-image: linear-gradient(
+    to bottom,
+    transparent 12%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 38%,
+    var(--flx-glow-via, var(--flx-ui-accent-5)) 50%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 62%,
+    transparent 88%
+  );
+  background-size: 100% 200%;
+}
+:where([data-glow][data-glow-side='left'])::after,
+:where([data-glow][data-glow-side='right'])::after {
+  background-image: linear-gradient(
+    to right,
+    transparent 12%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 38%,
+    var(--flx-glow-via, var(--flx-ui-accent-5)) 50%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 62%,
+    transparent 88%
+  );
+  background-size: 200% 100%;
+}
+:where([data-glow][data-glow-side='bottom'])::after {
+  background-position: 50% 0%;
+}
+:where([data-glow][data-glow-side='bottom']:hover:not([data-disabled]))::after {
+  background-position: 50% 100%;
+}
+:where([data-glow][data-glow-side='top'])::after {
+  background-position: 50% 100%;
+}
+:where([data-glow][data-glow-side='top']:hover:not([data-disabled]))::after {
+  background-position: 50% 0%;
+}
+:where([data-glow][data-glow-side='left'])::after {
+  background-position: 100% 50%;
+}
+:where([data-glow][data-glow-side='left']:hover:not([data-disabled]))::after {
+  background-position: 0% 50%;
+}
+:where([data-glow][data-glow-side='right'])::after {
+  background-position: 0% 50%;
+}
+:where([data-glow][data-glow-side='right']:hover:not([data-disabled]))::after {
+  background-position: 100% 50%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-glow])::after {
+    animation: none;
+  }
+}
+}
+
+/* Registered so the angle can actually animate; unlayered like other keyframes. */
+@property --flx-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes flx-border-spin {
+  to {
+    --flx-angle: 360deg;
+  }
+}