@todovue/tv-toc 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to `@todovue/tv-toc` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-01-30
+
+### Added
+- Added a compact mode option to the Table of Contents component.
+
+### Changed
+- Updated the visual styles for the Table of Contents component.
+
 ## [1.1.1] - 2026-01-27
 
 ### Changed
@@ -73,6 +81,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Minimal default styles and BEM-like CSS classes for easy customization.
 - Vite demo with basic and blog-like TOC examples.
 
+[1.2.0]: https://github.com/TODOvue/tv-toc/pull/6/files
 [1.1.1]: https://github.com/TODOvue/tv-toc/pull/5/files
 [1.1.0]: https://github.com/TODOvue/tv-toc/pull/4/files
 [1.0.2]: https://github.com/TODOvue/tv-toc/pull/3/files

package/README.md

@@ -177,6 +177,7 @@ import { TvToc } from '@todovue/tv-toc'
 | marker          | Boolean | `false`    | Whether to display a visual marker for the active item.                    | `false`  |
 | collapsible     | Boolean | `false`    | Whether sublists can be collapsed/expanded.                                | `false`  |
 | activeClass     | String  | `'active'` | Custom CSS class for the active item.                                      | `false`  |
+| compact         | Boolean | `false`    | Applies a compact style similar to Nuxt Content's TOC.                     | `false`  |
 | observerOptions | Object  | `{}`       | options to pass to the IntersectionObserver (rootMargin, threshold, etc).  | `false`  |
 
 ### `toc` shape

package/dist/tv-toc.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),B=(n=[],a={})=>{const p=e.ref(null),h=e.ref(null);let d=null;const k=r=>`#${r}`,y=r=>{const c=document.getElementById(r);c&&(c.scrollIntoView({behavior:"smooth"}),history.pushState(null,null,`#${r}`))},u=r=>{const c=[];return r.forEach(s=>{c.push({id:s.id,parentId:null}),s.children&&s.children.forEach(v=>{c.push({id:v.id,parentId:s.id})})}),c};return{formatId:k,scrollToId:y,activeId:p,activeParentId:h,setupObserver:()=>{if(typeof window>"u"||!n.length)return;const r=u(n),c=r.map(({id:s})=>document.getElementById(s)).filter(s=>s!==null);c.length&&(d=new IntersectionObserver(s=>{s.forEach(v=>{if(v.isIntersecting){const m=v.target.id,t=r.find(l=>l.id===m);t&&(p.value=m,h.value=t.parentId,history.replaceState(null,null,`#${m}`))}})},{rootMargin:"-20% 0px -70% 0px",threshold:0,...a}),c.forEach(s=>d.observe(s)))},cleanup:()=>{d&&(d.disconnect(),d=null)}}},b={class:"tv-toc"},w={key:0,class:"tv-toc-progress-container"},C={key:1,class:"tv-toc-title"},I={class:"tv-toc-list"},T={class:"tv-toc-item-content"},S=["href","onClick"],x=["onClick"],V={class:"tv-toc-sublist"},N=["href","onClick"],O={__name:"TvToc",props:{toc:{type:Object,required:!0},marker:{type:Boolean,default:!1},activeClass:{type:String,default:"active"},observerOptions:{type:Object,default:()=>({})},collapsible:{type:Boolean,default:!1}},setup(n){const a=n,{scrollToId:p,activeId:h,activeParentId:d,setupObserver:k,cleanup:y}=B(a.toc?.links||[],a.observerOptions),u=e.ref(new Set),E=t=>{const l=new Set(u.value);l.has(t)?l.delete(t):l.add(t),u.value=l},g=t=>!a.collapsible||u.value.has(t),r=t=>{p(t)},c=t=>h.value===t,s=t=>d.value===t;e.watch(d,t=>{if(a.collapsible&&t&&!u.value.has(t)){const l=new Set(u.value);l.add(t),u.value=l}});const v=e.ref(0),m=e.computed(()=>{const t=[],l=o=>{if(o)for(const i of o)t.push(i.id),i.children&&l(i.children)};return l(a.toc?.links),t});return e.watch(h,t=>{if(!t)return;const l=m.value.indexOf(t);if(l!==-1){const o=m.value.length;o>0&&(v.value=(l+1)/o*100)}},{immediate:!0}),e.onMounted(()=>{a.collapsible&&d.value&&E(d.value),k()}),e.onUnmounted(()=>{y()}),(t,l)=>(e.openBlock(),e.createElementBlock("nav",b,[n.toc?.links?.length?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",{class:"tv-toc-progress-bar",style:e.normalizeStyle({height:`${v.value}%`})},null,4)])):e.createCommentVNode("",!0),n.toc?.title?(e.openBlock(),e.createElementBlock("h3",C,e.toDisplayString(n.toc.title),1)):e.createCommentVNode("",!0),e.createElementVNode("ul",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.toc?.links,o=>(e.openBlock(),e.createElementBlock("li",{key:o.id,class:"tv-toc-item"},[e.createElementVNode("div",T,[e.createElementVNode("a",{href:`#${o.id}`,class:e.normalizeClass(["tv-toc-link",{[a.activeClass]:c(o.id),"parent-active":s(o.id),"tv-toc-marker":n.marker&&c(o.id)}]),onClick:e.withModifiers(i=>r(o.id),["prevent"])},e.toDisplayString(o.text),11,S),n.collapsible&&o.children&&o.children.length?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["tv-toc-toggle",{"is-expanded":g(o.id)}]),onClick:e.withModifiers(i=>E(o.id),["stop"]),"aria-label":"Toggle section"},[...l[0]||(l[0]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polyline",{points:"6 9 12 15 18 9"})],-1)])],10,x)):e.createCommentVNode("",!0)]),o.children?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tv-toc-sublist-wrapper",{"is-collapsed":n.collapsible&&!g(o.id)}]),style:e.normalizeStyle(n.collapsible?{"--content-height":g(o.id)?"1000px":"0px"}:{})},[e.createElementVNode("ul",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.children,i=>(e.openBlock(),e.createElementBlock("li",{key:i.id,class:"tv-toc-subitem"},[e.createElementVNode("a",{href:`#${i.id}`,class:e.normalizeClass(["tv-toc-sublink",{[a.activeClass]:c(i.id),"tv-toc-marker":n.marker&&c(i.id)}]),onClick:e.withModifiers(M=>r(i.id),["prevent"])},e.toDisplayString(i.text),11,N)]))),128))])],6)):e.createCommentVNode("",!0)]))),128))])]))}},f=O;f.install=n=>{n.component("TvToc",f)};const $={install:f.install};exports.TvToc=f;exports.TvTocPlugin=$;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),B=(n=[],i={})=>{const p=e.ref(null),h=e.ref(null);let d=null;const y=r=>`#${r}`,E=r=>{const c=document.getElementById(r);c&&(c.scrollIntoView({behavior:"smooth"}),history.pushState(null,null,`#${r}`))},u=r=>{const c=[];return r.forEach(s=>{c.push({id:s.id,parentId:null}),s.children&&s.children.forEach(v=>{c.push({id:v.id,parentId:s.id})})}),c};return{formatId:y,scrollToId:E,activeId:p,activeParentId:h,setupObserver:()=>{if(typeof window>"u"||!n.length)return;const r=u(n),c=r.map(({id:s})=>document.getElementById(s)).filter(s=>s!==null);c.length&&(d=new IntersectionObserver(s=>{s.forEach(v=>{if(v.isIntersecting){const m=v.target.id,t=r.find(l=>l.id===m);t&&(p.value=m,h.value=t.parentId,history.replaceState(null,null,`#${m}`))}})},{rootMargin:"-20% 0px -70% 0px",threshold:0,...i}),c.forEach(s=>d.observe(s)))},cleanup:()=>{d&&(d.disconnect(),d=null)}}},b={key:0,class:"tv-toc-title"},C={class:"tv-toc-body"},w={key:0,class:"tv-toc-progress-container"},I={class:"tv-toc-list"},T={class:"tv-toc-item-content"},S=["href","onClick"],x=["onClick"],V={class:"tv-toc-sublist"},N=["href","onClick"],O={__name:"TvToc",props:{toc:{type:Object,required:!0},marker:{type:Boolean,default:!1},activeClass:{type:String,default:"active"},observerOptions:{type:Object,default:()=>({})},collapsible:{type:Boolean,default:!1},compact:{type:Boolean,default:!1}},setup(n){const i=n,{scrollToId:p,activeId:h,activeParentId:d,setupObserver:y,cleanup:E}=B(i.toc?.links||[],i.observerOptions),u=e.ref(new Set),k=t=>{const l=new Set(u.value);l.has(t)?l.delete(t):l.add(t),u.value=l},g=t=>!i.collapsible||u.value.has(t),r=t=>{p(t)},c=t=>h.value===t,s=t=>d.value===t;e.watch(d,t=>{if(i.collapsible&&t&&!u.value.has(t)){const l=new Set(u.value);l.add(t),u.value=l}});const v=e.ref(0),m=e.computed(()=>{const t=[],l=o=>{if(o)for(const a of o)t.push(a.id),a.children&&l(a.children)};return l(i.toc?.links),t});return e.watch(h,t=>{if(!t)return;const l=m.value.indexOf(t);if(l!==-1){const o=m.value.length;o>0&&(v.value=(l+1)/o*100)}},{immediate:!0}),e.onMounted(()=>{i.collapsible&&d.value&&k(d.value),y()}),e.onUnmounted(()=>{E()}),(t,l)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(["tv-toc",{compact:n.compact}])},[n.toc?.title?(e.openBlock(),e.createElementBlock("h3",b,e.toDisplayString(n.toc.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",C,[n.toc?.links?.length?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",{class:"tv-toc-progress-bar",style:e.normalizeStyle({height:`${v.value}%`})},null,4)])):e.createCommentVNode("",!0),e.createElementVNode("ul",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.toc?.links,o=>(e.openBlock(),e.createElementBlock("li",{key:o.id,class:"tv-toc-item"},[e.createElementVNode("div",T,[e.createElementVNode("a",{href:`#${o.id}`,class:e.normalizeClass(["tv-toc-link",{[i.activeClass]:c(o.id),"parent-active":s(o.id),"tv-toc-marker":n.marker&&c(o.id)}]),onClick:e.withModifiers(a=>r(o.id),["prevent"])},e.toDisplayString(o.text),11,S),n.collapsible&&o.children&&o.children.length?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["tv-toc-toggle",{"is-expanded":g(o.id)}]),onClick:e.withModifiers(a=>k(o.id),["stop"]),"aria-label":"Toggle section"},[...l[0]||(l[0]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polyline",{points:"6 9 12 15 18 9"})],-1)])],10,x)):e.createCommentVNode("",!0)]),o.children?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tv-toc-sublist-wrapper",{"is-collapsed":n.collapsible&&!g(o.id)}]),style:e.normalizeStyle(n.collapsible?{"--content-height":g(o.id)?"1000px":"0px"}:{})},[e.createElementVNode("ul",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.children,a=>(e.openBlock(),e.createElementBlock("li",{key:a.id,class:"tv-toc-subitem"},[e.createElementVNode("a",{href:`#${a.id}`,class:e.normalizeClass(["tv-toc-sublink",{[i.activeClass]:c(a.id),"tv-toc-marker":n.marker&&c(a.id)}]),onClick:e.withModifiers(z=>r(a.id),["prevent"])},e.toDisplayString(a.text),11,N)]))),128))])],6)):e.createCommentVNode("",!0)]))),128))])])],2))}},f=O;f.install=n=>{n.component("TvToc",f)};const $={install:f.install};exports.TvToc=f;exports.TvTocPlugin=$;exports.default=f;

