@fsegurai/marked-extended-tabs 17.0.0-beta.7 → 17.0.0

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={value:0},t={className:`marked-extended-tabs-container`,persistSelection:!1,animation:`fade`,autoActivate:!0,template:null,customizeToken:null,onBeforeSwitch:null,onAfterSwitch:null,enableKeyboardNavigation:!0,enableFocusManagement:!0},n=`
-  <div id="{tabsContainerId}" class="{className}" data-animation="{animation}">
+  <div id="{tabsContainerId}" class="{className}" data-animation="{animation}" {runtimeAttrs}>
     {inputsNav}
     <div class="marked-extended-tabs-nav" role="tablist">{navList}</div>
     <div class="marked-extended-tabs-content">{content}</div>
@@ -26,234 +26,10 @@ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{val
   from { transform: translateY(10px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
 }`),r.push(`</style>`),r.join(`
-`)}function i(e,t,n=!0,r=!0,i=!1){return`<script>
-/* eslint-disable no-unused-vars */
-(function() {
-  const containerId = '${e}';
-  const storageKey = '${`marked-extended-tabs-active-${e}`}';
-  // @ts-ignore - tabIds is used in the script template
-  const tabIds = ${JSON.stringify(t.map(e=>e.id))};
-  const enableKeyboardNav = ${n};
-  const enableFocusManagement = ${r};
-  const persistSelection = ${i};
-
-  // Function to update aria-selected state
-  function updateAriaSelected(container, activeInputId) {
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-    labels.forEach((label) => {
-      const forAttr = label.getAttribute('for');
-      const isActive = forAttr === activeInputId;
-      
-      // Only update if value changes to minimize DOM operations
-      if (label.getAttribute('aria-selected') !== String(isActive)) {
-        label.setAttribute('aria-selected', isActive ? 'true' : 'false');
-        if (isActive) {
-          label.classList.add('active');
-        } else {
-          label.classList.remove('active');
-        }
-      }
-      
-      if (enableFocusManagement) {
-        label.setAttribute('tabindex', isActive ? '0' : '-1');
-      }
-    });
-  }
-
-  // Helper to handle tab changes (events and persistence)
-  function handleTabChange(container, actualTabId) {
-    if (persistSelection) {
-      localStorage.setItem(storageKey, actualTabId);
-    }
-
-    container.dispatchEvent(new CustomEvent('tab-switched', {
-      detail: {
-        tabId: actualTabId,
-        timestamp: Date.now(),
-      },
-      bubbles: true,
-      cancelable: true,
-    }));
-  }
-
-  // Wait for DOM to be interactive or immediately if script is inline
-  function initializeTabs() {
-    const container = document.getElementById(containerId);
-    if (!container) {
-      console.warn('[marked-extended-tabs] Container #' + containerId + ' not found');
-      return;
-    }
-
-    const inputs = container.querySelectorAll('input[type="radio"]');
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-
-    if (inputs.length === 0 || labels.length === 0) {
-      console.warn('[marked-extended-tabs] No tabs found in container');
-      return;
-    }
-
-    // Update aria-selected on initial load
-    const checkedInput = container.querySelector('input[type="radio"]:checked');
-    if (checkedInput) {
-      updateAriaSelected(container, checkedInput.id);
-    }
-
-    // Restore persisted selection if available
-    if (persistSelection) {
-      const savedTabId = localStorage.getItem(storageKey);
-      if (savedTabId) {
-        const savedInput = container.querySelector('#input-' + savedTabId);
-        if (savedInput) {
-          setTimeout(() => {
-            savedInput.checked = true;
-            updateAriaSelected(container, savedInput.id);
-            savedInput.dispatchEvent(new Event('change', { bubbles: true }));
-          }, 0);
-        }
-      }
-    }
-
-    // Handle tab switching via label click events (this is what fires when users click tabs)
-    labels.forEach((label) => {
-      label.addEventListener('click', (e) => {
-        const forAttr = label.getAttribute('for');
-        if (!forAttr) return;
-
-        const input = document.getElementById(forAttr);
-        if (!input) return;
-
-        // Set the radio input as checked
-        input.checked = true;
-
-        // Immediately update aria-selected
-        updateAriaSelected(container, forAttr);
-
-        const actualTabId = forAttr.replace('input-', '');
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Also handle change events for programmatic updates
-    inputs.forEach((input) => {
-      input.addEventListener('change', (e) => {
-        const inputId = e.target.id;
-        const actualTabId = inputId.replace('input-', '');
-
-        // Update aria-selected
-        updateAriaSelected(container, inputId);
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Keyboard navigation
-    if (enableKeyboardNav) {
-      labels.forEach((label, index) => {
-        label.addEventListener('keydown', (e) => {
-          let targetIndex = index;
-          
-          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            targetIndex = (index + 1) % labels.length;
-          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            targetIndex = (index - 1 + labels.length) % labels.length;
-          } else if (e.key === 'Home') {
-            e.preventDefault();
-            targetIndex = 0;
-          } else if (e.key === 'End') {
-            e.preventDefault();
-            targetIndex = labels.length - 1;
-          } else {
-            return;
-          }
-
-          const targetLabel = labels[targetIndex];
-          if (targetLabel) {
-            const forAttr = targetLabel.getAttribute('for');
-            if (forAttr) {
-              const input = document.getElementById(forAttr);
-              if (input) {
-                input.checked = true;
-                updateAriaSelected(container, forAttr);
-                input.dispatchEvent(new Event('change', { bubbles: true }));
-                
-                // Focus the label for better UX
-                setTimeout(() => {
-                  targetLabel.focus();
-                }, 0);
-              }
-            }
-          }
-        });
-
-        // Make labels keyboard accessible
-        if (enableFocusManagement) {
-          label.addEventListener('keypress', (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-              e.preventDefault();
-              const forAttr = label.getAttribute('for');
-              if (forAttr) {
-                const input = document.getElementById(forAttr);
-                if (input) {
-                  input.checked = true;
-                  updateAriaSelected(container, forAttr);
-                  input.dispatchEvent(new Event('change', { bubbles: true }));
-                }
-              }
-            }
-          });
-        }
-      });
-    }
-
-    // Enhanced focus management
-    if (enableFocusManagement) {
-      // Set initial tab index for first active or first tab
-      const activeLabel = container.querySelector('.marked-extended-tabs-label[aria-selected="true"]');
-      if (activeLabel) {
-        activeLabel.setAttribute('tabindex', '0');
-      } else if (labels.length > 0) {
-        labels[0].setAttribute('tabindex', '0');
-      }
-
-      // Update tabindex when labels receive focus
-      labels.forEach((label) => {
-        label.addEventListener('focus', () => {
-          labels.forEach((l) => l.setAttribute('tabindex', '-1'));
-          label.setAttribute('tabindex', '0');
-        });
-      });
-    }
-
-    // Watch for radio input changes to update aria-selected
-    // This is crucial for CSS to work with [aria-selected="true"]
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'checked') {
-          const checkedRadio = container.querySelector('input[type="radio"]:checked');
-          if (checkedRadio) {
-            updateAriaSelected(container, checkedRadio.id);
-          }
-        }
-      });
-    });
-
-    // Observe all radio inputs for checked attribute changes
-    inputs.forEach((input) => {
-      observer.observe(input, { attributes: true, attributeFilter: ['checked'] });
-    });
-  }
-
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeTabs);
-  } else {
-    initializeTabs();
-  }
-})();<\/script>`}var a=/\s*(\w+)="([^"]+)"/g,o={tabBlock:{start:`::::tabs`,end:`::::tabsend`,aliases:[`:tbs`,`:tabs`],endAliases:[`:tbsend`,`:tabsend`]},tabItemBlock:{start:`:::tab`,end:`:::tabend`,aliases:[`:tab`],endAliases:[`:tabend`]}},s={tabItemBlock:[{name:`label`,defaultValue:``},{name:`active`,defaultValue:`false`},{name:`icon`,defaultValue:null}]};function c(e,t){let n=o[t];if(!n)return null;let{start:r,end:i,aliases:a=[],endAliases:s=[]}=n,c=``;if(e.startsWith(r))c=r;else for(let t of a)if(e.startsWith(t)){c=t;break}if(!c)return null;let l=c.length,u=``,d=l,f=l;for(;f<e.length&&e[f]===` `;)f++;if(f<e.length&&e[f]===`{`){let t=e.indexOf(`}`,f);t!==-1&&(u=e.substring(l,t),d=t+1)}let p=1,m=d;for(;m<e.length&&p>0;){let t=e.indexOf(r,m),n=t;for(let t of a){let r=e.indexOf(t,m);r!==-1&&(n===-1||r<n)&&(n=r)}let o=i,c=e.indexOf(i,m);for(let t of s){let n=e.indexOf(t,m);n!==-1&&(c===-1||n<c)&&(c=n,o=t)}if(c===-1)return null;if(n!==-1&&n<c){p++;let i=r;if(n===t)i=r;else for(let t of a)if(e.indexOf(t,m)===n){i=t;break}m=n+i.length;continue}if(--p===0){let t=e.substring(d,c),n=[e.substring(0,c+o.length),u,t];return n.index=0,n.input=e,n}m=c+o.length}return null}var l=(e,t)=>{if(e instanceof RegExp)return e.exec(t);switch(e){case`tabBlock`:case`tabItemBlock`:return c(t,e);default:throw Error(`Unknown element: ${e}`)}},u=(e,t)=>{let n=s[e];if(!n)throw Error(`Unknown element: ${e}`);let r={};n.forEach(e=>{r[e.name]=e.defaultValue}),a.lastIndex=0;let i;for(;(i=a.exec(t))!==null;){let[,e,t]=i;n.some(t=>t.name===e)&&(r[e]=t)}return r};function d(e,t){let{tabsContainerId:a,tabsData:o,className:s,animation:c=`fade`,template:l,enableKeyboardNavigation:u=!0,enableFocusManagement:d=!0,persistSelection:f}=e,p=l||n;if(!o||o.length===0)return`<div class="error-message">No tab content found</div>`;let m=``,h=``,g=``;for(let e of o){let{id:n,tokens:r,props:i}=e,{active:o,icon:s,label:c}=i,l=`input-${n}`,u=`label-${n}`,d=o?`checked`:``,f=o?`true`:`false`,p=s?`<span class="marked-extended-tabs-icon">${s}</span>`:``;m+=`<input type="radio" name="${a}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`,h+=`
+`)}var i=`.marked-extended-tabs-container[data-tabs-runtime="true"]`,a=`.marked-extended-tabs-input`,o=`.marked-extended-tabs-label`,s=(e,t)=>e===`true`?!0:e===`false`?!1:t,c=e=>({enableKeyboardNavigation:s(e.dataset.tabsEnableKeyboardNavigation,!0),enableFocusManagement:s(e.dataset.tabsEnableFocusManagement,!0),persistSelection:s(e.dataset.tabsPersistSelection,!1),storageKey:e.dataset.tabsStorageKey}),l=e=>Array.from(e.querySelectorAll(o)),u=e=>Array.from(e.querySelectorAll(a)),d=e=>{let t=l(e),n=u(e),r=e.querySelector(`${a}:checked`);!r&&n.length>0&&(r=n[0],r.checked=!0);let{enableFocusManagement:i}=c(e);return t.forEach(e=>{let t=r?e.htmlFor===r.id:!1;e.setAttribute(`aria-selected`,t?`true`:`false`),e.classList.toggle(`active`,t),i&&e.setAttribute(`tabindex`,t?`0`:`-1`)}),r},f=(e,t)=>{let{persistSelection:n,storageKey:r}=c(e);if(!(!n||!r))try{window.localStorage.setItem(r,t)}catch{}},p=(e,t)=>{e.dispatchEvent(new CustomEvent(`tab-switched`,{detail:{tabId:t,timestamp:Date.now()},bubbles:!0,cancelable:!0}))},m=e=>{let{persistSelection:t,storageKey:n}=c(e);if(!t||!n)return;let r;try{r=window.localStorage.getItem(n)}catch{return}if(!r)return;let i=`input-${r}`,a=e.querySelector(`#${i}`);a&&(a.checked=!0)},h=(e,t)=>{let n=t.htmlFor;if(!n)return;let r=e.querySelector(`#${n}`);if(!r)return;r.checked=!0,r.dispatchEvent(new Event(`change`,{bubbles:!0}));let{enableFocusManagement:i}=c(e);i&&t.focus()},g=e=>{let t=e.target;if(!x(t)||!t.matches(a))return;let n=t.closest(i);if(!n)return;let r=d(n);if(!r)return;let o=r.id.replace(/^input-/,``);f(n,o),p(n,o)},_=e=>{let t=e.target;if(!S(t)||!t.matches(o))return;let n=t.closest(i);if(!n)return;let{enableKeyboardNavigation:r}=c(n);if(!r)return;let a=l(n),s=a.indexOf(t);if(s===-1||a.length===0)return;let u;switch(e.key){case`ArrowRight`:case`ArrowDown`:u=(s+1)%a.length;break;case`ArrowLeft`:case`ArrowUp`:u=(s-1+a.length)%a.length;break;case`Home`:u=0;break;case`End`:u=a.length-1;break;case`Enter`:case` `:u=s;break;default:return}e.preventDefault();let d=a[u];d&&h(n,d)},v=e=>{let t=e.target;if(!S(t)||!t.matches(o))return;let n=t.closest(i);if(!n)return;let{enableFocusManagement:r}=c(n);r&&l(n).forEach(e=>{e.setAttribute(`tabindex`,e===t?`0`:`-1`)})},y=e=>{m(e),d(e),e.dataset.tabsInitialized=`true`},b=e=>{if(!e||typeof e!=`object`)return!1;let t=e;return typeof t.matches==`function`&&typeof t.querySelectorAll==`function`},x=e=>b(e)&&e.tagName===`INPUT`,S=e=>b(e)&&e.tagName===`LABEL`,C=e=>{b(e)&&e.matches(i)&&y(e),e.querySelectorAll(i).forEach(e=>{y(e)})},w=()=>{document.body&&new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{b(e)&&C(e)})})}).observe(document.body,{childList:!0,subtree:!0})},T=()=>{if(!(typeof window>`u`||typeof document>`u`)){if(window.__markedExtendedTabsRuntimeReady__){window.initMarkedExtendedTabs?.();return}if(window.__markedExtendedTabsRuntimeReady__=!0,document.addEventListener(`change`,g),document.addEventListener(`keydown`,_),document.addEventListener(`focusin`,v),window.initMarkedExtendedTabs=()=>{C(document)},document.readyState===`loading`){document.addEventListener(`DOMContentLoaded`,()=>{window.initMarkedExtendedTabs?.(),w()},{once:!0});return}window.initMarkedExtendedTabs(),w()}},E=/\s*(\w+)="([^"]+)"/g,D={tabBlock:{start:`::::tabs`,end:`::::tabsend`,aliases:[`:tbs`,`:tabs`],endAliases:[`:tbsend`,`:tabsend`]},tabItemBlock:{start:`:::tab`,end:`:::tabend`,aliases:[`:tab`],endAliases:[`:tabend`]}},O={tabItemBlock:[{name:`label`,defaultValue:``},{name:`active`,defaultValue:`false`},{name:`icon`,defaultValue:null}]};function k(e,t){let n=D[t];if(!n)return null;let{start:r,end:i,aliases:a=[],endAliases:o=[]}=n,s=``;if(e.startsWith(r))s=r;else for(let t of a)if(e.startsWith(t)){s=t;break}if(!s)return null;let c=s.length,l=``,u=c,d=c;for(;d<e.length&&e[d]===` `;)d++;if(d<e.length&&e[d]===`{`){let t=e.indexOf(`}`,d);t!==-1&&(l=e.substring(c,t),u=t+1)}let f=1,p=u;for(;p<e.length&&f>0;){let t=e.indexOf(r,p),n=t;for(let t of a){let r=e.indexOf(t,p);r!==-1&&(n===-1||r<n)&&(n=r)}let s=i,c=e.indexOf(i,p);for(let t of o){let n=e.indexOf(t,p);n!==-1&&(c===-1||n<c)&&(c=n,s=t)}if(c===-1)return null;if(n!==-1&&n<c){f++;let i=r;if(n===t)i=r;else for(let t of a)if(e.indexOf(t,p)===n){i=t;break}p=n+i.length;continue}if(--f===0){let t=e.substring(u,c),n=[e.substring(0,c+s.length),l,t];return n.index=0,n.input=e,n}p=c+s.length}return null}var A=(e,t)=>{if(e instanceof RegExp)return e.exec(t);switch(e){case`tabBlock`:case`tabItemBlock`:return k(t,e);default:throw Error(`Unknown element: ${e}`)}},j=(e,t)=>{let n=O[e];if(!n)throw Error(`Unknown element: ${e}`);let r={};n.forEach(e=>{r[e.name]=e.defaultValue}),E.lastIndex=0;let i;for(;(i=E.exec(t))!==null;){let[,e,t]=i;n.some(t=>t.name===e)&&(r[e]=t)}return r};function M(e,t){let{tabsContainerId:i,tabsData:a,className:o,animation:s=`fade`,template:c,enableKeyboardNavigation:l=!0,enableFocusManagement:u=!0,persistSelection:d}=e,f=c||n;if(!a||a.length===0)return`<div class="error-message">No tab content found</div>`;let p=``,m=``,h=``;for(let e of a){let{id:n,tokens:r,props:a}=e,{active:o,icon:s,label:c}=a,l=`input-${n}`,u=`label-${n}`,d=o?`checked`:``,f=o?`true`:`false`,g=s?`<span class="marked-extended-tabs-icon">${s}</span>`:``;p+=`<input type="radio" name="${i}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`,m+=`
       <label for="${l}" id="${u}" class="marked-extended-tabs-label" role="tab" aria-selected="${f}" data-tab-id="${n}" tabindex="${o?`0`:`-1`}">
