@fluixi-ui/tokens 0.4.0-alpha.0 → 0.4.0-alpha.10

package/dist/css/sidenav.css

@@ -3,9 +3,13 @@
  * Sidenav (persistent navigation rail)
  * ------------------------------------------------------------------------- */
 :where([data-sidenav]) {
+  /* Exposed so a consumer's shell can read the live rail width (it also drives the
+     rail's own width, so an in-flow flex/grid sidebar makes the main area adapt
+     automatically as this transitions). */
+  --flx-ui-sidenav-width: 16rem;
   display: flex;
   flex-direction: column;
-  width: 16rem;
+  width: var(--flx-ui-sidenav-width);
   height: 100%;
   background: var(--flx-ui-color-bg);
   color: var(--flx-ui-color-fg);
@@ -17,8 +21,14 @@
 :where([data-sidenav][data-side='right']) {
   border-left: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
 }
-:where([data-sidenav][data-collapsed]) {
-  width: 3.75rem;
+/* Compact = icon rail. Hidden = fully off-canvas (zero width, content clipped). */
+:where([data-sidenav][data-state='compact']) {
+  --flx-ui-sidenav-width: 3.75rem;
+}
+:where([data-sidenav][data-state='hidden']) {
+  --flx-ui-sidenav-width: 0px;
+  overflow: hidden;
+  border-inline-width: 0;
 }
 
 :where([data-sidenav-header]) {
@@ -65,8 +75,11 @@
   transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
               color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where([data-sidenav-link]:hover) {
-  background: var(--flx-ui-color-bg-subtle);
+/* Hover uses an fg-relative tint (not gray-2, which is invisible on the gray-1
+   rail) so it stays legible on any surface, light or dark. `:not([data-active])`
+   keeps the active pill from being flattened by hover. */
+:where([data-sidenav-link]:hover:not([data-active])) {
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
   color: var(--flx-ui-color-fg);
 }
 :where([data-sidenav-link][data-active]) {
@@ -99,6 +112,7 @@
   justify-content: center;
   width: 2rem;
   height: 2rem;
+  flex-shrink: 0;
   padding: 0;
   background: transparent;
   border: none;
@@ -106,22 +120,178 @@
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
 }
+/* A trigger in the header sits at the trailing edge on its own — the consumer
+   drops in <SidenavTrigger/> without wiring any layout. On the compact icon rail
+   the header centres its contents, so the auto-margin is dropped. */
+:where([data-sidenav-header] [data-sidenav-trigger]) {
+  margin-inline-start: auto;
+}
+:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-header] [data-sidenav-trigger]) {
+  margin-inline-start: 0;
+}
 :where([data-sidenav-trigger]:hover) {
-  background: var(--flx-ui-color-bg-subtle);
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
   color: var(--flx-ui-color-fg);
 }
 :where([data-sidenav-trigger]:focus-visible) {
   outline: var(--flx-ui-ctl-ring);
   outline-offset: 2px;
 }
+/* Built-in trigger icon: a chevron pointing in the collapse direction, flipping
+   between expanded and compact (and mirrored for a right-side rail). */
+:where([data-sidenav-trigger-icon]) {
+  display: block;
+  width: 1.15em;
+  height: 1.15em;
+  background: currentColor;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  transform: rotate(90deg);
+  transition: transform var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav][data-collapsed] [data-sidenav-trigger-icon]),
+:where([data-sidenav][data-side='right'] [data-sidenav-trigger-icon]) {
+  transform: rotate(-90deg);
+}
+:where([data-sidenav][data-side='right'][data-collapsed] [data-sidenav-trigger-icon]) {
+  transform: rotate(90deg);
+}
 
-/* Collapsed rail: hide text labels, center the icons. */
-:where([data-sidenav][data-collapsed] [data-sidenav-label]),
-:where([data-sidenav][data-collapsed] [data-sidenav-group-label]) {
+/* Compact icon rail: collapse each row to its leading icon. Scoped to `compact`
+   (not the mobile drawer, which is full-width; `hidden` is clipped anyway).
+   Applies to DIRECT rail rows ONLY — a sub's flyout content is portalled OUTSIDE
+   [data-sidenav], so these descendant rules never reach it (subitems keep their
+   labels in the popup). Three ways an element hides in compact:
+     1. [data-sidenav-label] / [data-sidenav-group-label] — the recommended wrapper.
+     2. [data-sidenav-hide-compact] — an explicit opt-in marker for ANY element.
+     3. auto — any non-leading child of a link / sub-trigger (the first child is the
+        icon), so unmarked label text collapses with no extra markup. */
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-label], [data-sidenav-group-label], [data-sidenav-hide-compact]) {
   display: none;
 }
