@refineui/react 0.0.8 → 0.0.10

package/dist/spec/components/select.json

@@ -14,6 +14,7 @@
   "variants": {
     "appearance": [
       "filled",
+      "ghost",
       "plain"
     ]
   },

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-25T16:34:38.707Z",
+  "generatedAt": "2026-09-28T07:29:58.247Z",
   "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"
     },
     {

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

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-25T16:34:38.704Z",
+  "generatedAt": "2026-09-28T07:29:58.244Z",
   "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"
         }
       }
     },

package/package.json

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

package/refineui.css

@@ -69,8 +69,8 @@
 }
 [data-refineui="select-item"] {
   transition:
-    background-color var(--refineui-motion-duration-fast),
-    transform var(--refineui-motion-duration-fast);
+    background-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
 }
 /* List rows — Sidebar link plate (primary hover / active) */
 [data-refineui="dropdown-item"][data-selected="true"]:not(:disabled) {
@@ -160,22 +160,37 @@
 }
 [data-refineui="calendar-day"] {
   transition:
-    background-color var(--refineui-motion-duration-fast),
-    border-color var(--refineui-motion-duration-fast),
-    color var(--refineui-motion-duration-fast),
-    transform var(--refineui-motion-duration-fast);
+    background-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    border-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
 }
-/* Calendar caption selects — ghost plate (header chrome, not form-field outline) */
-[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header]:not(:disabled):hover:not(:active),
-[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header][data-state="open"]:not(:disabled) {
+/* Select trigger — Button-like transform (press scale) */
+[data-refineui="select-trigger"] {
+  transition:
+    color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    background-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    border-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
+}
+/* Select trigger ghost — Button-like plate (Calendar caption, compact chrome) */
+[data-refineui="select-trigger"][data-appearance="ghost"]:not(:disabled):hover:not(:active):not([data-pressed]),
+[data-refineui="select-trigger"][data-appearance="ghost"][data-state="open"]:not(:disabled):not(:active):not([data-pressed]) {
   background-color: var(--refineui-color-alias-background-primary-hover);
   color: var(--refineui-color-alias-foreground-primary-hover);
 }
-[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header]:not(:disabled):active,
-[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header][data-state="open"]:not(:disabled):active {
+[data-refineui="select-trigger"][data-appearance="ghost"]:not(:disabled):active,
+[data-refineui="select-trigger"][data-appearance="ghost"][data-pressed]:not(:disabled),
+[data-refineui="select-trigger"][data-appearance="ghost"][data-state="open"]:not(:disabled):active,
+[data-refineui="select-trigger"][data-appearance="ghost"][data-state="open"][data-pressed]:not(:disabled) {
   background-color: var(--refineui-color-alias-background-primary-active);
   color: var(--refineui-color-alias-foreground-primary);
 }
+[data-refineui="select-trigger"][data-appearance="ghost"]:focus-visible:not(:disabled) {
+  outline: none;
+  background-color: var(--refineui-color-alias-background-primary-hover);
+  color: var(--refineui-color-alias-foreground-primary-hover);
+}
 [data-refineui="calendar-nav"]:hover,
 [data-refineui="chip-remove"]:hover {
   opacity: 0.9;
@@ -357,6 +372,28 @@
 [data-refineui="tabs-indicator"] {
   transition: none;
   display: block;
+  opacity: 0;
+}
+[data-refineui="tabs-indicator"][data-ready="true"] {
+  opacity: 1;
+}
+/*
+ * SSR / pre-measure: selected tab carries a static underline until the sliding
+ * indicator has geometry (`data-ready`). Avoids a missing brand line on first paint.
+ */
+[data-refineui="tabs-list"]:not(:has([data-refineui="tabs-indicator"][data-ready="true"]))
+  [data-refineui="tab"][data-selected="true"]::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--refineui-stroke-width-thick);
+  background-color: var(--refineui-color-alias-background-brand);
+  pointer-events: none;
+}
+[data-refineui="tabs-list"]:not(:has([data-refineui="tabs-indicator"][data-ready="true"]))
+  [data-refineui="tab"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover::after {
+  background-color: var(--refineui-color-alias-background-brand-hover);
 }
 /* Animate only after first layout (`data-animate`) — same contract as Segmented Control. */
 [data-refineui="tabs-indicator"][data-animate="true"] {
@@ -383,7 +420,7 @@
 [data-refineui="tab"]:active {
   transform: none;
 }
-/* Calendar / Day — Web Kit `Calendar / Day` (`639:7052`) */
+/* Calendar / Day — Web Kit `Calendar / Day` (`639:7052`) + Button press scale */
 [data-refineui="calendar-day"]:not([disabled]):not([data-inactive="true"]):not([data-selected]):not([data-range-middle]):hover:not(:active) {
   background-color: var(--refineui-color-alias-background-primary-hover) !important;
   color: var(--refineui-color-alias-foreground-primary-hover) !important;
@@ -391,6 +428,7 @@
 [data-refineui="calendar-day"]:not([disabled]):not([data-inactive="true"]):not([data-selected]):not([data-range-middle]):active {
   background-color: var(--refineui-color-alias-background-primary-active) !important;
   color: var(--refineui-color-alias-foreground-primary) !important;
+  transform: scale(var(--refineui-motion-scale-press));
 }
 [data-refineui="calendar-day"][data-range-middle]:not([disabled]):not([data-inactive="true"]):hover:not(:active) {
   background-color: var(--refineui-color-alias-background-primary-hover) !important;
@@ -399,8 +437,12 @@
 [data-refineui="calendar-day"][data-range-middle]:not([disabled]):not([data-inactive="true"]):active {
   background-color: var(--refineui-color-alias-background-primary-active) !important;
   color: var(--refineui-color-alias-foreground-primary) !important;
+  transform: scale(var(--refineui-motion-scale-press));
+}
+/* Selected day — keep rest fill; still press-scale on click like Button */
+[data-refineui="calendar-day"][data-selected]:not([disabled]):not([data-inactive="true"]):active {
+  transform: scale(var(--refineui-motion-scale-press));
 }
-/* Selected / Day — selection uses fixed rest only; no hover/pressed background (Web Kit) */
 /* Stepper — markers share Calendar day cell selection; upcoming uses primary hover/active */
 [data-refineui="stepper-item"]:not([data-disabled="true"])
   [data-refineui="stepper-indicator"][data-state="upcoming"]:active {
@@ -440,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) {
@@ -477,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"] {
@@ -496,6 +536,8 @@
 [data-refineui="pagination"]:not(:disabled):active,
 [data-refineui="dropdown-item"]:not(:disabled):active,
 [data-refineui="select-item"]:not([aria-disabled="true"]):active,
+[data-refineui="select-trigger"]:not(:disabled):active,
+[data-refineui="select-trigger"][data-pressed]:not(:disabled),
 [data-refineui="menu-item"]:not(:disabled):active,
 [data-refineui="command-item"]:not(:disabled):active,
 [data-refineui="calendar-nav"]:active,
@@ -789,28 +831,24 @@
 }
 
 /* Select trigger — Navigation Menu hover / press / open plate; hairline field chrome */
-[data-refineui="select-trigger"]:not([data-appearance="plain"]) {
-  transition:
-    color var(--refineui-motion-duration-fast),
-    background-color var(--refineui-motion-duration-fast),
-    border-color var(--refineui-motion-duration-fast);
-}
-[data-refineui="select-trigger"]:not([data-appearance="plain"]):not(:disabled):hover:not(:active) {
+[data-refineui="select-trigger"][data-appearance="filled"]:not(:disabled):hover:not(:active):not([data-pressed]) {
   color: var(--refineui-color-alias-foreground-primary-hover) !important;
   background-color: var(--refineui-color-alias-background-primary-hover) !important;
 }
-[data-refineui="select-trigger"]:not([data-appearance="plain"]):not(:disabled):active {
+[data-refineui="select-trigger"][data-appearance="filled"]:not(:disabled):active,
+[data-refineui="select-trigger"][data-appearance="filled"][data-pressed]:not(:disabled) {
   color: var(--refineui-color-alias-foreground-primary) !important;
   background-color: var(--refineui-color-alias-background-primary-active) !important;
 }
-[data-refineui="select-trigger"]:not([data-appearance="plain"])[data-state="open"]:not(:disabled) {
+[data-refineui="select-trigger"][data-appearance="filled"][data-state="open"]:not(:disabled):not(:active):not([data-pressed]) {
   color: var(--refineui-color-alias-foreground-primary) !important;
   background-color: var(--refineui-color-alias-background-primary-hover) !important;
 }
-[data-refineui="select-trigger"]:not([data-appearance="plain"])[data-state="open"]:not(:disabled):active {
+[data-refineui="select-trigger"][data-appearance="filled"][data-state="open"]:not(:disabled):active,
+[data-refineui="select-trigger"][data-appearance="filled"][data-state="open"][data-pressed]:not(:disabled) {
   background-color: var(--refineui-color-alias-background-primary-active) !important;
 }
-[data-refineui="select-trigger"]:not([data-appearance="plain"]):focus-visible:not(:disabled) {
+[data-refineui="select-trigger"][data-appearance="filled"]:focus-visible:not(:disabled) {
   outline: none;
   color: var(--refineui-color-alias-foreground-primary-hover);
   background-color: var(--refineui-color-alias-background-primary-hover);