@extrachill/components 0.4.35 → 0.4.36

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 (12) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/BlockShell.js +1 -1
  3. package/dist/BlockShellHeader.d.ts.map +1 -1
  4. package/dist/BlockShellHeader.js +0 -1
  5. package/dist/ResponsiveTabs.js +1 -1
  6. package/dist/initResponsiveTabsDom.js +1 -1
  7. package/package.json +1 -1
  8. package/src/BlockShell.tsx +1 -1
  9. package/src/BlockShellHeader.tsx +0 -1
  10. package/src/ResponsiveTabs.tsx +1 -1
  11. package/src/initResponsiveTabsDom.ts +1 -1
  12. package/styles/components.scss +8 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.4.36] - 2026-03-26
4
+
5
+ ### Changed
6
+ - split global and mobile full-width utilities
7
+
3
8
  ## [0.4.35] - 2026-03-26
4
9
 
5
10
  ### Changed
package/dist/BlockShell.js CHANGED
@@ -2,7 +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
+ 'ec-mobile-full-width-panel',
6
6
  compact ? `${classPrefix}--compact` : '',
7
7
  `${classPrefix}--depth-${depth}`,
8
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;CACrB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,GACrC,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;CACrB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,GACrC,EAAE,qBAAqB,2CAevB"}
package/dist/BlockShellHeader.js CHANGED
@@ -2,7 +2,6 @@ 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', }) {
3
3
  return (_jsxs("div", { className: [
4
4
  classPrefix,
5
- 'ec-edge-gutter',
6
5
  className,
7
6
  ].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 })] }));
8
7
  }
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 ec-edge-gutter`, 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`, 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 ec-edge-gutter';
48
+ panel.className = 'ec-responsive-tabs__panel';
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.35",
3
+ "version": "0.4.36",
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,7 +17,7 @@ export function BlockShell( {
17
17
  }: BlockShellProps ) {
18
18
  const shellClass = [
19
19
  classPrefix,
20
- 'ec-edge-shell',
20
+ 'ec-mobile-full-width-panel',
21
21
  compact ? `${ classPrefix }--compact` : '',
22
22
  `${ classPrefix }--depth-${ depth }`,
23
23
  className,
package/src/BlockShellHeader.tsx CHANGED
@@ -19,7 +19,6 @@ export function BlockShellHeader( {
19
19
  <div
20
20
  className={ [
21
21
  classPrefix,
22
- 'ec-edge-gutter',
23
22
  className,
24
23
  ].filter( Boolean ).join( ' ' ) }
25
24
  >
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 ec-edge-gutter` }>{ renderPanel( tab.id ) }</div>}
177
+ { isActive && <div className={ `${ classPrefix }__panel` }>{ 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 ec-edge-gutter';
77
+ panel.className = 'ec-responsive-tabs__panel';
78
78
  const content = createNodeFromTemplate( template );
79
79
  if ( content ) {
80
80
  panel.appendChild( content );
package/styles/components.scss CHANGED
@@ -254,7 +254,8 @@
254
254
  display: none;
255
255
  }
256
256
 
257
- .ec-edge-shell .ec-responsive-tabs__item {
257
+ .ec-edge-shell .ec-responsive-tabs__item,
258
+ .ec-mobile-full-width-panel .ec-responsive-tabs__item {
258
259
  margin-left: calc(var(--spacing-md, 1rem) * -1);
259
260
  margin-right: calc(var(--spacing-md, 1rem) * -1);
260
261
  border-left: 0;
@@ -563,14 +564,16 @@
563
564
  padding-bottom: var(--spacing-sm, 0.5rem);
564
565
  }
565
566
 
566
- .ec-edge-shell .ec-shell-tabs {
567
+ .ec-edge-shell .ec-shell-tabs,
568
+ .ec-mobile-full-width-panel .ec-shell-tabs {
567
569
  margin-left: calc(var(--spacing-md, 1rem) * -1);
568
570
  margin-right: calc(var(--spacing-md, 1rem) * -1);
569
571
  padding-left: var(--spacing-md, 1rem);
570
572
  padding-right: var(--spacing-md, 1rem);
571
573
  }
572
574
 
573
- .ec-edge-shell .ec-panel {
575
+ .ec-edge-shell .ec-panel,
576
+ .ec-mobile-full-width-panel .ec-panel {
574
577
  border-radius: 0;
575
578
  border-left: 0;
576
579
  border-right: 0;
@@ -584,7 +587,8 @@
584
587
  padding-right: var(--spacing-md, 1rem);
585
588
  }
586
589
 
587
- .ec-edge-shell .ec-section {
590
+ .ec-edge-shell .ec-section,
591
+ .ec-mobile-full-width-panel .ec-section {
588
592
  border-radius: 0;
589
593
  border-left: 0;
590
594
  border-right: 0;