@fluixi-ui/tokens 0.4.0-alpha.17 → 0.4.0-alpha.19

package/dist/css/avatar.css

@@ -10,7 +10,6 @@
   width: 40px;
   height: 40px;
   flex: none;
-  overflow: hidden;
   border-radius: var(--flx-ui-radius-full);
   background: var(--flx-ui-color-bg-muted);
   color: var(--flx-ui-color-fg-muted);
@@ -32,6 +31,100 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+/* ----------------------------------------------------------------------------
+ * Avatar indicator: a dot, count or icon centred on a point of the edge. The
+ * avatar no longer clips, so it can sit half outside; image and fallback round
+ * their own corners. On a round avatar a corner point lies on the circle at 45
+ * degrees, r(1 - 1/sqrt 2) = 14.645% in from each side.
+ * ------------------------------------------------------------------------- */
+:where([data-avatar-indicator]) {
+  --flx-ui-avatar-indicator-corner: 14.645%;
+  --flx-ui-avatar-indicator-x: calc(100% - var(--flx-ui-avatar-indicator-corner));
+  --flx-ui-avatar-indicator-y: calc(100% - var(--flx-ui-avatar-indicator-corner));
+  --flx-ui-avatar-indicator-shift: -50%;
+  --flx-ui-avatar-indicator-bg: var(--flx-ui-color-success);
+  --flx-ui-avatar-indicator-fg: var(--flx-ui-color-success-fg);
+  position: absolute;
+  z-index: 1;
+  inset-inline-start: var(--flx-ui-avatar-indicator-x);
+  inset-block-start: var(--flx-ui-avatar-indicator-y);
+  transform: translate(var(--flx-ui-avatar-indicator-shift), -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--flx-ui-avatar-indicator-size, max(16px, 40%));
+  block-size: var(--flx-ui-avatar-indicator-size, max(16px, 40%));
+  padding-inline: 4px;
+  border-radius: var(--flx-ui-radius-full);
+  background: var(--flx-ui-avatar-indicator-bg);
+  color: var(--flx-ui-avatar-indicator-fg);
+  /* A ring in the page colour cuts the indicator out of the avatar. */
+  box-shadow: 0 0 0 2px var(--flx-ui-avatar-indicator-ring, var(--flx-ui-color-bg));
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  line-height: 1;
+  letter-spacing: normal;
+  white-space: nowrap;
+  pointer-events: none;
+}
+:where([data-avatar-indicator][data-dot]) {
+  min-inline-size: 0;
+  inline-size: var(--flx-ui-avatar-indicator-dot, max(8px, 25%));
+  block-size: var(--flx-ui-avatar-indicator-dot, max(8px, 25%));
+  padding: 0;
+}
+:where([data-avatar-indicator]) :where(svg) { inline-size: 70%; block-size: 70%; }
+/* In right-to-left text the start side is the right, so centring pulls the other way. */
+:where([data-avatar-indicator]:dir(rtl)) { --flx-ui-avatar-indicator-shift: 50%; }
+
+:where([data-avatar-indicator][data-overlap='rectangular']) { --flx-ui-avatar-indicator-corner: 0%; }
+:where([data-avatar-indicator][data-placement='top-start']) {
+  --flx-ui-avatar-indicator-x: var(--flx-ui-avatar-indicator-corner);
+  --flx-ui-avatar-indicator-y: var(--flx-ui-avatar-indicator-corner);
+}
+:where([data-avatar-indicator][data-placement='top']) {
+  --flx-ui-avatar-indicator-x: 50%;
+  --flx-ui-avatar-indicator-y: 0%;
+}
+:where([data-avatar-indicator][data-placement='top-end']) {
+  --flx-ui-avatar-indicator-y: var(--flx-ui-avatar-indicator-corner);
+}
+:where([data-avatar-indicator][data-placement='end']) {
+  --flx-ui-avatar-indicator-x: 100%;
+  --flx-ui-avatar-indicator-y: 50%;
+}
+:where([data-avatar-indicator][data-placement='bottom']) {
+  --flx-ui-avatar-indicator-x: 50%;
+  --flx-ui-avatar-indicator-y: 100%;
+}
+:where([data-avatar-indicator][data-placement='bottom-start']) {
+  --flx-ui-avatar-indicator-x: var(--flx-ui-avatar-indicator-corner);
+}
+:where([data-avatar-indicator][data-placement='start']) {
+  --flx-ui-avatar-indicator-x: 0%;
+  --flx-ui-avatar-indicator-y: 50%;
+}
+
+:where([data-avatar-indicator][data-tone='neutral']) {
+  --flx-ui-avatar-indicator-bg: var(--flx-ui-color-fg-muted);
+  --flx-ui-avatar-indicator-fg: var(--flx-ui-color-bg);
+}
+:where([data-avatar-indicator]:is([data-tone='primary'], [data-tone='info'])) {
+  --flx-ui-avatar-indicator-bg: var(--flx-ui-color-primary);
+  --flx-ui-avatar-indicator-fg: var(--flx-ui-color-primary-fg);
+}
+:where([data-avatar-indicator][data-tone='warning']) {
+  --flx-ui-avatar-indicator-bg: var(--flx-ui-color-warning);
+  --flx-ui-avatar-indicator-fg: var(--flx-ui-color-warning-fg);
+}
+:where([data-avatar-indicator][data-tone='danger']) {
+  --flx-ui-avatar-indicator-bg: var(--flx-ui-color-danger);
+  --flx-ui-avatar-indicator-fg: var(--flx-ui-color-danger-fg);
 }
 
 /* ----------------------------------------------------------------------------

package/dist/css/bulk-editor.css

@@ -309,6 +309,9 @@
   padding: 0 var(--flx-ui-space-2);
   outline: none;
 }
+:where(.flx-ui-be-filter)::placeholder {
+  color: var(--flx-ui-color-fg-muted);
+}
 :where(.flx-ui-be-filter:focus) {
   border-color: var(--flx-ui-color-primary);
 }
@@ -414,7 +417,7 @@
   z-index: 4;
   user-select: none;
 }
-:where(.flx-ui-be-col-resize::after) {
+:where(.flx-ui-be-col-resize)::after {
   content: '';
   position: absolute;
   top: 20%;
@@ -425,8 +428,8 @@
   background: transparent;
   transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where(.flx-ui-be-colh:hover .flx-ui-be-col-resize::after),
-:where(.flx-ui-be-col-resize:hover::after) {
+:where(.flx-ui-be-colh:hover .flx-ui-be-col-resize)::after,
+:where(.flx-ui-be-col-resize:hover)::after {
   background: var(--flx-ui-color-primary);
 }
 

package/dist/css/card.css

@@ -5,16 +5,16 @@
 :where([data-card]) {
   display: flex;
   flex-direction: column;
-  background: var(--flx-ui-color-bg);
+  background: var(--flx-ui-card-bg, var(--flx-ui-color-bg));
   color: var(--flx-ui-color-fg);
-  border: 1px solid var(--flx-ui-color-border);
-  border-radius: var(--flx-ui-radius-lg);
-  box-shadow: var(--flx-ui-shadow-sm);
+  border: var(--flx-ui-card-border, 1px solid var(--flx-ui-color-border));
+  border-radius: var(--flx-ui-card-radius, var(--flx-ui-radius-lg));
+  box-shadow: var(--flx-ui-card-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);
+  background: var(--flx-ui-card-bg, var(--flx-ui-gray-2));
 }
 :where([data-card-header]) {
   display: flex;

package/dist/css/checkbox-radio.css

@@ -125,7 +125,7 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  :where([role='checkbox'][data-state]::after),
+  :where([role='checkbox'][data-state])::after,
   :where([role='radio'][data-state='checked'])::after {
     animation: none;
   }

package/dist/css/command.css

@@ -24,7 +24,7 @@
   border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
   outline: none;
 }
-:where([data-command-input]::placeholder) {
+:where([data-command-input])::placeholder {
   color: var(--flx-ui-color-fg-muted);
 }
 :where([data-command-list]) {

package/dist/css/glow.css

@@ -1,29 +1,38 @@
 @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.
+ * Glow: an emphasis ring, opt-in via `data-glow` on any element (button, icon
+ * button, surface, card). The ::after is drawn over the element's border and
+ * masked to a ring, so the element keeps its fill, its content and its clipping.
+ *
+ * Colours: --flx-ui-glow-from / -via / -to, defaulting to the primary colour and
+ * a light tint of it, so a tone or an accent carries through. Shape and motion:
+ * --flx-ui-glow-width (2px) and --flx-ui-glow-speed (one turn, 3s). The ring
+ * rests still and turns only while hovered or focused; paused, it costs nothing.
+ * `data-glow-side` lights one edge, which slides to the opposite side on hover.
+ * Skins restyle the ring with their own ::after rules.
  * ------------------------------------------------------------------------- */
 :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;
