@ -507,18 +507,37 @@
display : none ;
display : none ;
}
}
/ * Make the Control breathe vertically when chips are present so the
/ * Material UI Autocomplete pattern — when chips are present , pin the
* input + chips stack visually instead of clipping . * /
* right-side affordances absolutely so chips + input wrap freely
* without ever pushing the clear / trigger to a new row .
*
* ` --_combobox-affordances-w ` reserves the right-padding the
* absolutely-positioned ClearButton + Trigger consume ( each is ~ 26px
* wide with size = md , scaled below for xs / sm / lg / xl ) . * /
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) ) {
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) ) {
--_combobox-affordances-w : calc ( var ( --_combobox-control-height ) * 2 ) ;
position : relative ;
padding-block : var ( --space-1 ) ;
padding-block : var ( --space-1 ) ;
padding-inline-end : calc ( var ( --_combobox-control-px ) + var ( --_combobox-affordances-w ) ) ;
}
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) )
[ data-combobox-clear-button ] ,
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) )
[ data-combobox-trigger ] {
position : absolute ;
inset-block-start : 50 % ;
transform : translateY ( -50 % ) ;
}
}
/ * When chips are present , pin the right-side affordances ( ClearButton +
* Trigger ) to the end of the row so they don ' t visually float in the
* middle when the input + chips wrap . * /
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) )
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) )
[ data-combobox-clear-button ] {
[ data-combobox-clear-button ] {
margin-inline-start : auto ;
inset-inline-end : calc ( var ( --_combobox-control-px ) + var ( --_combobox-control-height ) ) ;
}
[ data-combobox-control ] : has ( [ data-combobox-selected-tags ] : not ( [ data-empty ] ) )
[ data-combobox-trigger ] {
inset-inline-end : var ( --_combobox-control-px ) ;
}
}
[ data-combobox-selected-tag ] {
[ data-combobox-selected-tag ] {