@ui5/webcomponents-tools 2.19.0-rc.2 → 2.19.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.19.0](https://github.com/UI5/webcomponents/compare/v2.19.0-rc.3...v2.19.0) (2026-02-05)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.19.0-rc.3](https://github.com/UI5/webcomponents/compare/v2.19.0-rc.2...v2.19.0-rc.3) (2026-02-05)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [2.19.0-rc.2](https://github.com/UI5/webcomponents/compare/v2.19.0-rc.1...v2.19.0-rc.2) (2026-01-22)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/bin/dev.js

@@ -3,15 +3,20 @@
 const child_process = require("child_process");
 const { comma } = require("postcss/lib/list");
 
-let command = process.argv[2];
-const argument = process.argv[3];
+// Check for verbose flag
+const hasVerbose = process.argv.includes("--verbose") || process.argv.includes("-v");
+const args = process.argv.slice(2).filter(arg => arg !== "--verbose" && arg !== "-v");
+
+let command = args[0];
+const argument = args[1];
 
 if (command === "watch") {
 	if (["src", "test", "bundles", "styles", "templates", "samples"].includes(argument)) {
 		command = `watch.${argument}`;
 	}
 } else if (command === "test") {
-	command = ["test", ...process.argv.slice(3)].join(" ");
+	command = ["test", ...args.slice(1)].join(" ");
 }
 
-child_process.execSync(`ui5nps "${command}"`, {stdio: 'inherit'});
+const verboseFlag = hasVerbose ? " --verbose" : "";
+child_process.execSync(`ui5nps${verboseFlag} "${command}"`, {stdio: 'inherit'});

package/bin/ui5nps.js

@@ -13,6 +13,24 @@ const SCRIPT_NAMES = [
 	"package-scripts.mjs"
 ]
 
+/**
+ * Check if verbose mode is enabled via CLI flag or environment variable.
+ * @returns {boolean}
+ */
+function isVerbose() {
+	return process.env.UI5_VERBOSE === "true";
+}
+
+/**
+ * Log a message only in verbose mode.
+ * @param  {...any} args - Arguments to pass to console.log
+ */
+function verboseLog(...args) {
+	if (isVerbose()) {
+		console.log(...args);
+	}
+}
+
 /**
  * Parser for UI5 package scripts with support for parallel and sequential execution
  */
@@ -183,7 +201,7 @@ class Parser {
 						return reject(new Error(`No valid _ui5mainFn function exported from ${importPath} tried to be executed with ui5nps-script. Either provide a valid _ui5mainFn function or use another way to execute the script (via node).`));
 					}
 
-					console.log(` |  Executing command ${commandName} as module.`);
+					verboseLog(` |  Executing command ${commandName} as module.`);
 					const result = _ui5mainFn(argv);
 
 					if (result instanceof Promise) {
@@ -193,11 +211,11 @@ class Parser {
 					}
 				}
 
-				console.log(` |  Executing command ${commandName} as command.\n    Running: ${command}`);
+				verboseLog(` |  Executing command ${commandName} as command.\n    Running: ${command}`);
 				const child = exec(command, { stdio: "inherit", env: { ...process.env, ...this.envs } });
 
 				child.stdout.on("data", (data) => {
-					console.log(data);
+					verboseLog(data);
 				});
 
 				child.stderr.on("data", (data) => {
@@ -246,16 +264,25 @@ class Parser {
 const parser = new Parser();
 
 // Basic input validation
-const commands = process.argv.slice(2);
+const commands = process.argv.slice(2).filter(arg => arg !== "--verbose" && arg !== "-v");
+const verbose = process.argv.includes("--verbose") || process.argv.includes("-v");
+
+// Set verbose environment variable for child scripts
+if (verbose) {
+	process.env.UI5_VERBOSE = "true";
+}
+
 if (commands.length === 0) {
-	console.error("Usage: ui5nps <command> [command2] [command3] ...");
+	console.error("Usage: ui5nps [--verbose|-v] <command> [command2] [command3] ...");
 	console.error("No commands provided.");
 	process.exit(1);
 }
 
 if (commands.includes("--help") || commands.includes("-h")) {
-	console.log("Usage: ui5nps <command> [command2] [command3] ...");
-	console.log("Available commands:");
+	console.log("Usage: ui5nps [--verbose|-v] <command> [command2] [command3] ...");
+	console.log("\nOptions:");
+	console.log("  --verbose, -v    Show detailed output (default: quiet, errors only)");
+	console.log("\nAvailable commands:");
 	for (const [key, value] of parser.parsedScripts.entries()) {
 		console.log(`  - ${key}: ${value}`);
 	}

package/components-package/nps.js

@@ -70,6 +70,7 @@ const getScripts = (options) => {
 		__ui5envs: {
 			UI5_CEM_MODE: options.dev,
 			UI5_TS: `${tsOption}`,
+			CSS_VARIABLES_TARGET: options.cssVariablesTarget ?? "root",
 			CYPRESS_COVERAGE: !!(options.internal?.cypress_code_coverage),
 		},
 		clean: {

package/lib/amd-to-es6/index.js

@@ -96,7 +96,9 @@ const transformAmdToES6Modules = async (argv) => {
 	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
 	return Promise.all(fileNames.map(fileName => transformAmdToES6Module(fileName, basePath)).filter(x => !!x))
 		.then(() => {
-			console.log("Success: all amd modules are transformed to es6!");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Success: all amd modules are transformed to es6!");
+			}
 		});
 };
 

package/lib/cem/cem.js

@@ -2,6 +2,10 @@ const cemCLI = require("./patch/@custom-elements-manifest/analyzer/cli.js")
 
 const main = async argv => {
 	const patchedArgv = argv.slice(2);
+	// Add --quiet flag unless verbose mode is enabled
+	if (process.env.UI5_VERBOSE !== "true" && !patchedArgv.includes("--quiet")) {
+		patchedArgv.push("--quiet");
+	}
 	await cemCLI.cli({ argv: patchedArgv, cwd: process.cwd(), noWrite: false });
 }
 

package/lib/cem/custom-elements-manifest.config.mjs

@@ -17,6 +17,7 @@ import {
 	getTypeRefs,
 	normalizeDescription,
 	formatArrays,
+	formatSlotTypes,
 	isClass,
 	normalizeTagType,
 	logDocumentationError,
@@ -30,10 +31,37 @@ const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
 let aliasMap = {};
 
 const devMode = process.env.UI5_CEM_MODE === "dev";
+const isVerbose = process.env.UI5_VERBOSE === "true";
+
+/**
+ * Wraps a CEM plugin to suppress console output in quiet mode.
+ * @param {Object} plugin - The plugin to wrap
+ * @returns {Object} - Wrapped plugin with silent console during packageLinkPhase
+ */
+const wrapPluginForQuietMode = (plugin) => {
+	if (isVerbose) return plugin;
+
+	const originalPackageLinkPhase = plugin.packageLinkPhase;
+	if (!originalPackageLinkPhase) return plugin;
+
+	return {
+		...plugin,
+		packageLinkPhase(context) {
+			const originalLog = console.log;
+			console.log = () => {};
+			try {
+				return originalPackageLinkPhase.call(plugin, context);
+			} finally {
+				console.log = originalLog;
+			}
+		}
+	};
+};
+
 try {
 	aliasMap = JSON.parse(fs.readFileSync("./.ui5-cem-aliases.json"));
 } catch (e) {
-	if (devMode) {
+	if (devMode && isVerbose) {
 		console.warn("No .ui5-cem-aliases.json file found. Continuing without aliases.");
 	}
 }
@@ -168,6 +196,7 @@ function processClass(ts, classNode, moduleDoc) {
 
 			if (member.type?.text) {
 				member.type.text = formatArrays(member.type.text);
+				member.type.text = formatSlotTypes(member.type.text);
 			}
 
 			if (member.type && typeRefs.length) {
@@ -540,7 +569,7 @@ export default {
 				}
 			}
 		},
-		generateCustomData({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false }),
-		customElementJetBrainsPlugin({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false })
+		wrapPluginForQuietMode(generateCustomData({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false })),
+		wrapPluginForQuietMode(customElementJetBrainsPlugin({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false }))
 	],
 };

package/lib/cem/utils.mjs

@@ -396,7 +396,12 @@ const displayDocumentationErrors = () => {
 }
 
 const formatArrays = (typeText) => {
-    return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>")
+    return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>");
+}
+
+// Convert Slot<T> and DefaultSlot<T> to Array<T> (the array is built into these types)
+const formatSlotTypes = (typeText) => {
+	return typeText?.replace(/(Default)?Slot<(.+?)>/g, 'Array<$2>');
 }
 
 export {
@@ -415,6 +420,7 @@ export {
     getTypeRefs,
     normalizeDescription,
     formatArrays,
+    formatSlotTypes,
     isClass,
     normalizeTagType,
     displayDocumentationErrors,

package/lib/cem/validate.js

@@ -5,6 +5,7 @@ const path = require('path');
 const extenalSchema = require('./schema.json');
 const internalSchema = require('./schema-internal.json');
 
+const isVerbose = () => process.env.UI5_VERBOSE === "true";
 
 const validateFn = async () => {
 	// Load your JSON data from the input file
@@ -49,7 +50,9 @@ const validateFn = async () => {
 	// Validate the JSON data against the schema
 	if (devMode) {
 		if (validate(inputDataInternal)) {
-			console.log('Internal custom  element manifest is validated successfully');
+			if (isVerbose()) {
+				console.log('Internal custom element manifest is validated successfully');
+			}
 		} else {
 			console.log(validate.errors)
 			throw new Error(`Validation of internal custom elements manifest failed: ${validate.errors}`);
@@ -61,7 +64,9 @@ const validateFn = async () => {
 
 	// Validate the JSON data against the schema
 	if (validate(inputDataExternal)) {
-		console.log('Custom element manifest is validated successfully');
+		if (isVerbose()) {
+			console.log('Custom element manifest is validated successfully');
+		}
 		fs.writeFileSync(inputFilePath, JSON.stringify(inputDataExternal, null, 2), 'utf8');
 		fs.writeFileSync(inputFilePath.replace("custom-elements", "custom-elements-internal"), JSON.stringify(inputDataInternal, null, 2), 'utf8');
 	} else if (devMode) {

package/lib/copy-and-watch/index.js

@@ -42,6 +42,11 @@ const copyAndWatchFn = async (argv) => {
 		}
 	});
 
+	// Default to silent mode unless verbose is enabled
+	if (process.env.UI5_VERBOSE !== "true") {
+		options.silent = true;
+	}
+
 	if (args.length < 2) {
 		console.error('Not enough arguments: copy-and-watch [options] <sources> <target>');
 		process.exit(1);

package/lib/copy-list/index.js

@@ -22,7 +22,9 @@ const generate = async (argv) => {
 	});
 
 	return Promise.all(promises).then(() => {
-		console.log("Files copied.");
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log("Files copied.");
+		}
 	});
 };
 

package/lib/create-illustrations/index.js

@@ -84,11 +84,15 @@ const generate = async (argv) => {
 	try {
 		await fs.access(srcPath);
 	} catch (error) {
-		console.log(`The path ${srcPath} does not exist.`);
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log(`The path ${srcPath} does not exist.`);
+		}
 		return Promise.resolve(null);
 	}
 
-	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log(`Generating illustrations from ${srcPath} to ${destPath}`);
+	}
 
 	const svgImportTemplate = svgContent => {
 		return `export default \`${svgContent}\`;`
@@ -193,7 +197,9 @@ export { dialogSvg, sceneSvg, spotSvg, dotSvg };`
 			return Promise.all(nestedPromises);
 		})
 		.then(() => {
-			console.log("Illustrations generated.");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Illustrations generated.");
+			}
 		});
 };
 

package/lib/css-processors/css-processor-components.mjs

@@ -8,7 +8,9 @@ import scopeVariables from "./scope-variables.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import { pathToFileURL } from "url";
 
+
 const generate = async (argv) => {
+    const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
     const tsMode = process.env.UI5_TS === "true";
     const extension = tsMode ? ".css.ts" : ".css.js";
 
@@ -23,8 +25,15 @@ const generate = async (argv) => {
 
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
-                    // scoping
-                    let newText = scopeVariables(f.text, packageJSON);
+                    let newText
+
+                    if (CSS_VARIABLES_TARGET) {
+                        newText = f.text;
+                    } else {
+                        // scoping
+                        newText = scopeVariables(f.text, packageJSON);
+                    }
+
                     newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
                     await mkdir(path.dirname(f.path), { recursive: true });
                     writeFile(f.path, newText);

package/lib/css-processors/css-processor-themes.mjs

@@ -5,11 +5,13 @@ import * as path from "path";
 import { writeFile, mkdir } from "fs/promises";
 import postcss from "postcss";
 import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
+import postcssPlugin from "./postcss-plugin.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import scopeVariables from "./scope-variables.mjs";
 import { pathToFileURL } from "url";
 
 const generate = async (argv) => {
+    const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
     const tsMode = process.env.UI5_TS === "true";
     const extension = tsMode ? ".css.ts" : ".css.js";
 
@@ -20,9 +22,24 @@ const generate = async (argv) => {
     ]);
     const restArgs = argv.slice(2);
 
+    const saveFiles = async (distPath, css, suffix = "") => {
+        await mkdir(path.dirname(distPath), { recursive: true });
+        writeFile(distPath.replace(".css", suffix + ".css"), css);
+
+        // JSON
+        const jsonPath = distPath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", suffix + ".css.json");
+        await mkdir(path.dirname(jsonPath), { recursive: true });
+        writeFileIfChanged(jsonPath, JSON.stringify(css));
+
+        // JS/TS
+        const jsPath = distPath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", suffix + extension);
+        const jsContent = getFileContent(packageJSON.name, "\`" + css + "\`");
+        writeFileIfChanged(jsPath, jsContent);
+    }
+
     const processThemingPackageFile = async (f) => {
         const selector = ':root';
-        const result = await postcss().process(f.text);
+        const result = await postcss().process(f.text, { from: undefined });
 
         const newRule = postcss.rule({ selector });
 
@@ -34,13 +51,25 @@ const generate = async (argv) => {
             });
         });
 
-        return newRule.toString();
+        return { css: newRule.toString() };
     };
 
     const processComponentPackageFile = async (f) => {
-        const result = await postcss(combineDuplicatedSelectors).process(f.text);
+        if (CSS_VARIABLES_TARGET) {
+            const result = await postcss([
+                combineDuplicatedSelectors,
+                postcssPlugin
+            ]).process(f.text, { from: undefined });
+
+            return { css: result.css };
+        }
 
-        return scopeVariables(result.css, packageJSON, f.path);
+
+        const combined = await postcss([
+            combineDuplicatedSelectors,
+        ]).process(f.text, { from: undefined });
+
+        return { css: scopeVariables(combined.css, packageJSON, f.path) };
     }
 
     let scopingPlugin = {
@@ -50,20 +79,9 @@ const generate = async (argv) => {
 
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
-                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
-
-                    await mkdir(path.dirname(f.path), { recursive: true });
-                    writeFile(f.path, newText);
-
-                    // JSON
-                    const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
-                    await mkdir(path.dirname(jsonPath), { recursive: true });
-                    writeFileIfChanged(jsonPath, JSON.stringify(newText));
+                    let { css } = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
 
-                    // JS/TS
-                    const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                    const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
-                    writeFileIfChanged(jsPath, jsContent);
+                    saveFiles(f.path, css);
                 });
             })
         },
@@ -75,6 +93,7 @@ const generate = async (argv) => {
         minify: true,
         outdir: 'dist/css',
         outbase: 'src',
+        logLevel: process.env.UI5_VERBOSE === "true" ? "warning" : "error",
         plugins: [
             scopingPlugin,
         ],

package/lib/css-processors/postcss-plugin.mjs

@@ -0,0 +1,153 @@
+
+import postcss from "postcss";
+
+const hostVariables = new Map();
+
+const SELECTOR = ":host";
+
+const saveVariable = (variable, value, density) => {
+    if (!hostVariables.has(variable)) {
+        hostVariables.set(variable, {});
+    }
+    hostVariables.get(variable)[density] = value;
+}
+
+/**
+ * PostCSS plugin for handling CSS variables across density modes (cozy and compact).
+ *
+ * The plugin scans CSS for `:host` rules that define density-specific custom properties.
+ * Variables declared in a root-level `:host` rule are treated as **cozy** values, while
+ * variables declared inside `@container style(--ui5_content_density: compact)` `:host` rules
+ * are treated as **compact** values.
+ *
+ * All discovered variables are merged into a single root `:host` rule. For variables that
+ * exist in both modes, the plugin generates a value that uses CSS variable fallbacks to
+ * dynamically switch between compact and cozy values based on the active density.
+ *
+ * Variables that exist in only one mode are preserved, with appropriate fallbacks added
+ * when needed.
+ *
+ * Example input:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: cozy-value;
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ *
+ * @container style(--ui5_content_density: compact) {
+ *   :host {
+ *     --my-variable: compact-value;
+ *     --compact-only-variable: compact-only;
+ *   }
+ * }
+ * ```
+ *
+ * Output:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: var(--_ui5-compact-size, compact-value) var(--_ui5-cozy-size, cozy-value);
+ *   --compact-only-variable: var(--_ui5-compact-size, compact-only) var(--_ui5-cozy-size, initial);
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ * ```
+ *
+ * This enables seamless runtime switching between density modes using CSS variables alone.
+ */
+
+export default function postcssPlugin() {
+    return {
+        postcssPlugin: 'postcss-content-density-variables',
+        Once(root) {
+            let hasRootHost = false;
+            let hostRule;
+
+            root.walkRules((rule) => {
+                // Only process :host rules
+                if (rule.selector !== SELECTOR) {
+                    return;
+                }
+
+                // Handle root-level :host rules (cozy)
+                if (rule.parent.type === "root") {
+                    if (!hasRootHost) {
+                        hasRootHost = true;
+                        hostRule = rule;
+                    }
+
+                    rule.walkDecls((decl) => {
+                        if (decl.prop.startsWith('--')) {
+                            saveVariable(decl.prop, decl.value, 'cozy');
+                            decl.remove();
+                        }
+                    });
+                }
+
+                // Handle :host rules inside @container (compact)
+                if (rule.parent.type === "atrule") {
+                    if (rule.parent.params.replaceAll("\s", "") === 'style(--ui5_content_density: compact)'.replaceAll("\s", "")) {
+                        rule.walkDecls((decl) => {
+                            if (decl.prop.startsWith('--')) {
+                                saveVariable(decl.prop, decl.value, 'compact');
+                                decl.remove();
+                            }
+                        });
+                    }
+                }
+
+                let current = rule;
+                // Remove up empty rules
+                while (current) {
+                    if (current.nodes.length === 0) {
+                        const parent = current.parent;
+                        current.remove();
+                        current = parent;
+                    }
+
+                    if (current.type === "root") {
+                        break;
+                    }
+                }
+            });
+
+            if (!hasRootHost) {
+                hostRule = postcss.rule({ selector: SELECTOR });
+            }
+
+            // Construct merged variable declarations depending on available modes
+            for (const [variable, variableData] of hostVariables) {
+                if (variableData.cozy && variableData.compact) {
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact})  var(--_ui5-cozy-size, ${variableData.cozy})`,
+                    });
+                } else if (variableData.compact) {
+
+                    // Use a non-existent variable to always trigger the fallback.
+                    // Because this variable is never defined, the fallback is used
+                    // in all cases.
+
+                    // Using `initial` as a fallback can work only for properties
+                    // that treat it as an invalid value. To avoid this inconsistency,
+                    // we intentionally reference an undefined variable, which is
+                    // always considered invalid and undefined.
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact}) var(--_ui5-cozy-size, var(--_ui5-f2d95f8))`,
+                    });
+                } else {
+                    hostRule.append({
+                        prop: variable,
+                        value: variableData.cozy,
+                    });
+                }
+            }
+
+            root.prepend(hostRule);
+            hostVariables.clear();
+        }
+    }
+}
+
+postcssPlugin.postcss = true;

package/lib/css-processors/scope-variables.mjs

@@ -30,7 +30,9 @@ const getOverrideVersion = filePath => {
 	try {
 		overrideVersion = require(`${packageName}${path.sep}package.json`).version;
 	} catch (e) {
-		console.log(`Error requiring package ${packageName}: ${e.message}`);
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log(`Error requiring package ${packageName}: ${e.message}`);
+		}
 	}
 
 	return overrideVersion;

package/lib/css-processors/shared.mjs

@@ -18,29 +18,30 @@ const writeFileIfChanged = async (fileName, content) => {
     const oldContent = await readOldContent(fileName);
     if (content !== oldContent) {
         if (!oldContent) {
-            await mkdir(path.dirname(fileName), {recursive: true});
+            await mkdir(path.dirname(fileName), { recursive: true });
         }
         return writeFile(fileName, content);
     }
 }
 
 const DEFAULT_THEME = assets.themes.default;
+const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
 
 const getDefaultThemeCode = packageName => {
-	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+    return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
 import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
-registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme);
+registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, "${DEFAULT_THEME}", async () => defaultTheme${CSS_VARIABLES_TARGET ? ', "host"' : ''});
 `;
 };
 
 const getFileContent = (packageName, css, includeDefaultTheme) => {
-	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
-	return `${defaultTheme}export default ${css.trim()}`
+    const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+    return `${defaultTheme}export default ${css.trim()}`
 }
 
 
-export { writeFileIfChanged, getFileContent}
+export { writeFileIfChanged, getFileContent }

package/lib/generate-js-imports/illustrations.js

@@ -75,7 +75,9 @@ const generateIllustrations = async (argv) => {
 	await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
 	await fs.writeFile(normalizedOutputFile, contentDynamic);
 
-	console.log("Generated illustration imports.");
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log("Generated illustration imports.");
+	}
 };
 
 if (require.main === module) {

package/lib/generate-json-imports/i18n.js

@@ -80,7 +80,9 @@ const generate = async (argv) => {
 		fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
 		fs.writeFile(outputFileDynamicImportJSONImport, contentDynamicImportJSONAttr),
 	]).then(() => {
-		console.log("Generated i18n JSON imports.");
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log("Generated i18n JSON imports.");
+		}
 	});
 }
 

package/lib/generate-json-imports/themes.js

@@ -5,6 +5,8 @@ const assets = require("../../assets-meta.js");
 const isTypeScript = process.env.UI5_TS;
 const ext = isTypeScript ? 'ts' : 'js';
 
+const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
+
 const generate = async (argv) => {
 	const inputFolder = path.normalize(argv[2]);
 	const outputFileDynamic = path.normalize(`${argv[3]}/Themes.${ext}`);
@@ -49,7 +51,7 @@ const loadAndCheck = async (themeName) => {
 };
 
 ${availableThemesArray}
-  .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck));
+  .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck${CSS_VARIABLES_TARGET ? ', "host"' : ''}));
 `;
 	}
 
@@ -60,7 +62,9 @@ ${availableThemesArray}
 		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
 	]).
 		then(() => {
-			console.log("Generated themes JSON imports.");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Generated themes JSON imports.");
+			}
 		})
 };
 

package/lib/i18n/defaults.js

@@ -78,7 +78,9 @@ export {${textKeys.join()}};`;
 	await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
 
 
-	console.log("i18n default file generated.")
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log("i18n default file generated.");
+	}
 };
 
 if (require.main === module) {

package/lib/i18n/toJSON.js

@@ -58,7 +58,9 @@ const generate = async (agrv) => {
 	const files = await globby(messagesBundles.replace(/\\/g, "/"));
 	return Promise.all(files.map(file => convertToJSON(file, messagesJSONDist)))
 		.then(() => {
-			console.log("Message bundle JSON files generated.");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Message bundle JSON files generated.");
+			}
 		});
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.19.0-rc.2",
+  "version": "2.19.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -82,5 +82,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "4407982a1dd6a3799413303d1157fc5e9fb96260"
+  "gitHead": "a926cd9d74fdc66b22609eb80b26015ba5391cea"
 }