umberto 7.0.2 → 8.0.1

package/themes/umberto/layout/gloria/404.pug

@@ -1,22 +1,31 @@
+include _components/index
+include _modules/index
+
 doctype html
-html( lang='en' )
-    head
-        meta( charset='utf-8' )
-        meta( name="viewport" content="width=device-width, initial-scale=1")
-        title= page[ 'meta-title' ] ? page[ 'meta-title' ] : page.title
-        link( rel = 'stylesheet', href = '/assets/' + umbertoVersion + '/gloria/css/styles.css', type='text/css' media='screen' )
-    body
-        header.top
+html(lang='en')
+	head
+		meta(charset='utf-8')
+		meta(name="viewport" content="width=device-width, initial-scale=1")
+		meta(name='description', content=page[ 'meta-description' ] || page.description)
+		meta(name='robots', content='noindex, nofollow')
+		title=page[ 'meta-title' ] || page.title
 
-        main( class = 'main main--no-sitenav' )
-            section( class = 'main__content formatted' )
+		link(rel='stylesheet', href=`/docs/assets/${umbertoVersion}/gloria/css/styles.css`, type='text/css' media='all')
 
-                .main__content-inner
-                    - const split = uSplitToTitleAndContent( page.content );
+		link(rel='icon', type='image/png', href='/docs/assets/img/favicons/32x32.png', sizes='32x32')
+		link(rel='icon', type='image/png', href='/docs/assets/img/favicons/64x64.png', sizes='64x64')
+		link(rel='icon', type='image/png', href='/docs/assets/img/favicons/96x96.png', sizes='96x96')
+		link(rel='icon', type='image/png', href='/docs/assets/img/favicons/120x120.png', sizes='120x120')
+		link(rel='apple-touch-icon', type='image/png', href=`/docs/assets/img/favicons/180x180.png`)
 
-                    h1
-                        != split.title || page.title
+	body.l-layout.l-layout--muted.js-layout
+		+header-nightly-info
+		+header-legacy-warning
+		+header-promobar
+		+header({ className: 'l-layout__header', withChooseProject: false })
 
-                    != split.content
+		.l-layout__container
+			.l-layout__main
+				+not-found
 
-        include _partial/footer
+		script(src=`/docs/assets/${umbertoVersion}/gloria/scripts/app.js`)

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

