From 3d5babe4e864a4d3e775b42cca86408e3228068b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 1 Aug 2025 09:42:20 -0400 Subject: [PATCH 1/4] Add details about `hidden` attribute preflight rules --- src/docs/preflight.mdx | 11 +++++++++++ src/docs/upgrade-guide.mdx | 4 ++++ 2 files changed, 15 insertions(+) diff --git a/src/docs/preflight.mdx b/src/docs/preflight.mdx index 7224e5c2e..4d687f03c 100644 --- a/src/docs/preflight.mdx +++ b/src/docs/preflight.mdx @@ -181,6 +181,17 @@ This prevents them from overflowing their containers and makes them responsive b ... ``` +#### Elements with a `hidden` attribute stay hidden + +```css +/* [!code filename:CSS] */ +[hidden]:where(:not([hidden='until-found'])) { + display: none !important; +} +``` + +This enfoces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. The should *remove* the `hidden` attribute if you want an element to be visible to the user. + ## Extending Preflight If you'd like to add your own base styles on top of Preflight, add them to the `base` CSS layer in your CSS using `@layer base`: diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index c03e4ef8e..f97644a71 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -564,6 +564,10 @@ If you still want dialogs to be centered by default, add this CSS to your projec } ``` +#### Hidden attribute takes priority + +Display classes like `block` or `flex` no longer take priority over the `hidden` attribute on an element. You should *remove* the `hidden` attribute if you want an element to be visible to the user. Note that this does not apply to `hidden="until-found"`. + ### Using a prefix Prefixes now look like variants and are always at the beginning of the class name: From 9710a75d17ddb76ed81f0849228482f562453be8 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 8 Sep 2025 15:30:47 +0200 Subject: [PATCH 2/4] Apply suggestion from @philipp-spiess --- src/docs/preflight.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/preflight.mdx b/src/docs/preflight.mdx index 4d687f03c..f3e15420d 100644 --- a/src/docs/preflight.mdx +++ b/src/docs/preflight.mdx @@ -190,7 +190,7 @@ This prevents them from overflowing their containers and makes them responsive b } ``` -This enfoces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. The should *remove* the `hidden` attribute if you want an element to be visible to the user. +This enfoces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. Remove the `hidden` attribute if you want an element to be visible to the user. ## Extending Preflight From 71c21a9d95a8d26793fcff6aa40ea9eaef2586da Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 8 Sep 2025 15:30:53 +0200 Subject: [PATCH 3/4] Apply suggestion from @philipp-spiess --- src/docs/upgrade-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index f97644a71..99b265869 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -566,7 +566,7 @@ If you still want dialogs to be centered by default, add this CSS to your projec #### Hidden attribute takes priority -Display classes like `block` or `flex` no longer take priority over the `hidden` attribute on an element. You should *remove* the `hidden` attribute if you want an element to be visible to the user. Note that this does not apply to `hidden="until-found"`. +Display classes like `block` or `flex` no longer take priority over the `hidden` attribute on an element. Remove the `hidden` attribute if you want an element to be visible to the user. Note that this does not apply to `hidden="until-found"`. ### Using a prefix From 56a7704a744c037224a00c3c9d61e81a3007e49b Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 8 Sep 2025 17:43:38 +0200 Subject: [PATCH 4/4] Apply suggestion from @Wiicolas Co-authored-by: Nicolas --- src/docs/preflight.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/preflight.mdx b/src/docs/preflight.mdx index f3e15420d..0249ed8e3 100644 --- a/src/docs/preflight.mdx +++ b/src/docs/preflight.mdx @@ -190,7 +190,7 @@ This prevents them from overflowing their containers and makes them responsive b } ``` -This enfoces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. Remove the `hidden` attribute if you want an element to be visible to the user. +This enforces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. Remove the `hidden` attribute if you want an element to be visible to the user. ## Extending Preflight