@refineui/react 0.0.9 → 0.0.11

package/dist/spec/components/sidebar.json

@@ -18,7 +18,9 @@
     "peek_inset": "sidebar-peek-inset",
     "peek_panel": "sidebar-peek-panel",
     "peek_pin": "sidebar-peek-pin",
-    "peek_surface": "sidebar-peek-surface"
+    "peek_surface": "sidebar-peek-surface",
+    "provider": "sidebar-provider",
+    "trigger": "button"
   },
   "attributes": {
     "data-refineui": "sidebar"

package/dist/spec/contract-index.json

@@ -3,7 +3,7 @@
   "contractLayer": "component-spec",
   "contractLayerVersion": "1.1",
   "status": "catalog",
-  "generatedAt": "2026-09-26T17:57:19.507Z",
+  "generatedAt": "2026-10-15T07:20:10.756Z",
   "role": "Behavior and DOM contracts — source of truth for Doctor, MCP, and Docs",
   "files": {
     "manifest": "./manifest.json",

package/dist/spec/token-graph.json

@@ -150,11 +150,15 @@
       "layer": "component"
     },
     {
-      "id": "semantic.backgroundPrimary",
+      "id": "semantic.backgroundSurfaceHover",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral900",
+      "id": "foundation.neutral100",
+      "layer": "foundation"
+    },
+    {
+      "id": "foundation.neutral750",
       "layer": "foundation"
     },
     {
@@ -162,108 +166,96 @@
       "layer": "component"
     },
     {
-      "id": "component.button.secondary.border",
+      "id": "component.button.secondary.hoverBackground",
       "layer": "component"
     },
     {
-      "id": "semantic.borderDefault",
+      "id": "semantic.backgroundSurfaceActive",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral300",
+      "id": "foundation.neutral700",
       "layer": "foundation"
     },
     {
-      "id": "component.button.secondary.hoverBackground",
+      "id": "component.button.secondary.hoverForeground",
       "layer": "component"
     },
     {
-      "id": "semantic.backgroundSurfaceHover",
+      "id": "semantic.foregroundPrimaryHover",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral100",
-      "layer": "foundation"
+      "id": "component.button.secondary.activeBackground",
+      "layer": "component"
     },
     {
-      "id": "foundation.neutral750",
-      "layer": "foundation"
+      "id": "component.button.secondary.activeForeground",
+      "layer": "component"
     },
     {
-      "id": "component.button.secondary.hoverBorder",
+      "id": "component.button.secondary.disabledBackground",
       "layer": "component"
     },
     {
-      "id": "semantic.borderStrong",
+      "id": "semantic.backgroundSurfaceDisabled",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral450",
-      "layer": "foundation"
-    },
-    {
-      "id": "foundation.neutral550",
+      "id": "foundation.neutral850",
       "layer": "foundation"
     },
     {
-      "id": "component.button.secondary.activeBackground",
+      "id": "component.button.secondary.disabledForeground",
       "layer": "component"
     },
     {
-      "id": "semantic.backgroundSurfaceActive",
-      "layer": "semantic"
-    },
-    {
-      "id": "foundation.neutral700",
-      "layer": "foundation"
+      "id": "component.button.outline.foreground",
+      "layer": "component"
     },
     {
-      "id": "component.button.secondary.disabledBackground",
+      "id": "component.button.outline.border",
       "layer": "component"
     },
     {
-      "id": "semantic.backgroundSurfaceDisabled",
+      "id": "semantic.borderDefault",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral850",
+      "id": "foundation.neutral300",
       "layer": "foundation"
     },
     {
-      "id": "component.button.secondary.disabledBorder",
+      "id": "component.button.outline.hoverBorder",
       "layer": "component"
     },
     {
-      "id": "semantic.borderDisabled",
+      "id": "semantic.borderStrong",
       "layer": "semantic"
     },
     {
-      "id": "foundation.neutral250",
+      "id": "foundation.neutral450",
       "layer": "foundation"
     },
     {
-      "id": "component.button.secondary.disabledForeground",
-      "layer": "component"
-    },
-    {
-      "id": "component.button.outline.foreground",
-      "layer": "component"
+      "id": "foundation.neutral550",
+      "layer": "foundation"
     },
     {
-      "id": "component.button.outline.border",
+      "id": "component.button.outline.activeBorder",
       "layer": "component"
     },
     {
-      "id": "component.button.outline.hoverBorder",
+      "id": "component.button.outline.disabledBorder",
       "layer": "component"
     },
     {
-      "id": "component.button.outline.activeBorder",
-      "layer": "component"
+      "id": "semantic.borderDisabled",
+      "layer": "semantic"
     },
     {
-      "id": "component.button.outline.disabledBorder",
-      "layer": "component"
+      "id": "foundation.neutral250",
+      "layer": "foundation"
     },
     {
       "id": "component.button.outline.disabledForeground",
@@ -285,10 +277,6 @@
       "id": "component.button.ghost.hoverForeground",
       "layer": "component"
     },
-    {
-      "id": "semantic.foregroundPrimaryHover",
-      "layer": "semantic"
-    },
     {
       "id": "component.button.ghost.activeBackground",
       "layer": "component"
@@ -329,6 +317,14 @@
       "id": "component.input.background",
       "layer": "component"
     },
+    {
+      "id": "semantic.backgroundPrimary",
+      "layer": "semantic"
+    },
+    {
+      "id": "foundation.neutral900",
+      "layer": "foundation"
+    },
     {
       "id": "component.input.disabledBackground",
       "layer": "component"
@@ -2109,16 +2105,16 @@
     },
     {
       "from": "component.button.secondary.background",
-      "to": "semantic.backgroundPrimary"
+      "to": "semantic.backgroundSurfaceHover"
     },
     {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutralWhite",
+      "from": "semantic.backgroundSurfaceHover",
+      "to": "foundation.neutral100",
       "context": "light"
     },
     {
-      "from": "semantic.backgroundPrimary",
-      "to": "foundation.neutral900",
+      "from": "semantic.backgroundSurfaceHover",
+      "to": "foundation.neutral750",
       "context": "dark"
     },
     {
@@ -2135,46 +2131,32 @@
       "to": "foundation.neutralWhite",
       "context": "dark"
     },
-    {
-      "from": "component.button.secondary.border",
-      "to": "semantic.borderDefault"
-    },
-    {
-      "from": "semantic.borderDefault",
-      "to": "foundation.neutral300",
-      "context": "light"
-    },
-    {
-      "from": "semantic.borderDefault",
-      "to": "foundation.neutral650",
-      "context": "dark"
-    },
     {
       "from": "component.button.secondary.hoverBackground",
-      "to": "semantic.backgroundSurfaceHover"
+      "to": "semantic.backgroundSurfaceActive"
     },
     {
-      "from": "semantic.backgroundSurfaceHover",
-      "to": "foundation.neutral100",
+      "from": "semantic.backgroundSurfaceActive",
+      "to": "foundation.neutral150",
       "context": "light"
     },
     {
-      "from": "semantic.backgroundSurfaceHover",
-      "to": "foundation.neutral750",
+      "from": "semantic.backgroundSurfaceActive",
+      "to": "foundation.neutral700",
       "context": "dark"
     },
     {
-      "from": "component.button.secondary.hoverBorder",
-      "to": "semantic.borderStrong"
+      "from": "component.button.secondary.hoverForeground",
+      "to": "semantic.foregroundPrimaryHover"
     },
     {
-      "from": "semantic.borderStrong",
-      "to": "foundation.neutral450",
+      "from": "semantic.foregroundPrimaryHover",
+      "to": "foundation.neutralBlack",
       "context": "light"
     },
     {
-      "from": "semantic.borderStrong",
-      "to": "foundation.neutral550",
+      "from": "semantic.foregroundPrimaryHover",
+      "to": "foundation.neutral100",
       "context": "dark"
     },
     {
@@ -2192,31 +2174,31 @@
       "context": "dark"
     },
     {
-      "from": "component.button.secondary.disabledBackground",
-      "to": "semantic.backgroundSurfaceDisabled"
+      "from": "component.button.secondary.activeForeground",
+      "to": "semantic.foregroundPrimary"
     },
     {
-      "from": "semantic.backgroundSurfaceDisabled",
-      "to": "foundation.neutral150",
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.primaryBlack",
       "context": "light"
     },
     {
-      "from": "semantic.backgroundSurfaceDisabled",
-      "to": "foundation.neutral850",
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.neutralWhite",
       "context": "dark"
     },
     {
-      "from": "component.button.secondary.disabledBorder",
-      "to": "semantic.borderDisabled"
+      "from": "component.button.secondary.disabledBackground",
+      "to": "semantic.backgroundSurfaceDisabled"
     },
     {
-      "from": "semantic.borderDisabled",
-      "to": "foundation.neutral250",
+      "from": "semantic.backgroundSurfaceDisabled",
+      "to": "foundation.neutral150",
       "context": "light"
     },
     {
-      "from": "semantic.borderDisabled",
-      "to": "foundation.neutral700",
+      "from": "semantic.backgroundSurfaceDisabled",
+      "to": "foundation.neutral850",
       "context": "dark"
     },
     {
@@ -3069,17 +3051,7 @@
     },
     {
       "from": "component.tooltip.default.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.tooltip.default.foreground",
@@ -3111,17 +3083,7 @@
     },
     {
       "from": "component.popover.default.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.popover.default.foreground",

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

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-26T17:57:19.500Z",
+  "generatedAt": "2026-10-15T07:20:10.753Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {
@@ -247,14 +247,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundPrimary",
+        "semantic": "backgroundSurfaceHover",
         "light": {
-          "foundation": "neutralWhite",
-          "value": "#FFFFFF"
+          "foundation": "neutral100",
+          "value": "#F5F5F5"
         },
         "dark": {
-          "foundation": "neutral900",
-          "value": "#1A1A1A"
+          "foundation": "neutral750",
+          "value": "#333333"
         }
       }
     },
@@ -273,48 +273,33 @@
         }
       }
     },
-    "button.secondary.border": {
-      "type": "component",
-      "source": "packages/react/src/tokens/componentColorTokens.ts",
-      "resolvesTo": {
-        "semantic": "borderDefault",
-        "light": {
-          "foundation": "neutral300",
-          "value": "#DBDBDB"
-        },
-        "dark": {
-          "foundation": "neutral650",
-          "value": "#5B5B5B"
-        }
-      }
-    },
     "button.secondary.hoverBackground": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurfaceHover",
+        "semantic": "backgroundSurfaceActive",
         "light": {
-          "foundation": "neutral100",
-          "value": "#F5F5F5"
+          "foundation": "neutral150",
+          "value": "#F0F0F0"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral700",
+          "value": "#404040"
         }
       }
     },
-    "button.secondary.hoverBorder": {
+    "button.secondary.hoverForeground": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "borderStrong",
+        "semantic": "foregroundPrimaryHover",
         "light": {
-          "foundation": "neutral450",
-          "value": "#BBBBBB"
+          "foundation": "neutralBlack",
+          "value": "#000000"
         },
         "dark": {
-          "foundation": "neutral550",
-          "value": "#8D8D8D"
+          "foundation": "neutral100",
+          "value": "#F5F5F5"
         }
       }
     },
