igniteui-theming 25.2.0 → 26.0.1

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

@@ -0,0 +1,18 @@
+import { ComponentMetadata } from './component-metadata.js';
+/** Options accepted by {@link createComponentSearcher}. */
+export interface CreateComponentSearcherOptions {
+    componentNames: string[];
+    metadata: Record<string, ComponentMetadata>;
+}
+/** Pre-built search index with a single `search` method. */
+export interface ComponentSearcher {
+    search(query: string): string[];
+}
+/**
+ * Build a pre-indexed component searcher from theme names and metadata.
+ *
+ * The returned searcher normalises queries, scores them against an
+ * index of canonical names / aliases / selectors, and returns results
+ * ranked by confidence (exact > token-set > overlap > substring > typo).
+ */
+export declare function createComponentSearcher(options: CreateComponentSearcherOptions): ComponentSearcher;

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

@@ -0,0 +1,144 @@
+//#region src/knowledge/component-search.ts
+var FRAMEWORK_PREFIX_PATTERN = /\big[cx]-/g;
+var NON_ALPHANUMERIC_PATTERN = /[^a-z0-9]+/g;
+var MIN_SEARCH_SCORE = 500;
+function stripFrameworkPrefixToken(token) {
+	if (token.startsWith("igx") && token.length > 3) return token.slice(3);
+	if (token.startsWith("igc") && token.length > 3) return token.slice(3);
+	return token;
+}
+function normalizeSearchTerm(term) {
+	const lowerTerm = term.toLowerCase().trim();
+	if (!lowerTerm) return;
+	const normalizedDelimiters = lowerTerm.replace(FRAMEWORK_PREFIX_PATTERN, "").replace(NON_ALPHANUMERIC_PATTERN, " ").trim();
+	if (!normalizedDelimiters) return;
+	const tokens = normalizedDelimiters.split(/\s+/).map(stripFrameworkPrefixToken).filter((token) => token.length > 0);
+	if (tokens.length === 0) return;
+	const uniqueTokens = [...new Set(tokens)];
+	return {
+		compact: tokens.join(""),
+		tokenSetKey: uniqueTokens.slice().sort().join("|"),
+		tokens: uniqueTokens
+	};
+}
+function getSelectorSearchSignals(selectors) {
+	if (!selectors) return [];
+	const values = [selectors.angular, selectors.webcomponents];
+	const signals = [];
+	for (const value of values) {
+		if (!value) continue;
+		if (Array.isArray(value)) {
+			signals.push(...value);
+			continue;
+		}
+		signals.push(value);
+	}
+	return signals;
+}
+function getComponentSearchSignals(componentName, metadataByName) {
+	const metadata = metadataByName[componentName];
+	const signals = new Set([componentName]);
+	if (!metadata) return [...signals];
+	metadata.aliases?.forEach((alias) => {
+		signals.add(alias);
+	});
+	getSelectorSearchSignals(metadata.selectors).forEach((selector) => {
+		signals.add(selector);
+	});
+	return [...signals];
+}
+function buildComponentSearchIndex(searchableNames, metadataByName) {
+	return searchableNames.map((name) => {
+		return {
+			name,
+			signals: getComponentSearchSignals(name, metadataByName).map(normalizeSearchTerm).filter((signal) => !!signal)
+		};
+	});
+}
+function getTokenCoverageScore(query, signal) {
+	if (query.tokens.length === 0 || signal.tokens.length === 0) return 0;
+	const signalTokens = new Set(signal.tokens);
+	let overlapCount = 0;
+	for (const token of query.tokens) if (signalTokens.has(token)) overlapCount++;
+	if (overlapCount === 0) return 0;
+	const queryCoverage = overlapCount / query.tokens.length;
+	const signalCoverage = overlapCount / signal.tokens.length;
+	if (query.tokens.length === 1 && query.tokens[0].length < 4) return queryCoverage === 1 && signalCoverage === 1 ? 900 : 0;
+	if (queryCoverage === 1) return 800 + overlapCount * 10 - Math.max(0, signal.tokens.length - query.tokens.length);
+	if (query.tokens.length > 1 && queryCoverage >= .5) return 650 + Math.round(queryCoverage * 100 + signalCoverage * 50);
+	return 0;
+}
+function getSubstringFallbackScore(query, signal) {
+	if (query.compact.length < 4 || signal.compact.length === 0) return 0;
+	if (signal.compact.includes(query.compact)) return 500 + Math.min(query.compact.length, 100);
+	return 0;
+}
+function getEditDistanceWithinLimit(source, target, limit) {
+	if (source === target) return 0;
+	const sourceLength = source.length;
+	const targetLength = target.length;
+	if (Math.abs(sourceLength - targetLength) > limit) return;
+	let previous = new Array(targetLength + 1);
+	let current = new Array(targetLength + 1);
+	for (let j = 0; j <= targetLength; j++) previous[j] = j;
+	for (let i = 1; i <= sourceLength; i++) {
+		current[0] = i;
+		let rowMin = current[0];
+		for (let j = 1; j <= targetLength; j++) {
+			const substitutionCost = source[i - 1] === target[j - 1] ? 0 : 1;
+			current[j] = Math.min(previous[j] + 1, current[j - 1] + 1, previous[j - 1] + substitutionCost);
+			rowMin = Math.min(rowMin, current[j]);
+		}
+		if (rowMin > limit) return;
+		[previous, current] = [current, previous];
+	}
+	return previous[targetLength] <= limit ? previous[targetLength] : void 0;
+}
+function getTypoFallbackScore(query, signal) {
+	if (query.tokens.length !== 1) return 0;
+	const [queryToken] = query.tokens;
+	if (queryToken.length < 5) return 0;
+	let bestScore = 0;
+	for (const signalToken of signal.tokens) {
+		if (signalToken.length < 5) continue;
+		if (getEditDistanceWithinLimit(queryToken, signalToken, 1) === 1) bestScore = Math.max(bestScore, 540);
+	}
+	return bestScore;
+}
+function scoreSearchEntry(query, entry) {
+	let bestScore = 0;
+	for (const signal of entry.signals) {
+		if (signal.compact === query.compact) {
+			bestScore = Math.max(bestScore, 1e3);
+			continue;
+		}
+		if (signal.tokenSetKey === query.tokenSetKey) {
+			bestScore = Math.max(bestScore, 900);
+			continue;
+		}
+		bestScore = Math.max(bestScore, getTokenCoverageScore(query, signal));
+		bestScore = Math.max(bestScore, getSubstringFallbackScore(query, signal));
+		bestScore = Math.max(bestScore, getTypoFallbackScore(query, signal));
+	}
+	return bestScore;
+}
+/**
+* Build a pre-indexed component searcher from theme names and metadata.
+*
+* The returned searcher normalises queries, scores them against an
+* index of canonical names / aliases / selectors, and returns results
+* ranked by confidence (exact > token-set > overlap > substring > typo).
+*/
+function createComponentSearcher(options) {
+	const componentSearchIndex = buildComponentSearchIndex(Array.from(new Set([...options.componentNames, ...Object.keys(options.metadata)])).sort((a, b) => a.localeCompare(b)), options.metadata);
+	return { search(query) {
+		const normalizedQuery = normalizeSearchTerm(query);
+		if (!normalizedQuery) return [];
+		return componentSearchIndex.map((entry) => ({
+			name: entry.name,
+			score: scoreSearchEntry(normalizedQuery, entry)
+		})).filter((match) => match.score >= MIN_SEARCH_SCORE).sort((a, b) => b.score - a.score || a.name.localeCompare(b.name)).map((match) => match.name);
+	} };
+}
+//#endregion
+export { createComponentSearcher };

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

