@design.estate/dees-catalog 3.55.4 → 3.55.6

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-theme.d.ts

@@ -3,13 +3,20 @@
  * Uses the centralized themeDefaults tokens so chart colors stay in sync
  * with the rest of the dees-catalog design system.
  *
- * ECharts renders on <canvas> and cannot read CSS custom properties,
+ * ECharts renders on <svg> and cannot read CSS custom properties,
  * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ *
+ * IMPORTANT: All colors passed to ECharts for data series must be hex or rgb/rgba.
+ * ECharts cannot interpolate HSL strings during hover/emphasis animations,
+ * causing them to flash black.
  */
 export declare function getEchartsSeriesColors(goBright: boolean): string[];
+/**
+ * Convert a hex color to an rgba string with the given alpha.
+ */
+export declare function hexToRgba(hex: string, alpha: number): string;
 export declare function getEchartsThemeOptions(goBright: boolean): Record<string, any>;
 /**
  * Helper to get the resolved theme colors object for use in buildOption().
- * Components can use this instead of hardcoding dark/light color values.
  */
 export declare function getThemeColors(goBright: boolean): import("../00theme.js").IThemeColors;

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-theme.js

@@ -3,33 +3,51 @@
  * Uses the centralized themeDefaults tokens so chart colors stay in sync
  * with the rest of the dees-catalog design system.
  *
- * ECharts renders on <canvas> and cannot read CSS custom properties,
+ * ECharts renders on <svg> and cannot read CSS custom properties,
  * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ *
+ * IMPORTANT: All colors passed to ECharts for data series must be hex or rgb/rgba.
+ * ECharts cannot interpolate HSL strings during hover/emphasis animations,
+ * causing them to flash black.
  */
 import { themeDefaults } from '../00theme.js';
 const light = themeDefaults.colors.light;
 const dark = themeDefaults.colors.dark;
+/**
+ * Series color palette for ECharts charts.
+ * Aligned with the Tailwind/shadcn-inspired palette used throughout the codebase.
+ * All values are hex — ECharts requires this for animation interpolation.
+ */
 const SERIES_COLORS = {
     dark: [
-        dark.accentPrimary, // blue
-        'hsl(173.4 80.4% 40%)', // teal (no token yet)
-        'hsl(280.3 87.4% 66.7%)', // purple (no token yet)
-        dark.accentWarning, // orange/amber
-        dark.accentSuccess, // green
-        dark.accentError, // rose/red
+        '#60a5fa', // blue-400   — softer in dark mode
+        '#2dd4bf', // teal-400
+        '#a78bfa', // violet-400
+        '#fbbf24', // amber-400
+        '#34d399', // emerald-400
+        '#fb7185', // rose-400
     ],
     light: [
-        light.accentPrimary,
-        'hsl(142.1 76.2% 36.3%)', // teal (no token yet)
-        'hsl(280.3 47.7% 50.2%)', // purple (no token yet)
-        light.accentWarning,
-        light.accentSuccess,
-        light.accentError,
+        '#3b82f6', // blue-500
+        '#14b8a6', // teal-500
+        '#8b5cf6', // violet-500
+        '#f59e0b', // amber-500
+        '#10b981', // emerald-500
+        '#f43f5e', // rose-500
     ],
 };
 export function getEchartsSeriesColors(goBright) {
     return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
 }
