@data-slot/tabs 0.2.74 → 0.2.75

package/README.md

@@ -133,6 +133,25 @@ Options can also be set via data attributes on the root element. JS options take
 }
 ```
 
+### Panel Activation Direction
+
+Panels receive `data-activation-direction` after tab changes (not on initial mount):
+
+- Horizontal: `left`, `right`
+- Vertical: `up`, `down`
+
+Use it for directional content animations:
+
+```css
+[data-slot="tabs-content"][data-activation-direction="right"] {
+  animation: slide-in-from-right 200ms ease;
+}
+
+[data-slot="tabs-content"][data-activation-direction="left"] {
+  animation: slide-in-from-left 200ms ease;
+}
+```
+
 ### Animated Indicator
 
 The indicator receives CSS variables for positioning:

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`horizontal`,`vertical`],n=[`auto`,`manual`];function r(r,a={}){let o=(0,e.getPart)(r,`tabs-list`),s=(0,e.getParts)(r,`tabs-trigger`),c=(0,e.getParts)(r,`tabs-content`),l=(0,e.getPart)(r,`tabs-indicator`);if(!o||s.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let u=a.onValueChange,d=a.orientation??(0,e.getDataEnum)(r,`orientation`,t)??`horizontal`,f=a.activationMode??(0,e.getDataEnum)(r,`activationMode`,n)??`auto`,p=new Map;for(let e of c){let t=(e.dataset.value||``).trim();t&&p.set(t,e)}let m=[],h=new Map,g=new Map;for(let e of s){let t=(e.dataset.value||``).trim();if(!t)continue;let n={el:e,value:t,disabled:e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,panel:p.get(t)};m.push(n),h.set(t,n),g.set(e,n)}let _=m.filter(e=>!e.disabled),v=new Map;_.forEach((e,t)=>v.set(e.value,t));let y=_[0]?.value||``,b=(a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??``).trim(),x=h.get(b),S=x&&!x.disabled?b:y,C=[];o.setAttribute(`role`,`tablist`),d===`vertical`&&(0,e.setAria)(o,`orientation`,`vertical`);for(let t of m){let{el:n,disabled:r,panel:i}=t;n.setAttribute(`role`,`tab`);let a=(0,e.ensureId)(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let t=(0,e.ensureId)(i,`tabpanel`);n.setAttribute(`aria-controls`,t),i.setAttribute(`aria-labelledby`,a)}}let w=()=>{if(!l)return;let e=h.get(S);if(!e)return;let t=o.getBoundingClientRect(),n=e.el.getBoundingClientRect(),r=o.scrollLeft,i=o.scrollTop;l.style.setProperty(`--active-tab-left`,`${n.left-t.left-o.clientLeft+r}px`),l.style.setProperty(`--active-tab-width`,`${n.width}px`),l.style.setProperty(`--active-tab-top`,`${n.top-t.top-o.clientTop+i}px`),l.style.setProperty(`--active-tab-height`,`${n.height}px`)},T=(t,n=!1)=>{if(t=t.trim(),S===t&&!n)return;let i=h.get(t);if(!i||i.disabled)if(n){if(t=y,!t)return}else return;let a=S!==t;S=t;for(let n of m){let r=n.value===t;(0,e.setAria)(n.el,`selected`,r),n.el.tabIndex=r&&!n.disabled?0:-1,n.el.dataset.state=r?`active`:`inactive`}for(let e of c){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}r.setAttribute(`data-value`,t),l&&w(),a&&!n&&((0,e.emit)(r,`tabs:change`,{value:t}),u?.(t))};if(T(S,!0),l){let t=()=>requestAnimationFrame(w);C.push((0,e.on)(window,`resize`,t)),C.push((0,e.on)(o,`scroll`,t));let n=new ResizeObserver(t);n.observe(o),C.push(()=>n.disconnect())}C.push((0,e.on)(o,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=g.get(t);n&&!n.disabled&&T(n.value)}));let E=d===`horizontal`,D=E?`ArrowLeft`:`ArrowUp`,O=E?`ArrowRight`:`ArrowDown`;C.push((0,e.on)(o,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=g.get(t);if(!n||_.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||T(n.value);return}if(E&&e.key===`ArrowDown`&&n.value===S){let t=n.panel;if(t){e.preventDefault(),(t.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)||t).focus();return}}let r=v.get(n.value)??-1;r===-1&&(r=v.get(S)??0);let i=r;switch(e.key){case D:i=r-1,i<0&&(i=_.length-1);break;case O:i=r+1,i>=_.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=_.length-1;break;default:return}e.preventDefault();let a=_[i];a&&(a.el.focus(),f===`auto`&&T(a.value))}));let k=e=>{let t=e,n=e.currentTarget,r=t.detail,i=(typeof r==`string`?r:r?.value??n?.dataset?.value)?.trim();i&&T(i)};return C.push((0,e.on)(r,`tabs:set`,k)),C.push((0,e.on)(r,`tabs:select`,k)),{select:e=>T(e),get value(){return S},updateIndicator:w,destroy:()=>{C.forEach(e=>e()),C.length=0,i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`tabs`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createTabs=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`horizontal`,`vertical`],n=[`auto`,`manual`];function r(r,a={}){let o=(0,e.getPart)(r,`tabs-list`),s=(0,e.getParts)(r,`tabs-trigger`),c=(0,e.getParts)(r,`tabs-content`),l=(0,e.getPart)(r,`tabs-indicator`);if(!o||s.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let u=a.onValueChange,d=a.orientation??(0,e.getDataEnum)(r,`orientation`,t)??`horizontal`,f=a.activationMode??(0,e.getDataEnum)(r,`activationMode`,n)??`auto`,p=new Map;for(let e of c){let t=(e.dataset.value||``).trim();t&&p.set(t,e)}let m=[],h=new Map,g=new Map;for(let e of s){let t=(e.dataset.value||``).trim();if(!t)continue;let n={el:e,value:t,disabled:e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,panel:p.get(t)};m.push(n),h.set(t,n),g.set(e,n)}let _=m.filter(e=>!e.disabled),v=new Map;_.forEach((e,t)=>v.set(e.value,t));let y=_[0]?.value||``,b=(a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??``).trim(),x=h.get(b),S=x&&!x.disabled?b:y,C=[];o.setAttribute(`role`,`tablist`),d===`vertical`&&(0,e.setAria)(o,`orientation`,`vertical`);for(let t of m){let{el:n,disabled:r,panel:i}=t;n.setAttribute(`role`,`tab`);let a=(0,e.ensureId)(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let t=(0,e.ensureId)(i,`tabpanel`);n.setAttribute(`aria-controls`,t),i.setAttribute(`aria-labelledby`,a)}}let w=()=>{if(!l)return;let e=h.get(S);if(!e)return;let t=o.getBoundingClientRect(),n=e.el.getBoundingClientRect(),r=o.scrollLeft,i=o.scrollTop;l.style.setProperty(`--active-tab-left`,`${n.left-t.left-o.clientLeft+r}px`),l.style.setProperty(`--active-tab-width`,`${n.width}px`),l.style.setProperty(`--active-tab-top`,`${n.top-t.top-o.clientTop+i}px`),l.style.setProperty(`--active-tab-height`,`${n.height}px`)},T=(e,t)=>{let n=m.findIndex(t=>t.value===e),r=m.findIndex(e=>e.value===t);return n<0||r<0||n===r?null:d===`vertical`?r>n?`down`:`up`:r>n?`right`:`left`},E=(t,n=!1)=>{if(t=t.trim(),S===t&&!n)return;let i=h.get(t);if(!i||i.disabled)if(n){if(t=y,!t)return}else return;let a=S,o=a!==t,s=!n&&o?T(a,t):null;S=t;for(let n of m){let r=n.value===t;(0,e.setAria)(n.el,`selected`,r),n.el.tabIndex=r&&!n.disabled?0:-1,n.el.dataset.state=r?`active`:`inactive`}for(let e of c){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`,s?e.dataset.activationDirection=s:delete e.dataset.activationDirection}r.setAttribute(`data-value`,t),l&&w(),o&&!n&&((0,e.emit)(r,`tabs:change`,{value:t}),u?.(t))};if(E(S,!0),l){let t=()=>requestAnimationFrame(w);C.push((0,e.on)(window,`resize`,t)),C.push((0,e.on)(o,`scroll`,t));let n=new ResizeObserver(t);n.observe(o),C.push(()=>n.disconnect())}C.push((0,e.on)(o,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=g.get(t);n&&!n.disabled&&E(n.value)}));let D=d===`horizontal`,O=D?`ArrowLeft`:`ArrowUp`,k=D?`ArrowRight`:`ArrowDown`;C.push((0,e.on)(o,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=g.get(t);if(!n||_.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||E(n.value);return}if(D&&e.key===`ArrowDown`&&n.value===S){let t=n.panel;if(t){e.preventDefault(),(t.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)||t).focus();return}}let r=v.get(n.value)??-1;r===-1&&(r=v.get(S)??0);let i=r;switch(e.key){case O:i=r-1,i<0&&(i=_.length-1);break;case k:i=r+1,i>=_.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=_.length-1;break;default:return}e.preventDefault();let a=_[i];a&&(a.el.focus(),f===`auto`&&E(a.value))}));let A=e=>{let t=e,n=e.currentTarget,r=t.detail,i=(typeof r==`string`?r:r?.value??n?.dataset?.value)?.trim();i&&E(i)};return C.push((0,e.on)(r,`tabs:set`,A)),C.push((0,e.on)(r,`tabs:select`,A)),{select:e=>E(e),get value(){return S},updateIndicator:w,destroy:()=>{C.forEach(e=>e()),C.length=0,i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`tabs`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createTabs=r;

package/dist/index.js

@@ -1 +1 @@
-import{emit as e,ensureId as t,getDataEnum as n,getDataString as r,getPart as i,getParts as a,getRoots as o,on as s,setAria as c}from"@data-slot/core";const l=[`horizontal`,`vertical`],u=[`auto`,`manual`];function d(o,d={}){let p=i(o,`tabs-list`),m=a(o,`tabs-trigger`),h=a(o,`tabs-content`),g=i(o,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=d.onValueChange,v=d.orientation??n(o,`orientation`,l)??`horizontal`,y=d.activationMode??n(o,`activationMode`,u)??`auto`,b=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&b.set(t,e)}let x=[],S=new Map,C=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n={el:e,value:t,disabled:e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,panel:b.get(t)};x.push(n),S.set(t,n),C.set(e,n)}let w=x.filter(e=>!e.disabled),T=new Map;w.forEach((e,t)=>T.set(e.value,t));let E=w[0]?.value||``,D=(d.defaultValue??r(o,`defaultValue`)??``).trim(),O=S.get(D),k=O&&!O.disabled?D:E,A=[];p.setAttribute(`role`,`tablist`),v===`vertical`&&c(p,`orientation`,`vertical`);for(let e of x){let{el:n,disabled:r,panel:i}=e;n.setAttribute(`role`,`tab`);let a=t(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let e=t(i,`tabpanel`);n.setAttribute(`aria-controls`,e),i.setAttribute(`aria-labelledby`,a)}}let j=()=>{if(!g)return;let e=S.get(k);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect(),r=p.scrollLeft,i=p.scrollTop;g.style.setProperty(`--active-tab-left`,`${n.left-t.left-p.clientLeft+r}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top-p.clientTop+i}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},M=(t,n=!1)=>{if(t=t.trim(),k===t&&!n)return;let r=S.get(t);if(!r||r.disabled)if(n){if(t=E,!t)return}else return;let i=k!==t;k=t;for(let e of x){let n=e.value===t;c(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of h){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}o.setAttribute(`data-value`,t),g&&j(),i&&!n&&(e(o,`tabs:change`,{value:t}),_?.(t))};if(M(k,!0),g){let e=()=>requestAnimationFrame(j);A.push(s(window,`resize`,e)),A.push(s(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),A.push(()=>t.disconnect())}A.push(s(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=C.get(t);n&&!n.disabled&&M(n.value)}));let N=v===`horizontal`,P=N?`ArrowLeft`:`ArrowUp`,F=N?`ArrowRight`:`ArrowDown`;A.push(s(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=C.get(t);if(!n||w.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||M(n.value);return}if(N&&e.key===`ArrowDown`&&n.value===k){let t=n.panel;if(t){e.preventDefault(),(t.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)||t).focus();return}}let r=T.get(n.value)??-1;r===-1&&(r=T.get(k)??0);let i=r;switch(e.key){case P:i=r-1,i<0&&(i=w.length-1);break;case F:i=r+1,i>=w.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=w.length-1;break;default:return}e.preventDefault();let a=w[i];a&&(a.el.focus(),y===`auto`&&M(a.value))}));let I=e=>{let t=e,n=e.currentTarget,r=t.detail,i=(typeof r==`string`?r:r?.value??n?.dataset?.value)?.trim();i&&M(i)};return A.push(s(o,`tabs:set`,I)),A.push(s(o,`tabs:select`,I)),{select:e=>M(e),get value(){return k},updateIndicator:j,destroy:()=>{A.forEach(e=>e()),A.length=0,f.delete(o)}}}const f=new WeakSet;function p(e=document){let t=[];for(let n of o(e,`tabs`))f.has(n)||(f.add(n),t.push(d(n)));return t}export{p as create,d as createTabs};
+import{emit as e,ensureId as t,getDataEnum as n,getDataString as r,getPart as i,getParts as a,getRoots as o,on as s,setAria as c}from"@data-slot/core";const l=[`horizontal`,`vertical`],u=[`auto`,`manual`];function d(o,d={}){let p=i(o,`tabs-list`),m=a(o,`tabs-trigger`),h=a(o,`tabs-content`),g=i(o,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=d.onValueChange,v=d.orientation??n(o,`orientation`,l)??`horizontal`,y=d.activationMode??n(o,`activationMode`,u)??`auto`,b=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&b.set(t,e)}let x=[],S=new Map,C=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n={el:e,value:t,disabled:e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,panel:b.get(t)};x.push(n),S.set(t,n),C.set(e,n)}let w=x.filter(e=>!e.disabled),T=new Map;w.forEach((e,t)=>T.set(e.value,t));let E=w[0]?.value||``,D=(d.defaultValue??r(o,`defaultValue`)??``).trim(),O=S.get(D),k=O&&!O.disabled?D:E,A=[];p.setAttribute(`role`,`tablist`),v===`vertical`&&c(p,`orientation`,`vertical`);for(let e of x){let{el:n,disabled:r,panel:i}=e;n.setAttribute(`role`,`tab`);let a=t(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let e=t(i,`tabpanel`);n.setAttribute(`aria-controls`,e),i.setAttribute(`aria-labelledby`,a)}}let j=()=>{if(!g)return;let e=S.get(k);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect(),r=p.scrollLeft,i=p.scrollTop;g.style.setProperty(`--active-tab-left`,`${n.left-t.left-p.clientLeft+r}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top-p.clientTop+i}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},M=(e,t)=>{let n=x.findIndex(t=>t.value===e),r=x.findIndex(e=>e.value===t);return n<0||r<0||n===r?null:v===`vertical`?r>n?`down`:`up`:r>n?`right`:`left`},N=(t,n=!1)=>{if(t=t.trim(),k===t&&!n)return;let r=S.get(t);if(!r||r.disabled)if(n){if(t=E,!t)return}else return;let i=k,a=i!==t,s=!n&&a?M(i,t):null;k=t;for(let e of x){let n=e.value===t;c(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of h){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`,s?e.dataset.activationDirection=s:delete e.dataset.activationDirection}o.setAttribute(`data-value`,t),g&&j(),a&&!n&&(e(o,`tabs:change`,{value:t}),_?.(t))};if(N(k,!0),g){let e=()=>requestAnimationFrame(j);A.push(s(window,`resize`,e)),A.push(s(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),A.push(()=>t.disconnect())}A.push(s(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=C.get(t);n&&!n.disabled&&N(n.value)}));let P=v===`horizontal`,F=P?`ArrowLeft`:`ArrowUp`,I=P?`ArrowRight`:`ArrowDown`;A.push(s(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=C.get(t);if(!n||w.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||N(n.value);return}if(P&&e.key===`ArrowDown`&&n.value===k){let t=n.panel;if(t){e.preventDefault(),(t.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`)||t).focus();return}}let r=T.get(n.value)??-1;r===-1&&(r=T.get(k)??0);let i=r;switch(e.key){case F:i=r-1,i<0&&(i=w.length-1);break;case I:i=r+1,i>=w.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=w.length-1;break;default:return}e.preventDefault();let a=w[i];a&&(a.el.focus(),y===`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)?.trim();i&&N(i)};return A.push(s(o,`tabs:set`,L)),A.push(s(o,`tabs:select`,L)),{select:e=>N(e),get value(){return k},updateIndicator:j,destroy:()=>{A.forEach(e=>e()),A.length=0,f.delete(o)}}}const f=new WeakSet;function p(e=document){let t=[];for(let n of o(e,`tabs`))f.has(n)||(f.add(n),t.push(d(n)));return t}export{p as create,d as createTabs};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/tabs",
-  "version": "0.2.74",
+  "version": "0.2.75",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -38,6 +38,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.74"
+    "@data-slot/core": "0.2.75"
   }
 }