Skip to content

fix: use :modal pseudo-class so only showModal() dialogs get modal styles - #73

Open
54145a wants to merge 1 commit into
Yohn:mainfrom
54145a:main
Open

fix: use :modal pseudo-class so only showModal() dialogs get modal styles#73
54145a wants to merge 1 commit into
Yohn:mainfrom
54145a:main

Conversation

@54145a

@54145a 54145a commented Aug 18, 2026

Copy link
Copy Markdown

PicoCSS applies modal overlay styles (fixed position, fullscreen backdrop, z-index, centering) to ALL elements, regardless of how they are opened. This is incorrect — only dialogs opened with showModal() should receive modal styles. Dialogs opened with show() should behave as non-modal popovers without the fullscreen backdrop or scroll-lock.

Added :modal pseudo-class to the core dialog selector so modal styles only apply when the dialog is actually in the modal state. This is not a breaking change since no one uses show() to display a modal dialog.

The original author even recommends toggling the open attribute, which MDN states is not the intended usage. This also blocks the Popover API.

Ref: picocss#586

…yles

PicoCSS applies modal overlay styles (fixed position, fullscreen backdrop,
z-index, centering) to ALL <dialog> elements, regardless of how they are
opened. This is incorrect — only dialogs opened with showModal() should
receive modal styles. Dialogs opened with show() should behave as non-modal
popovers without the fullscreen backdrop or scroll-lock.

Added :modal pseudo-class to the core dialog selector so modal styles only
apply when the dialog is actually in the modal state. This is not a breaking
change since no one uses show() to display a modal dialog.

The original author even recommends toggling the open attribute, which MDN
states is not the intended usage. This also blocks the Popover API.

Ref: picocss#586
Copilot AI lite review requested due to automatic review settings August 18, 2026 13:14

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants