@refineui/react 0.0.6 → 0.0.7

package/dist/spec/components/menu.json

@@ -8,7 +8,7 @@
     "divider": "menu-divider",
     "item": "menu-item",
     "popover": "menu-popover",
-    "section": "menu-section"
+    "label": "menu-label"
   },
   "attributes": {
     "data-refineui": "menu"

package/dist/spec/contract-index.json

@@ -3,7 +3,7 @@
   "contractLayer": "component-spec",
   "contractLayerVersion": "1.1",
   "status": "catalog",
-  "generatedAt": "2026-09-18T17:09:06.840Z",
+  "generatedAt": "2026-09-23T05:49:35.021Z",
   "role": "Behavior and DOM contracts — source of truth for Doctor, MCP, and Docs",
   "files": {
     "manifest": "./manifest.json",
@@ -393,7 +393,7 @@
           "menu-item",
           "menu-popover",
           "menu-root",
-          "menu-section"
+          "menu-label"
         ]
       },
       {

package/dist/spec/manifest.json

@@ -359,7 +359,7 @@
         "menu-item",
         "menu-popover",
         "menu-root",
-        "menu-section"
+        "menu-label"
       ]
     },
     {

package/dist/spec/token-graph.json

@@ -473,6 +473,10 @@
       "id": "component.dropdown.menu.background",
       "layer": "component"
     },
+    {
+      "id": "semantic.surfaceFrosted",
+      "layer": "semantic"
+    },
     {
       "id": "component.dropdown.menu.border",
       "layer": "component"
@@ -513,6 +517,14 @@
       "id": "component.select.disabledBackground",
       "layer": "component"
     },
+    {
+      "id": "component.select.menu.background",
+      "layer": "component"
+    },
+    {
+      "id": "component.select.menu.border",
+      "layer": "component"
+    },
     {
       "id": "component.select.border.default",
       "layer": "component"
@@ -2839,17 +2851,7 @@
     },
     {
       "from": "component.dropdown.menu.background",
-      "to": "semantic.backgroundPrimary"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutralWhite",
-      "context": "light"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutral900",
-      "context": "dark"
+      "to": "semantic.surfaceFrosted"
     },
     {
       "from": "component.dropdown.menu.border",
@@ -2991,6 +2993,24 @@
       "to": "foundation.neutral850",
       "context": "dark"
     },
+    {
+      "from": "component.select.menu.background",
+      "to": "semantic.surfaceFrosted"
+    },
+    {
+      "from": "component.select.menu.border",
+      "to": "semantic.borderDefault"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral300",
+      "context": "light"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral650",
+      "context": "dark"
+    },
     {
       "from": "component.select.border.default",
       "to": "semantic.borderDefault"
@@ -5899,17 +5919,7 @@
     },
     {
       "from": "component.menu.panel.background",
-      "to": "semantic.backgroundPrimary"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutralWhite",
-      "context": "light"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutral900",
-      "context": "dark"
+      "to": "semantic.surfaceFrosted"
     },
     {
       "from": "component.menu.panel.border",
@@ -5927,17 +5937,7 @@
     },
     {
       "from": "component.menu.list.background",
-      "to": "semantic.backgroundPrimary"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutralWhite",
-      "context": "light"
-    },
-    {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutral900",
-      "context": "dark"
+      "to": "semantic.surfaceFrosted"
     },
     {
       "from": "component.menu.list.border",

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

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-18T17:09:06.836Z",
+  "generatedAt": "2026-09-23T05:49:35.017Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {
@@ -1042,15 +1042,9 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundPrimary",
-        "light": {
-          "foundation": "neutralWhite",
-          "value": "#FFFFFF"
-        },
-        "dark": {
-          "foundation": "neutral900",
-          "value": "#1A1A1A"
-        }
+        "semantic": "surfaceFrosted",
+        "light": null,
+        "dark": null
       }
     },
     "dropdown.menu.border": {
@@ -1203,6 +1197,30 @@
         }
       }
     },
+    "select.menu.background": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "surfaceFrosted",
+        "light": null,
+        "dark": null
+      }
+    },
+    "select.menu.border": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "borderDefault",
+        "light": {
+          "foundation": "neutral300",
+          "value": "#DBDBDB"
+        },
+        "dark": {
+          "foundation": "neutral650",
+          "value": "#5B5B5B"
+        }
+      }
+    },
     "select.border.default": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -4330,15 +4348,9 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundPrimary",
