umberto 7.0.2 → 8.0.1

package/themes/umberto/layout/gloria/_api-docs/_partial/events.pug

@@ -1,7 +1,8 @@
 include ../_mixin/_method
 
 if isNonEmptyArray( data.events )
-	h2( id="events" class="hidden-loading" ) Events
-	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="events" )
-		each e in data.events
-			+method( e )
+	h2.b-h2( id="events" class="hidden-loading" ) Events
+	div.collapsing-list-wrapper.js-api-filter-list
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="events" )
+			each e in data.events
+				+method( e )

package/themes/umberto/layout/gloria/_api-docs/_partial/functions.pug

@@ -1,7 +1,8 @@
 include ../_mixin/_method
 
 if isNonEmptyArray( data.functions )
-	h2( id="functions" class="hidden-loading" ) Functions
-	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="functions" )
-		each m in data.functions
-			+method( m )
+	h2.b-h2( id="functions" class="hidden-loading" ) Functions
+	div.collapsing-list-wrapper.js-api-filter-list
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="functions" )
+			each m in data.functions
+				+method( m )

package/themes/umberto/layout/gloria/_api-docs/_partial/interfaces.pug

@@ -1,7 +1,7 @@
 include ../_mixin/_class-item
 
 if isNonEmptyArray( data.interfaces )
-	h2( id="interfaces" class="hidden-loading" ) Interfaces
+	h2.b-h2( id="interfaces" class="hidden-loading" ) Interfaces
 	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
 		each i in data.interfaces
 			+classItem( i )

package/themes/umberto/layout/gloria/_api-docs/_partial/methods.pug

@@ -1,19 +1,20 @@
 include ../_mixin/_method
 
 if isNonEmptyArray( data.methods )
-	h2( id="methods" class="hidden-loading" ) Methods
-	if isNonEmptyArray( data.staticMethods)
-		if isNonEmptyArray( data.instanceMethods)
+	h2.b-h2( id="methods" class="hidden-loading" ) Methods
+	div.collapsing-list-wrapper.js-api-filter-list
+		if isNonEmptyArray( data.staticMethods)
+			if isNonEmptyArray( data.instanceMethods)
+				ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
+					each m in data.instanceMethods
+						+method( m )
+
+			h4.b-h4( class="hidden-loading" ) Static methods
 			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
-				each m in data.instanceMethods
+				each m in data.staticMethods
 					+method( m )
 
-		h4( class="hidden-loading" ) Static methods
-		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
-			each m in data.staticMethods
-				+method( m )
-
-	else
-		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
-			each m in data.methods
-				+method( m )
+		else
+			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
+				each m in data.methods
+					+method( m )

package/themes/umberto/layout/gloria/_api-docs/_partial/namespaces.pug

@@ -1,7 +1,7 @@
 include ../_mixin/_class-item
 
 if isNonEmptyArray( data.namespaces )
-	h2( id="namespaces" class="hidden-loading" ) Namespaces
+	h2.b-h2( id="namespaces" class="hidden-loading" ) Namespaces
 	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
 		each i in data.namespaces
 			+classItem( i )

package/themes/umberto/layout/gloria/_api-docs/_partial/navtree.pug

@@ -1,13 +1,6 @@
 include ../_mixin/_api-tree-item.pug
 
-.side-navigation
-	.side-navigation__wrapper
-		nav.side-navigation__inner.side-navigation__inner--api
-			if projectLocals && projectLocals.apiTree
-				ul( class="tree api-tree" )
-						each node in projectLocals.apiTree.getTree().getChildren()
-							+treeItem( node )
-				div.api-tree__filter
-					p
-						input( type="checkbox" id="p1" value="public" )
-						label( for="p1" ) Show private items
+if projectLocals && projectLocals.apiTree
+	ul( class="api-tree js-api-tree" id="js-api-tree-desktop" style="--level: 1" )
+		each node in projectLocals.apiTree.getTree().getChildren()
+			+treeItem( node, 2 )

package/themes/umberto/layout/gloria/_api-docs/_partial/properties.pug

@@ -1,19 +1,20 @@
 include ../_mixin/_property
 
 if isNonEmptyArray( data.properties )
