umberto 8.0.0 → 8.0.1

package/themes/umberto/layout/gloria/_modules/mobile-nav/index.pug

@@ -20,22 +20,22 @@ mixin mobile-nav()
 
 	.c-mobile-nav(data-initial-slide-id=initialSlideId)
 		+mobile-nav-slide({ slideId: 'products' })
-			if projectsData
-					ol.b-reset-list.c-mobile-nav__items
-						each project in projectsData
-							- isCurrentProject = projectLocals && project.slug === projectLocals.projectSlug
-
-							if isCurrentProject
-								+mobile-nav-item({
-									label: project.name,
-									active: true,
-									targetSlideId: `project-${ project.slug }`
-								})
-							else
-								+mobile-nav-item({
-									href: relative_url(page.path, `${project.latestBasePath}/index.html`),
-									label: project.name
-								})
+			if quickNavigationProjects
+				ol.b-reset-list.c-mobile-nav__items
+					each project in quickNavigationProjects
+						- isCurrentProject = projectLocals && project.slug === projectLocals.projectSlug
+
+						if isCurrentProject
+							+mobile-nav-item({
+								label: project.name,
+								active: true,
+								targetSlideId: `project-${ project.slug }`
+							})
+						else
+							+mobile-nav-item({
+								href: relative_url(page.path, `${project.slug}/latest/index.html`),
+								label: project.name
+							})
 
 		//- Current project slide
 		if projectLocals
@@ -100,7 +100,7 @@ mixin mobile-nav()
 						})
 
 						ul.b-reset-list.c-nav-tree.c-nav-tree--mobile.js-nav-tree
