release: v0.20.0

app/admin/styles/theme-cards.css

@@ -142,12 +142,46 @@
 
 .hero-demo-typographic {
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
 }
 
-.hero-demo-grid2 {
+.hero-demo-typographic .demo-line.title.giant {
+  height: 10px;
+  margin-bottom: 0;
+}
+
+.hero-demo-divider {
+  width: 12%;
+  height: 1px;
+  margin: 0.1rem 0;
+  background: var(--admin-text-muted);
+}
+
+.hero-demo-nav {
   display: flex;
-  gap: 0.25rem;
-  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  width: 100%;
+}
+
+.hero-demo-nav .demo-line {
+  width: 30%;
+  height: 2px;
+}
+
+.hero-demo-cover-splash {
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.hero-demo-enter {
+  width: 22%;
+  height: 6px;
+  border: 1px solid #ffffff;
+  border-radius: 2px;
 }
 
 .hero-demo-mosaic {
@@ -322,6 +356,31 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
+.segment-btn:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: 1px;
+}
+
+/* Compact size for toolbars: the editor's Visual Blocks / Raw Markdown, its
+   preview's Desktop / Mobile and the subpage drawer's Edit / Live Preview.
+   Replaces the inline padding the drawer used to carry. */
+.segmented-control--sm {
+  padding: 2px;
+  gap: 2px;
+  border-radius: 8px;
+}
+
+.segmented-control--sm .segment-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.6rem;
+  min-height: 24px;
+  font-size: 0.75rem;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
 /* Accent Color Swatches */
 .accent-picker-wrapper {
   display: flex;