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

package/dist/css/accordion.css

@@ -1,7 +1,85 @@
 @layer flx.components {
-/* Accordion */
-:where([role='region']) {
-  padding-bottom: var(--flx-ui-space-3);
+/* ----------------------------------------------------------------------------
+ * Accordion — a bordered stack of collapsible sections. The trigger is a full
+ * width header row with a chevron that rotates on open; content reveals with a
+ * gentle slide.
+ * ------------------------------------------------------------------------- */
+:where([data-accordion]) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  overflow: hidden;
+}
+:where([data-accordion-item]:not(:last-child)) {
+  border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+
+:where([data-accordion-trigger]) {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--flx-ui-space-3);
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-accordion-trigger]:hover:not([data-disabled])) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-accordion-trigger]:focus-visible) {
+  outline: 2px solid var(--flx-ui-color-focus-ring);
+  outline-offset: -2px;
+}
+:where([data-accordion-trigger][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
+/* Chevron: a crisp masked glyph, centred, that flips 180° when open. */
+:where([data-accordion-trigger])::after {
+  content: '';
+  width: 1em;
+  height: 1em;
+  flex: none;
+  background: currentColor;
+  opacity: 0.55;
+  -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-normal) var(--flx-ui-ease-standard);
+}
+:where([data-accordion-trigger][data-state='open'])::after {
+  transform: rotate(180deg);
+}
+
+:where([data-accordion-content]) {
+  padding: 0 var(--flx-ui-space-4) var(--flx-ui-space-3);
   color: var(--flx-ui-color-fg-muted);
 }
+:where([data-accordion-content][data-state='open']) {
+  animation: flx-ui-accordion-in var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+
+@keyframes flx-ui-accordion-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-accordion-trigger])::after,
+  :where([data-accordion-content][data-state='open']) {
+    transition: none;
+    animation: none;
+  }
+}
 }

package/dist/css/alert.css

@@ -1,42 +1,71 @@
 @layer flx.components {
 /* ----------------------------------------------------------------------------
- * Alert
+ * Alert — a tinted callout with an optional leading icon. The icon column spans
+ * the title + description rows; without an icon the content sits flush left.
  * ------------------------------------------------------------------------- */
 :where([data-alert]) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--flx-ui-space-1);
-  text-align: left;
-  padding-block: var(--flx-ui-space-4);
-  padding-inline: var(--flx-ui-space-4);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: var(--flx-ui-space-1);
+  align-items: start;
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
   border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
-  border-left-width: 3px;
   border-radius: var(--flx-ui-radius-md);
   background: var(--flx-ui-color-bg-subtle);
   color: var(--flx-ui-color-fg);
 }
-:where([data-alert][data-variant='info']) {
-  border-color: var(--flx-ui-color-primary);
-  background: var(--flx-ui-color-primary-subtle);
+:where([data-alert]) > * {
+  grid-column: 2;
+  min-width: 0;
 }
-:where([data-alert][data-variant='success']) {
-  border-color: var(--flx-ui-color-success);
-  background: var(--flx-ui-color-success-subtle);
+:where([data-alert-icon]) {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  margin-right: var(--flx-ui-space-3);
+  display: inline-flex;
+  flex: none;
+  color: var(--flx-ui-color-fg-muted);
 }
-:where([data-alert][data-variant='warning']) {
-  border-color: var(--flx-ui-color-warning);
-  background: var(--flx-ui-color-warning-subtle);
-}
-:where([data-alert][data-variant='danger']) {
-  border-color: var(--flx-ui-color-danger);
-  background: var(--flx-ui-color-danger-subtle);
+:where([data-alert-icon]) > svg {
+  width: 1.15em;
+  height: 1.15em;
 }
 :where([data-alert-title]) {
   font-weight: var(--flx-ui-font-weight-semibold);
+  line-height: var(--flx-ui-line-height-tight);
 }
 :where([data-alert-description]) {
   font-size: var(--flx-ui-font-size-sm);
-  opacity: 0.9;
+  color: var(--flx-ui-color-fg-muted);
+}
+
+/* Variants tint the surface, border and icon with the matching semantic hue. */
+:where([data-alert][data-alert-variant='info']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-primary) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-primary-subtle);
+}
+:where([data-alert][data-alert-variant='info']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-primary);
+}
+:where([data-alert][data-alert-variant='success']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-success) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-success-subtle);
+}
+:where([data-alert][data-alert-variant='success']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-success);
+}
+:where([data-alert][data-alert-variant='warning']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-warning) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-warning-subtle);
+}
+:where([data-alert][data-alert-variant='warning']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-warning);
+}
+:where([data-alert][data-alert-variant='danger']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-danger) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-danger-subtle);
+}
+:where([data-alert][data-alert-variant='danger']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-danger);
 }
 }

package/dist/css/badge.css