@@ -0,0 +1,31 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.api-header {
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 0 var(--spacing-4);
+	margin-bottom: var(--spacing-6);
+
+	@include mobile {
+		align-items: flex-start;
+	}
+
+	&__title {
+		margin-top: 0;
+		margin-bottom: 0;
+		word-break: break-all;
+		width: calc(100% - 7rem);
+
+		@include min-width($breakpoint-lg) {
+			width: calc(100% - 4rem);
+		}
+	}
+
+	.c-main__content-buttons {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+}

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

@@ -0,0 +1,50 @@
+include ../_mixin/_type
+
+mixin apiHeader( config )
+	- const iconName = "api-" + config.kind.toLowerCase();
+	- const iconClassName = "api-icon api-icon--" + config.kind.toLowerCase();
+	- const filterId = uRandomId('ApiFilter');
+
+	div.api-header
+		h1.b-h1.api-header__title.js-api-h1( data-ln = data.longname )
+			!= data.name
+		.c-main__content-buttons
+			+dropdown({ preferredDirection: 'down', contentId: 'api-filter', className: 'api-filter-dropdown js-api-filter' })
+				+trigger
+					+button({ icon: 'filter', variant: 'toolbar' })(
+						aria-haspopup='true',
+						aria-expanded='false',
+						aria-controls='api-filter'
+					)
+
+				+content
+					+dropdown-item({ narrow: true })
+						+checkbox({ id:'f1', name: 'name1', className: 'js-api-filter-checkbox', label: 'Public', value: 'public', expanded: true, checked: true })
+					+dropdown-item({ narrow: true })
+						+checkbox({ id:'f2', name: 'name5', className: 'js-api-filter-checkbox', label: 'Protected', value: 'protected', expanded: true, checked: true })
+					+dropdown-item({ narrow: true })
+						+checkbox({ id:'f3', name: 'name6', className: 'js-api-filter-checkbox', label: 'Private', value: 'private', expanded: true })
+					+dropdown-item({ narrow: true })
+						+checkbox({ id:'f4', name: 'name2', className: 'js-api-filter-checkbox', label: 'Inherited', value: 'inherited', expanded: true, checked: true })
+					//- Typedoc does not support the `@mixin` concept as it is implemented in Umberto.
+					//- See: #1060.
+					if ( projectLocals.apiType !== 'typedoc' )
+						+dropdown-item({ narrow: true })
+							+checkbox({ id:'f6', name: 'name3', className: 'js-api-filter-checkbox', label: 'Mixed', value: 'mixed', expanded: true })
+					//- Typedoc supports the `@internal` annotation. See: #1057.
+					if ( projectLocals.apiType === 'typedoc' )
+						+dropdown-item({ narrow: true })
+							+checkbox({ id:'f7', name: 'name4', className: 'js-api-filter-checkbox', label: 'Internal', value: 'internal', expanded: true })
+					+dropdown-item({ narrow: true })
+						+checkbox({ id:'f5', name: 'name7', className: 'js-api-filter-checkbox', label: 'Deprecated', value: 'deprecated', expanded: true, checked: true })
+
+			+button({
+				icon: 'unordered-list',
+				variant: 'toolbar',
+				className: 'api-toc__show-button js-api-toc-show-btn',
+				square: true,
+				ariaLabel: 'Show the table of contents' })(
+					aria-expanded='false'
+					aria-haspopup='true'
+				)
+		+apiSubheader()

package/themes/umberto/layout/gloria/_api-docs/_mixin/_api-see-source.pug

@@ -5,7 +5,4 @@ mixin seeSource( item )
 
 		if link
 			.see-source
-				a( href=link target='_blank' rel="noopener noreferrer" )
-					svg( viewBox='0 0 1024 1024' )
-						path( d='M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z' )
-					| See source
+				+button-link({ label: 'See source', icon: 'github', variant: 'secondary', size: 'sm', target: '_blank', href: link, rel: 'noopener noreferrer', className: 'c-button--small-padding' })

package/themes/umberto/layout/gloria/_api-docs/_mixin/_api-tree-item.pug

@@ -1,30 +1,46 @@
-mixin treeItem( node )
-    - const children = node.getChildren();
-    - const hasChildren = children && children.length > 0;
-    - let dataAttr = {};
+include ../../_components/icon/index
+include ../../_components/svg/index
 
-    - if ( node.getProp( 'access' ) ) dataAttr[ `data-${node.getProp('access')}` ] = 'true';
+mixin treeItem( node, level )
+	- const children = node.getChildren();
+	- const hasChildren = children && children.length > 0;
+	- let dataAttr = {};
 
-    li( class= hasChildren ? "toggler--collapsed" : "" )&attributes(dataAttr)
-        - let wrapperClass = "tree__item__wrapper";
+	- if ( node.getProp( 'access' ) ) dataAttr[ `data-${node.getProp('access')}` ] = 'true';
 
-        - const classStr = "tree__item--"  + node.getProp( 'type' ) + " tree__item__text";
-        - const link = node.getUrl();
-        - const longname = node.getProp( 'longname' );
+	li( class= "api-tree__item" )&attributes(dataAttr)
+		- let wrapperClass = "tree__item__wrapper";
 
-        if !hasChildren
-            a( href=link )
-                div( class = wrapperClass data-ln = longname )
-                    span( class = classStr )
-                        | #{ node.getProp( 'name' ) }
-        else
-            div( class = wrapperClass data-ln = longname )
-                if ( link )
-                    a( class = classStr href=link )
-                        | #{ node.getProp( 'name' ) }
-                else
-                    span( class = classStr )
-                        | #{ node.getProp( 'name' ) }
-            ul
-                each child in children
-                    +treeItem( child )
+		- const classStr = "api-tree__text";
+		- const iconName = "api-" + node.getProp( 'type' );
+		- const isFolder = node.getProp( 'type' ) == 'folder';
+		- const link = node.getUrl();
+		- const longname = node.getProp( 'longname' );
+		- const iconClassName = "api-tree__link--with-icon api-tree__link--icon-" + node.getProp( 'type' );
+
+		if !hasChildren
+			div.api-tree__item-wrapper
+				a.api-tree__link(
+					href=link,
+					class=iconClassName,
+					data-skip-validation=''
+				)
+					div( class = wrapperClass data-ln = longname )
+						span( class = classStr )
+							| #{ node.getProp( 'name' ) }
+		else
+			div( class = 'api-tree__item-wrapper' data-ln = longname )
+				button.api-tree__button.api-tree__button--chevron.js-sidebar-button( type="button", 'aria-label'='Expand/Collapse '+longname )
+				if ( link )
+					a(
+						class = [ classStr, 'api-tree__link', iconClassName ],
+						href=link,
+						data-skip-validation=''
+					)
+						| #{ node.getProp( 'name' ) }
+				else
+					span( class = [ classStr, iconClassName, isFolder ? 'js-sidebar-button' : ''] )
+						| #{ node.getProp( 'name' ) }
+			ul.api-tree__list.api-tree__list--hidden( 'style'='height: 0px; display:none; --level:'+level )
+				each child in children
+					+treeItem( child, level + 1 )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_class-item.pug

@@ -2,28 +2,35 @@ include ./_link-or-text.pug
 include ./_badge.pug
 include ./_dev-names.pug
 include ./_api-see-source.pug
+include ../../_components/icon/index
+include ../../_components/svg/index
 
 //- todo: actually these shouldnt be collapsing-list__items
 mixin classItem( item )
 	- const attrData = createFilterAttribs( item );
 
-	li( class="collapsing-list__item collapsing-list__item--visible" )&attributes( attrData )
-		div( class="collapsing-list__term" id=item.id )
+	li( class="collapsing-list__item collapsing-list__item--visible js-api-filter-item" )&attributes( attrData )
+		div( class="collapsing-list__intro js-api-collapsing-button" id=item.id )
+			if ( item.description && item.description.excerpt )
+				+svg-icon({ icon: 'chevron-right', className: 'collapsing-list__item-chevron' })
 			h3
-				if isNonEmptyArray( item.badges )
-					p.badges
-						each badge in item.badges
-							+badge( badge )
+				div.api-item-heading
+					code.api-item-heading__code
+						+linkOrText( item.longname, {
+							linkText: item.name
+						} )
+					if isNonEmptyArray( item.badges )
+						+tagWrapper()
+							each badge in item.badges
+								- const iconName = badge.text == 'private' ? 'lock' : badge.text == 'observable' ? 'eye' : null;
+								- const linkTo = badge && badge.linkTo ? badge.linkTo : null;
+								- const linkClassName = linkTo ? 'tag--link' : '';
+								+tag({ label: badge.text, icon: iconName, iconSize: 'sm', href: linkTo, className: linkClassName })
 
-				code
-					+linkOrText( item.longname, {
-						linkText: item.name
-					} )
-
-				+devNames( item.longname )
+		+devNames( item.longname )
 
 		if ( item.description && item.description.excerpt )
-			div.collapsing-list__description
+			div.collapsing-list__description( style="height: 0px;" )
 				p( class="collapsing-list__excerpt collapsing-list__excerpt--short" )
 					| !{ item.description.excerpt }
 				+seeSource( item )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_dev-names.pug

@@ -5,5 +5,5 @@
 mixin devNames( name, label )
 	- const nameToDisplay = label ? `${ name }:${ label }` : name;
 
-	span.collapsing-list__dev-names( aria-hidden='true', title=nameToDisplay )
+	span.api-item-heading__dev-names( aria-hidden='true', title=nameToDisplay )
 		code #{ nameToDisplay }

package/themes/umberto/layout/gloria/_api-docs/_mixin/_error.pug

@@ -1,15 +1,20 @@
 include _params
 include _type
 include _link-or-text
+include ../../_components/icon/index
+include ../../_components/svg/index
 
 mixin error( err )
 	li( class="collapsing-list__item collapsing-list__item--visible" )
-		div( class="collapsing-list__term toggler--collapsed" id=err.id )
+		div( class="collapsing-list__intro js-api-collapsing-button toggler--collapsed" id=err.id )
+			if ( ( err.description && (err.description.excerpt || err.description.content ) ) || isNonEmptyArray( err.params ) )
+				+svg-icon({ icon: 'chevron-right', className: 'collapsing-list__item-chevron' })
 			h3
-				code
-					a( class="member-name" href="#" + err.id ) #{ err.name }
+				div.api-item-heading
+					code.api-item-heading__code
+						a.doc.b-link( class="member-name" href="#" + err.id ) #{ err.name }
 
-		div.collapsing-list__description.collapsing-list__description--error-page
+		div.collapsing-list__description.collapsing-list__description--error-page( style="height: 0px;" )
 			if ( err.description && err.description.excerpt )
 				p.collapsing-list__excerpt
 					| !{ err.description.excerpt }
@@ -19,5 +24,5 @@ mixin error( err )
 					| !{ err.description.content }
 
 				if isNonEmptyArray( err.params )
-					h4 Parameters
+					h4.b-h4 Parameters
 					+paramsMixin( err.params )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_hierarchy-list.pug

@@ -1,7 +1,7 @@
 include ./_hierarchy-item.pug
 
 mixin hierarchyList( items )
-    dt Hierarchy
+    dt.api-toc__heading Hierarchy
     dd
         ul.hierarchy-list
             +hierarchy-item( items )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_link-or-text.pug

@@ -33,7 +33,7 @@ mixin linkOrText( name, options = {} )
 			- nameText = htmlsafe( nameText );
 
 			if ( link )
-				a( class=aClass href=link.replace( 'event:', 'event-') ) !{ nameText }
+				a.doc.b-link( class=aClass href=link.replace( 'event:', 'event-') ) !{ nameText }
 			else
 				| #{ nameText }
 

package/themes/umberto/layout/gloria/_api-docs/_mixin/_method.pug

@@ -8,79 +8,85 @@ include ./_api-see-source.pug
 include ./_dev-names.pug
 include ./_related.pug
 include ./type-parameter
+include ../../_components/icon/index
+include ../../_components/svg/index
 
 mixin method( met )
 	- let attrData = createFilterAttribs( met );
-	- const itemClasses = [ 'collapsing-list__item', 'collapsing-list__item--visible' ];
+	- const itemClasses = [ 'collapsing-list__item', 'collapsing-list__item--visible', 'js-api-filter-item' ];
 
 	li( class = itemClasses )&attributes( attrData )
 		- const id = encodeURI( met.id )
-		div( class="collapsing-list__term toggler--collapsed" id=id )
+		div( class="collapsing-list__intro js-api-collapsing-button toggler--collapsed" id=id )
+			if ( ( met.description && met.description.excerpt ) || isNonEmptyArray( met.typeParameters ) || isNonEmptyArray( met.params ) || isNonEmptyArray( met.returns ) || isNonEmptyArray( met.fires ) || isNonEmptyArray( met.see ) )
+				+svg-icon({ icon: 'chevron-right', className: 'collapsing-list__item-chevron' })
 			h3
-				//- badges
-				if isNonEmptyArray( met.badges )
-					p.badges
-						each badge in met.badges
-							+badge( badge )
+				div.api-item-heading
+					code.api-item-heading__code
+						a.doc.b-link( class="member-name" href="#" + id ) #{ met.name }
 
-				code
-					a( class="member-name" href="#" + id ) #{ met.name }
+						//- params ( param1, [param2] )
+						| (
+						if isNonEmptyArray( met.params )
+							each param, index in met.params
+								if param.optional
+									|  [ #{ param.name } ]
+								else
+									|  #{ param.name }
+								if ( param.subParamsString )
+									//- Allow rendering HTML from the `subParamsString` as it may contain links to other pages.
+									| !{ param.subParamsString }
+								if index < met.params.length - 1
+									|,
+								else
+									| !{ ' ' }
+						| )
 
-					//- params ( param1, [param2] )
-					| (
-					if isNonEmptyArray( met.params )
-						each param, index in met.params
-							if param.optional
-								|  [ #{ param.name } ]
-							else
-								|  #{ param.name }
-							if ( param.subParamsString )
-								//- Allow rendering HTML from the `subParamsString` as it may contain links to other pages.
-								| !{ param.subParamsString }
-							if index < met.params.length - 1
-								|,
-							else
-								| !{ ' ' }
-					| )
+						//- returns
+						if isNonEmptyArray( met.returns )
+							|  &rarr; !{' '}
+							if isNonEmptyArray( met.returns[0].types )
+								+type( met.returns[0].types )
 
-					//- returns
-					if isNonEmptyArray( met.returns )
-						|  &rarr; !{' '}
-						if isNonEmptyArray( met.returns[0].types )
-							+type( met.returns[0].types )
+					//- badges
+					if isNonEmptyArray( met.badges )
+						+tagWrapper()
+							each badge in met.badges
+								- const iconName = badge.text == 'private' ? 'lock' : badge.text == 'observable' ? 'eye' : null;
+								- const linkTo = badge && badge.linkTo ? badge.linkTo : null;
+								- const linkClassName = linkTo ? 'tag--link' : '';
+								+tag({ label: badge.text, icon: iconName, iconSize: 'sm', href: linkTo, className: linkClassName })
 
+		+devNames( met.longname, met.label )
 
-				+devNames( met.longname, met.label )
-
-		div.collapsing-list__description
+		div.collapsing-list__description( style="height: 0px;" )
 			if ( met.description && met.description.excerpt )
 				div.collapsing-list__excerpt
 					p !{ met.description.excerpt }
 
 			div.collapsing-list__content
-				+seeSource( met )
-
 				if ( met.description )
 					| !{ met.description.content }
+				+seeSource( met )
 
 				if isNonEmptyArray( met.typeParameters )
-					h4 Type parameters
+					h4.b-h4 Type parameters
 					dl
 						each type in met.typeParameters
 							+typeParameter( type )
 
 				if isNonEmptyArray( met.params )
-					h4 Parameters
+					h4.b-h4 Parameters
 					+paramsMixin( met.params )
 
 				if isNonEmptyArray( met.returns )
-					h4 Returns
+					h4.b-h4 Returns
 					dl
 						each ret in met.returns
 							+return( ret )
 
 				if isNonEmptyArray( met.fires )
-					h4 Fires
+					h4.b-h4 Fires
 					ul
 						each longname in met.fires
 							+firesItem( longname )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_property.pug

@@ -4,38 +4,44 @@ include ./_badge.pug
 include ./_dev-names.pug
 include ./_api-see-source.pug
 include ./_related.pug
+include ../../_components/icon/index
+include ../../_components/svg/index
 
 mixin property( prop )
 	- const attrData = createFilterAttribs( prop );
-	- const itemClasses = [ 'collapsing-list__item', 'collapsing-list__item--visible' ];
+	- const itemClasses = [ 'collapsing-list__item', 'collapsing-list__item--visible', 'js-api-filter-item' ];
 
 	li( class = itemClasses )&attributes( attrData )
-		div( class="collapsing-list__term toggler--collapsed" id=prop.id )
+		div( class="collapsing-list__intro js-api-collapsing-button toggler--collapsed" id=prop.id )
+			if ( ( prop.description && prop.description.content ) || prop.defaultvalue || isNonEmptyArray( prop.params ) || isNonEmptyArray( prop.see ) )
+				+svg-icon({ icon: 'chevron-right', className: 'collapsing-list__item-chevron' })
 			h3
-				if isNonEmptyArray( prop.badges )
-					p.badges
-						each badge in prop.badges
-							+badge( badge )
-
-				code
-					a( class="member-name" href="#" + prop.id ) #{ prop.name }
-
-					if isNonEmptyArray( prop.types )
-						|  :!{' '}
-						+type( prop.types, prop.optional )
-
-				+devNames( prop.longname )
-
-		div.collapsing-list__description
+				div.api-item-heading
+					code.api-item-heading__code
+						a.doc.b-link( class="member-name" href="#" + prop.id ) #{ prop.name }
+
+						if isNonEmptyArray( prop.types )
+							|  :!{' '}
+							+type( prop.types, prop.optional )
+					if isNonEmptyArray( prop.badges )
+						+tagWrapper()
+							each badge in prop.badges
+								- const iconName = badge.text == 'private' ? 'lock' : badge.text == 'observable' ? 'eye' : null;
+								- const linkTo = badge && badge.linkTo ? badge.linkTo : null;
+								- const linkClassName = linkTo ? 'tag--link' : '';
+								+tag({ label: badge.text, icon: iconName, iconSize: 'sm', href: linkTo, className: linkClassName })
+
+		+devNames( prop.longname )
+
+		div.collapsing-list__description( style="height: 0px;" )
 			if ( prop.description && prop.description.excerpt )
 				div.collapsing-list__excerpt
 					p !{ prop.description.excerpt }
 
 			div.collapsing-list__content
-				+seeSource( prop )
-
 				if ( prop.description )
 					| !{ prop.description.content }
+				+seeSource( prop )
 
 				if prop.defaultvalue
 					p Defaults to
@@ -43,7 +49,7 @@ mixin property( prop )
 						code #{ prop.defaultvalue }
 
 				if isNonEmptyArray( prop.params )
-					h4 Parameters
+					h4.b-h4 Parameters
 					+paramsMixin( prop.params )
 
 				if isNonEmptyArray( prop.see )

package/themes/umberto/layout/gloria/_api-docs/_mixin/_related.pug

@@ -1,7 +1,7 @@
 include ./_link-or-text.pug
 
 mixin related( seeArr )
-	h4 Related:
+	h4.b-h4 Related:
 	ul
 		each seeItem in seeArr
 			li

package/themes/umberto/layout/gloria/_api-docs/_mixin/_toc-list-item.pug

@@ -0,0 +1,11 @@
+mixin tocListItem( item )
+	- const { name, label, href } = item;
+	- const id = encodeURI( item.id )
+	- const title = label ? `${ name }: ${ label }` : name;
+	- let attrData = createFilterAttribs( item );
+
+	li.api-toc__list-item.js-api-toc-filter-item( id=id )&attributes( attrData )
+		a.api-toc__list-item__link.b-link(href="#" + id, title=title)
+			code #{ name }
+			if label
+				span.api-toc__list-item-label : #{ label }

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

@@ -9,14 +9,3 @@ div(class="api-subheader hidden-loading")
 		if isNonEmptyArray( data.types )
 			code
 				+type( data.types )
-	nav.api-subheader__navigation
-		if ( isNonEmptyArray( data.configOptions ) || isNonEmptyArray( data.properties ) || isNonEmptyArray( data.methods ) || isNonEmptyArray( data.events ) )
-			ul
-				if ( isNonEmptyArray( data.configOptions ) )
-					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="configs" ) Config options
-				if ( isNonEmptyArray( data.properties ) )
-					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="properties" ) Properties
-				if ( isNonEmptyArray( data.methods ) )
-					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="methods" ) Methods
-				if ( isNonEmptyArray( data.events ) )
-					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="events" ) Events

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