+}
+/* A card clips its content to its corners. It keeps doing so, with room for the ring. */
+:where([data-glow][data-card]) {
+  overflow: clip;
+  overflow-clip-margin: var(--flx-ui-glow-width, 2px);
 }
 :where([data-glow])::after {
   content: '';
   position: absolute;
-  inset: 0;
+  inset: calc(var(--flx-ui-border-width-thin) * -1);
   border-radius: inherit;
-  padding: 2px;
+  padding: var(--flx-ui-glow-width, 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)))
+    from var(--flx-ui-glow-angle),
+    var(--flx-ui-glow-from, var(--flx-ui-color-primary)),
+    var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-color-primary), #fff 45%)),
+    var(--flx-ui-glow-to, var(--flx-ui-glow-from, var(--flx-ui-color-primary))),
+    var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-color-primary), #fff 45%)),
+    var(--flx-ui-glow-from, var(--flx-ui-color-primary))
   );
   -webkit-mask:
     linear-gradient(#000 0 0) content-box,
@@ -33,79 +42,62 @@
     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);
+  animation: flx-ui-glow-turn var(--flx-ui-glow-speed, 3s) linear infinite paused;
+  transition:
+    opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard),
+    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)));
+:where([data-glow]:is(:hover, :focus-visible):not([data-disabled]))::after {
+  animation-play-state: running;
+  filter: drop-shadow(0 0 4px var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-color-primary), #fff 45%)));
+}
+:where([data-glow][data-disabled])::after {
+  opacity: 0.35;
+  animation: none;
 }
 
