@fluixi-ui/tokens 0.3.0

package/dist/css/checkbox-radio.css

@@ -0,0 +1,66 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Checkbox & Radio
+ * ------------------------------------------------------------------------- */
+:where([role='checkbox']) {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-sm);
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-primary-fg);
+  transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([role='checkbox'][data-state='checked'], [role='checkbox'][data-state='indeterminate']) {
+  background: var(--flx-ui-color-primary);
+  border-color: var(--flx-ui-color-primary);
+}
+:where([role='checkbox'][data-state='checked'])::after {
+  content: '';
+  width: 5px;
+  height: 9px;
+  margin-top: -1px;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+:where([role='checkbox'][data-state='indeterminate'])::after {
+  content: '';
+  width: 9px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+:where([role='radio']) {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  flex: none;
+  position: relative;
+  cursor: pointer;
+  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);
+}
+:where([role='radio'][data-state='checked']) {
+  border-color: var(--flx-ui-color-primary);
+  border-width: var(--flx-ui-border-width-thick);
+}
+:where([role='radio'][data-state='checked'])::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: var(--flx-ui-radius-full);
+  background: var(--flx-ui-color-primary);
+}
+}

package/dist/css/command.css

@@ -0,0 +1,90 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Command palette — a filtered action list, inline or in a dialog (⌘K).
+ * ------------------------------------------------------------------------- */
+:where([data-command]) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+}
+:where([data-command-input]) {
+  flex: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  font: inherit;
+  font-size: var(--flx-ui-font-size-md);
+  color: var(--flx-ui-color-fg);
+  background: transparent;
+  border: none;
+  border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  outline: none;
+}
+:where([data-command-input]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-command-list]) {
+  overflow-y: auto;
+  max-height: min(360px, 50vh);
+  padding: var(--flx-ui-space-1);
+  scroll-padding-block: var(--flx-ui-space-1);
+}
+:where([data-command-empty]) {
+  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);
+}
+:where([data-command-group][data-empty]) {
+  display: none;
+}
+:where([data-command-group-heading]) {
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3) var(--flx-ui-space-1);
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-command-item]) {
+  display: flex;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  border-radius: var(--flx-ui-radius-sm);
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  cursor: pointer;
+  user-select: none;
+}
+/* Active follows keyboard OR pointer — a single highlight, no separate :hover. */
+:where([data-command-item][data-active]) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
+}
+:where([data-command-item][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  pointer-events: none;
+}
+:where([data-command-separator]) {
+  height: 1px;
+  margin: var(--flx-ui-space-1) 0;
+  background: var(--flx-ui-color-border);
+}
+/* In a dialog the dialog surface is bare; the command is the elevated surface. */
+:where([data-command-dialog]) {
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  width: min(560px, calc(100vw - var(--flx-ui-space-8)));
+}
+:where([data-command-dialog] [data-command]) {
+  box-shadow: var(--flx-ui-shadow-lg);
+}
+}

package/dist/css/date-field.css

@@ -0,0 +1,58 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * DateField
+ * ------------------------------------------------------------------------- */
+:where([data-date-field]) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+}
+:where([data-date-field-label]) {
+  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);
+}
+:where([data-date-field-input]) {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  border: 1px solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  background: var(--flx-ui-color-bg);
+  font-size: var(--flx-ui-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--flx-ui-color-fg);
+}
+:where([data-date-field-input]:focus-within) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+  border-color: var(--flx-ui-color-primary);
+}
+:where([data-date-field-input][data-invalid]) {
+  border-color: var(--flx-ui-color-danger, #dc2626);
+}
+:where([data-date-field-input][aria-disabled='true']) {
+  color: var(--flx-ui-color-fg-subtle);
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-date-field-literal]) {
+  padding: 0 1px;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-date-field-segment]) {
+  padding: 0 2px;
+  border-radius: var(--flx-ui-radius-sm, 4px);
+  outline: none;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  cursor: default;
+}
+:where([data-date-field-segment][data-placeholder]) {
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-date-field-segment]:focus) {
+  background: var(--flx-ui-color-primary);
+  color: var(--flx-ui-color-primary-fg);
+}
+}

package/dist/css/date-picker.css

