use-wc 1.0.0-pre.64 → 1.0.0-pre.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system.css +19 -1
- package/package.json +1 -1
package/dist/design-system.css
CHANGED
|
@@ -1986,9 +1986,27 @@
|
|
|
1986
1986
|
anchored" signal — so a standalone `[popover]` or modal `<dialog>` elsewhere keeps its UA
|
|
1987
1987
|
centering. `margin-block` (both edges) so the gap survives a `position-try` flip to the
|
|
1988
1988
|
other side. The open-state check mirrors the positioning util: `:popover-open` for a
|
|
1989
|
-
popover, `[open]` for a `<dialog>`.
|
|
1989
|
+
popover, `[open]` for a `<dialog>`.
|
|
1990
|
+
|
|
1991
|
+
The `max-block-size` override is what lets it flip on scroll instead of shrinking.
|
|
1992
|
+
`popover.css` / `dialog.css` cap the surface at `min(80dvh, 100% - <pad>)`, where `100%`
|
|
1993
|
+
is the free space on the anchor's *current* side — so as the anchor nears a viewport edge
|
|
1994
|
+
that cap shrinks with it, the surface never overflows, and `position-try` never sees the
|
|
1995
|
+
overflow it needs to flip (or to flip back). Reworking the cap to
|
|
1996
|
+
`min(80dvh, max(45dvh, 100% - <pad>))` keeps the surface willing to be at least 45dvh: a
|
|
1997
|
+
side smaller than that overflows and triggers a flip, and since sibling sides sum to nearly
|
|
1998
|
+
the full viewport a 45dvh surface always fits the other one, so the flip lands on-screen.
|
|
1999
|
+
Where a side has more than 45dvh the `100%` term still tracks it, up to 80dvh. Left at the
|
|
2000
|
+
default `position-try-order` (not `most-block-size`) so the surface stays on the block-end
|
|
2001
|
+
(below) side whenever the content fits there, only flipping above when it doesn't — rather
|
|
2002
|
+
than jumping to whichever side merely has more room. `overflow` (otherwise `hidden`)
|
|
2003
|
+
scrolls the content once the cap bites; a `use-shell-fill` layout already scrolls its own
|
|
2004
|
+
fill region (`shell.css`), so the surface itself never overflows there and this `overflow`
|
|
2005
|
+
is inert. */
|
|
1990
2006
|
use-anchored > :is(dialog, [popover]):not(use-menu, .appearance-native):is([open], :popover-open) {
|
|
1991
2007
|
margin-block: var(--usewc-layout-surface-anchor-offset);
|
|
2008
|
+
max-block-size: min(80dvh, max(45dvh, 100% - var(--usewc-space-surface-padding) * 2));
|
|
2009
|
+
overflow: auto;
|
|
1992
2010
|
|
|
1993
2011
|
use-theme-escape & {
|
|
1994
2012
|
all: revert-layer;
|