@ktnpm_devops/react-component 0.15.0 → 0.16.0

package/dist/index95.js

@@ -1,21 +1,42 @@
-const region = "krc-region-4A3qS";
-const toast = "krc-toast-VuzaK";
-const toastIn = "krc-toast-in-TA6-r";
-const success = "krc-success-oDnTy";
-const error = "krc-error-dSTQn";
+const throbber = "krc-throbber-sSMfc";
+const spinner = "krc-spinner-vmNIY";
+const loadingSpin = "krc-loading-spin-cFeV6";
+const titleRow = "krc-titleRow--Go1f";
+const titleSpinner = "krc-titleSpinner-BPUs5";
+const steps = "krc-steps-zu1EV";
+const step = "krc-step-hzz-Q";
+const pending = "krc-pending-sxbM4";
+const iconSlot = "krc-iconSlot-74ZD2";
+const stepSpinner = "krc-stepSpinner-0d1jM";
+const checkIcon = "krc-checkIcon-FhWlj";
+const nonClosable = "krc-nonClosable-7NB7j";
 const styles = {
-  region,
-  toast,
-  toastIn,
-  success,
-  error
+  throbber,
+  spinner,
+  loadingSpin,
+  titleRow,
+  titleSpinner,
+  steps,
+  step,
+  pending,
+  iconSlot,
+  stepSpinner,
+  checkIcon,
+  nonClosable
 };
 export {
+  checkIcon,
   styles as default,
-  error,
-  region,
-  success,
-  toast,
-  toastIn
+  iconSlot,
+  loadingSpin,
+  nonClosable,
+  pending,
+  spinner,
+  step,
+  stepSpinner,
+  steps,
+  throbber,
+  titleRow,
+  titleSpinner
 };
 //# sourceMappingURL=index95.js.map

package/dist/index95.js.map

