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

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

package/dist/css/image.css

@@ -0,0 +1,67 @@
+@layer flx.components {
+/* Image (from @fluixi-ui/image). A box that reserves the image's space and layers
+   a loading placeholder / blur-up and an error fallback over the <img>. Size it via
+   a width/height, an aspect-ratio, or a sized parent — the <img> fills it. */
+:where([data-image]) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  line-height: 0;
+  vertical-align: middle;
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg-subtle);
+  --flx-ui-image-fallback-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 16H3V5h18v14ZM8.5 13.5l2 2.41L13.5 12l4 5.5H6.5l2-4Z'/%3E%3C/svg%3E");
+}
+
+/* The image stays in normal flow so the box reserves its footprint (and keeps its
+   height when the source errors); object-fit crops it to a sized box. */
+:where([data-image-img]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-image][data-status='loaded'] [data-image-img]) {
+  opacity: 1;
+}
+:where([data-image][data-status='error'] [data-image-img]) {
+  opacity: 0;
+}
+
+/* Overlays — blur-up, custom placeholder, and the error fallback — fill the box. */
+:where([data-image-blur], [data-image-placeholder], [data-image-fallback]) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+:where([data-image-blur]) {
+  background-size: cover;
+  background-position: center;
+  filter: blur(12px);
+  transform: scale(1.1);
+}
+
+/* Default error fallback: a centered picture glyph on the subtle surface. Passing a
+   custom `fallback` element replaces it entirely. */
+:where([data-image-fallback]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg-subtle);
+}
+:where([data-image-fallback])::before {
+  content: "";
+  width: 45%;
+  height: 45%;
+  max-width: 28px;
+  max-height: 28px;
+  background: currentColor;
+  opacity: 0.55;
+  -webkit-mask: center / contain no-repeat var(--flx-ui-image-fallback-glyph);
+  mask: center / contain no-repeat var(--flx-ui-image-fallback-glyph);
+}
+}

package/dist/css/layout.css

@@ -0,0 +1,10 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Layout primitives (Stack / Grid / Container) — the geometry is set inline per
+ * instance; this only guarantees a predictable box model.
+ * ------------------------------------------------------------------------- */
+:where([data-stack], [data-grid], [data-container]) {
+  box-sizing: border-box;
+  min-width: 0;
+}
+}

package/dist/css/parts/listbox.css

@@ -89,10 +89,15 @@
   border-color: var(--flx-ui-color-primary);
 }
 :where([data-mode='multiple'] [role='option'][data-selected] > [data-select-item-indicator])::after {
-  content: '✓';
-  color: var(--flx-ui-color-primary-fg);
-  font-size: 0.7rem;
-  line-height: 1;
+  content: '';
+  box-sizing: content-box;
+  flex: none;
+  width: 4px;
+  height: 8px;
+  margin-top: -2px;
+  border: solid var(--flx-ui-color-primary-fg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 :where([data-mode='multiple'] [role='option'][data-selected])::after {
   content: none;

package/dist/css/pin-input.css

@@ -0,0 +1,40 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * PIN / OTP input — a row of single-character cells
+ * ------------------------------------------------------------------------- */
+:where([data-pin-input]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-pin-gap, var(--flx-ui-space-2));
+}
+:where([data-pin-input-field]) {
+  box-sizing: border-box;
+  width: var(--flx-ui-pin-size, 2.75rem);
+  height: var(--flx-ui-pin-size, 2.75rem);
+  padding: 0;
+  text-align: center;
+  font: inherit;
+  font-size: var(--flx-ui-font-size-lg);
+  font-weight: var(--flx-ui-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--flx-ui-color-fg);
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-md);
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-pin-input-field]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-pin-input-field]:focus-visible) {
+  outline: none;
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-pin-input-field]:disabled) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+}

package/dist/css/progress.css

@@ -37,4 +37,60 @@
   0% { transform: translateX(-100%); }
   100% { transform: translateX(250%); }
 }
