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

package/dist/css/carousel.css

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

package/dist/css/checkbox-radio.css

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

package/dist/css/chip.css

@@ -0,0 +1,175 @@
+@layer flx.components {
+/* Chip (from @fluixi-ui/chip). An interactive pill: a `data-variant` fill style
+   crossed with a semantic `data-tone`, like Badge — but taller, with room for a
+   checkbox, media slot and remove button. Tone sets four custom props and the
+   variants consume them, so tone × variant needs no per-combo rules. */
+:where([data-chip]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  max-width: 100%;
+  min-width: 0;
+  padding-inline: var(--flx-ui-space-2);
+  border-radius: var(--flx-ui-radius-full);
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-medium);
+  line-height: 1.35;
+  border: var(--flx-ui-border-width-thin) solid transparent;
+  vertical-align: middle;
+
+  /* neutral defaults; each tone overrides these four. */
+  --flx-ui-chip-color: var(--flx-ui-color-fg-muted);
+  --flx-ui-chip-text: var(--flx-ui-color-fg-muted);
+  --flx-ui-chip-bg: var(--flx-ui-color-bg-muted);
+  --flx-ui-chip-on: var(--flx-ui-color-bg);
+}
+
+:where([data-chip][data-size='md']) { block-size: var(--flx-ui-space-8); }
+:where([data-chip][data-size='sm']) {
+  block-size: var(--flx-ui-space-6);
+  font-size: var(--flx-ui-font-size-xs);
+  padding-inline: var(--flx-ui-space-1-5, var(--flx-ui-space-1));
+}
+
+:where([data-chip][data-tone='primary']),
+:where([data-chip][data-tone='info']) {
+  --flx-ui-chip-color: var(--flx-ui-color-primary);
+  --flx-ui-chip-text: var(--flx-ui-color-primary-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-primary-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-primary-fg);
+}
+:where([data-chip][data-tone='success']) {
+  --flx-ui-chip-color: var(--flx-ui-color-success);
+  --flx-ui-chip-text: var(--flx-ui-color-success-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-success-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-success-fg);
+}
+:where([data-chip][data-tone='warning']) {
+  --flx-ui-chip-color: var(--flx-ui-color-warning);
+  --flx-ui-chip-text: var(--flx-ui-color-warning-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-warning-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-warning-fg);
+}
+:where([data-chip][data-tone='danger']) {
+  --flx-ui-chip-color: var(--flx-ui-color-danger);
+  --flx-ui-chip-text: var(--flx-ui-color-danger-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-danger-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-danger-fg);
+}
+
+:where([data-chip][data-variant='soft']) {
+  background: var(--flx-ui-chip-bg);
+  color: var(--flx-ui-chip-text);
+}
+:where([data-chip][data-variant='solid']) {
+  background: var(--flx-ui-chip-color);
+  color: var(--flx-ui-chip-on);
+}
+:where([data-chip][data-variant='outline']) {
+  background: transparent;
+  color: var(--flx-ui-chip-text);
+  border-color: var(--flx-ui-chip-color);
+}
+
+/* A selected filter chip reads as "on" regardless of variant. */
+:where([data-chip][data-selected]) {
+  background: var(--flx-ui-chip-color);
+  color: var(--flx-ui-chip-on);
+  border-color: var(--flx-ui-chip-color);
+}
+
+:where([data-chip][data-interactive]:not([data-disabled])) { cursor: pointer; }
+
+:where([data-chip][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+/* The label truncates rather than pushing the remove button out of the pill —
+   a chip sits in a row of chips and must not grow unbounded. */
+:where([data-chip-label]),
+:where([data-chip-action]) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The action is a real <button>; strip its chrome so it reads as the chip's label. */
+:where([data-chip-action]) {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: inherit;
+}
+
+:where([data-chip-media]) {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  margin-inline-start: calc(var(--flx-ui-space-1) * -1);
+}
+:where([data-chip-media]) :where(img, [data-avatar]) {
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  border-radius: var(--flx-ui-radius-full);
+  object-fit: cover;
+}
+
+:where([data-chip-remove]) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin-inline-end: calc(var(--flx-ui-space-1) * -1);
+  /* A comfortable target that still fits the pill: the glyph is small, the
+     hit area is not. */
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  border-radius: var(--flx-ui-radius-full);
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-chip-remove]:hover) {
+  opacity: 1;
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+:where([data-chip-remove]:disabled) { cursor: not-allowed; }
+
+:where([data-chip-action]:focus-visible),
+:where([data-chip-remove]:focus-visible),
+:where([data-chip-checkbox]:focus-visible) {
+  outline: var(--flx-ui-border-width-thick) solid var(--flx-ui-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Shrink the checkbox to chip scale without touching the checkbox component. */
+:where([data-chip-checkbox]) {
+  flex: none;
+  block-size: 1.15em;
+  inline-size: 1.15em;
+  margin-inline-start: calc(var(--flx-ui-space-1) * -1);
+}
+
+:where([data-chip-group]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+  min-width: 0;
+}
+:where([data-chip-group][data-size='sm']) { gap: var(--flx-ui-space-1); }
+}

package/dist/css/date-field.css

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

package/dist/css/date-picker.css

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

package/dist/css/descriptions.css

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

package/dist/css/drawer.css

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

package/dist/css/empty.css

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

package/dist/css/fab.css

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

package/dist/css/field-variants.css

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