-/* 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. */
+/* Single edge: the full ring mask stays, and the colour is a band positioned on
+   one side, so only that edge and its corners light up. Moving the band is what
+   slides it to the opposite side on hover. */
 :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),
+    background-position var(--flx-ui-duration-slow) var(--flx-ui-ease-emphasized),
+    opacity var(--flx-ui-duration-normal) 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 {
+:where([data-glow][data-glow-side='top'], [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%,
+    var(--flx-ui-glow-from, var(--flx-ui-color-primary)) 38%,
+    var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-color-primary), #fff 45%)) 50%,
+    var(--flx-ui-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 {
+:where([data-glow][data-glow-side='left'], [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%,
+    var(--flx-ui-glow-from, var(--flx-ui-color-primary)) 38%,
+    var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-color-primary), #fff 45%)) 50%,
+    var(--flx-ui-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%;
-}
+:where([data-glow][data-glow-side='bottom'])::after { background-position: 50% 0%; }
+:where([data-glow][data-glow-side='bottom']:is(:hover, :focus-visible):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']:is(:hover, :focus-visible):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']:is(:hover, :focus-visible):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']:is(:hover, :focus-visible):not([data-disabled]))::after { background-position: 100% 50%; }
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-glow])::after {
@@ -114,14 +106,14 @@
 }
 }
 
-/* Registered so the angle can actually animate; unlayered like other keyframes. */
-@property --flx-angle {
+/* Registered so the angle can animate; unlayered like other keyframes. */
+@property --flx-ui-glow-angle {
   syntax: '<angle>';
   inherits: false;
   initial-value: 0deg;
 }
-@keyframes flx-border-spin {
+@keyframes flx-ui-glow-turn {
   to {
-    --flx-angle: 360deg;
+    --flx-ui-glow-angle: 360deg;
   }
 }

package/dist/css/input.css

@@ -3,14 +3,15 @@
 :where([data-input]) {
   box-sizing: border-box;
   width: 100%;
-  min-height: var(--flx-ui-size-md);
+  min-height: var(--flx-ui-field-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);
+  background: var(--flx-ui-field-bg, var(--flx-ui-color-bg));
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-field-border, var(--flx-ui-color-border-strong));
+  border-radius: var(--flx-ui-field-radius, var(--flx-ui-radius-md));
   transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
     border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
     box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
@@ -18,13 +19,14 @@
   min-height: calc(var(--flx-ui-size-md) * 2);
   resize: vertical;
 }
-:where([data-input]::placeholder) {
+:where([data-input], [data-input-group] > input)::placeholder {
   color: var(--flx-ui-color-fg-muted);
 }
 :where([data-input]:focus-visible) {
   outline: none;
+  background: var(--flx-ui-field-focus-bg, var(--flx-ui-field-bg, var(--flx-ui-color-bg)));
   border-color: var(--flx-ui-color-focus-ring);
-  box-shadow: var(--flx-ui-ctl-ring);
+  box-shadow: var(--flx-ui-field-focus-ring, var(--flx-ui-ctl-ring));
 }
 :where([data-input][data-invalid]) {
   border-color: var(--flx-ui-color-danger);
@@ -37,10 +39,10 @@
   -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) {
+: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;
 }
@@ -52,19 +54,21 @@
   align-items: center;
   gap: var(--flx-ui-space-2);
   width: 100%;
-  min-height: var(--flx-ui-size-md);
+  min-height: var(--flx-ui-field-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);
+  background: var(--flx-ui-field-bg, var(--flx-ui-color-bg));
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-field-border, var(--flx-ui-color-border-strong));
+  border-radius: var(--flx-ui-field-radius, var(--flx-ui-radius-md));
   transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
     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) {
+  background: var(--flx-ui-field-focus-bg, var(--flx-ui-field-bg, var(--flx-ui-color-bg)));
   border-color: var(--flx-ui-color-focus-ring);
-  box-shadow: var(--flx-ui-ctl-ring);
+  box-shadow: var(--flx-ui-field-focus-ring, var(--flx-ui-ctl-ring));
 }
 :where([data-input-group][data-invalid]) {
   border-color: var(--flx-ui-color-danger);

package/dist/css/number-field.css

@@ -36,8 +36,8 @@
   text-align: center;
   -moz-appearance: textfield;
 }
-:where([data-number-field-input]::-webkit-inner-spin-button),
-:where([data-number-field-input]::-webkit-outer-spin-button) {
+: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) {

package/dist/css/parts/listbox.css

@@ -29,6 +29,9 @@
   border-radius: var(--flx-ui-radius-sm);
   outline: none;
 }
+:where([data-listbox-search], [data-select-search])::placeholder {
+  color: var(--flx-ui-color-fg-muted);
+}
 :where([data-listbox-search]:focus-visible, [data-select-search]:focus-visible) {
   border-color: var(--flx-ui-color-focus-ring);
   box-shadow: var(--flx-ui-ctl-ring);
@@ -40,16 +43,16 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--flx-ui-space-2);
-  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
-  border-radius: var(--flx-ui-radius-sm);
+  padding: var(--flx-ui-item-padding, var(--flx-ui-space-2) var(--flx-ui-space-3));
+  border-radius: var(--flx-ui-item-radius, var(--flx-ui-radius-sm));
   color: var(--flx-ui-color-fg);
   cursor: pointer;
   user-select: none;
   outline: none;
 }
 :where([role='option'][data-active]) {
-  background: var(--flx-ui-color-primary-subtle);
-  color: var(--flx-ui-color-primary-active);
+  background: var(--flx-ui-item-active-bg, var(--flx-ui-color-primary-subtle));
+  color: var(--flx-ui-item-active-fg, var(--flx-ui-color-primary-active));
 }
 :where([role='option'][data-selected]) {
   font-weight: var(--flx-ui-font-weight-medium);

package/dist/css/parts/menu.css

@@ -4,20 +4,20 @@
   min-width: 200px;
   max-height: 320px;
   overflow-y: auto;
-  padding: var(--flx-ui-space-1);
-  background: var(--flx-ui-color-bg);
+  padding: var(--flx-ui-floating-padding, var(--flx-ui-space-1));
+  background: var(--flx-ui-floating-bg, 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);
+  border: var(--flx-ui-floating-border, var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border));
+  border-radius: var(--flx-ui-floating-radius, var(--flx-ui-radius-lg));
+  box-shadow: var(--flx-ui-floating-shadow, var(--flx-ui-shadow-lg));
   animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
 }