-        ${p}<span class="tab-label">${c}</span>
-      </label>`;let _=r&&r.length>0?t.parse(r):``;g+=`
+        ${g}<span class="tab-label">${c}</span>
+      </label>`;let _=r&&r.length>0?t.parse(r):``;h+=`
       <div class="marked-extended-tabs-content-pane" id="${n}" role="tabpanel" aria-labelledby="${l}">
         ${_}
-      </div>`}let _=r(a,o,c),v=i(a,o,u,d,f);return p.replace(/{tabsContainerId}/g,a).replace(/{className}/g,s).replace(/{animation}/g,c).replace(/{inputsNav}/g,m).replace(/{navList}/g,h).replace(/{content}/g,g).replace(/{stylesBehavior}/g,_+v)}function f(t){let{animation:n,autoActivate:r,className:i,persistSelection:a,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:d,enableFocusManagement:f}=t,p=`tabItemBlock`;return{name:`tabs`,level:`block`,tokenizer(t){let m=l(`tabBlock`,t);if(!m)return;let[h,,g]=m,_=`tabs-container-${++e.value}`,v=[],y=0,b=g;for(;b&&(b=b.trimStart(),b);){let e=l(p,b);if(!e)break;let[t,n,r]=e,i=u(p,n),a=i.label||`Tab ${y+1}`,o=i.active===`true`,s=this.lexer.blockTokens(r.trim());v.push({type:`tab-item`,raw:t,id:`${_}-tab-${y}`,props:{label:a,active:o,icon:i.icon||void 0},tokens:s}),y++,b=b.substring(t.length)}if(v.length!==0)return r&&!v.some(e=>e.props.active)&&v.length>0&&(v[0].props.active=!0),{type:`tabs`,raw:h,tokens:v,meta:{tabsContainerId:_,className:i,persistSelection:a,animation:n,autoActivate:r,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:d,enableFocusManagement:f}}}}}function p(){return{name:`tabs`,renderer(e){let t=e;return d({...t.meta,tabsData:t.tokens},this.parser)}}}function m(e={}){e.animation&&![`fade`,`slide`,`none`].includes(e.animation)&&(console.warn(`[marked-extended-tabs] Invalid animation value: ${e.animation}. Using default 'fade'.`),e.animation=`fade`),e.onBeforeSwitch&&typeof e.onBeforeSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onBeforeSwitch must be a function`),e.onBeforeSwitch=null),e.onAfterSwitch&&typeof e.onAfterSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onAfterSwitch must be a function`),e.onAfterSwitch=null);let n={...t,...e};return{walkTokens(e){e.type===`tabs`&&n.customizeToken&&typeof n.customizeToken==`function`&&n.customizeToken(e)},extensions:[f(n),p()]}}exports.default=m;
+      </div>`}let g=r(i,a,s),_=[`data-tabs-runtime="true"`,`data-tabs-enable-keyboard-navigation="${l?`true`:`false`}"`,`data-tabs-enable-focus-management="${u?`true`:`false`}"`,`data-tabs-persist-selection="${d?`true`:`false`}"`,`data-tabs-storage-key="marked-extended-tabs-active-${i}"`].join(` `);return f.replace(/{tabsContainerId}/g,i).replace(/{className}/g,o).replace(/{animation}/g,s).replace(/{runtimeAttrs}/g,_).replace(/{inputsNav}/g,p).replace(/{navList}/g,m).replace(/{content}/g,h).replace(/{stylesBehavior}/g,g)}function N(t){let{animation:n,autoActivate:r,className:i,persistSelection:a,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:u}=t,d=`tabItemBlock`;return{name:`tabs`,level:`block`,tokenizer(t){let f=A(`tabBlock`,t);if(!f)return;let[p,,m]=f,h=`tabs-container-${++e.value}`,g=[],_=0,v=m;for(;v&&(v=v.trimStart(),v);){let e=A(d,v);if(!e)break;let[t,n,r]=e,i=j(d,n),a=i.label||`Tab ${_+1}`,o=i.active===`true`,s=this.lexer.blockTokens(r.trim());g.push({type:`tab-item`,raw:t,id:`${h}-tab-${_}`,props:{label:a,active:o,icon:i.icon||void 0},tokens:s}),_++,v=v.substring(t.length)}if(g.length!==0)return r&&!g.some(e=>e.props.active)&&g.length>0&&(g[0].props.active=!0),{type:`tabs`,raw:p,tokens:g,meta:{tabsContainerId:h,className:i,persistSelection:a,animation:n,autoActivate:r,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:u}}}}}function P(){return{name:`tabs`,renderer(e){let t=e;return M({...t.meta,tabsData:t.tokens},this.parser)}}}function F(e={}){e.animation&&![`fade`,`slide`,`none`].includes(e.animation)&&(console.warn(`[marked-extended-tabs] Invalid animation value: ${e.animation}. Using default 'fade'.`),e.animation=`fade`),e.onBeforeSwitch&&typeof e.onBeforeSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onBeforeSwitch must be a function`),e.onBeforeSwitch=null),e.onAfterSwitch&&typeof e.onAfterSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onAfterSwitch must be a function`),e.onAfterSwitch=null);let n={...t,...e};return T(),{walkTokens(e){e.type===`tabs`&&n.customizeToken&&typeof n.customizeToken==`function`&&n.customizeToken(e)},extensions:[N(n),P()]}}exports.default=F;