@@ -1,5 +1,6 @@
 import themes_default from "../theming/dist/json/components/themes.js";
 import { COMPONENT_METADATA } from "./component-metadata.js";
+import { createComponentSearcher } from "./component-search.js";
 //#region src/knowledge/component-themes.ts
 /**
 * Component themes knowledge base - loads component theme data from JSON.
@@ -13,6 +14,10 @@ var COMPONENT_THEMES = themes_default;
 * List of all available component names.
 */
 var COMPONENT_NAMES = Object.keys(COMPONENT_THEMES);
+var componentSearcher = createComponentSearcher({
+	componentNames: COMPONENT_NAMES,
+	metadata: COMPONENT_METADATA
+});
 /**
 * Get a component theme by name.
 * @param componentName - The component name (e.g., 'button', 'avatar')
@@ -33,8 +38,8 @@ function resolveComponentTheme(componentName) {
 		resolvedName: componentName
 	};
 	const metadata = COMPONENT_METADATA[componentName];
-	if (!metadata?.theme) return {};
-	const alias = metadata.theme;
+	const alias = metadata?.theme ?? metadata?.childOf;
+	if (!alias) return {};
 	if (alias === componentName) return { error: `Theme alias target "${alias}" cannot reference itself.` };
 	if (!COMPONENT_METADATA[alias]) return { error: `Theme alias target "${alias}" is not a valid component metadata entry.` };
 	const resolvedTheme = COMPONENT_THEMES[alias];
@@ -74,8 +79,7 @@ function validateTokens(componentName, tokenNames) {
 * @returns Array of matching component names
 */
 function searchComponents(query) {
-	const lowerQuery = query.toLowerCase();
-	return COMPONENT_NAMES.filter((name) => name.toLowerCase().includes(lowerQuery));
+	return componentSearcher.search(query);
 }
 //#endregion
 export { COMPONENT_NAMES, COMPONENT_THEMES, getComponentTheme, getTokenNames, resolveComponentTheme, searchComponents, validateTokens };

