[color-swatch] Fix popovers with color details in <color-chart>s in Safari

Safari appears to have issues with combining styles within container queries with popover styles, so we need to move them out.

Author: DmitrySharabin

src/color-swatch/color-swatch.css

@@ -94,6 +94,18 @@ slot {
 }
 
 [part="details"] {
+	/*
+		Why here and not in the style query below? Because Safari has issues with parsing nested rules inside style queries,
+		we need to duplicate some rules to achieve the desired effect. Moving custom properties here allows us to make the code a bit DRYer.
+	*/
+	--_border-color: var(
+		--border-color,
+		color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%))
+	);
+	--_pointer-height: var(--pointer-height, 0.5em);
+	--_transition-duration: var(--transition-duration, 400ms);
+	--_details-popup-width: var(--details-popup-width, max-content);
+
 	display: flex;
 	flex-flow: inherit;
 	gap: inherit;
@@ -116,14 +128,6 @@ slot {
 	}
 
 	@container style(--details-style: compact) {
-		--_border-color: var(
-			--border-color,
-			color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%))
-		);
-		--_pointer-height: var(--pointer-height, 0.5em);
-		--_transition-duration: var(--transition-duration, 400ms);
-		--_details-popup-width: var(--details-popup-width, max-content);
-
 		position: absolute;
 		left: 50%;
 		z-index: 2;
@@ -135,26 +139,12 @@ slot {
 		border: 1px solid var(--_border-color);
 		padding: 0.6em 1em;
 		border-radius: 0.2rem;
-		box-shadow: 0 0.05em 1em -0.7em black;
+		box-shadow: 0 0.05em 1em -0.7em canvastext;
 		transition: var(--_transition-duration) allow-discrete;
 		transition-property: all, display;
 		transition-delay: 0s, var(--_transition-duration);
 		transform-origin: 50% calc(100% + var(--_pointer-height));
 
-		&[popover] {
-			/* Make the triangle pointer visible */
-			overflow: visible;
-
-			/* Bring the popover back on the screen */
-			position: fixed;
-			inset: unset;
-
-			/* And position it relative to the parent swatch */
-			left: var(--_popover-left);
-			top: var(--_popover-top);
-			translate: -50% -100%;
-		}
-
 		/* Triangle pointer */
 		&::before {
 			content: "";
@@ -183,6 +173,78 @@ slot {
 			scale: 0;
 		}
 	}
+
+	&[popover] {
+		/* Make the triangle pointer visible */
+		overflow: visible;
+
+		/* Bring the popover back on the screen */
+		position: fixed;
+		inset: unset;
+
+		&:popover-open {
+			/* And position it relative to the parent swatch */
+			left: var(--_popover-left);
+			top: var(--_popover-top);
+			translate: -50% -100%;
+
+			/* We need to duplicate these rules from the style query rule because Safari refuses to pick them up. */
+			margin-bottom: calc(var(--_pointer-height) * 0.8);
+			width: var(--_details-popup-width);
+			background: canvas;
+			border: 1px solid var(--_border-color);
+			padding: 0.6em 1em;
+			border-radius: 0.2rem;
+			box-shadow: 0 0.05em 1em -0.7em canvastext;
+			transition: var(--_transition-duration) allow-discrete;
+			transition-property: all, display;
+			transition-delay: 0s, var(--_transition-duration);
+			transform-origin: 50% calc(100% + var(--_pointer-height));
+		}
+
+		&:not(:popover-open) {
+			/* Hide the popover when not open. This is also a workaround for Safari */
+			display: none;
+			opacity: 0;
+			scale: 0;
+		}
+	}
+
+	&[popover] {
+		/* Make the triangle pointer visible */
+		overflow: visible;
+
+		/* Bring the popover back on the screen */
+		position: fixed;
+		inset: unset;
+
+		&:popover-open {
+			/* And position it relative to the parent swatch */
+			left: var(--_popover-left);
+			top: var(--_popover-top);
+			translate: -50% -100%;
+
+			/* We need to duplicate these rules from the style query rule because Safari refuses to pick them up. */
+			margin-bottom: calc(var(--_pointer-height) * 0.8);
+			width: var(--_details-popup-width);
+			background: canvas;
+			border: 1px solid var(--_border-color);
+			padding: 0.6em 1em;
+			border-radius: 0.2rem;
+			box-shadow: 0 0.05em 1em -0.7em canvastext;
+			transition: var(--_transition-duration) allow-discrete;
+			transition-property: all, display;
+			transition-delay: 0s, var(--_transition-duration);
+			transform-origin: 50% calc(100% + var(--_pointer-height));
+		}
+
+		&:not(:popover-open) {
+			/* Hide the popover when not open. This is also a workaround for Safari */
+			display: none;
+			opacity: 0;
+			scale: 0;
+		}
+	}
 }
 
 [part="color"] {