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

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;
+  }
+}

package/dist/css/icon-button.css

@@ -0,0 +1,42 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Icon button — a square [data-variant] button. Colours / states / ripple come
+ * from the button slice + the active skin; this only makes it square and shapes
+ * the corners.
+ * ------------------------------------------------------------------------- */
+:where([data-icon-button]) {
+  width: var(--flx-ui-size-md);
+  padding: 0;
+  min-width: 0;
+  flex: none;
+}
+:where([data-icon-button][data-size='sm']) {
+  width: var(--flx-ui-size-sm);
+}
+:where([data-icon-button][data-size='lg']) {
+  width: var(--flx-ui-size-lg);
+}
+
+/* Shape */
+:where([data-icon-button][data-shape='circle']) {
+  border-radius: var(--flx-ui-radius-full);
+}
+:where([data-icon-button][data-shape='square']) {
+  border-radius: var(--flx-ui-radius-sm);
+}
+
+/* A sensible default icon size that tracks the button size (consumers can still
+   size their own glyphs). */
+:where([data-icon-button] svg) {
+  width: 20px;
+  height: 20px;
+}
+:where([data-icon-button][data-size='sm'] svg) {
+  width: 16px;
+  height: 16px;
+}
+:where([data-icon-button][data-size='lg'] svg) {
+  width: 24px;
+  height: 24px;
+}
+}

package/dist/css/image.css

@@ -0,0 +1,67 @@
+@layer flx.components {
+/* Image (from @fluixi-ui/image). A box that reserves the image's space and layers
+   a loading placeholder / blur-up and an error fallback over the <img>. Size it via
+   a width/height, an aspect-ratio, or a sized parent — the <img> fills it. */
+:where([data-image]) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  line-height: 0;
+  vertical-align: middle;
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg-subtle);
+  --flx-ui-image-fallback-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 16H3V5h18v14ZM8.5 13.5l2 2.41L13.5 12l4 5.5H6.5l2-4Z'/%3E%3C/svg%3E");
+}
+
+/* The image stays in normal flow so the box reserves its footprint (and keeps its
+   height when the source errors); object-fit crops it to a sized box. */
+:where([data-image-img]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-image][data-status='loaded'] [data-image-img]) {
+  opacity: 1;
+}
+:where([data-image][data-status='error'] [data-image-img]) {
+  opacity: 0;
+}
+
+/* Overlays — blur-up, custom placeholder, and the error fallback — fill the box. */
+:where([data-image-blur], [data-image-placeholder], [data-image-fallback]) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+:where([data-image-blur]) {
+  background-size: cover;
+  background-position: center;
+  filter: blur(12px);
+  transform: scale(1.1);
+}
+
+/* Default error fallback: a centered picture glyph on the subtle surface. Passing a
+   custom `fallback` element replaces it entirely. */
+:where([data-image-fallback]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-image-fallback])::before {
+  content: "";
+  width: 45%;
+  height: 45%;
+  max-width: 28px;
+  max-height: 28px;
+  background: currentColor;
+  opacity: 0.55;
+  -webkit-mask: center / contain no-repeat var(--flx-ui-image-fallback-glyph);
+  mask: center / contain no-repeat var(--flx-ui-image-fallback-glyph);
+}
+}

package/dist/css/input.css

@@ -29,6 +29,21 @@
 :where([data-input][data-invalid]) {
   border-color: var(--flx-ui-color-danger);
 }
