diff --git a/changelog.md b/changelog.md
index dcaa387..77136e7 100644
--- a/changelog.md
+++ b/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
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 02dd8d7..78d3289 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.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.'
}
diff --git a/ts_web/elements/00group-layout/dees-heading/dees-heading.demo.ts b/ts_web/elements/00group-layout/dees-heading/dees-heading.demo.ts
index 9362097..df554e4 100644
--- a/ts_web/elements/00group-layout/dees-heading/dees-heading.demo.ts
+++ b/ts_web/elements/00group-layout/dees-heading/dees-heading.demo.ts
@@ -8,7 +8,9 @@ export function demoFunc() {
This is a H4 heading
This is a H5 heading
This is a H6 heading
- This is an hr heading
- This is an hr small heading
+ This is an hr heading (level="hr")
+ This is an hr heading (level="7")
+ This is an hr-small heading (level="hr-small")
+ This is an hr-small heading (level="8")
`;
}
\ No newline at end of file
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 137d40f..445be3b 100644
--- a/ts_web/elements/00group-layout/dees-heading/dees-heading.ts
+++ b/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' → ..
+ * '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; }
- h3 { font-size: 24px; }
- h4 { font-size: 20px; }
- h5 { font-size: 16px; }
- h6 { font-size: 14px; }
+
+ /* 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 {
+ 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);
}
`,
];
@@ -109,8 +132,10 @@ export class DeesHeading extends DeesElement {
return html`
`;
case '6':
return html`
`;
+ case '7':
case 'hr':
return html`
`;
+ case '8':
case 'hr-small':
return html`
`;
default: