@sanity/ui 4.0.0-static.26 → 4.0.0-static.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.26",
+  "version": "4.0.0-static.27",
   "keywords": [
     "react",
     "ui",
@@ -140,13 +140,13 @@
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@types/react-is": "^19.0.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.0.1",
+    "@vitejs/plugin-react": "^5.0.3",
     "@vitest/browser": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "browserslist-config-baseline": "^0.5.0",
@@ -182,12 +182,12 @@
     "refractor": "^5.0.0",
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.13",
+    "start-server-and-test": "^2.1.1",
     "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.3",
+    "vite": "^7.1.6",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"

package/src/core/components/menu/MenuItem.tsx

@@ -132,8 +132,6 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       data-ui="MenuItem"
       {...rest}
       as={as}
-      data-pressed={pressed ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
       radius={radius}
       disabled={disabled}
       onClick={handleClick}

package/src/core/components/menu/__workshop__/DataProps.tsx

@@ -0,0 +1,27 @@
+import {Menu, MenuItem, Text} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Menu gap={4} padding={4}>
+      <MenuItem data-enabled="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-hovered="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-pressed="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-selected="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+    </Menu>
+  )
+}

package/src/core/components/menu/__workshop__/index.ts

@@ -71,7 +71,7 @@ const scope: WorkshopScope = {
       component: lazy(() => import('./OnCloseMenuButton')),
     },
     {
-      name: 'shouldFocus',
+      name: 'should-focus',
       title: 'Menu with shouldFocus',
       component: lazy(() => import('./ShouldFocus')),
     },
@@ -85,6 +85,11 @@ const scope: WorkshopScope = {
       title: 'Custom selected state',
       component: lazy(() => import('./CustomSelectedState')),
     },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
   ],
 }
 

package/src/core/primitives/button/Button.tsx

@@ -103,8 +103,8 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
       data-ui="Button"
       {...rest}
       className={button({className, flex, mode, radius, tone, width})}
-      data-disabled={loading || disabled ? '' : undefined}
-      data-selected={selected ? '' : undefined}
+      data-disabled={loading || disabled ? '' : props['data-disabled']}
+      data-selected={selected ? '' : props['data-selected']}
       disabled={Boolean(loading || disabled)}
       // @ts-expect-error - TODO: fix this
       href={disabled ? undefined : href}

package/src/core/primitives/button/__workshop__/DataProps.tsx

@@ -0,0 +1,22 @@
+import {Button, Stack} from '@sanity/ui'
+import type {ButtonMode, ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_MODE_OPTIONS, WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default') as ButtonMode | undefined
+
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Button data-enabled="" mode={mode} text="Button" tone={tone} />
+      <Button data-hovered="" mode={mode} text="Button" tone={tone} />
+      <Button data-pressed="" mode={mode} text="Button" tone={tone} />
+      <Button data-selected="" mode={mode} text="Button" tone={tone} />
+    </Stack>
+  )
+}

package/src/core/primitives/button/__workshop__/index.ts

@@ -60,6 +60,11 @@ const scope: WorkshopScope = {
       title: 'Text overflow',
       component: lazy(() => import('./TextOverflow')),
     },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
   ],
 }
 

package/src/core/primitives/card/Card.tsx

@@ -72,10 +72,10 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
       })}
       data-checkered={checkered ? '' : undefined}
       // Extract the disabled prop without removing it from `...rest` so that the underlying <button> or <a> has `[disabled]` when needed
-      data-disabled={props.disabled ? '' : undefined}
-      data-focus-ring={focusRing ? '' : undefined}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
+      data-disabled={props.disabled ? '' : props['data-disabled']}
+      data-focus-ring={focusRing ? '' : props['data-focus-ring']}
+      data-pressed={pressed ? '' : props['data-pressed']}
+      data-selected={selected ? '' : props['data-selected']}
       radius={radius}
       style={style}
     />

package/src/core/primitives/card/__workshop__/DataProps.tsx

@@ -0,0 +1,30 @@
+import {Card, Stack, Text} from '@sanity/ui'
+import type {CardTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default') as CardTone | undefined
+
+  return (
+    <Stack gap={1} padding={4}>
+      <Card as="button" data-enabled="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-hovered="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-pressed="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-selected="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-disabled="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+    </Stack>
+  )
+}

package/src/core/primitives/card/__workshop__/index.ts

@@ -14,6 +14,7 @@ const scope: WorkshopScope = {
     {name: 'checkered', title: 'Checkered', component: lazy(() => import('./Checkered'))},
     {name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
     {name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
+    {name: 'data-props', title: 'Data props', component: lazy(() => import('./DataProps'))},
   ],
 }
 

package/src/core/primitives/selectable/Selectable.tsx

@@ -44,7 +44,7 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
       {...rest}
       as={as}
       className={_selectable({className, radius, tone})}
-      data-selected={selected ? '' : undefined}
+      data-selected={selected ? '' : props['data-selected']}
     />
   )
 }

package/src/core/primitives/selectable/__workshop__/DataProps.tsx

@@ -0,0 +1,27 @@
+import {Selectable, Stack, Text} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Selectable data-enabled="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-hovered="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-pressed="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-selected="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+    </Stack>
+  )
+}

package/src/core/primitives/selectable/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/selectable',
+  title: 'Selectable',
+  stories: [
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
+  ],
+})

package/src/css/primitives/_input/_input.css.ts

@@ -154,11 +154,12 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+    [`${root}.${border}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]:
+      {
+        vars: {
+          [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+        },
       },
-    },
 
     [`${root}:not([data-invalid]) ${element}:focus + &`]: {
       vars: {
@@ -185,7 +186,7 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
+    [`${root}.${border}[data-invalid] ${element}:not(:disabled):hover + &`]: {
       vars: {
         [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
       },

package/src/css/primitives/box/box.css.ts

@@ -27,8 +27,6 @@ export const root: string = _style(layers.primitives, {
 export const muted: string = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
 
-  transition: 'background-color 100ms ease-in-out',
-
   selectors: {
     '&&': {
       vars: {