+/* Drop the browser's native number spinners — they can't be styled consistently
+   across engines and clash with the field look. Covers both the bare input and
+   the one nested inside an adornment group (which carries no [data-input]). Reach
+   for @fluixi-ui/number-field when you want proper increment / decrement steppers. */
+:where([data-input][type='number'], [data-input-group] input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+:where([data-input][type='number']::-webkit-outer-spin-button),
+:where([data-input][type='number']::-webkit-inner-spin-button),
+:where([data-input-group] input[type='number']::-webkit-outer-spin-button),
+:where([data-input-group] input[type='number']::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
 
 /* Input with leading/trailing adornments: the group owns the frame. */
 :where([data-input-group]) {

package/dist/css/layout.css

@@ -0,0 +1,10 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Layout primitives (Stack / Grid / Container) — the geometry is set inline per
+ * instance; this only guarantees a predictable box model.
+ * ------------------------------------------------------------------------- */
+:where([data-stack], [data-grid], [data-container]) {
+  box-sizing: border-box;
+  min-width: 0;
+}
+}

package/dist/css/navigation-menu.css

@@ -42,20 +42,21 @@
 :where([data-navigation-menu-trigger]:focus-visible, [data-navigation-menu-link]:focus-visible) {
   box-shadow: var(--flx-ui-ctl-ring);
 }
-/* The chevron affordance: rotates when the panel opens. */
+/* The chevron affordance: the shared theme chevron, flipping 180° when open. */
 :where([data-navigation-menu-trigger])::after {
   content: '';
-  width: 0.55em;
-  height: 0.55em;
+  width: 1em;
+  height: 1em;
+  flex: none;
   margin-inline-start: var(--flx-ui-space-1);
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: rotate(45deg) translateY(-0.1em);
+  background: currentColor;
   opacity: 0.6;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
   transition: transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-navigation-menu-trigger][data-state='open'])::after {
-  transform: rotate(225deg) translateY(-0.1em);
+  transform: rotate(180deg);
 }
 
 :where([data-navigation-menu-content]) {

package/dist/css/number-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-number-field-label][data-disabled]) {
   color: var(--flx-ui-color-fg-subtle);
@@ -61,8 +61,8 @@
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
   font-size: var(--flx-ui-font-size-sm);
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-number-field-decrement]) {
   border-right: 1px solid var(--flx-ui-color-border);

package/dist/css/page.css

@@ -0,0 +1,138 @@
+@layer flx.components {
+  /*
+   * The page shell. Structure only: a bounded column whose middle scrolls.
+   *
+   * `min-height: 0` on the body is the load-bearing rule — without it a flex item
+   * refuses to shrink below its content, so a long page pushes the footer out of
+   * view instead of scrolling.
+   */
+  :where([data-page]) {
+    --flx-ui-page-gutter: var(--flx-ui-space-6);
+    --flx-ui-page-header-gap: var(--flx-ui-space-3);
+
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+  }
+
+  :where([data-page-header]) {
+    display: flex;
+    align-items: center;
+    gap: var(--flx-ui-page-header-gap);
+    padding: var(--flx-ui-space-4) var(--flx-ui-page-gutter);
+    border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+    background: var(--flx-ui-color-bg);
+  }
+
+  :where([data-page-header][data-sticky]) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  :where([data-page-heading-group]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--flx-ui-space-1);
+    min-width: 0;
+  }
+
+  :where([data-page-heading]) {
+    margin: 0;
+    font-size: var(--flx-ui-font-size-xl);
+    font-weight: var(--flx-ui-font-weight-semibold);
+    line-height: var(--flx-ui-line-height-tight);
+    color: var(--flx-ui-color-fg);
+    /* Long titles truncate rather than pushing the actions off the row. */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-page-subtitle]) {
+    margin: 0;
+    font-size: var(--flx-ui-font-size-sm);
+    line-height: var(--flx-ui-line-height-normal);
+    color: var(--flx-ui-color-fg-muted);
+  }
+
+  /* Actions sit at the end of the row whatever precedes them. */
+  :where([data-page-actions]) {
+    display: flex;
+    align-items: center;
+    gap: var(--flx-ui-space-2);
+    margin-inline-start: auto;
+  }
+
+  :where([data-page-body]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--flx-ui-space-4);
+    padding: var(--flx-ui-space-5) var(--flx-ui-page-gutter);
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Only the body scrolls; the header and footer stay put. */
+  :where([data-page-body][data-scroll='body']) {
+    overflow-y: auto;
+  }
+
+  /* The whole page scrolls, so the body must not create a second scroll context. */
+  :where([data-page-body][data-scroll='page']) {
+    overflow: visible;
+  }
+
+  :where([data-page][data-scroll='page']) {
+    overflow-y: auto;
+  }
+
+  :where([data-page-footer]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--flx-ui-space-3);
+    padding: var(--flx-ui-space-4) var(--flx-ui-page-gutter);
+    border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+    background: var(--flx-ui-color-bg);
+  }
+
+  /*
+   * The back affordance carries `data-variant`, so the button rules and each
+   * skin's state layer/ripple already apply. Only the square geometry is left —
+   * and the anchor form needs the button's own resets, which it doesn't inherit.
+   */
+  :where([data-page-back]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--flx-ui-size-sm);
+    padding: 0;
+    text-decoration: none;
+  }
+
+  /* A CSS chevron, so the back button needs no icon library. */
+  :where([data-page-back])::before {
+    content: '';
+    width: 0.5rem;
+    height: 0.5rem;
+    border-inline-start: 2px solid currentColor;
+    border-block-start: 2px solid currentColor;
+    transform: rotate(-45deg);
+    /* Optical centring: the glyph's mass sits right of its box. */
+    margin-inline-start: 0.15em;
+  }
+
+  /* A supplied icon replaces the drawn chevron. */
+  :where([data-page-back]:has(> *))::before {
+    content: none;
+  }
+
+  :where([dir='rtl']) :where([data-page-back])::before {
+    transform: rotate(135deg);
+    margin-inline-start: 0;
+    margin-inline-end: 0.15em;
+  }
+}

