@refineui/react 0.1.1 → 0.2.0

package/dist/spec/authoring/components/command.json

@@ -5,7 +5,21 @@
   "kind": "root",
   "category": "components",
   "label": "Command",
-  "props": [],
+  "props": [
+    {
+      "name": "size",
+      "label": "size",
+      "valueType": "enum",
+      "control": "segmented",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "defaultValue": "sm",
+      "section": "variants"
+    }
+  ],
   "preview": {
     "mode": "full"
   },

package/dist/spec/authoring/components/search-field.json

@@ -17,6 +17,19 @@
       ],
       "defaultValue": "filled",
       "section": "variants"
+    },
+    {
+      "name": "size",
+      "label": "size",
+      "valueType": "enum",
+      "control": "segmented",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "defaultValue": "sm",
+      "section": "variants"
     }
   ],
   "preview": {

package/dist/spec/authoring/manifest.json

@@ -1,7 +1,7 @@
 {
   "schema": "refineui.authoring/1",
   "packageName": "@refineui/react",
-  "packageVersion": "0.1.1",
+  "packageVersion": "0.2.0",
   "css": [
     "@refineui/react/refineui.css"
   ],
@@ -332,6 +332,19 @@
           ],
           "defaultValue": "filled",
           "section": "variants"
+        },
+        {
+          "name": "size",
+          "label": "size",
+          "valueType": "enum",
+          "control": "segmented",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "defaultValue": "sm",
+          "section": "variants"
         }
       ],
       "preview": {
@@ -1671,7 +1684,21 @@
       "kind": "root",
       "category": "components",
       "label": "Command",
-      "props": [],
+      "props": [
+        {
+          "name": "size",
+          "label": "size",
+          "valueType": "enum",
+          "control": "segmented",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "defaultValue": "sm",
+          "section": "variants"
+        }
+      ],
       "preview": {
         "mode": "full"
       },

package/dist/spec/components/command.json

@@ -8,6 +8,7 @@
     "empty": "command-empty",
     "group": "command-group",
     "group_heading": "command-group-heading",
+    "indicator": "command-indicator",
     "input": "command-input",
     "item": "command-item",
     "list": "command-list",
@@ -17,6 +18,13 @@
   "attributes": {
     "data-refineui": "command"
   },
+  "variants": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
   "states": {
     "pseudo": [
       "focus-visible"

package/dist/spec/components/search-field.json

@@ -16,6 +16,11 @@
     "appearance": [
       "filled",
       "plain"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
     ]
   },
   "states": {

package/dist/spec/contract-index.json

@@ -3,7 +3,7 @@
   "contractLayer": "component-spec",
   "contractLayerVersion": "1.1",
   "status": "catalog",
-  "generatedAt": "2026-10-27T03:56:35.028Z",
+  "generatedAt": "2026-11-04T07:02:13.744Z",
   "role": "Behavior and DOM contracts — source of truth for Doctor, MCP, and Docs",
   "files": {
     "manifest": "./manifest.json",

package/dist/spec/token-trace-v2.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-10-27T03:56:35.024Z",
+  "generatedAt": "2026-11-04T07:02:13.738Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "RefineUI React components — Pelagornis RefineUI Web Kit",
   "type": "module",
   "license": "MIT",

package/refineui.css

@@ -644,21 +644,25 @@
   background-color: var(--refineui-color-alias-background-primary-active) !important;
 }
 
-/* Command / Item — Sidebar link plate */
+/*
+ * Command / Item — soft surface plate (same family as SearchField / secondary Button).
+ * These item fills are the pre-measure fallback; once `command-indicator` is ready the
+ * sliding indicator owns the plate and item fills are cleared below.
+ */
 [data-refineui="command-item"][data-state="hover"],
 [data-refineui="command-item"][data-selected="true"]:not(:disabled):not(:active) {
   color: var(--refineui-color-alias-foreground-primary-hover) !important;
-  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
 }
 [data-refineui="command-item"][data-state="pressed"],
 [data-refineui="command-item"][data-state="active"]:not(:disabled):active,
 [data-refineui="command-item"][data-selected="true"]:not(:disabled):active {
   color: var(--refineui-color-alias-foreground-primary) !important;
-  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  background-color: var(--refineui-color-alias-background-surface-active) !important;
 }
 [data-refineui="command-item"][data-state="active"]:not(:disabled):not(:active) {
   color: var(--refineui-color-alias-foreground-primary) !important;
-  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
 }
 [data-refineui="command-item"][data-state="disabled"],
 [data-refineui="command-item"]:disabled {
@@ -667,12 +671,53 @@
 }
 [data-refineui="command-item"][data-state="default"]:not(:disabled):hover {
   color: var(--refineui-color-alias-foreground-primary-hover) !important;
-  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
 }
 [data-refineui="command-item"][data-state="default"]:not(:disabled):active,
 [data-refineui="command-item"]:not(:disabled):active {
   color: var(--refineui-color-alias-foreground-primary) !important;
-  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  background-color: var(--refineui-color-alias-background-surface-active) !important;
+}
+
+/* Command / Indicator — one plate slides between items instead of each item repainting. */
+[data-refineui="command-indicator"] {
+  opacity: 0;
+  transition: none;
+}
+[data-refineui="command-indicator"][data-ready="true"] {
+  opacity: 1;
+}
+[data-refineui="command-indicator"][data-animate="true"] {
+  transition:
+    top var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    left var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    height var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    opacity var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard),
+    background-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="command-list"]:has([data-refineui="command-indicator"][data-ready="true"])
+  [data-refineui="command-item"]:not(:disabled) {
+  background-color: transparent !important;
+  /* The plate does not scale, so the label must not either. */
+  transform: none !important;
+}
+[data-refineui="command-list"]:has([data-refineui="command-item"]:not(:disabled):active)
+  [data-refineui="command-indicator"] {
+  background-color: var(--refineui-color-alias-background-surface-active);
+}
+
+[data-refineui="command-empty"] {
+  animation: refineui-menu-popover-enter var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="command-indicator"][data-animate="true"] {
+    transition: none;
+  }
+  [data-refineui="command-empty"] {
+    animation: none;
+  }
 }
 
 /* Opacity-only — parent transform would isolate and break child `backdrop-filter`. */
@@ -1112,9 +1157,7 @@
   [data-refineui="menu"],
   [data-refineui="dropdown-menu"],
   [data-refineui="select-menu"],
-  [data-refineui="popover"],
-  [data-refineui="tooltip-panel"],
-  [data-refineui="floating-beak-surface"],
+  [data-refineui="floating-surface"],
   [data-refineui="sidebar-peek-panel"],
   [data-refineui="navigation-menu-content-panel"] {
     background-color: var(--refineui-color-alias-background-primary) !important;
@@ -1138,8 +1181,7 @@
 [data-refineui="menu"],
 [data-refineui="dropdown-menu"],
 [data-refineui="select-menu"],
-[data-refineui="popover"],
-[data-refineui="tooltip-panel"],
+[data-refineui="floating-surface"],
 [data-refineui="sidebar-peek-panel"],
 [data-refineui="navigation-menu-content-panel"] {
   background-color: var(--refineui-color-alias-surface-frosted);
@@ -1148,12 +1190,11 @@
 }
 
 /*
- * Beaks are smaller than the surface blur radius. A separate backdrop-filter
- * samples the nearby trigger and shifts their visible color, so use the
- * frosted panel's resolved base tone to keep the seam pixel-consistent.
+ * Popover / Tooltip — panel + beak share one clipped surface. The shadow layer is a
+ * sibling (not an ancestor) so its filter does not become the surface's backdrop root.
  */
-[data-refineui="floating-beak-surface"] {
-  background-color: var(--refineui-color-alias-background-primary);
+[data-refineui="floating-shadow"] {
+  filter: var(--refineui-elevation-floating-filter);
 }
 
 [data-refineui="toast"][data-swiping="true"] {
@@ -1244,7 +1285,8 @@
 
 /* Carousel — stage drag + control focus (nav lives below slides) */
 @media (prefers-reduced-motion: reduce) {
-  [data-refineui="carousel-track"][data-animated="true"] {
+  [data-refineui="carousel-track"][data-animated="true"],
+  [data-refineui="carousel-indicator-thumb"][data-animate="true"] {
     transition: none !important;
   }
 }
@@ -1257,7 +1299,8 @@
 [data-refineui="carousel-indicator-thumb"] {
   transition: none;
 }
-[data-refineui="carousel-indicator-thumb"][data-ready="true"] {
+/* Animate only after first layout (`data-animate`) so mount does not grow from 0 — Segmented Control contract. */
+[data-refineui="carousel-indicator-thumb"][data-animate="true"] {
   transition: transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
     width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
 }
@@ -2085,6 +2128,56 @@ a[data-refineui="link"]:focus-visible {
   top: 0;
   height: 100%;
 }
+/*
+ * ScrollArea edge blur (always on) — rows marked `data-scroll-edge-item` soften progressively
+ * across the outer 25% of the scrollport on each side, like a picker wheel's edge. Size and opacity
+ * stay put, so rows never shift or shrink.
+ *
+ * The scroll-driven animation (`view()` cover range) only tracks *where* a row sits; ScrollArea
+ * scales that by `--refineui-scroll-edge-top` / `-bottom` (0 → 1 as content hides past that edge),
+ * so lists that do not scroll, and the edge you are parked at, stay untouched.
+ * `cover 0%` is the block-end edge (rows entering from below), `cover 100%` the block-start edge.
+ */
+@supports (animation-timeline: view()) {
+  @property --refineui-scroll-edge-end {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --refineui-scroll-edge-start {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+  }
+  @keyframes refineui-scroll-edge-falloff {
+    cover 0% {
+      --refineui-scroll-edge-end: 1;
+    }
+    cover 25% {
+      --refineui-scroll-edge-end: 0;
+    }
+    cover 75% {
+      --refineui-scroll-edge-start: 0;
+    }
+    cover 100% {
+      --refineui-scroll-edge-start: 1;
+    }
+  }
+  [data-refineui="scroll-area"] [data-scroll-edge-item] {
+    --refineui-scroll-edge-amount: max(
+      calc(var(--refineui-scroll-edge-end) * var(--refineui-scroll-edge-bottom, 0)),
+      calc(var(--refineui-scroll-edge-start) * var(--refineui-scroll-edge-top, 0))
+    );
+    filter: blur(calc(var(--refineui-blur-scroll-edge) * var(--refineui-scroll-edge-amount)));
+    animation: refineui-scroll-edge-falloff linear both;
+    animation-timeline: view();
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="scroll-area"] [data-scroll-edge-item] {
+    animation: none;
+  }
+}
 [data-refineui="scroll-area-scrollbar"][data-state="hidden"] {
   pointer-events: none;
   opacity: 0;
@@ -2132,11 +2225,41 @@ a[data-refineui="link"]:focus-visible {
   pointer-events: auto;
 }
 
-/* Command list — fixed height shell so ScrollArea viewport can scroll */
+/*
+ * Command list — shell height is the measured results height (inline), capped by max-height,
+ * so ScrollArea still gets a real height. Height animates as results filter in and out.
+ */
+/* Panel radius per size — matches the SearchField radius of the same size; the scrollbar inset reads it too. */
+[data-refineui="command"] {
+  --refineui-command-list-radius: var(--refineui-radius-rounded-x-large);
+}
+[data-refineui="command"][data-size="sm"] {
+  --refineui-command-list-radius: var(--refineui-radius-rounded-large);
+}
+[data-refineui="command"][data-size="lg"] {
+  --refineui-command-list-radius: var(--refineui-radius-rounded-xx-large);
+}
 [data-refineui="command-list"] {
-  height: min(60vh, var(--refineui-size-foundation-size-3200));
   max-height: min(60vh, var(--refineui-size-foundation-size-3200));
   overflow: hidden;
+  border-radius: var(--refineui-command-list-radius);
+}
+/*
+ * Shorten the default rail at both ends so it clears the panel's rounded corners;
+ * half the radius is enough at the default inline inset. Rail look stays the ScrollArea default.
+ */
+[data-refineui="command-list"]
+  > [data-refineui="scroll-area"]
+  > [data-refineui="scroll-area-scrollbar"][data-orientation="vertical"] {
+  inset-block: calc(var(--refineui-command-list-radius) / 2);
+}
+[data-refineui="command-list"][data-animate="true"] {
+  transition: height var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="command-list"][data-animate="true"] {
+    transition: none;
+  }
 }
 [data-refineui="command-list"] > [data-refineui="scroll-area"] {
   height: 100%;
@@ -2271,7 +2394,7 @@ a[data-refineui="link"]:focus-visible {
   [data-refineui="menu"],
   [data-refineui="dropdown-menu"],
   [data-refineui="select-menu"],
-  [data-refineui="command"],
+  [data-refineui="command-list"],
   [data-refineui="dialog"] {
     border-color: CanvasText;
   }
@@ -2287,7 +2410,6 @@ a[data-refineui="link"]:focus-visible {
   [data-refineui="select-menu"],
   [data-refineui="popover"],
   [data-refineui="tooltip-panel"],
-  [data-refineui="floating-beak-surface"],
   [data-refineui="navigation-menu-content-panel"],
   [data-refineui="sidebar-peek-panel"] {
     background-color: Canvas !important;
@@ -2295,6 +2417,24 @@ a[data-refineui="link"]:focus-visible {
     -webkit-backdrop-filter: none;
   }
 
+  /* System colors draw the panel box itself; the clipped beak surface would not be forced. */
+  [data-refineui="floating-chrome"] {
+    display: none;
+  }
+
+  /* Detached layout: the root draws no surface; text follows the system colors (panel border lives on command-list). */
+  [data-refineui="command"] {
+    color: CanvasText;
+  }
+  /* Author fills are dropped in forced colors — mark the selected command with a system outline. */
+  [data-refineui="command-indicator"] {
+    display: none;
+  }
+  [data-refineui="command-item"][data-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: calc(var(--refineui-focus-offset) * -1);
+  }
+
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
     backdrop-filter: none;
@@ -2308,7 +2448,8 @@ a[data-refineui="link"]:focus-visible {
 
   [data-refineui="dialog"],
   [data-refineui="drawer"],
-  [data-refineui="popover"] {
+  [data-refineui="popover"],
+  [data-refineui="tooltip-panel"] {
     border: var(--refineui-stroke-width-thin) solid CanvasText;
   }
 
@@ -2344,10 +2485,7 @@ a[data-refineui="link"]:focus-visible {
     border-width: var(--refineui-stroke-width-thick);
   }
 
-  [data-refineui="toast"],
-  [data-refineui="popover"],
-  [data-refineui="tooltip-panel"],
-  [data-refineui="floating-beak-surface"] {
+  [data-refineui="toast"] {
     border-style: solid;
     border-color: var(--refineui-color-alias-border-default);
     background-color: var(--refineui-color-alias-surface-popover) !important;
@@ -2355,6 +2493,16 @@ a[data-refineui="link"]:focus-visible {
     -webkit-backdrop-filter: none;
   }
 
+  [data-refineui="floating-surface"] {
+    background-color: var(--refineui-color-alias-surface-popover) !important;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="floating-outline"] path {
+    stroke-width: var(--refineui-stroke-width-thick);
+  }
+
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
     backdrop-filter: none;

package/spec/authoring/components/command.json

@@ -5,7 +5,21 @@
   "kind": "root",
   "category": "components",
   "label": "Command",
-  "props": [],
+  "props": [
+    {
+      "name": "size",
+      "label": "size",
+      "valueType": "enum",
+      "control": "segmented",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "defaultValue": "sm",
+      "section": "variants"
+    }
+  ],
   "preview": {
     "mode": "full"
   },

package/spec/authoring/components/search-field.json

@@ -17,6 +17,19 @@
       ],
       "defaultValue": "filled",
       "section": "variants"
+    },
+    {
+      "name": "size",
+      "label": "size",
+      "valueType": "enum",
+      "control": "segmented",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "defaultValue": "sm",
+      "section": "variants"
     }
   ],
   "preview": {

package/spec/authoring/manifest.json

@@ -1,7 +1,7 @@
 {
   "schema": "refineui.authoring/1",
   "packageName": "@refineui/react",
-  "packageVersion": "0.1.1",
+  "packageVersion": "0.2.0",
   "css": [
     "@refineui/react/refineui.css"
   ],
@@ -332,6 +332,19 @@
           ],
           "defaultValue": "filled",
           "section": "variants"
+        },
+        {
+          "name": "size",
+          "label": "size",
+          "valueType": "enum",
+          "control": "segmented",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "defaultValue": "sm",
+          "section": "variants"
         }
       ],
       "preview": {
@@ -1671,7 +1684,21 @@
       "kind": "root",
       "category": "components",
       "label": "Command",
-      "props": [],
+      "props": [
+        {
+          "name": "size",
+          "label": "size",
+          "valueType": "enum",
+          "control": "segmented",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "defaultValue": "sm",
+          "section": "variants"
+        }
+      ],
       "preview": {
         "mode": "full"
       },

package/spec/components/command.json

@@ -8,6 +8,7 @@
     "empty": "command-empty",
     "group": "command-group",
     "group_heading": "command-group-heading",
+    "indicator": "command-indicator",
     "input": "command-input",
     "item": "command-item",
     "list": "command-list",
@@ -17,6 +18,13 @@
   "attributes": {
     "data-refineui": "command"
   },
+  "variants": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
   "states": {
     "pseudo": [
       "focus-visible"

package/spec/components/search-field.json

@@ -16,6 +16,11 @@
     "appearance": [
       "filled",
       "plain"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
     ]
   },
   "states": {