wip(popover): unified min-width = anchor + sideOffset 6 across pickers

Day-end checkpoint for the floating-layer normalization work. Documented
in CONTINUE.md.

Done:
- popover.css: new `--_popover-min-width` defaults to
  `var(--floating-anchor-width, auto)` so popover layer is NEVER narrower
  than its anchor (Radix / React Aria convention). Consumers that should
  opt out (tooltip, dialog) override with `auto`.
- soma popover-content default sideOffset 0 → 6.
- 5 picker eidos contents: sideOffset 10 → 6 (matches the new default;
  per-component override removed visually but kept as explicit prop).
- combobox provider: reverted the multi-on-close stamp-labels patch.
  Multi-mode selections will be rendered as inline tags via a future
  `Combobox.SelectedTags` part (Material UI Autocomplete pattern,
  decided with user).

Pending (see CONTINUE.md):
- Re-anchor pickers to their Input wrapper (currently anchored to the
  chevron trigger ~14px). Required for the min-width normalization to
  actually show — research vs Ark UI / Radix / React Aria confirmed
  composite-input pickers anchor to the control wrapper, not the
  trigger button.
- Combobox `SelectedTags` part for multi-mode inline tags.
- SearchField floating Results part (user opted to make it
  Combobox-like rather than reuse Combobox).

svelte-check --threshold error → 0 errors / 0 warnings / 4584 files.

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

File diff suppressed because it is too large Load Diff

@ -7,7 +7,7 @@
let { let {
size, size,
align = 'start', align = 'start',
sideOffset = 10, sideOffset = 6,
collisionPadding = 12, collisionPadding = 12,
children: bodyContent, children: bodyContent,
...rest ...rest

@ -8,7 +8,7 @@
let { let {
size, size,
align = 'end', align = 'end',
sideOffset = 10, sideOffset = 6,
collisionPadding = 12, collisionPadding = 12,
width, width,
minWidth, minWidth,

@ -8,7 +8,7 @@
let { let {
size, size,
align = 'end', align = 'end',
sideOffset = 10, sideOffset = 6,
collisionPadding = 12, collisionPadding = 12,
width, width,
minWidth, minWidth,

@ -85,12 +85,20 @@
--_popover-content-max-height-override, --_popover-content-max-height-override,
var(--floating-available-height, calc(100dvh - var(--space-4))) var(--floating-available-height, calc(100dvh - var(--space-4)))
); );
/* Normalized floor — popover layer is NEVER narrower than the anchor
(input / trigger / button it was launched from). Content that wants
to grow beyond still can via `inline-size`. Consumers that should
opt out (tooltip, dialog) override this to `auto`. */
--_popover-min-width: var(
--_popover-content-min-width-override,
var(--floating-anchor-width, auto)
);
display: grid; display: grid;
box-sizing: border-box; box-sizing: border-box;
gap: var(--popover-gap); gap: var(--popover-gap);
inline-size: min(var(--_popover-width), var(--_popover-max-width), calc(100vw - var(--space-4))); inline-size: min(var(--_popover-width), var(--_popover-max-width), calc(100vw - var(--space-4)));
min-inline-size: var(--_popover-content-min-width-override, auto); min-inline-size: var(--_popover-min-width);
max-inline-size: min(var(--_popover-max-width), calc(100vw - var(--space-4))); max-inline-size: min(var(--_popover-max-width), calc(100vw - var(--space-4)));
block-size: var(--_popover-content-height-override, auto); block-size: var(--_popover-content-height-override, auto);
min-block-size: var(--_popover-content-min-height-override, auto); min-block-size: var(--_popover-content-min-height-override, auto);

@ -8,7 +8,7 @@
let { let {
size, size,
align = 'end', align = 'end',
sideOffset = 10, sideOffset = 6,
collisionPadding = 12, collisionPadding = 12,
width, width,
minWidth, minWidth,

@ -8,7 +8,7 @@
let { let {
size, size,
align = 'end', align = 'end',
sideOffset = 10, sideOffset = 6,
collisionPadding = 12, collisionPadding = 12,
width, width,
minWidth, minWidth,

@ -167,6 +167,10 @@ export class ComboboxProvider {
}); });
} }
}); });
// Multi mode renders selections as inline tags via a separate
// `Combobox.SelectedTags` part (Material UI Autocomplete pattern).
// The input stays for filtering — we don't stamp labels into it.
} }
isSelected(value: string): boolean { isSelected(value: string): boolean {

@ -19,7 +19,7 @@
id = createId(uid, 'popover-content'), id = createId(uid, 'popover-content'),
forceMount = false, forceMount = false,
side = 'bottom', side = 'bottom',
sideOffset = 0, sideOffset = 6,
align = 'center', align = 'center',
alignOffset = 0, alignOffset = 0,
arrowPadding = 0, arrowPadding = 0,

Loading…
Cancel
Save

Powered by TurnKey Linux.