@@ -0,0 +1,33 @@
+include ../_mixin/_toc-list-item
+
+if isNonEmptyArray( data.properties )
+	button.b-reset-button.api-toc__list-button.js-api-toc-button( type="button", id="properties", 'aria-expanded'='false', 'aria-label'='Expand/Collapse properties' )
+		+svg-icon({ icon: 'chevron-right', className: 'api-toc__list-button-icon' })
+		span( class="api-toc__heading" ) Properties
+
+	if ( isNonEmptyArray( data.staticProperties ) || isNonEmptyArray( data.instanceProperties ) )
+		ul( class="api-toc__list js-api-toc-list" data-type="properties" style="height: 0" )
+			if isNonEmptyArray( data.instanceProperties )
+				each p in data.instanceProperties
+					+tocListItem( p )
+			if isNonEmptyArray( data.staticProperties )
+				each p in data.staticProperties
+					+tocListItem( p )
+
+
+if isNonEmptyArray( data.methods )
+	button.b-reset-button.api-toc__list-button.js-api-toc-button( type="button", id="methods", 'aria-expanded'='false', 'aria-label'='Expand/Collapse methods' )
+		+svg-icon({ icon: 'chevron-right', className: 'api-toc__list-button-icon' })
+		span( class="api-toc__heading" ) Methods
+	ul( class="api-toc__list js-api-toc-list" data-type="methods" style="height: 0" )
+		each e in data.methods
+			+tocListItem( e )
+
+if isNonEmptyArray( data.events )
+	button.b-reset-button.api-toc__list-button.js-api-toc-button( type="button", id="events", 'aria-expanded'='false', 'aria-label'='Expand/Collapse events' )
+		+svg-icon({ icon: 'chevron-right', className: 'api-toc__list-button-icon' })
+		span( class="api-toc__heading" ) Events
+	ul( class="api-toc__list js-api-toc-list" data-type="events" style="height: 0" )
+		each e in data.events
+			+tocListItem( e )
+

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

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

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

@@ -1,7 +1,8 @@
 include ../_mixin/_property
 
 if isNonEmptyArray( data.configOptions )
-	h2( id="config-options" class="hidden-loading" ) Config options
-	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="configs" )
-		each c in data.configOptions
-			+property( c )
+	h2.b-h2( id="config-options" class="hidden-loading" ) Config options
+	div.collapsing-list-wrapper.js-api-filter-list
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="configs" )
+			each c in data.configOptions
+				+property( c )

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

@@ -1,7 +1,7 @@
 include ../_mixin/_property
 
 if isNonEmptyArray( data.constants )
-	h2( id="constants" class="hidden-loading" ) Constants
+	h2.b-h2( id="constants" class="hidden-loading" ) Constants
 	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
 		each m in data.constants
 			+property( m )

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

@@ -3,7 +3,7 @@ include ../_mixin/_api-see-source.pug
 if ( data.description )
 	div( class="main-description__outer hidden-loading" )
 
-			+seeSource( data )
-
 			div( class="main-description")
 				| !{ data.description.content }
+
+			+seeSource( data )