@refineui/react 0.0.8 → 0.0.9

package/dist/spec/components/select.json

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

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-26T17:57:19.507Z",
   "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-09-25T16:34:38.704Z",
+  "generatedAt": "2026-09-26T17:57:19.500Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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);
+}
+/* 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);
 }
-/* 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 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 {
@@ -496,6 +538,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 +833,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);

package/spec/components/select.json

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