@@ -0,0 +1,81 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * DatePicker
+ * ------------------------------------------------------------------------- */
+:where([data-date-picker]) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+}
+:where([data-date-picker-label]) {
+  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);
+}
+/* The control box owns the border; the embedded field input goes borderless. */
+:where([data-date-picker-control]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding-right: var(--flx-ui-space-1);
+  border: 1px solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  background: var(--flx-ui-color-bg);
+}
+:where([data-date-picker-control]:focus-within) {
+  box-shadow: var(--flx-ui-ctl-ring);
+  border-color: var(--flx-ui-color-primary);
+}
+:where([data-date-picker-input]) {
+  border: none;
+  box-shadow: none;
+}
+/* Range control: start – end. The separator sits between the two fields. */
+:where([data-date-picker-control][data-date-range]) {
+  padding-left: var(--flx-ui-space-2);
+}
+:where([data-date-range-separator]) {
+  padding: 0 2px;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-date-picker-input]:focus-within) {
+  box-shadow: none;
+  border: none;
+}
+:where([data-date-picker-trigger]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--flx-ui-radius-sm, 4px);
+  background: transparent;
+  color: var(--flx-ui-color-fg-muted);
+  cursor: pointer;
+  font-size: var(--flx-ui-font-size-sm);
+}
+:where([data-date-picker-trigger]:hover:not([disabled])) {
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-date-picker-trigger]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-date-picker-content]) {
+  padding: var(--flx-ui-space-3);
+  border: 1px solid var(--flx-ui-color-border);
+  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);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-date-picker-content]) {
+    animation: none;
+  }
+}
+}

package/dist/css/field.css

@@ -0,0 +1,19 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Field (label + input + description + error)
+ * ------------------------------------------------------------------------- */
+:where([data-field]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+}
+:where([data-field-label]) {
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-field-label][data-required])::after {
+  content: ' *';
+  color: var(--flx-ui-color-danger);
+}
+}

package/dist/css/hover-card.css

@@ -0,0 +1,16 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Hover card
+ * ------------------------------------------------------------------------- */
+:where([data-hovercard-content]) {
+  min-width: 240px;
+  max-width: 320px;
+  padding: var(--flx-ui-space-4);
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+  box-shadow: var(--flx-ui-shadow-lg);
+  animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
+}
+}

package/dist/css/input.css

@@ -0,0 +1,85 @@
+@layer flx.components {
+/* Input & textarea (from @fluixi-ui/input) — standalone or inside a field. */
+:where([data-input]) {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--flx-ui-size-md);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  font: inherit;
+  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(textarea[data-input]) {
+  min-height: calc(var(--flx-ui-size-md) * 2);
+  resize: vertical;
+}
+:where([data-input]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-input]:focus-visible) {
+  outline: none;
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-input][data-invalid]) {
+  border-color: var(--flx-ui-color-danger);
+}
+
+/* Input with leading/trailing adornments: the group owns the frame. */
+:where([data-input-group]) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+  width: 100%;
+  min-height: var(--flx-ui-size-md);
+  padding: 0 var(--flx-ui-space-3);
+  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-input-group]:focus-within) {
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-input-group][data-invalid]) {
+  border-color: var(--flx-ui-color-danger);
+}
+:where([data-input-group] > input) {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+}
+:where([data-input-adornment]) {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-field-description]) {
+  margin: 0;
+  font-size: var(--flx-ui-font-size-xs);
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-field-error]) {
+  margin: 0;
+  font-size: var(--flx-ui-font-size-xs);
+  color: var(--flx-ui-color-danger);
+}
+}

package/dist/css/kbd.css

@@ -0,0 +1,20 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Kbd
+ * ------------------------------------------------------------------------- */
+:where([data-kbd]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  padding: 1px var(--flx-ui-space-2);
+  font-family: var(--flx-ui-font-family-mono);
+  font-size: var(--flx-ui-font-size-xs);
+  line-height: 1.5;
+  color: var(--flx-ui-color-fg-muted);
+  background: var(--flx-ui-color-bg-subtle);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-bottom-width: 2px;
+  border-radius: var(--flx-ui-radius-sm);
+}
+}

package/dist/css/menubar.css

@@ -0,0 +1,27 @@
+@layer flx.components {
+/* Menubar: a horizontal bar of menu triggers */
+:where([role='menubar']) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: var(--flx-ui-space-1);
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+}
+:where([role='menubar'] > [role='menuitem']) {
+  font-weight: var(--flx-ui-font-weight-medium);
+}
+/* Top-level triggers open a menu but aren't submenu rows — drop the ›/space-between
+   the shared `[aria-haspopup='menu']` rule adds. */
+:where([role='menubar'] > [role='menuitem'][aria-haspopup='menu']) {
+  justify-content: center;
+}
+:where([role='menubar'] > [role='menuitem'][aria-haspopup='menu'])::after {
+  content: none;
+}
+:where([role='menubar'] > [role='menuitem'][data-state='open']) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
+}
+}

package/dist/css/navigation-menu.css