-        "light": {
-          "foundation": "neutralWhite",
-          "value": "#FFFFFF"
-        },
-        "dark": {
-          "foundation": "neutral900",
-          "value": "#1A1A1A"
-        }
+        "semantic": "surfaceFrosted",
+        "light": null,
+        "dark": null
       }
     },
     "menu.panel.border": {
@@ -4360,15 +4372,9 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundPrimary",
-        "light": {
-          "foundation": "neutralWhite",
-          "value": "#FFFFFF"
-        },
-        "dark": {
-          "foundation": "neutral900",
-          "value": "#1A1A1A"
-        }
+        "semantic": "surfaceFrosted",
+        "light": null,
+        "dark": null
       }
     },
     "menu.list.border": {

package/package.json

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

package/refineui.css

@@ -134,40 +134,22 @@
   color: inherit;
 }
 
-[data-refineui="dropdown-menu"][data-side="bottom"] {
-  transform-origin: top center;
-  animation: refineui-dropdown-menu-enter-bottom var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
-}
-[data-refineui="select-menu"][data-side="bottom"] {
-  transform-origin: top center;
-  animation: refineui-dropdown-menu-enter-bottom var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
-}
-[data-refineui="dropdown-menu"][data-side="top"] {
-  transform-origin: bottom center;
-  animation: refineui-dropdown-menu-enter-top var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
-}
+/*
+ * Enter: opacity only. A leftover `transform` (esp. with `animation-fill-mode: both`)
+ * creates a containing group and kills `backdrop-filter` on frosted panels.
+ */
+[data-refineui="dropdown-menu"][data-side="bottom"],
+[data-refineui="select-menu"][data-side="bottom"],
+[data-refineui="dropdown-menu"][data-side="top"],
 [data-refineui="select-menu"][data-side="top"] {
-  transform-origin: bottom center;
-  animation: refineui-dropdown-menu-enter-top var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
-}
-@keyframes refineui-dropdown-menu-enter-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  animation: refineui-frosted-panel-enter var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
 }