@@ -1 +1 @@
-{"version":3,"file":"index95.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index95.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index96.cjs

@@ -1,21 +1,36 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-oc0XP";
-const success = "krc-success-JzpGX";
-const warning = "krc-warning-lTskX";
-const danger = "krc-danger-zFPHk";
-const info = "krc-info-k9uTn";
+const root = "krc-root-rUudF";
+const header = "krc-header-zjbPA";
+const title = "krc-title-ScYja";
+const timeRangeGroup = "krc-timeRangeGroup-FP1TP";
+const timeRangeButton = "krc-timeRangeButton-9XCxb";
+const timeRangeButtonActive = "krc-timeRangeButtonActive-Y-KCh";
+const chartContainer = "krc-chartContainer-6rb4Z";
+const loading = "krc-loading-EWhol";
+const error = "krc-error-erDaP";
+const empty = "krc-empty---cYi";
 const styles = {
   root,
-  success,
-  warning,
-  danger,
-  info
+  header,
+  title,
+  timeRangeGroup,
+  timeRangeButton,
+  timeRangeButtonActive,
+  chartContainer,
+  loading,
+  error,
+  empty
 };
-exports.danger = danger;
+exports.chartContainer = chartContainer;
 exports.default = styles;
-exports.info = info;
+exports.empty = empty;
+exports.error = error;
+exports.header = header;
+exports.loading = loading;
 exports.root = root;
-exports.success = success;
-exports.warning = warning;
+exports.timeRangeButton = timeRangeButton;
+exports.timeRangeButtonActive = timeRangeButtonActive;
+exports.timeRangeGroup = timeRangeGroup;
+exports.title = title;
 //# sourceMappingURL=index96.cjs.map

package/dist/index96.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index96.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index96.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index96.js

@@ -1,21 +1,36 @@
-const root = "krc-root-oc0XP";
-const success = "krc-success-JzpGX";
-const warning = "krc-warning-lTskX";
-const danger = "krc-danger-zFPHk";
-const info = "krc-info-k9uTn";
+const root = "krc-root-rUudF";
+const header = "krc-header-zjbPA";
+const title = "krc-title-ScYja";
+const timeRangeGroup = "krc-timeRangeGroup-FP1TP";
+const timeRangeButton = "krc-timeRangeButton-9XCxb";
+const timeRangeButtonActive = "krc-timeRangeButtonActive-Y-KCh";
+const chartContainer = "krc-chartContainer-6rb4Z";
+const loading = "krc-loading-EWhol";
+const error = "krc-error-erDaP";
+const empty = "krc-empty---cYi";
 const styles = {
   root,
-  success,
-  warning,
-  danger,
-  info
+  header,
+  title,
+  timeRangeGroup,
+  timeRangeButton,
+  timeRangeButtonActive,
+  chartContainer,
+  loading,
+  error,
+  empty
 };
 export {
-  danger,
+  chartContainer,
   styles as default,
-  info,
+  empty,
+  error,
+  header,
+  loading,
   root,
-  success,
-  warning
+  timeRangeButton,
+  timeRangeButtonActive,
+  timeRangeGroup,
+  title
 };
 //# sourceMappingURL=index96.js.map

package/dist/index96.js.map

@@ -1 +1 @@
-{"version":3,"file":"index96.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index96.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index97.cjs

@@ -1,30 +1,25 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-ZwPiG";
-const label = "krc-label-WG17f";
-const value = "krc-value-S9SSu";
-const red = "krc-red-stqO-";
-const amber = "krc-amber-lZgsd";
-const sub = "krc-sub-0xfrv";
-const isClick = "krc-isClick-CnKvM";
-const isActive = "krc-isActive-YLCNL";
-const styles = {
-  root,
-  label,
-  value,
-  red,
-  amber,
-  sub,
-  isClick,
-  isActive
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const merge = (a, b) => a == null ? b : b == null ? a : a + b;
+const pivotGroupedBars = (data) => {
+  const categories = /* @__PURE__ */ new Set();
+  const cells = /* @__PURE__ */ new Map();
+  for (const { category, series: series2, value } of data) {
+    categories.add(category);
+    let row = cells.get(series2);
+    if (!row) {
+      row = /* @__PURE__ */ new Map();
+      cells.set(series2, row);
+    }
+    row.set(category, row.has(category) ? merge(row.get(category) ?? null, value) : value);
+  }
+  const categoryList = [...categories];
+  const series = [...cells.entries()].map(([name, row]) => ({
+    name,
+    values: categoryList.map((category) => row.get(category) ?? null)
+  }));
+  const hasValues = series.some((s) => s.values.some((v) => v != null));
+  return { categories: categoryList, series, hasValues };
 };
-exports.amber = amber;
-exports.default = styles;
-exports.isActive = isActive;
-exports.isClick = isClick;
-exports.label = label;
-exports.red = red;
-exports.root = root;
-exports.sub = sub;
-exports.value = value;
+exports.pivotGroupedBars = pivotGroupedBars;
 //# sourceMappingURL=index97.cjs.map

package/dist/index97.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index97.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index97.cjs","sources":["../src/charts/GroupedBarChartCard/pivotGroupedBars.ts"],"sourcesContent":["import type { GroupedBarPoint } from '../../types/chart.types';\n\n/** One series with its values aligned to `categories`; `null` is a gap. */\nexport interface PivotedSeries {\n  name: string;\n  values: (number | null)[];\n}\n\n/** Category × series matrix of a grouped bar chart. */\nexport interface GroupedBarPivot {\n  /** First-seen order. */\n  categories: string[];\n  /** First-seen order. */\n  series: PivotedSeries[];\n  /** Whether any value is non-null — false means there is nothing to draw. */\n  hasValues: boolean;\n}\n\n/** `null` adds nothing: only nulls stay a gap. */\nconst merge = (a: number | null, b: number | null) => (a == null ? b : b == null ? a : a + b);\n\n/**\n * Pivot points into a category × series matrix, keeping first-appearance order,\n * summing repeated pairs and filling missing pairs with `null` — never `0`.\n */\nexport const pivotGroupedBars = (data: GroupedBarPoint[]): GroupedBarPivot => {\n  const categories = new Set<string>();\n  const cells = new Map<string, Map<string, number | null>>();\n\n  for (const { category, series, value } of data) {\n    categories.add(category);\n    let row = cells.get(series);\n    if (!row) {\n      row = new Map();\n      cells.set(series, row);\n    }\n    row.set(category, row.has(category) ? merge(row.get(category) ?? null, value) : value);\n  }\n\n  const categoryList = [...categories];\n  const series = [...cells.entries()].map(([name, row]) => ({\n    name,\n    values: categoryList.map((category) => row.get(category) ?? null),\n  }));\n  const hasValues = series.some((s) => s.values.some((v) => v != null));\n\n  return { categories: categoryList, series, hasValues };\n};\n"],"names":["series"],"mappings":";;AAmBA,MAAM,QAAQ,CAAC,GAAkB,MAAsB,KAAK,OAAO,IAAI,KAAK,OAAO,IAAI,IAAI;AAMpF,MAAM,mBAAmB,CAAC,SAA6C;AAC5E,QAAM,iCAAiB,IAAA;AACvB,QAAM,4BAAY,IAAA;AAElB,aAAW,EAAE,UAAU,QAAAA,SAAQ,MAAA,KAAW,MAAM;AAC9C,eAAW,IAAI,QAAQ;AACvB,QAAI,MAAM,MAAM,IAAIA,OAAM;AAC1B,QAAI,CAAC,KAAK;AACR,gCAAU,IAAA;AACV,YAAM,IAAIA,SAAQ,GAAG;AAAA,IACvB;AACA,QAAI,IAAI,UAAU,IAAI,IAAI,QAAQ,IAAI,MAAM,IAAI,IAAI,QAAQ,KAAK,MAAM,KAAK,IAAI,KAAK;AAAA,EACvF;AAEA,QAAM,eAAe,CAAC,GAAG,UAAU;AACnC,QAAM,SAAS,CAAC,GAAG,MAAM,QAAA,CAAS,EAAE,IAAI,CAAC,CAAC,MAAM,GAAG,OAAO;AAAA,IACxD;AAAA,IACA,QAAQ,aAAa,IAAI,CAAC,aAAa,IAAI,IAAI,QAAQ,KAAK,IAAI;AAAA,EAAA,EAChE;AACF,QAAM,YAAY,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;AAEpE,SAAO,EAAE,YAAY,cAAc,QAAQ,UAAA;AAC7C;;"}

package/dist/index97.js

@@ -1,30 +1,25 @@
-const root = "krc-root-ZwPiG";
-const label = "krc-label-WG17f";
-const value = "krc-value-S9SSu";
-const red = "krc-red-stqO-";
-const amber = "krc-amber-lZgsd";
-const sub = "krc-sub-0xfrv";
-const isClick = "krc-isClick-CnKvM";
-const isActive = "krc-isActive-YLCNL";
-const styles = {
-  root,
-  label,
-  value,
-  red,
-  amber,
-  sub,
-  isClick,
-  isActive
+const merge = (a, b) => a == null ? b : b == null ? a : a + b;
+const pivotGroupedBars = (data) => {
+  const categories = /* @__PURE__ */ new Set();
+  const cells = /* @__PURE__ */ new Map();
+  for (const { category, series: series2, value } of data) {
+    categories.add(category);
+    let row = cells.get(series2);
+    if (!row) {
+      row = /* @__PURE__ */ new Map();
+      cells.set(series2, row);
+    }
+    row.set(category, row.has(category) ? merge(row.get(category) ?? null, value) : value);
+  }
+  const categoryList = [...categories];
+  const series = [...cells.entries()].map(([name, row]) => ({
+    name,
+    values: categoryList.map((category) => row.get(category) ?? null)
+  }));
+  const hasValues = series.some((s) => s.values.some((v) => v != null));
+  return { categories: categoryList, series, hasValues };
 };
 export {
-  amber,
-  styles as default,
-  isActive,
-  isClick,
-  label,
-  red,
-  root,
-  sub,
-  value
+  pivotGroupedBars
 };
 //# sourceMappingURL=index97.js.map

package/dist/index97.js.map

@@ -1 +1 @@
-{"version":3,"file":"index97.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index97.js","sources":["../src/charts/GroupedBarChartCard/pivotGroupedBars.ts"],"sourcesContent":["import type { GroupedBarPoint } from '../../types/chart.types';\n\n/** One series with its values aligned to `categories`; `null` is a gap. */\nexport interface PivotedSeries {\n  name: string;\n  values: (number | null)[];\n}\n\n/** Category × series matrix of a grouped bar chart. */\nexport interface GroupedBarPivot {\n  /** First-seen order. */\n  categories: string[];\n  /** First-seen order. */\n  series: PivotedSeries[];\n  /** Whether any value is non-null — false means there is nothing to draw. */\n  hasValues: boolean;\n}\n\n/** `null` adds nothing: only nulls stay a gap. */\nconst merge = (a: number | null, b: number | null) => (a == null ? b : b == null ? a : a + b);\n\n/**\n * Pivot points into a category × series matrix, keeping first-appearance order,\n * summing repeated pairs and filling missing pairs with `null` — never `0`.\n */\nexport const pivotGroupedBars = (data: GroupedBarPoint[]): GroupedBarPivot => {\n  const categories = new Set<string>();\n  const cells = new Map<string, Map<string, number | null>>();\n\n  for (const { category, series, value } of data) {\n    categories.add(category);\n    let row = cells.get(series);\n    if (!row) {\n      row = new Map();\n      cells.set(series, row);\n    }\n    row.set(category, row.has(category) ? merge(row.get(category) ?? null, value) : value);\n  }\n\n  const categoryList = [...categories];\n  const series = [...cells.entries()].map(([name, row]) => ({\n    name,\n    values: categoryList.map((category) => row.get(category) ?? null),\n  }));\n  const hasValues = series.some((s) => s.values.some((v) => v != null));\n\n  return { categories: categoryList, series, hasValues };\n};\n"],"names":["series"],"mappings":"AAmBA,MAAM,QAAQ,CAAC,GAAkB,MAAsB,KAAK,OAAO,IAAI,KAAK,OAAO,IAAI,IAAI;AAMpF,MAAM,mBAAmB,CAAC,SAA6C;AAC5E,QAAM,iCAAiB,IAAA;AACvB,QAAM,4BAAY,IAAA;AAElB,aAAW,EAAE,UAAU,QAAAA,SAAQ,MAAA,KAAW,MAAM;AAC9C,eAAW,IAAI,QAAQ;AACvB,QAAI,MAAM,MAAM,IAAIA,OAAM;AAC1B,QAAI,CAAC,KAAK;AACR,gCAAU,IAAA;AACV,YAAM,IAAIA,SAAQ,GAAG;AAAA,IACvB;AACA,QAAI,IAAI,UAAU,IAAI,IAAI,QAAQ,IAAI,MAAM,IAAI,IAAI,QAAQ,KAAK,MAAM,KAAK,IAAI,KAAK;AAAA,EACvF;AAEA,QAAM,eAAe,CAAC,GAAG,UAAU;AACnC,QAAM,SAAS,CAAC,GAAG,MAAM,QAAA,CAAS,EAAE,IAAI,CAAC,CAAC,MAAM,GAAG,OAAO;AAAA,IACxD;AAAA,IACA,QAAQ,aAAa,IAAI,CAAC,aAAa,IAAI,IAAI,QAAQ,KAAK,IAAI;AAAA,EAAA,EAChE;AACF,QAAM,YAAY,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;AAEpE,SAAO,EAAE,YAAY,cAAc,QAAQ,UAAA;AAC7C;"}

package/dist/index98.cjs

@@ -1,24 +1,72 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-tsCGC";
-const input = "krc-input--stjU";
-const label = "krc-label-KD6pE";
-const disabled = "krc-disabled-ugpPh";
-const sm = "krc-sm-8drDq";
-const md = "krc-md-IG7oy";
-const styles = {
-  root,
-  input,
-  label,
-  disabled,
-  sm,
-  md
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const constants = require("./index63.cjs");
+const { GRID_MARGIN, AXIS_NAME_GAP } = constants.GROUPED_BAR;
+const escapeHtml = (value) => value.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+const colorFor = (name, index, seriesColors) => (seriesColors == null ? void 0 : seriesColors[name]) ?? constants.CHART_COLORS[index % constants.CHART_COLORS.length];
+const markerFor = (color) => {
+  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = constants.GROUPED_BAR;
+  return `<span style="display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};"></span>`;
 };
-exports.default = styles;
-exports.disabled = disabled;
-exports.input = input;
-exports.label = label;
-exports.md = md;
-exports.root = root;
-exports.sm = sm;
+const buildTooltipFormatter = (pivot, colors, noValueText) => (params) => {
+  const first = Array.isArray(params) ? params[0] : params;
+  const index = first == null ? void 0 : first.dataIndex;
+  if (index == null || index >= pivot.categories.length) return "";
+  const lines = [escapeHtml(pivot.categories[index])];
+  pivot.series.forEach((s, i) => {
+    const value = s.values[index];
+    const text = value == null ? escapeHtml(noValueText) : String(value);
+    lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);
+  });
+  return lines.join("<br/>");
+};
+const buildGrid = (config) => {
+  const named = Boolean(config.valueLabel);
+  return {
+    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),
+    right: GRID_MARGIN.RIGHT,
+    top: GRID_MARGIN.TOP,
+    // Room for a horizontal value-axis name and the legend, each only when drawn.
+    bottom: GRID_MARGIN.BASE + (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) + (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),
+    containLabel: true
+  };
+};
+const buildGroupedBarOption = (pivot, config) => {
+  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));
+  const categoryAxis = {
+    type: "category",
+    data: pivot.categories,
+    // Horizontal bars read top-down, so the first category goes on top.
+    inverse: config.invertAxis
+  };
+  const valueAxis = {
+    type: "value",
+    name: config.valueLabel,
+    nameLocation: "middle",
+    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,
+    // Without this a vertical axis name is drawn horizontally and eats the plot's width.
+    nameRotate: config.invertAxis ? 0 : 90,
+    minInterval: config.integerValues ? 1 : void 0
+  };
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: buildTooltipFormatter(pivot, colors, config.noValueText)
+    },
+    legend: { show: !config.hideLegend, bottom: 0, type: "scroll" },
+    grid: buildGrid(config),
+    xAxis: config.invertAxis ? valueAxis : categoryAxis,
+    yAxis: config.invertAxis ? categoryAxis : valueAxis,
+    series: pivot.series.map((s, i) => ({
+      name: s.name,
+      type: "bar",
+      data: s.values,
+      barMinHeight: constants.GROUPED_BAR.MIN_BAR_HEIGHT,
+      itemStyle: { color: colors[i] },
+      emphasis: { focus: "series" }
+    }))
+  };
+};
+exports.buildGroupedBarOption = buildGroupedBarOption;
 //# sourceMappingURL=index98.cjs.map