package/dist/mcp/knowledge/index.d.ts

@@ -3,7 +3,8 @@
  */
 export { COLOR_SEMANTIC_ROLES, COLOR_USAGE_MARKDOWN, type ColorSemanticRole, OPACITY_USAGE, type ShadeRange, STATE_PATTERNS, THEME_PATTERNS, } from './color-usage.js';
 export { COLOR_GUIDANCE_MARKDOWN, COLOR_RULES_SUMMARY, COLOR_VARIANT_RULES, } from './colors.js';
-export { COMPONENT_METADATA, type ComponentMetadata, type ComponentSelectors, type CompoundInfo, getComponentPlatformAvailability, getComponentSelector, getComponentsForPlatform, getCompoundComponentInfo, getTokenDerivationsForChild, getVariants, hasVariants, isComponentAvailable, isCompoundComponent, isVariantTheme, type ScopeSelectors, type TokenDerivation, VARIANT_THEME_NAMES, } from './component-metadata.js';
+export { COMPONENT_METADATA, type ComponentMetadata, type ComponentSelectors, type CompoundInfo, getComponentPlatformAvailability, getComponentSelector, getComponentsForPlatform, getCompoundComponentInfo, getThemingSelector, getTokenDerivationsForChild, getVariants, hasVariants, isComponentAvailable, isCompoundComponent, isVariantTheme, type TokenDerivation, VARIANT_THEME_NAMES, } from './component-metadata.js';
+export { type ComponentSearcher, type CreateComponentSearcherOptions, createComponentSearcher, } from './component-search.js';
 export { COMPONENT_NAMES, COMPONENT_THEMES, type ComponentTheme, type ComponentToken, getComponentTheme, getTokenNames, resolveComponentTheme, searchComponents, validateTokens, } from './component-themes.js';
 export { ALL_CHROMATIC_SHADES, ALL_GRAY_SHADES, CUSTOM_PALETTE_GUIDANCE, REQUIRED_SHADES, } from './custom-palettes.js';
 export { ELEVATION_LEVELS, ELEVATION_PRESETS, type ElevationLevel, type ElevationPreset, INDIGO_ELEVATIONS, MATERIAL_ELEVATIONS, } from './elevations.js';

package/dist/mcp/knowledge/index.js

@@ -11,7 +11,8 @@ import "./docs/layout/mixins/sizing.js";
 import "./docs/layout/mixins/spacing.js";
 import "./docs/layout/overview.js";
 import "./palettes.js";
-import { getComponentSelector } from "./component-metadata.js";
+import { COMPONENT_METADATA, getThemingSelector } from "./component-metadata.js";
+import "./component-search.js";
 import { getComponentTheme } from "./component-themes.js";
 import "../utils/types.js";
 import "./multipliers.js";
@@ -24,4 +25,4 @@ import "./platforms/index.js";
 import "./sass-api.js";
 import "./typography.js";
 import "./platforms/angular.js";
-export { SCHEMAS as SCHEMA_PRESETS, getComponentSelector, getComponentTheme };
+export { COMPONENT_METADATA, SCHEMAS as SCHEMA_PRESETS, getComponentTheme, getThemingSelector };

package/dist/mcp/theming/dist/json/components/themes.js

