@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/sections/hero/hero-section.styles.js

@@ -3,6 +3,68 @@ export const heroSectionStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* Font */
+		--ml-hero-font-family: var(--ml-font-sans);
+
+		/* Size: sm */
+		--ml-hero-sm-padding: var(--ml-space-12) var(--ml-space-6);
+		--ml-hero-sm-title-size: var(--ml-text-3xl);
+		--ml-hero-sm-description-size: var(--ml-text-base);
+
+		/* Size: md */
+		--ml-hero-md-padding: var(--ml-space-20) var(--ml-space-6);
+		--ml-hero-md-title-size: var(--ml-text-4xl);
+		--ml-hero-md-description-size: var(--ml-text-lg);
+
+		/* Size: lg */
+		--ml-hero-lg-padding: calc(var(--ml-space-20) + var(--ml-space-10)) var(--ml-space-6);
+		--ml-hero-lg-title-size: var(--ml-text-5xl);
+		--ml-hero-lg-description-size: var(--ml-text-xl);
+
+		/* Background variants */
+		--ml-hero-bg-subtle: var(--ml-color-surface-secondary);
+		--ml-hero-bg-gradient: linear-gradient(
+			135deg,
+			var(--ml-color-primary-subtle) 0%,
+			var(--ml-color-surface) 50%,
+			var(--ml-color-success-subtle, var(--ml-color-surface-secondary)) 100%
+		);
+
+		/* Container */
+		--ml-hero-container-max-width: var(--ml-container-xl, 1280px);
+		--ml-hero-content-max-width: 800px;
+		--ml-hero-split-gap: var(--ml-space-12);
+
+		/* Eyebrow */
+		--ml-hero-eyebrow-margin-bottom: var(--ml-space-4);
+		--ml-hero-eyebrow-font-size: var(--ml-text-sm);
+		--ml-hero-eyebrow-font-weight: var(--ml-font-semibold);
+		--ml-hero-eyebrow-color: var(--ml-color-primary);
+		--ml-hero-eyebrow-letter-spacing: 0.05em;
+
+		/* Title */
+		--ml-hero-title-margin-bottom: var(--ml-space-4);
+		--ml-hero-title-font-weight: var(--ml-font-bold);
+		--ml-hero-title-color: var(--ml-color-text);
+		--ml-hero-title-letter-spacing: -0.025em;
+		--ml-hero-title-line-height: var(--ml-leading-tight);
+
+		/* Description */
+		--ml-hero-description-margin-bottom: var(--ml-space-8);
+		--ml-hero-description-color: var(--ml-color-text-secondary);
+		--ml-hero-description-line-height: var(--ml-leading-relaxed);
+		--ml-hero-description-max-width: 640px;
+
+		/* Actions */
+		--ml-hero-actions-gap: var(--ml-space-3);
+
+		/* Media */
+		--ml-hero-media-radius: var(--ml-radius-lg);
+		--ml-hero-media-below-margin: var(--ml-space-10);
+
+		/* Social proof */
+		--ml-hero-social-proof-margin: var(--ml-space-10);
 	}
 
 	/* ============================================
@@ -11,78 +73,73 @@ export const heroSectionStyles = () => css `
 	.ml-hero {
 		position: relative;
 		width: 100%;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-hero-font-family);
 	}
 
 	/* ============================================
 	   SIZE VARIANTS (padding & font sizes)
 	   ============================================ */
 	.ml-hero--sm {
-		padding: var(--ml-space-12) var(--ml-space-6);
+		padding: var(--ml-hero-sm-padding);
 	}
 
 	.ml-hero--md {
-		padding: var(--ml-space-20) var(--ml-space-6);
+		padding: var(--ml-hero-md-padding);
 	}
 
 	.ml-hero--lg {
-		padding: calc(var(--ml-space-20) + var(--ml-space-10)) var(--ml-space-6);
+		padding: var(--ml-hero-lg-padding);
 	}
 
 	.ml-hero--sm .ml-hero__title,
 	.ml-hero--sm ::slotted([slot="title"]) {
-		font-size: var(--ml-text-3xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-sm-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--md .ml-hero__title,
 	.ml-hero--md ::slotted([slot="title"]) {
-		font-size: var(--ml-text-4xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-md-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--lg .ml-hero__title,
 	.ml-hero--lg ::slotted([slot="title"]) {
-		font-size: var(--ml-text-5xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-lg-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--sm .ml-hero__description,
 	.ml-hero--sm ::slotted([slot="description"]) {
-		font-size: var(--ml-text-base);
+		font-size: var(--ml-hero-sm-description-size);
 	}
 
 	.ml-hero--md .ml-hero__description,
 	.ml-hero--md ::slotted([slot="description"]) {
-		font-size: var(--ml-text-lg);
+		font-size: var(--ml-hero-md-description-size);
 	}
 
 	.ml-hero--lg .ml-hero__description,
 	.ml-hero--lg ::slotted([slot="description"]) {
-		font-size: var(--ml-text-xl);
+		font-size: var(--ml-hero-lg-description-size);
 	}
 
 	/* ============================================
 	   BACKGROUND VARIANTS
 	   ============================================ */
 	.ml-hero--bg-subtle {
-		background-color: var(--ml-color-surface-secondary);
+		background-color: var(--ml-hero-bg-subtle);
 	}
 
 	.ml-hero--bg-gradient {
-		background: linear-gradient(
-			135deg,
-			var(--ml-color-primary-subtle) 0%,
-			var(--ml-color-surface) 50%,
-			var(--ml-color-success-subtle, var(--ml-color-surface-secondary)) 100%
-		);
+		background: var(--ml-hero-bg-gradient);
 	}
 
 	/* ============================================
 	   LAYOUT: CONTAINER
 	   ============================================ */
 	.ml-hero__container {
-		max-width: var(--ml-container-xl, 1280px);
+		max-width: var(--ml-hero-container-max-width);
 		margin: 0 auto;
 		width: 100%;
 	}
@@ -101,11 +158,11 @@ export const heroSectionStyles = () => css `
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
-		max-width: 800px;
+		max-width: var(--ml-hero-content-max-width);
 	}
 
 	.ml-hero--centered .ml-hero__media--below {
-		margin-top: var(--ml-space-10);
+		margin-top: var(--ml-hero-media-below-margin);
 		width: 100%;
 		display: flex;
 		justify-content: center;
@@ -118,7 +175,7 @@ export const heroSectionStyles = () => css `
 	.ml-hero--split-reverse .ml-hero__container {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		gap: var(--ml-space-12);
+		gap: var(--ml-hero-split-gap);
 		align-items: center;
 	}
 
@@ -143,36 +200,36 @@ export const heroSectionStyles = () => css `
 	/* Eyebrow */
 	::slotted([slot="eyebrow"]) {
 		display: inline-block;
-		margin-bottom: var(--ml-space-4);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-primary);
+		margin-bottom: var(--ml-hero-eyebrow-margin-bottom);
+		font-size: var(--ml-hero-eyebrow-font-size);
+		font-weight: var(--ml-hero-eyebrow-font-weight);
+		color: var(--ml-hero-eyebrow-color);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		letter-spacing: var(--ml-hero-eyebrow-letter-spacing);
 	}
 
 	/* Title */
 	.ml-hero__title,
 	::slotted([slot="title"]) {
-		margin: 0 0 var(--ml-space-4) 0;
-		font-weight: var(--ml-font-bold);
-		color: var(--ml-color-text);
-		letter-spacing: -0.025em;
+		margin: 0 0 var(--ml-hero-title-margin-bottom) 0;
+		font-weight: var(--ml-hero-title-font-weight);
+		color: var(--ml-hero-title-color);
+		letter-spacing: var(--ml-hero-title-letter-spacing);
 	}
 
 	/* Description */
 	.ml-hero__description,
 	::slotted([slot="description"]) {
-		margin: 0 0 var(--ml-space-8) 0;
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
-		max-width: 640px;
+		margin: 0 0 var(--ml-hero-description-margin-bottom) 0;
+		color: var(--ml-hero-description-color);
+		line-height: var(--ml-hero-description-line-height);
+		max-width: var(--ml-hero-description-max-width);
 	}
 
 	/* Actions */
 	.ml-hero__actions {
 		display: flex;
-		gap: var(--ml-space-3);
+		gap: var(--ml-hero-actions-gap);
 		flex-wrap: wrap;
 	}
 
@@ -198,12 +255,12 @@ export const heroSectionStyles = () => css `
 	::slotted([slot="media"]) {
 		max-width: 100%;
 		height: auto;
-		border-radius: var(--ml-radius-lg);
+		border-radius: var(--ml-hero-media-radius);
 	}
 
 	/* Social proof */
 	.ml-hero__social-proof {
-		margin-top: var(--ml-space-10);
+		margin-top: var(--ml-hero-social-proof-margin);
 		width: 100%;
 	}
 

package/lib/components/sections/page-header/page-header.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IACtD,UAAU,EAAG,WAAW,CAAC;IAEzB,sBAAsB;IACtB,KAAK,SAAM;IAEX,4BAA4B;IAC5B,WAAW,SAAM;IAEjB,qBAAqB;IACrB,OAAO,EAAE,iBAAiB,CAAa;IAEvC,yBAAyB;IACzB,OAAO,UAAQ;IAEf,2CAA2C;IAC3C,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,sCAAsC;IACtC,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,4CAA4C;IAC5C,IAAI,kBAAkB,IAAI,OAAO,CAEhC;IAED,wCAAwC;IACxC,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,qCAAqC;IACrC,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,qCAAqC;IACrC,IAAI,OAAO,IAAI,OAAO,CAErB;CACD"}
+{"version":3,"file":"page-header.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IAC/C,UAAU,EAAG,WAAW,CAAC;IAEhC,sBAAsB;IACf,KAAK,SAAM;IAElB,4BAA4B;IACrB,WAAW,SAAM;IAExB,qBAAqB;IACd,OAAO,EAAE,iBAAiB,CAAa;IAE9C,yBAAyB;IAClB,OAAO,UAAQ;IAEtB,2CAA2C;IAC3C,IAAW,aAAa,IAAI,OAAO,CAElC;IAED,sCAAsC;IACtC,IAAW,YAAY,IAAI,OAAO,CAEjC;IAED,4CAA4C;IAC5C,IAAW,kBAAkB,IAAI,OAAO,CAEvC;IAED,wCAAwC;IACxC,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,qCAAqC;IACrC,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,qCAAqC;IACrC,IAAW,OAAO,IAAI,OAAO,CAE5B;CACD"}

package/lib/components/sections/page-header/page-header.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAoK5B,CAAC"}
+{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAsM5B,CAAC"}

package/lib/components/sections/page-header/page-header.styles.js

@@ -2,29 +2,63 @@ import { css } from '@melodicdev/core';
 export const pageHeaderStyles = () => css `
 	:host {
 		display: block;
+
+		/* Padding */
+		--ml-page-header-padding: var(--ml-space-6) var(--ml-space-6) var(--ml-space-4);
+		--ml-page-header-compact-padding: var(--ml-space-4) var(--ml-space-6) var(--ml-space-3);
+		--ml-page-header-mobile-padding: var(--ml-space-4);
+
+		/* Font */
+		--ml-page-header-font-family: var(--ml-font-sans);
+
+		/* Border */
+		--ml-page-header-border-width: var(--ml-border);
+		--ml-page-header-border-color: var(--ml-color-border);
+
+		/* Title */
+		--ml-page-header-title-size: var(--ml-text-2xl);
+		--ml-page-header-title-weight: var(--ml-font-semibold);
+		--ml-page-header-title-line-height: var(--ml-leading-tight);
+		--ml-page-header-title-color: var(--ml-color-text);
+		--ml-page-header-compact-title-size: var(--ml-text-lg);
+
+		/* Description */
+		--ml-page-header-description-size: var(--ml-text-sm);
+		--ml-page-header-description-line-height: var(--ml-leading-normal);
+		--ml-page-header-description-color: var(--ml-color-text-secondary);
+
+		/* Spacing */
+		--ml-page-header-breadcrumb-margin: var(--ml-space-3);
+		--ml-page-header-main-gap: var(--ml-space-4);
+		--ml-page-header-content-gap: var(--ml-space-1);
+		--ml-page-header-meta-gap: var(--ml-space-2);
+		--ml-page-header-meta-margin: var(--ml-space-2);
+		--ml-page-header-actions-gap: var(--ml-space-2);
+		--ml-page-header-centered-actions-margin: var(--ml-space-4);
+		--ml-page-header-tabs-margin: var(--ml-space-4);
 	}
 
 	/* ============================================
 	   PAGE HEADER CONTAINER
 	   ============================================ */
 	.ml-page-header {
-		padding: var(--ml-space-6) var(--ml-space-6) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
+		padding: var(--ml-page-header-padding);
+		font-family: var(--ml-page-header-font-family);
 	}
 
 	.ml-page-header--divider {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-page-header-border-width) solid var(--ml-page-header-border-color);
 	}
 
 	/* ============================================
 	   COMPACT VARIANT
 	   ============================================ */
 	.ml-page-header--compact {
-		padding: var(--ml-space-4) var(--ml-space-6) var(--ml-space-3);
+		padding: var(--ml-page-header-compact-padding);
 	}
 
 	.ml-page-header--compact .ml-page-header__title h1 {
-		font-size: var(--ml-text-lg);
+		font-size: var(--ml-page-header-compact-title-size);
 	}
 
 	/* ============================================
@@ -44,7 +78,7 @@ export const pageHeaderStyles = () => css `
 	}
 
 	.ml-page-header--centered .ml-page-header__actions {
-		margin-top: var(--ml-space-4);
+		margin-top: var(--ml-page-header-centered-actions-margin);
 	}
 
 	.ml-page-header--centered .ml-page-header__breadcrumb {
@@ -56,7 +90,7 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__breadcrumb {
 		display: flex;
-		margin-bottom: var(--ml-space-3);
+		margin-bottom: var(--ml-page-header-breadcrumb-margin);
 	}
 
 	/* ============================================
@@ -66,7 +100,7 @@ export const pageHeaderStyles = () => css `
 		display: flex;
 		align-items: flex-start;
 		justify-content: space-between;
-		gap: var(--ml-space-4);
+		gap: var(--ml-page-header-main-gap);
 	}
 
 	/* ============================================
@@ -75,7 +109,7 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__content {
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-1);
+		gap: var(--ml-page-header-content-gap);
 		min-width: 0;
 		flex: 1;
 	}
@@ -85,18 +119,18 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__title h1 {
 		margin: 0;
-		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
-		color: var(--ml-color-text);
+		font-size: var(--ml-page-header-title-size);
+		font-weight: var(--ml-page-header-title-weight);
+		line-height: var(--ml-page-header-title-line-height);
+		color: var(--ml-page-header-title-color);
 	}
 
 	.ml-page-header__title ::slotted(*) {
 		margin: 0;
-		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
-		color: var(--ml-color-text);
+		font-size: var(--ml-page-header-title-size);
+		font-weight: var(--ml-page-header-title-weight);
+		line-height: var(--ml-page-header-title-line-height);
+		color: var(--ml-page-header-title-color);
 	}
 
 	/* ============================================
@@ -104,16 +138,16 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__description p {
 		margin: 0;
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
-		color: var(--ml-color-text-secondary);
+		font-size: var(--ml-page-header-description-size);
+		line-height: var(--ml-page-header-description-line-height);
+		color: var(--ml-page-header-description-color);
 	}
 
 	.ml-page-header__description ::slotted(*) {
 		margin: 0;
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
-		color: var(--ml-color-text-secondary);
+		font-size: var(--ml-page-header-description-size);
+		line-height: var(--ml-page-header-description-line-height);
+		color: var(--ml-page-header-description-color);
 	}
 
 	/* ============================================
@@ -122,8 +156,8 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__meta {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		margin-top: var(--ml-space-2);
+		gap: var(--ml-page-header-meta-gap);
+		margin-top: var(--ml-page-header-meta-margin);
 	}
 
 	/* ============================================
@@ -132,7 +166,7 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__actions {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-page-header-actions-gap);
 		flex-shrink: 0;
 	}
 
@@ -140,7 +174,7 @@ export const pageHeaderStyles = () => css `
 	   TABS
 	   ============================================ */
 	.ml-page-header__tabs {
-		margin-top: var(--ml-space-4);
+		margin-top: var(--ml-page-header-tabs-margin);
 	}
 
 	/* ============================================
@@ -148,7 +182,7 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	@media (max-width: 640px) {
 		.ml-page-header {
-			padding: var(--ml-space-4);
+			padding: var(--ml-page-header-mobile-padding);
 		}
 
 		.ml-page-header__main {

package/lib/components/sections/page-section/index.d.ts

@@ -0,0 +1,2 @@
+export { PageSectionComponent } from './page-section.component.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/sections/page-section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/lib/components/sections/page-section/index.js

@@ -0,0 +1 @@
+export { PageSectionComponent } from './page-section.component.js';

package/lib/components/sections/page-section/page-section.component.d.ts

@@ -0,0 +1,39 @@
+import type { IElementRef } from '@melodicdev/core';
+type SectionPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * ml-page-section - Titled content section with consistent heading typography
+ *
+ * @example
+ * ```html
+ * <ml-page-section title="Recent Activity" subtitle="Last 7 days">
+ *   <div>Section content here</div>
+ * </ml-page-section>
+ *
+ * <ml-page-section title="Members" action-label="View All" action-href="/members">
+ *   <div>Members list</div>
+ * </ml-page-section>
+ * ```
+ *
+ * @slot default - Section content
+ * @slot action - Override for complex action content (replaces action-label link)
+ *
+ * @cssproperty --ml-page-section-title-font - Title font family (default: 'Cormorant Garamond', serif)
+ * @cssproperty --ml-page-section-gap - Gap between header and content (default: var(--ml-space-4))
+ */
+export declare class PageSectionComponent implements IElementRef {
+    elementRef: HTMLElement;
+    /** Section title */
+    title: string;
+    /** Subtitle text */
+    subtitle: string;
+    /** Action link label */
+    'action-label': string;
+    /** Action link URL */
+    'action-href': string;
+    /** Content padding */
+    padding: SectionPadding;
+    /** Check if action slot has content */
+    get hasActionSlot(): boolean;
+}
+export {};
+//# sourceMappingURL=page-section.component.d.ts.map

package/lib/components/sections/page-section/page-section.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/page-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAMa,oBAAqB,YAAW,WAAW;IAChD,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,oBAAoB;IACb,QAAQ,SAAM;IAErB,wBAAwB;IACjB,cAAc,SAAM;IAE3B,sBAAsB;IACf,aAAa,SAAM;IAE1B,sBAAsB;IACf,OAAO,EAAE,cAAc,CAAQ;IAEtC,uCAAuC;IACvC,IAAW,aAAa,IAAI,OAAO,CAElC;CACD"}

package/lib/components/sections/page-section/page-section.component.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { pageSectionTemplate } from './page-section.template.js';
+import { pageSectionStyles } from './page-section.styles.js';
+/**
+ * ml-page-section - Titled content section with consistent heading typography
+ *
+ * @example
+ * ```html
+ * <ml-page-section title="Recent Activity" subtitle="Last 7 days">
+ *   <div>Section content here</div>
+ * </ml-page-section>
+ *
+ * <ml-page-section title="Members" action-label="View All" action-href="/members">
+ *   <div>Members list</div>
+ * </ml-page-section>
+ * ```
+ *
+ * @slot default - Section content
+ * @slot action - Override for complex action content (replaces action-label link)
+ *
+ * @cssproperty --ml-page-section-title-font - Title font family (default: 'Cormorant Garamond', serif)
+ * @cssproperty --ml-page-section-gap - Gap between header and content (default: var(--ml-space-4))
+ */
+let PageSectionComponent = class PageSectionComponent {
+    constructor() {
+        /** Section title */
+        this.title = '';
+        /** Subtitle text */
+        this.subtitle = '';
+        /** Action link label */
+        this['action-label'] = '';
+        /** Action link URL */
+        this['action-href'] = '';
+        /** Content padding */
+        this.padding = 'md';
+    }
+    /** Check if action slot has content */
+    get hasActionSlot() {
+        return this.elementRef?.querySelector('[slot="action"]') !== null;
+    }
+};
+PageSectionComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-page-section',
+        template: pageSectionTemplate,
+        styles: pageSectionStyles,
+        attributes: ['title', 'subtitle', 'action-label', 'action-href', 'padding']
+    })
+], PageSectionComponent);
+export { PageSectionComponent };

package/lib/components/sections/page-section/page-section.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const pageSectionStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=page-section.styles.d.ts.map

package/lib/components/sections/page-section/page-section.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/page-section.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAoG7B,CAAC"}

package/lib/components/sections/page-section/page-section.styles.js

@@ -0,0 +1,102 @@
+import { css } from '@melodicdev/core';
+export const pageSectionStyles = () => css `
+	:host {
+		display: block;
+
+		/* Header spacing */
+		--ml-page-section-gap: var(--ml-space-4);
+		--ml-page-section-heading-gap: var(--ml-space-1);
+
+		/* Title */
+		--ml-page-section-title-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-page-section-title-size: var(--ml-text-2xl);
+		--ml-page-section-title-weight: var(--ml-font-semibold);
+		--ml-page-section-title-color: var(--ml-color-text);
+		--ml-page-section-title-line-height: var(--ml-leading-tight);
+
+		/* Subtitle */
+		--ml-page-section-subtitle-font: var(--ml-font-sans);
+		--ml-page-section-subtitle-size: var(--ml-text-sm);
+		--ml-page-section-subtitle-color: var(--ml-color-text-muted);
+		--ml-page-section-subtitle-line-height: var(--ml-leading-normal);
+
+		/* Action link */
+		--ml-page-section-action-font: var(--ml-font-sans);
+		--ml-page-section-action-size: var(--ml-text-sm);
+		--ml-page-section-action-weight: var(--ml-font-medium);
+		--ml-page-section-action-color: var(--ml-color-primary);
+		--ml-page-section-action-hover-color: var(--ml-color-primary-hover);
+		--ml-page-section-action-transition: var(--ml-duration-150);
+
+		/* Content padding variants */
+		--ml-page-section-pad-sm: var(--ml-space-2) 0;
+		--ml-page-section-pad-md: var(--ml-space-4) 0;
+		--ml-page-section-pad-lg: var(--ml-space-6) 0;
+	}
+
+	.ml-page-section__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--ml-page-section-gap);
+		margin-bottom: var(--ml-page-section-gap);
+	}
+
+	.ml-page-section__heading {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-page-section-heading-gap);
+	}
+
+	.ml-page-section__title {
+		margin: 0;
+		font-family: var(--ml-page-section-title-font);
+		font-size: var(--ml-page-section-title-size);
+		font-weight: var(--ml-page-section-title-weight);
+		color: var(--ml-page-section-title-color);
+		line-height: var(--ml-page-section-title-line-height);
+	}
+
+	.ml-page-section__subtitle {
+		margin: 0;
+		font-family: var(--ml-page-section-subtitle-font);
+		font-size: var(--ml-page-section-subtitle-size);
+		color: var(--ml-page-section-subtitle-color);
+		line-height: var(--ml-page-section-subtitle-line-height);
+	}
+
+	.ml-page-section__action {
+		flex-shrink: 0;
+	}
+
+	.ml-page-section__action-link {
+		font-family: var(--ml-page-section-action-font);
+		font-size: var(--ml-page-section-action-size);
+		font-weight: var(--ml-page-section-action-weight);
+		color: var(--ml-page-section-action-color);
+		text-decoration: none;
+		transition: color var(--ml-page-section-action-transition) var(--ml-ease-in-out);
+	}
+
+	.ml-page-section__action-link:hover {
+		color: var(--ml-page-section-action-hover-color);
+		text-decoration: underline;
+	}
+
+	/* Padding variants */
+	.ml-page-section--pad-none .ml-page-section__content {
+		padding: 0;
+	}
+
+	.ml-page-section--pad-sm .ml-page-section__content {
+		padding: var(--ml-page-section-pad-sm);
+	}
+
+	.ml-page-section--pad-md .ml-page-section__content {
+		padding: var(--ml-page-section-pad-md);
+	}
+
+	.ml-page-section--pad-lg .ml-page-section__content {
+		padding: var(--ml-page-section-pad-lg);
+	}
+`;