package/dist/index98.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index98.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index98.cjs","sources":["../src/charts/GroupedBarChartCard/buildGroupedBarOption.ts"],"sourcesContent":["import type { GroupedBarPivot } from './pivotGroupedBars';\nimport { CHART_COLORS, GROUPED_BAR } from '../../constants';\n\nexport interface GroupedBarOptionConfig {\n  seriesColors?: Readonly<Record<string, string>>;\n  invertAxis: boolean;\n  hideLegend: boolean;\n  integerValues: boolean;\n  valueLabel?: string;\n  /** Tooltip text for a gap. */\n  noValueText: string;\n}\n\nconst { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;\n\n/** Category and series names come from consumer data and land in the tooltip's HTML. */\nconst escapeHtml = (value: string) =>\n  value.replace(/[&<>\"]/g, (char) => `&#${char.charCodeAt(0)};`);\n\n/** Pinned colour first, else the palette by first-seen position. */\nconst colorFor = (name: string, index: number, seriesColors?: Readonly<Record<string, string>>) =>\n  seriesColors?.[name] ?? CHART_COLORS[index % CHART_COLORS.length];\n\nconst markerFor = (color: string) => {\n  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;\n  return `<span style=\"display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};\"></span>`;\n};\n\n/**\n * The tooltip is built from the pivot rather than from echarts' params, so every\n * series is listed in series order and a gap reads as `noValueText`, never `-`.\n */\nconst buildTooltipFormatter =\n  (pivot: GroupedBarPivot, colors: string[], noValueText: string) => (params: unknown) => {\n    const first = (Array.isArray(params) ? params[0] : params) as\n      | { dataIndex?: number }\n      | undefined;\n    const index = first?.dataIndex;\n    if (index == null || index >= pivot.categories.length) return '';\n\n    const lines = [escapeHtml(pivot.categories[index])];\n    pivot.series.forEach((s, i) => {\n      const value = s.values[index];\n      const text = value == null ? escapeHtml(noValueText) : String(value);\n      lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);\n    });\n\n    return lines.join('<br/>');\n  };\n\nconst buildGrid = (config: GroupedBarOptionConfig) => {\n  const named = Boolean(config.valueLabel);\n  return {\n    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),\n    right: GRID_MARGIN.RIGHT,\n    top: GRID_MARGIN.TOP,\n    // Room for a horizontal value-axis name and the legend, each only when drawn.\n    bottom:\n      GRID_MARGIN.BASE +\n      (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) +\n      (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),\n    containLabel: true,\n  };\n};\n\nexport const buildGroupedBarOption = (pivot: GroupedBarPivot, config: GroupedBarOptionConfig) => {\n  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));\n\n  const categoryAxis = {\n    type: 'category' as const,\n    data: pivot.categories,\n    // Horizontal bars read top-down, so the first category goes on top.\n    inverse: config.invertAxis,\n  };\n  const valueAxis = {\n    type: 'value' as const,\n    name: config.valueLabel,\n    nameLocation: 'middle' as const,\n    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,\n    // Without this a vertical axis name is drawn horizontally and eats the plot's width.\n    nameRotate: config.invertAxis ? 0 : 90,\n    minInterval: config.integerValues ? 1 : undefined,\n  };\n\n  return {\n    tooltip: {\n      trigger: 'axis' as const,\n      axisPointer: { type: 'shadow' as const },\n      formatter: buildTooltipFormatter(pivot, colors, config.noValueText),\n    },\n    legend: { show: !config.hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: buildGrid(config),\n    xAxis: config.invertAxis ? valueAxis : categoryAxis,\n    yAxis: config.invertAxis ? categoryAxis : valueAxis,\n    series: pivot.series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      data: s.values,\n      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,\n      itemStyle: { color: colors[i] },\n      emphasis: { focus: 'series' as const },\n    })),\n  };\n};\n"],"names":["GROUPED_BAR","CHART_COLORS"],"mappings":";;;AAaA,MAAM,EAAE,aAAa,cAAA,IAAkBA,UAAAA;AAGvC,MAAM,aAAa,CAAC,UAClB,MAAM,QAAQ,WAAW,CAAC,SAAS,KAAK,KAAK,WAAW,CAAC,CAAC,GAAG;AAG/D,MAAM,WAAW,CAAC,MAAc,OAAe,kBAC7C,6CAAe,UAASC,UAAAA,aAAa,QAAQA,UAAAA,aAAa,MAAM;AAElE,MAAM,YAAY,CAAC,UAAkB;AACnC,QAAM,EAAE,qBAAqB,MAAM,oBAAoB,QAAQD,UAAAA;AAC/D,SAAO,kDAAkD,GAAG,8BAA8B,IAAI,aAAa,IAAI,uBAAuB,WAAW,KAAK,CAAC;AACzJ;AAMA,MAAM,wBACJ,CAAC,OAAwB,QAAkB,gBAAwB,CAAC,WAAoB;AACtF,QAAM,QAAS,MAAM,QAAQ,MAAM,IAAI,OAAO,CAAC,IAAI;AAGnD,QAAM,QAAQ,+BAAO;AACrB,MAAI,SAAS,QAAQ,SAAS,MAAM,WAAW,OAAQ,QAAO;AAE9D,QAAM,QAAQ,CAAC,WAAW,MAAM,WAAW,KAAK,CAAC,CAAC;AAClD,QAAM,OAAO,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,QAAQ,EAAE,OAAO,KAAK;AAC5B,UAAM,OAAO,SAAS,OAAO,WAAW,WAAW,IAAI,OAAO,KAAK;AACnE,UAAM,KAAK,GAAG,UAAU,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAAA,EACpE,CAAC;AAED,SAAO,MAAM,KAAK,OAAO;AAC3B;AAEF,MAAM,YAAY,CAAC,WAAmC;AACpD,QAAM,QAAQ,QAAQ,OAAO,UAAU;AACvC,SAAO;AAAA,IACL,MAAM,YAAY,QAAQ,SAAS,CAAC,OAAO,aAAa,YAAY,eAAe;AAAA,IACnF,OAAO,YAAY;AAAA,IACnB,KAAK,YAAY;AAAA;AAAA,IAEjB,QACE,YAAY,QACX,SAAS,OAAO,aAAa,YAAY,eAAe,MACxD,OAAO,aAAa,IAAI,YAAY;AAAA,IACvC,cAAc;AAAA,EAAA;AAElB;AAEO,MAAM,wBAAwB,CAAC,OAAwB,WAAmC;AAC/F,QAAM,SAAS,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM,SAAS,EAAE,MAAM,GAAG,OAAO,YAAY,CAAC;AAElF,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,MAAM,MAAM;AAAA;AAAA,IAEZ,SAAS,OAAO;AAAA,EAAA;AAElB,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,MAAM,OAAO;AAAA,IACb,cAAc;AAAA,IACd,SAAS,OAAO,aAAa,cAAc,IAAI,cAAc;AAAA;AAAA,IAE7D,YAAY,OAAO,aAAa,IAAI;AAAA,IACpC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAAA;AAG1C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,SAAA;AAAA,MACrB,WAAW,sBAAsB,OAAO,QAAQ,OAAO,WAAW;AAAA,IAAA;AAAA,IAEpE,QAAQ,EAAE,MAAM,CAAC,OAAO,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IACrD,MAAM,UAAU,MAAM;AAAA,IACtB,OAAO,OAAO,aAAa,YAAY;AAAA,IACvC,OAAO,OAAO,aAAa,eAAe;AAAA,IAC1C,QAAQ,MAAM,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MAClC,MAAM,EAAE;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE;AAAA,MACR,cAAcA,UAAAA,YAAY;AAAA,MAC1B,WAAW,EAAE,OAAO,OAAO,CAAC,EAAA;AAAA,MAC5B,UAAU,EAAE,OAAO,SAAA;AAAA,IAAkB,EACrC;AAAA,EAAA;AAEN;;"}

package/dist/index98.js

@@ -1,24 +1,72 @@
-const root = "krc-root-tsCGC";
-const input = "krc-input--stjU";
-const label = "krc-label-KD6pE";
-const disabled = "krc-disabled-ugpPh";
-const sm = "krc-sm-8drDq";
-const md = "krc-md-IG7oy";
-const styles = {
-  root,
-  input,
-  label,
-  disabled,
-  sm,
-  md
+import { GROUPED_BAR, CHART_COLORS } from "./index63.js";
+const { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;
+const escapeHtml = (value) => value.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+const colorFor = (name, index, seriesColors) => (seriesColors == null ? void 0 : seriesColors[name]) ?? CHART_COLORS[index % CHART_COLORS.length];
+const markerFor = (color) => {
+  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;
+  return `<span style="display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};"></span>`;
+};
+const buildTooltipFormatter = (pivot, colors, noValueText) => (params) => {
+  const first = Array.isArray(params) ? params[0] : params;
+  const index = first == null ? void 0 : first.dataIndex;
+  if (index == null || index >= pivot.categories.length) return "";
+  const lines = [escapeHtml(pivot.categories[index])];
+  pivot.series.forEach((s, i) => {
+    const value = s.values[index];
+    const text = value == null ? escapeHtml(noValueText) : String(value);
+    lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);
+  });
+  return lines.join("<br/>");
+};
+const buildGrid = (config) => {
+  const named = Boolean(config.valueLabel);
+  return {
+    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),
+    right: GRID_MARGIN.RIGHT,
+    top: GRID_MARGIN.TOP,
+    // Room for a horizontal value-axis name and the legend, each only when drawn.
+    bottom: GRID_MARGIN.BASE + (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) + (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),
+    containLabel: true
+  };
+};
+const buildGroupedBarOption = (pivot, config) => {
+  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));
+  const categoryAxis = {
+    type: "category",
+    data: pivot.categories,
+    // Horizontal bars read top-down, so the first category goes on top.
+    inverse: config.invertAxis
+  };
+  const valueAxis = {
+    type: "value",
+    name: config.valueLabel,
+    nameLocation: "middle",
+    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,
+    // Without this a vertical axis name is drawn horizontally and eats the plot's width.
+    nameRotate: config.invertAxis ? 0 : 90,
+    minInterval: config.integerValues ? 1 : void 0
+  };
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: buildTooltipFormatter(pivot, colors, config.noValueText)
+    },
+    legend: { show: !config.hideLegend, bottom: 0, type: "scroll" },
+    grid: buildGrid(config),
+    xAxis: config.invertAxis ? valueAxis : categoryAxis,
+    yAxis: config.invertAxis ? categoryAxis : valueAxis,
+    series: pivot.series.map((s, i) => ({
+      name: s.name,
+      type: "bar",
+      data: s.values,
+      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,
+      itemStyle: { color: colors[i] },
+      emphasis: { focus: "series" }
+    }))
+  };
 };
 export {
-  styles as default,
-  disabled,
-  input,
-  label,
-  md,
-  root,
-  sm
+  buildGroupedBarOption
 };
 //# sourceMappingURL=index98.js.map

package/dist/index98.js.map

@@ -1 +1 @@
-{"version":3,"file":"index98.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index98.js","sources":["../src/charts/GroupedBarChartCard/buildGroupedBarOption.ts"],"sourcesContent":["import type { GroupedBarPivot } from './pivotGroupedBars';\nimport { CHART_COLORS, GROUPED_BAR } from '../../constants';\n\nexport interface GroupedBarOptionConfig {\n  seriesColors?: Readonly<Record<string, string>>;\n  invertAxis: boolean;\n  hideLegend: boolean;\n  integerValues: boolean;\n  valueLabel?: string;\n  /** Tooltip text for a gap. */\n  noValueText: string;\n}\n\nconst { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;\n\n/** Category and series names come from consumer data and land in the tooltip's HTML. */\nconst escapeHtml = (value: string) =>\n  value.replace(/[&<>\"]/g, (char) => `&#${char.charCodeAt(0)};`);\n\n/** Pinned colour first, else the palette by first-seen position. */\nconst colorFor = (name: string, index: number, seriesColors?: Readonly<Record<string, string>>) =>\n  seriesColors?.[name] ?? CHART_COLORS[index % CHART_COLORS.length];\n\nconst markerFor = (color: string) => {\n  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;\n  return `<span style=\"display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};\"></span>`;\n};\n\n/**\n * The tooltip is built from the pivot rather than from echarts' params, so every\n * series is listed in series order and a gap reads as `noValueText`, never `-`.\n */\nconst buildTooltipFormatter =\n  (pivot: GroupedBarPivot, colors: string[], noValueText: string) => (params: unknown) => {\n    const first = (Array.isArray(params) ? params[0] : params) as\n      | { dataIndex?: number }\n      | undefined;\n    const index = first?.dataIndex;\n    if (index == null || index >= pivot.categories.length) return '';\n\n    const lines = [escapeHtml(pivot.categories[index])];\n    pivot.series.forEach((s, i) => {\n      const value = s.values[index];\n      const text = value == null ? escapeHtml(noValueText) : String(value);\n      lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);\n    });\n\n    return lines.join('<br/>');\n  };\n\nconst buildGrid = (config: GroupedBarOptionConfig) => {\n  const named = Boolean(config.valueLabel);\n  return {\n    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),\n    right: GRID_MARGIN.RIGHT,\n    top: GRID_MARGIN.TOP,\n    // Room for a horizontal value-axis name and the legend, each only when drawn.\n    bottom:\n      GRID_MARGIN.BASE +\n      (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) +\n      (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),\n    containLabel: true,\n  };\n};\n\nexport const buildGroupedBarOption = (pivot: GroupedBarPivot, config: GroupedBarOptionConfig) => {\n  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));\n\n  const categoryAxis = {\n    type: 'category' as const,\n    data: pivot.categories,\n    // Horizontal bars read top-down, so the first category goes on top.\n    inverse: config.invertAxis,\n  };\n  const valueAxis = {\n    type: 'value' as const,\n    name: config.valueLabel,\n    nameLocation: 'middle' as const,\n    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,\n    // Without this a vertical axis name is drawn horizontally and eats the plot's width.\n    nameRotate: config.invertAxis ? 0 : 90,\n    minInterval: config.integerValues ? 1 : undefined,\n  };\n\n  return {\n    tooltip: {\n      trigger: 'axis' as const,\n      axisPointer: { type: 'shadow' as const },\n      formatter: buildTooltipFormatter(pivot, colors, config.noValueText),\n    },\n    legend: { show: !config.hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: buildGrid(config),\n    xAxis: config.invertAxis ? valueAxis : categoryAxis,\n    yAxis: config.invertAxis ? categoryAxis : valueAxis,\n    series: pivot.series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      data: s.values,\n      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,\n      itemStyle: { color: colors[i] },\n      emphasis: { focus: 'series' as const },\n    })),\n  };\n};\n"],"names":[],"mappings":";AAaA,MAAM,EAAE,aAAa,cAAA,IAAkB;AAGvC,MAAM,aAAa,CAAC,UAClB,MAAM,QAAQ,WAAW,CAAC,SAAS,KAAK,KAAK,WAAW,CAAC,CAAC,GAAG;AAG/D,MAAM,WAAW,CAAC,MAAc,OAAe,kBAC7C,6CAAe,UAAS,aAAa,QAAQ,aAAa,MAAM;AAElE,MAAM,YAAY,CAAC,UAAkB;AACnC,QAAM,EAAE,qBAAqB,MAAM,oBAAoB,QAAQ;AAC/D,SAAO,kDAAkD,GAAG,8BAA8B,IAAI,aAAa,IAAI,uBAAuB,WAAW,KAAK,CAAC;AACzJ;AAMA,MAAM,wBACJ,CAAC,OAAwB,QAAkB,gBAAwB,CAAC,WAAoB;AACtF,QAAM,QAAS,MAAM,QAAQ,MAAM,IAAI,OAAO,CAAC,IAAI;AAGnD,QAAM,QAAQ,+BAAO;AACrB,MAAI,SAAS,QAAQ,SAAS,MAAM,WAAW,OAAQ,QAAO;AAE9D,QAAM,QAAQ,CAAC,WAAW,MAAM,WAAW,KAAK,CAAC,CAAC;AAClD,QAAM,OAAO,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,QAAQ,EAAE,OAAO,KAAK;AAC5B,UAAM,OAAO,SAAS,OAAO,WAAW,WAAW,IAAI,OAAO,KAAK;AACnE,UAAM,KAAK,GAAG,UAAU,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAAA,EACpE,CAAC;AAED,SAAO,MAAM,KAAK,OAAO;AAC3B;AAEF,MAAM,YAAY,CAAC,WAAmC;AACpD,QAAM,QAAQ,QAAQ,OAAO,UAAU;AACvC,SAAO;AAAA,IACL,MAAM,YAAY,QAAQ,SAAS,CAAC,OAAO,aAAa,YAAY,eAAe;AAAA,IACnF,OAAO,YAAY;AAAA,IACnB,KAAK,YAAY;AAAA;AAAA,IAEjB,QACE,YAAY,QACX,SAAS,OAAO,aAAa,YAAY,eAAe,MACxD,OAAO,aAAa,IAAI,YAAY;AAAA,IACvC,cAAc;AAAA,EAAA;AAElB;AAEO,MAAM,wBAAwB,CAAC,OAAwB,WAAmC;AAC/F,QAAM,SAAS,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM,SAAS,EAAE,MAAM,GAAG,OAAO,YAAY,CAAC;AAElF,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,MAAM,MAAM;AAAA;AAAA,IAEZ,SAAS,OAAO;AAAA,EAAA;AAElB,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,MAAM,OAAO;AAAA,IACb,cAAc;AAAA,IACd,SAAS,OAAO,aAAa,cAAc,IAAI,cAAc;AAAA;AAAA,IAE7D,YAAY,OAAO,aAAa,IAAI;AAAA,IACpC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAAA;AAG1C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,SAAA;AAAA,MACrB,WAAW,sBAAsB,OAAO,QAAQ,OAAO,WAAW;AAAA,IAAA;AAAA,IAEpE,QAAQ,EAAE,MAAM,CAAC,OAAO,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IACrD,MAAM,UAAU,MAAM;AAAA,IACtB,OAAO,OAAO,aAAa,YAAY;AAAA,IACvC,OAAO,OAAO,aAAa,eAAe;AAAA,IAC1C,QAAQ,MAAM,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MAClC,MAAM,EAAE;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE;AAAA,MACR,cAAc,YAAY;AAAA,MAC1B,WAAW,EAAE,OAAO,OAAO,CAAC,EAAA;AAAA,MAC5B,UAAU,EAAE,OAAO,SAAA;AAAA,IAAkB,EACrC;AAAA,EAAA;AAEN;"}

package/dist/index99.cjs

@@ -1,24 +1,10 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-p3Y59";
-const plain = "krc-plain-VC-9I";
-const icon = "krc-icon-ix2Mi";
-const title = "krc-title--QtUj";
-const description = "krc-description-Qrtj7";
-const action = "krc-action-NBNpI";
-const styles = {
-  root,
-  plain,
-  icon,
-  title,
-  description,
-  action
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_LABELS = {
+  loading: "Loading chart...",
+  empty: "No data available.",
+  retry: "Retry",
+  noValue: "No data"
 };
-exports.action = action;
-exports.default = styles;
-exports.description = description;
-exports.icon = icon;
-exports.plain = plain;
-exports.root = root;
-exports.title = title;
+exports.DEFAULT_LABELS = DEFAULT_LABELS;
 //# sourceMappingURL=index99.cjs.map

package/dist/index99.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index99.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index99.cjs","sources":["../src/charts/GroupedBarChartCard/defaultLabels.ts"],"sourcesContent":["import type { GroupedBarChartLabels } from './GroupedBarChartCard.types';\n\n/** English defaults, matching the texts of the other chart cards. */\nexport const DEFAULT_LABELS: GroupedBarChartLabels = {\n  loading: 'Loading chart...',\n  empty: 'No data available.',\n  retry: 'Retry',\n  noValue: 'No data',\n};\n"],"names":[],"mappings":";;AAGO,MAAM,iBAAwC;AAAA,EACnD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;;"}

package/dist/index99.js

@@ -1,24 +1,10 @@
-const root = "krc-root-p3Y59";
-const plain = "krc-plain-VC-9I";
-const icon = "krc-icon-ix2Mi";
-const title = "krc-title--QtUj";
-const description = "krc-description-Qrtj7";
-const action = "krc-action-NBNpI";
-const styles = {
-  root,
-  plain,
-  icon,
-  title,
-  description,
-  action
+const DEFAULT_LABELS = {
+  loading: "Loading chart...",
+  empty: "No data available.",
+  retry: "Retry",
+  noValue: "No data"
 };
 export {
-  action,
-  styles as default,
-  description,
-  icon,
-  plain,
-  root,
-  title
+  DEFAULT_LABELS
 };
 //# sourceMappingURL=index99.js.map

package/dist/index99.js.map

@@ -1 +1 @@
-{"version":3,"file":"index99.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index99.js","sources":["../src/charts/GroupedBarChartCard/defaultLabels.ts"],"sourcesContent":["import type { GroupedBarChartLabels } from './GroupedBarChartCard.types';\n\n/** English defaults, matching the texts of the other chart cards. */\nexport const DEFAULT_LABELS: GroupedBarChartLabels = {\n  loading: 'Loading chart...',\n  empty: 'No data available.',\n  retry: 'Retry',\n  noValue: 'No data',\n};\n"],"names":[],"mappings":"AAGO,MAAM,iBAAwC;AAAA,EACnD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/style.css

@@ -1917,13 +1917,28 @@
   white-space: nowrap;
 }
 
+/* The whole header is pinned, so one or two header rows always move together. */
+.krc-root-k9ocd thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .krc-colh-Fi0Kr {
   background: var(--surface-alt);
   font-weight: 700;
   color: var(--text-secondary);
-  position: sticky;
-  top: 0;
-  z-index: 1;
+}
+
+.krc-group-rVQPU {
+  background: var(--surface-alt);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+}
+
+/* On <colgroup>: with collapsed borders it is painted for the full height of the table. */
+.krc-groupStart-bu8S4 {
+  border-left: var(--border-width-md) solid var(--border-color);
 }
 
 .krc-rowh-bTG4G {
@@ -1942,9 +1957,8 @@
   font-weight: 700;
   color: var(--text-secondary);
   position: sticky;
-  top: 0;
   left: 0;
-  z-index: 2;
+  z-index: 1;
 }
 
 .krc-cell-i0lDG {