hyperbook 0.72.1 → 0.72.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,34 +4,39 @@ var hyperbook = (function () {
4
4
  * @param {HTMLElement} root - The root element to initialize.
5
5
  */
6
6
  const initCollapsibles = (root) => {
7
- const collapsibleEls = root.getElementsByClassName("collapsible");
8
- for (let collapsible of collapsibleEls) {
9
- const id = collapsible.parentElement.getAttribute("data-id");
10
-
11
- if (id.startsWith("_nav:") && !collapsible.classList.contains("empty")) {
12
- const link = collapsible.querySelector("a");
7
+ // Handle both navigation sections and directive-collapsible elements
8
+ const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
9
+ for (let details of detailsEls) {
10
+ const id = details.getAttribute("data-id");
11
+
12
+ // Prevent link clicks from toggling the details element in navigation
13
+ if (id && id.startsWith("_nav:") && !details.classList.contains("empty")) {
14
+ const link = details.querySelector("summary a");
13
15
  link?.addEventListener("click", (event) => {
14
16
  event.stopPropagation();
15
17
  });
16
18
  }
17
- collapsible.addEventListener("click", () => {
18
- collapsible.classList.toggle("expanded");
19
+
20
+ // Listen for toggle events to persist state and sync with other elements
21
+ details.addEventListener("toggle", () => {
19
22
  if (id) {
20
- store.collapsibles.get(id).then((result) => {
21
- if (!result) {
22
- store.collapsibles.put({ id }).then(() => {
23
- updateCollapsibles(root);
24
- });
25
- } else {
26
- store.collapsibles.delete(id).then(() => {
27
- updateCollapsibles(root);
28
- });
23
+ if (details.open) {
24
+ store.collapsibles.put({ id });
25
+ } else {
26
+ store.collapsibles.delete(id);
27
+ }
28
+
29
+ // Sync all elements with the same ID
30
+ const allWithSameId = document.querySelectorAll(`[data-id="${id}"]`);
31
+ for (let el of allWithSameId) {
32
+ if (el !== details && el.tagName === "DETAILS") {
33
+ el.open = details.open;
29
34
  }
30
- });
35
+ }
31
36
  }
32
37
 
33
38
  setTimeout(() => {
34
- window.dispatchEvent(new Event("resize")); // geogebra new this in order resize the applet
39
+ window.dispatchEvent(new Event("resize")); // geogebra needs this to resize the applet
35
40
  }, 100);
36
41
  });
37
42
  }
@@ -43,15 +48,15 @@ var hyperbook = (function () {
43
48
  */
44
49
  const updateCollapsibles = (root) => {
45
50
  store.collapsibles.toArray().then((collapsibles) => {
46
- const collapsibleEls = root.getElementsByClassName("collapsible");
47
- for (let collapsibleEl of collapsibleEls) {
48
- const id = collapsibleEl.parentElement.getAttribute("data-id");
51
+ const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
52
+ for (let details of detailsEls) {
53
+ const id = details.getAttribute("data-id");
49
54
  if (id) {
50
- const expanded = collapsibles.some((c) => c.id === id);
51
- if (expanded) {
52
- collapsibleEl.classList.add("expanded");
53
- } else if (!id.startsWith("_nav:")) {
54
- collapsibleEl.classList.remove("expanded");
55
+ const shouldBeOpen = collapsibles.some((c) => c.id === id);
56
+ // Only update if state differs and it's not a navigation section
57
+ // (navigation sections are auto-expanded based on current page)
58
+ if (!id.startsWith("_nav:") && details.open !== shouldBeOpen) {
59
+ details.open = shouldBeOpen;
55
60
  }
56
61
  }
57
62
  }
@@ -2,7 +2,7 @@
2
2
  display: flow-root;
3
3
  }
4
4
 
5
- .directive-collapsible>button {
5
+ .directive-collapsible>summary {
6
6
  width: 100%;
7
7
  text-align: left;
8
8
  border-style: solid;
@@ -13,37 +13,46 @@
13
13
  padding: 8px 16px;
14
14
  border-radius: 4px;
15
15
  margin-bottom: 10px;
16
+ list-style: none;
17
+ color: var(--color-text);
18
+ border-color: var(--color-spacer);
19
+ background-color: var(--color-nav);
20
+ }
21
+
22
+ .directive-collapsible>summary::-webkit-details-marker {
23
+ display: none;
16
24
  }
17
25
 
18
- .directive-collapsible>button.expanded {
26
+ .directive-collapsible>summary::marker {
27
+ display: none;
28
+ }
29
+
30
+ .directive-collapsible[open]>summary {
19
31
  border-bottom-left-radius: 0px;
20
32
  border-bottom-right-radius: 0px;
21
33
  margin-bottom: 0px;
22
34
  }
23
35
 
24
- .directive-collapsible>button:after {
36
+ .directive-collapsible>summary:after {
25
37
  content: "\02795";
26
38
  /* Unicode character for "plus" sign (+) */
27
39
  font-size: 13px;
28
40
  float: right;
29
41
  margin-left: 5px;
42
+ color: var(--color-text);
30
43
  }
31
44
 
32
- .directive-collapsible>button.expanded:after {
45
+ .directive-collapsible[open]>summary:after {
33
46
  content: "\2796";
34
47
  /* Unicode character for "minus" sign (-) */
35
48
  }
36
49
 
37
- .directive-collapsible .collapsible-content {
50
+ .directive-collapsible .content {
38
51
  border-top: none;
39
52
  margin-bottom: 10px;
40
53
  }
41
54
 
42
- .directive-collapsible .collapsible-content {
43
- display: none;
44
- }
45
-
46
- .directive-collapsible>button.expanded+.collapsible-content {
55
+ .directive-collapsible[open] .content {
47
56
  display: block;
48
57
  border-style: solid;
49
58
  border-width: 1px;
@@ -53,18 +62,5 @@
53
62
  margin-bottom: 10px;
54
63
  border-bottom-left-radius: 4px;
55
64
  border-bottom-right-radius: 4px;
56
- }
57
-
58
- .directive-collapsible>button {
59
- color: var(--color-text);
60
- border-color: var(--color-spacer);
61
- background-color: var(--color-nav);
62
- }
63
-
64
- .directive-collapsible>button:after {
65
- color: var(--color-text);
66
- }
67
-
68
- .directive-collapsible .collapsible-content {
69
65
  border-color: var(--color-spacer);
70
66
  }
@@ -1,43 +1,47 @@
1
1
  hyperbook.tabs = (function () {
2
2
  const init = (root) => {
3
- let allTabs = root.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
4
- allTabs.forEach((tab) => {
5
- const tabsId = tab.getAttribute("data-tabs-id");
6
- const tabId = tab.getAttribute("data-tab-id");
7
- tab.addEventListener("click", () => {
8
- store.tabs.put({
9
- id: tabsId,
10
- active: tabId,
11
- });
12
- selectTab(tabsId, tabId);
3
+ // Find all radio inputs for tabs
4
+ let allTabInputs = root.querySelectorAll(".directive-tabs .tab-input[data-tabs-id]");
5
+ allTabInputs.forEach((input) => {
6
+ const tabsId = input.getAttribute("data-tabs-id");
7
+ const tabId = input.getAttribute("data-tab-id");
8
+
9
+ // Listen for changes on radio inputs
10
+ input.addEventListener("change", () => {
11
+ if (input.checked) {
12
+ store.tabs.put({
13
+ id: tabsId,
14
+ active: tabId,
15
+ });
16
+
17
+ // Sync all radio inputs with the same tabs-id and tab-id
18
+ syncAllTabs(tabsId, tabId);
19
+ }
13
20
  });
14
21
  });
22
+
23
+ // Restore saved tab selections
15
24
  store.tabs.each((result) => {
16
25
  selectTab(result.id, result.active);
17
26
  });
18
27
  };
19
28
 
20
- function selectTab(tabsId, tabId) {
21
- let relevantTabButtons = document.querySelectorAll(
22
- `.directive-tabs .tab[data-tabs-id="${tabsId}"]`
23
- );
24
- relevantTabButtons.forEach((e) => {
25
- e.className = e.className.replace(" active", "");
26
- if (e.getAttribute("data-tab-id") == tabId) {
27
- e.className += " active";
28
- }
29
- });
30
- let relevantTabPanels = document.querySelectorAll(
31
- `.directive-tabs .tabpanel[data-tabs-id="${tabsId}"]`
29
+ function syncAllTabs(tabsId, tabId) {
30
+ // Find all radio inputs with the same tabs-id and tab-id across the page
31
+ const allMatchingInputs = document.querySelectorAll(
32
+ `.directive-tabs .tab-input[data-tabs-id="${tabsId}"][data-tab-id="${tabId}"]`
32
33
  );
33
- relevantTabPanels.forEach((e) => {
34
- e.className = e.className.replace(" active", "");
35
- if (e.getAttribute("data-tab-id") == tabId) {
36
- e.className += " active";
37
- }
34
+
35
+ allMatchingInputs.forEach((input) => {
36
+ input.checked = true;
38
37
  });
39
38
  }
40
39
 
40
+ function selectTab(tabsId, tabId) {
41
+ // Sync all tabs with this combination
42
+ syncAllTabs(tabsId, tabId);
43
+ }
44
+
41
45
  init(document.body);
42
46
 
43
47
  // Observe for new tabs added to the DOM
@@ -10,6 +10,15 @@
10
10
  border-width: 1px;
11
11
  border-top-right-radius: 4px;
12
12
  border-top-left-radius: 4px;
13
+ background-color: var(--color-nav);
14
+ border-color: var(--color-spacer);
15
+ }
16
+
17
+ /* Hide radio inputs */
18
+ .directive-tabs .tab-input {
19
+ position: absolute;
20
+ opacity: 0;
21
+ pointer-events: none;
13
22
  }
14
23
 
15
24
  .directive-tabs > .tabs .tab {
@@ -23,6 +32,7 @@
23
32
  padding: 8px 16px;
24
33
  transition: 0.3s;
25
34
  border-bottom: 4px solid transparent;
35
+ color: var(--color-text);
26
36
  }
27
37
 
28
38
  .directive-tabs > .tabpanel {
@@ -34,33 +44,106 @@
34
44
  margin-bottom: 12px;
35
45
  border-bottom-right-radius: 4px;
36
46
  border-bottom-left-radius: 4px;
47
+ border-color: var(--color-spacer);
48
+ display: none;
37
49
  }
38
50
 
39
- .directive-tabs .tabs {
40
- background-color: var(--color-nav);
41
- border-color: var(--color-spacer);
51
+ .directive-tabs .tabs .tab:hover {
52
+ border-bottom-color: var(--color-spacer);
53
+ color: var(--color-brand);
42
54
  }
43
55
 
44
- .directive-tabs .tab {
45
- color: var(--color-text);
56
+ /* Style active tab based on radio button state using :has() */
57
+ /* Check each input position and style the corresponding label */
58
+ .directive-tabs:has(> .tab-input:nth-of-type(1):checked) .tabs .tab:nth-of-type(1) {
59
+ border-bottom-color: var(--color-brand);
60
+ color: var(--color-brand);
46
61
  }
47
62
 
48
- .directive-tabs .tabs .tab:hover {
49
- border-bottom-color: var(--color-spacer);
63
+ .directive-tabs:has(> .tab-input:nth-of-type(2):checked) .tabs .tab:nth-of-type(2) {
64
+ border-bottom-color: var(--color-brand);
50
65
  color: var(--color-brand);
51
66
  }
52
67
 
53
- .directive-tabs .tabs .tab.active {
68
+ .directive-tabs:has(> .tab-input:nth-of-type(3):checked) .tabs .tab:nth-of-type(3) {
54
69
  border-bottom-color: var(--color-brand);
55
70
  color: var(--color-brand);
56
71
  }
57
72
 
58
- .directive-tabs .tabpanel {
59
- border-color: var(--color-spacer);
60
- display: none;
73
+ .directive-tabs:has(> .tab-input:nth-of-type(4):checked) .tabs .tab:nth-of-type(4) {
74
+ border-bottom-color: var(--color-brand);
75
+ color: var(--color-brand);
76
+ }
77
+
78
+ .directive-tabs:has(> .tab-input:nth-of-type(5):checked) .tabs .tab:nth-of-type(5) {
79
+ border-bottom-color: var(--color-brand);
80
+ color: var(--color-brand);
81
+ }
82
+
83
+ .directive-tabs:has(> .tab-input:nth-of-type(6):checked) .tabs .tab:nth-of-type(6) {
84
+ border-bottom-color: var(--color-brand);
85
+ color: var(--color-brand);
86
+ }
87
+
88
+ .directive-tabs:has(> .tab-input:nth-of-type(7):checked) .tabs .tab:nth-of-type(7) {
89
+ border-bottom-color: var(--color-brand);
90
+ color: var(--color-brand);
91
+ }
92
+
93
+ .directive-tabs:has(> .tab-input:nth-of-type(8):checked) .tabs .tab:nth-of-type(8) {
94
+ border-bottom-color: var(--color-brand);
95
+ color: var(--color-brand);
96
+ }
97
+
98
+ .directive-tabs:has(> .tab-input:nth-of-type(9):checked) .tabs .tab:nth-of-type(9) {
99
+ border-bottom-color: var(--color-brand);
100
+ color: var(--color-brand);
101
+ }
102
+
103
+ .directive-tabs:has(> .tab-input:nth-of-type(10):checked) .tabs .tab:nth-of-type(10) {
104
+ border-bottom-color: var(--color-brand);
105
+ color: var(--color-brand);
106
+ }
107
+
108
+ /* Show tabpanel based on checked radio input using general sibling combinator */
109
+ /* Note: nth-of-type counts by element type, and .tabs div is the first div */
110
+ .directive-tabs > .tab-input:nth-of-type(1):checked ~ .tabpanel:nth-of-type(2) {
111
+ display: block;
112
+ }
113
+
114
+ .directive-tabs > .tab-input:nth-of-type(2):checked ~ .tabpanel:nth-of-type(3) {
115
+ display: block;
116
+ }
117
+
118
+ .directive-tabs > .tab-input:nth-of-type(3):checked ~ .tabpanel:nth-of-type(4) {
119
+ display: block;
120
+ }
121
+
122
+ .directive-tabs > .tab-input:nth-of-type(4):checked ~ .tabpanel:nth-of-type(5) {
123
+ display: block;
124
+ }
125
+
126
+ .directive-tabs > .tab-input:nth-of-type(5):checked ~ .tabpanel:nth-of-type(6) {
127
+ display: block;
128
+ }
129
+
130
+ .directive-tabs > .tab-input:nth-of-type(6):checked ~ .tabpanel:nth-of-type(7) {
131
+ display: block;
132
+ }
133
+
134
+ .directive-tabs > .tab-input:nth-of-type(7):checked ~ .tabpanel:nth-of-type(8) {
135
+ display: block;
136
+ }
137
+
138
+ .directive-tabs > .tab-input:nth-of-type(8):checked ~ .tabpanel:nth-of-type(9) {
139
+ display: block;
140
+ }
141
+
142
+ .directive-tabs > .tab-input:nth-of-type(9):checked ~ .tabpanel:nth-of-type(10) {
143
+ display: block;
61
144
  }
62
145
 
63
- .directive-tabs .tabpanel.active {
146
+ .directive-tabs > .tab-input:nth-of-type(10):checked ~ .tabpanel:nth-of-type(11) {
64
147
  display: block;
65
148
  }
66
149
 
@@ -33,6 +33,43 @@ side-drawer {
33
33
  width: 500px;
34
34
  }
35
35
 
36
+ /* Hide side-drawer when JavaScript is disabled */
37
+ .no-js side-drawer {
38
+ display: none;
39
+ }
40
+
41
+ /* Hide mobile nav toggle when JavaScript is disabled */
42
+ .no-js .mobile-nav .toggle {
43
+ display: none;
44
+ }
45
+
46
+ /* Hide TOC toggle when JavaScript is disabled */
47
+ .no-js #toc-toggle {
48
+ display: none;
49
+ }
50
+
51
+ /* Hide search button when JavaScript is disabled */
52
+ .no-js #search-toggle {
53
+ display: none;
54
+ }
55
+
56
+ /* Hide share button when JavaScript is disabled */
57
+ .no-js #share-button {
58
+ display: none;
59
+ }
60
+
61
+ /* Hide QR code button when JavaScript is disabled */
62
+ .no-js #qrcode-open {
63
+ display: none;
64
+ }
65
+
66
+ /* Hide export/import/reset links when JavaScript is disabled */
67
+ .no-js .export-icon,
68
+ .no-js .import-icon,
69
+ .no-js .reset-icon {
70
+ display: none;
71
+ }
72
+
36
73
  #nav-drawer {
37
74
  background: var(--color-nav);
38
75
  border-right-color: var(--color-nav-border);
@@ -588,7 +625,7 @@ nav li+li {
588
625
  margin-top: 4px;
589
626
  }
590
627
 
591
- .section>.name {
628
+ .section summary.name {
592
629
  display: flex;
593
630
  text-decoration: none;
594
631
  padding: 10px;
@@ -596,48 +633,44 @@ nav li+li {
596
633
  border-style: solid;
597
634
  width: 100%;
598
635
  user-select: none;
636
+ cursor: pointer;
637
+ list-style: none;
599
638
  }
600
639
 
601
- .section>.name>.label {
640
+ .section summary.name::-webkit-details-marker {
641
+ display: none;
642
+ }
643
+
644
+ .section summary.name::marker {
645
+ display: none;
646
+ }
647
+
648
+ .section summary.name>.label {
602
649
  flex: 1;
603
650
  text-decoration: none;
604
651
  }
605
652
 
606
- .section>.name>.toggle {
607
- text-align: right;
608
- background: none;
609
- border: none;
610
- font-size: 13px;
653
+ .section.empty summary.name {
654
+ cursor: default;
611
655
  }
612
656
 
613
- .collapsible {
614
- cursor: pointer;
657
+ .section.empty summary.name .label {
658
+ font-style: italic;
615
659
  }
616
660
 
617
- .collapsible:after {
661
+ .section summary.name:after {
618
662
  content: "\002B";
619
663
  width: 1.2rem;
620
664
  color: var(--color-text);
621
665
  font-weight: bold;
622
666
  text-align: right;
623
- float: right;
624
667
  margin-left: 5px;
625
668
  }
626
669
 
627
- .collapsible.expanded:after {
670
+ .section[open] summary.name:after {
628
671
  content: "\2212";
629
672
  }
630
673
 
631
- .collapsible-content {
632
- display: none;
633
- opacity: 0;
634
- }
635
-
636
- .collapsible.expanded+.collapsible-content {
637
- display: block;
638
- opacity: 1;
639
- }
640
-
641
674
  .section .section {
642
675
  margin-left: 16px;
643
676
  margin-bottom: 0px;
package/dist/index.js CHANGED
@@ -155707,6 +155707,7 @@ function remarkDirectiveTabs_default(ctx) {
155707
155707
  if (!tabsId) {
155708
155708
  tabsId = hash(node3);
155709
155709
  }
155710
+ const instanceId = hash(node3);
155710
155711
  registerDirective(
155711
155712
  file,
155712
155713
  "tabs",
@@ -155733,8 +155734,23 @@ function remarkDirectiveTabs_default(ctx) {
155733
155734
  }
155734
155735
  tabTitleElements.push({
155735
155736
  type: "element",
155736
- tagName: "button",
155737
+ tagName: "input",
155737
155738
  properties: {
155739
+ type: "radio",
155740
+ name: `tabs-${instanceId}`,
155741
+ id: `tab-${instanceId}-${tabId}`,
155742
+ "data-tab-id": tabId,
155743
+ "data-tabs-id": tabsId,
155744
+ class: "tab-input",
155745
+ checked: first
155746
+ },
155747
+ children: []
155748
+ });
155749
+ tabTitleElements.push({
155750
+ type: "element",
155751
+ tagName: "label",
155752
+ properties: {
155753
+ for: `tab-${instanceId}-${tabId}`,
155738
155754
  "data-tab-id": tabId,
155739
155755
  "data-tabs-id": tabsId,
155740
155756
  class: "tab" + (first ? " active" : "")
@@ -155754,7 +155770,15 @@ function remarkDirectiveTabs_default(ctx) {
155754
155770
  });
155755
155771
  first = false;
155756
155772
  }
155773
+ const radioInputs = [];
155774
+ const labelElements = [];
155775
+ for (let i = 0; i < tabTitleElements.length; i += 2) {
155776
+ radioInputs.push(tabTitleElements[i]);
155777
+ labelElements.push(tabTitleElements[i + 1]);
155778
+ }
155757
155779
  data.hChildren = [
155780
+ ...radioInputs,
155781
+ // Radio inputs as direct children
155758
155782
  {
155759
155783
  type: "element",
155760
155784
  tagName: "div",
@@ -155762,7 +155786,8 @@ function remarkDirectiveTabs_default(ctx) {
155762
155786
  class: "tabs",
155763
155787
  "data-tabs-id": tabsId
155764
155788
  },
155765
- children: tabTitleElements
155789
+ children: labelElements
155790
+ // Only labels in tabs div
155766
155791
  },
155767
155792
  ...tabContentElements
155768
155793
  ];
@@ -156951,7 +156976,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
156951
156976
  type: "element",
156952
156977
  tagName: "html",
156953
156978
  properties: {
156954
- lang: config2.language || "es"
156979
+ lang: config2.language || "es",
156980
+ class: "no-js"
156955
156981
  },
156956
156982
  children: [
156957
156983
  {
@@ -157091,6 +157117,19 @@ var rehypeHtmlStructure_default = (ctx) => () => {
157091
157117
  }
157092
157118
  ]
157093
157119
  },
157120
+ {
157121
+ type: "element",
157122
+ tagName: "script",
157123
+ properties: {},
157124
+ children: [
157125
+ {
157126
+ type: "raw",
157127
+ value: `
157128
+ // Remove no-js class as soon as JavaScript is available
157129
+ document.documentElement.classList.remove('no-js');`
157130
+ }
157131
+ ]
157132
+ },
157094
157133
  {
157095
157134
  type: "element",
157096
157135
  tagName: "script",
@@ -157421,69 +157460,7 @@ var makeNavigationPageElement = (ctx, page) => {
157421
157460
  };
157422
157461
  var makeNavigationSectionElement = (ctx, section) => {
157423
157462
  const { virtual, isEmpty, href, name, pages, sections, expanded } = section;
157424
- const children = [];
157425
157463
  let isExpanded = ctx.navigation.current?.href?.startsWith(href || "") || expanded;
157426
- if (!virtual) {
157427
- if (isEmpty) {
157428
- children.push({
157429
- type: "element",
157430
- tagName: "div",
157431
- properties: {
157432
- class: [
157433
- "collapsible",
157434
- "name",
157435
- "empty",
157436
- ctx.navigation.current?.href === href ? "active" : "",
157437
- isExpanded ? "expanded" : ""
157438
- ].join(" ")
157439
- },
157440
- children: [
157441
- {
157442
- type: "element",
157443
- tagName: "span",
157444
- properties: {
157445
- class: "label"
157446
- },
157447
- children: [
157448
- {
157449
- type: "text",
157450
- value: name
157451
- }
157452
- ]
157453
- }
157454
- ]
157455
- });
157456
- } else {
157457
- children.push({
157458
- type: "element",
157459
- tagName: "div",
157460
- properties: {
157461
- class: [
157462
- "collapsible",
157463
- "name",
157464
- ctx.navigation.current?.href === href ? "active" : "",
157465
- isExpanded ? "expanded" : ""
157466
- ].join(" ")
157467
- },
157468
- children: [
157469
- {
157470
- type: "element",
157471
- tagName: "a",
157472
- properties: {
157473
- href: ctx.makeUrl(href || "", "book"),
157474
- class: "label"
157475
- },
157476
- children: [
157477
- {
157478
- type: "text",
157479
- value: name
157480
- }
157481
- ]
157482
- }
157483
- ]
157484
- });
157485
- }
157486
- }
157487
157464
  const pagesElements = pages.filter((page) => !page.hide).map((page) => makeNavigationPageElement(ctx, page));
157488
157465
  const linksElements = [];
157489
157466
  if (pagesElements.length > 0) {
@@ -157498,22 +157475,86 @@ var makeNavigationSectionElement = (ctx, section) => {
157498
157475
  }
157499
157476
  const sectionElements = sections.filter((s3) => !s3.hide).map((s3) => makeNavigationSectionElement(ctx, s3));
157500
157477
  linksElements.push(...sectionElements);
157501
- children.push({
157502
- type: "element",
157503
- tagName: "div",
157504
- properties: {
157505
- class: virtual ? "links" : "collapsible-content links"
157506
- },
157507
- children: linksElements
157508
- });
157478
+ if (virtual) {
157479
+ return {
157480
+ type: "element",
157481
+ tagName: "div",
157482
+ properties: {
157483
+ class: "virtual-section"
157484
+ },
157485
+ children: [
157486
+ {
157487
+ type: "element",
157488
+ tagName: "div",
157489
+ properties: {
157490
+ class: "links"
157491
+ },
157492
+ children: linksElements
157493
+ }
157494
+ ]
157495
+ };
157496
+ }
157497
+ const summaryChildren = [];
157498
+ if (isEmpty) {
157499
+ summaryChildren.push({
157500
+ type: "element",
157501
+ tagName: "span",
157502
+ properties: {
157503
+ class: "label"
157504
+ },
157505
+ children: [
157506
+ {
157507
+ type: "text",
157508
+ value: name
157509
+ }
157510
+ ]
157511
+ });
157512
+ } else {
157513
+ summaryChildren.push({
157514
+ type: "element",
157515
+ tagName: "a",
157516
+ properties: {
157517
+ href: ctx.makeUrl(href || "", "book"),
157518
+ class: "label"
157519
+ },
157520
+ children: [
157521
+ {
157522
+ type: "text",
157523
+ value: name
157524
+ }
157525
+ ]
157526
+ });
157527
+ }
157509
157528
  return {
157510
157529
  type: "element",
157511
- tagName: "div",
157530
+ tagName: "details",
157512
157531
  properties: {
157513
157532
  "data-id": `_nav:${href}`,
157514
- class: virtual ? "virtual-section" : "section"
157533
+ class: [
157534
+ "section",
157535
+ ctx.navigation.current?.href === href ? "active" : "",
157536
+ isEmpty ? "empty" : ""
157537
+ ].join(" "),
157538
+ open: isExpanded
157515
157539
  },
157516
- children
157540
+ children: [
157541
+ {
157542
+ type: "element",
157543
+ tagName: "summary",
157544
+ properties: {
157545
+ class: "name"
157546
+ },
157547
+ children: summaryChildren
157548
+ },
157549
+ {
157550
+ type: "element",
157551
+ tagName: "div",
157552
+ properties: {
157553
+ class: "links"
157554
+ },
157555
+ children: linksElements
157556
+ }
157557
+ ]
157517
157558
  };
157518
157559
  };
157519
157560
  var makeNavigationElements = (ctx) => {
@@ -158780,10 +158821,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
158780
158821
  return [
158781
158822
  {
158782
158823
  type: "element",
158783
- tagName: "button",
158784
- properties: {
158785
- class: "collapsible"
158786
- },
158824
+ tagName: "summary",
158825
+ properties: {},
158787
158826
  children: [
158788
158827
  {
158789
158828
  type: "text",
@@ -158795,7 +158834,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
158795
158834
  type: "element",
158796
158835
  tagName: "div",
158797
158836
  properties: {
158798
- class: "collapsible-content"
158837
+ class: "content"
158799
158838
  },
158800
158839
  children: element5.children.flatMap(transformCollapsible)
158801
158840
  }
@@ -158818,7 +158857,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
158818
158857
  expectContainerDirective(node3, file, name);
158819
158858
  registerDirective(file, name, [], ["style.css"], []);
158820
158859
  node3.attributes = {};
158821
- data.hName = "div";
158860
+ data.hName = "details";
158822
158861
  data.hProperties = {
158823
158862
  class: "directive-collapsible",
158824
158863
  "data-id": id
@@ -158830,10 +158869,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
158830
158869
  data.hChildren = [
158831
158870
  {
158832
158871
  type: "element",
158833
- tagName: "button",
158834
- properties: {
158835
- class: "collapsible"
158836
- },
158872
+ tagName: "summary",
158873
+ properties: {},
158837
158874
  children: [
158838
158875
  {
158839
158876
  type: "text",
@@ -158845,7 +158882,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
158845
158882
  type: "element",
158846
158883
  tagName: "div",
158847
158884
  properties: {
158848
- class: "collapsible-content"
158885
+ class: "content"
158849
158886
  },
158850
158887
  children: collapsibleContent
158851
158888
  }
@@ -173486,7 +173523,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"application/1d-interleaved-parityfec
173486
173523
  /***/ ((module) => {
173487
173524
 
173488
173525
  "use strict";
173489
- module.exports = /*#__PURE__*/JSON.parse('{"name":"hyperbook","version":"0.72.1","author":"Mike Barkmin","homepage":"https://github.com/openpatch/hyperbook#readme","license":"MIT","bin":{"hyperbook":"./dist/index.js"},"files":["dist"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/openpatch/hyperbook.git","directory":"packages/hyperbook"},"bugs":{"url":"https://github.com/openpatch/hyperbook/issues"},"engines":{"node":">=12.22.0"},"scripts":{"version":"pnpm build","lint":"tsc --noEmit","dev":"ncc build ./index.ts -w -o dist/","build":"rimraf dist && ncc build ./index.ts -o ./dist/ --no-cache --no-source-map-register --external favicons --external sharp && node postbuild.mjs"},"dependencies":{"favicons":"^7.2.0"},"devDependencies":{"create-hyperbook":"workspace:*","@hyperbook/fs":"workspace:*","@hyperbook/markdown":"workspace:*","@hyperbook/types":"workspace:*","@pnpm/exportable-manifest":"1000.0.6","@types/archiver":"6.0.3","@types/async-retry":"1.4.9","@types/cross-spawn":"6.0.6","@types/lunr":"^2.3.7","@types/prompts":"2.4.9","@types/tar":"6.1.13","@types/ws":"^8.5.14","@vercel/ncc":"0.38.3","archiver":"7.0.1","async-retry":"1.3.3","chalk":"5.4.1","chokidar":"4.0.3","commander":"12.1.0","cpy":"11.1.0","cross-spawn":"7.0.6","domutils":"^3.2.2","extract-zip":"^2.0.1","got":"12.6.0","htmlparser2":"^10.0.0","lunr":"^2.3.9","lunr-languages":"^1.14.0","mime":"^4.0.6","prompts":"2.4.2","rimraf":"6.0.1","tar":"7.4.3","update-check":"1.5.4","ws":"^8.18.0"}}');
173526
+ module.exports = /*#__PURE__*/JSON.parse('{"name":"hyperbook","version":"0.72.2","author":"Mike Barkmin","homepage":"https://github.com/openpatch/hyperbook#readme","license":"MIT","bin":{"hyperbook":"./dist/index.js"},"files":["dist"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/openpatch/hyperbook.git","directory":"packages/hyperbook"},"bugs":{"url":"https://github.com/openpatch/hyperbook/issues"},"engines":{"node":">=12.22.0"},"scripts":{"version":"pnpm build","lint":"tsc --noEmit","dev":"ncc build ./index.ts -w -o dist/","build":"rimraf dist && ncc build ./index.ts -o ./dist/ --no-cache --no-source-map-register --external favicons --external sharp && node postbuild.mjs"},"dependencies":{"favicons":"^7.2.0"},"devDependencies":{"create-hyperbook":"workspace:*","@hyperbook/fs":"workspace:*","@hyperbook/markdown":"workspace:*","@hyperbook/types":"workspace:*","@pnpm/exportable-manifest":"1000.0.6","@types/archiver":"6.0.3","@types/async-retry":"1.4.9","@types/cross-spawn":"6.0.6","@types/lunr":"^2.3.7","@types/prompts":"2.4.9","@types/tar":"6.1.13","@types/ws":"^8.5.14","@vercel/ncc":"0.38.3","archiver":"7.0.1","async-retry":"1.3.3","chalk":"5.4.1","chokidar":"4.0.3","commander":"12.1.0","cpy":"11.1.0","cross-spawn":"7.0.6","domutils":"^3.2.2","extract-zip":"^2.0.1","got":"12.6.0","htmlparser2":"^10.0.0","lunr":"^2.3.9","lunr-languages":"^1.14.0","mime":"^4.0.6","prompts":"2.4.2","rimraf":"6.0.1","tar":"7.4.3","update-check":"1.5.4","ws":"^8.18.0"}}');
173490
173527
 
173491
173528
  /***/ })
173492
173529
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperbook",
3
- "version": "0.72.1",
3
+ "version": "0.72.2",
4
4
  "author": "Mike Barkmin",
5
5
  "homepage": "https://github.com/openpatch/hyperbook#readme",
6
6
  "license": "MIT",
@@ -57,8 +57,8 @@
57
57
  "update-check": "1.5.4",
58
58
  "ws": "^8.18.0",
59
59
  "create-hyperbook": "0.3.0",
60
+ "@hyperbook/markdown": "0.45.0",
60
61
  "@hyperbook/fs": "0.21.0",
61
- "@hyperbook/markdown": "0.44.1",
62
62
  "@hyperbook/types": "0.18.0"
63
63
  },
64
64
  "scripts": {