-:where([role='menuitem']) {
+:where([role='menuitem'], [role='menuitemradio']) {
   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);
+  padding: var(--flx-ui-item-padding, var(--flx-ui-space-2) var(--flx-ui-space-3));
+  border-radius: var(--flx-ui-item-radius, var(--flx-ui-radius-sm));
   cursor: pointer;
   outline: none;
   user-select: none;
@@ -29,15 +29,27 @@
   font: inherit;
   color: inherit;
 }
-:where([role='menuitem']:hover, [role='menuitem']:focus, [role='menuitem'][data-active]) {
-  background: var(--flx-ui-color-primary-subtle);
-  color: var(--flx-ui-color-primary-active);
+:where([role='menuitem']:hover, [role='menuitem']:focus, [role='menuitem'][data-active], [role='menuitemradio']:hover, [role='menuitemradio']:focus, [role='menuitemradio'][data-active]) {
+  background: var(--flx-ui-item-active-bg, var(--flx-ui-color-primary-subtle));
+  color: var(--flx-ui-item-active-fg, var(--flx-ui-color-primary-active));
   box-shadow: none;
 }
-:where([role='menuitem'][data-disabled]) {
+:where([role='menuitem'][data-disabled], [role='menuitemradio'][data-disabled]) {
   opacity: var(--flx-ui-opacity-disabled);
   pointer-events: none;
 }
+/* A setting's choices: the current one carries a check at the end. */
+:where([role='menuitemradio'])::after {
+  content: '';
+  width: 1em;
+  margin-left: auto;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--flx-ui-color-primary);
+}
+:where([role='menuitemradio'][aria-checked='true'])::after {
+  content: '✓';
+}
 :where([role='menu'] [role='separator']) {
   height: 1px;
   margin: var(--flx-ui-space-1) 0;
@@ -63,7 +75,7 @@
   flex-shrink: 0;
 }
 :where([role='menuitem'][aria-haspopup='menu'][data-state='open']) {
-  background: var(--flx-ui-color-primary-subtle);
-  color: var(--flx-ui-color-primary-active);
+  background: var(--flx-ui-item-active-bg, var(--flx-ui-color-primary-subtle));
+  color: var(--flx-ui-item-active-fg, var(--flx-ui-color-primary-active));
 }
 }