@@ -2,6 +2,7 @@
 /* Badge */
 :where([data-variant].flx-ui-badge, .flx-ui-badge[data-variant]) {
   height: auto;
+  min-width: 0;
   padding: 2px var(--flx-ui-space-2);
   border-radius: var(--flx-ui-radius-full);
   font-size: var(--flx-ui-font-size-xs);

package/dist/css/base.css

@@ -1,4 +1,4 @@
-@layer flx.tokens, flx.components, flx.skin;
+@layer flx.base, flx.tokens, flx.components, flx.skin;
 
 @layer flx.components {
 
@@ -6,5 +6,7 @@
 :where(:root) {
   --flx-ui-ctl-ring: 0 0 0 2px var(--flx-ui-color-bg), 0 0 0 4px var(--flx-ui-color-focus-ring);
   --flx-ui-ctl-font: var(--flx-ui-font-weight-medium);
+  /* Shared chevron glyph (mask source) — colour comes from the consuming rule. */
+  --flx-ui-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 }
 }

package/dist/css/bottom-sheet.css

@@ -74,13 +74,13 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--flx-ui-space-3);
-  padding: var(--flx-ui-space-2) var(--flx-ui-space-5) var(--flx-ui-space-4);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-4) var(--flx-ui-space-4);
 }
 :where([data-bottom-sheet-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-bottom-sheet-description]) {
@@ -92,14 +92,14 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 var(--flx-ui-space-5) var(--flx-ui-space-5);
+  padding: 0 var(--flx-ui-space-4) var(--flx-ui-space-4);
 }
 :where([data-bottom-sheet-footer]) {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--flx-ui-space-2);
-  padding: var(--flx-ui-space-4) var(--flx-ui-space-5);
+  padding: var(--flx-ui-space-4) var(--flx-ui-space-4);
   border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
 }
 

package/dist/css/breadcrumb.css

@@ -21,7 +21,7 @@
   color: var(--flx-ui-color-fg-muted);
   text-decoration: none;
   border-radius: var(--flx-ui-radius-sm);
-  transition: color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-breadcrumb-link]:hover) {
   color: var(--flx-ui-color-fg);

package/dist/css/button.css

@@ -20,6 +20,9 @@
   border: var(--flx-ui-border-width-thin) solid transparent;
   border-radius: var(--flx-ui-radius-md);
   height: var(--flx-ui-size-md);
+  /* Never narrower than tall, so an icon-only button (a close ×, a chevron)
+     stays square instead of collapsing to its glyph width. */
+  min-width: var(--flx-ui-size-md);
   padding: 0 var(--flx-ui-space-4);
   color: var(--flx-ui-color-fg);
   transition:
@@ -29,11 +32,13 @@
 }
 :where([data-variant][data-size='sm']) {
   height: var(--flx-ui-size-sm);
+  min-width: var(--flx-ui-size-sm);
   padding: 0 var(--flx-ui-space-3);
   font-size: var(--flx-ui-font-size-sm);
 }
 :where([data-variant][data-size='lg']) {
   height: var(--flx-ui-size-lg);
+  min-width: var(--flx-ui-size-lg);
   padding: 0 var(--flx-ui-space-5);
   font-size: var(--flx-ui-font-size-lg);
 }

package/dist/css/calendar.css

@@ -34,11 +34,12 @@
   background: transparent;
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
-  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-calendar-nav]:hover:not([disabled])) {
-  background: var(--flx-ui-color-bg-subtle);
+  background: var(--flx-ui-color-bg-muted);
+  border-color: var(--flx-ui-color-border-strong);
   color: var(--flx-ui-color-fg);
 }
 :where([data-calendar-nav]:focus-visible) {
@@ -77,11 +78,12 @@
   font-size: var(--flx-ui-font-size-sm);
   color: var(--flx-ui-color-fg);
   cursor: pointer;
-  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-calendar-day]:hover:not([data-disabled]):not([data-unavailable])) {
-  background: var(--flx-ui-color-bg-subtle);
+:where([data-calendar-day]:hover:not([data-disabled]):not([data-unavailable]):not([data-selected])) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
 }
 :where([data-calendar-day]:focus-visible) {
   outline: none;

package/dist/css/card.css

@@ -12,6 +12,10 @@
   box-shadow: var(--flx-ui-shadow-sm);
   overflow: hidden;
 }
+/* Tonal elevation in dark — a card lifts by lightening, not by an unseen shadow. */
+[data-theme='dark'] :where([data-card]) {
+  background: var(--flx-ui-gray-2);
+}
 :where([data-card-header]) {
   display: flex;
   flex-direction: column;
@@ -22,7 +26,7 @@
   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-card-description]) {

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/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/glow.css

@@ -0,0 +1,123 @@
+@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;
+  transition:
+    background-position 450ms var(--flx-ui-ease-standard),
+    filter var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-glow][data-glow-side='top'])::after,
+:where([data-glow][data-glow-side='bottom'])::after {
+  background-image: linear-gradient(
+    to bottom,
+    transparent 28%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 44%,
+    var(--flx-glow-via, var(--flx-ui-accent-5)) 50%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 56%,
+    transparent 72%
+  );
+  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 28%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 44%,
+    var(--flx-glow-via, var(--flx-ui-accent-5)) 50%,
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 56%,
+    transparent 72%
+  );
+  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/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/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);