@ui5/webcomponents-tools 2.27.2 → 2.28.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.27.2](https://github.com/UI5/webcomponents/compare/v2.27.1...v2.27.2) (2026-09-25)
+# [2.28.0](https://github.com/UI5/webcomponents/compare/v2.28.0-rc.0...v2.28.0) (2026-10-21)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools
 
@@ -11,7 +11,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [2.27.1](https://github.com/UI5/webcomponents/compare/v2.27.0...v2.27.1) (2026-09-23)
+# [2.28.0-rc.0](https://github.com/UI5/webcomponents/compare/v2.27.1-rc.0...v2.28.0-rc.0) (2026-10-15)
+
+
+### Bug Fixes
+
+* **tools:** enable CEM generation for tsx files ([#14114](https://github.com/UI5/webcomponents/issues/14114)) ([cc73f73](https://github.com/UI5/webcomponents/commit/cc73f736d010fb8494e5ee56f31749e3a9baedc7)), closes [#11145](https://github.com/UI5/webcomponents/issues/11145)
+* **tools:** use correct CSS_VARIABLES_TARGET in auto theme selector ([#14136](https://github.com/UI5/webcomponents/issues/14136)) ([06e6369](https://github.com/UI5/webcomponents/commit/06e6369d1f2fa42b97c02b64a37167d3db42f881))
+
+
+### Features
+
+* **base:** allow components to provide their own slot accessor ([#14128](https://github.com/UI5/webcomponents/issues/14128)) ([2196121](https://github.com/UI5/webcomponents/commit/2196121936bfef06989b4b04be7d07ece415ea9c))
+
+
+
+
+
+## [2.27.1-rc.0](https://github.com/UI5/webcomponents/compare/v2.27.0...v2.27.1-rc.0) (2026-09-25)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools
 

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

@@ -6,6 +6,7 @@ import {
 	getDeprecatedStatus,
 	getExperimentalStatus,
 	getSinceStatus,
+	getSubcomponentStatus,
 	getPrivacyStatus,
 	getReference,
 	validateJSDocComment,
@@ -105,9 +106,10 @@ function processClass(ts, classNode, moduleDoc) {
 	currClass.kind = "class";
 	currClass.deprecated = getDeprecatedStatus(classParsedJsDoc);
 	currClass._ui5experimental = getExperimentalStatus(classParsedJsDoc);
-	currClass._ui5since = getSinceStatus(classParsedJsDoc);
+	currClass._ui5since = getSinceStatus(classParsedJsDoc, moduleDoc.path);
 	currClass._ui5privacy = getPrivacyStatus(classParsedJsDoc);
 	currClass._ui5abstract = hasTag(classParsedJsDoc, "abstract") ? true : undefined;
+	currClass._ui5subcomponents = getSubcomponentStatus(classParsedJsDoc);
 	currClass.description = normalizeDescription(classParsedJsDoc.description || findTag(classParsedJsDoc, "class")?.description);
 	currClass._ui5implements = findAllTags(classParsedJsDoc, "implements")
 		.map(tag => {
@@ -210,7 +212,7 @@ function processClass(ts, classNode, moduleDoc) {
 
 		const memberParsedJsDoc = parse(classNodeMemberJSdoc?.getText())[0];
 
-		member._ui5since = getSinceStatus(memberParsedJsDoc);
+		member._ui5since = getSinceStatus(memberParsedJsDoc, moduleDoc.path);
 		member.deprecated === "true" && (member.deprecated = true)
 
 		// Slots with accessors are treated like fields by the tool, so we have to convert them into slots.
@@ -248,6 +250,7 @@ function processClass(ts, classNode, moduleDoc) {
 				delete member.type;
 				delete member.privacy;
 				delete slot.kind;
+				delete slot.readonly;
 
 				currClass.slots.push(slot);
 				i--;
@@ -386,7 +389,7 @@ function processInterface(ts, interfaceNode, moduleDoc) {
 		description: normalizeDescription(interfaceParsedJsDoc?.description),
 		_ui5experimental: getExperimentalStatus(interfaceParsedJsDoc),
 		_ui5privacy: getPrivacyStatus(interfaceParsedJsDoc),
-		_ui5since: getSinceStatus(interfaceParsedJsDoc),
+		_ui5since: getSinceStatus(interfaceParsedJsDoc, moduleDoc.path),
 		deprecated: getDeprecatedStatus(interfaceParsedJsDoc),
 	});
 }
@@ -407,7 +410,7 @@ function processEnum(ts, enumNode, moduleDoc) {
 		description: normalizeDescription(enumJSdoc?.comment),
 		_ui5experimental: getExperimentalStatus(enumParsedJsDoc),
 		_ui5privacy: getPrivacyStatus(enumParsedJsDoc),
-		_ui5since: getSinceStatus(enumParsedJsDoc),
+		_ui5since: getSinceStatus(enumParsedJsDoc, moduleDoc.path),
 		deprecated: getDeprecatedStatus(enumParsedJsDoc) || undefined,
 		members: (enumNode?.members || []).map(member => {
 			const memberJSdoc = member?.jsDoc?.[0];
@@ -422,7 +425,7 @@ function processEnum(ts, enumNode, moduleDoc) {
 				kind: "field",
 				static: true,
 				privacy: getPrivacyStatus(memberParsedJsDoc),
-				_ui5since: getSinceStatus(memberParsedJsDoc),
+				_ui5since: getSinceStatus(memberParsedJsDoc, moduleDoc.path),
 				description: memberJSdoc?.comment,
 				default: member.initializer?.text,
 				deprecated: getDeprecatedStatus(memberParsedJsDoc),
@@ -447,7 +450,7 @@ const processPublicAPI = object => {
 		if (((key === "privacy" && object[key] !== "public") || (key === "_ui5privacy" && object[key] !== "public")) && !object.customElement) {
 			return true;
 		} else if (typeof object[key] === "object") {
-			if (key === "cssParts" || key === "cssStates" || key === "attributes" || key === "_ui5implements") {
+			if (key === "cssParts" || key === "cssStates" || key === "attributes" || key === "_ui5implements" || key === "_ui5subcomponents") {
 				continue;
 			}
 
@@ -472,7 +475,7 @@ let typeChecker;
 let typeProgram;
 
 export default {
-	globs: ["src/!(*generated)/*.ts", "src/!(*bundle)*.ts"],
+	globs: ["src/!(*generated)/*.{ts,tsx}", "src/!(*bundle)*.{ts,tsx}"],
 	outdir: 'dist',
 	overrideModuleCreation: ({ ts, globs }) => {
 		typeProgram = ts.createProgram(globs, {
@@ -518,7 +521,7 @@ export default {
 				}
 			},
 			moduleLinkPhase({ moduleDoc }) {
-				moduleDoc.path = moduleDoc.path?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
+				moduleDoc.path = moduleDoc.path?.replace(/^src/, "dist").replace(/\.tsx?$/, ".js");
 
 				moduleDoc.exports = moduleDoc.exports.
 					filter(e => !(e.kind === "custom-element-definition" && !moduleDoc.declarations?.find(d => d.name === e.name)?.tagName))
@@ -527,7 +530,7 @@ export default {
 					const classNode = moduleDoc.declarations.find(c => c.name === e.declaration.name);
 
 					if (e.declaration && e.declaration.module) {
-						e.declaration.module = e.declaration.module.replace(/^src/, "dist").replace(/\.ts$/, ".js");
+						e.declaration.module = e.declaration.module.replace(/^src/, "dist").replace(/\.tsx?$/, ".js");
 					}
 
 					if (classNode?.customElement && classNode.tagName && e.kind !== "custom-element-definition") {
@@ -591,6 +594,25 @@ export default {
 					})
 				});
 
+				const publicCustomElements = new Set(
+					customElementsManifest.modules.flatMap(m => m.declarations)
+						.filter(d => d.customElement && d.tagName && d._ui5privacy === "public")
+						.map(d => d.name)
+				);
+
+				customElementsManifest.modules.forEach(moduleDoc => {
+					moduleDoc.declarations.forEach(declaration => {
+						declaration._ui5subcomponents?.forEach(name => {
+							if (!publicCustomElements.has(name)) {
+								logDocumentationError(
+									moduleDoc.path?.replace(/^dist/, "src").replace(/\.js$/, ".ts"),
+									`@ui5subcomponent '${name}' is not a public custom element with a tag name in this package.`
+								);
+							}
+						});
+					});
+				});
+
 				if (devMode) {
 					displayDocumentationErrors();
 				}

package/lib/cem/schema-internal.json

@@ -523,6 +523,13 @@
         "_ui5abstract": {
           "type": "boolean"
         },
+        "_ui5subcomponents": {
+          "description": "Names of sub-components that belong to this component's documentation group",
+          "items": {
+            "type": "string"
+          },
+          "type": "array"
+        },
         "_ui5privacy": {
           "$ref": "#/definitions/Privacy"
         },

package/lib/cem/types-internal.d.ts

@@ -224,6 +224,10 @@ export interface CustomElementDeclaration
    * Marks when the field was introduced
    */
   _ui5since?: string
+  /**
+   * Names of sub-components that belong to this component's documentation group
+   */
+  _ui5subcomponents?: string[]
 }
 
 /**

package/lib/cem/utils.mjs

@@ -67,13 +67,27 @@ const getTypeRefs = (ts, node, member) => {
     return typeRefs?.length ? typeRefs : undefined;
 };
 
-const getSinceStatus = (jsdocComment) => {
+const sinceVersionRegExp = /^\d+\.\d+\.\d+$/;
+
+const getSinceStatus = (jsdocComment, modulePath) => {
     const sinceTag = findTag(jsdocComment, "since");
-    return sinceTag
-        ? sinceTag.description
-            ? `${sinceTag.name} ${sinceTag.description}`
-            : sinceTag.name
-        : undefined;
+    if (!sinceTag) return undefined;
+
+    const value = sinceTag.description
+        ? `${sinceTag.name} ${sinceTag.description}`
+        : sinceTag.name;
+
+    if (modulePath && !sinceVersionRegExp.test(value)) {
+        logDocumentationError(modulePath, `@since value "${value}" must follow the pattern number.number.number (e.g. 2.0.0)`);
+    }
+
+    return value;
+};
+
+const getSubcomponentStatus = (jsdocComment) => {
+    const tags = findAllTags(jsdocComment, "ui5subcomponent");
+    if (!tags.length) return undefined;
+    return tags.map(tag => tag.name).filter(Boolean);
 };
 
 const getPrivacyStatus = (jsdocComment) => {
@@ -148,7 +162,7 @@ const findImportPath = (ts, sourceFile, typeName, modulePath) => {
 
     if (isLocalDeclared) {
         return (
-            modulePath?.replace("src", "dist")?.replace(".ts", ".js") || undefined
+            modulePath?.replace("src", "dist")?.replace(/\.tsx?$/, ".js") || undefined
         );
     } else {
         const importStatements = sourceFile.statements?.filter(
@@ -167,7 +181,7 @@ const findImportPath = (ts, sourceFile, typeName, modulePath) => {
         if (currentModuleSpecifier?.text?.startsWith(".")) {
             return (
                 path.join(path.dirname(modulePath), currentModuleSpecifier.text)
-                    ?.replace("src", "dist")?.replace(".ts", ".js") || undefined
+                    ?.replace("src", "dist")?.replace(/\.tsx?$/, ".js") || undefined
             );
         } else {
             let packageName = currentModuleSpecifier?.text?.replace(packageRegex, "") || undefined;
@@ -240,7 +254,7 @@ const allowedTags = {
     event: [...commonTags, "param", "native", "allowPreventDefault"],
     eventParam: [...commonTags],
     method: [...commonTags, "param", "returns", "override"],
-    class: [...commonTags, "constructor", "class", "abstract", "experimental", "implements", "extends", "slot", "csspart", "cssstate", "cssState"],
+    class: [...commonTags, "constructor", "class", "abstract", "experimental", "implements", "extends", "slot", "csspart", "cssstate", "cssState", "ui5subcomponent"],
     enum: [...commonTags, "experimental",],
     enumMember: [...commonTags, "experimental",],
     interface: [...commonTags, "experimental",],
@@ -335,6 +349,8 @@ const validateJSDocTag = (tag) => {
             return !tag.type && tag.name && tag.description;
         case "since":
             return !tag.type && tag.name;
+        case "ui5subcomponent":
+            return !tag.type && tag.name && !tag.description;
         case "returns":
             return !tag.type && tag.name;
         case "default":
@@ -411,6 +427,7 @@ const formatSlotTypes = (typeText) => {
 export {
     getPrivacyStatus,
     getSinceStatus,
+    getSubcomponentStatus,
     getDeprecatedStatus,
     getExperimentalStatus,
     getType,

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

@@ -5,7 +5,6 @@ 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 { mergeLightDark } from "./merge-light-dark.mjs";
@@ -75,8 +74,7 @@ const generate = async (argv) => {
     const processComponentPackageFile = async (f) => {
         if (CSS_VARIABLES_TARGET) {
             const result = await postcss([
-                combineDuplicatedSelectors,
-                postcssPlugin
+                combineDuplicatedSelectors
             ]).process(f.text, { from: undefined });
 
             return { css: result.css };
@@ -92,8 +90,8 @@ const generate = async (argv) => {
 
     /**
      * Generate auto theme CSS by merging light and dark theme outputs.
-     * For the theming package (:root), adds color-scheme and toggle variables.
-     * For component packages (:host), just merges the variables.
+     * For the theming package adds color-scheme.
+     * For component packages merges the variables.
      */
     const generateAutoThemes = async (processedCSS) => {
         for (const { light, dark, auto } of AUTO_THEME_PAIRS) {
@@ -104,13 +102,12 @@ const generate = async (argv) => {
 
                 const darkPath = lightPath.replace(lightPattern, (match) => match.replace(light, dark));
                 const darkCSS = processedCSS.get(darkPath);
-                if (!darkCSS) continue;
+                if (darkCSS === undefined) continue;
 
-                const selector = isThemingPackage(lightPath) ? ":root" : ":host";
-                let autoCSS = mergeLightDark(lightCSS, darkCSS, selector);
+                let autoCSS = mergeLightDark(lightCSS, darkCSS);
 
                 // For the theming package, add color-scheme and toggle setup
-                if (selector === ":root") {
+                if (isThemingPackage(lightPath)) {
                     autoCSS = addAutoThemeSetup(autoCSS);
                 }
 
@@ -163,51 +160,17 @@ const generate = async (argv) => {
         await esbuild.build(config);
     }
 }
-
 /**
- * Adds auto theme setup CSS: color-scheme declaration and
- * light/dark toggle variables with @media switching.
- *
- * In light mode (default):
- *   --_ui5-light-scheme is guaranteed-invalid → var() fallbacks resolve to light values
- *   --_ui5-dark-scheme is valid empty → var() fallbacks are NOT used
- *
- * In dark mode (@media prefers-color-scheme: dark):
- *   --_ui5-light-scheme is valid empty → var() fallbacks are NOT used
- *   --_ui5-dark-scheme is guaranteed-invalid → var() fallbacks resolve to dark values
- *
+ * Adds auto theme setup CSS: color-scheme declaration.
  * @param {string} mergedCSS - The merged :root CSS from mergeLightDark()
  * @returns {string} CSS with toggle setup and @media rule appended
  */
 const addAutoThemeSetup = (mergedCSS) => {
     const root = postcss.parse(mergedCSS);
 
-    // Add color-scheme and toggle defaults to the :root rule
     root.walkRules(":root", rule => {
-        rule.prepend(
-            postcss.decl({ prop: "--_ui5-dark-scheme", value: " " }),
-        );
-        rule.prepend(
-            postcss.decl({ prop: "--_ui5-light-scheme", value: "var(--_ui5-f2d95f8)" }),
-        );
-        rule.prepend(
-            postcss.decl({ prop: "color-scheme", value: "light dark" }),
-        );
-    });
-
-    // Add @media rule for dark mode - flips the toggles
-    const mediaRule = postcss.atRule({
-        name: "media",
-        params: "(prefers-color-scheme: dark)",
+        rule.prepend(postcss.decl({ prop: "color-scheme", value: "light dark" }));
     });
-    const darkRoot = postcss.rule({ selector: ":root" });
-    darkRoot.append(
-        postcss.decl({ prop: "--_ui5-light-scheme", value: " " }),
-        postcss.decl({ prop: "--_ui5-dark-scheme", value: "var(--_ui5-f2d95f8)" }),
-        postcss.decl({ prop: "color-scheme", value: "dark" }),
-    );
-    mediaRule.append(darkRoot);
-    root.append(mediaRule);
 
     return root.toString();
 };

package/lib/css-processors/merge-light-dark.mjs

@@ -1,91 +1,156 @@
 import postcss from "postcss";
 
 /**
- * Merges two CSS theme files (light and dark) into a single file using
- * CSS light-dark() for color values and space toggles for non-color values.
+ * Merges two CSS theme files (light and dark) into a single auto-theme file.
  *
- * The space toggle pattern uses --_ui5-dark-scheme / --_ui5-light-scheme,
- * following the same approach as the compact/cozy density toggles.
+ * Walks the entire CSS tree of both files without targeting a specific selector.
+ * Every rule found (under any at-rule context) is merged by (atRuleContext, selector):
+ *   - identical values  → base selector block
+ *   - differing colors  → light-dark() in base selector block
+ *   - differing other   → split into @media (prefers-color-scheme: light/dark) blocks
  *
- * @param {string} lightCSS - The light theme CSS string
- * @param {string} darkCSS - The dark theme CSS string
- * @param {string} selector - The selector to match (":root" for theming package, ":host" for component packages)
- * @returns {string} Merged CSS string with light-dark() and space toggle values
+ * @param {string} lightCSS
+ * @param {string} darkCSS
+ * @returns {string} Merged CSS string
  */
-const mergeLightDark = (lightCSS, darkCSS, selector = ":root") => {
-	const lightRoot = postcss.parse(lightCSS);
-	const darkRoot = postcss.parse(darkCSS);
-
+const mergeLightDark = (lightCSS, darkCSS) => {
 	// Extract all custom property declarations from each theme
-	const lightVars = extractVars(lightRoot, selector);
-	const darkVars = extractVars(darkRoot, selector);
+	const lightGroups = extractVarGroups(postcss.parse(lightCSS));
+	const darkGroups = extractVarGroups(postcss.parse(darkCSS));
+
+	const allContexts = new Set([...lightGroups.keys(), ...darkGroups.keys()]);
+	const root = postcss.root();
+
+	for (const context of allContexts) {
+		const lightSelectors = lightGroups.get(context) ?? new Map();
+		const darkSelectors = darkGroups.get(context) ?? new Map();
+
+		const allSelectors = new Set([...lightSelectors.keys(), ...darkSelectors.keys()]);
+
+		const sharedNodes = [];
+		const lightNodes = [];
+		const darkNodes = [];
+
+		for (const selector of allSelectors) {
+			const lightVars = lightSelectors.get(selector) ?? new Map();
+			const darkVars = darkSelectors.get(selector) ?? new Map();
 
-	// Build merged declarations
-	const allProps = new Set([...lightVars.keys(), ...darkVars.keys()]);
-	const mergedRule = postcss.rule({ selector });
+			const allProps = new Set([...lightVars.keys(), ...darkVars.keys()]);
 
-	for (const prop of allProps) {
-		const lightVal = lightVars.get(prop);
-		const darkVal = darkVars.get(prop);
+			const sharedRule = postcss.rule({ selector });
+			const lightRule = postcss.rule({ selector });
+			const darkRule = postcss.rule({ selector });
 
-		if (prop.startsWith("--sapThemeMetaData")) {
-			// Keep light version only for metadata
-			if (lightVal !== undefined) {
-				mergedRule.append(postcss.decl({ prop, value: lightVal }));
+			for (const prop of allProps) {
+				const lightVal = lightVars.get(prop);
+				const darkVal = darkVars.get(prop);
+
+				if (prop.startsWith("--sapThemeMetaData")) {
+					if (lightVal !== undefined) {
+						sharedRule.append(postcss.decl({ prop, value: lightVal }));
+					}
+					continue;
+				}
+
+				if (lightVal !== undefined && darkVal !== undefined) {
+					if (lightVal === darkVal) {
+						// Identical values - output once
+						sharedRule.append(postcss.decl({ prop, value: lightVal }));
+					} else if (isColorValue(lightVal) && isColorValue(darkVal)) {
+						// Different color values - use light-dark()
+						sharedRule.append(postcss.decl({ prop, value: `light-dark(${lightVal}, ${darkVal})` }));
+					} else {
+						// Different non-color values - use space toggle
+						lightRule.append(postcss.decl({ prop, value: lightVal }));
+						darkRule.append(postcss.decl({ prop, value: darkVal }));
+					}
+				} else if (lightVal !== undefined) {
+					// Only in light theme - use space toggle with guaranteed-invalid for dark
+					lightRule.append(postcss.decl({ prop, value: lightVal }));
+				} else {
+					// Only in dark theme - use space toggle with guaranteed-invalid for light
+					darkRule.append(postcss.decl({ prop, value: darkVal }));
+				}
 			}
-			continue;
+
+			if (sharedRule.nodes.length > 0) sharedNodes.push(sharedRule);
+			if (lightRule.nodes.length > 0) lightNodes.push(lightRule);
+			if (darkRule.nodes.length > 0) darkNodes.push(darkRule);
 		}
 
-		if (lightVal !== undefined && darkVal !== undefined) {
-			if (lightVal === darkVal) {
-				// Identical values - output once
-				mergedRule.append(postcss.decl({ prop, value: lightVal }));
-			} else if (isColorValue(lightVal) && isColorValue(darkVal)) {
-				// Different color values - use light-dark()
-				mergedRule.append(postcss.decl({ prop, value: `light-dark(${lightVal}, ${darkVal})` }));
+		const appendGroup = (nodes, mediaParams) => {
+			if (nodes.length === 0) return;
+			const wrapped = context ? wrapInAtRule(context, nodes) : nodes;
+			if (mediaParams) {
+				const media = postcss.atRule({ name: "media", params: mediaParams });
+				if (Array.isArray(wrapped)) {
+					wrapped.forEach(n => media.append(n));
+				} else {
+					media.append(wrapped);
+				}
+				root.append(media);
 			} else {
-				// Different non-color values - use space toggle
-				mergedRule.append(postcss.decl({
-					prop,
-					value: `var(--_ui5-light-scheme, ${lightVal}) var(--_ui5-dark-scheme, ${darkVal})`,
-				}));
+				if (Array.isArray(wrapped)) {
+					wrapped.forEach(n => root.append(n));
+				} else {
+					root.append(wrapped);
+				}
 			}
-		} else if (lightVal !== undefined) {
-			// Only in light theme - use space toggle with guaranteed-invalid for dark
-			mergedRule.append(postcss.decl({
-				prop,
-				value: `var(--_ui5-light-scheme, ${lightVal}) var(--_ui5-dark-scheme, var(--_ui5-f2d95f8))`,
-			}));
-		} else {
-			// Only in dark theme - use space toggle with guaranteed-invalid for light
-			mergedRule.append(postcss.decl({
-				prop,
-				value: `var(--_ui5-dark-scheme, ${darkVal}) var(--_ui5-light-scheme, var(--_ui5-f2d95f8))`,
-			}));
-		}
+		};
+
+		appendGroup(sharedNodes, null);
+		appendGroup(lightNodes, "(prefers-color-scheme: light)");
+		appendGroup(darkNodes, "(prefers-color-scheme: dark)");
 	}
 
-	return mergedRule.toString();
+	return root.toString();
 };
 
 /**
- * Extract custom property declarations from a parsed CSS root for a given selector.
- * @param {postcss.Root} root
- * @param {string} selector
- * @returns {Map<string, string>}
+ * Wraps an array of rules inside a clone of an at-rule identified by its signature.
+ * The signature is "{name} {params}", e.g. "container style(--foo: bar)".
  */
-const extractVars = (root, selector) => {
-	const vars = new Map();
-	root.walkRules(rule => {
-		if (rule.selector === selector) {
-			rule.walkDecls(decl => {
-				if (decl.prop.startsWith("--")) {
-					vars.set(decl.prop, decl.value);
-				}
-			});
-		}
+const wrapInAtRule = (signature, rules) => {
+	const spaceIdx = signature.indexOf(" ");
+	const name = signature.slice(0, spaceIdx);
+	const params = signature.slice(spaceIdx + 1);
+	const atRule = postcss.atRule({ name, params });
+	rules.forEach(r => atRule.append(r));
+	return atRule;
+};
+
+/**
+ * Extract custom property declarations grouped by (atRuleContext, selector).
+ *
+ * Returns: Map<atRuleContext, Map<selector, Map<prop, value>>>
+ *   atRuleContext — "" for top-level rules, "{name} {params}" for rules inside an at-rule
+ */
+const extractVarGroups = (root) => {
+	const groups = new Map();
+
+	const addVar = (context, selector, prop, value) => {
+		if (!groups.has(context)) groups.set(context, new Map());
+		const bySelector = groups.get(context);
+		if (!bySelector.has(selector)) bySelector.set(selector, new Map());
+		bySelector.get(selector).set(prop, value);
+	};
+
+	root.walk(node => {
+		if (node.type !== "rule") return;
+
+		const parent = node.parent;
+		const context = (parent && parent.type === "atrule")
+			? `${parent.name} ${parent.params}`
+			: "";
+
+		node.walkDecls(decl => {
+			if (decl.prop.startsWith("--")) {
+				addVar(context, node.selector, decl.prop, decl.value);
+			}
+		});
 	});
-	return vars;
+
+	return groups;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.27.2",
+  "version": "2.28.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": "5529f5dc2aa697c9152ca73f5b0c0211bd0b557e"
+  "gitHead": "8fdaadeb2c7cbf0eb3a42e6dbdbdca1f27bb6797"
 }

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

@@ -1,153 +0,0 @@
-
-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;