diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap index e1d7e7a523..0893b5b5a8 100644 --- a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap @@ -316,7 +316,7 @@ Object { value="" /> @@ -387,7 +387,7 @@ Object { value="" /> @@ -515,7 +515,7 @@ Object { value="" /> @@ -586,7 +586,7 @@ Object { value="" /> @@ -714,7 +714,7 @@ Object { value="" /> @@ -775,7 +775,7 @@ Object { value="" /> @@ -837,7 +837,7 @@ Object { value="" /> @@ -897,7 +897,7 @@ Object { value="" /> @@ -968,7 +968,7 @@ Object { value="" /> @@ -1029,7 +1029,7 @@ Object { value="" /> @@ -1091,7 +1091,7 @@ Object { value="" /> @@ -1151,7 +1151,7 @@ Object { value="" /> @@ -3607,7 +3607,7 @@ Object { value="" /> @@ -3674,7 +3674,7 @@ Object { value="" /> @@ -3798,7 +3798,7 @@ Object { value="" /> @@ -3865,7 +3865,7 @@ Object { value="" /> @@ -3989,7 +3989,7 @@ Object { value="" /> @@ -4050,7 +4050,7 @@ Object { value="" /> @@ -4112,7 +4112,7 @@ Object { value="" /> @@ -4172,7 +4172,7 @@ Object { value="" /> @@ -4239,7 +4239,7 @@ Object { value="" /> @@ -4300,7 +4300,7 @@ Object { value="" /> @@ -4362,7 +4362,7 @@ Object { value="" /> @@ -4422,7 +4422,7 @@ Object { value="" /> diff --git a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap index 81088111b9..885eb1cd80 100644 --- a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap @@ -571,7 +571,7 @@ Object { placeholder="Your username..." /> @@ -594,7 +594,7 @@ Object { placeholder="Your Email..." /> @@ -611,7 +611,7 @@ Object { placeholder="Your password..." /> @@ -628,7 +628,7 @@ Object { placeholder="Repeat password..." /> @@ -678,7 +678,7 @@ Object { placeholder="Your username..." /> @@ -701,7 +701,7 @@ Object { placeholder="Your Email..." /> @@ -718,7 +718,7 @@ Object { placeholder="Your password..." /> @@ -735,7 +735,7 @@ Object { placeholder="Repeat password..." /> @@ -1378,7 +1378,7 @@ Object { placeholder="Your username..." /> @@ -1401,7 +1401,7 @@ Object { placeholder="Your Email..." /> @@ -1418,7 +1418,7 @@ Object { placeholder="Your password..." /> @@ -1435,7 +1435,7 @@ Object { placeholder="Repeat password..." /> @@ -1481,7 +1481,7 @@ Object { placeholder="Your username..." /> @@ -1504,7 +1504,7 @@ Object { placeholder="Your Email..." /> @@ -1521,7 +1521,7 @@ Object { placeholder="Your password..." /> @@ -1538,7 +1538,7 @@ Object { placeholder="Repeat password..." /> diff --git a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap index 3aeb31f66f..11282e40c7 100644 --- a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap @@ -12,11 +12,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -164,11 +164,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -265,11 +265,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -463,11 +463,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -546,11 +546,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -699,27 +699,27 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -729,7 +729,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -902,20 +902,20 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -1008,27 +1008,27 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -1038,7 +1038,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1211,20 +1211,20 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -1478,11 +1478,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1575,11 +1575,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -1765,11 +1765,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1844,11 +1844,11 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1993,27 +1993,27 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -2023,7 +2023,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -2196,20 +2196,20 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -2298,27 +2298,27 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -2328,7 +2328,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -2501,20 +2501,20 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
( readOnly={readOnly} size={size} className={mergeClassnames( - isVertical && 'rounded-t-none input-tbb-hidden', + isVertical && 'rounded-t-none', + isVertical && !error && 'input-tbb-hidden', + isHorizontal && 'rounded-s-none flex-1 basis-1/2', isHorizontal && - 'rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2', + !error && + 'rtl:input-rsb-hidden ltr:input-lsb-hidden', className && className )} ref={ref} @@ -174,13 +182,17 @@ const FirstInsetInputRoot = forwardRef< disabled={disabled} readOnly={readOnly} className={mergeClassnames( - '[&_+_.last-element:before]:hover:opacity-0', + '[&:has(input:not(:disabled):not(:read-only):hover)_+_.last-element:before]:opacity-0', + '[&:has(input:not(:disabled):not(:read-only):focus)_+_.last-element:before]:opacity-0', + error && '[&_+_.last-element:before]:opacity-0', isVertical && - !error && - '[&_input]:rounded-b-none [&_input]:input-bbb-hidden', + '[&_input]:rounded-b-none [&_input:read-only:hover]:input-bbb-clip-path [&_input:read-only:focus]:input-bbb-clip-path', + isVertical && !error && '[&_input]:input-bbb-hidden', + isHorizontal && + 'flex-1 basis-1/2 [&_input]:rounded-e-none rtl:[&_input:read-only:hover]:input-lsb-clip-path rtl:[&_input:read-only:focus]:input-lsb-clip-path ltr:[&_input:read-only:hover]:input-rsb-clip-path ltr:[&_input:read-only:focus]:input-rsb-clip-path', isHorizontal && !error && - '[&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2', + 'rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden', className && className )} ref={ref} @@ -224,13 +236,16 @@ const LastInsetInputRoot = forwardRef< disabled={disabled} readOnly={readOnly} className={mergeClassnames( - 'last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity', + 'last-element before:absolute before:block before:bg-beerus before:transition-opacity', isVertical && !error && - '[&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0', + ' [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0', + isVertical && '[&_input]:rounded-t-none', isHorizontal && !error && - '[&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', + ' rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden', + isHorizontal && + '[&_input]:rounded-s-none flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', className && className )} ref={ref} @@ -280,13 +295,17 @@ const FirstSelect = forwardRef< readOnly={readOnly} size={size} className={mergeClassnames( - '[&_+_.last-element:before]:hover:opacity-0', + '[&:has(select:not(:disabled):hover)_+_.last-element:before]:opacity-0', + '[&:has(select:not(:disabled):focus)_+_.last-element:before]:opacity-0', + error && '[&_+_.last-element:before]:opacity-0', isVertical && - !error && - '[&_select]:rounded-b-none [&_select]:input-bbb-hidden before:h-px', + '[&_select]:!rounded-b-none [&_select:disabled:hover]:input-bbb-clip-path [&_select:disabled:focus]:input-bbb-clip-path', + isVertical && !error && '[&_select]:!input-bbb-hidden before:h-px', + isHorizontal && + '[&_select]:!rounded-e-none flex-1 basis-1/2 rtl:[&_select:disabled:hover]:input-lsb-clip-path rtl:[&_select:disabled:focus]:input-lsb-clip-path ltr:[&_select:disabled:hover]:input-rsb-clip-path ltr:[&_select:disabled:focus]:input-rsb-clip-path', isHorizontal && !error && - '[&_select]:rounded-e-none rtl:[&_select]:input-lsb-hidden ltr:[&_select]:input-rsb-hidden flex-1 basis-1/2', + 'rtl:[&_select]:input-lsb-hidden ltr:[&_select]:input-rsb-hidden ', className && className )} ref={ref} @@ -332,13 +351,15 @@ const LastSelect = forwardRef< readOnly={readOnly} size={size} className={mergeClassnames( - 'last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity', + 'last-element before:absolute before:block before:bg-beerus before:transition-opacity', isVertical && - !error && - '[&_select]:rounded-t-none [&_select]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0', + '[&_select]:!rounded-t-none before:h-px before:top-0 before:inset-x-0', + isVertical && !error && '[&_select]:input-tbb-hidden', + isHorizontal && + '[&_select]:!rounded-s-none flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', isHorizontal && !error && - '[&_select]:rounded-s-none rtl:[&_select]:input-rsb-hidden ltr:[&_select]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', + 'rtl:[&_select]:input-rsb-hidden ltr:[&_select]:input-lsb-hidden', className && className )} ref={ref} @@ -382,13 +403,17 @@ const FirstInsetSelect = forwardRef< disabled={disabled} readOnly={readOnly} className={mergeClassnames( - '[&_+_.last-element:before]:hover:opacity-0', + '[&:has(select:not(:disabled):hover)_+_.last-element:before]:opacity-0', + '[&:has(select:not(:disabled):focus)_+_.last-element:before]:opacity-0', + error && '[&_+_.last-element:before]:opacity-0', isVertical && - !error && - '[&_select]:rounded-b-none [&_select]:input-bbb-hidden', + '[&_select]:!rounded-b-none [&_select:disabled:hover]:input-bbb-clip-path [&_select:disabled:focus]:input-bbb-clip-path', + isVertical && !error && '[&_select]:!input-bbb-hidden', + isHorizontal && + '[&_select]:!rounded-e-none flex-1 basis-1/2 rtl:[&_select:disabled:hover]:input-lsb-clip-path rtl:[&_select:disabled:focus]:input-lsb-clip-path ltr:[&_select:disabled:hover]:input-rsb-clip-path ltr:[&_select:disabled:focus]:input-rsb-clip-path', isHorizontal && !error && - '[&_select]:rounded-e-none rtl:[&_select]:input-lsb-hidden ltr:[&_select]:input-rsb-hidden flex-1 basis-1/2', + ' rtl:[&_select]:input-lsb-hidden ltr:[&_select]:input-rsb-hidden ', className && className )} ref={ref} @@ -432,13 +457,15 @@ const LastInsetSelect = forwardRef< disabled={disabled} readOnly={readOnly} className={mergeClassnames( - 'last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity', + 'last-element before:absolute before:block before:bg-beerus before:transition-opacity', isVertical && - !error && - '[&_select]:rounded-t-none [&_select]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0', + '[&_select]:!rounded-t-none before:h-px before:top-0 before:inset-x-0', + isVertical && !error && '[&_select]:input-tbb-hidden', + isHorizontal && + '[&_select]:!rounded-s-none flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', isHorizontal && !error && - '[&_select]:rounded-s-none rtl:[&_select]:input-rsb-hidden ltr:[&_select]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0', + 'rtl:[&_select]:input-rsb-hidden ltr:[&_select]:input-lsb-hidden', className && className )} ref={ref} diff --git a/workspaces/core/src/insetInput/InsetInput.tsx b/workspaces/core/src/insetInput/InsetInput.tsx index 58cfb18210..e66881acdc 100644 --- a/workspaces/core/src/insetInput/InsetInput.tsx +++ b/workspaces/core/src/insetInput/InsetInput.tsx @@ -67,7 +67,7 @@ const Label = ({ children, className }: LabelProps) => { return (