@design.estate/dees-catalog 3.68.0 → 3.69.1

package/dist_watch/bundle.js

@@ -191683,8 +191683,10 @@ function demoFunc53() {
     <dees-heading level="4">This is a H4 heading</dees-heading>
     <dees-heading level="5">This is a H5 heading</dees-heading>
     <dees-heading level="6">This is a H6 heading</dees-heading>
-    <dees-heading level="hr">This is an hr heading</dees-heading>
-    <dees-heading level="hr-small">This is an hr small heading</dees-heading>
+    <dees-heading level="hr">This is an hr heading (level="hr")</dees-heading>
+    <dees-heading level="7">This is an hr heading (level="7")</dees-heading>
+    <dees-heading level="hr-small">This is an hr-small heading (level="hr-small")</dees-heading>
+    <dees-heading level="8">This is an hr-small heading (level="8")</dees-heading>
   `;
 }
 __name(demoFunc53, "demoFunc");
@@ -191714,8 +191716,10 @@ var _DeesHeading = class _DeesHeading extends (_a79 = DeesElement, _level_dec =
         return b2`<h5><slot></slot></h5>`;
       case "6":
         return b2`<h6><slot></slot></h6>`;
+      case "7":
       case "hr":
         return b2`<div class="heading-hr"><slot></slot></div>`;
+      case "8":
       case "hr-small":
         return b2`<div class="heading-hr heading-hr-small"><slot></slot></div>`;
       default:
@@ -191736,58 +191740,91 @@ __publicField(_DeesHeading, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      /* Heading styles */
+      :host {
+        display: block;
+      }
+
+      /* 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 {
-        margin: 16px 0 8px;
         font-weight: 600;
-        color: ${cssManager.bdTheme("#000", "#fff")};
       }
-      h1 { font-size: 32px; font-family: ${cssCalSansFontFamily}; letter-spacing: 0.025em;}
-      h2 { font-size: 28px; }
-      h3 { font-size: 24px; }
-      h4 { font-size: 20px; }
-      h5 { font-size: 16px; }
-      h6 { font-size: 14px; }
+      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;
+        margin: var(--dees-spacing-2xl) 0 var(--dees-spacing-lg);
+      }
+      h2 {
+        font-size: 28px;
+        margin: var(--dees-spacing-xl) 0 var(--dees-spacing-md);
+      }
+      h3 {
+        font-size: 24px;
+        margin: var(--dees-spacing-xl) 0 var(--dees-spacing-md);
+      }
+      h4 {
+        font-size: 20px;
+        margin: var(--dees-spacing-lg) 0 var(--dees-spacing-sm);
+      }
+      h5 {
+        font-size: 16px;
+        margin: var(--dees-spacing-md) 0 var(--dees-spacing-sm);
+      }
+      h6 {
+        font-size: 14px;
+        margin: var(--dees-spacing-md) 0 var(--dees-spacing-xs);
+      }
+
       /* Horizontal rule style heading */
       .heading-hr {
         display: flex;
         align-items: center;
         text-align: center;
-        margin: 16px 0;
-        color: ${cssManager.bdTheme("#999", "#555")};
+        margin: var(--dees-spacing-lg) 0;
+        color: var(--dees-color-text-muted);
       }
       /* Fade lines toward and away from text for hr style */
       .heading-hr::before {
         content: '';
         flex: 1;
         height: 1px;
-        /* fade in toward center */
-        background: ${cssManager.bdTheme(
-    "linear-gradient(to right, transparent, #ccc)",
-    "linear-gradient(to right, transparent, #333)"
-  )};
-        margin: 0 8px;
+        background: linear-gradient(to right, transparent, var(--dees-color-border-strong));
+        margin: 0 var(--dees-spacing-sm);
       }
       .heading-hr::after {
         content: '';
         flex: 1;
         height: 1px;
-        /* fade out away from center */
-        background: ${cssManager.bdTheme(
-    "linear-gradient(to right, #ccc, transparent)",
-    "linear-gradient(to right, #333, transparent)"
-  )};
-        margin: 0 8px;
+        background: linear-gradient(to right, var(--dees-color-border-strong), transparent);
+        margin: 0 var(--dees-spacing-sm);
       }
       /* Small hr variant with reduced margins */
       .heading-hr.heading-hr-small {
-        margin: 8px 0;
+        margin: var(--dees-spacing-sm) 0;
         font-size: 12px;
       }
       .heading-hr.heading-hr-small::before,
       .heading-hr.heading-hr-small::after {
-        margin: 0 8px;
+        margin: 0 var(--dees-spacing-sm);
       }
     `
 ]);
@@ -199391,26 +199428,31 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a97 = DeesElement, _
                       <dees-icon class="chevron" .icon="${"lucide:chevronDown"}"></dees-icon>
                     ` : ""}
                   </div>
-                  ${hasSubs && groupActive ? b2`
-                    <div class="subViews">
-                      ${view.subViews.map(
+                  ${hasSubs ? b2`
+                    <div
+                      class="subViews ${groupActive ? "expanded" : ""}"
+                      ?inert=${!groupActive}
+                    >
+                      <div class="subViews-inner">
+                        ${view.subViews.map(
         (sub2) => b2`
-                          <div
-                            class="viewTab sub ${this.selectedView === sub2 ? "selected" : ""}"
-                            @click=${(e11) => {
+                            <div
+                              class="viewTab sub ${this.selectedView === sub2 ? "selected" : ""}"
+                              @click=${(e11) => {
           e11.stopPropagation();
           this.loadView(sub2);
         }}
-                          >
-                            ${sub2.iconName ? b2`
-                              <dees-icon .icon="${sub2.iconName.includes(":") ? sub2.iconName : `lucide:${sub2.iconName}`}"></dees-icon>
-                            ` : b2`
-                              <dees-icon .icon="${"lucide:dot"}"></dees-icon>
-                            `}
-                            <span>${sub2.name}</span>
-                          </div>
-                        `
+                            >
+                              ${sub2.iconName ? b2`
+                                <dees-icon .icon="${sub2.iconName.includes(":") ? sub2.iconName : `lucide:${sub2.iconName}`}"></dees-icon>
+                              ` : b2`
+                                <dees-icon .icon="${"lucide:dot"}"></dees-icon>
+                              `}
+                              <span>${sub2.name}</span>
+                            </div>
+                          `
       )}
+                      </div>
                     </div>
                   ` : ""}
                 `;
@@ -199824,12 +199866,20 @@ __publicField(_DeesSimpleAppDash, "styles", [
       }
 
       .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 {
@@ -199840,6 +199890,21 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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 {