From da6f814fc66af6e44a844effe02757da6452567b Mon Sep 17 00:00:00 2001
From: Egor Kloos <egor.kloos@ns.nl>
Date: Tue, 9 Jan 2024 09:53:43 +0100
Subject: [PATCH] added detail to the floating image default elements

---
 index.html               | 4 ++--
 src/system-selectors.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 85114b4..e3c752e 100644
--- a/index.html
+++ b/index.html
@@ -58,8 +58,8 @@ <h5>Heading 5</h5>
 					>
 						Aspect Ratio 4:3
 					</text></svg
-				>This is paragraph text. If you want the image to float place it inside a <code>&lt;p&gt;</code>,
-				<code>&lt;li&gt;</code>, <code>&lt;dd&gt;</code>, or a <code>&lt;td&gt;</code>.
+				>This is paragraph text. If you want the image to float place it inside a <code>&lt;detail&gt;</code>,
+				<code>&lt;p&gt;</code>, <code>&lt;li&gt;</code>, <code>&lt;dd&gt;</code>, or a <code>&lt;td&gt;</code>.
 			</p>
 			<p>
 				This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet
diff --git a/src/system-selectors.css b/src/system-selectors.css
index d41105d..a8e32ca 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -390,14 +390,14 @@
 		max-inline-size: 100%;
 		block-size: auto;
 	}
-	:is(p, li, td, dd) > :is(img, picture, svg) {
+	:is(p, li, td, dd, detail) > :is(img, picture, svg) {
 		float: inline-end;
 		margin-inline-start: var(--system-spacing-column-gap);
 		margin-block-end: var(--system-spacing-element-block);
 		max-inline-size: 36cqw;
 	}
 	@container --content (width < 42ch) {
-		:is(p, li, dd, td) > :is(img, picture, svg) {
+		:is(p, li, dd, td, detail) > :is(img, picture, svg) {
 			width: 100%;
 			max-inline-size: unset;
 		}