@@ -333,33 +318,33 @@
         }
       }
     },
-    "button.secondary.disabledBackground": {
+    "button.secondary.activeForeground": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurfaceDisabled",
+        "semantic": "foregroundPrimary",
         "light": {
-          "foundation": "neutral150",
-          "value": "#F0F0F0"
+          "foundation": "primaryBlack",
+          "value": "#212121"
         },
         "dark": {
-          "foundation": "neutral850",
-          "value": "#222222"
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
         }
       }
     },
-    "button.secondary.disabledBorder": {
+    "button.secondary.disabledBackground": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "borderDisabled",
+        "semantic": "backgroundSurfaceDisabled",
         "light": {
-          "foundation": "neutral250",
-          "value": "#E0E0E0"
+          "foundation": "neutral150",
+          "value": "#F0F0F0"
         },
         "dark": {
-          "foundation": "neutral700",
-          "value": "#404040"
+          "foundation": "neutral850",
+          "value": "#222222"
         }
       }
     },
@@ -1285,15 +1270,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
       }
     },
     "tooltip.default.foreground": {
@@ -1330,15 +1309,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
       }
     },
     "popover.default.foreground": {

package/package.json

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

package/refineui.css

@@ -482,13 +482,11 @@
   background-color: var(--refineui-btn-primary-pressed) !important;
 }
 [data-refineui="button"][data-variant="secondary"]:not([data-inactive="true"]):hover:not(:active) {
-  background-color: var(--refineui-color-alias-background-surface-hover) !important;
-  border-color: var(--refineui-color-alias-border-strong) !important;
+  background-color: var(--refineui-color-alias-background-surface-active) !important;
   color: var(--refineui-color-alias-foreground-primary-hover) !important;
 }
 [data-refineui="button"][data-variant="secondary"]:not([data-inactive="true"]):active {
   background-color: var(--refineui-color-alias-background-surface-active) !important;
-  border-color: var(--refineui-color-alias-border-strong) !important;
   color: var(--refineui-color-alias-foreground-primary) !important;
 }
 [data-refineui="button"][data-variant="outline"]:not([data-inactive="true"]):hover:not(:active) {
@@ -519,7 +517,7 @@
 }
 [data-refineui="button"][data-variant="secondary"][data-inactive="true"] {
   background-color: var(--refineui-color-alias-background-surface-disabled) !important;
-  border-color: var(--refineui-color-alias-border-disabled) !important;
+  border-color: transparent !important;
   color: var(--refineui-color-alias-foreground-disabled) !important;
 }
 [data-refineui="button"][data-variant="outline"][data-inactive="true"] {
@@ -1107,17 +1105,21 @@
 @media (prefers-reduced-transparency: reduce) {
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
   }
   /* 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;
+  [data-refineui="popover"],
+  [data-refineui="tooltip-panel"],
+  [data-refineui="floating-beak-surface"],
+  [data-refineui="sidebar-peek-panel"],
+  [data-refineui="navigation-menu-content-panel"] {
+    background-color: var(--refineui-color-alias-background-primary) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
   }
 }
 
@@ -1129,19 +1131,31 @@
 }
 
 /*
- * Frosted panels — fill + surface blur (Menu, ContextMenu, Dropdown, Select, SidebarPeek).
+ * Frosted panels — fill + surface blur (Menu, ContextMenu, Dropdown, Select, Popover, Tooltip, SidebarPeek, Navigation Menu).
  * 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"] {
+[data-refineui="popover"],
+[data-refineui="tooltip-panel"],
+[data-refineui="sidebar-peek-panel"],
+[data-refineui="navigation-menu-content-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));
 }
 
+/*
+ * 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.
+ */
+[data-refineui="floating-beak-surface"] {
+  background-color: var(--refineui-color-alias-background-primary);
+}
+
 [data-refineui="toast"][data-swiping="true"] {
   cursor: grabbing;
   transition: none;
@@ -2271,8 +2285,12 @@ a[data-refineui="link"]:focus-visible {
   [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="navigation-menu-content-panel"],
   [data-refineui="sidebar-peek-panel"] {
-    background-color: Canvas;
+    background-color: Canvas !important;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
@@ -2326,10 +2344,13 @@ a[data-refineui="link"]:focus-visible {
     border-width: var(--refineui-stroke-width-thick);
   }
 
-  [data-refineui="toast"] {
+  [data-refineui="toast"],
+  [data-refineui="popover"],
+  [data-refineui="tooltip-panel"],
+  [data-refineui="floating-beak-surface"] {
     border-style: solid;
     border-color: var(--refineui-color-alias-border-default);
-    background-color: var(--refineui-color-alias-surface-popover);
+    background-color: var(--refineui-color-alias-surface-popover) !important;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }

package/spec/components/sidebar.json

@@ -18,7 +18,9 @@
     "peek_inset": "sidebar-peek-inset",
     "peek_panel": "sidebar-peek-panel",
     "peek_pin": "sidebar-peek-pin",
-    "peek_surface": "sidebar-peek-surface"
+    "peek_surface": "sidebar-peek-surface",
+    "provider": "sidebar-provider",
+    "trigger": "button"
   },
   "attributes": {
     "data-refineui": "sidebar"