@extrachill/components 0.4.31 → 0.4.34

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.4.34] - 2026-03-26
+
+### Fixed
+- keep active tabs on card background
+
+## [0.4.33] - 2026-03-26
+
+### Changed
+- rename mobile edge shell contract
+
+## [0.4.32] - 2026-03-26
+
+### Changed
+- centralize mobile edge surfaces behind page shells
+- remove block shell child mobile padding
+
 ## [0.4.31] - 2026-03-26
 
 ### Changed

package/dist/BlockShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockShell.d.ts","sourceRoot":"","sources":["../src/BlockShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,EACf,KAAS,GACT,EAAE,eAAe,2CASjB"}
+{"version":3,"file":"BlockShell.d.ts","sourceRoot":"","sources":["../src/BlockShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,EACf,KAAS,GACT,EAAE,eAAe,2CAUjB"}

package/dist/BlockShell.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, depth = 0, }) {
     const shellClass = [
         classPrefix,
+        'ec-edge-shell',
         compact ? `${classPrefix}--compact` : '',
         `${classPrefix}--depth-${depth}`,
         className,

package/dist/BlockShellHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockShellHeader.d.ts","sourceRoot":"","sources":["../src/BlockShellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,EACrC,WAAkB,GAClB,EAAE,qBAAqB,2CAgBvB"}
+{"version":3,"file":"BlockShellHeader.d.ts","sourceRoot":"","sources":["../src/BlockShellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,EACrC,WAAkB,GAClB,EAAE,qBAAqB,2CAiBvB"}

package/dist/BlockShellHeader.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', showDivider = true, }) {
     return (_jsxs("div", { className: [
             classPrefix,
+            'ec-edge-gutter',
             showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
             className,
         ].filter(Boolean).join(' '), children: [_jsxs("div", { className: `${classPrefix}__main`, children: [title && _jsx("div", { className: `${classPrefix}__title`, children: title }), description && _jsx("div", { className: `${classPrefix}__description`, children: description })] }), actions && _jsx("div", { className: `${classPrefix}__actions`, children: actions })] }));

package/dist/ResponsiveTabs.js

@@ -82,6 +82,6 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
                                     }
                                     setMobileActive(tab.id);
                                     handleChange(tab.id);
-                                }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
+                                }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel ec-edge-gutter`, children: renderPanel(tab.id) })] }, tab.id));
                 }) }) }) }));
 }

package/dist/initResponsiveTabsDom.js

@@ -45,7 +45,7 @@ function renderAccordion(root, activeTabId, hashPrefix, onPanelRender) {
             const template = root.querySelector(`template[data-tab-panel="${tabId}"]`);
             if (template) {
                 const panel = document.createElement('div');
-                panel.className = 'ec-responsive-tabs__panel';
+                panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
                 const content = createNodeFromTemplate(template);
                 if (content) {
                     panel.appendChild(content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.4.31",
+  "version": "0.4.34",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/BlockShell.tsx

@@ -17,6 +17,7 @@ export function BlockShell( {
 }: BlockShellProps ) {
 	const shellClass = [
 		classPrefix,
+		'ec-edge-shell',
 		compact ? `${ classPrefix }--compact` : '',
 		`${ classPrefix }--depth-${ depth }`,
 		className,

package/src/BlockShellHeader.tsx

@@ -21,6 +21,7 @@ export function BlockShellHeader( {
 		<div
 			className={ [
 				classPrefix,
+				'ec-edge-gutter',
 				showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
 				className,
 			].filter( Boolean ).join( ' ' ) }

package/src/ResponsiveTabs.tsx

@@ -174,7 +174,7 @@ export function ResponsiveTabs( {
 									{ isActive ? '▲' : '▼' }
 								</span>
 							</button>
-							{ isActive && <div className={ `${ classPrefix }__panel` }>{ renderPanel( tab.id ) }</div>}
+							{ isActive && <div className={ `${ classPrefix }__panel ec-edge-gutter` }>{ renderPanel( tab.id ) }</div>}
 						</div>
 					);
 				} ) }

package/src/initResponsiveTabsDom.ts

@@ -74,7 +74,7 @@ function renderAccordion(
 			const template = root.querySelector<HTMLTemplateElement>( `template[data-tab-panel="${ tabId }"]` );
 			if ( template ) {
 				const panel = document.createElement( 'div' );
-				panel.className = 'ec-responsive-tabs__panel';
+				panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
 				const content = createNodeFromTemplate( template );
 				if ( content ) {
 					panel.appendChild( content );

package/styles/components.scss

@@ -213,7 +213,7 @@
 }
 
 .ec-responsive-tabs__trigger.is-active {
-	background: var(--background-color, #fff);
+	background: var(--card-background, #f8f8f8);
 	color: var(--link-color, #0b5394);
 }
 
@@ -224,7 +224,6 @@
 }
 
 .ec-responsive-tabs__panel {
-	padding: 0 var(--spacing-md, 1rem);
 	background: var(--background-color, #fff);
 	margin-bottom: 0;
 }
@@ -252,11 +251,6 @@
 		padding-right: 0;
 	}
 
-	.ec-block-shell > * {
-		padding-left: var(--spacing-md, 1rem);
-		padding-right: var(--spacing-md, 1rem);
-	}
-
 	.ec-block-shell-inner {
 		max-width: none;
 	}
@@ -270,7 +264,7 @@
 		display: none;
 	}
 
-	.ec-responsive-tabs__item {
+	.ec-edge-shell .ec-responsive-tabs__item {
 		margin-left: calc(var(--spacing-md, 1rem) * -1);
 		margin-right: calc(var(--spacing-md, 1rem) * -1);
 		border-left: 0;
@@ -331,6 +325,11 @@
 	max-width: 1080px;
 }
 
+.ec-block-shell-inner--centered {
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .ec-block-intro {
 	display: grid;
 	gap: var(--spacing-sm, 0.5rem);
@@ -544,14 +543,14 @@
 		padding-bottom: var(--spacing-sm, 0.5rem);
 	}
 
-	.ec-shell-tabs {
+	.ec-edge-shell .ec-shell-tabs {
 		margin-left: calc(var(--spacing-md, 1rem) * -1);
 		margin-right: calc(var(--spacing-md, 1rem) * -1);
 		padding-left: var(--spacing-md, 1rem);
 		padding-right: var(--spacing-md, 1rem);
 	}
 
-	.ec-panel {
+	.ec-edge-shell .ec-panel {
 		border-radius: 0;
 		border-left: 0;
 		border-right: 0;
@@ -562,7 +561,7 @@
 		padding-right: var(--spacing-md, 1rem);
 	}
 
-	.ec-section {
+	.ec-edge-shell .ec-section {
 		border-radius: 0;
 		border-left: 0;
 		border-right: 0;