@data-slot/tabs 0.2.4 → 0.2.6

package/README.md

@@ -62,8 +62,26 @@ const tabs = createTabs(element, {
 |--------|------|---------|-------------|
 | `defaultValue` | `string` | First trigger's value | Initial selected tab |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Tab orientation for keyboard nav |
+| `activationMode` | `"auto" \| "manual"` | `"auto"` | How tabs are activated with keyboard |
 | `onValueChange` | `(value: string) => void` | `undefined` | Callback when selected tab changes |
 
+### Data Attributes
+
+Options can also be set via data attributes on the root element. JS options take precedence.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-default-value` | string | first tab | Initial selected tab |
+| `data-orientation` | string | `"horizontal"` | Tab orientation: horizontal, vertical |
+| `data-activation-mode` | string | `"auto"` | Activation mode: auto, manual |
+
+```html
+<!-- Vertical tabs with manual activation -->
+<div data-slot="tabs" data-orientation="vertical" data-activation-mode="manual">
+  ...
+</div>
+```
+
 ### Controller
 
 | Method/Property | Description |

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function o(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function l(n,r={}){let{onValueChange:l,orientation:d=`horizontal`,activationMode:f=`auto`}=r,p=e(n,`tabs-list`),m=t(n,`tabs-trigger`),h=t(n,`tabs-content`),g=e(n,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=n,T=(r.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&a(p,`orientation`,`vertical`);for(let e of v){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let a=i(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=i(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(e,t=!1)=>{if(e=e.trim(),D===e&&!t)return;let r=y.get(e);if(!r||r.disabled)if(t){if(e=C,!e)return}else return;let i=D!==e;D=e;for(let t of v){let n=t.value===e;a(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of h){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),g&&k(),i&&!t&&(s(n,`tabs:change`,{value:e}),l?.(e))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(o(window,`resize`,e)),O.push(o(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(o(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(o(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(c);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P=e=>{let t=e,n=e.currentTarget,r=t.detail,i=typeof r==`string`?r:r?.value??n?.dataset?.value,a=i?.trim();a&&A(a)};O.push(o(n,`tabs:select`,P));let F={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,u.delete(n)}};return F}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`tabs`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}exports.create=d,exports.createTabs=l;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}function c(e,t){if(s(e,t))return o(e,t)??void 0}function l(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let u=0;const d=(e,t)=>e.id||=`${t}-${++u}`,f=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function p(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const m=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),h=[`horizontal`,`vertical`],g=[`auto`,`manual`],_=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function v(n,r={}){let i=e(n,`tabs-list`),a=t(n,`tabs-trigger`),o=t(n,`tabs-content`),s=e(n,`tabs-indicator`);if(!i||a.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let u=r.onValueChange,v=r.orientation??l(n,`orientation`,h)??`horizontal`,b=r.activationMode??l(n,`activationMode`,g)??`auto`,x=new Map;for(let e of o){let t=(e.dataset.value||``).trim();t&&x.set(t,e)}let S=[],C=new Map,w=new Map;for(let e of a){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=x.get(t),i={el:e,value:t,disabled:n,panel:r};S.push(i),C.set(t,i),w.set(e,i)}let T=S.filter(e=>!e.disabled),E=new Map;T.forEach((e,t)=>E.set(e.value,t));let D=T[0]?.value||``,O=(r.defaultValue??c(n,`defaultValue`)??``).trim(),k=C.get(O),A=k&&!k.disabled?O:D,j=[];i.setAttribute(`role`,`tablist`),v===`vertical`&&f(i,`orientation`,`vertical`);for(let e of S){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let i=d(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=d(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,i)}}let M=()=>{if(!s)return;let e=C.get(A);if(!e)return;let t=i.getBoundingClientRect(),n=e.el.getBoundingClientRect();s.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),s.style.setProperty(`--active-tab-width`,`${n.width}px`),s.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),s.style.setProperty(`--active-tab-height`,`${n.height}px`)},N=(e,t=!1)=>{if(e=e.trim(),A===e&&!t)return;let r=C.get(e);if(!r||r.disabled)if(t){if(e=D,!e)return}else return;let i=A!==e;A=e;for(let t of S){let n=t.value===e;f(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of o){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),s&&M(),i&&!t&&(m(n,`tabs:change`,{value:e}),u?.(e))};if(N(A,!0),s){let e=()=>requestAnimationFrame(M);j.push(p(window,`resize`,e)),j.push(p(i,`scroll`,e));let t=new ResizeObserver(e);t.observe(i),j.push(()=>t.disconnect())}j.push(p(i,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=w.get(t);n&&!n.disabled&&N(n.value)}));let P=v===`horizontal`,F=P?`ArrowLeft`:`ArrowUp`,I=P?`ArrowRight`:`ArrowDown`;j.push(p(i,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=w.get(t);if(!n||T.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||N(n.value);return}if(P&&e.key===`ArrowDown`&&n.value===A){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(_);(n||t).focus();return}}let r=E.get(n.value)??-1;r===-1&&(r=E.get(A)??0);let i=r;switch(e.key){case F:i=r-1,i<0&&(i=T.length-1);break;case I:i=r+1,i>=T.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=T.length-1;break;default:return}e.preventDefault();let a=T[i];a&&(a.el.focus(),b===`auto`&&N(a.value))}));let L=e=>{let t=e,n=e.currentTarget,r=t.detail,i=typeof r==`string`?r:r?.value??n?.dataset?.value,a=i?.trim();a&&N(a)};j.push(p(n,`tabs:select`,L));let R={select:e=>N(e),get value(){return A},updateIndicator:M,destroy:()=>{j.forEach(e=>e()),j.length=0,y.delete(n)}};return R}const y=new WeakSet;function b(e=document){let t=[];for(let r of n(e,`tabs`)){if(y.has(r))continue;y.add(r),t.push(v(r))}return t}exports.create=b,exports.createTabs=v;

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function o(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function l(n,r={}){let{onValueChange:l,orientation:d=`horizontal`,activationMode:f=`auto`}=r,p=e(n,`tabs-list`),m=t(n,`tabs-trigger`),h=t(n,`tabs-content`),g=e(n,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=n,T=(r.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&a(p,`orientation`,`vertical`);for(let e of v){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let a=i(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=i(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(e,t=!1)=>{if(e=e.trim(),D===e&&!t)return;let r=y.get(e);if(!r||r.disabled)if(t){if(e=C,!e)return}else return;let i=D!==e;D=e;for(let t of v){let n=t.value===e;a(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of h){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),g&&k(),i&&!t&&(s(n,`tabs:change`,{value:e}),l?.(e))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(o(window,`resize`,e)),O.push(o(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(o(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(o(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(c);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P=e=>{let t=e,n=e.currentTarget,r=t.detail,i=typeof r==`string`?r:r?.value??n?.dataset?.value,a=i?.trim();a&&A(a)};O.push(o(n,`tabs:select`,P));let F={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,u.delete(n)}};return F}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`tabs`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}export{d as create,l as createTabs};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}function c(e,t){if(s(e,t))return o(e,t)??void 0}function l(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let u=0;const d=(e,t)=>e.id||=`${t}-${++u}`,f=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function p(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const m=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),h=[`horizontal`,`vertical`],g=[`auto`,`manual`],_=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function v(n,r={}){let i=e(n,`tabs-list`),a=t(n,`tabs-trigger`),o=t(n,`tabs-content`),s=e(n,`tabs-indicator`);if(!i||a.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let u=r.onValueChange,v=r.orientation??l(n,`orientation`,h)??`horizontal`,b=r.activationMode??l(n,`activationMode`,g)??`auto`,x=new Map;for(let e of o){let t=(e.dataset.value||``).trim();t&&x.set(t,e)}let S=[],C=new Map,w=new Map;for(let e of a){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=x.get(t),i={el:e,value:t,disabled:n,panel:r};S.push(i),C.set(t,i),w.set(e,i)}let T=S.filter(e=>!e.disabled),E=new Map;T.forEach((e,t)=>E.set(e.value,t));let D=T[0]?.value||``,O=(r.defaultValue??c(n,`defaultValue`)??``).trim(),k=C.get(O),A=k&&!k.disabled?O:D,j=[];i.setAttribute(`role`,`tablist`),v===`vertical`&&f(i,`orientation`,`vertical`);for(let e of S){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let i=d(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=d(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,i)}}let M=()=>{if(!s)return;let e=C.get(A);if(!e)return;let t=i.getBoundingClientRect(),n=e.el.getBoundingClientRect();s.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),s.style.setProperty(`--active-tab-width`,`${n.width}px`),s.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),s.style.setProperty(`--active-tab-height`,`${n.height}px`)},N=(e,t=!1)=>{if(e=e.trim(),A===e&&!t)return;let r=C.get(e);if(!r||r.disabled)if(t){if(e=D,!e)return}else return;let i=A!==e;A=e;for(let t of S){let n=t.value===e;f(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of o){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),s&&M(),i&&!t&&(m(n,`tabs:change`,{value:e}),u?.(e))};if(N(A,!0),s){let e=()=>requestAnimationFrame(M);j.push(p(window,`resize`,e)),j.push(p(i,`scroll`,e));let t=new ResizeObserver(e);t.observe(i),j.push(()=>t.disconnect())}j.push(p(i,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=w.get(t);n&&!n.disabled&&N(n.value)}));let P=v===`horizontal`,F=P?`ArrowLeft`:`ArrowUp`,I=P?`ArrowRight`:`ArrowDown`;j.push(p(i,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=w.get(t);if(!n||T.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||N(n.value);return}if(P&&e.key===`ArrowDown`&&n.value===A){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(_);(n||t).focus();return}}let r=E.get(n.value)??-1;r===-1&&(r=E.get(A)??0);let i=r;switch(e.key){case F:i=r-1,i<0&&(i=T.length-1);break;case I:i=r+1,i>=T.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=T.length-1;break;default:return}e.preventDefault();let a=T[i];a&&(a.el.focus(),b===`auto`&&N(a.value))}));let L=e=>{let t=e,n=e.currentTarget,r=t.detail,i=typeof r==`string`?r:r?.value??n?.dataset?.value,a=i?.trim();a&&N(a)};j.push(p(n,`tabs:select`,L));let R={select:e=>N(e),get value(){return A},updateIndicator:M,destroy:()=>{j.forEach(e=>e()),j.length=0,y.delete(n)}};return R}const y=new WeakSet;function b(e=document){let t=[];for(let r of n(e,`tabs`)){if(y.has(r))continue;y.add(r),t.push(v(r))}return t}export{b as create,v as createTabs};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/tabs",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",