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

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/select-combobox.css

@@ -33,9 +33,13 @@
   box-shadow: var(--flx-ui-ctl-ring);
 }
 :where(button[role='combobox'])::after {
-  content: '▾';
-  color: var(--flx-ui-color-fg-muted);
-  font-size: 0.8em;
+  content: '';
+  width: 1.15em;
+  height: 1.15em;
+  flex: none;
+  background: var(--flx-ui-color-fg-muted);
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
 }
 :where([data-select-value][data-placeholder]) {
   color: var(--flx-ui-color-fg-muted);
@@ -65,12 +69,23 @@
   color: var(--flx-ui-color-fg-muted);
 }
 :where([data-combobox-control] > button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background: none;
   cursor: pointer;
   color: var(--flx-ui-color-fg-muted);
   padding: 0 var(--flx-ui-space-1);
-  font-size: 0.8em;
   border-radius: var(--flx-ui-radius-sm);
 }
+/* When the trigger has no custom content, show the shared theme chevron. */
+:where([data-combobox-control] > button:empty)::after {
+  content: '';
+  width: 1.15em;
+  height: 1.15em;
+  background: currentColor;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+}
 }

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/splitter.css

@@ -0,0 +1,81 @@
+@layer flx.components {
+  :where([data-splitter]) {
+    --flx-ui-splitter-thickness: 1px;
+    --flx-ui-splitter-hit-area: var(--flx-ui-space-2);
+
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  :where([data-splitter][data-orientation='horizontal']) { flex-direction: row; }
+  :where([data-splitter][data-orientation='vertical']) { flex-direction: column; }
+
+  /* `min-*: 0` lets a panel shrink below its content instead of forcing the
+     splitter wider than its container — the same rule the page body needs. */
+  :where([data-splitter-panel]) {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /*
+   * The divider is a hairline, but the grab area is wider — a 1px target is
+   * unusable with a mouse and impossible with a finger. The line is drawn by a
+   * pseudo-element so the hit area can be generous without looking heavy.
+   */
+  :where([data-splitter-handle]) {
+    position: relative;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    padding: 0;
+  }
+
+  :where([data-splitter-handle])::before {
+    content: '';
+    position: absolute;
+    background: var(--flx-ui-color-border);
+    transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+
+  :where([data-splitter-handle][data-orientation='horizontal']) {
+    width: var(--flx-ui-splitter-hit-area);
+    cursor: col-resize;
+  }
+  :where([data-splitter-handle][data-orientation='horizontal'])::before {
+    inset-block: 0;
+    width: var(--flx-ui-splitter-thickness);
+  }
+
+  :where([data-splitter-handle][data-orientation='vertical']) {
+    height: var(--flx-ui-splitter-hit-area);
+    cursor: row-resize;
+  }
+  :where([data-splitter-handle][data-orientation='vertical'])::before {
+    inset-inline: 0;
+    height: var(--flx-ui-splitter-thickness);
+  }
+
+  :where([data-splitter-handle]:hover)::before,
+  :where([data-splitter-handle][data-dragging])::before {
+    background: var(--flx-ui-color-primary);
+  }
+
+  :where([data-splitter-handle]:focus-visible) {
+    outline: var(--flx-ui-border-width-thick) solid var(--flx-ui-color-focus-ring);
+    outline-offset: -2px;
+  }
+
+  /* While dragging, the pointer owns the whole splitter: no text selection, and
+     no panel swallowing the pointer as the cursor crosses it. */
+  :where([data-splitter][data-dragging]) {
+    user-select: none;
+  }
+  :where([data-splitter][data-dragging]) :where([data-splitter-panel]) {
+    pointer-events: none;
+  }
+}

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);