@hyperbook/markdown 0.44.1 → 0.45.0

package/dist/index.js

@@ -61265,6 +61265,7 @@ function remarkDirectiveTabs_default(ctx) {
           if (!tabsId) {
             tabsId = hash(node3);
           }
+          const instanceId = hash(node3);
           registerDirective(
             file,
             "tabs",
@@ -61291,8 +61292,23 @@ function remarkDirectiveTabs_default(ctx) {
             }
             tabTitleElements.push({
               type: "element",
-              tagName: "button",
+              tagName: "input",
               properties: {
+                type: "radio",
+                name: `tabs-${instanceId}`,
+                id: `tab-${instanceId}-${tabId}`,
+                "data-tab-id": tabId,
+                "data-tabs-id": tabsId,
+                class: "tab-input",
+                checked: first
+              },
+              children: []
+            });
+            tabTitleElements.push({
+              type: "element",
+              tagName: "label",
+              properties: {
+                for: `tab-${instanceId}-${tabId}`,
                 "data-tab-id": tabId,
                 "data-tabs-id": tabsId,
                 class: "tab" + (first ? " active" : "")
@@ -61312,7 +61328,15 @@ function remarkDirectiveTabs_default(ctx) {
             });
             first = false;
           }
+          const radioInputs = [];
+          const labelElements = [];
+          for (let i = 0; i < tabTitleElements.length; i += 2) {
+            radioInputs.push(tabTitleElements[i]);
+            labelElements.push(tabTitleElements[i + 1]);
+          }
           data.hChildren = [
+            ...radioInputs,
+            // Radio inputs as direct children
             {
               type: "element",
               tagName: "div",
@@ -61320,7 +61344,8 @@ function remarkDirectiveTabs_default(ctx) {
                 class: "tabs",
                 "data-tabs-id": tabsId
               },
-              children: tabTitleElements
+              children: labelElements
+              // Only labels in tabs div
             },
             ...tabContentElements
           ];
@@ -62509,7 +62534,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
         type: "element",
         tagName: "html",
         properties: {
-          lang: config2.language || "es"
+          lang: config2.language || "es",
+          class: "no-js"
         },
         children: [
           {
@@ -62649,6 +62675,19 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                   }
                 ]
               },
+              {
+                type: "element",
+                tagName: "script",
+                properties: {},
+                children: [
+                  {
+                    type: "raw",
+                    value: `
+// Remove no-js class as soon as JavaScript is available
+document.documentElement.classList.remove('no-js');`
+                  }
+                ]
+              },
               {
                 type: "element",
                 tagName: "script",
@@ -62979,69 +63018,7 @@ var makeNavigationPageElement = (ctx, page) => {
 };
 var makeNavigationSectionElement = (ctx, section) => {
   const { virtual, isEmpty, href, name, pages, sections, expanded } = section;
-  const children = [];
   let isExpanded = ctx.navigation.current?.href?.startsWith(href || "") || expanded;
-  if (!virtual) {
-    if (isEmpty) {
-      children.push({
-        type: "element",
-        tagName: "div",
-        properties: {
-          class: [
-            "collapsible",
-            "name",
-            "empty",
-            ctx.navigation.current?.href === href ? "active" : "",
-            isExpanded ? "expanded" : ""
-          ].join(" ")
-        },
-        children: [
-          {
-            type: "element",
-            tagName: "span",
-            properties: {
-              class: "label"
-            },
-            children: [
-              {
-                type: "text",
-                value: name
-              }
-            ]
-          }
-        ]
-      });
-    } else {
-      children.push({
-        type: "element",
-        tagName: "div",
-        properties: {
-          class: [
-            "collapsible",
-            "name",
-            ctx.navigation.current?.href === href ? "active" : "",
-            isExpanded ? "expanded" : ""
-          ].join(" ")
-        },
-        children: [
-          {
-            type: "element",
-            tagName: "a",
-            properties: {
-              href: ctx.makeUrl(href || "", "book"),
-              class: "label"
-            },
-            children: [
-              {
-                type: "text",
-                value: name
-              }
-            ]
-          }
-        ]
-      });
-    }
-  }
   const pagesElements = pages.filter((page) => !page.hide).map((page) => makeNavigationPageElement(ctx, page));
   const linksElements = [];
   if (pagesElements.length > 0) {
@@ -63056,22 +63033,86 @@ var makeNavigationSectionElement = (ctx, section) => {
   }
   const sectionElements = sections.filter((s3) => !s3.hide).map((s3) => makeNavigationSectionElement(ctx, s3));
   linksElements.push(...sectionElements);
-  children.push({
-    type: "element",
-    tagName: "div",
-    properties: {
-      class: virtual ? "links" : "collapsible-content links"
-    },
-    children: linksElements
-  });
+  if (virtual) {
+    return {
+      type: "element",
+      tagName: "div",
+      properties: {
+        class: "virtual-section"
+      },
+      children: [
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "links"
+          },
+          children: linksElements
+        }
+      ]
+    };
+  }
+  const summaryChildren = [];
+  if (isEmpty) {
+    summaryChildren.push({
+      type: "element",
+      tagName: "span",
+      properties: {
+        class: "label"
+      },
+      children: [
+        {
+          type: "text",
+          value: name
+        }
+      ]
+    });
+  } else {
+    summaryChildren.push({
+      type: "element",
+      tagName: "a",
+      properties: {
+        href: ctx.makeUrl(href || "", "book"),
+        class: "label"
+      },
+      children: [
+        {
+          type: "text",
+          value: name
+        }
+      ]
+    });
+  }
   return {
     type: "element",
-    tagName: "div",
+    tagName: "details",
     properties: {
       "data-id": `_nav:${href}`,
-      class: virtual ? "virtual-section" : "section"
+      class: [
+        "section",
+        ctx.navigation.current?.href === href ? "active" : "",
+        isEmpty ? "empty" : ""
+      ].join(" "),
+      open: isExpanded
     },
-    children
+    children: [
+      {
+        type: "element",
+        tagName: "summary",
+        properties: {
+          class: "name"
+        },
+        children: summaryChildren
+      },
+      {
+        type: "element",
+        tagName: "div",
+        properties: {
+          class: "links"
+        },
+        children: linksElements
+      }
+    ]
   };
 };
 var makeNavigationElements = (ctx) => {
@@ -64338,10 +64379,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       return [
         {
           type: "element",
-          tagName: "button",
-          properties: {
-            class: "collapsible"
-          },
+          tagName: "summary",
+          properties: {},
           children: [
             {
               type: "text",
@@ -64353,7 +64392,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
           type: "element",
           tagName: "div",
           properties: {
-            class: "collapsible-content"
+            class: "content"
           },
           children: element5.children.flatMap(transformCollapsible)
         }
@@ -64376,7 +64415,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       expectContainerDirective(node3, file, name);
       registerDirective(file, name, [], ["style.css"], []);
       node3.attributes = {};
-      data.hName = "div";
+      data.hName = "details";
       data.hProperties = {
         class: "directive-collapsible",
         "data-id": id
@@ -64388,10 +64427,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       data.hChildren = [
         {
           type: "element",
-          tagName: "button",
-          properties: {
-            class: "collapsible"
-          },
+          tagName: "summary",
+          properties: {},
           children: [
             {
               type: "text",
@@ -64403,7 +64440,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
           type: "element",
           tagName: "div",
           properties: {
-            class: "collapsible-content"
+            class: "content"
           },
           children: collapsibleContent
         }