@diplodoc/tabs-extension 3.4.0 → 3.5.0

package/build/plugin/index.js

@@ -80,28 +80,32 @@ __export(plugin_exports, {
 });
 module.exports = __toCommonJS(plugin_exports);
 
-// src/plugin/transform.ts
-var import_token = __toESM(require("markdown-it/lib/token"));
-
 // src/common.ts
+var TAB_RE = /`?{% list tabs .*?%}`?/;
 var TABS_CLASSNAME = "yfm-tabs";
-var TABS_VERTICAL_CLASSNAME = "yfm-tabs-vertical";
-var TABS_LIST_CLASSNAME = "yfm-tab-list";
 var TAB_CLASSNAME = "yfm-tab";
 var TAB_PANEL_CLASSNAME = "yfm-tab-panel";
+var TABS_LIST_CLASSNAME = "yfm-tab-list";
 var ACTIVE_CLASSNAME = "active";
-var VERTICAL_TAB_CLASSNAME = "yfm-vertical-tab";
-var VERTICAL_TAB_FORCED_OPEN = "data-diplodoc-radio-forced";
+var TAB_GROUP_CLASSNAME = "yfm-tab-group";
+var TAB_ACTIVE_KEY = "data-diplodoc-is-active";
 var GROUP_DATA_KEY = "data-diplodoc-group";
 var TAB_DATA_KEY = "data-diplodoc-key";
+var TAB_DATA_VARIANT = "data-diplodoc-variant";
 var TAB_DATA_ID = "data-diplodoc-id";
-var TAB_DATA_VERTICAL_TAB = "data-diplodoc-vertical-tab";
-var TAB_ACTIVE_KEY = "data-diplodoc-is-active";
 var DEFAULT_TABS_GROUP_PREFIX = "defaultTabsGroup-";
 var ACTIVE_TAB_TEXT = "{selected}";
+var TAB_FORCED_OPEN = "data-diplodoc-forced";
+var TABS_DROPDOWN_CLASSNAME = "yfm-tabs-dropdown";
+var TABS_DROPDOWN_MENU_CLASSNAME = "yfm-tabs-dropdown-menu";
+var TABS_DROPDOWN_SELECT = "yfm-tabs-dropdown-select";
+var TABS_ACCORDION_CLASSNAME = "yfm-tabs-accordion";
+var TABS_RADIO_CLASSNAME = "yfm-tabs-vertical";
+var VERTICAL_TAB_CLASSNAME = "yfm-vertical-tab";
+var TAB_DATA_VERTICAL_TAB = "data-diplodoc-vertical-tab";
 var GLOBAL_SYMBOL = Symbol.for("diplodocTabs");
 
