@extrachill/components 0.4.31 → 0.4.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/BlockShell.d.ts.map +1 -1
  3. package/dist/BlockShell.js +1 -0
  4. package/dist/BlockShellHeader.d.ts.map +1 -1
  5. package/dist/BlockShellHeader.js +1 -0
  6. package/dist/ResponsiveTabs.js +1 -1
  7. package/dist/initResponsiveTabsDom.js +1 -1
  8. package/package.json +1 -1
  9. package/src/BlockShell.tsx +1 -0
  10. package/src/BlockShellHeader.tsx +1 -0
  11. package/src/ResponsiveTabs.tsx +1 -1
  12. package/src/initResponsiveTabsDom.ts +1 -1
  13. package/styles/components.scss +10 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.4.34] - 2026-03-26
4
+
5
+ ### Fixed
6
+ - keep active tabs on card background
7
+
8
+ ## [0.4.33] - 2026-03-26
9
+
10
+ ### Changed
11
+ - rename mobile edge shell contract
12
+
13
+ ## [0.4.32] - 2026-03-26
14
+
15
+ ### Changed
16
+ - centralize mobile edge surfaces behind page shells
17
+ - remove block shell child mobile padding
18
+
3
19
  ## [0.4.31] - 2026-03-26
4
20
 
5
21
  ### Changed
package/dist/BlockShell.d.ts.map CHANGED
@@ -1 +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"}
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,2CAUjB"}
package/dist/BlockShell.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, depth = 0, }) {
3
3
  const shellClass = [
4
4
  classPrefix,
5
+ 'ec-edge-shell',
5
6
  compact ? `${classPrefix}--compact` : '',
6
7
  `${classPrefix}--depth-${depth}`,
7
8
  className,
package/dist/BlockShellHeader.d.ts.map CHANGED
@@ -1 +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"}
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,2CAiBvB"}
package/dist/BlockShellHeader.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', showDivider = true, }) {
3
3
  return (_jsxs("div", { className: [
4
4
  classPrefix,
5
+ 'ec-edge-gutter',
5
6
  showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
6
7
  className,
7
8
  ].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 CHANGED
@@ -82,6 +82,6 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
82
82
  }
83
83
  setMobileActive(tab.id);
84
84
  handleChange(tab.id);
85
- }, 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));
85
+ }, 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));
86
86
  }) }) }) }));
87
87
  }
