@extrachill/components 0.4.23 → 0.4.25

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.4.25] - 2026-03-26
+
+### Changed
+- move shared tab layout into components
+
+## [0.4.23] - 2026-03-25
+
+### Changed
+- Refine responsive accordion spacing and interaction styling
+
+## [0.4.22] - 2026-03-25
+
+### Changed
+- Preserve local accordion collapse state on mobile
+
+## [0.4.21] - 2026-03-25
+
+### Changed
+- Allow responsive accordion items to collapse on second tap
+
+## [0.4.20] - 2026-03-25
+
+### Changed
+- Keep responsive tabs root structural only
+
+## [0.4.19] - 2026-03-25
+
+### Changed
+- Limit responsive tabs accordion mode to phone breakpoint
+
+## [0.4.18] - 2026-03-25
+
+### Changed
+- Remove mobile color overrides from shared surfaces
+
+## [0.4.17] - 2026-03-25
+
+### Changed
+- Fix responsive tabs mobile interaction and shared hover styling
+
 ## [0.4.16] - 2026-03-25
 
 ### Changed

package/dist/ResponsiveTabs.d.ts

@@ -7,11 +7,15 @@ export interface ResponsiveTabsProps {
     renderPanel: (id: string) => ReactNode;
     className?: string;
     classPrefix?: string;
+    innerClassName?: string;
+    innerMaxWidth?: 'none' | 'narrow' | 'wide';
     tabsClassName?: string;
     tabsClassPrefix?: string;
     mobileBreakpoint?: number;
     accordionClassName?: string;
     showDesktopTabs?: boolean;
+    syncWithHash?: boolean;
+    hashPrefix?: string;
 }
-export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, innerClassName, innerMaxWidth, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, syncWithHash, hashPrefix, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ResponsiveTabs.d.ts.map

package/dist/ResponsiveTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,GACtB,EAAE,mBAAmB,kDAiGrB"}
+{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,cAAmB,EACnB,aAAsB,EACtB,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,EACtB,YAAoB,EACpB,UAAmB,GACnB,EAAE,mBAAmB,kDAkJrB"}

package/dist/ResponsiveTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Tabs } from "./Tabs.js";
-export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, }) {
+export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', innerClassName = '', innerMaxWidth = 'none', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, syncWithHash = false, hashPrefix = 'tab-', }) {
     const [isMobile, setIsMobile] = useState(() => {
         if (typeof window === 'undefined') {
             return false;
@@ -9,6 +9,24 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         return window.innerWidth < mobileBreakpoint;
     });
     const [mobileActive, setMobileActive] = useState(active);
+    const resolveTabIdFromHash = (hash) => {
+        const normalized = hash.replace(/^#/, '');
+        if (!normalized.startsWith(hashPrefix)) {
+            return null;
+        }
+        const id = normalized.slice(hashPrefix.length);
+        return tabs.some((tab) => tab.id === id) ? id : null;
+    };
+    const updateHash = (id) => {
+        if (!syncWithHash || typeof window === 'undefined') {
+            return;
+        }
+        window.location.hash = `${hashPrefix}${id}`;
+    };
+    const handleChange = (id) => {
+        onChange(id);
+        updateHash(id);
+    };
     useEffect(() => {
         if (typeof window === 'undefined') {
             return undefined;
@@ -25,9 +43,26 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
             setMobileActive(active);
         }
     }, [active, isMobile]);
+    useEffect(() => {
+        if (!syncWithHash || typeof window === 'undefined' || tabs.length === 0) {
+            return undefined;
+        }
+        const syncFromHash = () => {
+            const id = resolveTabIdFromHash(window.location.hash);
+            if (!id) {
+                return;
+            }
+            onChange(id);
+            setMobileActive(id);
+        };
+        syncFromHash();
+        window.addEventListener('hashchange', syncFromHash);
+        return () => window.removeEventListener('hashchange', syncFromHash);
+    }, [hashPrefix, onChange, syncWithHash, tabs]);
     const rootClass = useMemo(() => [
         classPrefix,
         isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
+        innerMaxWidth !== 'none' ? `${classPrefix}--inner-${innerMaxWidth}` : '',
         className,
     ]
         .filter(Boolean)
@@ -36,17 +71,17 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         return null;
     }
     if (!isMobile) {
-        return (_jsxs("div", { className: rootClass, children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: onChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }));
+        return (_jsx("div", { className: rootClass, children: _jsxs("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: handleChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }) }));
     }
-    return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
-                const isActive = tab.id === mobileActive;
-                return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
-                                if (isActive) {
-                                    setMobileActive(null);
-                                    return;
-                                }
-                                setMobileActive(tab.id);
-                                onChange(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));
-            }) }) }));
+    return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
+                    const isActive = tab.id === mobileActive;
+                    return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
+                                    if (isActive) {
+                                        setMobileActive(null);
+                                        return;
+                                    }
+                                    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));
+                }) }) }) }));
 }

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
 export { ResponsiveTabs, type ResponsiveTabsProps } from './ResponsiveTabs.tsx';