-:where([data-sidenav][data-collapsed] [data-sidenav-link]) {
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-link], [data-sidenav-sub-trigger]) > :not(:first-child) {
+  display: none;
+}
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-link], [data-sidenav-sub-trigger]) {
   justify-content: center;
+  gap: 0;
   padding-inline: 0;
 }
+
+/* ── Nested items (submenus) ──────────────────────────────────────────────── */
+/* The parent row reuses [data-sidenav-link] styling; add the disclosure chevron. */
+:where([data-sidenav-sub-trigger]) {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+:where([data-sidenav-sub-trigger])::after {
+  content: '';
+  margin-inline-start: auto;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background: currentColor;
+  mask: var(--flx-ui-chevron-down, none) center / contain no-repeat;
+  -webkit-mask: var(--flx-ui-chevron-down, none) center / contain no-repeat;
+  transition: transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav-sub-trigger][data-open])::after {
+  transform: rotate(180deg);
+}
+/* Hide the chevron on the compact rail (the flyout replaces it). */
+:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-sub-trigger])::after {
+  display: none;
+}
+
+/* Inline nested list (expanded / mobile). Collapsed via max-height so every child
+   hides (a grid-rows 0fr trick only collapses a single grid child — the rest fall
+   into implicit auto rows and stay visible). The cap is generous; nav lists are short. */
+:where([data-sidenav-sub-content]:not([data-flyout])) {
+  margin: 0;
+  padding: 0 0 0 var(--flx-ui-space-5);
+  list-style: none;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    max-height var(--flx-ui-duration-normal) var(--flx-ui-ease-standard),
+    opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav-sub-content]:not([data-flyout])[data-open]) {
+  max-height: 40rem;
+  opacity: 1;
+}
+
+/* Flyout panel (compact rail): a floating anchored menu of the nested links. */
+:where([data-sidenav-sub-content][data-flyout]) {
+  position: absolute;
+  z-index: var(--flx-ui-z-popover, 40);
+  min-width: 12rem;
+  margin: 0;
+  padding: var(--flx-ui-space-1);
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 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-lg);
+  box-shadow: var(--flx-ui-shadow-lg);
+}
+
+/* ── Mobile overlay drawer ────────────────────────────────────────────────── */
+:where([data-sidenav-overlay]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--flx-ui-z-modal, 50);
+}
+:where([data-sidenav-overlay][data-state='closed']) {
+  pointer-events: none;
+}
+:where([data-sidenav-backdrop]) {
+  position: fixed;
+  inset: 0;
+  background: var(--flx-ui-color-overlay);
+  opacity: 0;
+  transition: opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav-backdrop][data-state='open']) {
+  opacity: 1;
+}
+/* The overlay rail is full-height, positioned against its side, always expanded. */
+:where([data-sidenav][data-mobile]) {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  --flx-ui-sidenav-width: 16rem;
+  max-width: 85vw;
+  box-shadow: var(--flx-ui-shadow-xl);
+  animation: flx-sidenav-in var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav][data-mobile][data-side='left']) {
+  left: 0;
+}
+:where([data-sidenav][data-mobile][data-side='right']) {
+  right: 0;
+}
+@keyframes flx-sidenav-in {
+  from {
+    transform: translateX(var(--flx-ui-sidenav-enter-x, -100%));
+  }
+}
+:where([data-sidenav][data-mobile][data-side='right']) {
+  --flx-ui-sidenav-enter-x: 100%;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-sidenav][data-mobile]) {
+    animation: none;
+  }
+}
 }

