feat(dees-heading): add numeric aliases for horizontal rule heading levels and refine heading spacing styles

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-08 - 3.69.0 - feat(dees-heading)
+add numeric aliases for horizontal rule heading levels and refine heading spacing styles
+
+- Support level="7" as an alias for "hr" and level="8" as an alias for "hr-small".
+- Update heading and hr variant styles to use design tokens for spacing and colors, with per-level margin tuning.
+- Extend the demo to show both named and numeric hr heading level variants.
+
 ## 2026-04-08 - 3.68.0 - feat(dees-simple-appdash)
 add nested sidebar subviews and preserve submit labels from slotted text
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.68.0',
+  version: '3.69.0',
   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.demo.ts

@@ -8,7 +8,9 @@ export function demoFunc() {
     <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">This is an hr heading (level="hr")</dees-heading>
-    <dees-heading level="hr-small">This is an hr small heading</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>
   `;
 }

ts_web/elements/00group-layout/dees-heading/dees-heading.ts

@@ -27,68 +27,91 @@ export class DeesHeading extends DeesElement {
 
   // properties
   /**
-   * Heading level: 1-6 for h1-h6, or 'hr' for horizontal rule style
+   * Heading level:
+   *   '1'-'6'  → <h1>..<h6>
+   *   '7'|'hr'       → horizontal-rule style heading
+   *   '8'|'hr-small' → small horizontal-rule style heading
    */
   @property({ type: String, reflect: true })
-  accessor level: '1' | '2' | '3' | '4' | '5' | '6' | 'hr' | 'hr-small' = '1';
+  accessor level: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | 'hr' | 'hr-small' = '1';
 
   // STATIC STYLES
   public static styles: CSSResult[] = [
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        display: block;
+      }
+
       /* Heading styles */
       h1, h2, h3, h4, h5, h6 {
-        margin: 16px 0 8px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: var(--dees-color-text-primary);
       }
-      h1 { font-size: 32px; font-family: ${cssCalSansFontFamily}; letter-spacing: 0.025em;}
+
-      h2 { font-size: 28px; }
+      /* Per-level typography + spacing.
-      h3 { font-size: 24px; }
+       * Margin scales with importance: h1 gets the most breathing room,
-      h4 { font-size: 20px; }
+       * h6 the least. Top margin > bottom margin so headings group with
-      h5 { font-size: 16px; }
+       * the content that follows them. */
-      h6 { font-size: 14px; }
+      h1 {
+        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;
+        margin: var(--dees-spacing-lg) 0;
-        color: ${cssManager.bdTheme('#999', '#555')};
+        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: linear-gradient(to right, transparent, var(--dees-color-border-strong));
-        background: ${cssManager.bdTheme(
+        margin: 0 var(--dees-spacing-sm);
-          'linear-gradient(to right, transparent, #ccc)',
-          'linear-gradient(to right, transparent, #333)'
-        )};
-        margin: 0 8px;
       }
       .heading-hr::after {
         content: '';
         flex: 1;
         height: 1px;
-        /* fade out away from center */
+        background: linear-gradient(to right, var(--dees-color-border-strong), transparent);
-        background: ${cssManager.bdTheme(
+        margin: 0 var(--dees-spacing-sm);
-          'linear-gradient(to right, #ccc, transparent)',
-          'linear-gradient(to right, #333, transparent)'
-        )};
-        margin: 0 8px;
       }
       /* 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);
       }
     `,
   ];
@@ -109,8 +132,10 @@ export class DeesHeading extends DeesElement {
         return html`<h5><slot></slot></h5>`;
       case '6':
         return html`<h6><slot></slot></h6>`;
+      case '7':
       case 'hr':
         return html`<div class="heading-hr"><slot></slot></div>`;
+      case '8':
       case 'hr-small':
         return html`<div class="heading-hr heading-hr-small"><slot></slot></div>`;
       default: