@m3e/toc 1.0.0-rc.1

package/dist/custom-elements.json

@@ -0,0 +1,565 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./TocElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./TocGenerator\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./TocItemElement\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/TocElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eTocElement",
+          "cssProperties": [
+            {
+              "description": "Width of the table of contents.",
+              "name": "--m3e-toc-width"
+            },
+            {
+              "description": "Border radius of TOC items and active indicator.",
+              "name": "--m3e-toc-item-shape"
+            },
+            {
+              "description": "Border color of the active indicator.",
+              "name": "--m3e-toc-active-indicator-color"
+            },
+            {
+              "description": "Animation duration for the active indicator.",
+              "name": "--m3e-toc-active-indicator-animation-duration"
+            },
+            {
+              "description": "Inline padding for TOC items and header.",
+              "name": "--m3e-toc-item-padding"
+            },
+            {
+              "description": "Block space below and between header elements.",
+              "name": "--m3e-toc-header-space"
+            },
+            {
+              "description": "Font size for the overline slot.",
+              "name": "--m3e-toc-overline-font-size"
+            },
+            {
+              "description": "Font weight for the overline slot.",
+              "name": "--m3e-toc-overline-font-weight"
+            },
+            {
+              "description": "Line height for the overline slot.",
+              "name": "--m3e-toc-overline-line-height"
+            },
+            {
+              "description": "Letter spacing for the overline slot.",
+              "name": "--m3e-toc-overline-tracking"
+            },
+            {
+              "description": "Text color for the overline slot.",
+              "name": "--m3e-toc-overline-color"
+            },
+            {
+              "description": "Font size for the title slot.",
+              "name": "--m3e-toc-title-font-size"
+            },
+            {
+              "description": "Font weight for the title slot.",
+              "name": "--m3e-toc-title-font-weight"
+            },
+            {
+              "description": "Line height for the title slot.",
+              "name": "--m3e-toc-title-line-height"
+            },
+            {
+              "description": "Letter spacing for the title slot.",
+              "name": "--m3e-toc-title-tracking"
+            },
+            {
+              "description": "Text color for the title slot.",
+              "name": "--m3e-toc-title-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders content between the header and items.",
+              "name": ""
+            },
+            {
+              "description": "Renders the overline of the table of contents.",
+              "name": "overline"
+            },
+            {
+              "description": "Renders the title of the table of contents.",
+              "name": "title"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_toc",
+              "type": {
+                "text": "Array<TocNode>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "_activeIndicator",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#ignoreScroll",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#selectionManager",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#intersectionController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new IntersectionController(this, { target: null, callback: (entries) => { if (!this.control || this.#ignoreScroll) return; const targetOffset = this.control.scrollTop; let closestElement: HTMLElement | null = null; let closestDistance = Number.POSITIVE_INFINITY; entries .filter((x) => x.isIntersecting) .map((x) => <HTMLElement>x.target) .forEach((item) => { const offsetTop = item.offsetTop; const distance = Math.abs(offsetTop - targetOffset); if (distance < closestDistance) { closestDistance = distance; closestElement = item; } }); if (closestElement) { const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement); if (item) { this.#selectionManager.select(item); } } }, })"
+            },
+            {
+              "kind": "field",
+              "name": "#scrollController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollController(this, { target: null, callback: () => (this.#ignoreScroll = false), debounce: true, })"
+            },
+            {
+              "kind": "field",
+              "name": "#mutationController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true, }, callback: () => this._updateToc(), })"
+            },
+            {
+              "kind": "field",
+              "name": "maxDepth",
+              "type": {
+                "text": "number"
+              },
+              "default": "2",
+              "description": "The maximum depth of the table of contents.",
+              "attribute": "max-depth"
+            },
+            {
+              "kind": "method",
+              "name": "attach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "control",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "detach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#renderNode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "TocNode"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleOverlineSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleTitleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#generateToc",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_updateToc",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The query selector used to specify the element related to this element.",
+              "name": "for"
+            },
+            {
+              "description": "The maximum depth of the table of contents.",
+              "name": "max-depth",
+              "type": {
+                "text": "number"
+              },
+              "default": "2",
+              "fieldName": "maxDepth"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "HtmlFor",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "AttachInternals",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-toc",
+          "customElement": true,
+          "summary": "A table of contents that provides in-page scroll navigation."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eTocElement",
+          "declaration": {
+            "name": "M3eTocElement",
+            "module": "src/TocElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-toc",
+          "declaration": {
+            "name": "M3eTocElement",
+            "module": "src/TocElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/TocGenerator.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Provides functionality used to generate a table of contents used for in-page navigation.",
+          "name": "TocGenerator",
+          "members": [
+            {
+              "kind": "method",
+              "name": "generate",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Array<TocNode>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element for which to generate a table of contents."
+                },
+                {
+                  "name": "maxDepth",
+                  "default": "6",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The maximum depth of the table of contents.",
+                  "optional": true
+                }
+              ],
+              "description": "Generates nodes from which to construct a table of contents for in-page navigation."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TocGenerator",
+          "declaration": {
+            "name": "TocGenerator",
+            "module": "src/TocGenerator.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/TocItemElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An item in a table of contents.",
+          "name": "M3eTocItemElement",
+          "cssProperties": [
+            {
+              "description": "Border radius of the TOC item.",
+              "name": "--m3e-toc-item-shape"
+            },
+            {
+              "description": "Block padding for the TOC item.",
+              "name": "--m3e-toc-item-padding-block"
+            },
+            {
+              "description": "Inline padding for the TOC item.",
+              "name": "--m3e-toc-item-padding"
+            },
+            {
+              "description": "Indentation per level for the TOC item.",
+              "name": "--m3e-toc-item-inset"
+            },
+            {
+              "description": "Animation duration for the active indicator.",
+              "name": "--m3e-toc-active-indicator-animation-duration"
+            },
+            {
+              "description": "Font size for unselected items.",
+              "name": "--m3e-toc-item-font-size"
+            },
+            {
+              "description": "Font weight for unselected items.",
+              "name": "--m3e-toc-item-font-weight"
+            },
+            {
+              "description": "Line height for unselected items.",
+              "name": "--m3e-toc-item-line-height"
+            },
+            {
+              "description": "Letter spacing for unselected items.",
+              "name": "--m3e-toc-item-tracking"
+            },
+            {
+              "description": "Text color for unselected items.",
+              "name": "--m3e-toc-item-color"
+            },
+            {
+              "description": "Font size for selected items.",
+              "name": "--m3e-toc-item-selected-font-size"
+            },
+            {
+              "description": "Font weight for selected items.",
+              "name": "--m3e-toc-item-selected-font-weight"
+            },
+            {
+              "description": "Line height for selected items.",
+              "name": "--m3e-toc-item-selected-line-height"
+            },
+            {
+              "description": "Letter spacing for selected items.",
+              "name": "--m3e-toc-item-selected-tracking"
+            },
+            {
+              "description": "Text color for selected items.",
+              "name": "--m3e-toc-item-selected-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the label of the item.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_base",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_stateLayer",
+              "type": {
+                "text": "M3eStateLayerElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "description": "A value indicating whether the element is disabled.",
+              "name": "disabled"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Selected",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Disabled",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "AttachInternals",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-toc-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eTocItemElement",
+          "declaration": {
+            "name": "M3eTocItemElement",
+            "module": "src/TocItemElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-toc-item",
+          "declaration": {
+            "name": "M3eTocItemElement",
+            "module": "src/TocItemElement.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/html-custom-data.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "m3e-toc",
+      "description": "A table of contents that provides in-page scroll navigation.\n---\n\n\n### **Slots:**\n - _default_ - Renders content between the header and items.\n- **overline** - Renders the overline of the table of contents.\n- **title** - Renders the title of the table of contents.\n\n### **CSS Properties:**\n - **--m3e-toc-width** - Width of the table of contents. _(default: undefined)_\n- **--m3e-toc-item-shape** - Border radius of TOC items and active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-color** - Border color of the active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-animation-duration** - Animation duration for the active indicator. _(default: undefined)_\n- **--m3e-toc-item-padding** - Inline padding for TOC items and header. _(default: undefined)_\n- **--m3e-toc-header-space** - Block space below and between header elements. _(default: undefined)_\n- **--m3e-toc-overline-font-size** - Font size for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-font-weight** - Font weight for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-line-height** - Line height for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-tracking** - Letter spacing for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-color** - Text color for the overline slot. _(default: undefined)_\n- **--m3e-toc-title-font-size** - Font size for the title slot. _(default: undefined)_\n- **--m3e-toc-title-font-weight** - Font weight for the title slot. _(default: undefined)_\n- **--m3e-toc-title-line-height** - Line height for the title slot. _(default: undefined)_\n- **--m3e-toc-title-tracking** - Letter spacing for the title slot. _(default: undefined)_\n- **--m3e-toc-title-color** - Text color for the title slot. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "for",
+          "description": "The query selector used to specify the element related to this element.",
+          "values": []
+        },
+        {
+          "name": "max-depth",
+          "description": "The maximum depth of the table of contents.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "m3e-toc-item",
+      "description": "An item in a table of contents.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n\n### **CSS Properties:**\n - **--m3e-toc-item-shape** - Border radius of the TOC item. _(default: undefined)_\n- **--m3e-toc-item-padding-block** - Block padding for the TOC item. _(default: undefined)_\n- **--m3e-toc-item-padding** - Inline padding for the TOC item. _(default: undefined)_\n- **--m3e-toc-item-inset** - Indentation per level for the TOC item. _(default: undefined)_\n- **--m3e-toc-active-indicator-animation-duration** - Animation duration for the active indicator. _(default: undefined)_\n- **--m3e-toc-item-font-size** - Font size for unselected items. _(default: undefined)_\n- **--m3e-toc-item-font-weight** - Font weight for unselected items. _(default: undefined)_\n- **--m3e-toc-item-line-height** - Line height for unselected items. _(default: undefined)_\n- **--m3e-toc-item-tracking** - Letter spacing for unselected items. _(default: undefined)_\n- **--m3e-toc-item-color** - Text color for unselected items. _(default: undefined)_\n- **--m3e-toc-item-selected-font-size** - Font size for selected items. _(default: undefined)_\n- **--m3e-toc-item-selected-font-weight** - Font weight for selected items. _(default: undefined)_\n- **--m3e-toc-item-selected-line-height** - Line height for selected items. _(default: undefined)_\n- **--m3e-toc-item-selected-tracking** - Letter spacing for selected items. _(default: undefined)_\n- **--m3e-toc-item-selected-color** - Text color for selected items. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "A value indicating whether the element is disabled.",
+          "values": []
+        }
+      ],
+      "references": []
+    }
+  ]
+}