umberto 9.1.1 → 9.1.3

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 Changelog
 =========
 
+## [9.1.3](https://github.com/cksource/umberto/compare/v9.1.2...v9.1.3) (December 19, 2025)
+
+### Bug fixes
+
+* Fixed the conflict where typing the forward slash in the Kapa widget would trigger the Algolia search.
+
+### Other changes
+
+* Added CKBox (`CKBOX_VERSION`) and CKEditor 5 (`CKEDITOR_VERSION`) versions to events sent to Sentry integration.
+
+
+## [9.1.2](https://github.com/cksource/umberto/compare/v9.1.1...v9.1.2) (December 8, 2025)
+
+### Bug fixes
+
+* Fix a race condition in the Tooltip/Popover component between `createTooltipPopover` and `TooltipPopover.attach` that could cause duplicate initialization. Tooltips now initialize only once per element and more reliably detect when trigger elements have been detached.
+* Minification should preserve closing tags and output spec-compliant HTML.
+* Fix encoding of SDK sources.
+
+
 ## [9.1.1](https://github.com/cksource/umberto/compare/v9.1.0...v9.1.1) (November 25, 2025)
 
 ### Other changes
@@ -28,28 +48,6 @@ Changelog
 
 * Updated the required version of Node.js to **v24.11**.
 