-	h2( id="properties" class="hidden-loading" ) Properties
-	if isNonEmptyArray( data.staticProperties )
-		if isNonEmptyArray( data.instanceProperties )
+	h2.b-h2( id="properties" class="hidden-loading" ) Properties
+	div.collapsing-list-wrapper.js-api-filter-list
+		if isNonEmptyArray( data.staticProperties )
+			if isNonEmptyArray( data.instanceProperties )
+				ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
+					each p in data.instanceProperties
+						+property( p )
+
+			h4.b-h4( class="hidden-loading" ) Static properties
 			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
-				each p in data.instanceProperties
+				each p in data.staticProperties
 					+property( p )
 
-		h4( class="hidden-loading" ) Static properties
-		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
-			each p in data.staticProperties
-				+property( p )
-
-	else
-		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
-			each p in data.properties
-				+property( p )
+		else
+			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
+				each p in data.properties
+					+property( p )

package/themes/umberto/layout/gloria/_api-docs/_partial/type-parameters.pug

@@ -1,26 +1,29 @@
 include ../_mixin/_type
 
 if isNonEmptyArray( data.typeParameters )
-	h2( id="type-parameters" class="hidden-loading" ) Type parameters
+	h2.b-h2( id="type-parameters" class="hidden-loading" ) Type parameters
 
 	ul( class="collapsing-list hidden-loading" )
 		each type in data.typeParameters
 
 			li( class="collapsing-list__item collapsing-list__item--visible" )
-				div( class="collapsing-list__term toggler--collapsed" class=type.description ? "" : "hidden" )
+				div( class="collapsing-list__intro js-api-collapsing-button toggler--collapsed" class=type.description ? "" : "hidden" )
+					if ( type.description && type.description.content )
+						+svg-icon({ icon: 'chevron-right', className: 'collapsing-list__item-chevron' })
 					h3
-						code
-							span( class="member-name" ) #{ type.name }
+						div.api-item-heading
+							code.api-item-heading__code
+								span( class="member-name" ) #{ type.name }
 
-							//- We mark most TypeScript types as `object`, as their structure is complex.
-							//- Hence, it does not really make sense to show that a type extends an unknown `object`.
-							if ( type.value && type.value[ 0 ] !== 'object' )
-								| !{' : '}
-								if ( type.isExtending )
-									i !{ 'extends ' }
-								+type( type.value )
+								//- We mark most TypeScript types as `object`, as their structure is complex.
+								//- Hence, it does not really make sense to show that a type extends an unknown `object`.
+								if ( type.value && type.value[ 0 ] !== 'object' )
+									| !{' : '}
+									if ( type.isExtending )
+										i !{ 'extends ' }
+									+type( type.value )
 
 				if ( type.description )
-					div.collapsing-list__description
+					div.collapsing-list__description( style="height: 0px;" )
 						div.collapsing-list__content
 							| !{ type.description.content }

package/themes/umberto/layout/gloria/_api-docs/_partial/typedefs.pug

@@ -1,7 +1,8 @@
 include ../_mixin/_class-item
 
 if isNonEmptyArray( data.typedefs )
-	h2( id="type-definitions" class="hidden-loading" ) Type Definitions
-	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
-		each t in data.typedefs
-			+classItem( t )
+	h2.b-h2( id="type-definitions" class="hidden-loading" ) Type Definitions
+	div.collapsing-list-wrapper.js-api-filter-list
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+			each t in data.typedefs
+				+classItem( t )

package/themes/umberto/layout/gloria/_api-docs/_subheader/_style.scss

@@ -0,0 +1,5 @@
+
+.api-subheader {
+	width: 100%;
+	margin-top: var(--spacing-2);
+}

package/themes/umberto/layout/gloria/_api-docs/_subheader/index.pug

@@ -0,0 +1,10 @@
+include ../_mixin/_badge
+
+mixin apiSubheader()
+	- const iconName = "api-" + data.kind.toLowerCase();
+	- const iconClassName = "api-icon api-icon--" + data.kind.toLowerCase();
+	- const tagClassName = "tag--api tag--api-" + data.kind.toLowerCase();
+
+	div(class="api-subheader hidden-loading")
+		div.api-subheader__badges
+			+tag({ label: data.kind, icon : iconName, className: tagClassName })

package/themes/umberto/layout/gloria/_api-docs/_toc/_style.scss