package/dist/initResponsiveTabsDom.js CHANGED
@@ -45,7 +45,7 @@ function renderAccordion(root, activeTabId, hashPrefix, onPanelRender) {
45
45
  const template = root.querySelector(`template[data-tab-panel="${tabId}"]`);
46
46
  if (template) {
47
47
  const panel = document.createElement('div');
48
- panel.className = 'ec-responsive-tabs__panel';
48
+ panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
49
49
  const content = createNodeFromTemplate(template);
50
50
  if (content) {
51
51
  panel.appendChild(content);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@extrachill/components",
3
- "version": "0.4.31",
3
+ "version": "0.4.34",
4
4
  "description": "Shared React components for the Extra Chill Platform.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/BlockShell.tsx CHANGED
@@ -17,6 +17,7 @@ export function BlockShell( {
17
17
  }: BlockShellProps ) {
18
18
  const shellClass = [
19
19
  classPrefix,
20
+ 'ec-edge-shell',
20
21
  compact ? `${ classPrefix }--compact` : '',
21
22
  `${ classPrefix }--depth-${ depth }`,
22
23
  className,
package/src/BlockShellHeader.tsx CHANGED
@@ -21,6 +21,7 @@ export function BlockShellHeader( {
21
21
  <div
22
22
  className={ [
23
23
  classPrefix,
24
+ 'ec-edge-gutter',
24
25
  showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
25
26
  className,
26
27
  ].filter( Boolean ).join( ' ' ) }
package/src/ResponsiveTabs.tsx CHANGED
@@ -174,7 +174,7 @@ export function ResponsiveTabs( {
174
174
  { isActive ? '▲' : '▼' }
175
175
  </span>
176
176
  </button>
177
- { isActive && <div className={ `${ classPrefix }__panel` }>{ renderPanel( tab.id ) }</div>}
177
+ { isActive && <div className={ `${ classPrefix }__panel ec-edge-gutter` }>{ renderPanel( tab.id ) }</div>}
178
178
  </div>
179
179
  );
180
180
  } ) }
package/src/initResponsiveTabsDom.ts CHANGED
@@ -74,7 +74,7 @@ function renderAccordion(
74
74
  const template = root.querySelector<HTMLTemplateElement>( `template[data-tab-panel="${ tabId }"]` );
75
75
  if ( template ) {
76
76
  const panel = document.createElement( 'div' );
77
- panel.className = 'ec-responsive-tabs__panel';
77
+ panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
78
78
  const content = createNodeFromTemplate( template );
79
79
  if ( content ) {
80
80
  panel.appendChild( content );
package/styles/components.scss CHANGED
@@ -213,7 +213,7 @@
213
213
  }
214
214
 
215
215
  .ec-responsive-tabs__trigger.is-active {
216
- background: var(--background-color, #fff);
216
+ background: var(--card-background, #f8f8f8);
217
217
  color: var(--link-color, #0b5394);
218
218
  }
219
219
 
@@ -224,7 +224,6 @@
224
224
  }
225
225
 
226
226
  .ec-responsive-tabs__panel {
227
- padding: 0 var(--spacing-md, 1rem);
228
227
  background: var(--background-color, #fff);
229
228
  margin-bottom: 0;
230
229
  }
@@ -252,11 +251,6 @@
252
251
  padding-right: 0;
253
252
  }
254
253
 
255
- .ec-block-shell > * {
256
- padding-left: var(--spacing-md, 1rem);
257
- padding-right: var(--spacing-md, 1rem);
258
- }
259
-
260
254
  .ec-block-shell-inner {
261
255
  max-width: none;
262
256
  }
@@ -270,7 +264,7 @@
270
264
  display: none;
271
265
  }
272
266
 
273
- .ec-responsive-tabs__item {
267
+ .ec-edge-shell .ec-responsive-tabs__item {
274
268
  margin-left: calc(var(--spacing-md, 1rem) * -1);
275
269
  margin-right: calc(var(--spacing-md, 1rem) * -1);
276
270
  border-left: 0;
@@ -331,6 +325,11 @@
331
325
  max-width: 1080px;
332
326
  }
333
327
 
328
+ .ec-block-shell-inner--centered {
329
+ margin-left: auto;
330
+ margin-right: auto;
331
+ }
332
+
334
333
  .ec-block-intro {
335
334
  display: grid;
336
335
  gap: var(--spacing-sm, 0.5rem);
@@ -544,14 +543,14 @@
544
543
  padding-bottom: var(--spacing-sm, 0.5rem);
545
544
  }
546
545
 
547
- .ec-shell-tabs {
546
+ .ec-edge-shell .ec-shell-tabs {
548
547
  margin-left: calc(var(--spacing-md, 1rem) * -1);
549
548
  margin-right: calc(var(--spacing-md, 1rem) * -1);
550
549
  padding-left: var(--spacing-md, 1rem);
551
550
  padding-right: var(--spacing-md, 1rem);
552
551
  }
553
552
 
554
- .ec-panel {
553
+ .ec-edge-shell .ec-panel {
555
554
  border-radius: 0;
556
555
  border-left: 0;
557
556
  border-right: 0;
@@ -562,7 +561,7 @@
562
561
  padding-right: var(--spacing-md, 1rem);
563
562
  }
564
563
 
565
- .ec-section {
564
+ .ec-edge-shell .ec-section {
566
565
  border-radius: 0;
567
566
  border-left: 0;
568
567
  border-right: 0;