From eecdc5155718855687c79da460d43ee2e58cc515 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Wed, 8 Apr 2026 09:57:57 +0000
Subject: [PATCH] fix(ui): refine heading emphasis and animate app dashboard
 subview expansion

---
 changelog.md                                  |  6 ++
 ts_web/00_commitinfo_data.ts                  |  2 +-
 .../dees-heading/dees-heading.ts              | 15 +++-
 .../dees-simple-appdash.ts                    | 78 +++++++++++++------
 4 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/changelog.md b/changelog.md
index 77136e7..1121b7c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 2026-04-08 - 3.69.1 - fix(ui)
+refine heading emphasis and animate app dashboard subview expansion
+
+- Adjust heading color hierarchy so h1-h2 use primary text while h3-h6 use secondary text, and reduce h1 font weight for better visual balance
+- Replace app dashboard subview conditional rendering with animated expand/collapse behavior using grid transitions and inert state handling
+
 ## 2026-04-08 - 3.69.0 - feat(dees-heading)
 add numeric aliases for horizontal rule heading levels and refine heading spacing styles
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 78d3289..abfeb60 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.69.0',
+  version: '3.69.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-layout/dees-heading/dees-heading.ts b/ts_web/elements/00group-layout/dees-heading/dees-heading.ts
index 445be3b..f8b637a 100644
--- a/ts_web/elements/00group-layout/dees-heading/dees-heading.ts
+++ b/ts_web/elements/00group-layout/dees-heading/dees-heading.ts
@@ -44,17 +44,30 @@ export class DeesHeading extends DeesElement {
         display: block;
       }
 
-      /* Heading styles */
+      /* Heading styles.
+       * Color hierarchy: h1-h2 stay prominent with text-primary; h3-h6 step
+       * down to text-secondary so they read as subheadings instead of
+       * mini-h1s. Keeps the visual loudness out of smaller headings. */
       h1, h2, h3, h4, h5, h6 {
         font-weight: 600;
+      }
+      h1, h2 {
         color: var(--dees-color-text-primary);
       }
+      h3, h4, h5, h6 {
+        color: var(--dees-color-text-secondary);
+      }
 
       /* Per-level typography + spacing.
        * Margin scales with importance: h1 gets the most breathing room,
        * h6 the least. Top margin > bottom margin so headings group with
        * the content that follows them. */
       h1 {
+        /* h1 uses weight 500, not 600: the Cal Sans display font is
+         * already stylized enough that bold + max contrast + 32px stacks
+         * too much emphasis. 500 keeps the typographic impact without
+         * shouting. */
+        font-weight: 500;
         font-size: 32px;
         font-family: ${cssCalSansFontFamily};
         letter-spacing: 0.025em;
diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
index 9ba939a..238eeea 100644
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -269,12 +269,20 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .subViews {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        margin: 2px 0 4px 12px;
-        padding-left: 12px;
+        display: grid;
+        grid-template-rows: 0fr;
+        margin-left: 12px;
         position: relative;
+        transition:
+          grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .subViews.expanded {
+        grid-template-rows: 1fr;
+        margin-top: 2px;
+        margin-bottom: 4px;
       }
 
       .subViews::before {
@@ -285,6 +293,21 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 4px;
         width: 1px;
         background: var(--dees-color-border-default);
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      .subViews.expanded::before {
+        opacity: 1;
+      }
+
+      .subViews-inner {
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding-left: 12px;
       }
 
       .viewTab.sub {
@@ -631,26 +654,31 @@ export class DeesSimpleAppDash extends DeesElement {
                       <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
                     ` : ''}
                   </div>
-                  ${hasSubs && groupActive ? html`
-                    <div class="subViews">
-                      ${view.subViews!.map(
-                        (sub) => html`
-                          <div
-                            class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
-                            @click=${(e: Event) => {
-                              e.stopPropagation();
-                              this.loadView(sub);
-                            }}
-                          >
-                            ${sub.iconName ? html`
-                              <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
-                            ` : html`
-                              <dees-icon .icon="${'lucide:dot'}"></dees-icon>
-                            `}
-                            <span>${sub.name}</span>
-                          </div>
-                        `
-                      )}
+                  ${hasSubs ? html`
+                    <div
+                      class="subViews ${groupActive ? 'expanded' : ''}"
+                      ?inert=${!groupActive}
+                    >
+                      <div class="subViews-inner">
+                        ${view.subViews!.map(
+                          (sub) => html`
+                            <div
+                              class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
+                              @click=${(e: Event) => {
+                                e.stopPropagation();
+                                this.loadView(sub);
+                              }}
+                            >
+                              ${sub.iconName ? html`
+                                <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
+                              ` : html`
+                                <dees-icon .icon="${'lucide:dot'}"></dees-icon>
+                              `}
+                              <span>${sub.name}</span>
+                            </div>
+                          `
+                        )}
+                      </div>
                     </div>
                   ` : ''}
                 `;