added details card component

web/css/base/variables.base.css

@@ -310,6 +310,7 @@
   --app-card-border-color: var(--app-muted-border-color);
   --app-card-box-shadow: var(--app-box-shadow);
   --app-card-sectioning-background-color: rgb(251, 251.5, 252.25);
+  --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
   --app-dropdown-background-color: #fff;
   --app-dropdown-border-color: #eff1f4;
   --app-dropdown-box-shadow: var(--app-box-shadow);
@@ -543,6 +544,7 @@
     --app-card-border-color: var(--app-card-background-color);
     --app-card-box-shadow: var(--app-box-shadow);
     --app-card-sectioning-background-color: rgb(26, 30.5, 40.25);
+    --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
     --app-dropdown-background-color: #181c25;
     --app-dropdown-border-color: #202632;
     --app-dropdown-box-shadow: var(--app-box-shadow);
@@ -777,6 +779,7 @@
   --app-card-border-color: var(--app-card-background-color);
   --app-card-box-shadow: var(--app-box-shadow);
   --app-card-sectioning-background-color: rgb(26, 30.5, 40.25);
+  --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
   --app-dropdown-background-color: #181c25;
   --app-dropdown-border-color: #202632;
   --app-dropdown-box-shadow: var(--app-box-shadow);

web/css/base/variables.theme-dark-green.css

@@ -15,6 +15,7 @@
   --app-card-background-color: #141f19;
   --app-card-border-color: #223028;
   --app-card-sectioning-background-color: #1a261f;
+  --app-details-card-open-summary-bg: #203026;
   --app-dropdown-background-color: #141f19;
   --app-dropdown-border-color: #223028;
   --app-dropdown-hover-background-color: #1f2a24;

web/css/components/app-blockquote.css

@@ -18,6 +18,9 @@
     border-inline-start-color: var(--blockquote-border);
     border-radius: var(--app-border-radius);
   }
+  blockquote:has(small) {
+    padding: 6px 8px;
+  }
   blockquote p:last-child {
     margin: 0;
   }

web/css/components/app-details-card.css

@@ -0,0 +1,45 @@
+@layer components {
+  details.app-details-card {
+    margin-bottom: calc(var(--app-spacing) * 0.75);
+    border: 1px solid
+      var(--app-card-border-color, var(--app-accordion-border-color));
+    border-radius: var(--app-border-radius);
+    background: var(--app-card-background-color);
+    overflow: hidden;
+  }
+
+  details.app-details-card > summary {
+    margin: 0;
+    padding: calc(var(--app-spacing) * 0.75) var(--app-spacing);
+    font-size: 0.85rem;
+    line-height: 1.25;
+    text-transform: none;
+    background: var(--app-card-sectioning-background-color);
+  }
+
+  details.app-details-card > summary::after {
+    margin-inline-start: calc(var(--app-spacing) * 0.5);
+  }
+
+  details.app-details-card[open] > summary {
+    margin-bottom: var(--app-spacing);
+    border-bottom: 1px solid
+      var(--app-card-border-color, var(--app-accordion-border-color));
+    background: var(
+      --app-details-card-open-summary-bg,
+      var(--app-card-sectioning-background-color)
+    );
+  }
+
+  .app-details-card-container {
+    padding-inline: var(--app-spacing);
+    padding-bottom: var(--app-spacing);
+  }
+
+  .app-details-card-container > *:last-child {
+    margin-bottom: 0;
+  }
+  details.app-details-card[open] {
+    border-width: 2px;
+  }
+}

web/css/components/app-forms.css

@@ -97,7 +97,5 @@
   fieldset[aria-disabled="true"] legend small {
     color: var(--app-muted-color);
   }
-  label:has(.badge) > span {
-    margin-bottom: 5px;
-  }
+
 }