-
-## [8.4.0](https://github.com/cksource/umberto/compare/v8.3.5...v8.4.0) (October 30, 2025)
-
-### Features
-
-* Minify output HTML to reduce file size and improve load performance.
-
-  The output is automatically minified during production builds to remove unnecessary whitespace and comments.
-
-  Minification is **disabled when using the `--dev` modifier**, ensuring the generated HTML remains readable for easier debugging and inspection.
-
-### Other changes
-
-* Umberto reads a project configuration once and passes it through the pipeline. Thanks to that, hooks can modify it, which affects a project's build.
-
-
-## [8.3.5](https://github.com/cksource/umberto/compare/v8.3.4...v8.3.5) (October 29, 2025)
-
-### Other changes
-
-* Hook scripts now receive the full project configuration object when executed.
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "9.1.1",
+  "version": "9.1.3",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [

package/scripts/filter/after-post-render/time-end.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { format, styleText } = require( 'util' );
+const { format, styleText } = require( 'node:util' );
 
 hexo.extend.filter.register( 'after_post_render', page => {
 	if ( !hexo.projectGlobals.common || !hexo.projectGlobals.common.verbose ) {

package/scripts/filter/before-post-render/gloria/prerender-xml-pug-components.js

@@ -42,7 +42,7 @@
 
 'use strict';
 
-const path = require( 'path' );
+const path = require( 'node:path' );
 const removeIndentation = require( '../../../utils/remove-indentation' );
 const createPrerenderPugTemplate = require( '../../../utils/pug-renderer/create-prerender-pug-template' );
 const {

package/scripts/utils/execute-and-insert-function-results.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 
 const EXEC_REGEXP = /\\?{@exec ([^}]+)\\?}/g;
 const PATH_REGEXP = /[\w.\\/-]+\.c?js$/;

package/scripts/utils/has-own-favicons.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 
 /**
  * Checks if the project has its own favicons. If so, they will be used when rendering meta tags (`<link rel="icon">`).

package/scripts/utils/inline-svg.js

@@ -5,8 +5,8 @@
 
 'use strict';
 
-const fs = require( 'fs' );
-const path = require( 'path' );
+const fs = require( 'node:fs' );
+const path = require( 'node:path' );
 const { parseDocument } = require( 'htmlparser2' );
 const { Element, Text } = require( 'domhandler' );
 const { selectAll, selectOne } = require( 'css-select' );

package/scripts/utils/logcrossprojectreference.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 
 /**
  * Logs an error message about a cross-project reference found in the parsed expression.

package/scripts/utils/parseicontag.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const crypto = require( 'crypto' );
+const crypto = require( 'node:crypto' );
 const upath = require( 'upath' );
 const logCrossProjectReference = require( './logcrossprojectreference' );
 

package/scripts/utils/parselinks.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const upath = require( 'upath' );
 const splitLongname = require( '../../src/helpers/split-longname' );
 

package/scripts/utils/pug-renderer/render-pug-component.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const path = require( 'path' );
+const path = require( 'node:path' );
 const hexoManager = require( '../../../src/hexo-manager' );
 
 /**

package/scripts/utils/random-id.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const crypto = require( 'crypto' );
+const crypto = require( 'node:crypto' );
 
 /**
  * Generates a random ID with a single segment. If a prefix is provided, it will be prepended to the ID.

package/scripts/utils/spritesheet-svg.js

@@ -5,8 +5,8 @@
 
 'use strict';
 
-const fs = require( 'fs' );
-const path = require( 'path' );
+const fs = require( 'node:fs' );
+const path = require( 'node:path' );
 const { parseDocument } = require( 'htmlparser2' );
 const { Element, cloneNode } = require( 'domhandler' );
 const { selectAll, selectOne } = require( 'css-select' );

package/scripts/utils/toc.js

@@ -43,14 +43,25 @@ module.exports = function toc( data, options = {} ) {
 	for ( const heading of headings ) {
 		const hLevel = Number( heading.name[ 1 ] ); // 'h2' -> 2
 		const text = getHeadingText( heading ).trim();
+		const icons = getHeadingIcons( heading );
 		const li = new Element( 'li', {} );
-		const a = new Element( 'a', {
-			class: 'a11y-focusable',
+		const aAttrs = {
+			class: icons.length > 0 ? 'a11y-focusable c-toc__link--with-icon' : 'a11y-focusable',
 			href: '#' + getAttributeValue( heading, 'id' ),
 			title: text
-		} );
+		};
 
-		appendChild( a, new Text( text ) );
+		const a = new Element( 'a', aAttrs );
+
+		// Append text first, then icons (only if icons exist)
+		if ( text ) {
+			appendChild( a, new Text( text ) );
+		}
+		if ( icons.length > 0 ) {
+			for ( const icon of icons ) {
+				appendChild( a, cloneNode( icon, true ) );
+			}
+		}
 		appendChild( li, a );
 
 		if ( tocLastLevels[ hLevel ] ) {
@@ -107,7 +118,7 @@ function hasAncestorWithClassIn( node, classNames ) {
 }
 
 /**
- * Returns the heading text without content from descendants with class "headerlink".
+ * Returns the heading text without content from descendants with class "headerlink", "editor-icon", or badge components.
  */
 function getHeadingText( root ) {
 	if ( !root ) {
@@ -117,9 +128,38 @@ function getHeadingText( root ) {
 	// Clone so we don't mutate the original AST.
 	const clone = cloneNode( root, true );
 
-	for ( const node of selectAll( '.headerlink', clone ) ) {
+	// Remove headerlinks, editor-icons, and badge components (which contain icons)
+	for ( const node of selectAll( '.headerlink, .editor-icon, .c-badge', clone ) ) {
 		removeElement( node );
 	}
 
 	return textContent( clone );
 }
+
+/**
+ * Returns icon elements from the heading.
+ * Looks for:
+ * - Elements with class "editor-icon" (legacy format)
+ * - Badge components with icons (c-badge with c-icon inside)
+ * - Direct icon elements (c-icon) within the heading
+ */
+function getHeadingIcons( root ) {
+	if ( !root ) {
+		return [];
+	}
+
+	const icons = [];
+
+	const editorIcons = selectAll( '.editor-icon', root );
+	icons.push( ...editorIcons );
+
+	const badgesWithIcons = selectAll( '.c-badge .c-icon', root );
+	icons.push( ...badgesWithIcons );
+
+	const directIcons = selectAll( '.c-icon', root ).filter( icon => {
+		return !hasAncestorWithClassIn( icon, [ 'c-badge' ] );
+	} );
+	icons.push( ...directIcons );
+
+	return icons;
+}

package/src/api-builder/build-page-worker.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const upath = require( 'upath' );
 const { parseDocument } = require( 'htmlparser2' );
 const { default: render } = require( 'dom-serializer' );

package/src/api-builder/classes/description-parser.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const { parseDocument } = require( 'htmlparser2' );
 const { default: render } = require( 'dom-serializer' );
 const { selectAll, selectOne } = require( 'css-select' );

package/src/helpers/get-docsearch-config.js

@@ -7,7 +7,7 @@
 
 const { cloneDeep } = require( 'lodash' );
 const { stringify } = require( 'javascript-stringify' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const upath = require( 'upath' );
 
 const defaultScriptTemplate = fs.readFileSync( upath.join( __dirname, 'templates', 'scripts', 'default.js' ), 'utf-8' );

package/src/helpers/github-url.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { spawnSync } = require( 'child_process' );
+const { spawnSync } = require( 'node:child_process' );
 const upath = require( 'upath' );
 
 const cachedGitPaths = new Set();

package/src/helpers/import-module.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const { pathToFileURL } = require( 'url' );
+const { pathToFileURL } = require( 'node:url' );
 
 /**
  * Loads the specified module using `import()` call.

package/src/helpers/log-with-time.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { styleText } = require( 'node:util' );
+
+module.exports = function logWithTime( message ) {
+	const lowercase = message.charAt( 0 ).toLowerCase() + message.slice( 1 );
+	const getTime = measureSeconds();
+
+	console.log( `Started ${ lowercase }.` );
+
+	return () => console.log( `Finished ${ lowercase } in ${ styleText( 'bold', getTime() ) }.` );
+};
+
+function measureSeconds() {
+	const start = process.hrtime();
+
+	return () => {
+		const [ totalSeconds ] = process.hrtime( start );
+		const minutes = Math.floor( totalSeconds / 60 );
+		const seconds = totalSeconds % 60;
+
+		return minutes ?
+			minutes + 'm ' + String( seconds ).padStart( 2, '0' ) + 's' :
+			seconds + 's';
+	};
+}

package/src/hexo-manager.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const upath = require( 'upath' );
 const fs = require( 'fs-extra' );
 const { globSync } = require( 'glob' );

package/src/index.js

@@ -5,8 +5,8 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
-const path = require( 'path' );
+const { styleText } = require( 'node:util' );
+const path = require( 'node:path' );
 const compileSass = require( './tasks/compile-sass' );
 const runWebpack = require( './tasks/run-webpack' );
 const copyAssets = require( './tasks/copy-assets' );
@@ -17,6 +17,7 @@ const getProjectConfig = require( './tasks/get-project-config' );
 const watcher = require( './tasks/watcher' );
 const validateHtml = require( './tasks/validate-html-w3c' );
 const { version } = require( '../package.json' );
+const logWithTime = require( './helpers/log-with-time' );
 
 module.exports = {
 	/**
@@ -68,9 +69,8 @@ module.exports = {
  * @returns {Promise}
  */
 async function buildAndWatch( options ) {
-	const timer = process.hrtime();
+	const logTime = logWithTime( 'Building documentation' );
 	const outputDir = path.join( process.cwd(), 'build', 'docs' );
-
 	const hexoManager = await buildDocumentation( options );
 
 	if ( !options.skipThemes ) {
@@ -91,9 +91,7 @@ async function buildAndWatch( options ) {
 		} );
 	}
 
-	const [ time ] = process.hrtime( timer );
-
-	console.log( styleText( 'greenBright', `Building documentation complete in ${ Math.floor( time / 60 ) }m ${ time % 60 }s.` ) );
+	logTime();
 
 	if ( options.watch ) {
 		return watcher( hexoManager );

package/src/sdk-builder/get-sdk-sources.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const upath = require( 'upath' );
 const { globSync } = require( 'glob' );
 const { parseDocument } = require( 'htmlparser2' );
@@ -18,6 +18,7 @@ const {
 	textContent,
 	getName
 } = require( 'domutils' );
+const decodeHtmlEntities = require( '../../scripts/utils/decode-html-entities' );
 
 const SDK_SELECTOR = 'meta[name="sdk-samples"]';
 
@@ -27,7 +28,7 @@ module.exports = sourcePath => {
 
 	for ( const filePath of filePaths ) {
 		const content = fs.readFileSync( filePath, { encoding: 'utf8' } );
-		const doc = parseDocument( content );
+		const doc = parseDocument( content, { decodeEntities: false } );
 		const sdkMeta = selectOne( SDK_SELECTOR, doc );
 		const samplesNames = sdkMeta && getAttributeValue( sdkMeta, 'content' ) ?
 			getAttributeValue( sdkMeta, 'content' ).split( '|' ) :
@@ -77,9 +78,16 @@ module.exports = sourcePath => {
 					}
 
 					if ( hasAttrib( element, 'data-sample-strip-outer-tag' ) ) {
-						ret.source = render( element.children || [] ).replace( /^\n|\n$/g, '' );
+						ret.source = render( element.children || [], { encodeEntities: false } ).replace( /^\n|\n$/g, '' );
 					} else {
-						ret.source = render( element ).replace( /\s?data-sample(-[\w-]+)?="[^"]*?"/g, '' );
+						// Delete all data-sample* attributes.
+						for ( const attrib of Object.keys( element.attribs ) ) {
+							if ( attrib.startsWith( 'data-sample' ) ) {
+								delete element.attribs[ attrib ];
+							}
+						}
+
+						ret.source = render( element, { encodeEntities: false } );
 					}
 
 					outputArray.push( ret );
@@ -101,15 +109,15 @@ module.exports = sourcePath => {
 		}
 
 		const sdkContents = selectOne( '.sdk-contents', doc );
-		const contentHtml = render( sdkContents.children || [] );
+		const contentHtml = render( sdkContents.children || [], { encodeEntities: false } );
 		const presetVersion = getAttributeValue( sdkContents, 'data-cke-preset' );
 
 		files.push( {
 			name: upath.basename( filePath, '.html' ),
-			description: getAttributeValue( selectOne( 'meta[name="description"]', doc ), 'content' ),
-			title: textContent( selectOne( 'title', doc ) ),
+			description: decodeHtmlEntities( getAttributeValue( selectOne( 'meta[name="description"]', doc ), 'content' ) ),
+			title: decodeHtmlEntities( textContent( selectOne( 'title', doc ) ) ),
 			content: contentHtml,
-			source: render( doc ),
+			source: render( doc, { encodeEntities: false } ),
 			path: upath.relative( sourcePath, filePath ),
 			presetVersion,
 			sdkSamples: samples,

package/src/sdk-builder/sdk-builder.js

@@ -7,7 +7,7 @@
 
 const HtmlFile = require( '../api-builder/classes/html-file' );
 const upath = require( 'upath' );
-const { URL, resolve: urlResolve } = require( 'url' );
+const { URL, resolve: urlResolve } = require( 'node:url' );
 const beautifyHtml = require( 'js-beautify' ).html;
 const macroReplacer = require( '../tasks/macro-replacer' );
 const getDocSearchConfig = require( '../helpers/get-docsearch-config' );

package/src/tasks/build-api-docs.js

@@ -10,6 +10,7 @@ const readDocSources = require( './read-doc-sources' );
 const DataProvider = require( '../data-converter/data-provider' );
 const ApiBuilder = require( '../api-builder/api-builder' );
 const TemplateCollection = require( '../template/template-collection' );
+const logWithTime = require( '../helpers/log-with-time' );
 
 /**
  * Builds API docs.
@@ -64,10 +65,10 @@ module.exports = async config => {
 		}
 	);
 
-	console.log( `Building API docs of ${ projectConfig.name } ...` );
-	console.time( `Built API docs of ${ projectConfig.name } in` );
+	const logTime = logWithTime( `Building API docs for ${ projectConfig.name }` );
 	const buildInfo = await apiBuilder.buildApi();
-	console.timeEnd( `Built API docs of ${ projectConfig.name } in` );
+
+	logTime();
 
 	if ( process.argv.includes( '--strict' ) && buildInfo.warningCount > 0 ) {
 		console.log( `There were ${ buildInfo.warningCount } warnings reported in strict mode. Aborting.` );

package/src/tasks/build-documentation.js

@@ -31,6 +31,7 @@ const umbertoVersion = require( '../../package.json' ).version;
 
 const { parseLinks } = require( '../../scripts/utils/parselinks' );
 const getFilePatternsToProcess = require( '../helpers/get-file-patterns-to-process' );
+const logWithTime = require( '../helpers/log-with-time' );
 
 /**
  * Main function building the documentation.
@@ -166,10 +167,18 @@ module.exports = options => {
 				skipGuides
 			} );
 		} )
-		.then( () => hexoManager.generate( {
-			watch,
-			concurrency: 80
-		} ) )
+		.then( async () => {
+			const logTime = logWithTime( 'Generating pages with Hexo' );
+
+			const result = await hexoManager.generate( {
+				watch,
+				concurrency: 80
+			} );
+
+			logTime();
+
+			return result;
+		} )
 		.then( () => buildSnippets( hexoManager.hexo.projectGlobals ) )
 		.then( () => copyProjectIcons( hexoManager.hexo.projectGlobals, hexoManager.getPublicDir() ) )
 		// A workaround for API guides when API generation is skipped.

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

@@ -4,7 +4,7 @@
  */
 
 const upath = require( 'upath' );
-const fs = require( 'fs/promises' );
+const fs = require( 'node:fs/promises' );
 
 const XMLNS_STRINGS = [
 	'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"',

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

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const createSitemap = require( './create-sitemap' );
 const createSitemapIndex = require( './create-sitemap-index' );
 

package/src/tasks/create-sitemap.js

@@ -5,10 +5,10 @@
 
 'use strict';
 
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const { globSync } = require( 'glob' );
 const upath = require( 'upath' );
-const { URL } = require( 'url' );
+const { URL } = require( 'node:url' );
 const { SitemapStream, streamToPromise } = require( 'sitemap' );
 
 /**

package/src/tasks/create-sym-links.js

@@ -5,8 +5,8 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
-const fs = require( 'fs' );
+const { styleText } = require( 'node:util' );
+const fs = require( 'node:fs' );
 const upath = require( 'upath' );
 const getProjectConfig = require( './get-project-config' );
 

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

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 
 /**
  * Reads Umberto's hexo config file.

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

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 
 module.exports = rootPath => {
 	const configPath = upath.join( rootPath, 'umberto-main.json' );

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

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const { globSync } = require( 'glob' );
 const importModule = require( '../helpers/import-module' );
 

package/src/tasks/minify-html-worker.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { readFileSync, writeFileSync } = require( 'fs' );
+const { readFileSync, writeFileSync } = require( 'node:fs' );
 const minifier = require( '@minify-html/node' );
 
 /**
@@ -18,7 +18,13 @@ module.exports = function( file ) {
 	const html = readFileSync( file );
 
 	const minified = minifier.minify( html, {
+		allow_noncompliant_unquoted_attribute_values: false,
+		allow_optimal_entities: false,
+		allow_removing_spaces_between_attributes: false,
+		keep_closing_tags: true,
 		keep_comments: true,
+		keep_html_and_head_opening_tags: true,
+		keep_input_type_text_attr: true,
 		minify_css: true,
 		minify_js: true
 	} );

package/src/tasks/minify-html.js

@@ -5,10 +5,11 @@
 
 'use strict';
 
-const { join } = require( 'path' );
-const { globSync } = require( 'fs' );
-const { styleText } = require( 'util' );
+const { join } = require( 'node:path' );
+const { globSync } = require( 'node:fs' );
+const { styleText } = require( 'node:util' );
 const { default: TinyPool } = require( 'tinypool' );
+const logWithTime = require( '../helpers/log-with-time' );
 
 /**
  * Minifies all HTML files under outputDir in parallel using tinypool.
@@ -16,6 +17,7 @@ const { default: TinyPool } = require( 'tinypool' );
  * @param {string} outputDir - base directory to search for *.html files
  */
 module.exports = async function minifyHtml( outputDir ) {
+	const logTime = logWithTime( 'Minifying HTML' );
 	const files = globSync( join( outputDir, '**', 'api', '**', '*.html' ) );
 
 	const pool = new TinyPool( {
@@ -24,8 +26,6 @@ module.exports = async function minifyHtml( outputDir ) {
 	} );
 
 	try {
-		console.log( 'Started HTML minification.' );
-
 		const results = await Promise.allSettled(
 			files.map( async file => {
 				try {
@@ -49,6 +49,6 @@ module.exports = async function minifyHtml( outputDir ) {
 	} finally {
 		await pool.destroy();
 
-		console.log( 'Finished HTML minification.' );
+		logTime();
 	}
 };

package/src/tasks/read-doc-sources.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const upath = require( 'upath' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const { globSync } = require( 'glob' );
 const DOC_FORMATS = require( '../helpers/doc-formats' );
 

package/src/tasks/run-webpack.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const path = require( 'path' );
+const path = require( 'node:path' );
 const webpack = require( 'webpack' );
 
 module.exports = ( sourceFile, destinationFile, {

package/src/tasks/validate-html-w3c.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-const { spawn } = require( 'child_process' );
+const { spawn } = require( 'node:child_process' );
 const vnu = require( 'vnu-jar' );
 
 module.exports = ( buildPath, { verbose } = {} ) => new Promise( ( resolve, reject ) => {

package/src/tasks/validate-links.js

@@ -11,11 +11,12 @@
  * especially for API documentation where the number of links can reach thousands.
  */
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const fs = require( 'fs-extra' );
 const upath = require( 'upath' );
 const { globSync } = require( 'glob' );
 const { default: TinyPool } = require( 'tinypool' );
+const logWithTime = require( '../helpers/log-with-time' );
 
 /**
  * Collects all links from the provided HTML files.
@@ -81,16 +82,17 @@ async function collectLinks( pattern, options ) {
  * @param {Object} [options={}] Validation options.
  */
 module.exports = async function validateLinks( buildPath, options = {} ) {
-	console.info( `Gathering links in ${ styleText( 'magenta', buildPath ) } to validate...` );
+	const logGatheringTime = logWithTime( 'Gathering links to validate' );
 
-	const start = Date.now();
 	const { links, pathsToFiles } = await collectLinks( upath.join( buildPath, '**', '*' ), options );
 	const pool = new TinyPool( {
 		filename: require.resolve( './validate-links-worker.js' )
 	} );
 
+	logGatheringTime();
+
 	try {
-		console.info( `Validating links in ${ styleText( 'magenta', buildPath ) }...` );
+		const logValidatingTime = logWithTime( 'Validating links' );
 
 		const tasks = splitArrayBalanced( pathsToFiles, pool.options.maxThreads ).map( chunk => pool.run( { chunk, links, options } ) );
 		const results = await Promise.all( tasks );
@@ -101,7 +103,7 @@ module.exports = async function validateLinks( buildPath, options = {} ) {
 			throw new Error( `Found ${ errors.length } invalid links.` );
 		}
 
-		console.info( `Links validation finished in ${ styleText( 'green', ( Date.now() - start ) + 'ms' ) }.` );
+		logValidatingTime();
 	} finally {
 		await pool.destroy();
 	}

package/src/tasks/watcher.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const { styleText } = require( 'util' );
+const { styleText } = require( 'node:util' );
 const upath = require( 'upath' );
 const chokidar = require( 'chokidar' );
 const { copy } = require( 'fs-extra' );

package/src/template/template-collection.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const pug = require( 'pug' );
-const fs = require( 'fs' );
+const fs = require( 'node:fs' );
 const upath = require( 'upath' );
 const isNonEmptyArray = require( '../helpers/is-non-empty-array' );
 const createFilterAttribs = require( '../helpers/create-filtering-data-attribs' );

package/themes/umberto/layout/gloria/_modules/sentry/index.pug

@@ -16,8 +16,14 @@ mixin load-sentry-script( sentry )
 						'https://ckeditor.com/docs',
 						'https://ckeditor5.github.io/docs/nightly'
 					],
-					replaysSessionSampleRate: 1.0,
-					replaysOnErrorSampleRate: 1.0
+					replaysSessionSampleRate: 0,
+					replaysOnErrorSampleRate: 0,
+					initialScope: scope => {
+						scope.setTags( {
+							CKEDITOR_VERSION: typeof CKEDITOR_VERSION !== 'undefined' ? CKEDITOR_VERSION : '(none)',
+							CKBOX_VERSION: typeof CKBox !== 'undefined' ? CKBox.version : '(none)',
+						} );
+					}
 				} );
 			};
 

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

@@ -183,12 +183,21 @@
 	}
 
 	ol a {
-		display: block;
 		padding: 0 var(--spacing-2);
 		text-decoration: none;
 		font-size: var(--font-size-sm);
 		color: var(--color-secondary-700);
 
+		&:not(.c-toc__link--with-icon) {
+			display: block;
+		}
+
+		&.c-toc__link--with-icon {
+			display: flex;
+			align-items: center;
+			gap: var(--spacing-1);
+		}
+
 		&:hover,
 		&.is-active {
 			color: var(--color-primary);

package/themes/umberto/src/gloria/js/components/tooltip-popover.js

@@ -13,8 +13,9 @@ import { randomId } from '../helpers/random-id';
 import { createAnchorPositioningWatcher } from '../helpers/create-anchor-positioning-watcher';
 import { createMutationObserver } from '../helpers/create-mutation-observer';
 import { createCleanupRegistry } from '../helpers/create-cleanup-registry';
-import { isElementAttached } from '../helpers/is-element-attached';
+import { isElementDetached } from '../helpers/is-element-detached';
 import { afterDomReady } from '../helpers/after-dom-ready';
+import { timeout } from '../helpers/timeout';
 
 /**
  * Tooltip component.
@@ -71,7 +72,7 @@ export class TooltipPopover extends BaseComponent {
 		const tooltips = document.querySelectorAll( '.js-tooltip-popover' );
 
 		for ( const tooltip of tooltips ) {
-			new TooltipPopover( tooltip ).init();
+			tooltip.tooltipPopover ||= new TooltipPopover( tooltip ).init();
 		}
 	}
 
@@ -123,14 +124,14 @@ export class TooltipPopover extends BaseComponent {
 				// If so, and the tooltip is visible, hide it.
 				// Sometimes, framework might remove the trigger element after the click event.
 				// It handles such cases gracefully.
-				this.triggerCleanup.addEventListener( window, 'mousedown', () => {
-					setTimeout( () => {
-						isElementAttached( trigger ).then( isDetached => {
-							if ( isDetached && this.state.isVisible ) {
-								this.hide();
-							}
-						} );
-					}, 300 );
+				this.triggerCleanup.addEventListener( window, 'mousedown', async () => {
+					await timeout( 300 );
+
+					const isDetached = await isElementDetached( trigger );
+
+					if ( isDetached && this.state.isVisible ) {
+						this.hide();
+					}
 				} );
 				break;
 
@@ -397,6 +398,7 @@ export class TooltipPopover extends BaseComponent {
 				arrow.style.left = `calc(50% - ${ offset }px)`;
 			} else if ( position.endsWith( '-end' ) ) {
 				const currentRight = parseFloat( arrow.style.right || 0 );
+
 				arrow.style.right = `${ currentRight + offset }px`;
 			}
 		} else if ( left + tooltipRect.width > window.innerWidth ) {
@@ -407,9 +409,11 @@ export class TooltipPopover extends BaseComponent {
 
 			if ( !position.endsWith( '-start' ) && !position.endsWith( '-end' ) ) {
 				const offset = origLeft - left;
+
 				arrow.style.left = `calc(50% + ${ offset }px)`;
 			} else if ( position.endsWith( '-start' ) ) {
 				const currentLeft = parseFloat( arrow.style.left || 0 );
+
 				arrow.style.left = `${ currentLeft - overflowAmount }px`;
 			}
 		}
@@ -560,6 +564,8 @@ export function createTooltipPopover( config = {} ) {
 		...rest
 	} );
 
+	tooltip.tooltipPopover = popover;
+
 	afterDomReady( () => {
 		// Add to document
 		document.body.appendChild( tooltip );

package/themes/umberto/src/gloria/js/helpers/create-cleanup-registry.js

@@ -32,6 +32,7 @@ export function createCleanupRegistry() {
 		destroy() {
 			while ( callbacks.length ) {
 				const callback = callbacks.pop();
+
 				if ( typeof callback === 'function' ) {
 					callback();
 				}

package/themes/umberto/src/gloria/js/helpers/{is-element-attached.js → is-element-detached.js}

@@ -6,23 +6,32 @@
 /**
  * Asynchronously checks if the given element or any of its parents are detached from the document body.
  *
+ * This function intentionally does not use `isConnected` to ensure compatibility with environments like Shadow DOM.
+ * It only checks the connection to `document.body` not to any other root nodes.
+ *
  * @param element The element to check.
  * @returns A promise that resolves to true if the element or any parent is detached, false otherwise.
  */
-export async function isElementAttached( element ) {
+export async function isElementDetached( element ) {
 	return new Promise( resolve => {
 		// Use requestAnimationFrame to ensure the check happens after any potential DOM manipulations in the same tick.
 		requestAnimationFrame( () => {
 			let currentElement = element;
-			while ( currentElement ) {
+
+			for (
+				let watchdog = 0;
+				currentElement && currentElement !== document.body && watchdog < 100;
+				watchdog++
+			) {
 				if ( !document.body.contains( currentElement ) ) {
-					resolve( true ); // Detached
+					resolve( true );
 					return;
 				}
+
 				currentElement = currentElement.parentElement;
 			}
 
-			resolve( false ); // Attached
+			resolve( false );
 		} );
 	} );
 }

package/themes/umberto/src/gloria/js/modules/algolia-search.js

@@ -46,6 +46,11 @@ export class AlgoliaSearch extends BaseComponent {
 	 * Initializes the algolia search component.
 	 */
 	async init() {
+		// IMPORTANT: Add the keyboard event interceptor BEFORE loading the DocSearch library
+		// It ensures our listener is registered first and can use `stopImmediatePropagation`
+		// to prevent DocSearch's listener from running when typing in the Kapa widget.
+		this._preventDocSearchShortcutInKapa();
+
 		await injectScript( DOCSEARCH_JS_URL, {
 			attributes: {
 				crossorigin: 'anonymous'
@@ -88,6 +93,46 @@ export class AlgoliaSearch extends BaseComponent {
 			}
 		} );
 	}
+
+	/**
+	 * Prevents the DocSearch "/" keyboard shortcut from triggering when the user is typing in the Kapa widget.
+	 * DocSearch library doesn't provide a configuration option to disable keyboard shortcuts,
+	 * so we need to intercept the event and stop it completely before DocSearch's listener sees it.
+	 *
+	 * This listener is added in the capture phase BEFORE DocSearch is loaded, ensuring it runs first.
+	 * We use stopImmediatePropagation() to prevent ALL other listeners (including DocSearch's) from running.
+	 */
+	_preventDocSearchShortcutInKapa() {
+		document.addEventListener( 'keydown', event => {
+			// Only handle the "/" key
+			if ( event.key !== '/' ) {
+				return;
+			}
+
+			// Use `composedPath()` to check the entire event path, including through shadow DOM boundaries.
+			// This is more reliable than checking `document.activeElement` for shadow DOM content.
+			const path = event.composedPath();
+
+			const isTypingInInput = path.some( element => {
+				if ( !element || !element.tagName ) {
+					return false;
+				}
+
+				// Let's check different types of input fields.
+				// Kapa currently uses a textarea for the search input.
+				// But there's a chance that it will change in the future.
+				const isInputElement = element.tagName === 'TEXTAREA' ||
+					element.tagName === 'INPUT' ||
+					element.isContentEditable;
+
+				return isInputElement;
+			} );
+
+			if ( isTypingInInput ) {
+				event.stopImmediatePropagation();
+			}
+		}, true );
+	}
 }
 
 /**