@@ -0,0 +1,229 @@
+
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/base/_mixins.scss" as *;
+
+:root {
+	--api-toc-width-xl: 320px;
+	--api-toc-width-lg: 288px;
+	--api-toc-width-l: 256px;
+}
+
+.api-toc {
+	position: fixed;
+	z-index: var(--z-index-toc);
+	top: var(--header-height, --header-navigation-height);
+	bottom: 0;
+	right: 0;
+	height: calc(100vh - var(--header-height, --header-navigation-height));
+	width: 100%;
+
+	overflow-y: auto;
+	overflow-x: hidden;
+	overscroll-behavior: contain;
+
+	@include breakpoint-only($breakpoint-sm, $breakpoint-lg) {
+		width: var(--api-toc-width-lg);
+	}
+
+	@include max-width($breakpoint-lg) {
+		display: none;
+		background-color: var(--color-gray-200);
+		box-shadow: calc(var(--spacing-1) * -1) var(--spacing-1) var(--spacing-2) 0 var(--color-secondary-800-alpha);
+		overflow: auto;
+		overscroll-behavior: contain;
+		transform: translateX(100%);
+
+		@include scrollbar;
+
+		@include mobile {
+			top: var(--header-height, --header-navigation-height);
+			overflow: auto;
+			height: calc(100vh - var(--header-height, --header-navigation-height));
+			@include scrollbar;
+		}
+
+		&.is-anim {
+
+			&-entering,
+			&-entered {
+				transform: translateX(0);
+			}
+
+			&-exiting {
+				transform: translateX(100%);
+			}
+
+			&-exited {
+				transform: translateX(100%);
+			}
+		}
+	}
+
+	@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+		width: var(--api-toc-width-lg);
+		display: block !important;
+	}
+
+	@include min-width($breakpoint-xl) {
+		width: var(--api-toc-width-xl);
+		display: block !important;
+	}
+
+	&--transition {
+		transition: transform var(--duration-fast) ease-in-out;
+	}
+
+	&__content {
+		padding: var(--spacing-9) var(--spacing-3) var(--spacing-3) var(--spacing-3);
+
+		@include mobile {
+			padding: var(--spacing-6) var(--spacing-4)
+		}
+
+		@include min-width($breakpoint-lg) {
+			position: sticky;
+			top: var(--header-height, --header-navigation-height);
+			overflow: auto;
+			overscroll-behavior: contain;
+			height: calc(100vh - var(--header-height, --header-navigation-height));
+			@include scrollbar;
+		}
+
+		dd {
+			margin-inline-start: var(--spacing-1);
+		}
+
+		.b-link {
+			text-decoration: none;
+		}
+
+		code {
+			font-family: var(--font-family-monospace);
+			font-weight: var(--font-weight-regular);
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-md);
+		}
+	}
+
+	&__heading {
+		margin-bottom: var(--spacing-3);
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-bold);
+		color: var(--color-secondary-700);
+
+		:not(:first-child) {
+			margin-top: var(--spacing-3);
+		}
+	}
+
+	&__list {
+		list-style: none;
+		margin: 0 0 0 var(--spacing-1);
+		padding: 0;
+		overflow: hidden;
+		transition: height var(--duration-normal) var(--smootherstep);
+
+		&-button {
+			margin-bottom: var(--spacing-3);
+			margin-top: var(--spacing-3);
+
+			&-icon {
+				height: auto;
+				transition: transform var(--duration-normal) ease;
+				transform-origin: center;
+			}
+
+			&--open {
+				.api-toc__list-button-icon {
+					transform: rotate(90deg);
+				}
+			}
+		}
+
+		&-item {
+
+			&__link {
+				text-decoration: none;
+
+				code {
+					font-family: var(--font-family-monospace);
+					font-weight: var(--font-weight-regular);
+					font-size: var(--font-size-sm);
+					line-height: var(--line-height-md);
+				}
+			}
+
+			&-label {
+				font-family: var(--font-family-monospace);
+				font-size: 80%;
+				font-weight: var(--font-weight-regular);
+				color: var(--color-secondary-700);
+			}
+		}
+
+		&.is-empty {
+			&:before {
+				content: "No items to display for the current filtering criteria.";
+				display: block;
+				margin: var(--spacing-4) 0;
+
+				font-family: var(--font-family-text);
+				font-weight: var(--font-weight-thin);
+				font-size: var(--font-size-xs);
+				line-height: var(--line-height-base);
+				letter-spacing: var(--letter-spacing-base);
+				color: var(--color-text-primary);
+				font-style: italic;
+			}
+
+			> * {
+				display: none;
+			}
+		}
+	}
+
+
+	&__show-button {
+		position: fixed;
+		z-index: var(--z-index-toc-show-button);
+		width: 40px;
+
+		@include mobile {
+			top: var(--header-height, --header-navigation-height);
+		}
+	}
+
+	&__hide-button,
+	&__show-button {
+		color: var(--color-primary);
+		background-color: var(--color-common-white);
+		cursor: pointer;
+
+		&:hover {
+			text-decoration: underline;
+		}
+
+		@include mobile {
+			font-size: var(--font-size-sm);
+		}
+
+		@include min-width($breakpoint-lg) {
+			display: none;
+		}
+	}
+
+	&__hide-button {
+		position: absolute;
+		z-index: 1;
+		top: calc(var(--spacing-9) + var(--spacing-4));
+		right: var(--spacing-3);
+		background-color: transparent;
+		border: none;
+		font-size: var(--font-size-sm);
+
+		@include mobile {
+			top: var(--spacing-10);
+			right: var(--spacing-4);
+		}
+	}
+}