-@keyframes refineui-dropdown-menu-enter-top {
+@keyframes refineui-frosted-panel-enter {
   from {
     opacity: 0;
-    transform: translateY(4px);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -321,13 +303,30 @@
 [data-refineui="segmented-control-indicator"] {
   transition: none;
   display: block;
+  opacity: 0;
+}
+[data-refineui="segmented-control-indicator"][data-ready="true"] {
+  opacity: 1;
+}
+/*
+ * SSR / pre-measure: selected item carries brand fill until the sliding thumb
+ * has geometry (`data-ready`). Avoids a blank selection on first paint.
+ */
+[data-refineui="segmented-control"]:not(:has([data-refineui="segmented-control-indicator"][data-ready="true"]))
+  [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--refineui-color-alias-background-brand);
+  box-shadow: var(--refineui-elevation-2);
 }
-/* Animate only after first layout (`data-animate`) so mount does not slide from 0. */
+[data-refineui="segmented-control"]:not(:has([data-refineui="segmented-control-indicator"][data-ready="true"]))
+  [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
+  background-color: var(--refineui-color-alias-background-brand-hover);
+}
+/* Animate only after first layout (`data-animate`) so mount does not slide from 0.
+ * Transform leads; width lags slightly so leading/trailing edges arrive apart. */
 [data-refineui="segmented-control-indicator"][data-animate="true"] {
-  /* Selection slide: medium + emphasized for a springier thumb move. */
   transition:
     transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
-    width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
+    width var(--refineui-motion-duration-slow) var(--refineui-motion-easing-emphasized);
 }
 @media (prefers-reduced-motion: reduce) {
   [data-refineui="segmented-control-indicator"][data-animate="true"] {
@@ -339,7 +338,9 @@
   color: var(--refineui-color-alias-foreground-primary);
   background-color: transparent;
 }
-[data-refineui="segmented-control"] [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
+/* Once the thumb is ready, selection fill lives on the indicator — keep item transparent. */
+[data-refineui="segmented-control"]:has([data-refineui="segmented-control-indicator"][data-ready="true"])
+  [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
   color: var(--refineui-color-alias-foreground-on-brand);
   background-color: transparent;
 }
@@ -632,34 +633,29 @@
   background-color: var(--refineui-color-alias-background-primary-active) !important;
 }
 
+/* Opacity-only — parent transform would isolate and break child `backdrop-filter`. */
 @keyframes refineui-menu-popover-enter {
   from {
     opacity: 0;
-    transform: translateY(calc(-1 * var(--refineui-motion-distance-float))) scale(var(--refineui-motion-scale-press));
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
 }
 
 @keyframes refineui-menu-popover-exit {
   from {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
   to {
     opacity: 0;
-    transform: translateY(calc(-1 * var(--refineui-motion-distance-float))) scale(var(--refineui-motion-scale-press));
   }
 }
 
 [data-refineui="menu-popover"][data-state="open"] {
-  transform-origin: top left;
   animation: refineui-menu-popover-enter var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
 }
 [data-refineui="menu-popover"][data-state="closed"] {
-  transform-origin: top left;
   pointer-events: none;
   animation: refineui-menu-popover-exit var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
 }
@@ -677,46 +673,38 @@
 @keyframes refineui-menu-submenu-enter-right {
   from {
     opacity: 0;
-    transform: translateX(calc(-1 * var(--refineui-motion-distance-float)));
   }
   to {
     opacity: 1;
-    transform: translateX(0);
   }
 }
 
 @keyframes refineui-menu-submenu-enter-left {
   from {
     opacity: 0;
-    transform: translateX(var(--refineui-motion-distance-float));
   }
   to {
     opacity: 1;
-    transform: translateX(0);
   }
 }
 
 [data-refineui="menu"][data-submenu="true"][data-state="open"] {
-  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard) both;
+  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard);
 }
 [data-refineui="menu"][data-submenu="true"][data-state="open"][data-side="left"] {
-  transform-origin: right center;
   animation-name: refineui-menu-submenu-enter-left;
 }
 [data-refineui="menu"][data-submenu="true"][data-state="open"][data-side="right"] {
-  transform-origin: left center;
   animation-name: refineui-menu-submenu-enter-right;
 }
 
 [data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"] {
-  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard) both;
+  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard);
 }
 [data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"][data-side="left"] {
-  transform-origin: right center;
   animation-name: refineui-menu-submenu-enter-left;
 }
 [data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"][data-side="right"] {
-  transform-origin: left center;
   animation-name: refineui-menu-submenu-enter-right;
 }
 
@@ -833,6 +821,23 @@
     border-color var(--refineui-motion-duration-fast);
   caret-color: var(--refineui-color-alias-foreground-primary);
 }