-							+navTreeLevel( group, true, 0 )
+							+navTreeLevel({ data: group } )
 
 			+mobile-nav-slide({ slideId: 'api-categories' })
 				+mobile-nav-back-button( {

package/themes/umberto/layout/gloria/_modules/toc/_style.scss

@@ -115,7 +115,7 @@
 	&__show-button {
 		@include mobile {
 			position: absolute;
-			top: var(--header-height, --header-navigation-height);
+			top: var(--header-navigation-height);
 			z-index: var(--z-index-toc-show-button);
 			width: 40px;
 		}

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

@@ -26,7 +26,6 @@ html(lang='en')
 							- const split = uSplitToTitleAndContent( page.content );
 
 							h1.b-h1.c-main__content-title.c-main__content-title--align-center.js-api-h1( data-ln = page.shortName === 'index' ? page[ 'default-expanded' ] || page.shortName : page.shortName )
-								+svg-icon({ icon: 'api-class', size: '2xl' })
 								!= split.title || page.title
 
 							!= split.content

package/themes/umberto/source/gloria/assets/_img/icons/sparkles.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34"><path d="M8.191 5.316a.34.34 0 0 1 .121-.156c.055-.039.121-.059.188-.059s.133.02.188.059a.33.33 0 0 1 .117.156l1.188 3.199a.3.3 0 0 0 .074.121c.035.031.074.059.117.074l3.203 1.184a.26.26 0 0 1 .121.082c.031.039.063.078.078.125s.02.102.012.148a.32.32 0 0 1-.059.141.3.3 0 0 1-.152.117l-3.203 1.184a.36.36 0 0 0-.121.078c-.031.031-.059.074-.074.117l-1.18 3.199a.34.34 0 0 1-.121.156c-.055.039-.121.059-.187.059s-.133-.02-.187-.059-.094-.094-.117-.156L7.01 11.882c-.016-.043-.039-.086-.074-.117a.46.46 0 0 0-.117-.078l-3.203-1.184c-.062-.02-.117-.062-.152-.117a.36.36 0 0 1-.062-.187.32.32 0 0 1 .063-.187c.04-.054.09-.098.152-.121L6.82 8.707a.3.3 0 0 0 .117-.074c.035-.035.063-.074.078-.117l1.184-3.203zm1.7 15.297c.023-.062.066-.117.121-.152a.36.36 0 0 1 .188-.062c.067 0 .133.023.188.063a.3.3 0 0 1 .117.152l1.188 3.203a.35.35 0 0 0 .074.121.35.35 0 0 0 .121.074l3.199 1.184a.29.29 0 0 1 .125.082c.031.035.059.078.074.125s.02.098.012.148-.027.098-.055.137a.34.34 0 0 1-.156.121l-3.203 1.184c-.043.016-.086.043-.117.078s-.062.074-.078.117l-1.18 3.199c-.023.063-.066.117-.121.152s-.117.063-.187.063-.129-.023-.184-.062-.098-.09-.121-.152l-1.184-3.203a.31.31 0 0 0-.078-.117.27.27 0 0 0-.117-.078l-3.199-1.184a.33.33 0 0 1-.156-.117c-.039-.055-.059-.121-.059-.187s.02-.133.059-.187a.34.34 0 0 1 .156-.121l3.199-1.184a.35.35 0 0 0 .121-.074c.031-.035.059-.074.074-.117l1.184-3.203zM21.484 7.23c.047-.125.129-.234.238-.312s.242-.117.375-.117.266.039.375.117.191.188.238.313l2.371 6.402a.64.64 0 0 0 .152.238.71.71 0 0 0 .234.152l6.402 2.367a.61.61 0 0 1 .246.16.68.68 0 0 1 .152.254.64.64 0 0 1 .023.297.65.65 0 0 1-.113.277c-.074.109-.184.191-.309.238l-6.406 2.367a.67.67 0 0 0-.234.152c-.066.066-.121.148-.152.238l-2.363 6.395a.68.68 0 0 1-.238.313.63.63 0 0 1-.375.117c-.137 0-.266-.039-.375-.117s-.191-.187-.238-.312l-2.371-6.402a.63.63 0 0 0-.148-.238.68.68 0 0 0-.234-.152l-6.402-2.367c-.129-.043-.238-.129-.312-.238a.64.64 0 0 1 0-.746.62.62 0 0 1 .313-.242l6.402-2.367a.67.67 0 0 0 .234-.152.58.58 0 0 0 .152-.234l2.367-6.402zm0 0" fill="currentColor" /></svg>

package/themes/umberto/src/gloria/css/_fonts.scss

@@ -49,3 +49,42 @@
 	font-style: normal;
 	font-display: swap;
 }
+
+/* LATO */
+@font-face {
+	font-family: 'Lato';
+	src:
+		url('../fonts/Lato/Lato-Regular.woff2') format('woff2'),
+		url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src:
+		url('../fonts/Lato/Lato-Italic.woff2') format('woff2'),
+		url('../fonts/Lato/Lato-Italic.ttf') format('truetype');
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src:
+		url('../fonts/Lato/Lato-Bold.woff2') format('woff2'),
+		url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
+	font-style: normal;
+	font-weight: bold;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Lato';
+	src:
+		url('../fonts/Lato/Lato-BoldItalic.woff2') format('woff2'),
+		url('../fonts/Lato/Lato-BoldItalic.ttf') format('truetype');
+	font-style: italic;
+	font-weight: bold;
+	font-display: swap;
+}

package/themes/umberto/src/gloria/css/base/_inline-code.scss

@@ -1,9 +1,10 @@
 @layer base {
 	.b-inline-code {
-		margin: 0 var(--spacing-1);
-		padding: .1em .35em;
+		display: inline;
+		padding: var(--spacing-1) var(--spacing-1-5);
 		word-wrap: break-word;
-		font-size: 0.85em;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-xs);
 		font-family: var(--font-family-monospace);
 		border-radius: var(--radius-1);
 		background: var(--color-gray-300);

package/themes/umberto/src/gloria/css/base/_links.scss

@@ -4,7 +4,8 @@
 	.b-prose a,
 	.b-link {
 		color: var(--color-primary-500);
-		text-decoration: var(--text-decoration-underline) var(--color-primary-300);
+		text-decoration: var(--text-decoration-underline);
+		text-decoration-color: var(--color-primary-300);
 		word-break: break-word;
 
 		@include a11y-keyboard-focus-ring( true, false,

package/themes/umberto/src/gloria/css/base/_tables.scss

@@ -22,10 +22,6 @@
 			font-size: var(--font-size-sm);
 			line-height: var(--line-height-base);
 
-			&:last-child {
-				border-right: none;
-			}
-
 			.b-inline-code {
 				white-space: nowrap;
 			}

package/themes/umberto/src/gloria/css/components/_api-collapsing-list.scss

@@ -135,6 +135,10 @@
 	dd {
 		@extend .b-description__details;
 	}
+
+	:not(.c-code-block__pre) > code:not([class]) {
+		@extend .b-inline-code;
+	}
 }
 
 .collapsing-list__content {

package/themes/umberto/src/gloria/css/components/_index.scss

@@ -36,7 +36,8 @@
 		'skeleton',
 		'fake-devtools',
 		'iframe',
-		'tag'
+		'tag',
+		'snippet-footer'
 	);
 
 	@each $component in $components {

package/themes/umberto/src/gloria/css/doc/_snippets.scss

@@ -4,6 +4,7 @@
 	:root {
 		--snippet-max-width: 1520px;
 		--snippet-outside-margin: 48px;
+		--ck-content-font-family: 'Lato';
 	}
 
 	.doc.live-snippet {

package/themes/umberto/src/gloria/css/layout/_base.scss

@@ -5,11 +5,6 @@
 		height: 100%;
 		overscroll-behavior: none;
 		overflow-x: hidden;
-
-		&::selection {
-			background-color: var(--color-primary-100);
-			color: var(--color-primary-500);
-		}
 	}
 
 	body {
@@ -19,9 +14,4 @@
 		text-wrap: pretty;
 		overscroll-behavior: none;
 	}
-
-	.ck-content::selection {
-		background-color: var(--ck-color-base-focus, #6cb5f9);
-		color: var(--ck-color-base-text, #333333);
-	}
 }

package/themes/umberto/src/gloria/css/utilities/_spacing.scss

@@ -8,6 +8,7 @@
 		--spacing-1-5:	calc(var(--spacing-base) * 1.5);	/* 0.375rem | 6px */
 		--spacing-2:	calc(var(--spacing-base) * 2);		/* 0.5rem | 8px */
 		--spacing-3:	calc(var(--spacing-base) * 3);		/* 0.75rem | 12px */
+		--spacing-3-5:	calc(var(--spacing-base) * 3.5);	/* 0.875rem | 14px */
 		--spacing-4:	calc(var(--spacing-base) * 4);		/* 1rem | 16px */
 		--spacing-5:	calc(var(--spacing-base) * 5);		/* 1.25rem | 20px */
 		--spacing-6:	calc(var(--spacing-base) * 6);		/* 1.5rem | 24px */

package/themes/umberto/src/gloria/js/components/code-block.js

@@ -39,22 +39,25 @@ export class CodeBlock extends BaseComponent {
 
 		this.elements = {
 			root: element,
-			copyButton: element.querySelector( '.c-code-block__copy-button' )
+			copyButton: element.querySelector( '.c-code-block__copy-button' ),
+			originalCodeElement: element.querySelector( 'code' )
 		};
 
+		const { copyButton, originalCodeElement } = this.elements;
+
 		this.config = {
-			lang: findCodeLang( element.querySelector( 'code' ) ) || 'plain',
+			lang: findCodeLang( originalCodeElement ) || 'plain',
 			highlightOnMount: element.getAttribute( 'data-highlight-on-mount' ) === 'true',
 			copyable: element.dataset.copyable !== 'false'
 		};
 
-		this.originalText = element.querySelector( 'code' ).innerText;
+		this.originalText = originalCodeElement.innerText || originalCodeElement.textContent || '';
 
 		// Track the current highlighting operation
 		this.highlightPromise = Promise.resolve();
 
 		// Keep tooltip id
-		const tooltipId = this.elements.copyButton?.getAttribute( 'aria-labelledby' );
+		const tooltipId = copyButton?.getAttribute( 'aria-labelledby' );
 
 		if ( tooltipId ) {
 			const tooltip = document.getElementById( tooltipId );

package/themes/umberto/src/gloria/js/modules/api-filter.js

@@ -91,14 +91,19 @@ export class ApiFilter extends BaseComponent {
 	 */
 	filterItems() {
 		const { filterItems, filterTocItems, activeFilters } = this.state;
+		const { filterInputs } = this.elements;
+
+		// Get all possible tags from checkboxes (all available filters)
+		const allFilterTags = Array.from( filterInputs ).map( input => input.value );
 
 		[ ...filterItems, ...filterTocItems ].forEach( item => {
-			const hasActiveFilter = item.tags.some( tag => activeFilters.includes( tag ) );
+			// Check if the element has any tag that is on the filter list but is not active
+			const hasInactiveTag = item.tags.some( tag => allFilterTags.includes( tag ) && !activeFilters.includes( tag ) );
 
-			if ( hasActiveFilter ) {
-				item.element.classList.remove( 'is-hidden' );
-			} else {
+			if ( hasInactiveTag ) {
 				item.element.classList.add( 'is-hidden' );
+			} else {
+				item.element.classList.remove( 'is-hidden' );
 			}
 		} );
 	}