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

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

@@ -29,6 +29,21 @@
 :where([data-input][data-invalid]) {
   border-color: var(--flx-ui-color-danger);
 }
+/* Drop the browser's native number spinners — they can't be styled consistently
+   across engines and clash with the field look. Covers both the bare input and
+   the one nested inside an adornment group (which carries no [data-input]). Reach
+   for @fluixi-ui/number-field when you want proper increment / decrement steppers. */
+:where([data-input][type='number'], [data-input-group] input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+:where([data-input][type='number']::-webkit-outer-spin-button),
+:where([data-input][type='number']::-webkit-inner-spin-button),
+:where([data-input-group] input[type='number']::-webkit-outer-spin-button),
+:where([data-input-group] input[type='number']::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
 
 /* Input with leading/trailing adornments: the group owns the frame. */
 :where([data-input-group]) {

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/navigation-menu.css

@@ -42,20 +42,21 @@
 :where([data-navigation-menu-trigger]:focus-visible, [data-navigation-menu-link]:focus-visible) {
   box-shadow: var(--flx-ui-ctl-ring);
 }
-/* The chevron affordance: rotates when the panel opens. */
+/* The chevron affordance: the shared theme chevron, flipping 180° when open. */
 :where([data-navigation-menu-trigger])::after {
   content: '';
-  width: 0.55em;
-  height: 0.55em;
+  width: 1em;
+  height: 1em;
+  flex: none;
   margin-inline-start: var(--flx-ui-space-1);
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: rotate(45deg) translateY(-0.1em);
+  background: currentColor;
   opacity: 0.6;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
   transition: transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-navigation-menu-trigger][data-state='open'])::after {
-  transform: rotate(225deg) translateY(-0.1em);
+  transform: rotate(180deg);
 }
 
 :where([data-navigation-menu-content]) {

package/dist/css/number-field.css

@@ -11,7 +11,7 @@
   font-size: var(--flx-ui-font-size-sm);
   font-weight: var(--flx-ui-font-weight-medium);
   color: var(--flx-ui-color-fg);
-  line-height: var(--flx-ui-leading-none);
+  line-height: var(--flx-ui-line-height-none);
 }
 :where([data-number-field-label][data-disabled]) {
   color: var(--flx-ui-color-fg-subtle);
@@ -61,8 +61,8 @@
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
   font-size: var(--flx-ui-font-size-sm);
-  transition: background 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),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-number-field-decrement]) {
   border-right: 1px solid var(--flx-ui-color-border);

package/dist/css/pagination.css

@@ -31,9 +31,9 @@
   border-radius: var(--flx-ui-radius-md);
   cursor: pointer;
   user-select: none;
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              border-color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-pagination-page]:hover:not([disabled])),
 :where([data-pagination-prev]:hover:not([disabled])),

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