refactor(core): ♻️ clean up ToC classes

Clean up the CSS class name to follow the MW CSS coding conventions.
The structure is refactored to be similar to Vector for easier maintainenace.

resources/skins.citizen.styles/components/TableOfContents.less

@@ -2,25 +2,25 @@
 	font-size: var( --font-size-small );
 	line-height: var( --line-height-xs );
 
-	&__top {
+	&-top {
 		.citizen-ui-icon {
 			transform: rotate( 90deg );
 		}
 	}
 
-	&__contents,
-	&__list {
+	&-contents,
+	&-list {
 		margin: 0 0 0 var( --space-xs );
 		list-style: none;
 		border-left: var( --border-width-thick ) solid var( --border-color-base );
 
-		.citizen-toc__link {
+		.citizen-toc-link {
 			border-top-left-radius: 0;
 			border-bottom-left-radius: 0;
 		}
 	}
 
-	&__link {
+	&-link {
 		position: relative;
 		display: flex;
 		gap: var( --space-xs );
@@ -28,7 +28,7 @@
 		font-weight: var( --font-weight-medium );
 		color: var( --color-emphasized );
 
-		&.citizen-toc__top {
+		&.citizen-toc-top {
 			height: 0;
 			padding-top: 0;
 			padding-bottom: 0;
@@ -50,7 +50,7 @@
 		}
 	}
 
-	&__indicator {
+	&-indicator {
 		position: absolute;
 		top: 0;
 		bottom: 0;
@@ -62,22 +62,22 @@
 		margin-left: ~'calc( var( --border-width-thick ) * -1 )';
 	}
 
-	&__text {
+	&-text {
 		display: flex;
 		gap: var( --space-xs );
 	}
 
-	&__numb {
+	&-numb {
 		display: none;
 		color: var( --color-subtle );
 	}
 
-	&__listItem {
+	&-list-item {
 		&--active {
-			> .citizen-toc__link {
+			> .citizen-toc-link {
 				color: var( --color-progressive );
 
-				.citizen-toc__indicator {
+				.citizen-toc-indicator {
 					background-color: var( --color-progressive );
 				}
 			}
@@ -87,7 +87,7 @@
 
 // Sticky header styles
 .citizen-page-header--sticky {
-	.citizen-toc__top.citizen-toc__link {
+	.citizen-toc-top.citizen-toc-link {
 		height: 2rem; // 1rem text + 1rem padding
 		padding-top: var( --space-xs );
 		padding-bottom: var( --space-xs );
@@ -107,7 +107,7 @@
 		transition: var( --transition-menu );
 		transition-property: bottom; // Transform won't work with the backdrop
 
-		&__card {
+		&-card {
 			// This is not bulletproof since it will get covered by page header
 			// in extremely short height. but it should be good for now
 			max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';

templates/TableOfContents.mustache

@@ -9,17 +9,13 @@
 			<span>{{msg-toc}}</span>
 		</summary>
 	</details>
-	<nav id="mw-panel-toc" class="citizen-toc__card citizen-menu__card" role="navigation" aria-labelledby="mw-panel-toc-label">
-		<a class="citizen-toc__top citizen-toc__link" title="{{html-citizen-jumptotop}}" href="#top">
+	<nav id="mw-panel-toc" class="citizen-toc-card citizen-menu__card" role="navigation" aria-labelledby="mw-panel-toc-label">
+		<a class="citizen-toc-top citizen-toc-link" title="{{html-citizen-jumptotop}}" href="#top">
 			<div class="citizen-ui-icon mw-ui-icon-first mw-ui-icon-wikimedia-first"></div>
-			<div class="citizen-toc__text">{{msg-citizen-jumptotop}}</div>
+			<div class="citizen-toc-text">{{msg-citizen-jumptotop}}</div>
 		</a>
 		<div class="citizen-menu__heading">{{msg-toc}}</div>
-		<ul class="citizen-toc__contents" id="mw-panel-toc-list">
-			{{#array-sections}}
-			{{>TableOfContents__line}}
-			{{/array-sections}}
-		</ul>
+		{{>TableOfContents__list}}
 	</nav>
 </div>
 {{/data-toc}}

templates/TableOfContents__line.mustache

@@ -1,16 +1,16 @@
 <li id="toc-{{anchor}}"
-	class="citizen-toc__listItem citizen-toc-level--{{toclevel}}">
-	<a class="citizen-toc__link" href="#{{linkAnchor}}{{^linkAnchor}}{{anchor}}{{/linkAnchor}}">
-		<div class="citizen-toc__indicator"></div>
-		<div class="citizen-toc__text">
-			<span class="citizen-toc__numb">{{number}}</span>
-			<span class="citizen-toc__heading">{{{line}}}</span>
+	class="citizen-toc-list-item citizen-toc-level-{{toclevel}}">
+	<a class="citizen-toc-link" href="#{{linkAnchor}}">
+		<div class="citizen-toc-indicator"></div>
+		<div class="citizen-toc-text">
+			<span class="citizen-toc-numb">{{number}}</span>
+			<span class="citizen-toc-heading">{{{line}}}</span>
 		</div>
 	</a>
 	{{#html-summary}}
 	{{{.}}}
 	{{/html-summary}}
-	<ul id="toc-{{anchor}}-sublist" class="citizen-toc__list">
+	<ul id="toc-{{anchor}}-sublist" class="citizen-toc-list">
 		{{#array-sections}}
 		{{>TableOfContents__line}}
 		{{/array-sections}}

templates/TableOfContents__list.mustache

@@ -0,0 +1,5 @@
+<ul class="citizen-toc-contents" id="mw-panel-toc-list">
+	{{#array-sections}}
+	{{>TableOfContents__line}}
+	{{/array-sections}}
+</ul>