@@ -479,13 +479,20 @@ var chat = {
 	"name": "chat",
 	"themeFunctionName": "chat-theme",
 	"description": "Chat Theme",
-	"primaryTokens": [{
-		"name": "header-background",
-		"description": "The background color of the chat header."
-	}, {
-		"name": "message-background",
-		"description": "The background color of message bubbles."
-	}],
+	"primaryTokens": [
+		{
+			"name": "header-background",
+			"description": "The background color of the chat header."
+		},
+		{
+			"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.",
 	"tokens": [
 		{
@@ -496,7 +503,7 @@ var chat = {
 		{
 			"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",
@@ -509,19 +516,34 @@ var chat = {
 			"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 background color for received messages."
+		},
+		{
+			"name": "received-message-color",
 			"type": "Color",
-			"description": "The text color of the chat messages. Auto-derived from message-background."
+			"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",
@@ -1086,7 +1108,7 @@ var accordion = {
 		}
 	]
 };
-var grid = /* @__PURE__ */ JSON.parse("{\"name\":\"grid\",\"themeFunctionName\":\"grid-theme\",\"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\":\"group-row-background\",\"description\":\"The grid group row background color.\"},{\"name\":\"grouparea-background\",\"description\":\"The grid group area background color.\"}],\"primaryTokensSummary\":\"Derived colors are auto-calculated for contrast.\",\"tokens\":[{\"name\":\"background\",\"type\":\"Color\",\"description\":\"The background color of the grid. PRIMARY\"},{\"name\":\"foreground\",\"type\":\"Color\",\"description\":\"The foreground color of the grid. PRIMARY\"},{\"name\":\"accent-color\",\"type\":\"Color\",\"description\":\"The accent color used for interactive elements in the grid. PRIMARY\"},{\"name\":\"header-background\",\"type\":\"Color\",\"description\":\"The table header background color. PRIMARY - derives header-text-color, header-border-color, and many more.\"},{\"name\":\"header-text-color\",\"type\":\"Color\",\"description\":\"The table header text color. Auto-derived from header-background.\"},{\"name\":\"header-border-width\",\"type\":\"String\",\"description\":\"The border width used for header borders.\"},{\"name\":\"header-border-style\",\"type\":\"String\",\"description\":\"The border style used for header borders.\"},{\"name\":\"header-border-color\",\"type\":\"Color\",\"description\":\"The color used for header borders. Auto-derived from header-background.\"},{\"name\":\"header-selected-background\",\"type\":\"Color\",\"description\":\"The table header background color when selected. Auto-derived from header-background.\"},{\"name\":\"header-selected-text-color\",\"type\":\"Color\",\"description\":\"The table header text color when selected. Auto-derived from header-selected-background.\"},{\"name\":\"sorted-header-icon-color\",\"type\":\"Color\",\"description\":\"The sort icon color when sorted. Auto-derived from header-background.\"},{\"name\":\"sortable-header-icon-hover-color\",\"type\":\"color\",\"description\":\"The icon color on hover when sortable. Auto-derived from sorted-header-icon-color.\"},{\"name\":\"content-background\",\"type\":\"Color\",\"description\":\"The table body background color. PRIMARY - derives content-text-color, row backgrounds, cell backgrounds, borders.\"},{\"name\":\"content-text-color\",\"type\":\"Color\",\"description\":\"The table body text color. Auto-derived from content-background.\"},{\"name\":\"ghost-header-text-color\",\"type\":\"Color\",\"description\":\"The dragged header text color. Auto-derived from ghost-header-background.\"},{\"name\":\"ghost-header-icon-color\",\"type\":\"Color\",\"description\":\"The dragged header icon color. Auto-derived from ghost-header-background.\"},{\"name\":\"ghost-header-background\",\"type\":\"Color\",\"description\":\"The dragged header background color. PRIMARY - derives ghost-header-text-color, ghost-header-icon-color.\"},{\"name\":\"row-odd-background\",\"type\":\"Color\",\"description\":\"The background color of odd rows. Auto-derived from content-background.\"},{\"name\":\"row-even-background\",\"type\":\"Color\",\"description\":\"The background color of even rows. Auto-derived from content-background.\"},{\"name\":\"row-odd-text-color\",\"type\":\"Color\",\"description\":\"The text color of odd rows. Auto-derived from row-odd-background.\"},{\"name\":\"row-even-text-color\",\"type\":\"Color\",\"description\":\"The text color of even rows. Auto-derived from row-even-background.\"},{\"name\":\"row-selected-background\",\"type\":\"Color\",\"description\":\"The selected row background color. Auto-derived from content-background.\"},{\"name\":\"row-selected-hover-background\",\"type\":\"Color\",\"description\":\"The selected row hover background color. Auto-derived from row-selected-background.\"},{\"name\":\"row-selected-text-color\",\"type\":\"Color\",\"description\":\"The selected row text color. Auto-derived from row-selected-background.\"},{\"name\":\"row-selected-hover-text-color\",\"type\":\"Color\",\"description\":\"The selected row hover text color. Auto-derived from row-selected-hover-background.\"},{\"name\":\"row-hover-background\",\"type\":\"Color\",\"description\":\"The hover row background color. Auto-derived from content-background.\"},{\"name\":\"row-hover-text-color\",\"type\":\"Color\",\"description\":\"The hover row text color. Auto-derived from row-hover-background.\"},{\"name\":\"row-border-color\",\"type\":\"Color\",\"description\":\"The row bottom border color. Auto-derived from content-background.\"},{\"name\":\"pinned-border-width\",\"type\":\"String\",\"description\":\"The border width of the pinned border.\"},{\"name\":\"pinned-border-style\",\"type\":\"String\",\"description\":\"The CSS border style of the pinned border.\"},{\"name\":\"pinned-border-color\",\"type\":\"Color\",\"description\":\"The color of the pinned border. Auto-derived from content-background.\"},{\"name\":\"cell-active-border-color\",\"type\":\"Color\",\"description\":\"The border color for the active cell. Auto-derived from content-background.\"},{\"name\":\"cell-selected-background\",\"type\":\"Color\",\"description\":\"The selected cell background color. Auto-derived from content-background.\"},{\"name\":\"cell-selected-text-color\",\"type\":\"Color\",\"description\":\"The selected cell text color. Auto-derived from cell-selected-background.\"},{\"name\":\"cell-editing-background\",\"type\":\"Color\",\"description\":\"The background of the cell being edited. Auto-derived from content-background.\"},{\"name\":\"cell-editing-foreground\",\"type\":\"Color\",\"description\":\"The cell text color in edit mode. Auto-derived from cell-editing-background.\"},{\"name\":\"cell-editing-focus-foreground\",\"type\":\"Color\",\"description\":\"The cell text color in edit mode on focus. Auto-derived from cell-editing-background.\"},{\"name\":\"cell-edited-value-color\",\"type\":\"Color\",\"description\":\"The text color of an edited cell.\"},{\"name\":\"cell-new-color\",\"type\":\"Color\",\"description\":\"The text color of a new cell.\"},{\"name\":\"cell-disabled-color\",\"type\":\"Color\",\"description\":\"The text color of a disabled cell.\"},{\"name\":\"cell-selected-within-background\",\"type\":\"Color\",\"description\":\"The background of selected cell in selected row. Auto-derived from row-selected-background.\"},{\"name\":\"cell-selected-within-text-color\",\"type\":\"Color\",\"description\":\"The color of selected cell in selected row. Auto-derived from cell-selected-within-background.\"},{\"name\":\"edit-mode-color\",\"type\":\"Color\",\"description\":\"The color around the row/cell in edit mode. Auto-derived from content-background.\"},{\"name\":\"edited-row-indicator\",\"type\":\"Color\",\"description\":\"The edited row indicator line color.\"},{\"name\":\"resize-line-color\",\"type\":\"Color\",\"description\":\"The table header resize line color.\"},{\"name\":\"drop-indicator-color\",\"type\":\"Color\",\"description\":\"The color of the column drag indicator line.\"},{\"name\":\"grouparea-background\",\"type\":\"Color\",\"description\":\"The grid group area background color. PRIMARY - derives grouparea-color, drop-area-background. Auto-derived from header-background.\"},{\"name\":\"grouparea-color\",\"type\":\"Color\",\"description\":\"The grid group area color. Auto-derived from grouparea-background.\"},{\"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.\"},{\"name\":\"group-row-selected-background\",\"type\":\"Color\",\"description\":\"The group row selected background. Auto-derived from group-row-background.\"},{\"name\":\"group-label-column-name-text\",\"type\":\"Color\",\"description\":\"The grid group row column name text color.\"},{\"name\":\"group-label-icon\",\"type\":\"Color\",\"description\":\"The grid group row icon color.\"},{\"name\":\"group-label-text\",\"type\":\"Color\",\"description\":\"The grid group row text color. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"expand-all-icon-color\",\"type\":\"Color\",\"description\":\"The header expand all icon color. Auto-derived from header-background.\"},{\"name\":\"expand-all-icon-hover-color\",\"type\":\"Color\",\"description\":\"The header expand all icon hover color. Auto-derived from header-background.\"},{\"name\":\"expand-icon-color\",\"type\":\"Color\",\"description\":\"The grid row expand icon color. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"expand-icon-hover-color\",\"type\":\"Color\",\"description\":\"The grid row expand icon hover color. Auto-derived from expand-icon-color.\"},{\"name\":\"active-expand-icon-color\",\"type\":\"Color\",\"description\":\"The active expand icon color.\"},{\"name\":\"active-expand-icon-hover-color\",\"type\":\"Color\",\"description\":\"The active expand icon hover color.\"},{\"name\":\"group-count-background\",\"type\":\"Color\",\"description\":\"The group row count badge background. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"group-count-text-color\",\"type\":\"Color\",\"description\":\"The group row count badge text color. Auto-derived from group-count-background.\"},{\"name\":\"drop-area-text-color\",\"type\":\"Color\",\"description\":\"The drop area text color. Auto-derived from drop-area-background.\"},{\"name\":\"drop-area-icon-color\",\"type\":\"Color\",\"description\":\"The drop area icon color. Auto-derived from drop-area-background.\"},{\"name\":\"drop-area-background\",\"type\":\"Color\",\"description\":\"The drop area background color. Auto-derived from grouparea-background.\"},{\"name\":\"drop-area-on-drop-background\",\"type\":\"Color\",\"description\":\"The drop area background on drop. Auto-derived from drop-area-background.\"},{\"name\":\"filtering-header-background\",\"type\":\"Color\",\"description\":\"The filtered column header background. Auto-derived from header-background.\"},{\"name\":\"filtering-header-text-color\",\"type\":\"Color\",\"description\":\"The filtered column header text color. Auto-derived from filtering-header-background.\"},{\"name\":\"filtering-row-background\",\"type\":\"Color\",\"description\":\"The filtering row background. Auto-derived from header-background.\"},{\"name\":\"filtering-row-text-color\",\"type\":\"Color\",\"description\":\"The filtering row text color. Auto-derived from filtering-row-background.\"},{\"name\":\"filtering-dialog-background\",\"type\":\"Color\",\"description\":\"The background color of the advanced filtering dialog.\"},{\"name\":\"excel-filtering-header-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering header text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-subheader-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering subheader text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-actions-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-actions-hover-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions hover text color.\"},{\"name\":\"excel-filtering-actions-disabled-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions disabled text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-border-color\",\"type\":\"Color\",\"description\":\"The border color used in the excel style filter. Auto-derived from foreground and background.\"},{\"name\":\"tree-filtered-text-color\",\"type\":\"Color\",\"description\":\"Grouping row background color on focus.\"},{\"name\":\"summaries-patch-background\",\"type\":\"Color\",\"description\":\"The leading summaries patch background.\"},{\"name\":\"row-highlight\",\"type\":\"Color\",\"description\":\"The grid row highlight indication color.\"},{\"name\":\"grid-shadow\",\"type\":\"List\",\"description\":\"The shadow of the grid.\"},{\"name\":\"drag-shadow\",\"type\":\"List\",\"description\":\"The shadow for movable elements.\"},{\"name\":\"row-ghost-background\",\"type\":\"color\",\"description\":\"The dragged row background color.\"},{\"name\":\"row-drag-color\",\"type\":\"color\",\"description\":\"The row drag handle color.\"},{\"name\":\"grid-border-color\",\"type\":\"Color\",\"description\":\"The color of the grid border.\"},{\"name\":\"drop-area-border-radius\",\"type\":\"List\",\"description\":\"The border radius for column drop area.\"},{\"name\":\"active-state-border-style\",\"type\":\"List\",\"description\":\"The border style used for row active state and cell active state.\"},{\"name\":\"body-column-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column.\"},{\"name\":\"body-column-hover-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in hovered row.\"},{\"name\":\"body-column-hover-selected-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in hovered + selected row.\"},{\"name\":\"body-column-selected-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in selected row.\"}]}");
+var grid = /* @__PURE__ */ JSON.parse("{\"name\":\"grid\",\"themeFunctionName\":\"grid-theme\",\"description\":\"Grid Theme\",\"primaryTokens\":[{\"name\":\"background\",\"description\":\"Controls the overall background color of the grid, including header and content.\"},{\"name\":\"foreground\",\"description\":\"Controls the overall foreground color of the grid, including text and icons.\"},{\"name\":\"accent-color\",\"description\":\"Controls the accent color used for interactive elements in the grid.\"}],\"tokens\":[{\"name\":\"background\",\"type\":\"Color\",\"description\":\"The background color of the grid.\"},{\"name\":\"foreground\",\"type\":\"Color\",\"description\":\"The foreground color of the grid.\"},{\"name\":\"accent-color\",\"type\":\"Color\",\"description\":\"The accent color used for interactive elements in the grid.\"},{\"name\":\"header-background\",\"type\":\"Color\",\"description\":\"The table header background color - derives header-text-color, header-border-color, and many more.\"},{\"name\":\"header-text-color\",\"type\":\"Color\",\"description\":\"The table header text color. Auto-derived from header-background.\"},{\"name\":\"header-border-width\",\"type\":\"String\",\"description\":\"The border width used for header borders.\"},{\"name\":\"header-border-style\",\"type\":\"String\",\"description\":\"The border style used for header borders.\"},{\"name\":\"header-border-color\",\"type\":\"Color\",\"description\":\"The color used for header borders. Auto-derived from header-background.\"},{\"name\":\"header-selected-background\",\"type\":\"Color\",\"description\":\"The table header background color when selected. Auto-derived from header-background.\"},{\"name\":\"header-selected-text-color\",\"type\":\"Color\",\"description\":\"The table header text color when selected. Auto-derived from header-selected-background.\"},{\"name\":\"sorted-header-icon-color\",\"type\":\"Color\",\"description\":\"The sort icon color when sorted. Auto-derived from header-background.\"},{\"name\":\"sortable-header-icon-hover-color\",\"type\":\"color\",\"description\":\"The icon color on hover when sortable. Auto-derived from sorted-header-icon-color.\"},{\"name\":\"content-background\",\"type\":\"Color\",\"description\":\"The table body background color - derives content-text-color, row backgrounds, cell backgrounds, borders.\"},{\"name\":\"content-text-color\",\"type\":\"Color\",\"description\":\"The table body text color. Auto-derived from content-background.\"},{\"name\":\"ghost-header-text-color\",\"type\":\"Color\",\"description\":\"The dragged header text color. Auto-derived from ghost-header-background.\"},{\"name\":\"ghost-header-icon-color\",\"type\":\"Color\",\"description\":\"The dragged header icon color. Auto-derived from ghost-header-background.\"},{\"name\":\"ghost-header-background\",\"type\":\"Color\",\"description\":\"The dragged header background color - derives ghost-header-text-color, ghost-header-icon-color.\"},{\"name\":\"row-odd-background\",\"type\":\"Color\",\"description\":\"The background color of odd rows. Auto-derived from content-background.\"},{\"name\":\"row-even-background\",\"type\":\"Color\",\"description\":\"The background color of even rows. Auto-derived from content-background.\"},{\"name\":\"row-odd-text-color\",\"type\":\"Color\",\"description\":\"The text color of odd rows. Auto-derived from row-odd-background.\"},{\"name\":\"row-even-text-color\",\"type\":\"Color\",\"description\":\"The text color of even rows. Auto-derived from row-even-background.\"},{\"name\":\"row-selected-background\",\"type\":\"Color\",\"description\":\"The selected row background color. Auto-derived from content-background.\"},{\"name\":\"row-selected-hover-background\",\"type\":\"Color\",\"description\":\"The selected row hover background color. Auto-derived from row-selected-background.\"},{\"name\":\"row-selected-text-color\",\"type\":\"Color\",\"description\":\"The selected row text color. Auto-derived from row-selected-background.\"},{\"name\":\"row-selected-hover-text-color\",\"type\":\"Color\",\"description\":\"The selected row hover text color. Auto-derived from row-selected-hover-background.\"},{\"name\":\"row-hover-background\",\"type\":\"Color\",\"description\":\"The hover row background color. Auto-derived from content-background.\"},{\"name\":\"row-hover-text-color\",\"type\":\"Color\",\"description\":\"The hover row text color. Auto-derived from row-hover-background.\"},{\"name\":\"row-border-color\",\"type\":\"Color\",\"description\":\"The row bottom border color. Auto-derived from content-background.\"},{\"name\":\"pinned-border-width\",\"type\":\"String\",\"description\":\"The border width of the pinned border.\"},{\"name\":\"pinned-border-style\",\"type\":\"String\",\"description\":\"The CSS border style of the pinned border.\"},{\"name\":\"pinned-border-color\",\"type\":\"Color\",\"description\":\"The color of the pinned border. Auto-derived from content-background.\"},{\"name\":\"cell-active-border-color\",\"type\":\"Color\",\"description\":\"The border color for the active cell. Auto-derived from content-background.\"},{\"name\":\"cell-selected-background\",\"type\":\"Color\",\"description\":\"The selected cell background color. Auto-derived from content-background.\"},{\"name\":\"cell-selected-text-color\",\"type\":\"Color\",\"description\":\"The selected cell text color. Auto-derived from cell-selected-background.\"},{\"name\":\"cell-editing-background\",\"type\":\"Color\",\"description\":\"The background of the cell being edited. Auto-derived from content-background.\"},{\"name\":\"cell-editing-foreground\",\"type\":\"Color\",\"description\":\"The cell text color in edit mode. Auto-derived from cell-editing-background.\"},{\"name\":\"cell-editing-focus-foreground\",\"type\":\"Color\",\"description\":\"The cell text color in edit mode on focus. Auto-derived from cell-editing-background.\"},{\"name\":\"cell-edited-value-color\",\"type\":\"Color\",\"description\":\"The text color of an edited cell.\"},{\"name\":\"cell-new-color\",\"type\":\"Color\",\"description\":\"The text color of a new cell.\"},{\"name\":\"cell-disabled-color\",\"type\":\"Color\",\"description\":\"The text color of a disabled cell.\"},{\"name\":\"cell-selected-within-background\",\"type\":\"Color\",\"description\":\"The background of selected cell in selected row. Auto-derived from row-selected-background.\"},{\"name\":\"cell-selected-within-text-color\",\"type\":\"Color\",\"description\":\"The color of selected cell in selected row. Auto-derived from cell-selected-within-background.\"},{\"name\":\"edit-mode-color\",\"type\":\"Color\",\"description\":\"The color around the row/cell in edit mode. Auto-derived from content-background.\"},{\"name\":\"edited-row-indicator\",\"type\":\"Color\",\"description\":\"The edited row indicator line color.\"},{\"name\":\"resize-line-color\",\"type\":\"Color\",\"description\":\"The table header resize line color.\"},{\"name\":\"drop-indicator-color\",\"type\":\"Color\",\"description\":\"The color of the column drag indicator line.\"},{\"name\":\"grouparea-background\",\"type\":\"Color\",\"description\":\"The grid group area background color - derives grouparea-color, drop-area-background. Auto-derived from header-background.\"},{\"name\":\"grouparea-color\",\"type\":\"Color\",\"description\":\"The grid group area color. Auto-derived from grouparea-background.\"},{\"name\":\"group-row-background\",\"type\":\"Color\",\"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\",\"type\":\"Color\",\"description\":\"The group row selected background. Auto-derived from group-row-background.\"},{\"name\":\"group-label-column-name-text\",\"type\":\"Color\",\"description\":\"The grid group row column name text color.\"},{\"name\":\"group-label-icon\",\"type\":\"Color\",\"description\":\"The grid group row icon color.\"},{\"name\":\"group-label-text\",\"type\":\"Color\",\"description\":\"The grid group row text color. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"expand-all-icon-color\",\"type\":\"Color\",\"description\":\"The header expand all icon color. Auto-derived from header-background.\"},{\"name\":\"expand-all-icon-hover-color\",\"type\":\"Color\",\"description\":\"The header expand all icon hover color. Auto-derived from header-background.\"},{\"name\":\"expand-icon-color\",\"type\":\"Color\",\"description\":\"The grid row expand icon color. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"expand-icon-hover-color\",\"type\":\"Color\",\"description\":\"The grid row expand icon hover color. Auto-derived from expand-icon-color.\"},{\"name\":\"active-expand-icon-color\",\"type\":\"Color\",\"description\":\"The active expand icon color.\"},{\"name\":\"active-expand-icon-hover-color\",\"type\":\"Color\",\"description\":\"The active expand icon hover color.\"},{\"name\":\"group-count-background\",\"type\":\"Color\",\"description\":\"The group row count badge background. Auto-derived from group-row-background or group-row-selected-background.\"},{\"name\":\"group-count-text-color\",\"type\":\"Color\",\"description\":\"The group row count badge text color. Auto-derived from group-count-background.\"},{\"name\":\"drop-area-text-color\",\"type\":\"Color\",\"description\":\"The drop area text color. Auto-derived from drop-area-background.\"},{\"name\":\"drop-area-icon-color\",\"type\":\"Color\",\"description\":\"The drop area icon color. Auto-derived from drop-area-background.\"},{\"name\":\"drop-area-background\",\"type\":\"Color\",\"description\":\"The drop area background color. Auto-derived from grouparea-background.\"},{\"name\":\"drop-area-on-drop-background\",\"type\":\"Color\",\"description\":\"The drop area background on drop. Auto-derived from drop-area-background.\"},{\"name\":\"filtering-header-background\",\"type\":\"Color\",\"description\":\"The filtered column header background. Auto-derived from header-background.\"},{\"name\":\"filtering-header-text-color\",\"type\":\"Color\",\"description\":\"The filtered column header text color. Auto-derived from filtering-header-background.\"},{\"name\":\"filtering-row-background\",\"type\":\"Color\",\"description\":\"The filtering row background. Auto-derived from header-background.\"},{\"name\":\"filtering-row-text-color\",\"type\":\"Color\",\"description\":\"The filtering row text color. Auto-derived from filtering-row-background.\"},{\"name\":\"filtering-dialog-background\",\"type\":\"Color\",\"description\":\"The background color of the advanced filtering dialog.\"},{\"name\":\"excel-filtering-header-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering header text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-subheader-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering subheader text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-actions-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-actions-hover-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions hover text color.\"},{\"name\":\"excel-filtering-actions-disabled-foreground\",\"type\":\"Color\",\"description\":\"The excel filtering actions disabled text color. Auto-derived from filtering-row-background.\"},{\"name\":\"excel-filtering-border-color\",\"type\":\"Color\",\"description\":\"The border color used in the excel style filter. Auto-derived from foreground and background.\"},{\"name\":\"tree-filtered-text-color\",\"type\":\"Color\",\"description\":\"Grouping row background color on focus.\"},{\"name\":\"summaries-patch-background\",\"type\":\"Color\",\"description\":\"The leading summaries patch background.\"},{\"name\":\"row-highlight\",\"type\":\"Color\",\"description\":\"The grid row highlight indication color.\"},{\"name\":\"grid-shadow\",\"type\":\"List\",\"description\":\"The shadow of the grid.\"},{\"name\":\"drag-shadow\",\"type\":\"List\",\"description\":\"The shadow for movable elements.\"},{\"name\":\"row-ghost-background\",\"type\":\"color\",\"description\":\"The dragged row background color.\"},{\"name\":\"row-drag-color\",\"type\":\"color\",\"description\":\"The row drag handle color.\"},{\"name\":\"grid-border-color\",\"type\":\"Color\",\"description\":\"The color of the grid border.\"},{\"name\":\"drop-area-border-radius\",\"type\":\"List\",\"description\":\"The border radius for column drop area.\"},{\"name\":\"active-state-border-style\",\"type\":\"List\",\"description\":\"The border style used for row active state and cell active state.\"},{\"name\":\"body-column-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column.\"},{\"name\":\"body-column-hover-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in hovered row.\"},{\"name\":\"body-column-hover-selected-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in hovered + selected row.\"},{\"name\":\"body-column-selected-border-color\",\"type\":\"Color\",\"description\":\"The border color used for the body column when in selected row.\"}]}");
 var highlight = {
 	"name": "highlight",
 	"themeFunctionName": "highlight-theme",
@@ -5328,7 +5350,7 @@ var themes_default = {
 		"primaryTokens": [],
 		"tokens": [
 			{
-				"name": "base-circle-color",
+				"name": "track-color",
 				"type": "Color",
 				"description": "The base circle fill color."
 			},