fix(ui): refine heading emphasis and animate app dashboard subview expansion

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
 

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.'
 }

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;

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -269,12 +269,20 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .subViews {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-template-rows: 0fr;
-        gap: 2px;
+        margin-left: 12px;
-        margin: 2px 0 4px 12px;
-        padding-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`
+                  ${hasSubs ? html`
-                    <div class="subViews">
+                    <div
-                      ${view.subViews!.map(
+                      class="subViews ${groupActive ? 'expanded' : ''}"
-                        (sub) => html`
+                      ?inert=${!groupActive}
-                          <div
+                    >
-                            class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
+                      <div class="subViews-inner">
-                            @click=${(e: Event) => {
+                        ${view.subViews!.map(
-                              e.stopPropagation();
+                          (sub) => html`
-                              this.loadView(sub);
+                            <div
-                            }}
+                              class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
-                          >
+                              @click=${(e: Event) => {
-                            ${sub.iconName ? html`
+                                e.stopPropagation();
-                              <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
+                                this.loadView(sub);
-                            ` : html`
+                              }}
-                              <dees-icon .icon="${'lucide:dot'}"></dees-icon>
+                            >
-                            `}
+                              ${sub.iconName ? html`
-                            <span>${sub.name}</span>
+                                <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
-                          </div>
+                              ` : html`
-                        `
+                                <dees-icon .icon="${'lucide:dot'}"></dees-icon>
-                      )}
+                              `}
+                              <span>${sub.name}</span>
+                            </div>
+                          `
+                        )}
+                      </div>
                     </div>
                   ` : ''}
                 `;