package/dist/index.esm.js

@@ -10,7 +10,7 @@ var e = { value: 0 }, t = {
 	onAfterSwitch: null,
 	enableKeyboardNavigation: !0,
 	enableFocusManagement: !0
-}, n = "\n  <div id=\"{tabsContainerId}\" class=\"{className}\" data-animation=\"{animation}\">\n    {inputsNav}\n    <div class=\"marked-extended-tabs-nav\" role=\"tablist\">{navList}</div>\n    <div class=\"marked-extended-tabs-content\">{content}</div>\n    {stylesBehavior}\n  </div>\n";
+}, n = "\n  <div id=\"{tabsContainerId}\" class=\"{className}\" data-animation=\"{animation}\" {runtimeAttrs}>\n    {inputsNav}\n    <div class=\"marked-extended-tabs-nav\" role=\"tablist\">{navList}</div>\n    <div class=\"marked-extended-tabs-content\">{content}</div>\n    {stylesBehavior}\n  </div>\n";
 function r(e, t, n) {
 	let r = [];
 	return r.push("<style>"), r.push("  /* CSS-only tab selection - show selected tab */"), t.forEach((t) => {
@@ -32,236 +32,145 @@ function r(e, t, n) {
 `);
 	}), n === "fade" && r.push("@keyframes tab-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}"), n === "slide" && r.push("@keyframes tab-slide-in {\n  from { transform: translateY(10px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}"), r.push("</style>"), r.join("\n");
 }
-function i(e, t, n = !0, r = !0, i = !1) {
-	return `<script>
-/* eslint-disable no-unused-vars */
-(function() {
-  const containerId = '${e}';
-  const storageKey = '${`marked-extended-tabs-active-${e}`}';
-  // @ts-ignore - tabIds is used in the script template
-  const tabIds = ${JSON.stringify(t.map((e) => e.id))};
-  const enableKeyboardNav = ${n};
-  const enableFocusManagement = ${r};
-  const persistSelection = ${i};
-
-  // Function to update aria-selected state
-  function updateAriaSelected(container, activeInputId) {
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-    labels.forEach((label) => {
-      const forAttr = label.getAttribute('for');
-      const isActive = forAttr === activeInputId;
-      
-      // Only update if value changes to minimize DOM operations
-      if (label.getAttribute('aria-selected') !== String(isActive)) {
-        label.setAttribute('aria-selected', isActive ? 'true' : 'false');
-        if (isActive) {
-          label.classList.add('active');
-        } else {
-          label.classList.remove('active');
-        }
-      }
-      
-      if (enableFocusManagement) {
-        label.setAttribute('tabindex', isActive ? '0' : '-1');
-      }
-    });
-  }
-
-  // Helper to handle tab changes (events and persistence)
-  function handleTabChange(container, actualTabId) {
-    if (persistSelection) {
-      localStorage.setItem(storageKey, actualTabId);
-    }
-
-    container.dispatchEvent(new CustomEvent('tab-switched', {
-      detail: {
-        tabId: actualTabId,
-        timestamp: Date.now(),
-      },
-      bubbles: true,
-      cancelable: true,
-    }));
-  }
-
-  // Wait for DOM to be interactive or immediately if script is inline
-  function initializeTabs() {
-    const container = document.getElementById(containerId);
-    if (!container) {
-      console.warn('[marked-extended-tabs] Container #' + containerId + ' not found');
-      return;
-    }
-
-    const inputs = container.querySelectorAll('input[type="radio"]');
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-
-    if (inputs.length === 0 || labels.length === 0) {
-      console.warn('[marked-extended-tabs] No tabs found in container');
-      return;
-    }
-
-    // Update aria-selected on initial load
-    const checkedInput = container.querySelector('input[type="radio"]:checked');
-    if (checkedInput) {
-      updateAriaSelected(container, checkedInput.id);
-    }
-
-    // Restore persisted selection if available
-    if (persistSelection) {
-      const savedTabId = localStorage.getItem(storageKey);
-      if (savedTabId) {
-        const savedInput = container.querySelector('#input-' + savedTabId);
-        if (savedInput) {
-          setTimeout(() => {
-            savedInput.checked = true;
-            updateAriaSelected(container, savedInput.id);
-            savedInput.dispatchEvent(new Event('change', { bubbles: true }));
-          }, 0);
-        }
-      }
-    }
-
-    // Handle tab switching via label click events (this is what fires when users click tabs)
-    labels.forEach((label) => {
-      label.addEventListener('click', (e) => {
-        const forAttr = label.getAttribute('for');
-        if (!forAttr) return;
-
-        const input = document.getElementById(forAttr);
-        if (!input) return;
-
-        // Set the radio input as checked
-        input.checked = true;
-
-        // Immediately update aria-selected
-        updateAriaSelected(container, forAttr);
-
-        const actualTabId = forAttr.replace('input-', '');
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Also handle change events for programmatic updates
-    inputs.forEach((input) => {
-      input.addEventListener('change', (e) => {
-        const inputId = e.target.id;
-        const actualTabId = inputId.replace('input-', '');
-
-        // Update aria-selected
-        updateAriaSelected(container, inputId);
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Keyboard navigation
-    if (enableKeyboardNav) {
-      labels.forEach((label, index) => {
-        label.addEventListener('keydown', (e) => {
-          let targetIndex = index;
-          
-          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            targetIndex = (index + 1) % labels.length;
-          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            targetIndex = (index - 1 + labels.length) % labels.length;
-          } else if (e.key === 'Home') {
-            e.preventDefault();
-            targetIndex = 0;
-          } else if (e.key === 'End') {
-            e.preventDefault();
-            targetIndex = labels.length - 1;
-          } else {
-            return;
-          }
-
-          const targetLabel = labels[targetIndex];
-          if (targetLabel) {
-            const forAttr = targetLabel.getAttribute('for');
-            if (forAttr) {
-              const input = document.getElementById(forAttr);
-              if (input) {
-                input.checked = true;
-                updateAriaSelected(container, forAttr);
-                input.dispatchEvent(new Event('change', { bubbles: true }));
-                
-                // Focus the label for better UX
-                setTimeout(() => {
-                  targetLabel.focus();
-                }, 0);
-              }
-            }
-          }
-        });
-
-        // Make labels keyboard accessible
-        if (enableFocusManagement) {
-          label.addEventListener('keypress', (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-              e.preventDefault();
-              const forAttr = label.getAttribute('for');
-              if (forAttr) {
-                const input = document.getElementById(forAttr);
-                if (input) {
-                  input.checked = true;
-                  updateAriaSelected(container, forAttr);
-                  input.dispatchEvent(new Event('change', { bubbles: true }));
-                }
-              }
-            }
-          });
-        }
-      });
-    }
-
-    // Enhanced focus management
-    if (enableFocusManagement) {
-      // Set initial tab index for first active or first tab
-      const activeLabel = container.querySelector('.marked-extended-tabs-label[aria-selected="true"]');
-      if (activeLabel) {
-        activeLabel.setAttribute('tabindex', '0');
-      } else if (labels.length > 0) {
-        labels[0].setAttribute('tabindex', '0');
-      }
-
-      // Update tabindex when labels receive focus
-      labels.forEach((label) => {
-        label.addEventListener('focus', () => {
-          labels.forEach((l) => l.setAttribute('tabindex', '-1'));
-          label.setAttribute('tabindex', '0');
-        });
-      });
-    }
-
-    // Watch for radio input changes to update aria-selected
-    // This is crucial for CSS to work with [aria-selected="true"]
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'checked') {
-          const checkedRadio = container.querySelector('input[type="radio"]:checked');
-          if (checkedRadio) {
-            updateAriaSelected(container, checkedRadio.id);
-          }
-        }
-      });
-    });
-
-    // Observe all radio inputs for checked attribute changes
-    inputs.forEach((input) => {
-      observer.observe(input, { attributes: true, attributeFilter: ['checked'] });
-    });
-  }
-
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeTabs);
-  } else {
-    initializeTabs();
-  }
-})();<\/script>`;
-}
 //#endregion
-//#region src/utils/props.ts
-var a = /\s*(\w+)="([^"]+)"/g, o = {
+//#region src/utils/runtime.ts
+var i = ".marked-extended-tabs-container[data-tabs-runtime=\"true\"]", a = ".marked-extended-tabs-input", o = ".marked-extended-tabs-label", s = (e, t) => e === "true" ? !0 : e === "false" ? !1 : t, c = (e) => ({
+	enableKeyboardNavigation: s(e.dataset.tabsEnableKeyboardNavigation, !0),
+	enableFocusManagement: s(e.dataset.tabsEnableFocusManagement, !0),
+	persistSelection: s(e.dataset.tabsPersistSelection, !1),
+	storageKey: e.dataset.tabsStorageKey
+}), l = (e) => Array.from(e.querySelectorAll(o)), u = (e) => Array.from(e.querySelectorAll(a)), d = (e) => {
+	let t = l(e), n = u(e), r = e.querySelector(`${a}:checked`);
+	!r && n.length > 0 && (r = n[0], r.checked = !0);
+	let { enableFocusManagement: i } = c(e);
+	return t.forEach((e) => {
+		let t = r ? e.htmlFor === r.id : !1;
+		e.setAttribute("aria-selected", t ? "true" : "false"), e.classList.toggle("active", t), i && e.setAttribute("tabindex", t ? "0" : "-1");
+	}), r;
+}, f = (e, t) => {
+	let { persistSelection: n, storageKey: r } = c(e);
+	if (!(!n || !r)) try {
+		window.localStorage.setItem(r, t);
+	} catch {}
+}, p = (e, t) => {
+	e.dispatchEvent(new CustomEvent("tab-switched", {
+		detail: {
+			tabId: t,
+			timestamp: Date.now()
+		},
+		bubbles: !0,
+		cancelable: !0
+	}));
+}, m = (e) => {
+	let { persistSelection: t, storageKey: n } = c(e);
+	if (!t || !n) return;
+	let r;
+	try {
+		r = window.localStorage.getItem(n);
+	} catch {
+		return;
+	}
+	if (!r) return;
+	let i = `input-${r}`, a = e.querySelector(`#${i}`);
+	a && (a.checked = !0);
+}, h = (e, t) => {
+	let n = t.htmlFor;
+	if (!n) return;
+	let r = e.querySelector(`#${n}`);
+	if (!r) return;
+	r.checked = !0, r.dispatchEvent(new Event("change", { bubbles: !0 }));
+	let { enableFocusManagement: i } = c(e);
+	i && t.focus();
+}, g = (e) => {
+	let t = e.target;
+	if (!x(t) || !t.matches(a)) return;
+	let n = t.closest(i);
+	if (!n) return;
+	let r = d(n);
+	if (!r) return;
+	let o = r.id.replace(/^input-/, "");
+	f(n, o), p(n, o);
+}, _ = (e) => {
+	let t = e.target;
+	if (!S(t) || !t.matches(o)) return;
+	let n = t.closest(i);
+	if (!n) return;
+	let { enableKeyboardNavigation: r } = c(n);
+	if (!r) return;
+	let a = l(n), s = a.indexOf(t);
+	if (s === -1 || a.length === 0) return;
+	let u;
+	switch (e.key) {
+		case "ArrowRight":
+		case "ArrowDown":
+			u = (s + 1) % a.length;
+			break;
+		case "ArrowLeft":
+		case "ArrowUp":
+			u = (s - 1 + a.length) % a.length;
+			break;
+		case "Home":
+			u = 0;
+			break;
+		case "End":
+			u = a.length - 1;
+			break;
+		case "Enter":
+		case " ":
+			u = s;
+			break;
+		default: return;
+	}
+	e.preventDefault();
+	let d = a[u];
+	d && h(n, d);
+}, v = (e) => {
+	let t = e.target;
+	if (!S(t) || !t.matches(o)) return;
+	let n = t.closest(i);
+	if (!n) return;
+	let { enableFocusManagement: r } = c(n);
+	r && l(n).forEach((e) => {
+		e.setAttribute("tabindex", e === t ? "0" : "-1");
+	});
+}, y = (e) => {
+	m(e), d(e), e.dataset.tabsInitialized = "true";
+}, b = (e) => {
+	if (!e || typeof e != "object") return !1;
+	let t = e;
+	return typeof t.matches == "function" && typeof t.querySelectorAll == "function";
+}, x = (e) => b(e) && e.tagName === "INPUT", S = (e) => b(e) && e.tagName === "LABEL", C = (e) => {
+	b(e) && e.matches(i) && y(e), e.querySelectorAll(i).forEach((e) => {
+		y(e);
+	});
+}, w = () => {
+	document.body && new MutationObserver((e) => {
+		e.forEach((e) => {
+			e.addedNodes.forEach((e) => {
+				b(e) && C(e);
+			});
+		});
+	}).observe(document.body, {
+		childList: !0,
+		subtree: !0
+	});
+}, T = () => {
+	if (!(typeof window > "u" || typeof document > "u")) {
+		if (window.__markedExtendedTabsRuntimeReady__) {
+			window.initMarkedExtendedTabs?.();
+			return;
+		}
+		if (window.__markedExtendedTabsRuntimeReady__ = !0, document.addEventListener("change", g), document.addEventListener("keydown", _), document.addEventListener("focusin", v), window.initMarkedExtendedTabs = () => {
+			C(document);
+		}, document.readyState === "loading") {
+			document.addEventListener("DOMContentLoaded", () => {
+				window.initMarkedExtendedTabs?.(), w();
+			}, { once: !0 });
+			return;
+		}
+		window.initMarkedExtendedTabs(), w();
+	}
+}, E = /\s*(\w+)="([^"]+)"/g, D = {
 	tabBlock: {
 		start: "::::tabs",
 		end: "::::tabsend",
@@ -274,7 +183,7 @@ var a = /\s*(\w+)="([^"]+)"/g, o = {
 		aliases: [":tab"],
 		endAliases: [":tabend"]
 	}
