@fluixi-ui/tokens 0.4.0-alpha.8 → 0.4.0-alpha.9

package/dist/css/avatar.css

@@ -33,4 +33,23 @@
   width: 100%;
   height: 100%;
 }
+
+/* ----------------------------------------------------------------------------
+ * Avatar group — overlapping cluster
+ * ------------------------------------------------------------------------- */
+:where([data-avatar-group]) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+:where([data-avatar-group]) > * {
+  /* A ring in the page background so the overlap reads as separate discs. */
+  box-shadow: 0 0 0 2px var(--flx-ui-color-bg);
+}
+:where([data-avatar-group]) > * + * {
+  margin-inline-start: calc(-1 * var(--flx-ui-avatar-group-spacing, 8px));
+}
+:where([data-avatar-group-overflow]) {
+  font-size: var(--flx-ui-font-size-xs);
+}
 }

package/dist/css/badge.css

@@ -1,13 +1,136 @@
 @layer flx.components {
-/* Badge */
-:where([data-variant].flx-ui-badge, .flx-ui-badge[data-variant]) {
-  height: auto;
+/* Badge (from @fluixi-ui/badge). A small status/label pill: a `data-variant` fill
+   style (soft/solid/outline) crossed with a semantic `data-tone`. Each tone sets
+   three custom props — the strong colour, the soft background, and the on-solid
+   foreground — and the variants consume them, so tone × variant needs no per-combo
+   rules. */
+:where([data-badge]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
   min-width: 0;
-  padding: 2px var(--flx-ui-space-2);
+  /* A compact chip, not a button: tight vertical padding + line-height so the
+     height tracks the text, no wide tracking. */
+  padding: 1px var(--flx-ui-space-2);
   border-radius: var(--flx-ui-radius-full);
   font-size: var(--flx-ui-font-size-xs);
   font-weight: var(--flx-ui-font-weight-semibold);
-  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  line-height: 1.35;
+  white-space: nowrap;
+  border: var(--flx-ui-border-width-thin) solid transparent;
   box-shadow: none;
+  /* Each tone sets four props: `color` (strong — solid fill / outline border),
+     `text` (a legible-on-tint shade — soft/outline label), `bg` (soft fill) and
+     `on` (label on the solid fill). neutral defaults: */
+  --flx-ui-badge-color: var(--flx-ui-color-fg-muted);
+  --flx-ui-badge-text: var(--flx-ui-color-fg-muted);
+  --flx-ui-badge-bg: var(--flx-ui-color-bg-muted);
+  --flx-ui-badge-on: var(--flx-ui-color-bg);
+}
+
+:where([data-badge][data-tone='primary']),
+:where([data-badge][data-tone='info']) {
+  --flx-ui-badge-color: var(--flx-ui-color-primary);
+  --flx-ui-badge-text: var(--flx-ui-color-primary-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-primary-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-primary-fg);
+}
+:where([data-badge][data-tone='success']) {
+  --flx-ui-badge-color: var(--flx-ui-color-success);
+  --flx-ui-badge-text: var(--flx-ui-color-success-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-success-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-success-fg);
+}
+:where([data-badge][data-tone='warning']) {
+  --flx-ui-badge-color: var(--flx-ui-color-warning);
+  --flx-ui-badge-text: var(--flx-ui-color-warning-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-warning-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-warning-fg);
+}
+:where([data-badge][data-tone='danger']) {
+  --flx-ui-badge-color: var(--flx-ui-color-danger);
+  --flx-ui-badge-text: var(--flx-ui-color-danger-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-danger-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-danger-fg);
+}
+
+:where([data-badge][data-variant='soft']) {
+  background: var(--flx-ui-badge-bg);
+  color: var(--flx-ui-badge-text);
+}
+:where([data-badge][data-variant='solid']) {
+  background: var(--flx-ui-badge-color);
+  color: var(--flx-ui-badge-on);
+}
+:where([data-badge][data-variant='outline']) {
+  color: var(--flx-ui-badge-text);
+  border-color: var(--flx-ui-badge-color);
+}
+
+/* ----------------------------------------------------------------------------
+ * Overlay badge (BadgeAnchor) — a count / dot pinned to a corner of a wrapped
+ * element (a Material-style notification badge). Reuses the [data-badge] fill.
+ * ------------------------------------------------------------------------- */
+:where([data-badge-anchor]) {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+:where([data-badge][data-overlay]) {
+  position: absolute;
+  z-index: 1;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 var(--flx-ui-space-1);
+  justify-content: center;
+  font-size: var(--flx-ui-font-size-2xs, 0.6875rem);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  /* A surface-coloured ring so the badge reads as floating above the element. */
+  box-shadow: 0 0 0 2px var(--flx-ui-color-bg);
+}
+:where([data-badge][data-overlay][data-dot]) {
+  min-width: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+:where([data-badge-anchor][data-placement='top-end']) > [data-overlay] {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+:where([data-badge-anchor][data-placement='top-start']) > [data-overlay] {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+:where([data-badge-anchor][data-placement='bottom-end']) > [data-overlay] {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+:where([data-badge-anchor][data-placement='bottom-start']) > [data-overlay] {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+/* Circular anchor (avatar / circle): nudge the badge in along the diagonal so it
+   sits on the round edge instead of the bounding-box corner. */
+:where([data-badge-anchor][data-overlap='circular'][data-placement='top-end']) > [data-overlay] {
+  top: 14%;
+  right: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='top-start']) > [data-overlay] {
+  top: 14%;
+  left: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='bottom-end']) > [data-overlay] {
+  bottom: 14%;
+  right: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='bottom-start']) > [data-overlay] {
+  bottom: 14%;
+  left: 14%;
 }
 }

package/dist/css/bulk-editor.css

@@ -183,12 +183,8 @@
   align-items: center;
   justify-content: center;
 }
-:where(.flx-ui-be-check) {
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-  accent-color: var(--flx-ui-color-primary);
-}
+/* Selection checkboxes render the <Checkbox> component ([role='checkbox']),
+   which styles itself; the wrap just centres it in the cell. */
 
 /* Fill handle on the active cell */
 :where(.flx-ui-be-fill-handle) {
@@ -406,17 +402,6 @@
   text-align: left;
 }
 
-/* Bulk editor — column header select-all checkbox */
-:where(.flx-ui-be-head-check) {
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  accent-color: var(--flx-ui-color-primary);
-  flex-shrink: 0;
-}
-:where(.flx-ui-be-check:disabled) {
-  cursor: not-allowed;
-}
 
 /* Bulk editor — column resize grip */
 :where(.flx-ui-be-col-resize) {

package/dist/css/button.css

@@ -1,6 +1,8 @@
 @layer flx.components {
 /* ----------------------------------------------------------------------------
- * Button (and any [data-variant] control, e.g. dialog triggers)
+ * Button (and any [data-variant] control, e.g. dialog triggers). Badges also
+ * carry [data-variant], so every rule here excludes [data-badge] — a badge must
+ * never pick up button sizing/colour.
  * ------------------------------------------------------------------------- */
 
 /* Tone (data-tone) is orthogonal to variant: it remaps the button's own
@@ -35,7 +37,7 @@
   --flx-ui-color-primary-fg: var(--flx-ui-color-bg);
   --flx-ui-color-primary-subtle: var(--flx-ui-color-bg-muted);
 }
-:where([data-variant]) {
+:where([data-variant]:not([data-badge])) {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -63,13 +65,13 @@
     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-variant][data-size='sm']) {
+:where([data-variant]:not([data-badge])[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']) {
+:where([data-variant]:not([data-badge])[data-size='lg']) {
   height: var(--flx-ui-size-lg);
   min-width: var(--flx-ui-size-lg);
   padding: 0 var(--flx-ui-space-5);
@@ -78,41 +80,42 @@
 
 /* Solid: the primary action — a flat, confident accent. Depth comes from the
    color step change on interaction, not from shadow or sheen. */
-:where([data-variant='solid']) {
+:where([data-variant='solid']:not([data-badge])) {
   background: var(--flx-ui-color-primary);
   color: var(--flx-ui-color-primary-fg);
 }
-:where([data-variant='solid']:hover:not([data-disabled])) {
+:where([data-variant='solid']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-primary-hover);
 }
-:where([data-variant='solid']:active:not([data-disabled])) {
+:where([data-variant='solid']:not([data-badge]):active:not([data-disabled])) {
   background: var(--flx-ui-color-primary-active);
 }
 
-/* Soft: a tinted, low-key primary. */
-:where([data-variant='soft']) {
-  background: var(--flx-ui-color-primary-subtle);
+/* Soft: a tinted, low-key primary. Deepened a touch over the bare subtle tint so
+   it carries enough weight to read as a control, then steps up on hover. */
+:where([data-variant='soft']:not([data-badge])) {
+  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 10%);
   color: var(--flx-ui-color-primary-active);
 }
-:where([data-variant='soft']:hover:not([data-disabled])) {
-  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 12%);
+:where([data-variant='soft']:not([data-badge]):hover:not([data-disabled])) {
+  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 20%);
 }
 
 /* Outline: a flat hairline-bordered control. */
-:where([data-variant='outline']) {
+:where([data-variant='outline']:not([data-badge])) {
   border-color: var(--flx-ui-color-border-strong);
   background: var(--flx-ui-color-bg);
 }
-:where([data-variant='outline']:hover:not([data-disabled])) {
+:where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-bg-subtle);
   border-color: var(--flx-ui-color-fg-muted);
 }
 
 /* Ghost: text-only until hovered. */
-:where([data-variant='ghost']) {
+:where([data-variant='ghost']:not([data-badge])) {
   color: var(--flx-ui-color-fg);
 }
-:where([data-variant='ghost']:hover:not([data-disabled])) {
+:where([data-variant='ghost']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-bg-muted);
 }
 
@@ -121,6 +124,25 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+/* Buttons get a flat, neutral disabled instead of a dimmed accent (which reads
+   muddy). Filled variants drop to a grey fill; outline/ghost stay flat. */
+:where([data-variant]:not([data-badge])[data-disabled]) {
+  opacity: 1;
+  box-shadow: none;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-variant='solid']:not([data-badge])[data-disabled]),
+:where([data-variant='soft']:not([data-badge])[data-disabled]) {
+  background: var(--flx-ui-color-bg-muted);
+  border-color: transparent;
+}
+:where([data-variant='outline']:not([data-badge])[data-disabled]) {
+  background: transparent;
+  border-color: var(--flx-ui-color-border);
+}
+:where([data-variant='ghost']:not([data-badge])[data-disabled]) {
+  background: transparent;
+}
 
 /* The signature focus ring: a surface-colored gap then an accent halo. */
 :where(:focus-visible) {

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

package/dist/css/glow.css

@@ -50,19 +50,23 @@
 :where([data-glow][data-glow-side])::after {
   animation: none;
   background-repeat: no-repeat;
+  /* A soft resting glow so the lit edge reads as intentional even before hover. */
+  filter: drop-shadow(0 0 2px var(--flx-glow-via, var(--flx-ui-color-primary)));
   transition:
     background-position 450ms var(--flx-ui-ease-standard),
     filter var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
 }
+/* Wider colour plateau (12%→88%) so the whole edge lights evenly and only the
+   far edge fades, rather than a thin central sliver. */
 :where([data-glow][data-glow-side='top'])::after,
 :where([data-glow][data-glow-side='bottom'])::after {
   background-image: linear-gradient(
     to bottom,
-    transparent 28%,
-    var(--flx-glow-from, var(--flx-ui-color-primary)) 44%,
+    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)) 56%,
-    transparent 72%
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 62%,
+    transparent 88%
   );
   background-size: 100% 200%;
 }
@@ -70,11 +74,11 @@
 :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%,
+    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)) 56%,
-    transparent 72%
+    var(--flx-glow-from, var(--flx-ui-color-primary)) 62%,
+    transparent 88%
   );
   background-size: 200% 100%;
 }

package/dist/css/icon-button.css

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