@fsegurai/marked-extended-tabs 17.0.0-beta.3 → 17.0.0-beta.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fsegurai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.custom.md

@@ -712,7 +712,7 @@ Individual tabs can use these aliases:
 The marked-extended-tabs extension accepts the following configuration options:
 
 - `className`: The base CSS class name for tabs container. Defaults to 'marked-extended-tabs-container'.
-- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to **true**.
+- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to **false**.
 - `animation`: Animation type for tab transitions. Defaults to 'fade'. See [Animation Types](#animation-types).
 - `autoActivate`: Automatically activate the first tab if none is explicitly active. Defaults to true.
 - `template`: A custom HTML template for the tabs structure. Defaults to the built-in template.
@@ -782,7 +782,7 @@ Enable/disable with:
 
 ```javascript
 marked.use(markedExtendedTabs({
-    persistSelection: true  // Default: true
+    persistSelection: true  // Default: false
 }));
 ```
 
@@ -859,7 +859,7 @@ import '@fsegurai/marked-extended-tabs/styles/tabs.css';
 marked.use(markedExtendedTabs({
     animation: 'fade',
     autoActivate: true,
-    persistSelection: true,
+    persistSelection: false,
     enableKeyboardNavigation: true,
     enableFocusManagement: true,
 
@@ -968,7 +968,7 @@ import markedExtendedTabs from "@fsegurai/marked-extended-tabs";
 marked.use(markedExtendedTabs({
     className: 'my-custom-tabs',
     animation: 'slide',
-    persistSelection: true,
+    persistSelection: false,
     autoActivate: true,
     customizeToken: (token) => {
         // Add custom logic here

package/README.md

@@ -763,7 +763,7 @@ Individual tabs can use these aliases:
 The marked-extended-tabs extension accepts the following configuration options:
 
 - `className`: The base CSS class name for tabs container. Defaults to 'marked-extended-tabs-container'.
-- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to **true**.
+- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to **false**.
 - `animation`: Animation type for tab transitions. Defaults to 'fade'. See [Animation Types](#animation-types).
 - `autoActivate`: Automatically activate the first tab if none is explicitly active. Defaults to true.
 - `template`: A custom HTML template for the tabs structure. Defaults to the built-in template.
@@ -833,7 +833,7 @@ Enable/disable with:
 
 ```javascript
 marked.use(markedExtendedTabs({
-    persistSelection: true  // Default: true
+    persistSelection: true  // Default: false
 }));
 ```
 
@@ -910,7 +910,7 @@ import '@fsegurai/marked-extended-tabs/styles/tabs.css';
 marked.use(markedExtendedTabs({
     animation: 'fade',
     autoActivate: true,
-    persistSelection: true,
+    persistSelection: false,
     enableKeyboardNavigation: true,
     enableFocusManagement: true,
 
@@ -1019,7 +1019,7 @@ import markedExtendedTabs from "@fsegurai/marked-extended-tabs";
 marked.use(markedExtendedTabs({
     className: 'my-custom-tabs',
     animation: 'slide',
-    persistSelection: true,
+    persistSelection: false,
     autoActivate: true,
     customizeToken: (token) => {
         // Add custom logic here
@@ -2315,6 +2315,7 @@ on [GitHub](https://github.com/fsegurai/marked-extensions/issues).
 
 | Extension   | Package                                                                                                      | Version                                                                    | Description                                                          |
 |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------|
+| All - Bundle       | [@fsegurai/marked-extended-bundle](https://www.npmjs.com/package/@fsegurai/marked-extended-bundle)             | ![npm](https://img.shields.io/npm/v/@fsegurai/marked-extended-bundle)       | Includes all extensions in a single package for easy integration                  |
 | Accordion   | [@fsegurai/marked-extended-accordion](https://www.npmjs.com/package/@fsegurai/marked-extended-accordion)     | ![npm](https://img.shields.io/npm/v/@fsegurai/marked-extended-accordion)   | Add collapsible accordion sections to your markdown                  |
 | Alert       | [@fsegurai/marked-extended-alert](https://www.npmjs.com/package/@fsegurai/marked-extended-alert)             | ![npm](https://img.shields.io/npm/v/@fsegurai/marked-extended-alert)       | Create styled alert boxes for important information                  |
 | Comments    | [@fsegurai/marked-extended-comments](https://www.npmjs.com/package/@fsegurai/marked-extended-comments)       | ![npm](https://img.shields.io/npm/v/@fsegurai/marked-extended-comments)    | Add comment sections with author and timestamp metadata              |

package/dist/index.cjs

@@ -1,125 +1,41 @@
-'use strict';
-
-// Counter for generating unique IDs for tab containers
-const tabCounter = { value: 0 };
-/**
- * Default configuration options for the extended tabs component.
- *
- * @constant {Object} DEFAULT_OPTIONS
- * @property {string} className - The CSS class name applied to the tabs container.
- * @property {boolean} persistSelection - Determines if the selection state should be persisted across sessions.
- * @property {string} animation - The animation style for tab transitions, either 'fade', 'slide', or 'none'.
- * @property {boolean} autoActivate - If true, the first tab is automatically activated when no tab is marked as active.
- * @property {?string} template - A custom template for rendering the tabs, or null to use the default template.
- * @property {?Function} customizeToken - A function for customizing tab-related tokens, or null for default handling.
- */
-const DEFAULT_OPTIONS = {
-    className: 'marked-extended-tabs-container',
-    persistSelection: true,
-    animation: 'fade', // 'fade', 'slide', or 'none'
-    autoActivate: true, // Automatically activate first tab if none marked active
-    template: null,
-    customizeToken: null,
-    onBeforeSwitch: null,
-    onAfterSwitch: null,
-    enableKeyboardNavigation: true,
-    enableFocusManagement: true,
-};
-/**
- * DEFAULT_TEMPLATE is a template string used to generate the HTML structure
- * for a custom tab component. It contains placeholders that are dynamically
- * replaced with actual values during runtime to customize the generated markup.
- *
- * Placeholders:
- * - {tabsContainerId}: The unique identifier for the container of the tabs.
- * - {className}: The CSS class names to be applied to the container.
- * - {animation}: The data-animation attribute value for defining the animation type.
- * - {inputsNav}: Additional HTML or elements used in the navigation section of the tabs.
- * - {navList}: The list of navigation items for the tabs, rendered as part of the tablist.
- * - {content}: The content to be displayed in the tabs' content area.
- * - {stylesBehavior}: Inline styles or behaviors injected into the template.
- */
-const DEFAULT_TEMPLATE = `
+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}">
     {inputsNav}
     <div class="marked-extended-tabs-nav" role="tablist">{navList}</div>
     <div class="marked-extended-tabs-content">{content}</div>
     {stylesBehavior}
   </div>
-`;
-/**
- * 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.
- *
- * @param {string} tabsContainerId - The ID of the container element that wraps the tabs.
- * @param {Array<{id: string}>} tabsData - An array of objects representing tabs,
- *                                         each object must have a unique `id`.
- * @param {string} animation - The type of animation to apply when switching tabs.
- *                              Acceptable values are 'fade', 'slide', or 'none'.
- * @return {string} A string of CSS styles defining the behavior of the tabs and their animations.
- */
-function createTabsStyles(tabsContainerId, tabsData, animation) {
-    const parts = [];
-    parts.push('<style>');
-    parts.push('  /* CSS-only tab selection - show selected tab */');
-    tabsData.forEach((tab) => {
-        const inputId = `input-${tab.id}`;
-        const labelId = `label-${tab.id}`;
-        const tabId = tab.id;
-        parts.push(`
+`;function r(e,t,n){let r=[];return r.push(`<style>`),r.push(`  /* CSS-only tab selection - show selected tab */`),t.forEach(t=>{let i=`input-${t.id}`,a=`label-${t.id}`,o=t.id;r.push(`
 /* Show tab content when corresponding input is checked */
-#${tabsContainerId} #${inputId}:checked ~ .marked-extended-tabs-content #${tabId} {
+#${e} #${i}:checked ~ .marked-extended-tabs-content #${o} {
   display: block;
-  animation: ${animation === 'fade' ? 'tab-fade-in' : animation === 'slide' ? 'tab-slide-in' : 'none'} 0.3s ease-in-out;
+  animation: ${n===`fade`?`tab-fade-in`:n===`slide`?`tab-slide-in`:`none`} 0.3s ease-in-out;
 }
 
 /* Style for active tab */
-#${tabsContainerId} #${inputId}:checked ~ .marked-extended-tabs-nav #${labelId} {
+#${e} #${i}:checked ~ .marked-extended-tabs-nav #${a} {
   background: var(--marked-extended-tabs-selected-background) !important;
   border-bottom-color: var(--marked-extended-tabs-selected-border-color) !important;
   color: var(--marked-extended-tabs-selected-color) !important;
   font-weight: 600 !important;
 }
-`);
-    });
-    if (animation === 'fade') {
-        parts.push(`@keyframes tab-fade-in {
+`)}),n===`fade`&&r.push(`@keyframes tab-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
-}`);
-    }
-    if (animation === 'slide') {
-        parts.push(`@keyframes tab-slide-in {
+}`),n===`slide`&&r.push(`@keyframes tab-slide-in {
   from { transform: translateY(10px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
-}`);
-    }
-    parts.push('</style>');
-    return parts.join('\n');
-}
-/**
- * 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
- */
-function createTabsScript(tabsContainerId, tabsData, enableKeyboardNavigation = true, enableFocusManagement = true, persistSelection = true) {
-    const storageKey = `marked-extended-tabs-active-${tabsContainerId}`;
-    const js = `
+}`),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 = '${tabsContainerId}';
-  const storageKey = '${storageKey}';
+  const containerId = '${e}';
+  const storageKey = '${`marked-extended-tabs-active-${e}`}';
   // @ts-ignore - tabIds is used in the script template
-  const tabIds = ${JSON.stringify(tabsData.map((tab) => tab.id))};
-  const enableKeyboardNav = ${enableKeyboardNavigation};
-  const enableFocusManagement = ${enableFocusManagement};
-  const persistSelection = ${persistSelection};
+  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) {
@@ -334,379 +250,10 @@ function createTabsScript(tabsContainerId, tabsData, enableKeyboardNavigation =
   } else {
     initializeTabs();
   }
-})();`;
-    return '<script>' + js + '</script>';
-}
-
-/**
- * Regular expression for parsing properties from attribute strings
- * Matches patterns like: property="value"
- */
-const propRegex = /\s*(\w+)="([^"]+)"/g;
-/**
- * Element patterns configuration for tabs blocks
- */
-const elementPatterns = {
-    tabBlock: {
-        start: '::::tabs',
-        end: '::::tabsend',
-        aliases: [':tbs', ':tabs'],
-        endAliases: [':tbsend', ':tabsend'],
-    },
-    tabItemBlock: {
-        start: ':::tab',
-        end: ':::tabend',
-        aliases: [':tab'],
-        endAliases: [':tabend'],
-    },
-};
-/**
- * Supported properties by element type
- */
-const supportedPropsByElement = {
-    tabItemBlock: [
-        { name: 'label', defaultValue: '' },
-        { name: 'active', defaultValue: 'false' },
-        { name: 'icon', defaultValue: null },
-    ],
-};
-/**
- * Parses balanced opening and closing tags with proper nesting support
- * @param src - Source string to parse
- * @param elementType - Type of element to parse
- * @returns RegExpExecArray or null if no match
- */
-function parseBalancedTags(src, elementType) {
-    const pattern = elementPatterns[elementType];
-    if (!pattern)
-        return null;
-    const { start, end, aliases = [], endAliases = [] } = pattern;
-    // Find which start pattern matches
-    let matchedStart = '';
-    if (src.startsWith(start)) {
-        matchedStart = start;
-    }
-    else {
-        for (const alias of aliases) {
-            if (src.startsWith(alias)) {
-                matchedStart = alias;
-                break;
-            }
-        }
-    }
-    if (!matchedStart)
-        return null;
-    const startPos = matchedStart.length;
-    // Parse property block (optional)
-    let propString = '';
-    let contentStart = startPos;
-    // Skip whitespace and check for property block
-    let scanPos = startPos;
-    while (scanPos < src.length && src[scanPos] === ' ') {
-        scanPos++;
-    }
-    if (scanPos < src.length && src[scanPos] === '{') {
-        const propEnd = src.indexOf('}', scanPos);
-        if (propEnd !== -1) {
-            propString = src.substring(startPos, propEnd);
-            contentStart = propEnd + 1;
-        }
-    }
-    // Parse nested content with depth tracking
-    let depth = 1;
-    let pos = contentStart;
-    while (pos < src.length && depth > 0) {
-        // Find next start tag
-        const mainStartPos = src.indexOf(start, pos);
-        let nextStartPos = mainStartPos;
-        for (const alias of aliases) {
-            const aliasPos = src.indexOf(alias, pos);
-            if (aliasPos !== -1 && (nextStartPos === -1 || aliasPos < nextStartPos)) {
-                nextStartPos = aliasPos;
-            }
-        }
-        // Find next end tag
-        let foundEndPattern = end;
-        let nextEndPos = src.indexOf(end, pos);
-        for (const endAlias of endAliases) {
-            const endAliasPos = src.indexOf(endAlias, pos);
-            if (endAliasPos !== -1 && (nextEndPos === -1 || endAliasPos < nextEndPos)) {
-                nextEndPos = endAliasPos;
-                foundEndPattern = endAlias;
-            }
-        }
-        if (nextEndPos === -1)
-            return null;
-        // Handle nested tags
-        if (nextStartPos !== -1 && nextStartPos < nextEndPos) {
-            depth++;
-            let matchedPattern = start;
-            if (nextStartPos === mainStartPos) {
-                matchedPattern = start;
-            }
-            else {
-                for (const alias of aliases) {
-                    if (src.indexOf(alias, pos) === nextStartPos) {
-                        matchedPattern = alias;
-                        break;
-                    }
-                }
-            }
-            pos = nextStartPos + matchedPattern.length;
-            continue;
-        }
-        // Check if we've closed all nested tags
-        if (--depth === 0) {
-            const content = src.substring(contentStart, nextEndPos);
-            const fullMatch = src.substring(0, nextEndPos + foundEndPattern.length);
-            const result = [fullMatch, propString, content];
-            result.index = 0;
-            result.input = src;
-            return result;
-        }
-        pos = nextEndPos + foundEndPattern.length;
-    }
-    return null;
-}
-/**
- * Validates and parses element patterns from source string
- * @param element - Element type or RegExp to validate
- * @param src - Source string to parse
- * @returns RegExpExecArray or null if no match
- */
-const validateRegex = (element, src) => {
-    if (element instanceof RegExp) {
-        return element.exec(src);
-    }
-    switch (element) {
-        case 'tabBlock':
-        case 'tabItemBlock':
-            return parseBalancedTags(src, element);
-        default:
-            throw new Error(`Unknown element: ${element}`);
-    }
-};
-/**
- * Constructs properties object from property string
- * @param element - Element type
- * @param propString - String containing properties
- * @returns Record of property names to values
- */
-const constructProps = (element, propString) => {
-    const supportedProps = supportedPropsByElement[element];
-    if (!supportedProps) {
-        throw new Error(`Unknown element: ${element}`);
-    }
-    // Initialize with default values
-    const props = {};
-    supportedProps.forEach((prop) => {
-        props[prop.name] = prop.defaultValue;
-    });
-    // Parse and override with actual values
-    propRegex.lastIndex = 0;
-    let propMatch;
-    while ((propMatch = propRegex.exec(propString)) !== null) {
-        const [, name, value] = propMatch;
-        if (supportedProps.some((p) => p.name === name)) {
-            props[name] = value;
-        }
-    }
-    return props;
-};
-
-/**
- * Renders the tab component with enhanced interactivity
- * @param options - Rendering options
- * @param parser - Parser instance from marked.js renderer context
- * @returns HTML string for the tabs
- */
-function renderTabs(options, parser) {
-    const { tabsContainerId, tabsData, className, animation = 'fade', template, enableKeyboardNavigation = true, enableFocusManagement = true, persistSelection, } = options;
-    // Get the tab template
-    const tabsTemplate = template || DEFAULT_TEMPLATE;
-    if (!tabsData || tabsData.length === 0) {
-        return '<div class="error-message">No tab content found</div>';
-    }
-    let inputsNav = '';
-    let navList = '';
-    let markedContent = '';
-    for (const tab of tabsData) {
-        const { id, tokens, props } = tab;
-        const { active, icon, label } = props;
-        const inputId = `input-${id}`;
-        const labelId = `label-${id}`;
-        const isChecked = active ? 'checked' : '';
-        const ariaSelected = active ? 'true' : 'false';
-        const iconHtml = icon ? `<span class="marked-extended-tabs-icon">${icon}</span>` : '';
-        // Inputs first
-        inputsNav += `<input type="radio" name="${tabsContainerId}-tabs" id="${inputId}" class="marked-extended-tabs-input" ${isChecked}>`;
-        // Navigation labels with data attributes for JavaScript enhancement
-        navList += `
-      <label for="${inputId}" id="${labelId}" class="marked-extended-tabs-label" role="tab" aria-selected="${ariaSelected}" data-tab-id="${id}" tabindex="${active ? '0' : '-1'}">
-        ${iconHtml}<span class="tab-label">${label}</span>
-      </label>`;
-        // Render the content using the parser context which has all extensions loaded
-        // This allows nested extensions to be properly rendered
-        const parsedContent = tokens && tokens.length > 0 ? parser.parse(tokens) : '';
-        // Tab content
-        markedContent += `
-      <div class="marked-extended-tabs-content-pane" id="${id}" role="tabpanel" aria-labelledby="${inputId}">
-        ${parsedContent}
-      </div>`;
-    }
-    const styles = createTabsStyles(tabsContainerId, tabsData, animation);
-    // Generate JavaScript for enhanced tab switching
-    const script = createTabsScript(tabsContainerId, tabsData, enableKeyboardNavigation, enableFocusManagement, persistSelection);
-    return tabsTemplate
-        .replace(/{tabsContainerId}/g, tabsContainerId)
-        .replace(/{className}/g, className)
-        .replace(/{animation}/g, animation)
-        .replace(/{inputsNav}/g, inputsNav)
-        .replace(/{navList}/g, navList)
-        .replace(/{content}/g, markedContent)
-        .replace(/{stylesBehavior}/g, styles + script);
-}
-
-/**
- * Creates a tokenizer function for the tab extension
- */
-function createTokenizer(options) {
-    const { animation, autoActivate, className, persistSelection, template, onBeforeSwitch, onAfterSwitch, enableKeyboardNavigation, enableFocusManagement } = options;
-    const tabElement = 'tabBlock';
-    const tabItemElement = 'tabItemBlock';
-    return {
-        name: 'tabs',
-        level: 'block',
-        tokenizer(src) {
-            const blockMatch = validateRegex(tabElement, src);
-            if (!blockMatch)
-                return undefined;
-            // The first position is the full match, the second is props, the third is content
-            const [raw, , tabContent] = blockMatch;
-            // Generate unique ID for this tab container
-            const tabsContainerId = `tabs-container-${++tabCounter.value}`;
-            // Find individual tabs directly in the extracted tab content
-            const items = [];
-            let tabIndex = 0;
-            let remainingContent = tabContent;
-            while (remainingContent) {
-                // Skip whitespace
-                remainingContent = remainingContent.trimStart();
-                if (!remainingContent)
-                    break;
-                const tabMatch = validateRegex(tabItemElement, remainingContent);
-                if (!tabMatch) {
-                    // If we have content but it doesn't match a tab item, strictly speaking this might be invalid content 
-                    // inside a tabs container, or we could just breaking to avoid infinite loop.
-                    break;
-                }
-                const [itemRaw, propsStr, tabContentStr] = tabMatch;
-                // Parse properties with defaults
-                const rawProps = constructProps(tabItemElement, propsStr);
-                // If no label is provided, use a default
-                const label = rawProps['label'] || `Tab ${tabIndex + 1}`;
-                // Convert string 'true'/'false' to boolean for the active property
-                const active = rawProps['active'] === 'true';
-                // Tokenize the tab content using this.lexer.blockTokens
-                // This ensures nested extensions are properly tokenized
-                const innerTokens = this.lexer.blockTokens(tabContentStr.trim());
-                // Add to tabs data - include raw so it satisfies Tokens.Generic
-                items.push({
-                    type: 'tab-item',
-                    raw: itemRaw,
-                    id: `${tabsContainerId}-tab-${tabIndex}`,
-                    props: {
-                        label,
-                        active,
-                        icon: rawProps['icon'] || undefined,
-                    },
-                    tokens: innerTokens,
-                });
-                tabIndex++;
-                // Advance cursor
-                remainingContent = remainingContent.substring(itemRaw.length);
-            }
-            // If no tabs were found, return undefined
-            if (items.length === 0)
-                return undefined;
-            // Apply auto-activation if enabled, and no tab is explicitly marked as active
-            if (autoActivate) {
-                const hasActiveTab = items.some((tab) => tab.props.active);
-                if (!hasActiveTab && items.length > 0) {
-                    items[0].props.active = true;
-                }
-            }
-            // Create a token with metadata for the renderer
-            return {
-                type: 'tabs',
-                raw,
-                tokens: items,
-                meta: {
-                    tabsContainerId,
-                    className,
-                    persistSelection,
-                    animation,
-                    autoActivate,
-                    template,
-                    onBeforeSwitch,
-                    onAfterSwitch,
-                    enableKeyboardNavigation,
-                    enableFocusManagement,
-                },
-            };
-        },
-    };
-}
-/**
- * Create the renderer extension for tabs
- */
-function createRenderer() {
-    return {
-        name: 'tabs',
-        renderer(token) {
-            const tabsToken = token;
-            // Pass meta and parser to the renderer for proper nested extension support
-            return renderTabs({ ...tabsToken.meta, tabsData: tabsToken.tokens }, this.parser);
-        },
-    };
-}
-
-/**
- * Marked Extended Tabs extension
- * @param options - Configuration options
- * @returns Marked extension object
- */
-function markedExtendedTabs(options = {}) {
-    // Validate animation option
-    if (options.animation && !['fade', 'slide', 'none'].includes(options.animation)) {
-        console.warn(`[marked-extended-tabs] Invalid animation value: ${options.animation}. Using default 'fade'.`);
-        options.animation = 'fade';
-    }
-    // Validate callbacks
-    if (options.onBeforeSwitch && typeof options.onBeforeSwitch !== 'function') {
-        console.warn('[marked-extended-tabs] onBeforeSwitch must be a function');
-        options.onBeforeSwitch = null;
-    }
-    if (options.onAfterSwitch && typeof options.onAfterSwitch !== 'function') {
-        console.warn('[marked-extended-tabs] onAfterSwitch must be a function');
-        options.onAfterSwitch = null;
-    }
-    // Set sensible defaults
-    const config = { ...DEFAULT_OPTIONS, ...options };
-    // NOTE: Styles are no longer injected automatically. Import the CSS/SCSS files manually in your project.
-    // Return the extension
-    return {
-        walkTokens(token) {
-            if (token.type !== 'tabs')
-                return;
-            // Apply custom token modifications if configured
-            if (config.customizeToken && typeof config.customizeToken === 'function') {
-                config.customizeToken(token);
-            }
-        },
-        extensions: [createTokenizer(config), createRenderer()],
-    };
-}
-
-module.exports = markedExtendedTabs;
-//# sourceMappingURL=index.cjs.map
+})();<\/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+=`
+      <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+=`
+      <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;