package/dist/css/slider.css

@@ -42,7 +42,7 @@
   left: 0;
   width: 100%;
 }
-:where([role='slider']) {
+:where([data-slider] [role='slider']) {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -52,15 +52,15 @@
   box-shadow: var(--flx-ui-shadow-sm);
   cursor: grab;
 }
-:where([role='slider'][data-orientation='horizontal']) {
+:where([data-slider] [role='slider'][data-orientation='horizontal']) {
   top: 50%;
   transform: translate(-50%, -50%);
 }
-:where([role='slider'][data-orientation='vertical']) {
+:where([data-slider] [role='slider'][data-orientation='vertical']) {
   left: 50%;
   transform: translate(-50%, 50%);
 }
-:where([role='slider']:focus-visible) {
+:where([data-slider] [role='slider']:focus-visible) {
   outline: none;
   box-shadow: var(--flx-ui-ctl-ring);
 }

package/dist/css/speed-dial.css

@@ -0,0 +1,85 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Speed dial — a FAB trigger with actions that fan out in a direction.
+ * ------------------------------------------------------------------------- */
+:where([data-speed-dial]) {
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+}
+:where([data-speed-dial-actions]) {
+  position: absolute;
+  display: flex;
+  gap: var(--flx-ui-space-3);
+  align-items: center;
+  opacity: 1;
+  transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+/* Off by default — the actions float bare. `filled` opts into a surface. */
+:where([data-speed-dial-actions][data-filled]) {
+  gap: var(--flx-ui-space-2);
+  padding: var(--flx-ui-space-2);
+  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);
+}
+/* Hidden (and unfocusable) until the dial opens. */
+:where([data-speed-dial][data-state='closed']) [data-speed-dial-actions] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Fan-out direction, anchored to the trigger. */
+:where([data-speed-dial][data-direction='up']) [data-speed-dial-actions] {
+  flex-direction: column-reverse;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--flx-ui-space-3);
+}
+:where([data-speed-dial][data-direction='down']) [data-speed-dial-actions] {
+  flex-direction: column;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--flx-ui-space-3);
+}
+:where([data-speed-dial][data-direction='left']) [data-speed-dial-actions] {
+  flex-direction: row-reverse;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--flx-ui-space-3);
+}
+:where([data-speed-dial][data-direction='right']) [data-speed-dial-actions] {
+  flex-direction: row;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--flx-ui-space-3);
+}
+
+/* An action + its optional label. */
+:where([data-speed-dial-action-wrap]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+}
+/* For vertical directions the label reads to the left of the button. */
+:where([data-speed-dial][data-direction='down']) [data-speed-dial-action-wrap],
+:where([data-speed-dial][data-direction='up']) [data-speed-dial-action-wrap] {
+  flex-direction: row-reverse;
+}
+:where([data-speed-dial-action-label]) {
+  padding: 2px var(--flx-ui-space-2);
+  border-radius: var(--flx-ui-radius-sm);
+  background: var(--flx-ui-color-fg);
+  color: var(--flx-ui-color-bg);
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-medium);
+  white-space: nowrap;
+  box-shadow: var(--flx-ui-shadow-sm);
+}
+}

package/dist/css/statistic.css

@@ -0,0 +1,34 @@
+@layer flx.components {
+/* Statistic (from @fluixi-ui/statistic). A KPI: caption, big value, and an
+   optional delta line coloured by the container's data-trend. */
+:where([data-statistic]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-1);
+  min-width: 0;
+}
+:where([data-statistic-label]) {
+  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);
+  text-transform: uppercase;
+}
+:where([data-statistic-value]) {
+  font-size: var(--flx-ui-font-size-2xl);
+  font-weight: var(--flx-ui-font-weight-bold);
+  color: var(--flx-ui-color-fg);
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-statistic-delta]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-statistic][data-trend='up'] [data-statistic-delta]) { color: var(--flx-ui-color-success); }
+:where([data-statistic][data-trend='down'] [data-statistic-delta]) { color: var(--flx-ui-color-danger); }
+}

