wa-details for suggested colors

docs/docs/palettes/app/custom.css

@@ -131,31 +131,30 @@ wa-icon-button.delete-button {
 }
 
 #suggested-colors {
-  display: grid;
-  grid-template-columns: minmax(auto, 30ch) 1fr;
-  gap: var(--wa-space-m);
   margin-top: var(--wa-space-2xl);
-  container-name: suggested-colors;
-  container-type: inline-size;
-
-  @container (width < 30ch) {
-    grid-template-columns: 1fr;
-  }
 
   h3 {
     margin-bottom: 0;
   }
 
-  p.wa-caption-s {
-    margin-block: var(--wa-space-s);
+  &::part(content) {
+    padding-block-start: 0;
+  }
+
+  p.wa-caption-m {
+    margin-block: var(--wa-space-xs) var(--wa-space-m);
     text-wrap: pretty;
   }
 
   .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wa-space-s);
+
     wa-button {
       /* --background-color-hover: var(--background-color); */
       height: var(--wa-form-control-height);
-      width: var(--wa-form-control-height);
+      aspect-ratio: 1.2;
 
       wa-icon {
         transition: var(--wa-transition-normal);

docs/docs/palettes/custom.njk

@@ -28,15 +28,14 @@ status: experimental
   </wa-button>
 </div>
 
-<section id="suggested-colors" v-if="step > 0" v-cloak>
-  <header>
-    <h3 class="wa-heading-s">Suggestions</h3>
+<wa-details id="suggested-colors" v-if="step > 0" v-cloak open>
+  <h3 class="wa-heading-m" slot="summary">Suggestions</h3>
+
+  <p class="wa-caption-m">
+    Generated by our fancy-schmancy algorithm to complement your colors.
+    See a color you like? Grab it before it’s gone!
+  </p>
 
-    <p class="wa-caption-s">
-      Generated by our fancy-schmancy algorithm to complement your colors.<br>
-      See a color you like? Grab it before it’s gone!
-    </p>
-  </header>
   <div class="suggestions wa-cluster wa-align-items-start wa-gap-s">
     <template v-for="color, hue in suggestedColors">
       <info-tip>
@@ -47,7 +46,7 @@ status: experimental
       </info-tip>
     </template>
   </div>
-</section>
+</wa-details>
 
 <section id="roles" v-if="step > 0" v-cloak>
   <h2>Roles</h2>