fix(theme): show the not-allowed cursor on disabled fields

[alexgrozav]

Description

The shared field surface set pointer-events: none on a disabled field. That also hid the field's own not-allowed cursor, so a disabled Input, Textarea, Input Date or OTP cell showed a plain arrow. This drops it from fieldSurfaceCompoundVariants, which reaches useInputRecipe, useTextareaRecipe, useInputDateRecipe and useOtpCellRecipe.

• Nested field cursor. The useFieldSelector reset now gives a disabled .input-field and .textarea-field cursor: not-allowed, so the inner control shows it even without the sanitize preset.
• Resize handle. The page promises the handle is off on a disabled textarea. pointer-events: none used to keep that promise, so the textarea setup now adds .textarea .textarea-field:disabled { resize: none }. It has the same specificity as the -resize-* selectors and comes after them, so it wins on every axis.
• Docs. The Disabled passages on the Input, Input Date, OTP and Textarea pages no longer say the state "blocks pointer interaction". Input asks you to disable a clear or reveal button in the suffix, and Input Date asks you to skip your own pointer handlers while disabled. The Textarea addon bullet now points at aria-describedby instead of an aria-label, because an aria-label replaces the visible label as the field's name (WCAG 2.5.3).
• Storybook. Textarea.vue sets aria-invalid="true" when invalid is set, and no attribute otherwise, like Otp.vue.

A disabled field can now darken its border on hover, at 0.5 opacity. The per-color :hover rules are atomic classes, so the disabled state can't cancel them without a wider change.

Related issue

None in this repository.

Type of change

• 🐞 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that changes existing behavior)
• 📖 Documentation
• ♻️ Refactor / internal (no functional change)
• 🔧 Build / tooling / CI

Checklist

• My commits follow Conventional Commits with a package scope (e.g. feat(theme): …)
• I ran pnpm build:nodocs && pnpm lint && pnpm typecheck && pnpm test and everything passes
• I added a changeset (pnpm changeset) for changes to publishable packages, or this change only touches docs/storybook/app/playground/tests
• I added or updated tests where relevant
• I updated documentation where relevant
• I did not edit generated files (dist/, .styleframe/)
• My PR targets main and stays focused in scope

Notes / screenshots

What ran: pnpm build:nodocs, pnpm --filter @styleframe/theme test (3358 passed), pnpm typecheck, oxlint and oxfmt --check on the touched files, the Storybook build and vue-tsc -p tsconfig.app.json (18 errors, the same as main), pnpm build:docs and pnpm --filter @styleframe/docs test:build. The full pnpm lint and pnpm test didn't run, so that box stays unticked.

In the built Storybook, each disabled story (Textarea, Input, Input Date, OTP) computes cursor: not-allowed at the field's centre, the wrappers compute pointer-events: auto, and the disabled textarea computes resize: none. The Textarea Invalid story has aria-invalid="true" and Default has none.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
styleframe-dev	Ready	Preview	Oct 19, 2026 6:39am UTC
styleframe-dev-storybook	Ready	Preview	Oct 19, 2026 6:39am UTC