+/**
+ * Convert a hex color to an rgba string with the given alpha.
+ */
+export function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
 export function getEchartsThemeOptions(goBright) {
     const colors = goBright ? light : dark;
     return {
@@ -39,7 +57,8 @@ export function getEchartsThemeOptions(goBright) {
             fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
             fontSize: 12,
         },
-        color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
+        // No global `color` array — each component sets per-item/per-series
+        // colors explicitly to avoid conflicts during emphasis animations.
         tooltip: {
             backgroundColor: colors.bgPrimary,
             borderColor: colors.borderDefault,
@@ -59,9 +78,8 @@ export function getEchartsThemeOptions(goBright) {
 }
 /**
  * Helper to get the resolved theme colors object for use in buildOption().
- * Components can use this instead of hardcoding dark/light color values.
  */
 export function getThemeColors(goBright) {
     return goBright ? light : dark;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1lY2hhcnRzLXRoZW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1lY2hhcnRzLXRoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7O0dBT0c7QUFFSCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTlDLE1BQU0sS0FBSyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO0FBQ3pDLE1BQU0sSUFBSSxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDO0FBRXZDLE1BQU0sYUFBYSxHQUFHO0lBQ3BCLElBQUksRUFBRTtRQUNKLElBQUksQ0FBQyxhQUFhLEVBQVEsT0FBTztRQUNqQyxzQkFBc0IsRUFBSSxzQkFBc0I7UUFDaEQsd0JBQXdCLEVBQUUsd0JBQXdCO1FBQ2xELElBQUksQ0FBQyxhQUFhLEVBQVEsZUFBZTtRQUN6QyxJQUFJLENBQUMsYUFBYSxFQUFRLFFBQVE7UUFDbEMsSUFBSSxDQUFDLFdBQVcsRUFBVSxXQUFXO0tBQ3RDO0lBQ0QsS0FBSyxFQUFFO1FBQ0wsS0FBSyxDQUFDLGFBQWE7UUFDbkIsd0JBQXdCLEVBQUcsc0JBQXNCO1FBQ2pELHdCQUF3QixFQUFHLHdCQUF3QjtRQUNuRCxLQUFLLENBQUMsYUFBYTtRQUNuQixLQUFLLENBQUMsYUFBYTtRQUNuQixLQUFLLENBQUMsV0FBVztLQUNsQjtDQUNGLENBQUM7QUFFRixNQUFNLFVBQVUsc0JBQXNCLENBQUMsUUFBaUI7SUFDdEQsT0FBTyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUM7QUFDN0QsQ0FBQztBQUVELE1BQU0sVUFBVSxzQkFBc0IsQ0FBQyxRQUFpQjtJQUN0RCxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ3ZDLE9BQU87UUFDTCxlQUFlLEVBQUUsYUFBYTtRQUM5QixTQUFTLEVBQUU7WUFDVCxLQUFLLEVBQUUsTUFBTSxDQUFDLGFBQWE7WUFDM0IsVUFBVSxFQUFFLDJEQUEyRDtZQUN2RSxRQUFRLEVBQUUsRUFBRTtTQUNiO1FBQ0QsS0FBSyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLElBQUk7UUFDMUQsT0FBTyxFQUFFO1lBQ1AsZUFBZSxFQUFFLE1BQU0sQ0FBQyxTQUFTO1lBQ2pDLFdBQVcsRUFBRSxNQUFNLENBQUMsYUFBYTtZQUNqQyxTQUFTLEVBQUU7Z0JBQ1QsS0FBSyxFQUFFLE1BQU0sQ0FBQyxXQUFXO2dCQUN6QixRQUFRLEVBQUUsRUFBRTthQUNiO1lBQ0QsT0FBTyxFQUFFLElBQUk7U0FDZDtRQUNELE1BQU0sRUFBRTtZQUNOLFNBQVMsRUFBRTtnQkFDVCxLQUFLLEVBQUUsTUFBTSxDQUFDLGFBQWE7Z0JBQzNCLFFBQVEsRUFBRSxFQUFFO2FBQ2I7U0FDRjtLQUNGLENBQUM7QUFDSixDQUFDO0FBRUQ7OztHQUdHO0FBQ0gsTUFBTSxVQUFVLGNBQWMsQ0FBQyxRQUFpQjtJQUM5QyxPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7QUFDakMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1lY2hhcnRzLXRoZW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1lY2hhcnRzLXRoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7OztHQVdHO0FBRUgsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5QyxNQUFNLEtBQUssR0FBRyxhQUFhLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztBQUN6QyxNQUFNLElBQUksR0FBRyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztBQUV2Qzs7OztHQUlHO0FBQ0gsTUFBTSxhQUFhLEdBQUc7SUFDcEIsSUFBSSxFQUFFO1FBQ0osU0FBUyxFQUFHLG1DQUFtQztRQUMvQyxTQUFTLEVBQUcsV0FBVztRQUN2QixTQUFTLEVBQUcsYUFBYTtRQUN6QixTQUFTLEVBQUcsWUFBWTtRQUN4QixTQUFTLEVBQUcsY0FBYztRQUMxQixTQUFTLEVBQUcsV0FBVztLQUN4QjtJQUNELEtBQUssRUFBRTtRQUNMLFNBQVMsRUFBRyxXQUFXO1FBQ3ZCLFNBQVMsRUFBRyxXQUFXO1FBQ3ZCLFNBQVMsRUFBRyxhQUFhO1FBQ3pCLFNBQVMsRUFBRyxZQUFZO1FBQ3hCLFNBQVMsRUFBRyxjQUFjO1FBQzFCLFNBQVMsRUFBRyxXQUFXO0tBQ3hCO0NBQ0YsQ0FBQztBQUVGLE1BQU0sVUFBVSxzQkFBc0IsQ0FBQyxRQUFpQjtJQUN0RCxPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQztBQUM3RCxDQUFDO0FBRUQ7O0dBRUc7QUFDSCxNQUFNLFVBQVUsU0FBUyxDQUFDLEdBQVcsRUFBRSxLQUFhO0lBQ2xELE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUN4QyxNQUFNLENBQUMsR0FBRyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDeEMsTUFBTSxDQUFDLEdBQUcsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLE9BQU8sUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxLQUFLLEdBQUcsQ0FBQztBQUM1QyxDQUFDO0FBRUQsTUFBTSxVQUFVLHNCQUFzQixDQUFDLFFBQWlCO0lBQ3RELE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDdkMsT0FBTztRQUNMLGVBQWUsRUFBRSxhQUFhO1FBQzlCLFNBQVMsRUFBRTtZQUNULEtBQUssRUFBRSxNQUFNLENBQUMsYUFBYTtZQUMzQixVQUFVLEVBQUUsMkRBQTJEO1lBQ3ZFLFFBQVEsRUFBRSxFQUFFO1NBQ2I7UUFDRCxvRUFBb0U7UUFDcEUsbUVBQW1FO1FBQ25FLE9BQU8sRUFBRTtZQUNQLGVBQWUsRUFBRSxNQUFNLENBQUMsU0FBUztZQUNqQyxXQUFXLEVBQUUsTUFBTSxDQUFDLGFBQWE7WUFDakMsU0FBUyxFQUFFO2dCQUNULEtBQUssRUFBRSxNQUFNLENBQUMsV0FBVztnQkFDekIsUUFBUSxFQUFFLEVBQUU7YUFDYjtZQUNELE9BQU8sRUFBRSxJQUFJO1NBQ2Q7UUFDRCxNQUFNLEVBQUU7WUFDTixTQUFTLEVBQUU7Z0JBQ1QsS0FBSyxFQUFFLE1BQU0sQ0FBQyxhQUFhO2dCQUMzQixRQUFRLEVBQUUsRUFBRTthQUNiO1NBQ0Y7S0FDRixDQUFDO0FBQ0osQ0FBQztBQUVEOztHQUVHO0FBQ0gsTUFBTSxVQUFVLGNBQWMsQ0FBQyxRQUFpQjtJQUM5QyxPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7QUFDakMsQ0FBQyJ9

package/dist_ts_web/elements/00group-chart/dees-chart-radar/component.js

@@ -37,7 +37,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
 import { demoFunc } from './demo.js';
 import { radarStyles } from './styles.js';
 import { renderChartRadar } from './template.js';
-import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
 let DeesChartRadar = (() => {
     let _classDecorators = [customElement('dees-chart-radar')];
     let _classDescriptor;
@@ -103,16 +103,17 @@ let DeesChartRadar = (() => {
         buildOption() {
             const colors = getThemeColors(this.goBright);
             const seriesColors = getEchartsSeriesColors(this.goBright);
+            const fillAlpha = this.goBright ? 0.1 : 0.15;
             const seriesData = this.series.map((s, index) => {
                 const color = s.color || seriesColors[index % seriesColors.length];
                 return {
                     name: s.name,
                     value: s.values,
-                    itemStyle: { color },
-                    lineStyle: { color, width: 2 },
-                    areaStyle: this.fillArea ? { color, opacity: 0.15 } : undefined,
+                    itemStyle: { color, borderColor: color, borderWidth: 1 },
+                    lineStyle: { color, width: 1.5 },
+                    areaStyle: this.fillArea ? { color: hexToRgba(color, fillAlpha) } : undefined,
                     symbol: 'circle',
-                    symbolSize: 6,
+                    symbolSize: 5,
                 };
             });
             return {
@@ -173,4 +174,4 @@ let DeesChartRadar = (() => {
     return DeesChartRadar = _classThis;
 })();
 export { DeesChartRadar };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1yYWRhci9jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDckUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsY0FBYyxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7SUFvQjNFLGNBQWM7NEJBRDFCLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQzs7OztzQkFDRSxvQkFBb0I7Ozs7Ozs7Ozs7Ozs7OEJBQTVCLFNBQVEsV0FBb0I7Ozs7c0NBSXJELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztrQ0FHekIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO3NDQUd6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7b0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztZQVI1QixtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQXlCO1lBRzVDLHVLQUFTLE1BQU0sNkJBQU4sTUFBTSx1RkFBMEI7WUFHekMsbUxBQVMsVUFBVSw2QkFBVixVQUFVLCtGQUFpQjtZQUdwQyw2S0FBUyxRQUFRLDZCQUFSLFFBQVEsMkZBQWlCO1lBZHBDLDZLQW1H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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1yYWRhci9jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDckUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0lBb0J0RixjQUFjOzRCQUQxQixhQUFhLENBQUMsa0JBQWtCLENBQUM7Ozs7c0JBQ0Usb0JBQW9COzs7Ozs7Ozs7Ozs7OzhCQUE1QixTQUFRLFdBQW9COzs7O3NDQUlyRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7a0NBR3pCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztzQ0FHekIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO29DQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFSNUIsbUxBQVMsVUFBVSw2QkFBVixVQUFVLCtGQUF5QjtZQUc1Qyx1S0FBUyxNQUFNLDZCQUFOLE1BQU0sdUZBQTBCO1lBR3pDLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBaUI7WUFHcEMsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFpQjtZ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

package/dist_ts_web/elements/00group-layout/dees-heading/dees-heading.js

@@ -89,7 +89,7 @@ let DeesHeading = (() => {
         align-items: center;
         text-align: center;
         margin: 16px 0;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: ${cssManager.bdTheme('#999', '#555')};
       }
       /* Fade lines toward and away from text for hr style */
       .heading-hr::before {

package/dist_watch/bundle.js

@@ -178974,34 +178974,45 @@ var light = themeDefaults.colors.light;
 var dark2 = themeDefaults.colors.dark;
 var SERIES_COLORS = {
   dark: [
-    dark2.accentPrimary,
-    // blue
-    "hsl(173.4 80.4% 40%)",
-    // teal (no token yet)
-    "hsl(280.3 87.4% 66.7%)",
-    // purple (no token yet)
-    dark2.accentWarning,
-    // orange/amber
-    dark2.accentSuccess,
-    // green
-    dark2.accentError
-    // rose/red
+    "#60a5fa",
+    // blue-400   — softer in dark mode
+    "#2dd4bf",
+    // teal-400
+    "#a78bfa",
+    // violet-400
+    "#fbbf24",
+    // amber-400
+    "#34d399",
+    // emerald-400
+    "#fb7185"
+    // rose-400
   ],
   light: [
-    light.accentPrimary,
-    "hsl(142.1 76.2% 36.3%)",
-    // teal (no token yet)
-    "hsl(280.3 47.7% 50.2%)",
-    // purple (no token yet)
-    light.accentWarning,
-    light.accentSuccess,
-    light.accentError
+    "#3b82f6",
+    // blue-500
+    "#14b8a6",
+    // teal-500
+    "#8b5cf6",
+    // violet-500
+    "#f59e0b",
+    // amber-500
+    "#10b981",
+    // emerald-500
+    "#f43f5e"
+    // rose-500
   ]
 };
 function getEchartsSeriesColors(goBright) {
   return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
 }
 __name(getEchartsSeriesColors, "getEchartsSeriesColors");
+function hexToRgba(hex2, alpha2) {
+  const r11 = parseInt(hex2.slice(1, 3), 16);
+  const g4 = parseInt(hex2.slice(3, 5), 16);
+  const b5 = parseInt(hex2.slice(5, 7), 16);
+  return `rgba(${r11}, ${g4}, ${b5}, ${alpha2})`;
+}
+__name(hexToRgba, "hexToRgba");
 function getEchartsThemeOptions(goBright) {
   const colors8 = goBright ? light : dark2;
   return {
@@ -179011,7 +179022,8 @@ function getEchartsThemeOptions(goBright) {
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
       fontSize: 12
     },
-    color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
+    // No global `color` array — each component sets per-item/per-series
+    // colors explicitly to avoid conflicts during emphasis animations.
     tooltip: {
       backgroundColor: colors8.bgPrimary,
       borderColor: colors8.borderDefault,
@@ -179080,7 +179092,7 @@ var _DeesChartEchartsBase = class _DeesChartEchartsBase extends (_a55 = DeesElem
     const chartContainer = this.shadowRoot.querySelector(".chartContainer");
     if (!chartContainer) return;
     try {
-      this.chartInstance = this.echartsBundle.init(chartContainer);
+      this.chartInstance = this.echartsBundle.init(chartContainer, null, { renderer: "svg" });
       this.updateChart();
       this.resizeObserver = new ResizeObserver(() => {
         this.chartInstance?.resize();
@@ -179104,7 +179116,12 @@ var _DeesChartEchartsBase = class _DeesChartEchartsBase extends (_a55 = DeesElem
       ...themeOptions,
       ...chartOption,
       textStyle: { ...themeOptions.textStyle, ...chartOption.textStyle || {} },
-      tooltip: { ...themeOptions.tooltip, ...chartOption.tooltip || {} }
+      tooltip: { ...themeOptions.tooltip, ...chartOption.tooltip || {} },
+      legend: {
+        ...themeOptions.legend,
+        ...chartOption.legend || {},
+        textStyle: { ...themeOptions.legend?.textStyle || {}, ...chartOption.legend?.textStyle || {} }
+      }
     };
     this.chartInstance.setOption(merged, true);
   }
@@ -179336,26 +179353,38 @@ var _DeesChartBar = class _DeesChartBar extends (_a56 = DeesChartEchartsBase, _c
       },
       splitLine: { lineStyle: { color: colors8.borderSubtle } }
     };
-    const seriesData = this.series.map((s10, index3) => ({
-      name: s10.name,
-      type: "bar",
-      data: s10.data,
-      stack: this.stacked ? "total" : void 0,
-      itemStyle: {
-        color: s10.color || seriesColors[index3 % seriesColors.length],
-        borderRadius: this.stacked ? [0, 0, 0, 0] : this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      },
-      barMaxWidth: 40,
-      emphasis: {
+    const fillAlpha = this.goBright ? 0.15 : 0.25;
+    const borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+    const noBorderRadius = [0, 0, 0, 0];
+    const legendData = [];
+    const seriesData = this.series.map((s10, index3) => {
+      const color2 = s10.color || seriesColors[index3 % seriesColors.length];
+      legendData.push({ name: s10.name, itemStyle: { color: color2 } });
+      return {
+        name: s10.name,
+        type: "bar",
+        data: s10.data,
+        stack: this.stacked ? "total" : void 0,
         itemStyle: {
-          shadowBlur: 6,
-          shadowColor: "rgba(0, 0, 0, 0.15)"
+          color: hexToRgba(color2, fillAlpha),
+          borderColor: color2,
+          borderWidth: 1,
+          borderRadius: this.stacked ? noBorderRadius : borderRadius
+        },
+        barMaxWidth: 40,
+        barGap: "20%",
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color2, fillAlpha + 0.15),
+            borderColor: color2,
+            borderWidth: 1.5
+          }
         }
-      }
-    }));
+      };
+    });
     if (this.stacked && seriesData.length > 0) {
       const last3 = seriesData[seriesData.length - 1];
-      last3.itemStyle.borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+      last3.itemStyle.borderRadius = borderRadius;
     }
     return {
       tooltip: {
@@ -179365,12 +179394,14 @@ var _DeesChartBar = class _DeesChartBar extends (_a56 = DeesChartEchartsBase, _c
           const items = Array.isArray(params2) ? params2 : [params2];
           let result = `<strong>${items[0].axisValueLabel}</strong><br/>`;
           for (const p7 of items) {
-            result += `${p7.marker} ${p7.seriesName}: <strong>${formatter2(p7.value)}</strong><br/>`;
+            const solidColor = p7.borderColor || p7.color;
+            const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+            result += `${marker}${p7.seriesName}: <strong>${formatter2(p7.value)}</strong><br/>`;
           }
           return result;
         }, "formatter")
       },
-      legend: this.showLegend && this.series.length > 1 ? { bottom: 8, itemWidth: 10, itemHeight: 10 } : { show: false },
+      legend: this.showLegend && this.series.length > 1 ? { bottom: 8, itemWidth: 10, itemHeight: 10, data: legendData } : { show: false },
       grid: {
         left: 16,
         right: 16,
@@ -179533,6 +179564,9 @@ var donutStyles = [
     :host {
       height: 360px;
     }
+    .chartContainer {
+      inset: 12px 0;
+    }
   `
 ];
 
@@ -179572,19 +179606,38 @@ var _DeesChartDonut = class _DeesChartDonut extends (_a57 = DeesChartEchartsBase
     }
   }
   buildOption() {
-    const colors8 = getThemeColors(this.goBright);
+    const themeColors = getThemeColors(this.goBright);
     const seriesColors = getEchartsSeriesColors(this.goBright);
-    const data = this.data.map((item, index3) => ({
-      name: item.name,
-      value: item.value,
-      itemStyle: item.color ? { color: item.color } : { color: seriesColors[index3 % seriesColors.length] }
-    }));
+    const fillAlpha = this.goBright ? 0.15 : 0.2;
+    const legendData = [];
+    const data = this.data.map((item, index3) => {
+      const color2 = item.color || seriesColors[index3 % seriesColors.length];
+      legendData.push({ name: item.name, itemStyle: { color: color2 } });
+      return {
+        name: item.name,
+        value: item.value,
+        itemStyle: {
+          color: hexToRgba(color2, fillAlpha),
+          borderColor: color2,
+          borderWidth: 1
+        },
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color2, fillAlpha + 0.15),
+            borderColor: color2,
+            borderWidth: 1.5
+          }
+        }
+      };
+    });
     const formatter2 = this.valueFormatter;
     return {
       tooltip: {
         trigger: "item",
         formatter: /* @__PURE__ */ __name((params2) => {
-          return `${params2.marker} ${params2.name}: <strong>${formatter2(params2.value)}</strong> (${params2.percent}%)`;
+          const solidColor = params2.data?.itemStyle?.borderColor || params2.color;
+          const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+          return `${marker}${params2.name}: <strong>${formatter2(params2.value)}</strong> (${params2.percent}%)`;
         }, "formatter")
       },
       legend: this.showLegend ? {
@@ -179594,6 +179647,7 @@ var _DeesChartDonut = class _DeesChartDonut extends (_a57 = DeesChartEchartsBase
         itemWidth: 10,
         itemHeight: 10,
         itemGap: 12,
+        data: legendData,
         formatter: /* @__PURE__ */ __name((name) => {
           const item = this.data.find((d6) => d6.name === name);
           return item ? `${name}  ${formatter2(item.value)}` : name;
@@ -179605,29 +179659,17 @@ var _DeesChartDonut = class _DeesChartDonut extends (_a57 = DeesChartEchartsBase
           radius: [this.innerRadiusPercent, "85%"],
           center: this.showLegend ? ["35%", "50%"] : ["50%", "50%"],
           avoidLabelOverlap: true,
+          padAngle: 2,
           itemStyle: {
-            borderRadius: 4,
-            borderColor: "transparent",
-            borderWidth: 2
+            borderRadius: 4
           },
           label: this.showLabels ? {
             show: true,
             formatter: "{b}: {d}%",
             fontSize: 11,
-            color: colors8.textSecondary,
+            color: themeColors.textSecondary,
             textBorderColor: "transparent"
           } : { show: false },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.2)"
-            },
-            label: {
-              show: true,
-              fontWeight: "bold"
-            }
-          },
           data
         }
       ]
@@ -181120,16 +181162,17 @@ var _DeesChartRadar = class _DeesChartRadar extends (_a60 = DeesChartEchartsBase
   buildOption() {
     const colors8 = getThemeColors(this.goBright);
     const seriesColors = getEchartsSeriesColors(this.goBright);
+    const fillAlpha = this.goBright ? 0.1 : 0.15;
     const seriesData = this.series.map((s10, index3) => {
       const color2 = s10.color || seriesColors[index3 % seriesColors.length];
       return {
         name: s10.name,
         value: s10.values,
-        itemStyle: { color: color2 },
-        lineStyle: { color: color2, width: 2 },
-        areaStyle: this.fillArea ? { color: color2, opacity: 0.15 } : void 0,
+        itemStyle: { color: color2, borderColor: color2, borderWidth: 1 },
+        lineStyle: { color: color2, width: 1.5 },
+        areaStyle: this.fillArea ? { color: hexToRgba(color2, fillAlpha) } : void 0,
         symbol: "circle",
-        symbolSize: 6
+        symbolSize: 5
       };
     });
     return {
@@ -189836,7 +189879,7 @@ __publicField(_DeesHeading, "styles", [
         align-items: center;
         text-align: center;
         margin: 16px 0;
-        color: ${cssManager.bdTheme("#000", "#fff")};
+        color: ${cssManager.bdTheme("#999", "#555")};
       }
       /* Fade lines toward and away from text for hr style */
       .heading-hr::before {