umberto 7.0.1 → 8.0.0

package/src/tasks/compile-sass.js

@@ -15,6 +15,18 @@ module.exports = ( src, dst ) => {
 			file: src,
 			outputStyle: 'compressed',
 			importer( url, file, done ) {
+				// In case of import from the `themes/umberto/src` directory.
+				const themeMatch = url && url.match( /@([^/]+)\/(.+)/ );
+
+				if ( themeMatch ) {
+					const [ , theme, remainingPath ] = themeMatch;
+					const filePath = upath.join( __dirname, '../../themes/umberto/src', theme, 'css', remainingPath );
+
+					if ( fs.existsSync( filePath ) ) {
+						return done( { file: filePath } );
+					}
+				}
+
 				// In case of an import from the `node_modules` directory.
 				if ( url.startsWith( '~' ) ) {
 					// Resolve the path regarding the current working directory.

package/src/tasks/copy-assets.js

@@ -17,6 +17,10 @@ const copyFiles = require( './copy-files' );
  */
 module.exports = ( themeDir, outputPath ) => {
 	return Promise.all( [
+		copyFiles(
+			upath.join( themeDir, 'assets', '_fonts' ),
+			upath.join( outputPath, 'fonts' )
+		),
 		copyFiles(
 			upath.join( themeDir, 'assets', '_img' ),
 			upath.join( outputPath, 'img' )

package/src/tasks/copy-project-icons.js

@@ -24,7 +24,7 @@ module.exports = async function copyProjectIcons( projectGlobals, buildDirectory
 
 			try {
 				await fs.copy( fullSourcePath, fullDestinationPath );
-			} catch ( error ) {
+			} catch {
 				console.warn(
 					`⚠️ The "${ sourceFile }" icon cannot be copied because it does not exist in "${ fullSourcePath }".`
 				);

package/src/tasks/create-sitemap-index.js

@@ -28,11 +28,18 @@ module.exports = ( { buildPath, hostname, sitemapPaths } ) => {
 	const sitemapIndexContent = [
 		'<?xml version="1.0" encoding="UTF-8"?>',
 		`<sitemapindex ${ XMLNS_STRINGS.join( ' ' ) }>`,
-		...sitemapPaths.map( sitemapPath => ( [
-			'<sitemap>',
-			`<loc>${ upath.join( hostname, sitemapPath.split( buildPath ).pop() ) }</loc>`,
-			'</sitemap>'
-		] ) ),
+
+		...sitemapPaths.map( sitemapPath => {
+			const relativePath = sitemapPath.split( buildPath ).pop().replace( /^\/+/, '' );
+			const fullUrl = new URL( relativePath, hostname.endsWith( '/' ) ? hostname : hostname + '/' );
+
+			return [
+				'<sitemap>',
+				`<loc>${ fullUrl.toString() }</loc>`,
+				'</sitemap>'
+			];
+		} ),
+
 		'</sitemapindex>'
 	].flat().join( '' );
 

package/src/tasks/get-extra-files.js

@@ -25,7 +25,7 @@ module.exports = ( rootPath, dst, files ) => {
 				fs.accessSync( resolvedPath );
 
 				return true;
-			} catch ( err ) {
+			} catch {
 				console.error( `Extra file not found in ${ resolvedPath }` );
 
 				return false;

package/src/tasks/get-project-config.js

@@ -328,7 +328,7 @@ function getRepositoryUrl( rootPath ) {
 function getPackageJson( rootPath ) {
 	try {
 		return require( upath.join( rootPath, 'package.json' ) );
-	} catch ( err ) {
+	} catch {
 		return null;
 	}
 }

package/src/tasks/overwrite-api-guides.js

@@ -33,7 +33,7 @@ module.exports = ( src, dst ) => {
 		if ( currentStats.size !== cachedStats.size ) {
 			try {
 				fs.copySync( p, destinationPath );
-			} catch ( err ) {
+			} catch {
 				console.error( `Error when copying file ${ p } to ${ destinationPath }` );
 			}
 		}

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,38 @@
-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 )
+					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 )
+						| #{ 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 }