+/*
+ * Empty slots — same opacity pulse as Skeleton; staggered by `--refineui-input-otp-slot-index`.
+ * Stops when filled, focused, disabled, or reduced-motion.
+ */
+[data-refineui="input-otp"]:not([data-disabled="true"])
+  [data-refineui="input-otp-slot"]:not([data-filled]):not(:disabled):not(:focus) {
+  animation: refineui-skeleton-pulse var(--refineui-motion-duration-skeleton)
+    var(--refineui-motion-easing-ease-in-out) infinite;
+  animation-delay: calc(
+    var(--refineui-input-otp-slot-index, 0) * var(--refineui-motion-duration-fast) * -1
+  );
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="input-otp"] [data-refineui="input-otp-slot"] {
+    animation: none;
+  }
+}
 /* OTP digit typography — CSS vars (not Tailwind @utility; runtime-resolved classes are tree-shaken) */
 [data-refineui="input-otp"][data-size="sm"] [data-refineui="input-otp-slot"] {
   font-family: var(--refineui-typography-sub-title-1-font-family);
@@ -1065,13 +1070,36 @@
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
+  /* Frosted panels — fall back to opaque primary when blur is disabled */
+  [data-refineui="menu"],
+  [data-refineui="dropdown-menu"],
+  [data-refineui="select-menu"],
+  [data-refineui="sidebar-peek-panel"] {
+    background-color: var(--refineui-color-alias-background-primary);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
 }
 
-/* Dialog / Drawer scrim — tint (`surfaceOverlay`) + light blur (keep behind content readable) */
+/* Dialog / Drawer scrim — tint (`surfaceOverlay`) + semantic overlay blur */
 [data-refineui="dialog"] > [role="presentation"],
 [data-refineui="drawer"] > [role="presentation"] {
-  backdrop-filter: blur(var(--refineui-spacing-size-xxx-small));
-  -webkit-backdrop-filter: blur(var(--refineui-spacing-size-xxx-small));
+  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));
+  -webkit-backdrop-filter: blur(var(--refineui-blur-overlay-scrim));
+}
+
+/*
+ * Frosted panels — fill + surface blur (Menu, ContextMenu, Dropdown, Select, SidebarPeek).
+ * Fill: `--refineui-color-alias-surface-frosted`; blur: `--refineui-blur-surface-frost`.
+ * Avoid ancestor `transform` / leftover animation transform on these nodes (breaks backdrop).
+ */
+[data-refineui="menu"],
+[data-refineui="dropdown-menu"],
+[data-refineui="select-menu"],
+[data-refineui="sidebar-peek-panel"] {
+  background-color: var(--refineui-color-alias-surface-frosted);
+  -webkit-backdrop-filter: blur(var(--refineui-blur-surface-frost));
+  backdrop-filter: blur(var(--refineui-blur-surface-frost));
 }
 
 [data-refineui="toast"][data-swiping="true"] {
@@ -1205,12 +1233,12 @@
   min-width: var(--refineui-size-control-checkbox, 20px);
   min-height: var(--refineui-size-control-checkbox, 20px);
   border: 1px solid var(--refineui-color-alias-border-default);
-  border-radius: 4px;
+  border-radius: var(--refineui-radius-rounded-large);
   background-color: var(--refineui-color-alias-background-primary);
   transition: background-color var(--refineui-motion-duration-fast), border-color var(--refineui-motion-duration-fast), border-width var(--refineui-motion-duration-fast);
 }
 [data-refineui="checkbox"][data-variant="circular"] {
-  border-radius: 9999px;
+  border-radius: var(--refineui-radius-rounded-circle);
 }
 /* Unchecked — Hover: border subtle; Pressed: border strong */
 label:hover:not(:active) [data-refineui="checkbox"][data-checked="false"]:not([data-disabled="true"]) {
@@ -1568,7 +1596,8 @@ a[data-refineui="link"]:focus-visible {
 [data-refineui="sidebar-peek-surface"][data-sidebar-peek-panel-open] {
   visibility: visible;
   pointer-events: auto;
-  transform: translateX(0);
+  /* `translateX(0)` still creates a containing group and kills child backdrop-filter */
+  transform: none;
   transition:
     transform var(--refineui-motion-duration-overlay) var(--refineui-motion-easing-standard),
     visibility 0s linear 0s;
@@ -1580,7 +1609,7 @@ a[data-refineui="link"]:focus-visible {
   pointer-events: auto;
   border: var(--refineui-stroke-width-thin) solid var(--refineui-color-alias-border-default);
   border-radius: var(--refineui-radius-rounded-xx-large);
-  background: var(--refineui-color-alias-background-primary);
+  /* Fill + blur: shared frosted panel rule above (`surfaceFrosted` / `surfaceFrost`) */
   box-shadow: var(--refineui-elevation-16);
   overflow: hidden;
   transition: box-shadow var(--refineui-motion-duration-overlay) var(--refineui-motion-easing-standard);
@@ -2199,6 +2228,15 @@ a[data-refineui="link"]:focus-visible {
     -webkit-backdrop-filter: none;
   }
 
+  [data-refineui="menu"],
+  [data-refineui="dropdown-menu"],
+  [data-refineui="select-menu"],
+  [data-refineui="sidebar-peek-panel"] {
+    background-color: Canvas;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
     backdrop-filter: none;

package/spec/components/menu.json

@@ -8,7 +8,7 @@
     "divider": "menu-divider",
     "item": "menu-item",
     "popover": "menu-popover",
-    "section": "menu-section"
+    "label": "menu-label"
   },
   "attributes": {
     "data-refineui": "menu"

package/spec/manifest.json

@@ -359,7 +359,7 @@
         "menu-item",
         "menu-popover",
         "menu-root",
-        "menu-section"
+        "menu-label"
       ]
     },
     {