package/dist/tv-toc.css

@@ -1 +1 @@
-.tv-toc{position:relative;padding:1rem;background-color:#b9c4df;border-radius:8px;color:#000b14;min-width:200px;overflow:hidden;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}@media(prefers-color-scheme:dark){.tv-toc{background-color:#0e131f;color:#f4faff;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}}.tv-toc .tv-toc-progress-container{position:absolute;left:0;top:0;bottom:0;width:4px;background-color:#ef233c1a;z-index:1}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-container{background-color:#ef233c1a}}.tv-toc .tv-toc-progress-bar{width:100%;background:linear-gradient(to bottom,#ef233c,#f68290);transition:height .1s linear;border-radius:0 0 4px 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-bar{background:linear-gradient(to bottom,#ef233c,#f68290)}}.tv-toc .tv-toc-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.tv-toc .tv-toc-list{list-style:none;padding:0;margin:0}.tv-toc .tv-toc-item{margin-bottom:.5rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-item:nth-child(1){animation-delay:.05s}.tv-toc .tv-toc-item:nth-child(2){animation-delay:.1s}.tv-toc .tv-toc-item:nth-child(3){animation-delay:.15s}.tv-toc .tv-toc-item:nth-child(4){animation-delay:.2s}.tv-toc .tv-toc-item:nth-child(5){animation-delay:.25s}.tv-toc .tv-toc-item:nth-child(6){animation-delay:.3s}.tv-toc .tv-toc-item:nth-child(7){animation-delay:.35s}.tv-toc .tv-toc-item:nth-child(8){animation-delay:.4s}.tv-toc .tv-toc-item:nth-child(9){animation-delay:.45s}.tv-toc .tv-toc-item:nth-child(10){animation-delay:.5s}.tv-toc .tv-toc-item:nth-child(11){animation-delay:.55s}.tv-toc .tv-toc-item:nth-child(12){animation-delay:.6s}.tv-toc .tv-toc-item:nth-child(13){animation-delay:.65s}.tv-toc .tv-toc-item:nth-child(14){animation-delay:.7s}.tv-toc .tv-toc-item:nth-child(15){animation-delay:.75s}.tv-toc .tv-toc-item:nth-child(16){animation-delay:.8s}.tv-toc .tv-toc-item:nth-child(17){animation-delay:.85s}.tv-toc .tv-toc-item:nth-child(18){animation-delay:.9s}.tv-toc .tv-toc-item:nth-child(19){animation-delay:.95s}.tv-toc .tv-toc-item:nth-child(20){animation-delay:1s}.tv-toc .tv-toc-item .tv-toc-item-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tv-toc .tv-toc-item .tv-toc-item-content .tv-toc-link{flex:1}.tv-toc .tv-toc-item .tv-toc-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.6;transition:all .2s ease;border-radius:4px;margin-right:4px}.tv-toc .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a;opacity:1}.tv-toc .tv-toc-item .tv-toc-toggle svg{transition:transform .3s ease}.tv-toc .tv-toc-item .tv-toc-toggle.is-expanded svg{transform:rotate(180deg)}.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}.tv-toc .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a}}.tv-toc .tv-toc-link{display:block;text-decoration:none;color:inherit;font-weight:500;padding:.5rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-link.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}.tv-toc .tv-toc-link.parent-active{color:#ef233c;font-weight:500;border-left:2px solid rgba(239,35,60,.5);padding-left:calc(1rem - 2px)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;background-color:#ef233c1a}.tv-toc .tv-toc-link.parent-active{color:#ef233c;border-left-color:#ef233c80}}.tv-toc .tv-toc-sublist-wrapper{overflow:hidden;transition:opacity .3s ease,max-height .3s ease;max-height:1000px;opacity:1}.tv-toc .tv-toc-sublist-wrapper.is-collapsed{max-height:0;opacity:0;margin-bottom:0}.tv-toc .tv-toc-sublist{list-style:none;padding-left:1rem;margin-top:.25rem;margin-bottom:.25rem;border-left:2px solid rgba(0,11,20,.1)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublist{border-left-color:#f4faff1a}}.tv-toc .tv-toc-subitem{margin-bottom:.25rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-subitem:nth-child(1){animation-delay:.35s}.tv-toc .tv-toc-subitem:nth-child(2){animation-delay:.4s}.tv-toc .tv-toc-subitem:nth-child(3){animation-delay:.45s}.tv-toc .tv-toc-subitem:nth-child(4){animation-delay:.5s}.tv-toc .tv-toc-subitem:nth-child(5){animation-delay:.55s}.tv-toc .tv-toc-subitem:nth-child(6){animation-delay:.6s}.tv-toc .tv-toc-subitem:nth-child(7){animation-delay:.65s}.tv-toc .tv-toc-subitem:nth-child(8){animation-delay:.7s}.tv-toc .tv-toc-subitem:nth-child(9){animation-delay:.75s}.tv-toc .tv-toc-subitem:nth-child(10){animation-delay:.8s}.tv-toc .tv-toc-sublink{display:block;text-decoration:none;color:inherit;font-size:.9rem;opacity:.8;padding:.4rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-sublink:hover{opacity:1;color:#ef233c}.tv-toc .tv-toc-sublink.active{opacity:1;color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-sublink.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublink:hover{color:#ef233c}.tv-toc .tv-toc-sublink.active{color:#ef233c;background-color:#ef233c1a}}.light-mode .tv-toc{background-color:#b9c4df;color:#000b14;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}.light-mode .tv-toc .tv-toc-link:hover,.light-mode .tv-toc .tv-toc-link.active,.light-mode .tv-toc .tv-toc-link.parent-active{color:#ef233c}.light-mode .tv-toc .tv-toc-link.parent-active{border-left-color:#ef233c80}.light-mode .tv-toc .tv-toc-sublist{border-left-color:#000b141a}.light-mode .tv-toc .tv-toc-sublink:hover,.light-mode .tv-toc .tv-toc-sublink.active{color:#ef233c}.tv-toc-marker{border-left:2px solid var(--tv-toc-active-color, #3b82f6);padding-left:8px;transition:all .2s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes toc-pulse{0%{box-shadow:0 0 rgba(var(--toc-active-rgb),.4)}70%{box-shadow:0 0 0 6px rgba(var(--toc-active-rgb),0)}to{box-shadow:0 0 rgba(var(--toc-active-rgb),0)}}@keyframes border-flow{0%{background-position:0 0}to{background-position:0 200%}}
+.tv-toc{position:relative;padding:0;background-color:#b9c4df;border-radius:8px;color:#000b14;min-width:200px;overflow:hidden;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}@media(prefers-color-scheme:dark){.tv-toc{background-color:#0e131f;color:#f4faff;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}}.tv-toc .tv-toc-title{font-size:1.2rem;font-weight:700;margin:1rem 1rem .5rem;padding-left:0}.tv-toc .tv-toc-body{position:relative;padding:0 1rem 1rem}.tv-toc .tv-toc-progress-container{position:absolute;left:0;top:0;bottom:0;width:4px;background-color:#ef233c1a;z-index:1}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-container{background-color:#ef233c1a}}.tv-toc .tv-toc-progress-bar{width:100%;background:linear-gradient(to bottom,#ef233c,#f68290);transition:height .1s linear;border-radius:0 0 4px 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-bar{background:linear-gradient(to bottom,#ef233c,#f68290)}}.tv-toc .tv-toc-list .tv-toc-list{list-style:none;padding:0;margin:0}.tv-toc .tv-toc-list .tv-toc-item{margin-bottom:.5rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-list .tv-toc-item:nth-child(1){animation-delay:.05s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(2){animation-delay:.1s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(3){animation-delay:.15s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(4){animation-delay:.2s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(5){animation-delay:.25s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(6){animation-delay:.3s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(7){animation-delay:.35s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(8){animation-delay:.4s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(9){animation-delay:.45s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(10){animation-delay:.5s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(11){animation-delay:.55s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(12){animation-delay:.6s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(13){animation-delay:.65s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(14){animation-delay:.7s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(15){animation-delay:.75s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(16){animation-delay:.8s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(17){animation-delay:.85s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(18){animation-delay:.9s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(19){animation-delay:.95s}.tv-toc .tv-toc-list .tv-toc-item:nth-child(20){animation-delay:1s}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-item-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-item-content .tv-toc-link{flex:1}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.6;transition:all .2s ease;border-radius:4px;margin-right:4px}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a;opacity:1}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-toggle svg{transition:transform .3s ease}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-toggle.is-expanded svg{transform:rotate(180deg)}.tv-toc .tv-toc-list .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-list .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-list .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-list .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}.tv-toc .tv-toc-list .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a}}.tv-toc .tv-toc-list .tv-toc-link{display:block;text-decoration:none;color:inherit;font-weight:500;padding:.5rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-list .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-list .tv-toc-link.active{color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-list .tv-toc-link.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}.tv-toc .tv-toc-list .tv-toc-link.parent-active{color:#ef233c;font-weight:500;border-left:2px solid rgba(239,35,60,.5);padding-left:calc(1rem - 2px)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-list .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-list .tv-toc-link.active{color:#ef233c;background-color:#ef233c1a}.tv-toc .tv-toc-list .tv-toc-link.parent-active{color:#ef233c;border-left-color:#ef233c80}}.tv-toc .tv-toc-list .tv-toc-sublist-wrapper{overflow:hidden;transition:opacity .3s ease,max-height .3s ease;max-height:1000px;opacity:1}.tv-toc .tv-toc-list .tv-toc-sublist-wrapper.is-collapsed{max-height:0;opacity:0;margin-bottom:0}.tv-toc .tv-toc-list .tv-toc-sublist{list-style:none;padding-left:1rem;margin-top:.25rem;margin-bottom:.25rem;border-left:2px solid rgba(0,11,20,.1)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-list .tv-toc-sublist{border-left-color:#f4faff1a}}.tv-toc .tv-toc-list .tv-toc-subitem{margin-bottom:.25rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(1){animation-delay:.35s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(2){animation-delay:.4s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(3){animation-delay:.45s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(4){animation-delay:.5s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(5){animation-delay:.55s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(6){animation-delay:.6s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(7){animation-delay:.65s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(8){animation-delay:.7s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(9){animation-delay:.75s}.tv-toc .tv-toc-list .tv-toc-subitem:nth-child(10){animation-delay:.8s}.tv-toc .tv-toc-list .tv-toc-sublink{display:block;text-decoration:none;color:inherit;font-size:.9rem;opacity:.8;padding:.4rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-list .tv-toc-sublink:hover{opacity:1;color:#ef233c}.tv-toc .tv-toc-list .tv-toc-sublink.active{opacity:1;color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-list .tv-toc-sublink.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-list .tv-toc-sublink:hover{color:#ef233c}.tv-toc .tv-toc-list .tv-toc-sublink.active{color:#ef233c;background-color:#ef233c1a}}.tv-toc.compact{background-color:transparent;padding:0;border-radius:0;min-width:auto}.tv-toc.compact .tv-toc-title{font-size:1rem;margin:0 0 .5rem;padding-left:0;opacity:.8}.tv-toc.compact .tv-toc-body{padding:0}.tv-toc.compact .tv-toc-progress-container{width:2px;left:0;background-color:#000b141a}@media(prefers-color-scheme:dark){.tv-toc.compact .tv-toc-progress-container{background-color:#f4faff1a}}.tv-toc.compact .tv-toc-progress-bar{border-radius:0;background:#ef233c}@media(prefers-color-scheme:dark){.tv-toc.compact .tv-toc-progress-bar{background:#ef233c}}.tv-toc.compact .tv-toc-list{margin:0}.tv-toc.compact .tv-toc-item{margin-bottom:0;animation:none;opacity:1}.tv-toc.compact .tv-toc-item .tv-toc-link{padding:.35rem 1rem;font-size:.9rem}.tv-toc.compact .tv-toc-item .tv-toc-link:hover{background-color:transparent;color:#ef233c}.tv-toc.compact .tv-toc-item .tv-toc-link.active{background-color:transparent;animation:none;padding-left:1rem;font-weight:600;color:#ef233c}.tv-toc.compact .tv-toc-item .tv-toc-link.active:before{display:none}.tv-toc.compact .tv-toc-item .tv-toc-link.parent-active{border-left:none;padding-left:1rem;color:#ef233c}@media(prefers-color-scheme:dark){.tv-toc.compact .tv-toc-item .tv-toc-link:hover,.tv-toc.compact .tv-toc-item .tv-toc-link.active,.tv-toc.compact .tv-toc-item .tv-toc-link.parent-active{color:#ef233c}}.tv-toc.compact .tv-toc-sublist{border-left:none;padding-left:0;margin:0}.tv-toc.compact .tv-toc-sublist .tv-toc-subitem{margin-bottom:0;animation:none;opacity:1}.tv-toc.compact .tv-toc-sublist .tv-toc-sublink{padding:.25rem 1rem .25rem 1.5rem;font-size:.85rem}.tv-toc.compact .tv-toc-sublist .tv-toc-sublink:hover{background-color:transparent;color:#ef233c}.tv-toc.compact .tv-toc-sublist .tv-toc-sublink.active{background-color:transparent;animation:none;padding-left:1.5rem;font-weight:600;color:#ef233c}.tv-toc.compact .tv-toc-sublist .tv-toc-sublink.active:before{display:none}@media(prefers-color-scheme:dark){.tv-toc.compact .tv-toc-sublist .tv-toc-sublink:hover,.tv-toc.compact .tv-toc-sublist .tv-toc-sublink.active{color:#ef233c}}.light-mode .tv-toc{background-color:#b9c4df;color:#000b14;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}.light-mode .tv-toc .tv-toc-link:hover,.light-mode .tv-toc .tv-toc-link.active,.light-mode .tv-toc .tv-toc-link.parent-active{color:#ef233c}.light-mode .tv-toc .tv-toc-link.parent-active{border-left-color:#ef233c80}.light-mode .tv-toc .tv-toc-sublist{border-left-color:#000b141a}.light-mode .tv-toc .tv-toc-sublink:hover,.light-mode .tv-toc .tv-toc-sublink.active{color:#ef233c}.tv-toc-marker{border-left:2px solid var(--tv-toc-active-color, #3b82f6);padding-left:8px;transition:all .2s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes toc-pulse{0%{box-shadow:0 0 rgba(var(--toc-active-rgb),.4)}70%{box-shadow:0 0 0 6px rgba(var(--toc-active-rgb),0)}to{box-shadow:0 0 rgba(var(--toc-active-rgb),0)}}@keyframes border-flow{0%{background-position:0 0}to{background-position:0 200%}}

package/dist/tv-toc.es.js

@@ -1,11 +1,11 @@
-import { ref as w, watch as $, computed as _, onMounted as j, onUnmounted as A, createElementBlock as d, openBlock as u, createCommentVNode as y, createElementVNode as h, normalizeStyle as k, toDisplayString as O, Fragment as B, renderList as P, withModifiers as S, normalizeClass as I } from "vue";
-const M = (l = [], i = {}) => {
-  const g = w(null), m = w(null);
+import { ref as w, watch as $, computed as j, onMounted as A, onUnmounted as M, createElementBlock as d, openBlock as u, normalizeClass as g, createCommentVNode as I, createElementVNode as v, toDisplayString as O, normalizeStyle as k, Fragment as B, renderList as P, withModifiers as S } from "vue";
+const V = (l = [], r = {}) => {
+  const y = w(null), m = w(null);
   let a = null;
   const x = (c) => `#${c}`, C = (c) => {
     const s = document.getElementById(c);
     s && (s.scrollIntoView({ behavior: "smooth" }), history.pushState(null, null, `#${c}`));
-  }, v = (c) => {
+  }, h = (c) => {
     const s = [];
     return c.forEach((n) => {
       s.push({ id: n.id, parentId: null }), n.children && n.children.forEach((f) => {
@@ -16,24 +16,24 @@ const M = (l = [], i = {}) => {
   return {
     formatId: x,
     scrollToId: C,
-    activeId: g,
+    activeId: y,
     activeParentId: m,
     setupObserver: () => {
       if (typeof window > "u" || !l.length) return;
-      const c = v(l), s = c.map(({ id: n }) => document.getElementById(n)).filter((n) => n !== null);
+      const c = h(l), s = c.map(({ id: n }) => document.getElementById(n)).filter((n) => n !== null);
       s.length && (a = new IntersectionObserver(
         (n) => {
           n.forEach((f) => {
             if (f.isIntersecting) {
               const p = f.target.id, e = c.find((o) => o.id === p);
-              e && (g.value = p, m.value = e.parentId, history.replaceState(null, null, `#${p}`));
+              e && (y.value = p, m.value = e.parentId, history.replaceState(null, null, `#${p}`));
             }
           });
         },
         {
           rootMargin: "-20% 0px -70% 0px",
           threshold: 0,
-          ...i
+          ...r
         }
       ), s.forEach((n) => a.observe(n)));
     },
@@ -41,12 +41,12 @@ const M = (l = [], i = {}) => {
       a && (a.disconnect(), a = null);
     }
   };
-}, V = { class: "tv-toc" }, z = {
+}, z = {
   key: 0,
-  class: "tv-toc-progress-container"
-}, N = {
-  key: 1,
   class: "tv-toc-title"
+}, N = { class: "tv-toc-body" }, _ = {
+  key: 0,
+  class: "tv-toc-progress-container"
 }, q = { class: "tv-toc-list" }, D = { class: "tv-toc-item-content" }, F = ["href", "onClick"], U = ["onClick"], G = { class: "tv-toc-sublist" }, H = ["href", "onClick"], J = {
   __name: "TvToc",
   props: {
@@ -69,28 +69,32 @@ const M = (l = [], i = {}) => {
     collapsible: {
       type: Boolean,
       default: !1
+    },
+    compact: {
+      type: Boolean,
+      default: !1
     }
   },
   setup(l) {
-    const i = l, { scrollToId: g, activeId: m, activeParentId: a, setupObserver: x, cleanup: C } = M(i.toc?.links || [], i.observerOptions), v = w(/* @__PURE__ */ new Set()), T = (e) => {
-      const o = new Set(v.value);
-      o.has(e) ? o.delete(e) : o.add(e), v.value = o;
-    }, b = (e) => !i.collapsible || v.value.has(e), c = (e) => {
-      g(e);
+    const r = l, { scrollToId: y, activeId: m, activeParentId: a, setupObserver: x, cleanup: C } = V(r.toc?.links || [], r.observerOptions), h = w(/* @__PURE__ */ new Set()), T = (e) => {
+      const o = new Set(h.value);
+      o.has(e) ? o.delete(e) : o.add(e), h.value = o;
+    }, b = (e) => !r.collapsible || h.value.has(e), c = (e) => {
+      y(e);
     }, s = (e) => m.value === e, n = (e) => a.value === e;
     $(a, (e) => {
-      if (i.collapsible && e && !v.value.has(e)) {
-        const o = new Set(v.value);
-        o.add(e), v.value = o;
+      if (r.collapsible && e && !h.value.has(e)) {
+        const o = new Set(h.value);
+        o.add(e), h.value = o;
       }
     });
-    const f = w(0), p = _(() => {
+    const f = w(0), p = j(() => {
       const e = [], o = (t) => {
         if (t)
-          for (const r of t)
-            e.push(r.id), r.children && o(r.children);
+          for (const i of t)
+            e.push(i.id), i.children && o(i.children);
       };
-      return o(i.toc?.links), e;
+      return o(r.toc?.links), e;
     });
     return $(m, (e) => {
       if (!e) return;
@@ -99,78 +103,82 @@ const M = (l = [], i = {}) => {
         const t = p.value.length;
         t > 0 && (f.value = (o + 1) / t * 100);
       }
-    }, { immediate: !0 }), j(() => {
-      i.collapsible && a.value && T(a.value), x();
-    }), A(() => {
+    }, { immediate: !0 }), A(() => {
+      r.collapsible && a.value && T(a.value), x();
+    }), M(() => {
       C();
-    }), (e, o) => (u(), d("nav", V, [
-      l.toc?.links?.length ? (u(), d("div", z, [
-        h("div", {
-          class: "tv-toc-progress-bar",
-          style: k({ height: `${f.value}%` })
-        }, null, 4)
-      ])) : y("", !0),
-      l.toc?.title ? (u(), d("h3", N, O(l.toc.title), 1)) : y("", !0),
-      h("ul", q, [
-        (u(!0), d(B, null, P(l.toc?.links, (t) => (u(), d("li", {
-          key: t.id,
-          class: "tv-toc-item"
-        }, [
-          h("div", D, [
-            h("a", {
-              href: `#${t.id}`,
-              class: I(["tv-toc-link", {
-                [i.activeClass]: s(t.id),
-                "parent-active": n(t.id),
-                "tv-toc-marker": l.marker && s(t.id)
-              }]),
-              onClick: S((r) => c(t.id), ["prevent"])
-            }, O(t.text), 11, F),
-            l.collapsible && t.children && t.children.length ? (u(), d("button", {
-              key: 0,
-              class: I(["tv-toc-toggle", { "is-expanded": b(t.id) }]),
-              onClick: S((r) => T(t.id), ["stop"]),
-              "aria-label": "Toggle section"
-            }, [...o[0] || (o[0] = [
-              h("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
-              }, [
-                h("polyline", { points: "6 9 12 15 18 9" })
-              ], -1)
-            ])], 10, U)) : y("", !0)
-          ]),
-          t.children ? (u(), d("div", {
-            key: 0,
-            class: I(["tv-toc-sublist-wrapper", { "is-collapsed": l.collapsible && !b(t.id) }]),
-            style: k(l.collapsible ? { "--content-height": b(t.id) ? "1000px" : "0px" } : {})
+    }), (e, o) => (u(), d("nav", {
+      class: g(["tv-toc", { compact: l.compact }])
+    }, [
+      l.toc?.title ? (u(), d("h3", z, O(l.toc.title), 1)) : I("", !0),
+      v("div", N, [
+        l.toc?.links?.length ? (u(), d("div", _, [
+          v("div", {
+            class: "tv-toc-progress-bar",
+            style: k({ height: `${f.value}%` })
+          }, null, 4)
+        ])) : I("", !0),
+        v("ul", q, [
+          (u(!0), d(B, null, P(l.toc?.links, (t) => (u(), d("li", {
+            key: t.id,
+            class: "tv-toc-item"
           }, [
-            h("ul", G, [
-              (u(!0), d(B, null, P(t.children, (r) => (u(), d("li", {
-                key: r.id,
-                class: "tv-toc-subitem"
-              }, [
-                h("a", {
-                  href: `#${r.id}`,
-                  class: I(["tv-toc-sublink", {
-                    [i.activeClass]: s(r.id),
-                    "tv-toc-marker": l.marker && s(r.id)
-                  }]),
-                  onClick: S((K) => c(r.id), ["prevent"])
-                }, O(r.text), 11, H)
-              ]))), 128))
-            ])
-          ], 6)) : y("", !0)
-        ]))), 128))
+            v("div", D, [
+              v("a", {
+                href: `#${t.id}`,
+                class: g(["tv-toc-link", {
+                  [r.activeClass]: s(t.id),
+                  "parent-active": n(t.id),
+                  "tv-toc-marker": l.marker && s(t.id)
+                }]),
+                onClick: S((i) => c(t.id), ["prevent"])
+              }, O(t.text), 11, F),
+              l.collapsible && t.children && t.children.length ? (u(), d("button", {
+                key: 0,
+                class: g(["tv-toc-toggle", { "is-expanded": b(t.id) }]),
+                onClick: S((i) => T(t.id), ["stop"]),
+                "aria-label": "Toggle section"
+              }, [...o[0] || (o[0] = [
+                v("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  v("polyline", { points: "6 9 12 15 18 9" })
+                ], -1)
+              ])], 10, U)) : I("", !0)
+            ]),
+            t.children ? (u(), d("div", {
+              key: 0,
+              class: g(["tv-toc-sublist-wrapper", { "is-collapsed": l.collapsible && !b(t.id) }]),
+              style: k(l.collapsible ? { "--content-height": b(t.id) ? "1000px" : "0px" } : {})
+            }, [
+              v("ul", G, [
+                (u(!0), d(B, null, P(t.children, (i) => (u(), d("li", {
+                  key: i.id,
+                  class: "tv-toc-subitem"
+                }, [
+                  v("a", {
+                    href: `#${i.id}`,
+                    class: g(["tv-toc-sublink", {
+                      [r.activeClass]: s(i.id),
+                      "tv-toc-marker": l.marker && s(i.id)
+                    }]),
+                    onClick: S((K) => c(i.id), ["prevent"])
+                  }, O(i.text), 11, H)
+                ]))), 128))
+              ])
+            ], 6)) : I("", !0)
+          ]))), 128))
+        ])
       ])
-    ]));
+    ], 2));
   }
 }, E = J;
 E.install = (l) => {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Cristhian Daza",
   "description": "A Vue 3 component to generate a table of contents (TOC) for your articles or documentation, enhancing navigation and user experience.",
   "license": "MIT",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "homepage": "https://ui.todovue.blog/toc",
   "repository": {

package/src/assets/scss/style.scss

@@ -2,7 +2,7 @@
 
 .tv-toc {
   position: relative;
-  padding: 1rem;
+  padding: 0;
   background-color: $light-card-bg;
   border-radius: 8px;
   color: $light-text;
@@ -23,6 +23,18 @@
     --toc-active-color: #{$active-color-dark};
   }
 
+  .tv-toc-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 1rem 1rem 0.5rem 1rem;
+    padding-left: 0;
+  }
+
+  .tv-toc-body {
+    position: relative;
+    padding: 0 1rem 1rem 1rem;
+  }
+
   .tv-toc-progress-container {
     position: absolute;
     left: 0;
@@ -48,241 +60,370 @@
     }
   }
 
-  .tv-toc-title {
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
   .tv-toc-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
+    .tv-toc-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
 
-  .tv-toc-item {
-    margin-bottom: 0.5rem;
-    position: relative;
-    opacity: 0;
-    animation: fadeSlideIn 0.5s ease forwards;
+    .tv-toc-item {
+      margin-bottom: 0.5rem;
+      position: relative;
+      opacity: 0;
+      animation: fadeSlideIn 0.5s ease forwards;
 
-    @for $i from 1 through 20 {
-      &:nth-child(#{$i}) {
-        animation-delay: #{$i * 0.05}s;
+      @for $i from 1 through 20 {
+        &:nth-child(#{$i}) {
+          animation-delay: #{$i * 0.05}s;
+        }
       }
-    }
 
-    .tv-toc-item-content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.5rem;
+      .tv-toc-item-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
 
-      .tv-toc-link {
-        flex: 1;
+        .tv-toc-link {
+          flex: 1;
+        }
       }
-    }
 
-    .tv-toc-toggle {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: inherit;
-      opacity: 0.6;
-      transition: all 0.2s ease;
-      border-radius: 4px;
-      margin-right: 4px;
+      .tv-toc-toggle {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+        opacity: 0.6;
+        transition: all 0.2s ease;
+        border-radius: 4px;
+        margin-right: 4px;
+
+        &:hover {
+          background-color: rgba($active-color, 0.1);
+          opacity: 1;
+        }
 
-      &:hover {
-        background-color: rgba($active-color, 0.1);
-        opacity: 1;
+        svg {
+          transition: transform 0.3s ease;
+        }
+
+        &.is-expanded svg {
+          transform: rotate(180deg);
+        }
       }
 
-      svg {
-        transition: transform 0.3s ease;
+      &:hover {
+        .tv-toc-link {
+          background-color: rgba($active-color, 0.05);
+        }
+
+        .tv-toc-sublink {
+          background-color: rgba($active-color, 0.05);
+        }
       }
 
-      &.is-expanded svg {
-        transform: rotate(180deg);
+      @media (prefers-color-scheme: dark) {
+        &:hover {
+          .tv-toc-link {
+            background-color: rgba($active-color-dark, 0.05);
+          }
+
+          .tv-toc-sublink {
+            background-color: rgba($active-color-dark, 0.05);
+          }
+        }
+
+        .tv-toc-toggle:hover {
+          background-color: rgba($active-color-dark, 0.1);
+        }
       }
     }
 
-    &:hover {
-      .tv-toc-link {
-        background-color: rgba($active-color, 0.05);
+    .tv-toc-link {
+      display: block;
+      text-decoration: none;
+      color: inherit;
+      font-weight: 500;
+      padding: 0.5rem 0.75rem;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+      position: relative;
+
+      &:hover {
+        color: $active-color;
       }
 
-      .tv-toc-sublink {
-        background-color: rgba($active-color, 0.05);
+      &.active {
+        color: $active-color;
+        font-weight: 700;
+        background-color: rgba($active-color, 0.1);
+        padding-left: 1rem;
+        position: relative;
+        animation: toc-pulse 2s infinite;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background: linear-gradient(180deg, var(--toc-active-color), rgba(var(--toc-active-rgb), 0.2), var(--toc-active-color));
+          background-size: 100% 200%;
+          animation: border-flow 2s linear infinite;
+          border-radius: 4px 0 0 4px;
+        }
       }
-    }
 
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        .tv-toc-link {
-          background-color: rgba($active-color-dark, 0.05);
+      &.parent-active {
+        color: $active-color;
+        font-weight: 500;
+        border-left: 2px solid rgba($active-color, 0.5);
+        padding-left: calc(1rem - 2px);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        &:hover {
+          color: $active-color-dark;
         }
 
-        .tv-toc-sublink {
-          background-color: rgba($active-color-dark, 0.05);
+        &.active {
+          color: $active-color-dark;
+          background-color: rgba($active-color-dark, 0.1);
         }
-      }
 
-      .tv-toc-toggle:hover {
-        background-color: rgba($active-color-dark, 0.1);
+        &.parent-active {
+          color: $active-color-dark;
+          border-left-color: rgba($active-color-dark, 0.5);
+        }
       }
     }
-  }
 
-  .tv-toc-link {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    font-weight: 500;
-    padding: 0.5rem 0.75rem;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    position: relative;
+    .tv-toc-sublist-wrapper {
+      overflow: hidden;
+      transition: opacity 0.3s ease, max-height 0.3s ease;
+      max-height: 1000px;
+      opacity: 1;
 
-    &:hover {
-      color: $active-color;
+      &.is-collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin-bottom: 0;
+      }
     }
 
-    &.active {
-      color: $active-color;
-      font-weight: 700;
-      background-color: rgba($active-color, 0.1);
+    .tv-toc-sublist {
+      list-style: none;
       padding-left: 1rem;
-      position: relative;
-      animation: toc-pulse 2s infinite;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        background: linear-gradient(180deg, var(--toc-active-color), rgba(var(--toc-active-rgb), 0.2), var(--toc-active-color));
-        background-size: 100% 200%;
-        animation: border-flow 2s linear infinite;
-        border-radius: 4px 0 0 4px;
+      margin-top: 0.25rem;
+      margin-bottom: 0.25rem;
+      border-left: 2px solid rgba($light-text, 0.1);
+
+      @media (prefers-color-scheme: dark) {
+        border-left-color: rgba($dark-text, 0.1);
       }
     }
 
-    &.parent-active {
-      color: $active-color;
-      font-weight: 500;
-      border-left: 2px solid rgba($active-color, 0.5);
-      padding-left: calc(1rem - 2px);
+    .tv-toc-subitem {
+      margin-bottom: 0.25rem;
+      position: relative;
+      opacity: 0;
+      animation: fadeSlideIn 0.5s ease forwards;
+
+      @for $i from 1 through 10 {
+        &:nth-child(#{$i}) {
+          animation-delay: #{$i * 0.05 + 0.3}s;
+        }
+      }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .tv-toc-sublink {
+      display: block;
+      text-decoration: none;
+      color: inherit;
+      font-size: 0.9rem;
+      opacity: 0.8;
+      padding: 0.4rem 0.75rem;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+      position: relative;
+
       &:hover {
-        color: $active-color-dark;
+        opacity: 1;
+        color: $active-color;
       }
 
       &.active {
-        color: $active-color-dark;
-        background-color: rgba($active-color-dark, 0.1);
+        opacity: 1;
+        color: $active-color;
+        font-weight: 700;
+        background-color: rgba($active-color, 0.1);
+        padding-left: 1rem;
+        position: relative;
+        animation: toc-pulse 2s infinite;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 3px;
+          background: linear-gradient(180deg, var(--toc-active-color), rgba(var(--toc-active-rgb), 0.2), var(--toc-active-color));
+          background-size: 100% 200%;
+          animation: border-flow 2s linear infinite;
+          border-radius: 4px 0 0 4px;
+        }
       }
 
-      &.parent-active {
-        color: $active-color-dark;
-        border-left-color: rgba($active-color-dark, 0.5);
+      @media (prefers-color-scheme: dark) {
+        &:hover {
+          color: $active-color-dark;
+        }
+
+        &.active {
+          color: $active-color-dark;
+          background-color: rgba($active-color-dark, 0.1);
+        }
       }
     }
   }
 
-  .tv-toc-sublist-wrapper {
-    overflow: hidden;
-    transition: opacity 0.3s ease, max-height 0.3s ease;
-    max-height: 1000px;
-    opacity: 1;
+  &.compact {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    min-width: auto;
+
+    .tv-toc-title {
+      font-size: 1rem;
+      margin: 0 0 0.5rem 0;
+      padding-left: 0;
+      opacity: 0.8;
+    }
 
-    &.is-collapsed {
-      max-height: 0;
-      opacity: 0;
-      margin-bottom: 0;
+    .tv-toc-body {
+      padding: 0;
     }
-  }
 
-  .tv-toc-sublist {
-    list-style: none;
-    padding-left: 1rem;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    border-left: 2px solid rgba($light-text, 0.1);
+    .tv-toc-progress-container {
+      width: 2px;
+      left: 0;
+      background-color: rgba($light-text, 0.1);
 
-    @media (prefers-color-scheme: dark) {
-      border-left-color: rgba($dark-text, 0.1);
+      @media (prefers-color-scheme: dark) {
+        background-color: rgba($dark-text, 0.1);
+      }
     }
-  }
 
-  .tv-toc-subitem {
-    margin-bottom: 0.25rem;
-    position: relative;
-    opacity: 0;
-    animation: fadeSlideIn 0.5s ease forwards;
+    .tv-toc-progress-bar {
+      border-radius: 0;
+      background: $active-color;
 
-    @for $i from 1 through 10 {
-      &:nth-child(#{$i}) {
-        animation-delay: #{$i * 0.05 + 0.3}s;
+      @media (prefers-color-scheme: dark) {
+        background: $active-color-dark;
       }
     }
-  }
 
-  .tv-toc-sublink {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    font-size: 0.9rem;
-    opacity: 0.8;
-    padding: 0.4rem 0.75rem;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    position: relative;
-
-    &:hover {
-      opacity: 1;
-      color: $active-color;
+    .tv-toc-list {
+      margin: 0;
     }
 
-    &.active {
+    .tv-toc-item {
+      margin-bottom: 0;
+      animation: none;
       opacity: 1;
-      color: $active-color;
-      font-weight: 700;
-      background-color: rgba($active-color, 0.1);
-      padding-left: 1rem;
-      position: relative;
-      animation: toc-pulse 2s infinite;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        background: linear-gradient(180deg, var(--toc-active-color), rgba(var(--toc-active-rgb), 0.2), var(--toc-active-color));
-        background-size: 100% 200%;
-        animation: border-flow 2s linear infinite;
-        border-radius: 4px 0 0 4px;
+
+      .tv-toc-link {
+        padding: 0.35rem 1rem;
+        font-size: 0.9rem;
+
+        &:hover {
+          background-color: transparent;
+          color: $active-color;
+        }
+
+        &.active {
+          background-color: transparent;
+          animation: none;
+          padding-left: 1rem;
+          font-weight: 600;
+          color: $active-color;
+
+          &::before {
+            display: none;
+          }
+        }
+
+        &.parent-active {
+          border-left: none;
+          padding-left: 1rem;
+          color: $active-color;
+        }
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .tv-toc-link:hover {
+          color: $active-color-dark;
+        }
+
+        .tv-toc-link.active {
+          color: $active-color-dark;
+        }
+
+        .tv-toc-link.parent-active {
+          color: $active-color-dark;
+        }
       }
     }
 
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        color: $active-color-dark;
+    .tv-toc-sublist {
+      border-left: none;
+      padding-left: 0;
+      margin: 0;
+
+      .tv-toc-subitem {
+        margin-bottom: 0;
+        animation: none;
+        opacity: 1;
       }
 
-      &.active {
-        color: $active-color-dark;
-        background-color: rgba($active-color-dark, 0.1);
+      .tv-toc-sublink {
+        padding: 0.25rem 1rem 0.25rem 1.5rem;
+        font-size: 0.85rem;
+
+        &:hover {
+          background-color: transparent;
+          color: $active-color;
+        }
+
+        &.active {
+          background-color: transparent;
+          animation: none;
+          padding-left: 1.5rem;
+          font-weight: 600;
+          color: $active-color;
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .tv-toc-sublink:hover {
+          color: $active-color-dark;
+        }
+
+        .tv-toc-sublink.active {
+          color: $active-color-dark;
+        }
       }
     }
   }

package/src/components/TvToc.vue

@@ -22,6 +22,10 @@ const props = defineProps({
   collapsible: {
     type: Boolean,
     default: false
+  },
+  compact: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -104,75 +108,77 @@ onUnmounted(() => {
 </script>
 
 <template>
-<nav class="tv-toc">
-    <div class="tv-toc-progress-container" v-if="toc?.links?.length">
-      <div
-        class="tv-toc-progress-bar"
-        :style="{ height: `${scrollProgress}%` }"
-      ></div>
-    </div>
+<nav class="tv-toc" :class="{ compact }">
     <h3 v-if="toc?.title" class="tv-toc-title">{{ toc.title }}</h3>
-    <ul class="tv-toc-list">
-      <li v-for="link in toc?.links" :key="link.id" class="tv-toc-item">
-        <div class="tv-toc-item-content">
-          <a
-            :href="`#${link.id}`"
-            class="tv-toc-link"
-            :class="{
-              [props.activeClass]: isActive(link.id),
-              'parent-active': isParentOfActive(link.id),
-              'tv-toc-marker': marker && isActive(link.id)
-            }"
-            @click.prevent="handleClick(link.id)"
-          >
-            {{ link.text }}
-          </a>
-          <button
-            v-if="collapsible && link.children && link.children.length"
-            class="tv-toc-toggle"
-            :class="{ 'is-expanded': isExpanded(link.id) }"
-            @click.stop="toggle(link.id)"
-            aria-label="Toggle section"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </button>
-        </div>
-
+    <div class="tv-toc-body">
+      <div class="tv-toc-progress-container" v-if="toc?.links?.length">
         <div
-          v-if="link.children"
-          class="tv-toc-sublist-wrapper"
-          :class="{ 'is-collapsed': collapsible && !isExpanded(link.id) }"
-          :style="collapsible ? { '--content-height': isExpanded(link.id) ? '1000px' : '0px' } : {}"
-        >
-          <ul class="tv-toc-sublist">
-            <li v-for="subLink in link.children" :key="subLink.id" class="tv-toc-subitem">
-              <a
-                :href="`#${subLink.id}`"
-                class="tv-toc-sublink"
-                :class="{
-                  [props.activeClass]: isActive(subLink.id),
-                  'tv-toc-marker': marker && isActive(subLink.id)
-                }"
-                @click.prevent="handleClick(subLink.id)"
+          class="tv-toc-progress-bar"
+          :style="{ height: `${scrollProgress}%` }"
+        ></div>
+      </div>
+      <ul class="tv-toc-list">
+        <li v-for="link in toc?.links" :key="link.id" class="tv-toc-item">
+          <div class="tv-toc-item-content">
+            <a
+              :href="`#${link.id}`"
+              class="tv-toc-link"
+              :class="{
+                [props.activeClass]: isActive(link.id),
+                'parent-active': isParentOfActive(link.id),
+                'tv-toc-marker': marker && isActive(link.id)
+              }"
+              @click.prevent="handleClick(link.id)"
+            >
+              {{ link.text }}
+            </a>
+            <button
+              v-if="collapsible && link.children && link.children.length"
+              class="tv-toc-toggle"
+              :class="{ 'is-expanded': isExpanded(link.id) }"
+              @click.stop="toggle(link.id)"
+              aria-label="Toggle section"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
               >
-               {{ subLink.text }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </button>
+          </div>
+
+          <div
+            v-if="link.children"
+            class="tv-toc-sublist-wrapper"
+            :class="{ 'is-collapsed': collapsible && !isExpanded(link.id) }"
+            :style="collapsible ? { '--content-height': isExpanded(link.id) ? '1000px' : '0px' } : {}"
+          >
+            <ul class="tv-toc-sublist">
+              <li v-for="subLink in link.children" :key="subLink.id" class="tv-toc-subitem">
+                <a
+                  :href="`#${subLink.id}`"
+                  class="tv-toc-sublink"
+                  :class="{
+                    [props.activeClass]: isActive(subLink.id),
+                    'tv-toc-marker': marker && isActive(subLink.id)
+                  }"
+                  @click.prevent="handleClick(subLink.id)"
+                >
+                 {{ subLink.text }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>

package/src/demo/Demo.vue

@@ -15,6 +15,6 @@ const TvToc = defineAsyncComponent(/* webpackChunkName: "tvToc" */() => import('
     npm-install="@todovue/tv-toc"
     source-link="https://github.com/TODOvue/tv-toc"
     url-clone="https://github.com/TODOvue/tv-toc.git"
-    version="1.1.1"
+    version="1.2.0"
   />
 </template>

package/src/demo/utils/demos/fullBlogCompact.vue

@@ -0,0 +1,68 @@
+<template>
+  <TvToc
+    :toc="toc"
+    compact
+  />
+</template>
+
+<script setup>
+import { TvToc } from '@todovue/tv-toc'
+import '@todovue/tv-toc/style.css'
+
+const toc = {
+  "title": "Table of Contents",
+  "searchDepth": 2,
+  "depth": 2,
+  "links": [
+    {
+      "id": "what-is-todovue",
+      "depth": 2,
+      "text": "What is TODOvue?"
+    },
+    {
+      "id": "the-first-component-tvarticle",
+      "depth": 2,
+      "text": "The First Component: TvArticle",
+      "children": [
+        {
+          "id": "key-features",
+          "depth": 3,
+          "text": "Key Features"
+        },
+        {
+          "id": "usage-example",
+          "depth": 3,
+          "text": "Usage Example"
+        }
+      ]
+    },
+    {
+      "id": "why-another-component-library",
+      "depth": 2,
+      "text": "Why Another Component Library?",
+      "children": [
+        {
+          "id": "different-philosophy",
+          "depth": 3,
+          "text": "Different Philosophy"
+        }
+      ]
+    },
+    {
+      "id": "the-road-ahead",
+      "depth": 2,
+      "text": "The Road Ahead"
+    },
+    {
+      "id": "join-the-journey",
+      "depth": 2,
+      "text": "Join the Journey"
+    },
+    {
+      "id": "next-steps",
+      "depth": 2,
+      "text": "Next Steps"
+    }
+  ]
+}
+</script>

package/src/demo/utils/mocks.js

@@ -1,5 +1,6 @@
 import FullBlog from './demos/fullBlog.vue?raw';
 import SimpleDoc from './demos/simpleBlog.vue?raw';
+import FullBlogCompact from './demos/fullBlogCompact.vue?raw';
 
 const tocExample1 = {
   "title": "Table of Contents",
@@ -138,6 +139,16 @@ export const demos = [
     },
     html: FullBlog,
   },
+  {
+    id: 5,
+    title: 'Full Blog Post TOC (Compact)',
+    description: 'Table of Contents for a full blog post layout. (Compact Version)',
+    propsData: {
+      toc: tocExample1,
+      compact: true,
+    },
+    html: FullBlogCompact,
+  },
   {
     id: 2,
     title: 'Simple Documentation TOC',