umberto 9.3.0 → 10.0.0

package/src/tasks/macro-replacer.js

@@ -3,9 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-module.exports = ( { fullText, variables, pagePath } = {} ) => {
+export const macroReplacer = ( { fullText, variables, pagePath } = {} ) => {
 	const macros = new Set( fullText.match( /\{%\s?[A-Z_0-9]+?\s?%\}/g ) );
 	let outputText = fullText;
 	if ( !macros.size ) {

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

@@ -3,10 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const { readFileSync, writeFileSync } = require( 'node:fs' );
-const minifier = require( '@minify-html/node' );
+import { readFileSync, writeFileSync } from 'node:fs';
+import minifier from '@minify-html/node';
 
 /**
  * Minifies HTML content.
@@ -14,7 +12,7 @@ const minifier = require( '@minify-html/node' );
  * @param {string} file - Path to the HTML file to minify.
  * @returns {void}
  */
-module.exports = function( file ) {
+export const minifyHtmlWorker = function( file ) {
 	const html = readFileSync( file );
 
 	const minified = minifier.minify( html, {
@@ -31,3 +29,5 @@ module.exports = function( file ) {
 
 	writeFileSync( file, minified );
 };
+
+export default minifyHtmlWorker;

package/src/tasks/minify-html.js

@@ -3,26 +3,24 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-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' );
+import upath from 'upath';
+import { globSync } from 'node:fs';
+import { styleText } from 'node:util';
+import TinyPool from 'tinypool';
+import { logWithTime } from '../helpers/log-with-time.js';
 
 /**
  * Minifies all HTML files under outputDir in parallel using tinypool.
  *
  * @param {string} outputDir - base directory to search for *.html files
  */
-module.exports = async function minifyHtml( outputDir ) {
+export async function minifyHtml( outputDir ) {
 	const logTime = logWithTime( 'Minifying HTML' );
-	const files = globSync( join( outputDir, '**', 'api', '**', '*.html' ) );
+	const files = globSync( upath.join( outputDir, '**', 'api', '**', '*.html' ) );
 
 	const pool = new TinyPool( {
 		runtime: 'child_process',
-		filename: require.resolve( './minify-html-worker.js' )
+		filename: new URL( './minify-html-worker.js', import.meta.url ).pathname
 	} );
 
 	try {

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

@@ -3,11 +3,9 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const upath = require( 'upath' );
-const { globSync } = require( 'glob' );
-const fs = require( 'fs-extra' );
+import upath from 'upath';
+import { globSync } from 'glob';
+import fs from 'fs-extra';
 
 /**
  * Replaces dst files with src files. Used to replace API guides with their cached versions.
@@ -16,7 +14,7 @@ const fs = require( 'fs-extra' );
  * @param src
  * @param dst
  */
-module.exports = ( src, dst ) => {
+export const overwriteApiGuides = ( src, dst ) => {
 	const sourcePaths = globSync( upath.join( src, '**', '*' ) ).map( path => upath.normalize( path ) );
 
 	for ( const p of sourcePaths ) {

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

@@ -3,12 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const upath = require( 'upath' );
-const fs = require( 'node:fs' );
-const { globSync } = require( 'glob' );
-const DOC_FORMATS = require( '../helpers/doc-formats' );
+import upath from 'upath';
+import fs from 'node:fs';
+import { globSync } from 'glob';
+import { docFormats as DOC_FORMATS } from '../helpers/doc-formats.js';
 
 /**
  * Reads API data (usually generated by JSDoc) from given sourcePath. This data is used by DataProvider and ApiBuilder.
@@ -17,7 +15,7 @@ const DOC_FORMATS = require( '../helpers/doc-formats' );
  * @param type
  * @returns {Array}
  */
-module.exports = ( sourcePath, type ) => {
+export const readDocSources = ( sourcePath, type ) => {
 	const fileNames = globSync( upath.join( sourcePath, `**/*.${ DOC_FORMATS[ type ] }` ) ).map( path => upath.normalize( path ) );
 	const files = [];
 

package/src/tasks/run-webpack.js

@@ -3,12 +3,13 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
+import upath from 'upath';
+import { createRequire } from 'node:module';
+import webpack from 'webpack';
 
-const path = require( 'node:path' );
-const webpack = require( 'webpack' );
+const require = createRequire( import.meta.url );
 
-module.exports = ( sourceFile, destinationFile, {
+export const runWebpack = ( sourceFile, destinationFile, {
 	minify = true,
 	outputFileName = 'app.js',
 	umbertoDir,
@@ -20,11 +21,11 @@ module.exports = ( sourceFile, destinationFile, {
 
 		mode: minify ? 'production' : 'development',
 
-		entry: path.resolve( sourceFile ),
+		entry: upath.resolve( sourceFile ),
 
 		output: {
 			filename: outputFileName,
-			path: path.resolve( destinationFile )
+			path: upath.resolve( destinationFile )
 		},
 
 		target: 'web',
@@ -57,6 +58,7 @@ module.exports = ( sourceFile, destinationFile, {
 							presets: [
 								require.resolve( '@babel/preset-env' )
 							]
+
 						}
 					}
 				}

package/src/tasks/validate-links-collect-worker.js

@@ -3,13 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
+import fs from 'fs-extra';
+import upath from 'upath';
+import { isMaskedID } from '../../scripts/utils/random-id.cjs';
 
-const fs = require( 'fs-extra' );
-const upath = require( 'upath' );
-const { isMaskedID } = require( '../../scripts/utils/random-id' );
-
-module.exports = function( { chunk } ) {
+export const validateLinksCollectWorker = function( { chunk } ) {
 	const links = [];
 
 	for ( const filePath of chunk ) {
@@ -32,3 +30,5 @@ module.exports = function( { chunk } ) {
 
 	return links;
 };
+
+export default validateLinksCollectWorker;

package/src/tasks/validate-links-worker.js

@@ -3,11 +3,9 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const fs = require( 'fs-extra' );
-const upath = require( 'upath' );
-const { parseDocument } = require( 'htmlparser2' );
+import fs from 'fs-extra';
+import upath from 'upath';
+import { parseDocument } from 'htmlparser2';
 
 /**
  * Validates links in the given chunk of files.
@@ -20,7 +18,7 @@ const { parseDocument } = require( 'htmlparser2' );
  * @param {Object} params.options Validation options.
  * @returns {Array<Object>}
  */
-module.exports = function( { chunk, links, options } ) {
+export const validateLinksWorker = function( { chunk, links, options } ) {
 	const errors = [];
 
 	for ( const filePath of chunk ) {
@@ -72,6 +70,8 @@ module.exports = function( { chunk, links, options } ) {
 	return errors;
 };
 
+export default validateLinksWorker;
+
 /**
  * Resolves the target path for the given href relative to the file and public directory.
  *

package/src/tasks/validate-links.js

@@ -3,20 +3,18 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
 /**
  * Script for validating links in generated HTML files.
  * Uses multiple threads (worker_threads) for parallel analysis, significantly speeding up the build process,
  * especially for API documentation where the number of links can reach thousands.
  */
 
-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' );
+import { styleText } from 'node:util';
+import fs from 'fs-extra';
+import upath from 'upath';
+import { globSync } from 'glob';
+import TinyPool from 'tinypool';
+import { logWithTime } from '../helpers/log-with-time.js';
 
 /**
  * Collects all links from the provided HTML files.
@@ -55,7 +53,7 @@ async function collectLinks( pattern, options ) {
 		} );
 
 	const pool = new TinyPool( {
-		filename: require.resolve( './validate-links-collect-worker.js' )
+		filename: new URL( './validate-links-collect-worker.js', import.meta.url ).pathname
 	} );
 
 	try {
@@ -82,12 +80,12 @@ async function collectLinks( pattern, options ) {
  * @param {Object} [options={}] Validation options.
  * @returns {Promise<boolean>} True if no errors were found, false otherwise.
  */
-module.exports = async function validateLinks( buildPath, options = {} ) {
+export async function validateLinks( buildPath, options = {} ) {
 	const logGatheringTime = logWithTime( 'Gathering links to validate' );
 
 	const { links, pathsToFiles } = await collectLinks( upath.join( buildPath, '**', '*' ), options );
 	const pool = new TinyPool( {
-		filename: require.resolve( './validate-links-worker.js' )
+		filename: new URL( './validate-links-worker.js', import.meta.url ).pathname
 	} );
 
 	logGatheringTime();

package/src/tasks/watcher.js

@@ -3,14 +3,12 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
+import { styleText } from 'node:util';
+import upath from 'upath';
+import chokidar from 'chokidar';
+import { copy } from 'fs-extra';
 
-const { styleText } = require( 'node:util' );
-const upath = require( 'upath' );
-const chokidar = require( 'chokidar' );
-const { copy } = require( 'fs-extra' );
-
-module.exports = function watchMd( hexoManager ) {
+export function watchMd( hexoManager ) {
 	console.log( styleText( 'yellow', 'Umberto is in watch mode – press CTRL+C to exit.' ) );
 
 	for ( const { originPath, dstPath } of hexoManager.getOriginPaths() ) {

package/src/tasks/write-html-files.js

@@ -3,10 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const fs = require( 'fs-extra' );
-const upath = require( 'upath' );
+import fs from 'fs-extra';
+import upath from 'upath';
 
 /**
  * Saves .html files to file system.
@@ -15,7 +13,7 @@ const upath = require( 'upath' );
  * @param {String} destinationDir Additional destination path. Additional because files already have its own path.
  * @returns {Promise<void>}
  */
-module.exports = async ( files, destinationDir = '.' ) => {
+export const writeHtmlFiles = async ( files, destinationDir = '.' ) => {
 	const writePromises = files.map( file =>
 		fs.outputFile(
 			upath.join( destinationDir, file.dirname, file.basename ),

package/src/template/template-collection.js

@@ -3,24 +3,22 @@
  * For licensing, see LICENSE.md.
  */
 
-'use strict';
-
-const pug = require( 'pug' );
-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' );
-const htmlsafe = require( '../helpers/html-safe' );
-const splitLongname = require( '../helpers/split-longname' );
-const extractLongname = require( '../helpers/extract-longname' );
-const getApiInfoboxTooltip = require( '../helpers/get-api-infobox-tooltip' );
-const capitalize = require( '../helpers/capitalize' );
-const relative_url = require( 'hexo/dist/plugins/helper/relative_url' ); // eslint-disable-line camelcase
+import pug from 'pug';
+import fs from 'node:fs';
+import upath from 'upath';
+import { isNonEmptyArray } from '../helpers/is-non-empty-array.js';
+import { createFilteringDataAttribs as createFilterAttribs } from '../helpers/create-filtering-data-attribs.js';
+import { htmlSafe as htmlsafe } from '../helpers/html-safe.js';
+import { splitLongname } from '../helpers/split-longname.js';
+import { extractLongname } from '../helpers/extract-longname.js';
+import { getApiInfoboxTooltip } from '../helpers/get-api-infobox-tooltip.js';
+import { capitalize } from '../helpers/capitalize.js';
+import relativeUrl from 'hexo/dist/plugins/helper/relative_url.js';
 
 /**
  * Provides pug templates and adds various helpers to them.
  */
-module.exports = class TemplateCollection {
+export class TemplateCollection {
 	/**
 	 * @param {String} templatePath Path to template files.
 	 * @param {Boolean} pretty Whether to prettify template output or not.
@@ -96,7 +94,7 @@ module.exports = class TemplateCollection {
 				extractLongname,
 				getApiInfoboxTooltip,
 				capitalize,
-				relative_url // eslint-disable-line camelcase
+				relative_url: relativeUrl
 			},
 			this._helpers,
 			this._locals

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

@@ -4,6 +4,9 @@ include ../../_components/svg/index
 mixin treeItem( node, level )
 	- const children = node.getChildren();
 	- const hasChildren = children && children.length > 0;
+	- const isPackageNode = node.getProp( 'type' ) === 'package';
+	- const shouldRenderChildren = hasChildren && ( !isPackageNode || ( activeApiPackage && node.getProp( 'name' ) === activeApiPackage ) );
+	- const packageChevronClass = isPackageNode && hasChildren ? [ 'api-tree__button', 'api-tree__button--chevron', 'api-tree__button--package', shouldRenderChildren ? 'api-tree__button--open' : '' ] : [];
 	- let dataAttr = {};
 
 	- if ( node.getProp( 'access' ) ) dataAttr[ `data-${node.getProp('access')}` ] = 'true';
@@ -18,7 +21,21 @@ mixin treeItem( node, level )
 		- const longname = node.getProp( 'longname' );
 		- const iconClassName = "api-tree__link--with-icon api-tree__link--icon-" + node.getProp( 'type' );
 
-		if !hasChildren
+		if isPackageNode
+			div.api-tree__item-wrapper( data-ln = longname )
+				a(
+					class = [ classStr, 'api-tree__link', iconClassName ],
+					href=link,
+					data-skip-validation=''
+				)
+					if hasChildren
+						i( class = packageChevronClass )
+					| #{ node.getProp( 'name' ) }
+			if shouldRenderChildren
+				ul.api-tree__list( 'style'='--level:'+level )
+					each child in children
+						+treeItem( child, level + 1 )
+		else if !shouldRenderChildren
 			div.api-tree__item-wrapper
 				a.api-tree__link(
 					href=link,

package/themes/umberto/layout/gloria/_head/head.pug

@@ -17,7 +17,12 @@ if ( page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:card' content= page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:site' content= '@ckeditor' )
 
+- const currentProject = projectLocals && projectsData.find( project => project.slug === projectLocals.projectSlug );
+- const isNonIndexableProject = currentProject && currentProject.shouldInjectNoIndexMeta
+
 meta( name= 'x-generated-at' content= Date() )
+if shouldInjectNoIndexMeta || isNonIndexableProject
+	meta( name= 'robots' content='noindex, nofollow' )
 
 if ( mainOg || ( projectLocals && projectLocals.og ) || page[ 'og-description' ] )
 	meta( property='og:title' content= page[ 'og-title' ] || title )

package/themes/umberto/layout/umberto/_partial/head.pug

@@ -15,7 +15,12 @@ if ( page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:card' content= page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:site' content= '@ckeditor' )
 
+- const currentProject = projectLocals && projectsData.find( project => project.slug === projectLocals.projectSlug );
+- const isNonIndexableProject = currentProject && currentProject.shouldInjectNoIndexMeta
+
 meta( name= 'x-generated-at' content= Date() )
+if shouldInjectNoIndexMeta || isNonIndexableProject
+	meta( name= 'robots' content='noindex, nofollow' )
 
 if ( mainOg || ( projectLocals && projectLocals.og ) || page[ 'og-description' ] )
 	meta( property='og:title' content= page[ 'og-title' ] || title )

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

@@ -184,6 +184,10 @@
 				transform: translate(-125%, -50%) rotate(90deg);
 			}
 
+			&--package {
+				left: 0;
+			}
+
 			&--chevron {
 				&:before {
 					content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.29274 3.96428C6.90222 3.57376 6.26905 3.57376 5.87853 3.96428C5.488 4.3548 5.488 4.98797 5.87853 5.37849L7.99982 7.49979L5.8785 9.62111C5.48798 10.0116 5.48798 10.6448 5.8785 11.0353C6.26903 11.4258 6.90219 11.4258 7.29272 11.0353L10.115 8.21301C10.1171 8.21099 10.1191 8.20896 10.1212 8.20692C10.5117 7.8164 10.5117 7.18323 10.1212 6.79271L10.1211 6.79268L7.29274 3.96428Z" fill="%233B4958"/></svg>') / 'Api-chevron icon';

package/themes/umberto/src/gloria/js/app.js

@@ -3,38 +3,38 @@
  * For licensing, see LICENSE.md.
  */
 
-import { afterDomReady } from './helpers/after-dom-ready';
-
-import { Dropdown } from './components/dropdown';
-import { MobileOverlay } from './components/mobile-overlay';
-import { TableOfContents } from './modules/table-of-contents';
-import { ApiTableOfContents } from './modules/table-of-contents-api';
-import { ApiFilter } from './modules/api-filter';
-import { MobileNav } from './modules/mobile-nav';
-import { LinksPrefetch } from './modules/links-prefetch';
-import { Header } from './modules/header';
-import { HeaderBar } from './modules/header-bar';
-import { HashLink } from './components/hash-link';
-import { Sidebar } from './modules/sidebar';
-import { NavTree } from './components/nav-tree';
-import { ApiNavTree } from './components/api-nav-tree';
-import { ApiToggle } from './components/api-toggle';
-import { Tabs } from './components/tabs';
-import { Breadcrumbs } from './components/breadcrumbs';
-import { AlgoliaSearch } from './modules/algolia-search';
-import { HeadingLink } from './components/heading-link';
-import { TooltipPopover } from './components/tooltip-popover';
-import { imageZoom } from './components/image-zoom';
-import { Expandable } from './components/expandable';
-import { CodeSwitcher } from './components/code-switcher';
-import { CodeBlock } from './components/code-block';
-import { FakeDevtools } from './components/fake-devtools';
-import { IFrame } from './components/iframe';
-
-import { isMobile } from './helpers/is-mobile';
-
-import './web-components/svg-icon';
-import './public-api';
+import { afterDomReady } from './helpers/after-dom-ready.js';
+
+import { Dropdown } from './components/dropdown.js';
+import { MobileOverlay } from './components/mobile-overlay.js';
+import { TableOfContents } from './modules/table-of-contents.js';
+import { ApiTableOfContents } from './modules/table-of-contents-api.js';
+import { ApiFilter } from './modules/api-filter.js';
+import { MobileNav } from './modules/mobile-nav.js';
+import { LinksPrefetch } from './modules/links-prefetch.js';
+import { Header } from './modules/header.js';
+import { HeaderBar } from './modules/header-bar.js';
+import { HashLink } from './components/hash-link.js';
+import { Sidebar } from './modules/sidebar.js';
+import { NavTree } from './components/nav-tree.js';
+import { ApiNavTree } from './components/api-nav-tree.js';
+import { ApiToggle } from './components/api-toggle.js';
+import { Tabs } from './components/tabs.js';
+import { Breadcrumbs } from './components/breadcrumbs.js';
+import { AlgoliaSearch } from './modules/algolia-search.js';
+import { HeadingLink } from './components/heading-link.js';
+import { TooltipPopover } from './components/tooltip-popover.js';
+import { imageZoom } from './components/image-zoom.js';
+import { Expandable } from './components/expandable.js';
+import { CodeSwitcher } from './components/code-switcher.js';
+import { CodeBlock } from './components/code-block.js';
+import { FakeDevtools } from './components/fake-devtools.js';
+import { IFrame } from './components/iframe.js';
+
+import { isMobile } from './helpers/is-mobile.js';
+
+import './web-components/svg-icon.js';
+import './public-api.js';
 
 const safeAttach = ( component, name ) => {
 	try {

package/themes/umberto/src/gloria/js/components/api-nav-tree.js

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from '../components/base-component';
-import { toggleHeight } from '../helpers/toggle-height';
-import { getParentsUntil } from '../helpers/get-parents-until';
-import { onMobileOverlayStateChange } from '../components/mobile-overlay';
+import { BaseComponent } from '../components/base-component.js';
+import { toggleHeight } from '../helpers/toggle-height.js';
+import { getParentsUntil } from '../helpers/get-parents-until.js';
+import { onMobileOverlayStateChange } from '../components/mobile-overlay.js';
 
 export class ApiNavTree extends BaseComponent {
 	/**
@@ -155,7 +155,7 @@ export class ApiNavTree extends BaseComponent {
 			sidebarNav.scrollTop = Number( storedScrollPosition );
 		}
 
-		const activeElement = navTree.querySelector( '.api-tree__item-wrapper.active' );
+		const activeElement = navTree.querySelector( '.api-tree__item-wrapper.active' )?.parentElement;
 
 		setTimeout( () => {
 			// Ensure the sidebar is scrolled to the active element after a short delay.

package/themes/umberto/src/gloria/js/components/api-toggle.js

@@ -3,8 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
-import { toggleHeight } from '../helpers/toggle-height';
+import { BaseComponent } from './base-component.js';
+import { toggleHeight } from '../helpers/toggle-height.js';
 
 // .js-api-collapsing-button
 

package/themes/umberto/src/gloria/js/components/breadcrumbs.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
+import { BaseComponent } from './base-component.js';
 
 /**
  * Component responsible for handling breadcrumbs overflow and scroll behavior.

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

@@ -3,11 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
-import { highlightCode } from '../helpers/highlight-code';
-import { findCodeLang } from '../helpers/find-code-lang';
-import { copyToClipboard } from '../helpers/copy-to-clipboard';
-import { decodeHtmlEntities } from '../helpers/decode-html-entities';
+import { BaseComponent } from './base-component.js';
+import { highlightCode } from '../helpers/highlight-code.js';
+import { findCodeLang } from '../helpers/find-code-lang.js';
+import { copyToClipboard } from '../helpers/copy-to-clipboard.js';
+import { decodeHtmlEntities } from '../helpers/decode-html-entities.js';
 
 /**
  * Component for managing code block highlighting.

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

@@ -3,8 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
-import { onTabActivation, activateTab } from './tabs';
+import { BaseComponent } from './base-component.js';
+import { onTabActivation, activateTab } from './tabs.js';
 
 /**
  * A component that handles switching between different installation code examples.

package/themes/umberto/src/gloria/js/components/dropdown.js

@@ -3,11 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
-import { createOutsideClickWatcher } from '../helpers/create-outside-click-watcher';
-import { createKeyboardFocusCycler, getVerticalKeysMap } from '../helpers/create-keyboard-focus-cycler';
-import { createKeyboardBlurWatcher } from '../helpers/create-keyboard-blur-watcher';
-import { onEscapeKeyPress } from '../helpers/escape-handler';
+import { BaseComponent } from './base-component.js';
+import { createOutsideClickWatcher } from '../helpers/create-outside-click-watcher.js';
+import { createKeyboardFocusCycler, getVerticalKeysMap } from '../helpers/create-keyboard-focus-cycler.js';
+import { createKeyboardBlurWatcher } from '../helpers/create-keyboard-blur-watcher.js';
+import { onEscapeKeyPress } from '../helpers/escape-handler.js';
 
 /**
  * A dropdown component that manages togglable dropdown menus with automatic positioning.

package/themes/umberto/src/gloria/js/components/expandable.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
+import { BaseComponent } from './base-component.js';
 
 /**
  * Component for managing expandable/collapsible content sections.

package/themes/umberto/src/gloria/js/components/fake-devtools.js

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-import { BaseComponent } from './base-component';
-import { html } from '../helpers/html-builder';
-import { cx } from '../helpers/classnames';
-import { takeLast } from '../helpers/take-last';
+import { BaseComponent } from './base-component.js';
+import { html } from '../helpers/html-builder.js';
+import { cx } from '../helpers/classnames.js';
+import { takeLast } from '../helpers/take-last.js';
 
 /**
  * Component for simulating browser devtools console.