package/dist/css/stepper.css

@@ -66,9 +66,9 @@
   font-size: var(--flx-ui-font-size-sm);
   font-weight: var(--flx-ui-font-weight-medium);
   line-height: 1;
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              border-color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-stepper-indicator][data-state='active']) {
   border-color: var(--flx-ui-color-primary);

package/dist/css/surface.css

@@ -0,0 +1,71 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Surface — an elevated container primitive. Background + radius are always set;
+ * elevation (shadow) and border are opt-in via data attributes, so it backs
+ * everything from a flat panel to a raised card or floating sheet.
+ * ------------------------------------------------------------------------- */
+:where([data-surface]) {
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border-radius: var(--flx-ui-radius-lg);
+  transition:
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-surface][data-bordered]) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+
+:where([data-surface][data-radius='none']) {
+  border-radius: 0;
+}
+:where([data-surface][data-radius='sm']) {
+  border-radius: var(--flx-ui-radius-sm);
+}
+:where([data-surface][data-radius='md']) {
+  border-radius: var(--flx-ui-radius-md);
+}
+:where([data-surface][data-radius='lg']) {
+  border-radius: var(--flx-ui-radius-lg);
+}
+:where([data-surface][data-radius='xl']) {
+  border-radius: var(--flx-ui-radius-xl);
+}
+:where([data-surface][data-radius='full']) {
+  border-radius: var(--flx-ui-radius-full);
+}
+
+:where([data-surface][data-elevation='0']) {
+  box-shadow: none;
+}
+:where([data-surface][data-elevation='1']) {
+  box-shadow: var(--flx-ui-shadow-sm);
+}
+:where([data-surface][data-elevation='2']) {
+  box-shadow: var(--flx-ui-shadow-md);
+}
+:where([data-surface][data-elevation='3']) {
+  box-shadow: var(--flx-ui-shadow-lg);
+}
+:where([data-surface][data-elevation='4']) {
+  box-shadow: var(--flx-ui-shadow-xl);
+}
+
+/* In dark, shadows barely read on a near-black page, so elevation is tonal — the
+   surface lightens as it rises — with a hairline edge for definition. */
+[data-theme='dark'] :where([data-surface][data-elevation='1']) {
+  background: var(--flx-ui-gray-2);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='2']) {
+  background: var(--flx-ui-gray-3);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='3']) {
+  background: var(--flx-ui-gray-4);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='4']) {
+  background: var(--flx-ui-gray-5);
+}
+[data-theme='dark'] :where([data-surface]:not([data-elevation='0']):not([data-bordered])) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+}

package/dist/css/switch.css

@@ -30,4 +30,16 @@
 :where([role='switch'][data-state='checked'])::after {
   transform: translateX(16px);
 }