-// src/plugin/utils.ts
+// src/plugin/utils/strings.ts
 function generateID() {
   const id = Math.random().toString(36).substr(2, 8);
   return id.substring(id.length - 8);
@@ -112,47 +116,8 @@ function trim(target) {
 function unquote(target) {
   return target.match(/^(["']).*\1$/) ? target.slice(1, -1) : target;
 }
-function addHiddenProperty(box, field, value) {
-  if (!(field in box)) {
-    Object.defineProperty(box, field, {
-      enumerable: false,
-      value
-    });
-  }
-  return box;
-}
 
-// src/plugin/copyRuntimeFiles.ts
-var PATH_TO_RUNTIME = "../runtime";
-function copyRuntimeFiles({
-  runtimeJsPath,
-  runtimeCssPath,
-  output
-}, cache) {
-  const { join, resolve } = dynrequire("node:path");
-  const runtimeFiles = {
-    "index.js": runtimeJsPath,
-    "index.css": runtimeCssPath
-  };
-  for (const [originFile, outputFile] of Object.entries(runtimeFiles)) {
-    const file = join(PATH_TO_RUNTIME, originFile);
-    if (!cache.has(file)) {
-      cache.add(file);
-      copyFile(resolve(__dirname, file), join(output, outputFile));
-    }
-  }
-}
-function copyFile(from, to) {
-  const { mkdirSync, copyFileSync } = dynrequire("node:fs");
-  const { dirname } = dynrequire("node:path");
-  mkdirSync(dirname(to), { recursive: true });
-  copyFileSync(from, to);
-}
-function dynrequire(module) {
-  return eval(`require('${module}')`);
-}
-
-// src/plugin/getTabId.ts
+// src/plugin/utils/tabs.ts
 var import_github_slugger = __toESM(require_github_slugger());
 var CUSTOM_ID_REGEXP = /\[?{ ?#(\S+) ?}]?/;
 var sluggersStorage = /* @__PURE__ */ new Map();
@@ -183,6 +148,10 @@ function getTabId(tab, { runId }) {
   }
   return slugger.slug(getRawId(tab));
 }
+function isTabSelected(tab) {
+  const { name } = tab;
+  return name.includes(ACTIVE_TAB_TEXT);
+}
 function getTabKey(tab) {
   return encodeURIComponent(getRawId(tab)).toLocaleLowerCase();
 }
@@ -194,79 +163,49 @@ function getRawId(tab) {
   return customAnchor || name;
 }
 
-// src/plugin/transform.ts
-var TAB_RE = /`?{% list tabs .*?%}`?/;
-var runsCounter = 0;
-function findTabs(tokens, idx, closeTokenIdx) {
-  const tabs = [];
-  let i = idx, nestedLevel = -1, pending = { name: "", tokens: [], listItem: new import_token.default("list_item_open", "", 0) };
-  while (i < tokens.length) {
-    const token = tokens[i];
-    switch (token.type) {
-      case "ordered_list_open":
-      case "bullet_list_open":
-        if (nestedLevel > -1) {
-          pending.tokens.push(token);
-        }
-        nestedLevel++;
-        break;
-      case "list_item_open":
-        if (nestedLevel) {
-          pending.tokens.push(token);
-        } else {
-          pending = { name: "", tokens: [], listItem: token };
-        }
-        break;
-      case "list_item_close":
-        if (nestedLevel) {
-          pending.tokens.push(token);
-        } else {
-          tabs.push(pending);
-        }
-        break;
-      case "ordered_list_close":
-      case "bullet_list_close":
-        if (!nestedLevel) {
-          return {
-            tabs,
-            index: i
-          };
-        }
-        nestedLevel--;
-        pending.tokens.push(token);
-        break;
-      case "paragraph_open":
-        if (i === closeTokenIdx && tokens[i + 1].content && tokens[i + 1].content.trim() === "{% endlist %}") {
-          if (pending && !nestedLevel) {
-            tabs.push(pending);
-          }
-          return {
-            tabs,
-            index: i + 2
-          };
-        }
-        if (!pending.name && tokens[i + 1].type === "inline") {
-          pending.name = tokens[i + 1].content;
-          i += 2;
-        } else {
-          pending.tokens.push(token);
-        }
-        break;
-      default:
-        pending.tokens.push(token);
+// src/plugin/utils/files.ts
+var PATH_TO_RUNTIME = "../runtime";
+function copyRuntimeFiles({
+  runtimeJsPath,
+  runtimeCssPath,
+  output
+}, cache) {
+  const { join, resolve } = dynrequire("node:path");
+  const runtimeFiles = {
+    "index.js": runtimeJsPath,
+    "index.css": runtimeCssPath
+  };
+  for (const [originFile, outputFile] of Object.entries(runtimeFiles)) {
+    const file = join(PATH_TO_RUNTIME, originFile);
+    if (!cache.has(file)) {
+      cache.add(file);
+      copyFile(resolve(__dirname, file), join(output, outputFile));
     }
-    i++;
   }
-  return {
-    tabs,
-    index: i
-  };
 }
-function insertTabs(tabs, state, align, { start, end }, {
-  containerClasses,
-  tabsGroup,
-  runId
-}) {
+function copyFile(from, to) {
+  const { mkdirSync, copyFileSync } = dynrequire("node:fs");
+  const { dirname } = dynrequire("node:path");
+  mkdirSync(dirname(to), { recursive: true });
+  copyFileSync(from, to);
+}
+function dynrequire(module) {
+  return eval(`require('${module}')`);
+}
+
+// src/plugin/utils/index.ts
+function addHiddenProperty(box, field, value) {
+  if (!(field in box)) {
+    Object.defineProperty(box, field, {
+      enumerable: false,
+      value
+    });
+  }
+  return box;
+}
+
+// src/plugin/variants/regular.ts
+var regular = (tabs, state, { containerClasses, tabsGroup, runId, variant: orientation }) => {
   var _a, _b;
   const tabsTokens = [];
   const tabListTokens = [];
@@ -276,34 +215,31 @@ function insertTabs(tabs, state, align, { start, end }, {
   const tabListOpen = new state.Token("tab-list_open", "div", 1);
   const tabListClose = new state.Token("tab-list_close", "div", -1);
   if (tabs.length) {
-    const [start2] = (_a = tabs[0].listItem.map) != null ? _a : [null];
-    if (start2 == null) {
+    const [start] = (_a = tabs[0].listItem.map) != null ? _a : [null];
+    if (start == null) {
       throw new Error("failed to parse line mapping");
     }
-    const [_, end2] = (_b = tabs[tabs.length - 1].listItem.map) != null ? _b : [null, null];
-    if (end2 == null) {
+    const [_, end] = (_b = tabs[tabs.length - 1].listItem.map) != null ? _b : [null, null];
+    if (end == null) {
       throw new Error("failed to parse line mapping");
     }
-    tabListOpen.map = [start2, end2];
+    tabListOpen.map = [start, end];
   }
   tabsOpen.block = true;
   tabsClose.block = true;
   tabListOpen.block = true;
   tabListClose.block = true;
-  const areTabsVerticalClass = align === "radio" && TABS_VERTICAL_CLASSNAME;
   const activeTabsCount = tabs.filter(isTabSelected).length;
   if (activeTabsCount > 1) {
     throw new Error("Unable to render tabs with more than 1 active element");
   }
   const hasDefaultOpenTab = activeTabsCount !== 0;
-  tabsOpen.attrSet(
-    "class",
-    [TABS_CLASSNAME, containerClasses, areTabsVerticalClass].filter(Boolean).join(" ")
-  );
+  tabsOpen.attrSet("class", [TABS_CLASSNAME, containerClasses].filter(Boolean).join(" "));
   tabsOpen.attrSet(GROUP_DATA_KEY, tabsGroup);
+  tabsOpen.attrSet(TAB_DATA_VARIANT, "regular");
   tabListOpen.attrSet("class", TABS_LIST_CLASSNAME);
   tabListOpen.attrSet("role", "tablist");
-  if (align === "radio") {
+  if (orientation === "radio") {
     tabsTokens.push(tabsOpen);
   }
   for (let i = 0; i < tabs.length; i++) {
@@ -322,7 +258,7 @@ function insertTabs(tabs, state, align, { start, end }, {
     const tabId = getTabId(tab, { runId });
     const tabKey = getTabKey(tab);
     const didTabHasActiveAttr = isTabSelected(tab);
-    const isTabActive = hasDefaultOpenTab ? didTabHasActiveAttr : align === "horizontal" && i === 0;
+    const isTabActive = hasDefaultOpenTab ? didTabHasActiveAttr : i === 0;
     tab.name = getName(tab);
     const tabPanelId = generateID();
     verticalTabInput.block = true;
@@ -350,13 +286,13 @@ function insertTabs(tabs, state, align, { start, end }, {
     tabPanelOpen.attrSet("role", "tabpanel");
     tabPanelOpen.attrSet("aria-labelledby", tabId);
     tabPanelOpen.attrSet("data-title", tab.name);
-    if (align === "radio") {
+    if (orientation === "radio") {
       tabOpen.attrSet(TAB_DATA_VERTICAL_TAB, "true");
       tabOpen.attrJoin("class", VERTICAL_TAB_CLASSNAME);
     }
     if (isTabActive) {
-      if (align === "radio") {
-        tabOpen.attrSet(VERTICAL_TAB_FORCED_OPEN, "true");
+      if (orientation === "radio") {
+        tabOpen.attrSet(TAB_FORCED_OPEN, "true");
         verticalTabInput.attrSet("checked", "true");
         tabPanelOpen.attrJoin("class", ACTIVE_CLASSNAME);
       } else {
@@ -366,7 +302,7 @@ function insertTabs(tabs, state, align, { start, end }, {
         tabPanelOpen.attrJoin("class", ACTIVE_CLASSNAME);
       }
     }
-    if (align === "radio") {
+    if (orientation === "radio") {
       tabsTokens.push(
         tabOpen,
         verticalTabInput,
@@ -381,22 +317,300 @@ function insertTabs(tabs, state, align, { start, end }, {
       tabPanelsTokens.push(tabPanelOpen, ...tabs[i].tokens, tabPanelClose);
     }
   }
-  if (align === "horizontal") {
-    tabsTokens.push(tabsOpen);
-    tabsTokens.push(tabListOpen);
-    tabsTokens.push(...tabListTokens);
-    tabsTokens.push(tabListClose);
-    tabsTokens.push(...tabPanelsTokens);
+  tabsTokens.push(tabsOpen);
+  tabsTokens.push(tabListOpen);
+  tabsTokens.push(...tabListTokens);
+  tabsTokens.push(tabListClose);
+  tabsTokens.push(...tabPanelsTokens);
+  tabsTokens.push(tabsClose);
+  return tabsTokens;
+};
+
+// src/plugin/variants/radio.ts
+var radio = (tabs, state, { containerClasses, tabsGroup, runId }) => {
+  var _a, _b;
+  const tabsTokens = [];
+  const tabsOpen = new state.Token("tabs_open", "div", 1);
+  const tabsClose = new state.Token("tabs_close", "div", -1);
+  if (tabs.length) {
+    const [start] = (_a = tabs[0].listItem.map) != null ? _a : [null];
+    if (start == null) {
+      throw new Error("failed to parse line mapping");
+    }
+    const [_, end] = (_b = tabs[tabs.length - 1].listItem.map) != null ? _b : [null, null];
+    if (end == null) {
+      throw new Error("failed to parse line mapping");
+    }
+  }
+  tabsOpen.block = true;
+  tabsClose.block = true;
+  const activeTabsCount = tabs.filter(isTabSelected).length;
+  if (activeTabsCount > 1) {
+    throw new Error("Unable to render tabs with more than 1 active element");
+  }
+  tabsOpen.attrSet(
+    "class",
+    [TABS_CLASSNAME, containerClasses, TABS_RADIO_CLASSNAME].filter(Boolean).join(" ")
+  );
+  tabsOpen.attrSet(GROUP_DATA_KEY, tabsGroup);
+  tabsOpen.attrSet(TAB_DATA_VARIANT, "radio");
+  tabsTokens.push(tabsOpen);
+  for (let i = 0; i < tabs.length; i++) {
+    const tabOpen = new state.Token("tab_open", "div", 1);
+    const tabInline = new state.Token("inline", "", 0);
+    const tabText = new state.Token("text", "", 0);
+    const tabClose = new state.Token("tab_close", "div", -1);
+    const tabPanelOpen = new state.Token("tab-panel_open", "div", 1);
+    const tabPanelClose = new state.Token("tab-panel_close", "div", -1);
+    const verticalTabInput = new state.Token("tab-input", "input", 0);
+    const verticalTabLabelOpen = new state.Token("tab-label_open", "label", 1);
+    const verticalTabLabelClose = new state.Token("tab-label_close", "label", -1);
+    tabOpen.map = tabs[i].listItem.map;
+    tabOpen.markup = tabs[i].listItem.markup;
+    const tab = tabs[i];
+    const tabId = getTabId(tab, { runId });
+    const tabKey = getTabKey(tab);
+    const didTabHasActiveAttr = isTabSelected(tab);
+    tab.name = getName(tab);
+    const tabPanelId = generateID();
+    verticalTabInput.block = true;
+    verticalTabInput.attrJoin("class", "radio");
+    verticalTabInput.attrSet("type", "radio");
+    tabOpen.map = tabs[i].listItem.map;
+    tabOpen.markup = tabs[i].listItem.markup;
+    tabText.content = tabs[i].name;
+    tabInline.children = [tabText];
+    tabOpen.block = true;
+    tabClose.block = true;
+    tabPanelOpen.block = true;
+    tabPanelClose.block = true;
+    tabOpen.attrSet(TAB_DATA_ID, tabId);
+    tabOpen.attrSet(TAB_DATA_KEY, tabKey);
+    tabOpen.attrSet(
+      "class",
+      [TAB_CLASSNAME, TAB_GROUP_CLASSNAME, VERTICAL_TAB_CLASSNAME].join(" ")
+    );
+    tabOpen.attrSet("role", "tab");
+    tabOpen.attrSet("aria-controls", tabPanelId);
+    tabOpen.attrSet("aria-selected", "false");
+    tabOpen.attrSet("tabindex", i === 0 ? "0" : "-1");
+    tabOpen.attrSet(TAB_ACTIVE_KEY, "false");
+    tabPanelOpen.attrSet("id", tabPanelId);
+    tabPanelOpen.attrSet("class", TAB_PANEL_CLASSNAME);
+    tabPanelOpen.attrSet("role", "tabpanel");
+    tabPanelOpen.attrSet("aria-labelledby", tabId);
+    tabPanelOpen.attrSet("data-title", tab.name);
+    tabOpen.attrSet(TAB_DATA_VERTICAL_TAB, "true");
+    if (didTabHasActiveAttr) {
+      tabOpen.attrSet(TAB_FORCED_OPEN, "true");
+      verticalTabInput.attrSet("checked", "true");
+      tabPanelOpen.attrJoin("class", ACTIVE_CLASSNAME);
+    }
+    tabsTokens.push(
+      tabOpen,
+      verticalTabInput,
+      verticalTabLabelOpen,
+      tabInline,
+      verticalTabLabelClose,
+      tabClose
+    );
+    tabsTokens.push(tabPanelOpen, ...tabs[i].tokens, tabPanelClose);
   }
   tabsTokens.push(tabsClose);
-  state.tokens.splice(start, end - start + 1, ...tabsTokens);
-  return tabsTokens.length;
-}
-function isTabSelected(tab) {
-  const { name } = tab;
-  return name.includes(ACTIVE_TAB_TEXT);
+  return tabsTokens;
+};
+
+// src/plugin/variants/dropdown.ts
+var dropdown = (tabs, state, { containerClasses, tabsGroup, runId }) => {
+  var _a, _b;
+  const dropdownTokens = [];
+  const dropdownOpen = new state.Token("dropdown_open", "div", 1);
+  const dropdownClose = new state.Token("dropdown_close", "div", -1);
+  const dropdownSelectOpen = new state.Token("dropdown-select_open", "div", 1);
+  const dropdownSelectInline = new state.Token("inline", "", 0);
+  const dropdownSelectText = new state.Token("text", "", 0);
+  const dropdownSelectClose = new state.Token("dropdown-select_open", "div", -1);
+  if (tabs.length) {
+    const [start] = (_a = tabs[0].listItem.map) != null ? _a : [null];
+    if (start == null) {
+      throw new Error("failed to parse line mapping");
+    }
+    const [_, end] = (_b = tabs[tabs.length - 1].listItem.map) != null ? _b : [null, null];
+    if (end == null) {
+      throw new Error("failed to parse line mapping");
+    }
+  }
+  dropdownOpen.block = true;
+  dropdownClose.block = true;
+  dropdownSelectOpen.block = true;
+  dropdownSelectClose.block = true;
+  const [activeTab, ...restActiveTabs] = tabs.filter(isTabSelected);
+  if (restActiveTabs.length) {
+    throw new Error("Unable to dropdown tabs with more than 1 active element");
+  }
+  dropdownOpen.attrSet(
+    "class",
+    [TABS_CLASSNAME, containerClasses, TABS_DROPDOWN_CLASSNAME].filter(Boolean).join(" ")
+  );
+  dropdownOpen.attrSet(GROUP_DATA_KEY, tabsGroup);
+  dropdownOpen.attrSet(TAB_DATA_VARIANT, "dropdown");
+  dropdownSelectOpen.attrSet("role", "tablist");
+  dropdownSelectOpen.attrSet("class", TABS_DROPDOWN_SELECT);
+  if (activeTab) {
+    dropdownSelectOpen.attrJoin("class", "filled");
+  }
+  dropdownSelectText.content = activeTab ? activeTab.name : "-";
+  dropdownSelectInline.children = [dropdownSelectText];
+  dropdownTokens.push(
+    dropdownOpen,
+    dropdownSelectOpen,
+    dropdownSelectInline,
+    dropdownSelectClose
+  );
+  const dropdownMenuOpen = new state.Token("dropdown-menu_open", "ul", 1);
+  const dropdownMenuClose = new state.Token("dropdown-menu_close", "ul", -1);
+  dropdownMenuOpen.attrSet("class", TABS_DROPDOWN_MENU_CLASSNAME);
+  const menuTokens = tabs.flatMap((tab) => {
+    const menuListItemOpen = new state.Token("dropdown-menu-item_open", "li", 1);
+    const menuListItemClose = new state.Token("dropdown-menu-item_close", "li", -1);
+    const menuListItemText = new state.Token("text", "", 0);
+    const menuListItemInline = new state.Token("inline", "", 0);
+    const tabId = getTabId(tab, { runId });
+    const tabKey = getTabKey(tab);
+    const isActive = tab === activeTab;
+    menuListItemOpen.attrSet(
+      "class",
+      [TAB_CLASSNAME, isActive && ACTIVE_CLASSNAME].filter(Boolean).join(" ")
+    );
+    menuListItemOpen.attrSet(TAB_DATA_ID, tabId);
+    menuListItemOpen.attrSet(TAB_DATA_KEY, tabKey);
+    menuListItemOpen.attrSet("aria-selected", String(isActive));
+    menuListItemText.content = tab.name;
+    menuListItemInline.children = [menuListItemText];
+    return [menuListItemOpen, menuListItemInline, menuListItemClose];
+  });
+  dropdownTokens.push(dropdownMenuOpen, ...menuTokens, dropdownMenuClose);
+  for (let i = 0; i < tabs.length; i++) {
+    const tabPanelOpen = new state.Token("tab-panel_open", "div", 1);
+    const tabPanelClose = new state.Token("tab-panel_close", "div", -1);
+    const tab = tabs[i];
+    const tabId = getTabId(tab, { runId });
+    const didTabHasActiveAttr = isTabSelected(tab);
+    tab.name = getName(tab);
+    const tabPanelId = generateID();
+    tabPanelOpen.block = true;
+    tabPanelClose.block = true;
+    tabPanelOpen.attrSet("id", tabPanelId);
+    tabPanelOpen.attrSet("class", TAB_PANEL_CLASSNAME);
+    tabPanelOpen.attrSet("role", "tabpanel");
+    tabPanelOpen.attrSet("aria-labelledby", tabId);
+    tabPanelOpen.attrSet("data-title", tab.name);
+    if (didTabHasActiveAttr) {
+      tabPanelOpen.attrJoin("class", ACTIVE_CLASSNAME);
+    }
+    dropdownTokens.push(tabPanelOpen, ...tabs[i].tokens, tabPanelClose);
+  }
+  dropdownTokens.push(dropdownClose);
+  return dropdownTokens;
+};
+
+// src/plugin/variants/accordion.ts
+var accordion = (tabs, state, { containerClasses, tabsGroup, runId }) => {
+  var _a, _b;
+  const tabsTokens = [];
+  const tabsOpen = new state.Token("tabs_open", "div", 1);
+  const tabsClose = new state.Token("tabs_close", "div", -1);
+  if (tabs.length) {
+    const [start] = (_a = tabs[0].listItem.map) != null ? _a : [null];
+    if (start == null) {
+      throw new Error("failed to parse line mapping");
+    }
+    const [_, end] = (_b = tabs[tabs.length - 1].listItem.map) != null ? _b : [null, null];
+    if (end == null) {
+      throw new Error("failed to parse line mapping");
+    }
+  }
+  tabsOpen.block = true;
+  tabsClose.block = true;
+  const activeTabsCount = tabs.filter(isTabSelected).length;
+  if (activeTabsCount > 1) {
+    throw new Error("Unable to render tabs with more than 1 active element");
+  }
+  tabsOpen.attrSet(
+    "class",
+    [TABS_CLASSNAME, containerClasses, TABS_ACCORDION_CLASSNAME].filter(Boolean).join(" ")
+  );
+  tabsOpen.attrSet(GROUP_DATA_KEY, tabsGroup);
+  tabsOpen.attrSet(TAB_DATA_VARIANT, "accordion" /* Accordion */);
+  tabsTokens.push(tabsOpen);
+  for (let i = 0; i < tabs.length; i++) {
+    const tabOpen = new state.Token("tab_open", "div", 1);
+    const tabInline = new state.Token("inline", "", 0);
+    const tabText = new state.Token("text", "", 0);
+    const tabClose = new state.Token("tab_close", "div", -1);
+    const tabPanelOpen = new state.Token("tab-panel_open", "div", 1);
+    const tabPanelClose = new state.Token("tab-panel_close", "div", -1);
+    tabOpen.map = tabs[i].listItem.map;
+    tabOpen.markup = tabs[i].listItem.markup;
+    const tab = tabs[i];
+    const tabId = getTabId(tab, { runId });
+    const tabKey = getTabKey(tab);
+    const didTabHasActiveAttr = isTabSelected(tab);
+    tab.name = getName(tab);
+    const tabPanelId = generateID();
+    tabOpen.map = tabs[i].listItem.map;
+    tabOpen.markup = tabs[i].listItem.markup;
+    tabText.content = tabs[i].name;
+    tabInline.children = [tabText];
+    tabOpen.block = true;
+    tabClose.block = true;
+    tabPanelOpen.block = true;
+    tabPanelClose.block = true;
+    tabOpen.attrSet(TAB_DATA_ID, tabId);
+    tabOpen.attrSet(TAB_DATA_KEY, tabKey);
+    tabOpen.attrSet("class", [TAB_CLASSNAME, TAB_GROUP_CLASSNAME].join(" "));
+    tabOpen.attrSet("role", "tab");
+    tabOpen.attrSet("aria-controls", tabPanelId);
+    tabOpen.attrSet("aria-selected", "false");
+    tabOpen.attrSet("tabindex", i === 0 ? "0" : "-1");
+    tabOpen.attrSet(TAB_ACTIVE_KEY, "false");
+    tabPanelOpen.attrSet("id", tabPanelId);
+    tabPanelOpen.attrSet("class", TAB_PANEL_CLASSNAME);
+    tabPanelOpen.attrSet("role", "tabpanel");
+    tabPanelOpen.attrSet("aria-labelledby", tabId);
+    tabPanelOpen.attrSet("data-title", tab.name);
+    if (didTabHasActiveAttr) {
+      tabPanelOpen.attrSet(TAB_FORCED_OPEN, "true");
+      tabPanelOpen.attrJoin("class", ACTIVE_CLASSNAME);
+      tabOpen.attrJoin("class", ACTIVE_CLASSNAME);
+    }
+    tabsTokens.push(tabOpen, tabInline, tabClose);
+    tabsTokens.push(tabPanelOpen, ...tabs[i].tokens, tabPanelClose);
+  }
+  tabsTokens.push(tabsClose);
+  return tabsTokens;
+};
+
+// src/plugin/variants/index.ts
+var generateByType = {
+  regular,
+  radio,
+  dropdown,
+  accordion
+};
+var generateTokensByType = (type) => {
+  return generateByType[type];
+};
+
+// src/plugin/generate.ts
+function generateTabsTokens(tabs, state, props2) {
+  const tokens = generateTokensByType(props2.variant)(tabs, state, props2);
+  return tokens;
 }
-function findCloseTokenIdx(tokens, idx) {
+
+// src/plugin/find.ts
+var import_token = __toESM(require("markdown-it/lib/token"));
+function findCloseTokenIndex(tokens, idx) {
   let level = 0;
   let i = idx;
   while (i < tokens.length) {
@@ -416,18 +630,14 @@ function matchCloseToken(tokens, i) {
   return tokens[i].type === "paragraph_open" && tokens[i + 1].type === "inline" && tokens[i + 1].content.trim() === "{% endlist %}";
 }
 function matchOpenToken(tokens, i) {
-  return tokens[i].type === "paragraph_open" && tokens[i + 1].type === "inline" && props(tokens[i + 1].content);
+  return tokens[i].type === "paragraph_open" && tokens[i + 1].type === "inline" && tokens[i + 1].content.match(TAB_RE);
 }
-function props(target) {
-  const matched = target.match(TAB_RE);
-  if (!matched) {
-    return void 0;
-  }
-  const clean = trim(matched[0].replace("list tabs", ""));
+function props(content) {
+  const clean = trim(content.replace("list tabs", ""));
   const props2 = clean.split(" ");
   const result = {
     content: clean,
-    orientation: "horizontal",
+    variant: "regular" /* Regular */,
     group: `${DEFAULT_TABS_GROUP_PREFIX}${generateID()}`
   };
   for (const prop of props2) {
@@ -435,7 +645,9 @@ function props(target) {
     switch (key) {
       case "horizontal":
       case "radio":
-        result.orientation = key;
+      case "dropdown":
+      case "accordion":
+        result.variant = key;
         break;
       case "group":
         result.group = unquote(value);
@@ -445,11 +657,104 @@ function props(target) {
   }
   return result;
 }
+function tryToFindTabs(tokens, index) {
+  const match = matchOpenToken(tokens, index);
+  const openTag = match && match[0];
+  const isNotEscaped = openTag && !(openTag.startsWith("`") && openTag.endsWith("`"));
+  if (!match || !isNotEscaped) {
+    return {
+      step: 1
+    };
+  }
+  const closeTokenIndex = findCloseTokenIndex(tokens, index + 3);
+  if (!closeTokenIndex) {
+    tokens[index].attrSet("YFM005", "true");
+    return {
+      step: 3
+    };
+  }
+  return {
+    content: openTag,
+    closeTokenIndex
+  };
+}
+function findTabs(tokens, idx, closeTokenIdx) {
+  const tabs = [];
+  let i = idx;
+  let nestedLevel = -1;
+  let pending = {
+    name: "",
+    tokens: [],
+    listItem: new import_token.default("list_item_open", "", 0)
+  };
+  while (i < tokens.length) {
+    const token = tokens[i];
+    switch (token.type) {
+      case "ordered_list_open":
+      case "bullet_list_open":
+        if (nestedLevel > -1) {
+          pending.tokens.push(token);
+        }
+        nestedLevel++;
+        break;
+      case "list_item_open":
+        if (nestedLevel) {
+          pending.tokens.push(token);
+        } else {
+          pending = { name: "", tokens: [], listItem: token };
+        }
+        break;
+      case "list_item_close":
+        if (nestedLevel) {
+          pending.tokens.push(token);
+        } else {
+          tabs.push(pending);
+        }
+        break;
+      case "ordered_list_close":
+      case "bullet_list_close":
+        if (!nestedLevel) {
+          return tabs;
+        }
+        nestedLevel--;
+        pending.tokens.push(token);
+        break;
+      case "paragraph_open":
+        if (i === closeTokenIdx && tokens[i + 1].content && tokens[i + 1].content.trim() === "{% endlist %}") {
+          if (pending && !nestedLevel) {
+            tabs.push(pending);
+          }
+          return tabs;
+        }
+        if (!pending.name && tokens[i + 1].type === "inline") {
+          pending.name = tokens[i + 1].content;
+          i += 2;
+        } else {
+          pending.tokens.push(token);
+        }
+        break;
+      default:
+        pending.tokens.push(token);
+    }
+    i++;
+  }
+  return tabs;
+}
+
+// src/plugin/transform.ts
+var defaultFeatures = {
+  enabledVariants: {
+    regular: true,
+    radio: true
+  }
+};
+var runsCounter = 0;
 function transform({
   runtimeJsPath = "_assets/tabs-extension.js",
   runtimeCssPath = "_assets/tabs-extension.css",
   containerClasses = "",
-  bundle = true
+  bundle = true,
+  features = defaultFeatures
 } = {}) {
   return function tabs(md, options) {
     const { output = "." } = options || {};
@@ -460,37 +765,29 @@ function transform({
       let i = 0;
       let tabsAreInserted = false;
       while (i < tokens.length) {
-        const match = matchOpenToken(tokens, i);
-        const openTag = match && match.content;
-        const isNotEscaped = openTag && !(openTag.startsWith("`") && openTag.endsWith("`"));
-        if (!match || !isNotEscaped) {
-          i++;
+        const result = tryToFindTabs(tokens, i);
+        if ("step" in result) {
+          i += result.step;
           continue;
         }
-        const closeTokenIdx = findCloseTokenIdx(tokens, i + 3);
-        if (!closeTokenIdx) {
-          tokens[i].attrSet("YFM005", "true");
-          i += 3;
-          continue;
+        const { content, closeTokenIndex } = result;
+        const parsedProps = props(content);
+        if (!features.enabledVariants[parsedProps.variant]) {
+          parsedProps.variant = "regular" /* Regular */;
         }
-        const tabsGroup = match.group;
-        const { tabs: tabs2 } = findTabs(state.tokens, i + 3, closeTokenIdx);
+        const tabs2 = findTabs(state.tokens, i + 3, closeTokenIndex);
         if (tabs2.length > 0) {
-          insertTabs(
-            tabs2,
-            state,
-            match.orientation,
-            { start: i, end: closeTokenIdx + 2 },
-            {
-              containerClasses,
-              tabsGroup,
-              runId
-            }
-          );
+          const tabsTokens = generateTabsTokens(tabs2, state, {
+            containerClasses,
+            tabsGroup: parsedProps.group,
+            variant: parsedProps.variant,
+            runId
+          });
+          state.tokens.splice(i, closeTokenIndex - i + 3, ...tabsTokens);
           i++;
           tabsAreInserted = true;
         } else {
-          state.tokens.splice(i, closeTokenIdx - i + 3);
+          state.tokens.splice(i, closeTokenIndex - i + 3);
         }
       }
       if (tabsAreInserted) {