@@ -0,0 +1,144 @@
+@layer flx.components {
+/* Navigation menu: a row of links, some revealing a floating panel of links. */
+:where([data-navigation-menu-list]) {
+  position: relative; /* anchors the indicator */
+  display: flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-navigation-menu-list][data-orientation='vertical']) {
+  flex-direction: column;
+  align-items: stretch;
+}
+:where([data-navigation-menu-item]) {
+  display: flex;
+}
+:where([data-navigation-menu-trigger], [data-navigation-menu-list] > [data-navigation-menu-item] > [data-navigation-menu-link]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg);
+  background: transparent;
+  border: none;
+  border-radius: var(--flx-ui-radius-md);
+  cursor: pointer;
+  outline: none;
+  text-decoration: none;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-navigation-menu-trigger]:hover, [data-navigation-menu-list] > [data-navigation-menu-item] > [data-navigation-menu-link]:hover) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-navigation-menu-trigger][data-state='open']) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
+}
+: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. */
+:where([data-navigation-menu-trigger])::after {
+  content: '';
+  width: 0.55em;
+  height: 0.55em;
+  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);
+  opacity: 0.6;
+  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);
+}
+
+:where([data-navigation-menu-content]) {
+  display: grid;
+  gap: var(--flx-ui-space-1);
+  min-width: 220px;
+  padding: var(--flx-ui-space-2);
+  color: var(--flx-ui-color-fg);
+}
+/* Standalone (no viewport): the panel is its own floating surface. */
+:where([data-navigation-menu-content][data-floating]) {
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+  box-shadow: var(--flx-ui-shadow-lg);
+  animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
+}
+/* Inside a viewport the surface belongs to the viewport; size to content so the
+   viewport can measure and animate to our natural width. */
+:where([data-navigation-menu-content]:not([data-floating])) {
+  width: max-content;
+}
+
+/* The shared viewport: one surface every panel teleports into, morphing size. */
+:where([data-navigation-menu-viewport][data-state='closed']) {
+  display: none;
+}
+:where([data-navigation-menu-viewport]) {
+  overflow: hidden;
+  width: var(--flx-ui-navigation-menu-viewport-width, auto);
+  height: var(--flx-ui-navigation-menu-viewport-height, auto);
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+  box-shadow: var(--flx-ui-shadow-lg);
+  transition:
+    width var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+    height var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+    left var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+    top var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
+}
+
+/* The indicator: a small arrow that slides to sit under the active trigger. */
+:where([data-navigation-menu-indicator]) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  width: var(--flx-ui-navigation-menu-indicator-size, 0);
+  height: var(--flx-ui-space-2);
+  transform: translateX(var(--flx-ui-navigation-menu-indicator-x, 0));
+  pointer-events: none;
+  transition:
+    transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+    width var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+}
+:where([data-navigation-menu-indicator])::before {
+  content: '';
+  width: var(--flx-ui-space-2);
+  height: var(--flx-ui-space-2);
+  background: var(--flx-ui-color-bg);
+  border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-left: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  transform: rotate(45deg) translateY(25%);
+  border-top-left-radius: 2px;
+}
+
+:where([data-navigation-menu-content] [data-navigation-menu-link]) {
+  display: block;
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  border-radius: var(--flx-ui-radius-sm);
+  color: var(--flx-ui-color-fg);
+  text-decoration: none;
+  outline: none;
+}
+:where([data-navigation-menu-content] [data-navigation-menu-link]:hover, [data-navigation-menu-content] [data-navigation-menu-link]:focus-visible) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
+}
+:where([data-navigation-menu-link][data-active]) {
+  color: var(--flx-ui-color-primary-active);
+}
+}

package/dist/css/number-field.css

@@ -0,0 +1,83 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * NumberField
+ * ------------------------------------------------------------------------- */
+:where([data-number-field]) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+}
+:where([data-number-field-label]) {
+  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);
+}
+:where([data-number-field-label][data-disabled]) {
+  color: var(--flx-ui-color-fg-subtle);
+}
+/* Control row: decrement | input | increment */
+:where([data-number-field-input-row]) {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  overflow: hidden;
+}
+:where([data-number-field-input]) {
+  width: 5rem;
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-2);
+  font-size: var(--flx-ui-font-size-sm);
+  font-family: inherit;
+  color: var(--flx-ui-color-fg);
+  background: transparent;
+  border: none;
+  outline: none;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+:where([data-number-field-input]::-webkit-inner-spin-button),
+:where([data-number-field-input]::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+}
+:where([data-number-field-input]:focus-visible) {
+  outline: var(--flx-ui-ctl-ring);
+  outline-offset: -2px;
+  border-radius: 0;
+}
+:where([data-number-field-input][disabled]) {
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-number-field-decrement]),
+:where([data-number-field-increment]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  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);
+}
+:where([data-number-field-decrement]) {
+  border-right: 1px solid var(--flx-ui-color-border);
+}
+:where([data-number-field-increment]) {
+  border-left: 1px solid var(--flx-ui-color-border);
+}
+:where([data-number-field-decrement]:hover:not([disabled])),
+:where([data-number-field-increment]:hover:not([disabled])) {
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-number-field-decrement][disabled]),
+:where([data-number-field-increment][disabled]) {
+  color: var(--flx-ui-color-fg-subtle);
+  cursor: not-allowed;
+}
+}