+:where([role='switch']:hover:not([data-disabled])) {
+  background: var(--flx-ui-color-border-strong);
+  filter: brightness(0.97);
+}
+:where([role='switch']:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([role='switch'][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
 }

package/dist/css/table.css

@@ -170,4 +170,15 @@
 :where([data-pinned='right']) {
   box-shadow: inset 1px 0 0 var(--flx-ui-color-border);
 }
+
+/* Compact density — tighter padding + smaller type for dense data tables.
+ * Opt in with `data-density="compact"` on the table. */
+[data-table][data-density='compact'] [data-table-head],
+[data-table][data-density='compact'] [data-table-cell],
+[data-table][data-density='compact'] [data-table-footer] [data-table-cell] {
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+}
+[data-table][data-density='compact'] [data-table-cell] {
+  font-size: var(--flx-ui-font-size-xs);
+}
 }

package/dist/css/tabs.css

@@ -19,13 +19,22 @@
   margin-bottom: -1px;
   transition: color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where([role='tab']:hover) {
+:where([role='tab']:hover:not([data-disabled])) {
   color: var(--flx-ui-color-fg);
 }
+:where([role='tab']:focus-visible) {
+  outline: none;
+  border-radius: var(--flx-ui-radius-sm);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
 :where([role='tab'][data-state='active']) {
   color: var(--flx-ui-color-primary-active);
   border-bottom-color: var(--flx-ui-color-primary);
 }
+:where([role='tab'][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
 :where([role='tabpanel']) {
   padding: var(--flx-ui-space-4) 0;
 }

package/dist/css/tags-input.css

@@ -0,0 +1,91 @@
+@layer flx.components {
+/* Tags input (from @fluixi-ui/tags-input) — a chip field. The container owns the
+   frame + focus ring; the inner input is borderless and grows to fill the row. */
+:where([data-tags-input]) {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  width: 100%;
+  min-height: var(--flx-ui-size-md);
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  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);
+  cursor: text;
+  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-tags-input]:focus-within) {
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-tags-input][data-invalid]) {
+  border-color: var(--flx-ui-color-danger);
+}
+:where([data-tags-input][data-disabled]) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* The editable input; borderless, inherits the field's type + colour. */
+:where([data-tags-input-field]) {
+  flex: 1 1 6ch;
+  min-width: 6ch;
+  min-height: 0;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  padding: var(--flx-ui-space-1);
+}
+:where([data-tags-input-field]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+
+/* A committed tag chip. */
+:where([data-tags-input-tag]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: 0 var(--flx-ui-space-1) 0 var(--flx-ui-space-2);
+  height: calc(var(--flx-ui-size-md) - 2 * var(--flx-ui-space-2));
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  background: var(--flx-ui-color-bg-subtle);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-sm);
+  white-space: nowrap;
+}
+:where([data-tags-input-tag-remove]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.3em;
+  height: 1.3em;
+  padding: 0;
+  font: inherit;
+  line-height: 1;
+  color: var(--flx-ui-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: var(--flx-ui-radius-sm);
+  cursor: pointer;
+  transition:
+    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-tags-input-tag-remove]:hover) {
+  color: var(--flx-ui-color-fg);
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 10%, transparent);
+}
+:where([data-tags-input-tag-remove]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+}

package/dist/css/timeline.css

@@ -0,0 +1,59 @@
+@layer flx.components {
+/* Timeline (from @fluixi-ui/timeline). A vertical feed: each item is an indicator
+   column (dot) beside its content; a connector line threads between the dots. */
+:where([data-timeline]) {
+  display: flex;
+  flex-direction: column;
+}
+:where([data-timeline-item]) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--flx-ui-space-3);
+  --flx-timeline-dot: var(--flx-ui-color-border-strong);
+}
+:where([data-timeline-item][data-tone='primary']),
+:where([data-timeline-item][data-tone='info'])    { --flx-timeline-dot: var(--flx-ui-color-primary); }
+:where([data-timeline-item][data-tone='success'])  { --flx-timeline-dot: var(--flx-ui-color-success); }
+:where([data-timeline-item][data-tone='warning'])  { --flx-timeline-dot: var(--flx-ui-color-warning); }
+:where([data-timeline-item][data-tone='danger'])   { --flx-timeline-dot: var(--flx-ui-color-danger); }
+
+/* Indicator column: the dot, with the connector line drawn below it. */
+:where([data-timeline-indicator]) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  padding-top: 2px;
+  color: var(--flx-timeline-dot);
+}
+/* Default dot (when no custom `dot` content). */
+:where([data-timeline-indicator]:empty)::before {
+  content: "";
+  width: 9px;
+  height: 9px;
+  border-radius: var(--flx-ui-radius-full);
+  background: var(--flx-timeline-dot);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flx-timeline-dot) 18%, transparent);
+}
+/* Connector line — hidden on the last item. */
+:where([data-timeline-item]:not(:last-child) [data-timeline-indicator])::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  bottom: -6px;
+  left: 50%;
+  width: var(--flx-ui-border-width-thin);
+  transform: translateX(-50%);
+  background: var(--flx-ui-color-border);
+}
+:where([data-timeline-content]) {
+  min-width: 0;
+  padding-bottom: var(--flx-ui-space-4);
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-timeline-item]:last-child [data-timeline-content]) {
+  padding-bottom: 0;
+}
+}