+export { initResponsiveTabsDom, type ResponsiveTabsDomOptions } from './initResponsiveTabsDom.ts';
 export { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -9,6 +9,7 @@ export { SearchBox } from "./SearchBox.js";
 export { Modal } from "./Modal.js";
 export { Tabs } from "./Tabs.js";
 export { ResponsiveTabs } from "./ResponsiveTabs.js";
+export { initResponsiveTabsDom } from "./initResponsiveTabsDom.js";
 export { ShellTabs } from "./ShellTabs.js";
 export { Panel } from "./Panel.js";
 export { Surface } from "./Surface.js";

package/dist/initResponsiveTabsDom.d.ts

@@ -0,0 +1,8 @@
+export interface ResponsiveTabsDomOptions {
+    selector?: string;
+    mobileBreakpoint?: number;
+    hashPrefix?: string;
+    onPanelRender?: (panel: HTMLElement, tabId: string, root: HTMLElement) => void;
+}
+export declare function initResponsiveTabsDom(options?: ResponsiveTabsDomOptions): void;
+//# sourceMappingURL=initResponsiveTabsDom.d.ts.map

package/dist/initResponsiveTabsDom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initResponsiveTabsDom.d.ts","sourceRoot":"","sources":["../src/initResponsiveTabsDom.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAM,IAAI,CAAC;CACjF;AA2KD,wBAAgB,qBAAqB,CAAE,OAAO,GAAE,wBAA6B,QAO5E"}

package/dist/initResponsiveTabsDom.js

@@ -0,0 +1,139 @@
+const DEFAULT_SELECTOR = '[data-ec-responsive-tabs]';
+function createNodeFromTemplate(template) {
+    const fragment = template.content.cloneNode(true);
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(fragment);
+    return wrapper.firstElementChild instanceof HTMLElement ? wrapper.firstElementChild : wrapper;
+}
+function renderDesktopPanel(root, tabId, onPanelRender) {
+    const desktopPanel = root.querySelector('.ec-responsive-tabs__desktop-panel');
+    const template = root.querySelector(`template[data-tab-panel="${tabId}"]`);
+    if (!desktopPanel || !template) {
+        return;
+    }
+    desktopPanel.innerHTML = '';
+    const content = createNodeFromTemplate(template);
+    if (!content) {
+        return;
+    }
+    desktopPanel.appendChild(content);
+    onPanelRender?.(desktopPanel, tabId, root);
+}
+function renderAccordion(root, activeTabId, hashPrefix, onPanelRender) {
+    const accordion = root.querySelector('.ec-responsive-tabs__accordion');
+    const tabs = Array.from(root.querySelectorAll('.ec-tabs__tab[data-tab-id]'));
+    if (!accordion) {
+        return;
+    }
+    accordion.innerHTML = '';
+    tabs.forEach((tab) => {
+        const tabId = tab.dataset.tabId;
+        if (!tabId) {
+            return;
+        }
+        const label = tab.textContent?.trim() || tabId;
+        const item = document.createElement('div');
+        item.className = `ec-responsive-tabs__item${tabId === activeTabId ? ' is-active' : ''}`;
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = `ec-responsive-tabs__trigger${tabId === activeTabId ? ' is-active' : ''}`;
+        trigger.setAttribute('aria-expanded', tabId === activeTabId ? 'true' : 'false');
+        trigger.dataset.tabId = tabId;
+        trigger.innerHTML = `<span>${label}</span><span class="ec-responsive-tabs__arrow" aria-hidden="true">${tabId === activeTabId ? '▲' : '▼'}</span>`;
+        item.appendChild(trigger);
+        if (tabId === activeTabId) {
+            const template = root.querySelector(`template[data-tab-panel="${tabId}"]`);
+            if (template) {
+                const panel = document.createElement('div');
+                panel.className = 'ec-responsive-tabs__panel';
+                const content = createNodeFromTemplate(template);
+                if (content) {
+                    panel.appendChild(content);
+                    item.appendChild(panel);
+                    onPanelRender?.(panel, tabId, root);
+                }
+            }
+        }
+        trigger.addEventListener('click', () => {
+            const isActive = root.dataset.activeTab === tabId;
+            if (isActive) {
+                root.dataset.activeTab = '';
+                window.location.hash = '';
+                renderAccordion(root, null, hashPrefix, onPanelRender);
+                return;
+            }
+            root.dataset.activeTab = tabId;
+            window.location.hash = `${hashPrefix}${tabId}`;
+            renderDesktopPanel(root, tabId, onPanelRender);
+            renderAccordion(root, tabId, hashPrefix, onPanelRender);
+            setActiveDesktopTab(root, tabId);
+        });
+        accordion.appendChild(item);
+    });
+}
+function setActiveDesktopTab(root, activeTabId) {
+    root.querySelectorAll('.ec-tabs__tab[data-tab-id]').forEach((tab) => {
+        tab.classList.toggle('is-active', tab.dataset.tabId === activeTabId);
+        if (tab.dataset.tabId === activeTabId) {
+            tab.setAttribute('aria-selected', 'true');
+        }
+        else {
+            tab.setAttribute('aria-selected', 'false');
+        }
+    });
+}
+function resolveHashTabId(root, hashPrefix) {
+    const normalized = window.location.hash.replace(/^#/, '');
+    if (!normalized.startsWith(hashPrefix)) {
+        return null;
+    }
+    const id = normalized.slice(hashPrefix.length);
+    return root.querySelector(`.ec-tabs__tab[data-tab-id="${id}"]`) ? id : null;
+}
+function initResponsiveTabsRoot(root, options) {
+    if (root.dataset.ecResponsiveTabsInitialized === '1') {
+        return;
+    }
+    root.dataset.ecResponsiveTabsInitialized = '1';
+    const hashPrefix = root.dataset.hashPrefix || options.hashPrefix || 'tab-';
+    const tabs = Array.from(root.querySelectorAll('.ec-tabs__tab[data-tab-id]'));
+    const firstTabId = tabs[0]?.dataset.tabId || '';
+    const initialTabId = resolveHashTabId(root, hashPrefix) || root.dataset.activeTab || firstTabId;
+    if (!initialTabId) {
+        return;
+    }
+    root.dataset.activeTab = initialTabId;
+    setActiveDesktopTab(root, initialTabId);
+    renderDesktopPanel(root, initialTabId, options.onPanelRender);
+    renderAccordion(root, initialTabId, hashPrefix, options.onPanelRender);
+    tabs.forEach((tab) => {
+        tab.addEventListener('click', () => {
+            const tabId = tab.dataset.tabId;
+            if (!tabId) {
+                return;
+            }
+            root.dataset.activeTab = tabId;
+            window.location.hash = `${hashPrefix}${tabId}`;
+            setActiveDesktopTab(root, tabId);
+            renderDesktopPanel(root, tabId, options.onPanelRender);
+            renderAccordion(root, tabId, hashPrefix, options.onPanelRender);
+        });
+    });
+    window.addEventListener('hashchange', () => {
+        const tabId = resolveHashTabId(root, hashPrefix);
+        if (!tabId) {
+            return;
+        }
+        root.dataset.activeTab = tabId;
+        setActiveDesktopTab(root, tabId);
+        renderDesktopPanel(root, tabId, options.onPanelRender);
+        renderAccordion(root, tabId, hashPrefix, options.onPanelRender);
+    });
+}
+export function initResponsiveTabsDom(options = {}) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const selector = options.selector || DEFAULT_SELECTOR;
+    document.querySelectorAll(selector).forEach((root) => initResponsiveTabsRoot(root, options));
+}

package/package.json

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

package/src/ResponsiveTabs.tsx

@@ -9,11 +9,15 @@ export interface ResponsiveTabsProps {
 	renderPanel: ( id: string ) => ReactNode;
 	className?: string;
 	classPrefix?: string;
+	innerClassName?: string;
+	innerMaxWidth?: 'none' | 'narrow' | 'wide';
 	tabsClassName?: string;
 	tabsClassPrefix?: string;
 	mobileBreakpoint?: number;
 	accordionClassName?: string;
 	showDesktopTabs?: boolean;
+	syncWithHash?: boolean;
+	hashPrefix?: string;
 }
 
 export function ResponsiveTabs( {
@@ -23,11 +27,15 @@ export function ResponsiveTabs( {
 	renderPanel,
 	className = '',
 	classPrefix = 'ec-responsive-tabs',
+	innerClassName = '',
+	innerMaxWidth = 'none',
 	tabsClassName = '',
 	tabsClassPrefix = 'ec-tabs',
 	mobileBreakpoint = 480,
 	accordionClassName = '',
 	showDesktopTabs = true,
+	syncWithHash = false,
+	hashPrefix = 'tab-',
 }: ResponsiveTabsProps ) {
 	const [ isMobile, setIsMobile ] = useState( () => {
 		if ( typeof window === 'undefined' ) {
@@ -38,6 +46,29 @@ export function ResponsiveTabs( {
 	} );
 	const [ mobileActive, setMobileActive ] = useState<string | null>( active );
 
+	const resolveTabIdFromHash = ( hash: string ) => {
+		const normalized = hash.replace( /^#/, '' );
+		if ( ! normalized.startsWith( hashPrefix ) ) {
+			return null;
+		}
+
+		const id = normalized.slice( hashPrefix.length );
+		return tabs.some( ( tab ) => tab.id === id ) ? id : null;
+	};
+
+	const updateHash = ( id: string ) => {
+		if ( ! syncWithHash || typeof window === 'undefined' ) {
+			return;
+		}
+
+		window.location.hash = `${ hashPrefix }${ id }`;
+	};
+
+	const handleChange = ( id: string ) => {
+		onChange( id );
+		updateHash( id );
+	};
+
 	useEffect( () => {
 		if ( typeof window === 'undefined' ) {
 			return undefined;
@@ -59,10 +90,32 @@ export function ResponsiveTabs( {
 		}
 	}, [ active, isMobile ] );
 
+	useEffect( () => {
+		if ( ! syncWithHash || typeof window === 'undefined' || tabs.length === 0 ) {
+			return undefined;
+		}
+
+		const syncFromHash = () => {
+			const id = resolveTabIdFromHash( window.location.hash );
+			if ( ! id ) {
+				return;
+			}
+
+			onChange( id );
+			setMobileActive( id );
+		};
+
+		syncFromHash();
+		window.addEventListener( 'hashchange', syncFromHash );
+
+		return () => window.removeEventListener( 'hashchange', syncFromHash );
+	}, [ hashPrefix, onChange, syncWithHash, tabs ] );
+
 	const rootClass = useMemo(
 		() => [
 			classPrefix,
 			isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`,
+			innerMaxWidth !== 'none' ? `${ classPrefix }--inner-${ innerMaxWidth }` : '',
 			className,
 		]
 			.filter( Boolean )
@@ -77,23 +130,26 @@ export function ResponsiveTabs( {
 	if ( ! isMobile ) {
 		return (
 			<div className={ rootClass }>
-				{ showDesktopTabs && (
-					<Tabs
-						tabs={ tabs }
-						active={ active }
-						onChange={ onChange }
-						className={ tabsClassName }
-						classPrefix={ tabsClassPrefix }
-					/>
-				) }
-				<div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
+				<div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
+					{ showDesktopTabs && (
+						<Tabs
+							tabs={ tabs }
+							active={ active }
+							onChange={ handleChange }
+							className={ tabsClassName }
+							classPrefix={ tabsClassPrefix }
+						/>
+					) }
+					<div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
+				</div>
 			</div>
 		);
 	}
 
 	return (
 		<div className={ rootClass }>
-			<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
+			<div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
+				<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
 				{ tabs.map( ( tab ) => {
 					const isActive = tab.id === mobileActive;
 
@@ -104,15 +160,15 @@ export function ResponsiveTabs( {
 								className={ `${ classPrefix }__trigger${ isActive ? ' is-active' : '' }` }
 								aria-expanded={ isActive }
 								onClick={ () => {
-									if ( isActive ) {
-										setMobileActive( null );
-										return;
-									}
-
-									setMobileActive( tab.id );
-									onChange( tab.id );
-								} }
-							>
+								if ( isActive ) {
+									setMobileActive( null );
+									return;
+								}
+
+								setMobileActive( tab.id );
+								handleChange( tab.id );
+							} }
+						>
 								<span>{ tab.label }</span>
 								<span className={ `${ classPrefix }__arrow` } aria-hidden="true">
 									{ isActive ? '▲' : '▼' }
@@ -122,6 +178,7 @@ export function ResponsiveTabs( {
 						</div>
 					);
 				} ) }
+				</div>
 			</div>
 		</div>
 	);

package/src/index.tsx

@@ -10,6 +10,7 @@ export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
 export { ResponsiveTabs, type ResponsiveTabsProps } from './ResponsiveTabs.tsx';
+export { initResponsiveTabsDom, type ResponsiveTabsDomOptions } from './initResponsiveTabsDom.ts';
 export { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';

package/src/initResponsiveTabsDom.ts

@@ -0,0 +1,184 @@
+export interface ResponsiveTabsDomOptions {
+	selector?: string;
+	mobileBreakpoint?: number;
+	hashPrefix?: string;
+	onPanelRender?: ( panel: HTMLElement, tabId: string, root: HTMLElement ) => void;
+}
+
+const DEFAULT_SELECTOR = '[data-ec-responsive-tabs]';
+
+function createNodeFromTemplate( template: HTMLTemplateElement ): HTMLElement | null {
+	const fragment = template.content.cloneNode( true );
+	const wrapper = document.createElement( 'div' );
+	wrapper.appendChild( fragment );
+
+	return wrapper.firstElementChild instanceof HTMLElement ? wrapper.firstElementChild : wrapper;
+}
+
+function renderDesktopPanel(
+	root: HTMLElement,
+	tabId: string,
+	onPanelRender?: ResponsiveTabsDomOptions['onPanelRender']
+) {
+	const desktopPanel = root.querySelector<HTMLElement>( '.ec-responsive-tabs__desktop-panel' );
+	const template = root.querySelector<HTMLTemplateElement>( `template[data-tab-panel="${ tabId }"]` );
+
+	if ( ! desktopPanel || ! template ) {
+		return;
+	}
+
+	desktopPanel.innerHTML = '';
+	const content = createNodeFromTemplate( template );
+	if ( ! content ) {
+		return;
+	}
+
+	desktopPanel.appendChild( content );
+	onPanelRender?.( desktopPanel, tabId, root );
+}
+
+function renderAccordion(
+	root: HTMLElement,
+	activeTabId: string | null,
+	hashPrefix: string,
+	onPanelRender?: ResponsiveTabsDomOptions['onPanelRender']
+) {
+	const accordion = root.querySelector<HTMLElement>( '.ec-responsive-tabs__accordion' );
+	const tabs = Array.from( root.querySelectorAll<HTMLElement>( '.ec-tabs__tab[data-tab-id]' ) );
+
+	if ( ! accordion ) {
+		return;
+	}
+
+	accordion.innerHTML = '';
+
+	tabs.forEach( ( tab ) => {
+		const tabId = tab.dataset.tabId;
+		if ( ! tabId ) {
+			return;
+		}
+
+		const label = tab.textContent?.trim() || tabId;
+		const item = document.createElement( 'div' );
+		item.className = `ec-responsive-tabs__item${ tabId === activeTabId ? ' is-active' : '' }`;
+
+		const trigger = document.createElement( 'button' );
+		trigger.type = 'button';
+		trigger.className = `ec-responsive-tabs__trigger${ tabId === activeTabId ? ' is-active' : '' }`;
+		trigger.setAttribute( 'aria-expanded', tabId === activeTabId ? 'true' : 'false' );
+		trigger.dataset.tabId = tabId;
+		trigger.innerHTML = `<span>${ label }</span><span class="ec-responsive-tabs__arrow" aria-hidden="true">${ tabId === activeTabId ? '▲' : '▼' }</span>`;
+		item.appendChild( trigger );
+
+		if ( tabId === activeTabId ) {
+			const template = root.querySelector<HTMLTemplateElement>( `template[data-tab-panel="${ tabId }"]` );
+			if ( template ) {
+				const panel = document.createElement( 'div' );
+				panel.className = 'ec-responsive-tabs__panel';
+				const content = createNodeFromTemplate( template );
+				if ( content ) {
+					panel.appendChild( content );
+					item.appendChild( panel );
+					onPanelRender?.( panel, tabId, root );
+				}
+			}
+		}
+
+		trigger.addEventListener( 'click', () => {
+			const isActive = root.dataset.activeTab === tabId;
+			if ( isActive ) {
+				root.dataset.activeTab = '';
+				window.location.hash = '';
+				renderAccordion( root, null, hashPrefix, onPanelRender );
+				return;
+			}
+
+			root.dataset.activeTab = tabId;
+			window.location.hash = `${ hashPrefix }${ tabId }`;
+			renderDesktopPanel( root, tabId, onPanelRender );
+			renderAccordion( root, tabId, hashPrefix, onPanelRender );
+			setActiveDesktopTab( root, tabId );
+		} );
+
+		accordion.appendChild( item );
+	} );
+}
+
+function setActiveDesktopTab( root: HTMLElement, activeTabId: string ) {
+	root.querySelectorAll<HTMLElement>( '.ec-tabs__tab[data-tab-id]' ).forEach( ( tab ) => {
+		tab.classList.toggle( 'is-active', tab.dataset.tabId === activeTabId );
+		if ( tab.dataset.tabId === activeTabId ) {
+			tab.setAttribute( 'aria-selected', 'true' );
+		} else {
+			tab.setAttribute( 'aria-selected', 'false' );
+		}
+	} );
+}
+
+function resolveHashTabId( root: HTMLElement, hashPrefix: string ) {
+	const normalized = window.location.hash.replace( /^#/, '' );
+	if ( ! normalized.startsWith( hashPrefix ) ) {
+		return null;
+	}
+
+	const id = normalized.slice( hashPrefix.length );
+	return root.querySelector<HTMLElement>( `.ec-tabs__tab[data-tab-id="${ id }"]` ) ? id : null;
+}
+
+function initResponsiveTabsRoot( root: HTMLElement, options: ResponsiveTabsDomOptions ) {
+	if ( root.dataset.ecResponsiveTabsInitialized === '1' ) {
+		return;
+	}
+
+	root.dataset.ecResponsiveTabsInitialized = '1';
+
+	const hashPrefix = root.dataset.hashPrefix || options.hashPrefix || 'tab-';
+	const tabs = Array.from( root.querySelectorAll<HTMLElement>( '.ec-tabs__tab[data-tab-id]' ) );
+	const firstTabId = tabs[ 0 ]?.dataset.tabId || '';
+	const initialTabId = resolveHashTabId( root, hashPrefix ) || root.dataset.activeTab || firstTabId;
+
+	if ( ! initialTabId ) {
+		return;
+	}
+
+	root.dataset.activeTab = initialTabId;
+	setActiveDesktopTab( root, initialTabId );
+	renderDesktopPanel( root, initialTabId, options.onPanelRender );
+	renderAccordion( root, initialTabId, hashPrefix, options.onPanelRender );
+
+	tabs.forEach( ( tab ) => {
+		tab.addEventListener( 'click', () => {
+			const tabId = tab.dataset.tabId;
+			if ( ! tabId ) {
+				return;
+			}
+
+			root.dataset.activeTab = tabId;
+			window.location.hash = `${ hashPrefix }${ tabId }`;
+			setActiveDesktopTab( root, tabId );
+			renderDesktopPanel( root, tabId, options.onPanelRender );
+			renderAccordion( root, tabId, hashPrefix, options.onPanelRender );
+		} );
+	} );
+
+	window.addEventListener( 'hashchange', () => {
+		const tabId = resolveHashTabId( root, hashPrefix );
+		if ( ! tabId ) {
+			return;
+		}
+
+		root.dataset.activeTab = tabId;
+		setActiveDesktopTab( root, tabId );
+		renderDesktopPanel( root, tabId, options.onPanelRender );
+		renderAccordion( root, tabId, hashPrefix, options.onPanelRender );
+	} );
+}
+
+export function initResponsiveTabsDom( options: ResponsiveTabsDomOptions = {} ) {
+	if ( typeof document === 'undefined' ) {
+		return;
+	}
+
+	const selector = options.selector || DEFAULT_SELECTOR;
+	document.querySelectorAll<HTMLElement>( selector ).forEach( ( root ) => initResponsiveTabsRoot( root, options ) );
+}

package/styles/components.scss

@@ -149,6 +149,25 @@
 	gap: var(--spacing-md, 1rem);
 }
 
+.ec-responsive-tabs__inner {
+	width: 100%;
+	min-width: 0;
+}
+
+.ec-responsive-tabs--inner-narrow .ec-responsive-tabs__inner {
+	max-width: 700px;
+}
+
+.ec-responsive-tabs--inner-wide .ec-responsive-tabs__inner {
+	max-width: 1080px;
+}
+
+.ec-responsive-tabs .ec-tabs__tabs {
+	padding-bottom: calc(var(--spacing-md, 1rem) + var(--spacing-sm, 0.5rem));
+	margin-bottom: var(--spacing-sm, 0.5rem);
+	border-bottom: 1px solid var(--border-color, #ddd);
+}
+
 .ec-responsive-tabs__desktop-panel {
 	display: grid;
 	background: var(--background-color, #fff);
@@ -230,6 +249,12 @@
 }
 
 @media (max-width: 480px) {
+	.ec-responsive-tabs__inner {
+		max-width: none;
+		padding-left: var(--spacing-md, 1rem);
+		padding-right: var(--spacing-md, 1rem);
+	}
+
 	.ec-responsive-tabs .ec-tabs__tabs,
 	.ec-responsive-tabs__desktop-panel {
 		display: none;