igniteui-theming 25.2.0 → 26.0.0

package/dist/json/components/themes.json

@@ -2091,8 +2091,12 @@
         "description": "The background color of the chat header."
       },
       {
-        "name": "message-background",
-        "description": "The background color of message bubbles."
+        "name": "sent-message-background",
+        "description": "The background color for sent messages."
+      },
+      {
+        "name": "received-message-background",
+        "description": "The background color for received messages."
       }
     ],
     "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
@@ -2105,7 +2109,7 @@
       {
         "name": "header-background",
         "type": "Color",
-        "description": "The background color of the chat header. PRIMARY - derives header-color."
+        "description": "The background color of the chat header."
       },
       {
         "name": "header-color",
@@ -2118,19 +2122,34 @@
         "description": "The color used for the chat header border."
       },
       {
-        "name": "message-background",
+        "name": "sent-message-background",
         "type": "Color",
-        "description": "The background color of the sent message bubble. PRIMARY - derives message-color, message-actions-color."
+        "description": "The background color for sent messages."
       },
       {
-        "name": "message-color",
+        "name": "sent-message-color",
+        "type": "Color",
+        "description": "The text color of the chat messages. Auto-derived from sent-message-background."
+      },
+      {
+        "name": "received-message-background",
         "type": "Color",
-        "description": "The text color of the chat messages. Auto-derived from message-background."
+        "description": "The background color for received messages."
+      },
+      {
+        "name": "received-message-color",
+        "type": "Color",
+        "description": "The text color for received messages. Auto-derived from received-message-background."
       },
       {
         "name": "message-actions-color",
         "type": "Color",
-        "description": "The icon color of the chat message actions. Auto-derived from message-color."
+        "description": "The icon color of the chat received message actions. Auto-derived from received-message-color."
+      },
+      {
+        "name": "message-border-radius",
+        "type": "Number",
+        "description": "The border radius of the chat messages."
       },
       {
         "name": "file-background",
@@ -3201,47 +3220,38 @@
     "description": "Grid Theme",
     "primaryTokens": [
       {
-        "name": "header-background",
-        "description": "The table header background color."
-      },
-      {
-        "name": "content-background",
-        "description": "The table body background color."
-      },
-      {
-        "name": "ghost-header-background",
-        "description": "The dragged header background color."
+        "name": "background",
+        "description": "Controls the overall background color of the grid, including header and content."
       },
       {
-        "name": "group-row-background",
-        "description": "The grid group row background color."
+        "name": "foreground",
+        "description": "Controls the overall foreground color of the grid, including text and icons."
       },
       {
-        "name": "grouparea-background",
-        "description": "The grid group area background color."
+        "name": "accent-color",
+        "description": "Controls the accent color used for interactive elements in the grid."
       }
     ],
-    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
     "tokens": [
       {
         "name": "background",
         "type": "Color",
-        "description": "The background color of the grid. PRIMARY"
+        "description": "The background color of the grid."
       },
       {
         "name": "foreground",
         "type": "Color",
-        "description": "The foreground color of the grid. PRIMARY"
+        "description": "The foreground color of the grid."
       },
       {
         "name": "accent-color",
         "type": "Color",
-        "description": "The accent color used for interactive elements in the grid. PRIMARY"
+        "description": "The accent color used for interactive elements in the grid."
       },
       {
         "name": "header-background",
         "type": "Color",
-        "description": "The table header background color. PRIMARY - derives header-text-color, header-border-color, and many more."
+        "description": "The table header background color - derives header-text-color, header-border-color, and many more."
       },
       {
         "name": "header-text-color",
@@ -3286,7 +3296,7 @@
       {
         "name": "content-background",
         "type": "Color",
-        "description": "The table body background color. PRIMARY - derives content-text-color, row backgrounds, cell backgrounds, borders."
+        "description": "The table body background color - derives content-text-color, row backgrounds, cell backgrounds, borders."
       },
       {
         "name": "content-text-color",
@@ -3306,7 +3316,7 @@
       {
         "name": "ghost-header-background",
         "type": "Color",
-        "description": "The dragged header background color. PRIMARY - derives ghost-header-text-color, ghost-header-icon-color."
+        "description": "The dragged header background color - derives ghost-header-text-color, ghost-header-icon-color."
       },
       {
         "name": "row-odd-background",
@@ -3456,7 +3466,7 @@
       {
         "name": "grouparea-background",
         "type": "Color",
-        "description": "The grid group area background color. PRIMARY - derives grouparea-color, drop-area-background. Auto-derived from header-background."
+        "description": "The grid group area background color - derives grouparea-color, drop-area-background. Auto-derived from header-background."
       },
       {
         "name": "grouparea-color",
@@ -3466,7 +3476,7 @@
       {
         "name": "group-row-background",
         "type": "Color",
-        "description": "The grid group row background color. PRIMARY - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background."
+        "description": "The grid group row background color - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background."
       },
       {
         "name": "group-row-selected-background",
@@ -5309,7 +5319,7 @@
     "primaryTokens": [],
     "tokens": [
       {
-        "name": "base-circle-color",
+        "name": "track-color",
         "type": "Color",
         "description": "The base circle fill color."
       },

package/dist/mcp/generators/css.js

@@ -114,26 +114,27 @@ function formatCssOutput(css, description) {
 * // result.css contains: igc-button { --ig-button-background: var(--ig-button-background, #1976d2); ... }
 */
 async function generateComponentThemeCss(options) {
-	const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
+	const { COMPONENT_METADATA, getComponentTheme, getThemingSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
 	const { toVariableName } = await import("../utils/sass.js");
 	const theme = getComponentTheme(options.component);
 	if (!theme) throw new Error(`Unknown component: ${options.component}`);
 	const designSystem = options.designSystem ?? "material";
 	const variant = options.variant ?? "light";
 	const themeFn = theme.themeFunctionName;
-	const themeName = options.name ? `$${toVariableName(options.name)}` : `$custom-${options.component}-theme`;
+	const themeComponentName = COMPONENT_METADATA[options.component]?.childOf ?? options.component;
+	const themeName = options.name ? `$${toVariableName(options.name)}` : `$custom-${themeComponentName}-theme`;
 	const tokenArgs = [`$schema: ${SCHEMA_PRESETS[variant][designSystem]}`];
 	for (const [tokenName, value] of Object.entries(options.tokens)) {
 		const stringValue = typeof value === "number" ? String(value) : value;
 		tokenArgs.push(`$${tokenName}: ${stringValue}`);
 	}
-	const defaultSelectors = getComponentSelector(options.component, options.platform);
+	const defaultSelectors = getThemingSelector(options.component, options.platform);
 	const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
 	const sassCode = `
 @use 'igniteui-theming/sass/themes' as *;
 @use 'igniteui-theming/sass/themes/schemas' as *;
 
-// Custom ${options.component} theme
+// Custom ${themeComponentName} theme
 ${themeName}: ${themeFn}(
   ${tokenArgs.join(",\n  ")}
 );
@@ -150,7 +151,7 @@ ${selector} {
 				importers,
 				style: "expanded"
 			})).css,
-			description: `Generated CSS custom properties for ${options.component} component with ${Object.keys(options.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`
+			description: `Generated CSS custom properties for ${themeComponentName} component with ${Object.keys(options.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`
 		};
 	} catch (error) {
 		const message = error instanceof Error ? error.message : String(error);

package/dist/mcp/generators/sass.js

@@ -1,4 +1,4 @@
-import { getComponentSelector } from "../knowledge/component-metadata.js";
+import { COMPONENT_METADATA, getThemingSelector } from "../knowledge/component-metadata.js";
 import { getComponentTheme } from "../knowledge/component-themes.js";
 import { SCHEMAS } from "../knowledge/platforms/common.js";
 import { generateWebComponentsThemeSass } from "../knowledge/platforms/webcomponents.js";
@@ -236,19 +236,20 @@ function generateComponentTheme(input) {
 	const designSystem = input.designSystem ?? "material";
 	const variant = input.variant ?? "light";
 	const themeFn = theme.themeFunctionName;
-	const themeName = input.name ? `$${toVariableName(input.name)}` : `$custom-${input.component}-theme`;
+	const themeComponentName = COMPONENT_METADATA[input.component]?.childOf ?? input.component;
+	const themeName = input.name ? `$${toVariableName(input.name)}` : `$custom-${themeComponentName}-theme`;
 	const tokenArgs = [`$schema: ${SCHEMAS[variant][designSystem]}`];
 	for (const [tokenName, value] of Object.entries(input.tokens)) {
 		const stringValue = typeof value === "number" ? String(value) : value;
 		tokenArgs.push(`$${tokenName}: ${stringValue}`);
 	}
-	const defaultSelectors = getComponentSelector(input.component, input.platform);
+	const defaultSelectors = getThemingSelector(input.component, input.platform);
 	const selector = input.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : input.component);
 	const sections = [
-		generateHeader(`Custom ${input.component} theme`),
+		generateHeader(`Custom ${themeComponentName} theme`),
 		generateUseStatement(input.platform, input.licensed),
 		"",
-		`// Custom ${input.component} theme`,
+		`// Custom ${themeComponentName} theme`,
 		`${themeName}: ${themeFn}(`
 	];
 	if (tokenArgs.length > 0) sections.push(`  ${tokenArgs.join(",\n  ")}`);
@@ -260,7 +261,7 @@ function generateComponentTheme(input) {
 	sections.push("}");
 	return {
 		code: `${sections.join("\n")}\n`,
-		description: `Generated custom ${input.component} theme with ${Object.keys(input.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`,
+		description: `Generated custom ${themeComponentName} theme with ${Object.keys(input.tokens).length} token(s) using ${designSystem} design system (${variant} variant)`,
 		variables: [themeName]
 	};
 }

package/dist/mcp/index.js

@@ -33,7 +33,7 @@ import { z } from "zod";
 function createServer() {
 	const server = new McpServer({
 		name: "igniteui-theming",
-		version: "v25.2.0",
+		version: "v26.0.0",
 		description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
 	});
 	registerTools(server);

package/dist/mcp/knowledge/component-metadata.d.ts

@@ -20,13 +20,6 @@ export interface TokenDerivation {
     /** Optional transform arguments (e.g., shade amount for dynamic-shade) */
     args?: Record<string, string | number>;
 }
-/**
- * Platform-specific selector(s) for a named scope.
- */
-export interface ScopeSelectors {
-    angular?: string | string[];
-    webcomponents?: string | string[];
-}
 /**
  * Information about a compound component (one that contains multiple themeable sub-components).
  */
@@ -35,26 +28,25 @@ export interface CompoundInfo {
     description: string;
     /** Related theme functions needed for full customization */
     relatedThemes: string[];
-    /**
-     * Non-inline scopes (e.g., overlay). Inline scope is always derived from base selectors.
-     * Most compounds won't have this field.
-     */
-    additionalScopes?: Record<string, ScopeSelectors>;
-    /** Maps child theme name to a scope name per platform. Values: 'inline' or a key in additionalScopes */
-    childScopes?: Record<string, {
-        angular?: string;
-        webcomponents?: string;
-    }>;
     /** Token derivation rules. Key: 'childTheme.childToken' */
     tokenDerivations?: Record<string, TokenDerivation>;
     /** Free-form guidance for edge cases */
     guidance?: string;
+    /**
+     * When true, the framework internally generates themes for relatedThemes from the parent's primary tokens
+     * LLMs should NOT generate separate child themes for relatedThemes.
+     */
+    composed?: boolean;
 }
 export interface ComponentMetadata {
-    /** Platform-specific CSS selectors */
-    selectors: ComponentSelectors;
+    /** Platform-specific CSS selectors. Optional for `childOf` entries (theming scope comes from the parent). */
+    selectors?: ComponentSelectors;
     /** Optional theme alias for components that reuse another component theme */
     theme?: string;
+    /** Optional synonym aliases for search (synonyms only, not word-order permutations). */
+    aliases?: string[];
+    /** Parent component name for child sub-components. When set, theming scope uses the parent's selector instead of the child's own. Mutually exclusive with `compound`. */
+    childOf?: string;
     /** Present only for components with variant-specific themes (e.g., button) */
     variants?: string[];
     /** Present only for compound components */
@@ -72,6 +64,15 @@ export declare const VARIANT_THEME_NAMES: Set<string>;
  * @returns Array of selectors (normalized to always return array), empty array if component not found or not available on platform
  */
 export declare function getComponentSelector(componentName: string, platform: Platform): string[];
+/**
+ * Get the selector(s) to use for theming scope.
+ * For child components (with `childOf`), returns the parent's selectors.
+ * For all other components, returns the component's own selectors.
+ * @param componentName - The component name
+ * @param platform - The target platform
+ * @returns Array of selectors for theming scope, empty array if not found
+ */
+export declare function getThemingSelector(componentName: string, platform: Platform): string[];
 /**
  * Check if a component is available on a specific platform.
  * @param componentName - The component name

package/dist/mcp/knowledge/component-metadata.js

@@ -16,18 +16,16 @@ var GRID_COMPOUND_INFO = {
 		"flat-icon-button",
 		"outlined-icon-button"
 	],
-	guidance: `The grid is a complex compound component with many related themes. \
-For basic customization, focus on the grid theme itself and the most visible children: \
-input-group (filtering), outlined-button/icon-button (toolbar actions), checkbox (row selection), \
-and paginator. The grid-summary and grid-toolbar themes control their respective areas. \
-Detailed token derivation rules are not yet available for the grid — use the token names \
-and descriptions from get_component_design_tokens for each child to guide value selection.`
+	composed: true,
+	guidance: `The grid's theme will automatically derive the related themes for all related child components.`
 };
 var COMPONENT_METADATA = {
 	accordion: { selectors: {
 		angular: "igx-accordion",
 		webcomponents: "igc-accordion"
 	} },
+	"accordion-body": { childOf: "accordion" },
+	"accordion-header": { childOf: "accordion" },
 	"action-strip": { selectors: {
 		angular: "igx-action-strip",
 		webcomponents: null
@@ -133,6 +131,9 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
         For the icon theme, the color should also coordinate with the card background while maintaining sufficient contrast.`
 		}
 	},
+	"card-actions": { childOf: "card" },
+	"card-content": { childOf: "card" },
+	"card-header": { childOf: "card" },
 	carousel: { selectors: {
 		angular: "igx-carousel",
 		webcomponents: "igc-carousel"
@@ -180,6 +181,7 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 			angular: "igx-combo",
 			webcomponents: "igc-combo"
 		},
+		aliases: ["combobox", "autocomplete"],
 		compound: {
 			description: "The combo component combines input, drop-down, and checkbox components.",
 			relatedThemes: [
@@ -205,15 +207,6 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 					transform: "identity"
 				}
 			},
-			additionalScopes: {
-				overlay: { angular: ".igx-drop-down__list" },
-				input: { angular: "igx-combo, .igx-drop-down__list" }
-			},
-			childScopes: {
-				"drop-down": { angular: "overlay" },
-				checkbox: { angular: "overlay" },
-				"input-group": { angular: "input" }
-			},
 			guidance: "The combo's input-group, drop-down, and checkbox should share a consistent color scheme."
 		}
 	},
@@ -235,8 +228,6 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 					transform: "identity"
 				}
 			},
-			additionalScopes: { overlay: { angular: ".igx-drop-down__list" } },
-			childScopes: { "drop-down": { angular: "overlay" } },
 			guidance: "The simple-combo's input-group and drop-down should share a consistent color scheme."
 		}
 	},
@@ -252,12 +243,6 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 				"input-group",
 				"calendar"
 			],
-			additionalScopes: { overlay: { angular: ".igx-date-picker" } },
-			childScopes: {
-				calendar: { angular: "overlay" },
-				"flat-button": { angular: "overlay" },
-				"input-group": { angular: "inline" }
-			},
 			tokenDerivations: { "flat-button.foreground": {
 				from: "calendar.content-background",
 				transform: "adaptive-contrast"
@@ -277,12 +262,6 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 				"input-group",
 				"calendar"
 			],
-			additionalScopes: { overlay: { angular: ".igx-date-picker" } },
-			childScopes: {
-				calendar: { angular: "overlay" },
-				"flat-button": { angular: "overlay" },
-				"input-group": { angular: "inline" }
-			},
 			tokenDerivations: { "flat-button.foreground": {
 				from: "calendar.content-background",
 				transform: "adaptive-contrast"
@@ -304,15 +283,19 @@ If customizing the banner background, ensure flat-button foreground contrasts ag
 		},
 		theme: "input-group"
 	},
-	"date-time-input": { selectors: {
-		angular: null,
-		webcomponents: "igc-date-time-input"
-	} },
+	"date-time-input": {
+		selectors: {
+			angular: null,
+			webcomponents: "igc-date-time-input"
+		},
+		aliases: ["datetime input", "date time input"]
+	},
 	dialog: {
 		selectors: {
 			angular: ".igx-dialog",
 			webcomponents: "igc-dialog"
 		},
+		aliases: ["modal", "popup"],
 		compound: {
 			description: "The dialog component uses flat-buttons for the actions",
 			relatedThemes: ["flat-button"],
@@ -332,14 +315,20 @@ If customizing the dialog background, ensure flat-button foreground contrasts ag
 		angular: "igc-dockmanager",
 		webcomponents: "igc-dockmanager"
 	} },
-	"drop-down": { selectors: {
-		angular: ".igx-drop-down__list",
-		webcomponents: "igc-dropdown"
-	} },
+	"drop-down": {
+		selectors: {
+			angular: ".igx-drop-down__list",
+			webcomponents: "igc-dropdown"
+		},
+		aliases: ["dropdown menu"]
+	},
+	"drop-down-item": { childOf: "drop-down" },
 	"expansion-panel": { selectors: {
 		angular: "igx-expansion-panel",
 		webcomponents: "igc-expansion-panel"
 	} },
+	"expansion-panel-body": { childOf: "expansion-panel" },
+	"expansion-panel-header": { childOf: "expansion-panel" },
 	"file-input": {
 		selectors: {
 			angular: "igx-input-group[class~=\"igx-input-group--file\"]",
@@ -430,6 +419,8 @@ Both themes should share the same visual treatment as the file-input wrapper.`
 		angular: "igx-list",
 		webcomponents: "igc-list"
 	} },
+	"list-header": { childOf: "list" },
+	"list-item": { childOf: "list" },
 	navbar: {
 		selectors: {
 			angular: "igx-navbar",
@@ -448,10 +439,21 @@ Both themes should share the same visual treatment as the file-input wrapper.`
 			guidance: "Make sure to theme all button and icon-button variants in the navbar to visually coordinate with the navbar background."
 		}
 	},
-	navdrawer: { selectors: {
-		angular: "igx-nav-drawer",
-		webcomponents: "igc-nav-drawer"
-	} },
+	navdrawer: {
+		selectors: {
+			angular: "igx-nav-drawer",
+			webcomponents: "igc-nav-drawer"
+		},
+		aliases: [
+			"drawer",
+			"side drawer",
+			"side nav",
+			"sidenav",
+			"navigation drawer",
+			"navigation panel"
+		]
+	},
+	"nav-drawer-item": { childOf: "navdrawer" },
 	overlay: { selectors: {
 		angular: ".igx-overlay__content",
 		webcomponents: null
@@ -461,6 +463,7 @@ Both themes should share the same visual treatment as the file-input wrapper.`
 			angular: "igx-paginator",
 			webcomponents: "igc-paginator"
 		},
+		aliases: ["pagination", "pager"],
 		compound: {
 			description: "The paginator uses combo and flat-icon-buttons for the page controls.",
 			relatedThemes: ["combo", "flat-icon-button"],
@@ -486,19 +489,34 @@ Detailed token derivation rules are not yet available — use the token names \
 and descriptions from get_component_design_tokens for each child to guide value selection.`
 		}
 	},
-	"progress-circular": { selectors: {
-		angular: "igx-circular-bar",
-		webcomponents: "igc-circular-progress"
-	} },
-	"progress-linear": { selectors: {
-		angular: "igx-linear-bar",
-		webcomponents: "igc-linear-progress"
-	} },
+	"progress-circular": {
+		selectors: {
+			angular: "igx-circular-bar",
+			webcomponents: "igc-circular-progress"
+		},
+		aliases: [
+			"spinner",
+			"circular loader",
+			"loading spinner"
+		]
+	},
+	"progress-linear": {
+		selectors: {
+			angular: "igx-linear-bar",
+			webcomponents: "igc-linear-progress"
+		},
+		aliases: [
+			"progress-bar",
+			"loading bar",
+			"linear loader"
+		]
+	},
 	"query-builder": {
 		selectors: {
 			angular: "igx-query-builder",
 			webcomponents: null
 		},
+		aliases: ["filter builder"],
 		compound: {
 			description: "The query builder uses inputs, dropdowns, chips, buttons and button-groups for building query expressions.",
 			relatedThemes: [
@@ -519,10 +537,13 @@ chips for displaying conditions, and buttons/button-groups for adding and groupi
 		angular: "igx-radio",
 		webcomponents: "igc-radio"
 	} },
-	rating: { selectors: {
-		angular: "igc-rating",
-		webcomponents: "igc-rating"
-	} },
+	rating: {
+		selectors: {
+			angular: "igc-rating",
+			webcomponents: "igc-rating"
+		},
+		aliases: ["star rating"]
+	},
 	ripple: { selectors: {
 		angular: "igx-ripple",
 		webcomponents: "igc-ripple"
@@ -536,11 +557,10 @@ chips for displaying conditions, and buttons/button-groups for adding and groupi
 			angular: "igx-select",
 			webcomponents: "igc-select"
 		},
+		aliases: ["select box"],
 		compound: {
 			description: "The select component combines input-group and drop-down components.",
 			relatedThemes: ["input-group", "drop-down"],
-			additionalScopes: { overlay: { angular: ".igx-drop-down__list" } },
-			childScopes: { "drop-down": { angular: "overlay" } },
 			tokenDerivations: {
 				"input-group.focused-border-color": {
 					from: "select.toggle-button-background",
@@ -567,18 +587,23 @@ The drop-down background should match the select surface intent.`
 		angular: "igx-splitter",
 		webcomponents: "igc-splitter"
 	} },
+	step: { childOf: "stepper" },
 	stepper: { selectors: {
 		angular: "igx-stepper",
 		webcomponents: "igc-stepper"
 	} },
-	switch: { selectors: {
-		angular: "igx-switch",
-		webcomponents: "igc-switch"
-	} },
+	switch: {
+		selectors: {
+			angular: "igx-switch",
+			webcomponents: "igc-switch"
+		},
+		aliases: ["toggle"]
+	},
 	tabs: { selectors: {
 		angular: "igx-tabs",
 		webcomponents: "igc-tabs"
 	} },
+	"tab-item": { childOf: "tabs" },
 	"time-picker": {
 		selectors: {
 			angular: "igx-time-picker",
@@ -591,11 +616,6 @@ The drop-down background should match the select surface intent.`
 				"time-picker",
 				"flat-button"
 			],
-			additionalScopes: { overlay: { angular: ".igx-time-picker" } },
-			childScopes: {
-				"time-picker": { angular: "overlay" },
-				"flat-button": { angular: "overlay" }
-			},
 			guidance: `The time-picker input-group and the time-picker dial should share a consistent color scheme. \
 The input-group text color should coordinate with the time-picker header.`
 		}
@@ -634,11 +654,26 @@ new Set(Object.values(COMPONENT_METADATA).filter((m) => m.variants).flatMap((m)
 function getComponentSelector(componentName, platform) {
 	const metadata = COMPONENT_METADATA[componentName];
 	if (!metadata) return [];
+	if (!metadata.selectors) return [];
 	const platformSelectors = platform === "angular" ? metadata.selectors.angular : metadata.selectors.webcomponents;
 	if (platformSelectors === null) return [];
 	return Array.isArray(platformSelectors) ? platformSelectors : [platformSelectors];
 }
 /**
+* Get the selector(s) to use for theming scope.
+* For child components (with `childOf`), returns the parent's selectors.
+* For all other components, returns the component's own selectors.
+* @param componentName - The component name
+* @param platform - The target platform
+* @returns Array of selectors for theming scope, empty array if not found
+*/
+function getThemingSelector(componentName, platform) {
+	const metadata = COMPONENT_METADATA[componentName];
+	if (!metadata) return [];
+	if (metadata.childOf) return getComponentSelector(metadata.childOf, platform);
+	return getComponentSelector(componentName, platform);
+}
+/**
 * Check if a component is available on a specific platform.
 * @param componentName - The component name
 * @param platform - The target platform ('angular' or 'webcomponents')
@@ -646,7 +681,7 @@ function getComponentSelector(componentName, platform) {
 */
 function isComponentAvailable(componentName, platform) {
 	const metadata = COMPONENT_METADATA[componentName];
-	if (!metadata) return false;
+	if (!metadata?.selectors) return false;
 	return (platform === "angular" ? metadata.selectors.angular : metadata.selectors.webcomponents) !== null;
 }
 /**
@@ -656,7 +691,7 @@ function isComponentAvailable(componentName, platform) {
 */
 function getComponentPlatformAvailability(componentName) {
 	const metadata = COMPONENT_METADATA[componentName];
-	if (!metadata) return;
+	if (!metadata?.selectors) return;
 	return {
 		angular: metadata.selectors.angular !== null,
 		webcomponents: metadata.selectors.webcomponents !== null
@@ -712,4 +747,4 @@ function getTokenDerivationsForChild(compoundName, childThemeName) {
 	return result;
 }
 //#endregion
-export { COMPONENT_METADATA, getComponentPlatformAvailability, getComponentSelector, getCompoundComponentInfo, getTokenDerivationsForChild, getVariants, hasVariants, isComponentAvailable, isCompoundComponent };
+export { COMPONENT_METADATA, getComponentPlatformAvailability, getComponentSelector, getCompoundComponentInfo, getThemingSelector, getTokenDerivationsForChild, getVariants, hasVariants, isComponentAvailable, isCompoundComponent };