-}, s = { tabItemBlock: [
+}, O = { tabItemBlock: [
 	{
 		name: "label",
 		defaultValue: ""
@@ -288,74 +197,74 @@ var a = /\s*(\w+)="([^"]+)"/g, o = {
 		defaultValue: null
 	}
 ] };
-function c(e, t) {
-	let n = o[t];
+function k(e, t) {
+	let n = D[t];
 	if (!n) return null;
-	let { start: r, end: i, aliases: a = [], endAliases: s = [] } = n, c = "";
-	if (e.startsWith(r)) c = r;
+	let { start: r, end: i, aliases: a = [], endAliases: o = [] } = n, s = "";
+	if (e.startsWith(r)) s = r;
 	else for (let t of a) if (e.startsWith(t)) {
-		c = t;
+		s = t;
 		break;
 	}
-	if (!c) return null;
-	let l = c.length, u = "", d = l, f = l;
-	for (; f < e.length && e[f] === " ";) f++;
-	if (f < e.length && e[f] === "{") {
-		let t = e.indexOf("}", f);
-		t !== -1 && (u = e.substring(l, t), d = t + 1);
+	if (!s) return null;
+	let c = s.length, l = "", u = c, d = c;
+	for (; d < e.length && e[d] === " ";) d++;
+	if (d < e.length && e[d] === "{") {
+		let t = e.indexOf("}", d);
+		t !== -1 && (l = e.substring(c, t), u = t + 1);
 	}
-	let p = 1, m = d;
-	for (; m < e.length && p > 0;) {
-		let t = e.indexOf(r, m), n = t;
+	let f = 1, p = u;
+	for (; p < e.length && f > 0;) {
+		let t = e.indexOf(r, p), n = t;
 		for (let t of a) {
-			let r = e.indexOf(t, m);
+			let r = e.indexOf(t, p);
 			r !== -1 && (n === -1 || r < n) && (n = r);
 		}
-		let o = i, c = e.indexOf(i, m);
-		for (let t of s) {
-			let n = e.indexOf(t, m);
-			n !== -1 && (c === -1 || n < c) && (c = n, o = t);
+		let s = i, c = e.indexOf(i, p);
+		for (let t of o) {
+			let n = e.indexOf(t, p);
+			n !== -1 && (c === -1 || n < c) && (c = n, s = t);
 		}
 		if (c === -1) return null;
 		if (n !== -1 && n < c) {
-			p++;
+			f++;
 			let i = r;
 			if (n === t) i = r;
-			else for (let t of a) if (e.indexOf(t, m) === n) {
+			else for (let t of a) if (e.indexOf(t, p) === n) {
 				i = t;
 				break;
 			}
-			m = n + i.length;
+			p = n + i.length;
 			continue;
 		}
-		if (--p === 0) {
-			let t = e.substring(d, c), n = [
-				e.substring(0, c + o.length),
-				u,
+		if (--f === 0) {
+			let t = e.substring(u, c), n = [
+				e.substring(0, c + s.length),
+				l,
 				t
 			];
 			return n.index = 0, n.input = e, n;
 		}
-		m = c + o.length;
+		p = c + s.length;
 	}
 	return null;
 }
-var l = (e, t) => {
+var A = (e, t) => {
 	if (e instanceof RegExp) return e.exec(t);
 	switch (e) {
 		case "tabBlock":
-		case "tabItemBlock": return c(t, e);
+		case "tabItemBlock": return k(t, e);
 		default: throw Error(`Unknown element: ${e}`);
 	}
-}, u = (e, t) => {
-	let n = s[e];
+}, j = (e, t) => {
+	let n = O[e];
 	if (!n) throw Error(`Unknown element: ${e}`);
 	let r = {};
 	n.forEach((e) => {
 		r[e.name] = e.defaultValue;
-	}), a.lastIndex = 0;
+	}), E.lastIndex = 0;
 	let i;
-	for (; (i = a.exec(t)) !== null;) {
+	for (; (i = E.exec(t)) !== null;) {
 		let [, e, t] = i;
 		n.some((t) => t.name === e) && (r[e] = t);
 	}
@@ -363,58 +272,64 @@ var l = (e, t) => {
 };
 //#endregion
 //#region src/renderer.ts
-function d(e, t) {
-	let { tabsContainerId: a, tabsData: o, className: s, animation: c = "fade", template: l, enableKeyboardNavigation: u = !0, enableFocusManagement: d = !0, persistSelection: f } = e, p = l || n;
-	if (!o || o.length === 0) return "<div class=\"error-message\">No tab content found</div>";
-	let m = "", h = "", g = "";
-	for (let e of o) {
-		let { id: n, tokens: r, props: i } = e, { active: o, icon: s, label: c } = i, l = `input-${n}`, u = `label-${n}`, d = o ? "checked" : "", f = o ? "true" : "false", p = s ? `<span class="marked-extended-tabs-icon">${s}</span>` : "";
-		m += `<input type="radio" name="${a}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`, h += `
+function M(e, t) {
+	let { tabsContainerId: i, tabsData: a, className: o, animation: s = "fade", template: c, enableKeyboardNavigation: l = !0, enableFocusManagement: u = !0, persistSelection: d } = e, f = c || n;
+	if (!a || a.length === 0) return "<div class=\"error-message\">No tab content found</div>";
+	let p = "", m = "", h = "";
+	for (let e of a) {
+		let { id: n, tokens: r, props: a } = e, { active: o, icon: s, label: c } = a, l = `input-${n}`, u = `label-${n}`, d = o ? "checked" : "", f = o ? "true" : "false", g = s ? `<span class="marked-extended-tabs-icon">${s}</span>` : "";
+		p += `<input type="radio" name="${i}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`, m += `
       <label for="${l}" id="${u}" class="marked-extended-tabs-label" role="tab" aria-selected="${f}" data-tab-id="${n}" tabindex="${o ? "0" : "-1"}">
-        ${p}<span class="tab-label">${c}</span>
+        ${g}<span class="tab-label">${c}</span>
       </label>`;
 		let _ = r && r.length > 0 ? t.parse(r) : "";
-		g += `
+		h += `
       <div class="marked-extended-tabs-content-pane" id="${n}" role="tabpanel" aria-labelledby="${l}">
         ${_}
       </div>`;
 	}
-	let _ = r(a, o, c), v = i(a, o, u, d, f);
-	return p.replace(/{tabsContainerId}/g, a).replace(/{className}/g, s).replace(/{animation}/g, c).replace(/{inputsNav}/g, m).replace(/{navList}/g, h).replace(/{content}/g, g).replace(/{stylesBehavior}/g, _ + v);
+	let g = r(i, a, s), _ = [
+		"data-tabs-runtime=\"true\"",
+		`data-tabs-enable-keyboard-navigation="${l ? "true" : "false"}"`,
+		`data-tabs-enable-focus-management="${u ? "true" : "false"}"`,
+		`data-tabs-persist-selection="${d ? "true" : "false"}"`,
+		`data-tabs-storage-key="marked-extended-tabs-active-${i}"`
+	].join(" ");
+	return f.replace(/{tabsContainerId}/g, i).replace(/{className}/g, o).replace(/{animation}/g, s).replace(/{runtimeAttrs}/g, _).replace(/{inputsNav}/g, p).replace(/{navList}/g, m).replace(/{content}/g, h).replace(/{stylesBehavior}/g, g);
 }
 //#endregion
 //#region src/tokenizer.ts
-function f(t) {
-	let { animation: n, autoActivate: r, className: i, persistSelection: a, template: o, onBeforeSwitch: s, onAfterSwitch: c, enableKeyboardNavigation: d, enableFocusManagement: f } = t, p = "tabItemBlock";
+function N(t) {
+	let { animation: n, autoActivate: r, className: i, persistSelection: a, template: o, onBeforeSwitch: s, onAfterSwitch: c, enableKeyboardNavigation: l, enableFocusManagement: u } = t, d = "tabItemBlock";
 	return {
 		name: "tabs",
 		level: "block",
 		tokenizer(t) {
-			let m = l("tabBlock", t);
-			if (!m) return;
-			let [h, , g] = m, _ = `tabs-container-${++e.value}`, v = [], y = 0, b = g;
-			for (; b && (b = b.trimStart(), b);) {
-				let e = l(p, b);
+			let f = A("tabBlock", t);
+			if (!f) return;
+			let [p, , m] = f, h = `tabs-container-${++e.value}`, g = [], _ = 0, v = m;
+			for (; v && (v = v.trimStart(), v);) {
+				let e = A(d, v);
 				if (!e) break;
-				let [t, n, r] = e, i = u(p, n), a = i.label || `Tab ${y + 1}`, o = i.active === "true", s = this.lexer.blockTokens(r.trim());
-				v.push({
+				let [t, n, r] = e, i = j(d, n), a = i.label || `Tab ${_ + 1}`, o = i.active === "true", s = this.lexer.blockTokens(r.trim());
+				g.push({
 					type: "tab-item",
 					raw: t,
-					id: `${_}-tab-${y}`,
+					id: `${h}-tab-${_}`,
 					props: {
 						label: a,
 						active: o,
 						icon: i.icon || void 0
 					},
 					tokens: s
-				}), y++, b = b.substring(t.length);
+				}), _++, v = v.substring(t.length);
 			}
-			if (v.length !== 0) return r && !v.some((e) => e.props.active) && v.length > 0 && (v[0].props.active = !0), {
+			if (g.length !== 0) return r && !g.some((e) => e.props.active) && g.length > 0 && (g[0].props.active = !0), {
 				type: "tabs",
-				raw: h,
-				tokens: v,
+				raw: p,
+				tokens: g,
 				meta: {
-					tabsContainerId: _,
+					tabsContainerId: h,
 					className: i,
 					persistSelection: a,
 					animation: n,
@@ -422,19 +337,19 @@ function f(t) {
 					template: o,
 					onBeforeSwitch: s,
 					onAfterSwitch: c,
-					enableKeyboardNavigation: d,
-					enableFocusManagement: f
+					enableKeyboardNavigation: l,
+					enableFocusManagement: u
 				}
 			};
 		}
 	};
 }
-function p() {
+function P() {
 	return {
 		name: "tabs",
 		renderer(e) {
 			let t = e;
-			return d({
+			return M({
 				...t.meta,
 				tabsData: t.tokens
 			}, this.parser);
@@ -443,7 +358,7 @@ function p() {
 }
 //#endregion
 //#region src/index.ts
-function m(e = {}) {
+function F(e = {}) {
 	e.animation && ![
 		"fade",
 		"slide",
@@ -453,12 +368,12 @@ function m(e = {}) {
 		...t,
 		...e
 	};
-	return {
+	return T(), {
 		walkTokens(e) {
 			e.type === "tabs" && n.customizeToken && typeof n.customizeToken == "function" && n.customizeToken(e);
 		},
-		extensions: [f(n), p()]
+		extensions: [N(n), P()]
 	};
 }
 //#endregion
-export { m as default };
+export { F as default };

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.markedExtendedTabs={}))})(this,function(e){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var t={value:0},n={className:`marked-extended-tabs-container`,persistSelection:!1,animation:`fade`,autoActivate:!0,template:null,customizeToken:null,onBeforeSwitch:null,onAfterSwitch:null,enableKeyboardNavigation:!0,enableFocusManagement:!0},r=`
-  <div id="{tabsContainerId}" class="{className}" data-animation="{animation}">
+  <div id="{tabsContainerId}" class="{className}" data-animation="{animation}" {runtimeAttrs}>
     {inputsNav}
     <div class="marked-extended-tabs-nav" role="tablist">{navList}</div>
     <div class="marked-extended-tabs-content">{content}</div>
@@ -26,234 +26,10 @@
   from { transform: translateY(10px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
 }`),r.push(`</style>`),r.join(`
-`)}function a(e,t,n=!0,r=!0,i=!1){return`<script>
-/* eslint-disable no-unused-vars */
-(function() {
-  const containerId = '${e}';
-  const storageKey = '${`marked-extended-tabs-active-${e}`}';
-  // @ts-ignore - tabIds is used in the script template
-  const tabIds = ${JSON.stringify(t.map(e=>e.id))};
-  const enableKeyboardNav = ${n};
-  const enableFocusManagement = ${r};
-  const persistSelection = ${i};
-
-  // Function to update aria-selected state
-  function updateAriaSelected(container, activeInputId) {
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-    labels.forEach((label) => {
-      const forAttr = label.getAttribute('for');
-      const isActive = forAttr === activeInputId;
-      
-      // Only update if value changes to minimize DOM operations
-      if (label.getAttribute('aria-selected') !== String(isActive)) {
-        label.setAttribute('aria-selected', isActive ? 'true' : 'false');
-        if (isActive) {
-          label.classList.add('active');
-        } else {
-          label.classList.remove('active');
-        }
-      }
-      
-      if (enableFocusManagement) {
-        label.setAttribute('tabindex', isActive ? '0' : '-1');
-      }
-    });
-  }
-
-  // Helper to handle tab changes (events and persistence)
-  function handleTabChange(container, actualTabId) {
-    if (persistSelection) {
-      localStorage.setItem(storageKey, actualTabId);
-    }
-
-    container.dispatchEvent(new CustomEvent('tab-switched', {
-      detail: {
-        tabId: actualTabId,
-        timestamp: Date.now(),
-      },
-      bubbles: true,
-      cancelable: true,
-    }));
-  }
-
-  // Wait for DOM to be interactive or immediately if script is inline
-  function initializeTabs() {
-    const container = document.getElementById(containerId);
-    if (!container) {
-      console.warn('[marked-extended-tabs] Container #' + containerId + ' not found');
-      return;
-    }
-
-    const inputs = container.querySelectorAll('input[type="radio"]');
-    const labels = container.querySelectorAll('.marked-extended-tabs-label');
-
-    if (inputs.length === 0 || labels.length === 0) {
-      console.warn('[marked-extended-tabs] No tabs found in container');
-      return;
-    }
-
-    // Update aria-selected on initial load
-    const checkedInput = container.querySelector('input[type="radio"]:checked');
-    if (checkedInput) {
-      updateAriaSelected(container, checkedInput.id);
-    }
-
-    // Restore persisted selection if available
-    if (persistSelection) {
-      const savedTabId = localStorage.getItem(storageKey);
-      if (savedTabId) {
-        const savedInput = container.querySelector('#input-' + savedTabId);
-        if (savedInput) {
-          setTimeout(() => {
-            savedInput.checked = true;
-            updateAriaSelected(container, savedInput.id);
-            savedInput.dispatchEvent(new Event('change', { bubbles: true }));
-          }, 0);
-        }
-      }
-    }
-
-    // Handle tab switching via label click events (this is what fires when users click tabs)
-    labels.forEach((label) => {
-      label.addEventListener('click', (e) => {
-        const forAttr = label.getAttribute('for');
-        if (!forAttr) return;
-
-        const input = document.getElementById(forAttr);
-        if (!input) return;
-
-        // Set the radio input as checked
-        input.checked = true;
-
-        // Immediately update aria-selected
-        updateAriaSelected(container, forAttr);
-
-        const actualTabId = forAttr.replace('input-', '');
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Also handle change events for programmatic updates
-    inputs.forEach((input) => {
-      input.addEventListener('change', (e) => {
-        const inputId = e.target.id;
-        const actualTabId = inputId.replace('input-', '');
-
-        // Update aria-selected
-        updateAriaSelected(container, inputId);
-        handleTabChange(container, actualTabId);
-      });
-    });
-
-    // Keyboard navigation
-    if (enableKeyboardNav) {
-      labels.forEach((label, index) => {
-        label.addEventListener('keydown', (e) => {
-          let targetIndex = index;
-          
-          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            targetIndex = (index + 1) % labels.length;
-          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            targetIndex = (index - 1 + labels.length) % labels.length;
-          } else if (e.key === 'Home') {
-            e.preventDefault();
-            targetIndex = 0;
-          } else if (e.key === 'End') {
-            e.preventDefault();
-            targetIndex = labels.length - 1;
-          } else {
-            return;
-          }
-
-          const targetLabel = labels[targetIndex];
-          if (targetLabel) {
-            const forAttr = targetLabel.getAttribute('for');
-            if (forAttr) {
-              const input = document.getElementById(forAttr);
-              if (input) {
-                input.checked = true;
-                updateAriaSelected(container, forAttr);
-                input.dispatchEvent(new Event('change', { bubbles: true }));
-                
-                // Focus the label for better UX
-                setTimeout(() => {
-                  targetLabel.focus();
-                }, 0);
-              }
-            }
-          }
-        });
-
-        // Make labels keyboard accessible
-        if (enableFocusManagement) {
-          label.addEventListener('keypress', (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-              e.preventDefault();
-              const forAttr = label.getAttribute('for');
-              if (forAttr) {
-                const input = document.getElementById(forAttr);
-                if (input) {
-                  input.checked = true;
-                  updateAriaSelected(container, forAttr);
-                  input.dispatchEvent(new Event('change', { bubbles: true }));
-                }
-              }
-            }
-          });
-        }
-      });
-    }
-
-    // Enhanced focus management
-    if (enableFocusManagement) {
-      // Set initial tab index for first active or first tab
-      const activeLabel = container.querySelector('.marked-extended-tabs-label[aria-selected="true"]');
-      if (activeLabel) {
-        activeLabel.setAttribute('tabindex', '0');
-      } else if (labels.length > 0) {
-        labels[0].setAttribute('tabindex', '0');
-      }
-
-      // Update tabindex when labels receive focus
-      labels.forEach((label) => {
-        label.addEventListener('focus', () => {
-          labels.forEach((l) => l.setAttribute('tabindex', '-1'));
-          label.setAttribute('tabindex', '0');
-        });
-      });
-    }
-
-    // Watch for radio input changes to update aria-selected
-    // This is crucial for CSS to work with [aria-selected="true"]
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'checked') {
-          const checkedRadio = container.querySelector('input[type="radio"]:checked');
-          if (checkedRadio) {
-            updateAriaSelected(container, checkedRadio.id);
-          }
-        }
-      });
-    });
-
-    // Observe all radio inputs for checked attribute changes
-    inputs.forEach((input) => {
-      observer.observe(input, { attributes: true, attributeFilter: ['checked'] });
-    });
-  }
-
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeTabs);
-  } else {
-    initializeTabs();
-  }
-})();<\/script>`}var o=/\s*(\w+)="([^"]+)"/g,s={tabBlock:{start:`::::tabs`,end:`::::tabsend`,aliases:[`:tbs`,`:tabs`],endAliases:[`:tbsend`,`:tabsend`]},tabItemBlock:{start:`:::tab`,end:`:::tabend`,aliases:[`:tab`],endAliases:[`:tabend`]}},c={tabItemBlock:[{name:`label`,defaultValue:``},{name:`active`,defaultValue:`false`},{name:`icon`,defaultValue:null}]};function l(e,t){let n=s[t];if(!n)return null;let{start:r,end:i,aliases:a=[],endAliases:o=[]}=n,c=``;if(e.startsWith(r))c=r;else for(let t of a)if(e.startsWith(t)){c=t;break}if(!c)return null;let l=c.length,u=``,d=l,f=l;for(;f<e.length&&e[f]===` `;)f++;if(f<e.length&&e[f]===`{`){let t=e.indexOf(`}`,f);t!==-1&&(u=e.substring(l,t),d=t+1)}let p=1,m=d;for(;m<e.length&&p>0;){let t=e.indexOf(r,m),n=t;for(let t of a){let r=e.indexOf(t,m);r!==-1&&(n===-1||r<n)&&(n=r)}let s=i,c=e.indexOf(i,m);for(let t of o){let n=e.indexOf(t,m);n!==-1&&(c===-1||n<c)&&(c=n,s=t)}if(c===-1)return null;if(n!==-1&&n<c){p++;let i=r;if(n===t)i=r;else for(let t of a)if(e.indexOf(t,m)===n){i=t;break}m=n+i.length;continue}if(--p===0){let t=e.substring(d,c),n=[e.substring(0,c+s.length),u,t];return n.index=0,n.input=e,n}m=c+s.length}return null}var u=(e,t)=>{if(e instanceof RegExp)return e.exec(t);switch(e){case`tabBlock`:case`tabItemBlock`:return l(t,e);default:throw Error(`Unknown element: ${e}`)}},d=(e,t)=>{let n=c[e];if(!n)throw Error(`Unknown element: ${e}`);let r={};n.forEach(e=>{r[e.name]=e.defaultValue}),o.lastIndex=0;let i;for(;(i=o.exec(t))!==null;){let[,e,t]=i;n.some(t=>t.name===e)&&(r[e]=t)}return r};function f(e,t){let{tabsContainerId:n,tabsData:o,className:s,animation:c=`fade`,template:l,enableKeyboardNavigation:u=!0,enableFocusManagement:d=!0,persistSelection:f}=e,p=l||r;if(!o||o.length===0)return`<div class="error-message">No tab content found</div>`;let m=``,h=``,g=``;for(let e of o){let{id:r,tokens:i,props:a}=e,{active:o,icon:s,label:c}=a,l=`input-${r}`,u=`label-${r}`,d=o?`checked`:``,f=o?`true`:`false`,p=s?`<span class="marked-extended-tabs-icon">${s}</span>`:``;m+=`<input type="radio" name="${n}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`,h+=`
+`)}var a=`.marked-extended-tabs-container[data-tabs-runtime="true"]`,o=`.marked-extended-tabs-input`,s=`.marked-extended-tabs-label`,c=(e,t)=>e===`true`?!0:e===`false`?!1:t,l=e=>({enableKeyboardNavigation:c(e.dataset.tabsEnableKeyboardNavigation,!0),enableFocusManagement:c(e.dataset.tabsEnableFocusManagement,!0),persistSelection:c(e.dataset.tabsPersistSelection,!1),storageKey:e.dataset.tabsStorageKey}),u=e=>Array.from(e.querySelectorAll(s)),d=e=>Array.from(e.querySelectorAll(o)),f=e=>{let t=u(e),n=d(e),r=e.querySelector(`${o}:checked`);!r&&n.length>0&&(r=n[0],r.checked=!0);let{enableFocusManagement:i}=l(e);return t.forEach(e=>{let t=r?e.htmlFor===r.id:!1;e.setAttribute(`aria-selected`,t?`true`:`false`),e.classList.toggle(`active`,t),i&&e.setAttribute(`tabindex`,t?`0`:`-1`)}),r},p=(e,t)=>{let{persistSelection:n,storageKey:r}=l(e);if(!(!n||!r))try{window.localStorage.setItem(r,t)}catch{}},m=(e,t)=>{e.dispatchEvent(new CustomEvent(`tab-switched`,{detail:{tabId:t,timestamp:Date.now()},bubbles:!0,cancelable:!0}))},h=e=>{let{persistSelection:t,storageKey:n}=l(e);if(!t||!n)return;let r;try{r=window.localStorage.getItem(n)}catch{return}if(!r)return;let i=`input-${r}`,a=e.querySelector(`#${i}`);a&&(a.checked=!0)},g=(e,t)=>{let n=t.htmlFor;if(!n)return;let r=e.querySelector(`#${n}`);if(!r)return;r.checked=!0,r.dispatchEvent(new Event(`change`,{bubbles:!0}));let{enableFocusManagement:i}=l(e);i&&t.focus()},_=e=>{let t=e.target;if(!S(t)||!t.matches(o))return;let n=t.closest(a);if(!n)return;let r=f(n);if(!r)return;let i=r.id.replace(/^input-/,``);p(n,i),m(n,i)},v=e=>{let t=e.target;if(!C(t)||!t.matches(s))return;let n=t.closest(a);if(!n)return;let{enableKeyboardNavigation:r}=l(n);if(!r)return;let i=u(n),o=i.indexOf(t);if(o===-1||i.length===0)return;let c;switch(e.key){case`ArrowRight`:case`ArrowDown`:c=(o+1)%i.length;break;case`ArrowLeft`:case`ArrowUp`:c=(o-1+i.length)%i.length;break;case`Home`:c=0;break;case`End`:c=i.length-1;break;case`Enter`:case` `:c=o;break;default:return}e.preventDefault();let d=i[c];d&&g(n,d)},y=e=>{let t=e.target;if(!C(t)||!t.matches(s))return;let n=t.closest(a);if(!n)return;let{enableFocusManagement:r}=l(n);r&&u(n).forEach(e=>{e.setAttribute(`tabindex`,e===t?`0`:`-1`)})},b=e=>{h(e),f(e),e.dataset.tabsInitialized=`true`},x=e=>{if(!e||typeof e!=`object`)return!1;let t=e;return typeof t.matches==`function`&&typeof t.querySelectorAll==`function`},S=e=>x(e)&&e.tagName===`INPUT`,C=e=>x(e)&&e.tagName===`LABEL`,w=e=>{x(e)&&e.matches(a)&&b(e),e.querySelectorAll(a).forEach(e=>{b(e)})},T=()=>{document.body&&new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{x(e)&&w(e)})})}).observe(document.body,{childList:!0,subtree:!0})},E=()=>{if(!(typeof window>`u`||typeof document>`u`)){if(window.__markedExtendedTabsRuntimeReady__){window.initMarkedExtendedTabs?.();return}if(window.__markedExtendedTabsRuntimeReady__=!0,document.addEventListener(`change`,_),document.addEventListener(`keydown`,v),document.addEventListener(`focusin`,y),window.initMarkedExtendedTabs=()=>{w(document)},document.readyState===`loading`){document.addEventListener(`DOMContentLoaded`,()=>{window.initMarkedExtendedTabs?.(),T()},{once:!0});return}window.initMarkedExtendedTabs(),T()}},D=/\s*(\w+)="([^"]+)"/g,O={tabBlock:{start:`::::tabs`,end:`::::tabsend`,aliases:[`:tbs`,`:tabs`],endAliases:[`:tbsend`,`:tabsend`]},tabItemBlock:{start:`:::tab`,end:`:::tabend`,aliases:[`:tab`],endAliases:[`:tabend`]}},k={tabItemBlock:[{name:`label`,defaultValue:``},{name:`active`,defaultValue:`false`},{name:`icon`,defaultValue:null}]};function A(e,t){let n=O[t];if(!n)return null;let{start:r,end:i,aliases:a=[],endAliases:o=[]}=n,s=``;if(e.startsWith(r))s=r;else for(let t of a)if(e.startsWith(t)){s=t;break}if(!s)return null;let c=s.length,l=``,u=c,d=c;for(;d<e.length&&e[d]===` `;)d++;if(d<e.length&&e[d]===`{`){let t=e.indexOf(`}`,d);t!==-1&&(l=e.substring(c,t),u=t+1)}let f=1,p=u;for(;p<e.length&&f>0;){let t=e.indexOf(r,p),n=t;for(let t of a){let r=e.indexOf(t,p);r!==-1&&(n===-1||r<n)&&(n=r)}let s=i,c=e.indexOf(i,p);for(let t of o){let n=e.indexOf(t,p);n!==-1&&(c===-1||n<c)&&(c=n,s=t)}if(c===-1)return null;if(n!==-1&&n<c){f++;let i=r;if(n===t)i=r;else for(let t of a)if(e.indexOf(t,p)===n){i=t;break}p=n+i.length;continue}if(--f===0){let t=e.substring(u,c),n=[e.substring(0,c+s.length),l,t];return n.index=0,n.input=e,n}p=c+s.length}return null}var j=(e,t)=>{if(e instanceof RegExp)return e.exec(t);switch(e){case`tabBlock`:case`tabItemBlock`:return A(t,e);default:throw Error(`Unknown element: ${e}`)}},M=(e,t)=>{let n=k[e];if(!n)throw Error(`Unknown element: ${e}`);let r={};n.forEach(e=>{r[e.name]=e.defaultValue}),D.lastIndex=0;let i;for(;(i=D.exec(t))!==null;){let[,e,t]=i;n.some(t=>t.name===e)&&(r[e]=t)}return r};function N(e,t){let{tabsContainerId:n,tabsData:a,className:o,animation:s=`fade`,template:c,enableKeyboardNavigation:l=!0,enableFocusManagement:u=!0,persistSelection:d}=e,f=c||r;if(!a||a.length===0)return`<div class="error-message">No tab content found</div>`;let p=``,m=``,h=``;for(let e of a){let{id:r,tokens:i,props:a}=e,{active:o,icon:s,label:c}=a,l=`input-${r}`,u=`label-${r}`,d=o?`checked`:``,f=o?`true`:`false`,g=s?`<span class="marked-extended-tabs-icon">${s}</span>`:``;p+=`<input type="radio" name="${n}-tabs" id="${l}" class="marked-extended-tabs-input" ${d}>`,m+=`
       <label for="${l}" id="${u}" class="marked-extended-tabs-label" role="tab" aria-selected="${f}" data-tab-id="${r}" tabindex="${o?`0`:`-1`}">
-        ${p}<span class="tab-label">${c}</span>
-      </label>`;let _=i&&i.length>0?t.parse(i):``;g+=`
+        ${g}<span class="tab-label">${c}</span>
+      </label>`;let _=i&&i.length>0?t.parse(i):``;h+=`
       <div class="marked-extended-tabs-content-pane" id="${r}" role="tabpanel" aria-labelledby="${l}">
         ${_}
-      </div>`}let _=i(n,o,c),v=a(n,o,u,d,f);return p.replace(/{tabsContainerId}/g,n).replace(/{className}/g,s).replace(/{animation}/g,c).replace(/{inputsNav}/g,m).replace(/{navList}/g,h).replace(/{content}/g,g).replace(/{stylesBehavior}/g,_+v)}function p(e){let{animation:n,autoActivate:r,className:i,persistSelection:a,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:f}=e,p=`tabItemBlock`;return{name:`tabs`,level:`block`,tokenizer(e){let m=u(`tabBlock`,e);if(!m)return;let[h,,g]=m,_=`tabs-container-${++t.value}`,v=[],y=0,b=g;for(;b&&(b=b.trimStart(),b);){let e=u(p,b);if(!e)break;let[t,n,r]=e,i=d(p,n),a=i.label||`Tab ${y+1}`,o=i.active===`true`,s=this.lexer.blockTokens(r.trim());v.push({type:`tab-item`,raw:t,id:`${_}-tab-${y}`,props:{label:a,active:o,icon:i.icon||void 0},tokens:s}),y++,b=b.substring(t.length)}if(v.length!==0)return r&&!v.some(e=>e.props.active)&&v.length>0&&(v[0].props.active=!0),{type:`tabs`,raw:h,tokens:v,meta:{tabsContainerId:_,className:i,persistSelection:a,animation:n,autoActivate:r,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:f}}}}}function m(){return{name:`tabs`,renderer(e){let t=e;return f({...t.meta,tabsData:t.tokens},this.parser)}}}function h(e={}){e.animation&&![`fade`,`slide`,`none`].includes(e.animation)&&(console.warn(`[marked-extended-tabs] Invalid animation value: ${e.animation}. Using default 'fade'.`),e.animation=`fade`),e.onBeforeSwitch&&typeof e.onBeforeSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onBeforeSwitch must be a function`),e.onBeforeSwitch=null),e.onAfterSwitch&&typeof e.onAfterSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onAfterSwitch must be a function`),e.onAfterSwitch=null);let t={...n,...e};return{walkTokens(e){e.type===`tabs`&&t.customizeToken&&typeof t.customizeToken==`function`&&t.customizeToken(e)},extensions:[p(t),m()]}}e.default=h});
+      </div>`}let g=i(n,a,s),_=[`data-tabs-runtime="true"`,`data-tabs-enable-keyboard-navigation="${l?`true`:`false`}"`,`data-tabs-enable-focus-management="${u?`true`:`false`}"`,`data-tabs-persist-selection="${d?`true`:`false`}"`,`data-tabs-storage-key="marked-extended-tabs-active-${n}"`].join(` `);return f.replace(/{tabsContainerId}/g,n).replace(/{className}/g,o).replace(/{animation}/g,s).replace(/{runtimeAttrs}/g,_).replace(/{inputsNav}/g,p).replace(/{navList}/g,m).replace(/{content}/g,h).replace(/{stylesBehavior}/g,g)}function P(e){let{animation:n,autoActivate:r,className:i,persistSelection:a,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:u}=e,d=`tabItemBlock`;return{name:`tabs`,level:`block`,tokenizer(e){let f=j(`tabBlock`,e);if(!f)return;let[p,,m]=f,h=`tabs-container-${++t.value}`,g=[],_=0,v=m;for(;v&&(v=v.trimStart(),v);){let e=j(d,v);if(!e)break;let[t,n,r]=e,i=M(d,n),a=i.label||`Tab ${_+1}`,o=i.active===`true`,s=this.lexer.blockTokens(r.trim());g.push({type:`tab-item`,raw:t,id:`${h}-tab-${_}`,props:{label:a,active:o,icon:i.icon||void 0},tokens:s}),_++,v=v.substring(t.length)}if(g.length!==0)return r&&!g.some(e=>e.props.active)&&g.length>0&&(g[0].props.active=!0),{type:`tabs`,raw:p,tokens:g,meta:{tabsContainerId:h,className:i,persistSelection:a,animation:n,autoActivate:r,template:o,onBeforeSwitch:s,onAfterSwitch:c,enableKeyboardNavigation:l,enableFocusManagement:u}}}}}function F(){return{name:`tabs`,renderer(e){let t=e;return N({...t.meta,tabsData:t.tokens},this.parser)}}}function I(e={}){e.animation&&![`fade`,`slide`,`none`].includes(e.animation)&&(console.warn(`[marked-extended-tabs] Invalid animation value: ${e.animation}. Using default 'fade'.`),e.animation=`fade`),e.onBeforeSwitch&&typeof e.onBeforeSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onBeforeSwitch must be a function`),e.onBeforeSwitch=null),e.onAfterSwitch&&typeof e.onAfterSwitch!=`function`&&(console.warn(`[marked-extended-tabs] onAfterSwitch must be a function`),e.onAfterSwitch=null);let t={...n,...e};return E(),{walkTokens(e){e.type===`tabs`&&t.customizeToken&&typeof t.customizeToken==`function`&&t.customizeToken(e)},extensions:[P(t),F()]}}e.default=I});

package/dist/types/utils/constants.d.ts

@@ -28,7 +28,7 @@ export declare const DEFAULT_OPTIONS: Required<TabsOptions>;
  * - {content}: The content to be displayed in the tabs' content area.
  * - {stylesBehavior}: Inline styles or behaviors injected into the template.
  */
-export declare const DEFAULT_TEMPLATE = "\n  <div id=\"{tabsContainerId}\" class=\"{className}\" data-animation=\"{animation}\">\n    {inputsNav}\n    <div class=\"marked-extended-tabs-nav\" role=\"tablist\">{navList}</div>\n    <div class=\"marked-extended-tabs-content\">{content}</div>\n    {stylesBehavior}\n  </div>\n";
+export declare const DEFAULT_TEMPLATE = "\n  <div id=\"{tabsContainerId}\" class=\"{className}\" data-animation=\"{animation}\" {runtimeAttrs}>\n    {inputsNav}\n    <div class=\"marked-extended-tabs-nav\" role=\"tablist\">{navList}</div>\n    <div class=\"marked-extended-tabs-content\">{content}</div>\n    {stylesBehavior}\n  </div>\n";
 /**
  * Generates a CSS style string for tabs, defining how each tab is displayed and animated
  * based on the provided container ID, tab data, and animation type.
@@ -41,15 +41,3 @@ export declare const DEFAULT_TEMPLATE = "\n  <div id=\"{tabsContainerId}\" class
  * @return {string} A string of CSS styles defining the behavior of the tabs and their animations.
  */
 export declare function createTabsStyles(tabsContainerId: string, tabsData: TabItem[], animation: AnimationType): string;
-/**
- * Generates JavaScript code for enhanced tab interaction features
- * Includes keyboard navigation, focus management, and state persistence
- *
- * @param {string} tabsContainerId - The ID of the tabs container
- * @param {Array<{id: string, props: {label: string}}>} tabsData - Array of tab data
- * @param {boolean} enableKeyboardNavigation - Enable arrow key navigation
- * @param {boolean} enableFocusManagement - Enable focus management
- * @param {boolean} persistSelection - Enable local storage persistence
- * @return {string} JavaScript code as a script tag
- */
-export declare function createTabsScript(tabsContainerId: string, tabsData: TabItem[], enableKeyboardNavigation?: boolean, enableFocusManagement?: boolean, persistSelection?: boolean): string;

package/dist/types/utils/runtime.d.ts

@@ -0,0 +1 @@
+export declare const ensureTabsRuntime: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fsegurai/marked-extended-tabs",
-  "version": "17.0.0-beta.7",
+  "version": "17.0.0",
   "description": "Extension for Marked.js that adds support for extended tabs, allowing the creation of tabbed content sections within Markdown documents. It supports any Markdown rendering and can be customized to fit your needs.",
   "type": "module",
   "main": "./dist/index.cjs",