+
+/* ----------------------------------------------------------------------------
+ * Circular progress
+ * ------------------------------------------------------------------------- */
+:where([data-circular]) {
+  position: relative;
+  /* Stack the ring and any centred label in a single grid cell. */
+  display: inline-grid;
+  place-items: center;
+  vertical-align: middle;
+  /* Undo the linear bar's box styling that keys off [role='progressbar']
+     (fixed 6px height / 240px width / clipped overflow / filled track). */
+  width: auto;
+  height: auto;
+  overflow: visible;
+  background: none;
+  border-radius: 0;
+}
+:where([data-circular]) > * {
+  grid-area: 1 / 1;
+}
+:where([data-circular] [data-progress-svg]) {
+  display: block;
+  /* Start the arc at 12 o'clock rather than 3 o'clock. */
+  transform: rotate(-90deg);
+}
+:where([data-progress-track]) {
+  fill: none;
+  stroke: var(--flx-ui-color-bg-muted);
+}
+:where([data-progress-indicator]) {
+  fill: none;
+  stroke: var(--flx-ui-color-primary);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+/* Indeterminate: a short arc that sweeps around the ring. */
+:where([data-circular][data-state='indeterminate'] [data-progress-svg]) {
+  animation: flx-ui-circular-spin 0.9s linear infinite;
+}
+:where([data-circular][data-state='indeterminate'] [data-progress-indicator]) {
+  stroke-dasharray: 25 200;
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-circular][data-state='indeterminate'] [data-progress-svg]) {
+    animation: none;
+  }
+  :where([data-circular][data-state='indeterminate'] [data-progress-indicator]) {
+    stroke-dasharray: none;
+    opacity: 0.5;
+  }
+}
+@keyframes flx-ui-circular-spin {
+  to { transform: rotate(270deg); }
+}
 }

package/dist/css/rating.css

@@ -0,0 +1,59 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Rating
+ *
+ * Each item is a star silhouette (mask) painted in the "empty" colour; a
+ * ::before overlay paints the "filled" colour, revealed left-to-right via
+ * clip-path by the item's data-state (empty / half / full).
+ * ------------------------------------------------------------------------- */
+:where([data-rating]) {
+  --flx-ui-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.5 7 .6-5.3 4.6 1.6 6.9L12 17.7 5.8 21.4l1.6-6.9L2 9.9l7-.6z'/%3E%3C/svg%3E");
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-rating-gap, 2px);
+  outline: none;
+}
+:where([data-rating]:not([data-disabled]):not([data-readonly])) {
+  cursor: pointer;
+}
+:where([data-rating]:focus-visible) {
+  border-radius: var(--flx-ui-radius-sm);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-rating][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+:where([data-rating-item]) {
+  position: relative;
+  display: inline-block;
+  width: var(--flx-ui-rating-size, 20px);
+  height: var(--flx-ui-rating-size, 20px);
+  flex: none;
+  background: var(--flx-ui-color-border-strong);
+  -webkit-mask: var(--flx-ui-star) center / contain no-repeat;
+  mask: var(--flx-ui-star) center / contain no-repeat;
+}
+:where([data-rating-item])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--flx-ui-rating-color, var(--flx-ui-color-primary));
+  -webkit-mask: var(--flx-ui-star) center / contain no-repeat;
+  mask: var(--flx-ui-star) center / contain no-repeat;
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-rating-item][data-state='full'])::before {
+  clip-path: inset(0 0 0 0);
+}
+:where([data-rating-item][data-state='half'])::before {
+  clip-path: inset(0 50% 0 0);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rating-item])::before {
+    transition: none;
+  }
+}
+}

package/dist/css/scroll-area.css

@@ -0,0 +1,44 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Scroll area — a scroll container with slim, theme-aware scrollbars styled over
+ * the native scrollbar (Firefox `scrollbar-*` + WebKit `::-webkit-scrollbar`).
+ * ------------------------------------------------------------------------- */
+:where([data-scroll-area]) {
+  position: relative;
+  scrollbar-width: thin;
+  scrollbar-color: var(--flx-ui-color-border-strong) transparent;
+  overscroll-behavior: contain;
+}
+:where([data-scroll-area][data-orientation='vertical']) {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+:where([data-scroll-area][data-orientation='horizontal']) {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+:where([data-scroll-area][data-orientation='both']) {
+  overflow: auto;
+}
+:where([data-scroll-area])::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+:where([data-scroll-area])::-webkit-scrollbar-track {
+  background: transparent;
+}
+:where([data-scroll-area])::-webkit-scrollbar-thumb {
+  background: var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-full);
+  /* Inset the thumb with a transparent border so it reads as a slim pill. */
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+:where([data-scroll-area])::-webkit-scrollbar-thumb:hover {
+  background: var(--flx-ui-color-fg-muted);
+  background-clip: content-box;
+}
+:where([data-scroll-area])::-webkit-scrollbar-corner {
+  background: transparent;
+}
+}

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