package/dist/css/pagination.css

@@ -31,9 +31,9 @@
   border-radius: var(--flx-ui-radius-md);
   cursor: pointer;
   user-select: none;
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              border-color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-pagination-page]:hover:not([disabled])),
 :where([data-pagination-prev]:hover:not([disabled])),

package/dist/css/parts/listbox.css

@@ -89,10 +89,15 @@
   border-color: var(--flx-ui-color-primary);
 }
 :where([data-mode='multiple'] [role='option'][data-selected] > [data-select-item-indicator])::after {
-  content: '✓';
-  color: var(--flx-ui-color-primary-fg);
-  font-size: 0.7rem;
-  line-height: 1;
+  content: '';
+  box-sizing: content-box;
+  flex: none;
+  width: 4px;
+  height: 8px;
+  margin-top: -2px;
+  border: solid var(--flx-ui-color-primary-fg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 :where([data-mode='multiple'] [role='option'][data-selected])::after {
   content: none;

package/dist/css/pin-input.css

@@ -0,0 +1,40 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * PIN / OTP input — a row of single-character cells
+ * ------------------------------------------------------------------------- */
+:where([data-pin-input]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-pin-gap, var(--flx-ui-space-2));
+}
+:where([data-pin-input-field]) {
+  box-sizing: border-box;
+  width: var(--flx-ui-pin-size, 2.75rem);
+  height: var(--flx-ui-pin-size, 2.75rem);
+  padding: 0;
+  text-align: center;
+  font: inherit;
+  font-size: var(--flx-ui-font-size-lg);
+  font-weight: var(--flx-ui-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--flx-ui-color-fg);
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-md);
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-pin-input-field]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-pin-input-field]:focus-visible) {
+  outline: none;
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-pin-input-field]:disabled) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+}

package/dist/css/progress.css

@@ -37,4 +37,60 @@
   0% { transform: translateX(-100%); }
   100% { transform: translateX(250%); }
 }
+
+/* ----------------------------------------------------------------------------
+ * Circular progress
+ * ------------------------------------------------------------------------- */
+:where([data-circular]) {
+  position: relative;
+  /* Stack the ring and any centred label in a single grid cell. */
+  display: inline-grid;
+  place-items: center;
+  vertical-align: middle;
+  /* Undo the linear bar's box styling that keys off [role='progressbar']
+     (fixed 6px height / 240px width / clipped overflow / filled track). */
+  width: auto;
+  height: auto;
+  overflow: visible;
+  background: none;
+  border-radius: 0;
+}
+:where([data-circular]) > * {
+  grid-area: 1 / 1;
+}
+:where([data-circular] [data-progress-svg]) {
+  display: block;
+  /* Start the arc at 12 o'clock rather than 3 o'clock. */
+  transform: rotate(-90deg);
+}
+:where([data-progress-track]) {
+  fill: none;
+  stroke: var(--flx-ui-color-bg-muted);
+}
+:where([data-progress-indicator]) {
+  fill: none;
+  stroke: var(--flx-ui-color-primary);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+/* Indeterminate: a short arc that sweeps around the ring. */
+:where([data-circular][data-state='indeterminate'] [data-progress-svg]) {
+  animation: flx-ui-circular-spin 0.9s linear infinite;
+}
+:where([data-circular][data-state='indeterminate'] [data-progress-indicator]) {
+  stroke-dasharray: 25 200;
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-circular][data-state='indeterminate'] [data-progress-svg]) {
+    animation: none;
+  }
+  :where([data-circular][data-state='indeterminate'] [data-progress-indicator]) {
+    stroke-dasharray: none;
+    opacity: 0.5;
+  }
+}
+@keyframes flx-ui-circular-spin {
+  to { transform: rotate(270deg); }
+}
 }