package/themes/umberto/layout/gloria/_api-docs/_toc/index.pug

@@ -0,0 +1,11 @@
+mixin apiToc()
+	aside.api-toc.js-api-toc
+		button.a11y-focusable.api-toc__hide-button.js-api-toc-hide-btn(
+			type="button",
+			aria-label="Hide the table of contents."
+		) Hide
+		if data
+			div.api-toc__content
+				include ../_partial/api-hierarchy
+
+				include ../_partial/api-toc

package/themes/umberto/layout/gloria/_api-docs/api-base.pug

@@ -1,45 +1,45 @@
-extends ../base
+extends ../api
 
 block content
-    include _partial/loading-spinner
+	include _partial/loading-spinner
 
-    include _partial/api-subheader
+	//- TO BE REMOVED.
+	//- TODO: Move this to a sidebar
+	//- include _partial/api-subheader
 
-    include _partial/api-info-box
+	//- include _partial/api-hierarchy
 
-    include _partial/description
+	include _partial/description
 
-    != filter
+	include _partial/config-options
 
-    include _partial/config-options
+	include _partial/constants
 
-    include _partial/constants
+	include _partial/type-parameters
 
-    include _partial/type-parameters
+	include _partial/properties
 
-    include _partial/properties
+	include _partial/methods
 
-    include _partial/methods
+	include _partial/events
 
-    include _partial/events
+	include _partial/namespaces
 
-    include _partial/namespaces
+	include _partial/classes
 
-    include _partial/classes
+	include _partial/interfaces
 
-    include _partial/interfaces
+	include _partial/typedefs
 
-    include _partial/typedefs
-
-    include _partial/functions
+	include _partial/functions
 
 block navtree
-    != navTree
+	!= navTree
 
 block projectVersion
-    if page.permalinkDisableDomains
-        meta( name= 'permalink-disable-domains' content=page.permalinkDisableDomains )
+	if page.permalinkDisableDomains
+		meta( name= 'permalink-disable-domains' content=page.permalinkDisableDomains )
 
-    if projectLocals
-        meta( name= 'project-version' content= projectLocals.projectVersion )
-        meta( name= 'project-slug' content= projectLocals.projectSlug )
+	if projectLocals
+		meta( name= 'project-version' content= projectLocals.projectVersion )
+		meta( name= 'project-slug' content= projectLocals.projectSlug )

package/themes/umberto/layout/gloria/_api-docs/class.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Class' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Class' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/errors.pug

@@ -1,6 +1,6 @@
 include ./_mixin/_error
 
 if isNonEmptyArray( errorData )
-    ul( class="collapsing-list" )
-        each e in errorData
-            +error( e )
+	ul( class="collapsing-list" )
+		each e in errorData
+			+error( e )

package/themes/umberto/layout/gloria/_api-docs/index.pug

@@ -0,0 +1,3 @@
+include ./_header/index
+include ./_subheader/index
+include ./_toc/index

package/themes/umberto/layout/gloria/_api-docs/interface.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/arrows.svg', kind: 'Interface' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/arrows.svg', kind: 'Interface' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/mixin.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Mixin' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Mixin' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/module.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-red.svg', kind: 'Module' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-red.svg', kind: 'Module' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/namespace.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-brown.svg', kind: 'Namespace' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-brown.svg', kind: 'Namespace' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.