v3.69.1

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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.69.0",
+  "version": "3.69.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

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;
-        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,8 +654,12 @@ export class DeesSimpleAppDash extends DeesElement {
                       <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
                     ` : ''}
                   </div>
-                  ${hasSubs && groupActive ? html`
-                    <div class="subViews">
+                  ${hasSubs ? html`
+                    <div
+                      class="subViews ${groupActive ? 'expanded' : ''}"
+                      ?inert=${!groupActive}
+                    >
+                      <div class="subViews-inner">
                         ${view.subViews!.map(
                           (sub) => html`
                             <div
@@ -652,6 +679,7 @@ export class DeesSimpleAppDash extends DeesElement {
                           `
                         )}
                       </div>
+                    </div>
                   ` : ''}
                 `;
               })}