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

package/dist/css/image.css

@@ -1,20 +1,24 @@
 @layer flx.components {
-/* Image (from @fluixi-ui/image). A sized box that layers the <img>, a loading
-   placeholder, and an error fallback; give it a width/height or aspect ratio. */
+/* 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;
-  background: var(--flx-ui-color-bg-subtle);
   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");
 }
-:where([data-image] > *) {
-  position: absolute;
-  inset: 0;
+
+/* 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%;
-}
-:where([data-image-img]) {
   object-fit: cover;
   opacity: 0;
   transition: opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
@@ -23,13 +27,41 @@
   opacity: 1;
 }
 :where([data-image][data-status='error'] [data-image-img]) {
-  display: none;
+  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%;
 }
-/* Blur-up (LQIP): a scaled, blurred version shown until the image loads. */
 :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/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;
+}
+}

package/dist/lib/reference/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/colors.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAE3D,4FAA4F;AAC5F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAsGpC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwBjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAUhF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,YAAY,CAc3E,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/colors.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAE3D,4FAA4F;AAC5F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA+GpC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6BjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAUhF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,YAAY,CAc3E,CAAC"}

package/dist/lib/reference/colors.js

@@ -66,23 +66,32 @@ const statusLight = {
     'danger-solid': '#e5484d',
     'danger-subtle': '#feebec',
     'danger-fg': '#ffffff',
+    // `-text`: a darker, saturated shade that stays legible ON the `-subtle`
+    // background (the solid shade is too light for text — notably amber).
+    'danger-text': '#cd2b31',
     'success-solid': '#30a46c',
     'success-subtle': '#e6f6ec',
     'success-fg': '#ffffff',
+    'success-text': '#18794e',
     'warning-solid': '#ffb224',
     'warning-subtle': '#fff4d5',
     'warning-fg': '#1c2024',
+    'warning-text': '#ad5700',
 };
 const statusDark = {
     'danger-solid': '#ff6369',
     'danger-subtle': '#3b1219',
     'danger-fg': '#ffffff',
+    // On dark, `-text` is a bright shade legible on the dark `-subtle` bg.
+    'danger-text': '#ff9592',
     'success-solid': '#3dd68c',
     'success-subtle': '#0f291e',
     'success-fg': '#ffffff',
+    'success-text': '#4cc38a',
     'warning-solid': '#ffca16',
     'warning-subtle': '#3a2e00',
     'warning-fg': '#1c2024',
+    'warning-text': '#ffca16',
 };
 function scaleRecord(gray, accent, status) {
     const out = {};
@@ -111,15 +120,20 @@ export const semanticColors = {
     'color-primary-active': 'var(--flx-ui-accent-11)',
     'color-primary-fg': '#ffffff',
     'color-primary-subtle': 'var(--flx-ui-accent-3)',
+    // Legible text shade for a tinted (subtle) background.
+    'color-primary-text': 'var(--flx-ui-accent-11)',
     'color-danger': 'var(--flx-ui-danger-solid)',
     'color-danger-fg': 'var(--flx-ui-danger-fg)',
     'color-danger-subtle': 'var(--flx-ui-danger-subtle)',
+    'color-danger-text': 'var(--flx-ui-danger-text)',
     'color-success': 'var(--flx-ui-success-solid)',
     'color-success-fg': 'var(--flx-ui-success-fg)',
     'color-success-subtle': 'var(--flx-ui-success-subtle)',
+    'color-success-text': 'var(--flx-ui-success-text)',
     'color-warning': 'var(--flx-ui-warning-solid)',
     'color-warning-fg': 'var(--flx-ui-warning-fg)',
     'color-warning-subtle': 'var(--flx-ui-warning-subtle)',
+    'color-warning-text': 'var(--flx-ui-warning-text)',
     'color-overlay': 'rgba(0, 0, 0, 0.4)',
 };
 export const semanticOverrides = {

package/dist/preset.css

@@ -10,7 +10,12 @@
 @layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin;
 
 @import './css/base.css';
+@import './css/layout.css';
+@import './css/scroll-area.css';
 @import './css/button.css';
+@import './css/icon-button.css';
+@import './css/fab.css';
+@import './css/speed-dial.css';
 @import './css/badge.css';
 @import './css/toggle.css';
 @import './css/toolbar.css';
@@ -18,6 +23,7 @@
 @import './css/field.css';
 @import './css/input.css';
 @import './css/number-field.css';
+@import './css/pin-input.css';
 @import './css/tags-input.css';
 @import './css/image.css';
 @import './css/file-upload.css';
@@ -26,8 +32,12 @@
 @import './css/alert.css';
 @import './css/skeleton.css';
 @import './css/kbd.css';
+@import './css/empty.css';
+@import './css/statistic.css';
+@import './css/descriptions.css';
 @import './css/switch.css';
 @import './css/checkbox-radio.css';
+@import './css/rating.css';
 @import './css/tabs.css';
 @import './css/accordion.css';
 @import './css/progress.css';
@@ -35,12 +45,14 @@
 @import './css/separator.css';
 @import './css/breadcrumb.css';
 @import './css/pagination.css';
+@import './css/timeline.css';
 @import './css/surface.css';
 @import './css/card.css';
 @import './css/glow.css';
 @import './css/aspect-ratio.css';
 @import './css/stepper.css';
 @import './css/select-combobox.css';
+@import './css/field-variants.css';
 @import './css/parts/listbox.css';
 @import './css/parts/overlays.css';
 @import './css/drawer.css';