package/dist/css/parts/overlays.css

@@ -15,22 +15,22 @@
   transform: translate(-50%, -50%);
   width: min(460px, calc(100vw - var(--flx-ui-space-8)));
   padding: var(--flx-ui-space-6);
-  background: var(--flx-ui-color-bg);
+  background: var(--flx-ui-dialog-bg, 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-xl);
-  box-shadow: var(--flx-ui-shadow-xl);
+  border: var(--flx-ui-dialog-border, var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border));
+  border-radius: var(--flx-ui-dialog-radius, var(--flx-ui-radius-xl));
+  box-shadow: var(--flx-ui-dialog-shadow, var(--flx-ui-shadow-xl));
   animation: flx-ui-dialog-in var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
 }
 
 :where([role='dialog'][data-placement]) {
   min-width: 220px;
   padding: var(--flx-ui-space-4);
-  background: var(--flx-ui-color-bg);
+  background: var(--flx-ui-floating-bg, 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);
+  border: var(--flx-ui-floating-border, var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border));
+  border-radius: var(--flx-ui-floating-radius, var(--flx-ui-radius-lg));
+  box-shadow: var(--flx-ui-floating-shadow, var(--flx-ui-shadow-lg));
   animation: flx-ui-pop-in var(--flx-ui-duration-fast) var(--flx-ui-ease-emphasized);
 }
 }

package/dist/css/pin-input.css

@@ -25,7 +25,7 @@
     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) {
+:where([data-pin-input-field])::placeholder {
   color: var(--flx-ui-color-fg-muted);
 }
 :where([data-pin-input-field]:focus-visible) {

package/dist/css/select-combobox.css

@@ -7,16 +7,17 @@
   display: inline-flex;
   align-items: center;
   gap: var(--flx-ui-space-2);
-  height: var(--flx-ui-size-md);
+  height: var(--flx-ui-field-height, var(--flx-ui-size-md));
   min-width: 200px;
   padding: 0 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);
+  background: var(--flx-ui-field-bg, var(--flx-ui-color-bg));
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-field-border, var(--flx-ui-color-border-strong));
+  border-radius: var(--flx-ui-field-radius, var(--flx-ui-radius-md));
   cursor: pointer;
   transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
     border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
     box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
@@ -29,8 +30,9 @@
 }
 :where(button[role='combobox']:focus-visible) {
   outline: none;
+  background: var(--flx-ui-field-focus-bg, var(--flx-ui-field-bg, var(--flx-ui-color-bg)));
   border-color: var(--flx-ui-color-focus-ring);
-  box-shadow: var(--flx-ui-ctl-ring);
+  box-shadow: var(--flx-ui-field-focus-ring, var(--flx-ui-ctl-ring));
 }
 :where(button[role='combobox'])::after {
   content: '';
@@ -51,8 +53,9 @@
   padding-right: var(--flx-ui-space-1);
 }
 :where([data-combobox-control]:focus-within) {
+  background: var(--flx-ui-field-focus-bg, var(--flx-ui-field-bg, var(--flx-ui-color-bg)));
   border-color: var(--flx-ui-color-focus-ring);
-  box-shadow: var(--flx-ui-ctl-ring);
+  box-shadow: var(--flx-ui-field-focus-ring, var(--flx-ui-ctl-ring));
 }
 :where([data-combobox-control] input[role='combobox']) {
   flex: 1;
@@ -72,7 +75,7 @@
   box-shadow: none;
   outline: none;
 }
-:where(input[role='combobox']::placeholder) {
+:where(input[role='combobox'])::placeholder {
   color: var(--flx-ui-color-fg-muted);
 }
 :where([data-combobox-control] > button) {