fix(combobox): pin clear+trigger absolute when chips present (MUI pattern)

When `<Combobox.SelectedTags>` has at least one chip, anchor the
ClearButton + Trigger absolutely at the right edge of the Control
(MUI Autocomplete pattern). Chips + input can now wrap freely
without ever pushing the right-side affordances to a new row.

`--_combobox-affordances-w` reserves the right-padding the
absolutely-positioned buttons consume, scaled to the control's
current height token.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 30e9517a9a
commit 64bbe9b158

@ -507,18 +507,37 @@
display: none;
}
/* Make the Control breathe vertically when chips are present so the
* input + chips stack visually instead of clipping. */
/* Material UI Autocomplete pattern — when chips are present, pin the
* 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])) {
--_combobox-affordances-w: calc(var(--_combobox-control-height) * 2);
position: relative;
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-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] {

Loading…
Cancel
Save

Powered by TurnKey Linux.