origam 2.16.0 → 2.17.1

package/dist/src/components/Chart/OrigamChartPolarBar.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-polar-bar"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-polar-bar"
 	>
@@ -128,7 +128,7 @@
 					data-cy="origam-chart-polar-bar-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -150,7 +150,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -160,15 +160,16 @@ import {
 } from "vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
-import {
-  useChartHeaderTypography,
-  useBackgroundColor,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
 defineOptions({
   name: "OrigamChartPolarBar"
@@ -228,6 +229,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 defineSlots();
+const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -235,6 +237,13 @@ const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { headerTypographyStyles } = useChartHeaderTypography(props);
+useUnsupportedProp(
+  "OrigamChartPolarBar",
+  "xAxisFormat",
+  "only `yAxisFormat` is forwarded to the axis and applied in `labelFor`.",
+  () => props.xAxisFormat !== void 0
+);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_SIZE = 400;
 const CENTER = SVG_SIZE / 2;
 const LABEL_RADIAL_OFFSET = 14;
@@ -319,7 +328,7 @@ const wedges = computed(() => {
     if (props.categories[i] != null) return String(props.categories[i]);
     const entry = raw[i];
     if (typeof entry === "object" && entry !== null) return String(entry.x);
-    return `Item ${i + 1}`;
+    return t("origam.chart.polar_bar.item_label", i + 1);
   };
   return values.map((v, i) => {
     const cat = categoryOf(i);
@@ -421,15 +430,16 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
   if (props.aspectRatio) {
     out.aspectRatio = props.aspectRatio;
   }
-  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
-  return out;
+  Object.assign(out, chartAnimationStyle.value);
+  return [out, props.style];
 });
 const bodyClasses = computed(() => ({
   "origam-chart-polar-bar__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -438,13 +448,13 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "Polar bar chart");
-const svgAriaLabel = computed(() => props.title ?? "Polar bar chart");
-const svgTitle = computed(() => props.title ?? "Polar bar chart");
-const svgDesc = computed(() => {
-  const n = visibleWedges.value.length;
-  return `Polar bar chart with ${n} ${n === 1 ? "wedge" : "wedges"}.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.polar_bar.aria_label"));
+const ariaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgAriaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgTitle = computed(() => props.title ?? defaultAriaLabel.value);
+const svgDesc = computed(
+  () => t("origam.chart.polar_bar.desc", visibleWedges.value.length, { chart: defaultAriaLabel.value })
+);
 const wedgeAriaLabel = (wedge) => `${wedge.category}: ${wedge.formatted} (${wedge.percentage})`;
 const onWedgeEnter = (wedge) => {
   hoveredIndex.value = wedge.index;
@@ -486,7 +496,17 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		display: grid;
 		gap: var(--origam-chart---gap, 12px);
-		padding: var(--origam-chart---padding, 12px);
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `padding`
+		// prop's scale form goes silently inert. See CLAUDE.md "CSS-first"
+		// table — `:where(…)` is the documented zero-specificity default.
+		:where(&) {
+			padding: var(--origam-chart---padding, 12px);
+		}
+
 		background-color: var(--origam-chart---background-color, transparent);
 		color: var(--origam-chart---color, inherit);
 		width: 100%;
@@ -545,7 +565,7 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		&__subtitle {
 			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
-			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__subtitle---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		&__body {
@@ -571,7 +591,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__polar-bar-wedge {
-			stroke: var(--origam-chart__polar-bar---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart__polar-bar---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart__polar-bar---stroke-width, 1.5);
 			cursor: pointer;
 			transition: opacity 150ms ease, filter 150ms ease;
@@ -588,7 +608,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			pointer-events: none;
 			font-size: var(--origam-chart__polar-bar-label---font-size, 0.6875rem);
 			font-weight: var(--origam-chart__polar-bar-label---font-weight, 500);
-			fill: var(--origam-chart__polar-bar-label---color, var(--origam-color-text-primary, currentColor));
+			fill: var(--origam-chart__polar-bar-label---color, var(--origam-color__text---primary, currentColor));
 			user-select: none;
 		}
 
@@ -607,7 +627,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		:deep(.origam-chart__tooltip) {
 			position: absolute;
 			pointer-events: none;
-			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color-surface-overlay, #1f2937));
+			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color__surface---overlay, #1f2937));
 			color: var(--origam-chart__tooltip---color, #ffffff);
 			padding: var(--origam-chart__tooltip---padding, 8px 12px);
 			border-radius: var(--origam-chart__tooltip---border-radius, 6px);
@@ -645,7 +665,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__empty---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		:deep(.origam-chart__legend) {

package/dist/src/components/Chart/OrigamChartPyramid.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-pyramid"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-pyramid"
 	>
@@ -127,7 +127,7 @@
 					data-cy="origam-chart-pyramid-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -149,7 +149,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -159,15 +159,15 @@ import {
 } from "vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
-import {
-  useChartHeaderTypography,
-  useBackgroundColor,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
 defineOptions({
   name: "OrigamChartPyramid"
@@ -224,13 +224,15 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 defineSlots();
+const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
-const { marginStyles } = useMargin(props);
-const { paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { headerTypographyStyles } = useChartHeaderTypography(props);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 120, bottom: 20, left: 20 };
@@ -268,10 +270,10 @@ const categoryLabel = (index) => {
   const cat = props.categories[index];
   if (cat != null) return String(cat);
   const series = props.series?.[0];
-  if (!series) return `Slice ${index + 1}`;
+  if (!series) return t("origam.chart.pyramid.slice_label", index + 1);
   const entry = series.data[index];
   if (typeof entry === "object" && entry !== null) return String(entry.x);
-  return `Slice ${index + 1}`;
+  return t("origam.chart.pyramid.slice_label", index + 1);
 };
 const formatValue = (v) => {
   if (props.yAxisFormat) return props.yAxisFormat(v);
@@ -409,15 +411,18 @@ const rootClasses = computed(() => [
   },
   backgroundColorClasses.value,
   elevationClasses.value,
-  roundedClasses.value
+  marginClasses.value,
+  paddingClasses.value,
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
   if (props.aspectRatio) {
     out.aspectRatio = props.aspectRatio;
   }
-  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
-  return out;
+  Object.assign(out, chartAnimationStyle.value);
+  return [out, props.style];
 });
 const bodyClasses = computed(() => ({
   "origam-chart-pyramid__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -426,13 +431,13 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? `${props.type} chart`);
-const svgAriaLabel = computed(() => props.title ?? `${props.type} chart`);
-const svgTitle = computed(() => props.title ?? `${props.type} chart`);
-const svgDesc = computed(() => {
-  const n = visibleSlices.value.length;
-  return `${props.type} chart with ${n} ${n === 1 ? "slice" : "slices"}.`;
-});
+const defaultAriaLabel = computed(() => t(`origam.chart.pyramid.aria_label_${props.type}`));
+const ariaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgAriaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgTitle = computed(() => props.title ?? defaultAriaLabel.value);
+const svgDesc = computed(
+  () => t("origam.chart.pyramid.desc", visibleSlices.value.length, { chart: defaultAriaLabel.value })
+);
 const sliceAriaLabel = (slice) => `${slice.category}: ${slice.formatted}`;
 const onSliceEnter = (slice) => {
   hoveredIndex.value = slice.index;
@@ -474,7 +479,17 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		display: grid;
 		gap: var(--origam-chart---gap, 12px);
-		padding: var(--origam-chart---padding, 12px);
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `padding`
+		// prop's scale form goes silently inert. See CLAUDE.md "CSS-first"
+		// table — `:where(…)` is the documented zero-specificity default.
+		:where(&) {
+			padding: var(--origam-chart---padding, 12px);
+		}
+
 		background-color: var(--origam-chart---background-color, transparent);
 		color: var(--origam-chart---color, inherit);
 		width: 100%;
@@ -533,7 +548,7 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		&__subtitle {
 			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
-			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__subtitle---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		&__body {
@@ -559,7 +574,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__pyramid-slice {
-			stroke: var(--origam-chart__pyramid---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart__pyramid---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart__pyramid---stroke-width, 2);
 			cursor: pointer;
 			transition: opacity 150ms ease, filter 150ms ease;
@@ -583,7 +598,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			}
 
 			&--outside {
-				fill: var(--origam-chart__pyramid-label--outside---color, var(--origam-color-text-primary, currentColor));
+				fill: var(--origam-chart__pyramid-label--outside---color, var(--origam-color__text---primary, currentColor));
 			}
 		}
 
@@ -594,7 +609,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		:deep(.origam-chart__tooltip) {
 			position: absolute;
 			pointer-events: none;
-			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color-surface-overlay, #1f2937));
+			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color__surface---overlay, #1f2937));
 			color: var(--origam-chart__tooltip---color, #ffffff);
 			padding: var(--origam-chart__tooltip---padding, 8px 12px);
 			border-radius: var(--origam-chart__tooltip---border-radius, 6px);
@@ -632,7 +647,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__empty---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		:deep(.origam-chart__legend) {

package/dist/src/components/Chart/OrigamChartRadar.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-radar"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-radar"
 	>
@@ -98,8 +98,13 @@
 								:cy="path.circle!.cy"
 								:r="path.circle!.r"
 								:fill="path.color"
+								tabindex="0"
+								role="button"
 								:aria-label="pointAriaLabel(path)"
 								:data-cy="`origam-chart-point-${ path.seriesIndex }-${ path.dataIndex }`"
+								@click="onPointActivate(path, $event)"
+								@keydown.enter.prevent="onPointActivate(path, $event)"
+								@keydown.space.prevent="onPointActivate(path, $event)"
 						/>
 					</template>
 				</g>
@@ -111,7 +116,7 @@
 					data-cy="origam-chart-radar-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -133,7 +138,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -141,16 +146,17 @@ import {
   computed,
   ref
 } from "vue";
-import {
-  useChartHeaderTypography,
-  useBackgroundColor,
-  useChart,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useChart } from "../../composables/Chart/chart.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 defineOptions({
   name: "OrigamChartRadar"
@@ -202,6 +208,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 defineSlots();
+const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -209,6 +216,13 @@ const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { headerTypographyStyles } = useChartHeaderTypography(props);
+useUnsupportedProp(
+  "OrigamChartRadar",
+  "showTooltip",
+  "no tooltip component is rendered by the radar \u2014 `ChartTooltip` appears nowhere in its template.",
+  () => props.showTooltip !== void 0
+);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 360;
 const PADDING_RADAR = { top: 20, right: 20, bottom: 20, left: 20 };
@@ -280,15 +294,16 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
   if (props.aspectRatio) {
     out.aspectRatio = props.aspectRatio;
   }
-  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
-  return out;
+  Object.assign(out, chartAnimationStyle.value);
+  return [out, props.style];
 });
 const bodyClasses = computed(() => ({
   "origam-chart-radar__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -297,14 +312,18 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "Radar chart");
-const svgAriaLabel = computed(() => props.title ?? "radar chart");
-const svgTitle = computed(() => props.title ?? "radar chart");
+const defaultAriaLabel = computed(() => t("origam.chart.radar.aria_label"));
+const ariaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgAriaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgTitle = computed(() => props.title ?? defaultAriaLabel.value);
 const svgDesc = computed(() => {
   const seriesCount = props.series.length;
-  if (!seriesCount) return "No data";
-  const points = slotCount.value;
-  return `radar chart with ${seriesCount} series and ${points} axes.`;
+  if (!seriesCount) return t("origam.chart.no_data_text");
+  return t("origam.chart.radar.desc", {
+    chart: defaultAriaLabel.value,
+    series: t("origam.chart.radar.desc_series", seriesCount),
+    axes: t("origam.chart.radar.desc_axes", slotCount.value)
+  });
 });
 const pointAriaLabel = (path) => {
   const entry = path.series.data[path.dataIndex ?? 0];
@@ -312,6 +331,20 @@ const pointAriaLabel = (path) => {
   const cat = props.categories[path.dataIndex ?? 0] ?? path.dataIndex;
   return `${path.series.name}, ${cat}: ${y}`;
 };
+const onPointActivate = (path, originalEvent) => {
+  const dataIndex = path.dataIndex ?? 0;
+  const entry = path.series.data[dataIndex];
+  const y = typeof entry === "number" ? entry : entry.y;
+  const point = {
+    seriesIndex: path.seriesIndex,
+    seriesName: path.series.name,
+    dataIndex,
+    x: props.categories[dataIndex] ?? dataIndex,
+    y,
+    color: path.color
+  };
+  emit("point-click", point, originalEvent);
+};
 const onLegendClick = (series, index) => {
   emit("legend-click", series, index);
 };
@@ -327,7 +360,17 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		display: grid;
 		gap: var(--origam-chart---gap, 12px);
-		padding: var(--origam-chart---padding, 12px);
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `padding`
+		// prop's scale form goes silently inert. See CLAUDE.md "CSS-first"
+		// table — `:where(…)` is the documented zero-specificity default.
+		:where(&) {
+			padding: var(--origam-chart---padding, 12px);
+		}
+
 		background-color: var(--origam-chart---background-color, transparent);
 		color: var(--origam-chart---color, inherit);
 		width: 100%;
@@ -386,7 +429,7 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		&__subtitle {
 			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
-			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__subtitle---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		&__body {
@@ -410,21 +453,29 @@ const onSeriesToggle = (series, nextVisible) => {
 		.origam-chart__radar-ring,
 		.origam-chart__radar-spoke {
 			fill: none;
-			stroke: var(--origam-chart__grid---color, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 		}
 
 		.origam-chart__radar-label {
-			fill: var(--origam-chart__axis-label---color, var(--origam-color-text-secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 			font-size: var(--origam-chart__axis-label---font-size, 0.75rem);
 		}
 
 		.origam-chart__polygon {
 			stroke-width: var(--origam-chart__polygon---stroke-width, 1.5);
+			fill-opacity: var(--origam-chart__radar---fill-opacity, 0.18);
 		}
 
 		.origam-chart__point {
 			cursor: pointer;
+			transition: filter 150ms ease;
+
+			&:hover,
+			&:focus-visible {
+				outline: none;
+				filter: brightness(1.15);
+			}
 		}
 
 		.origam-chart__svg--animated .origam-chart__polygon,
@@ -438,7 +489,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__empty---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		:deep(.origam-chart__legend) {

package/dist/src/components/Chart/OrigamChartRangeSelector.vue

@@ -1,7 +1,7 @@
 <template>
 	<nav
 			class="origam-chart-range-selector"
-			aria-label="Chart range selector"
+			:aria-label="t(ariaLabel)"
 			data-cy="origam-chart-range-selector"
 	>
 		<ul
@@ -26,15 +26,19 @@
 </template>
 
 <script lang="ts" setup>
+import { useLocale } from "../../composables/Commons/locale.composable";
 defineOptions({
   name: "OrigamChartRangeSelector"
 });
 const props = defineProps({
   buttons: { type: Array, required: true },
   activeIndex: { type: Number, required: false, default: -1 },
-  dataLength: { type: Number, required: false, default: 0 }
+  dataLength: { type: Number, required: false, default: 0 },
+  ariaLabel: { type: String, required: false, default: "origam.chart.range_selector.aria_label" }
 });
 const emit = defineEmits(["select"]);
+defineSlots();
+const { t } = useLocale();
 const onButtonClick = (index) => {
   const btn = props.buttons[index];
   if (!btn) return;
@@ -83,10 +87,10 @@ const onButtonClick = (index) => {
 			align-items: center;
 			justify-content: center;
 			padding: var(--origam-chart-range-selector__btn---padding, 3px 8px);
-			border: 1px solid var(--origam-chart-range-selector__btn---border-color, var(--origam-color-border-default, #d1d5db));
+			border: 1px solid var(--origam-chart-range-selector__btn---border-color, var(--origam-color__border---default, #d1d5db));
 			border-radius: var(--origam-chart-range-selector__btn---border-radius, 4px);
 			background-color: var(--origam-chart-range-selector__btn---background-color, transparent);
-			color: var(--origam-chart-range-selector__btn---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart-range-selector__btn---color, var(--origam-color__text---secondary, #6b7280));
 			font-size: var(--origam-chart-range-selector__btn---font-size, 0.75rem);
 			font-weight: 500;
 			cursor: pointer;
@@ -97,22 +101,22 @@ const onButtonClick = (index) => {
 			&:hover,
 			&:focus-visible {
 				background-color: var(--origam-chart-range-selector__btn--hover---background-color, rgba(0, 0, 0, 0.06));
-				color: var(--origam-chart-range-selector__btn--hover---color, var(--origam-color-text-primary, #111827));
+				color: var(--origam-chart-range-selector__btn--hover---color, var(--origam-color__text---primary, #111827));
 				outline: none;
 			}
 
 			&:focus-visible {
-				box-shadow: 0 0 0 2px var(--origam-color-focus-ring, rgba(59, 130, 246, 0.5));
+				box-shadow: 0 0 0 2px var(--origam-color__border---focus, rgba(59, 130, 246, 0.5));
 			}
 
 			&--active {
-				background-color: var(--origam-chart-range-selector__btn--active---background-color, var(--origam-color-action-primary-bg-default, #3b82f6));
+				background-color: var(--origam-chart-range-selector__btn--active---background-color, var(--origam-color__action--primary---bg, #3b82f6));
 				border-color: var(--origam-chart-range-selector__btn--active---border-color, transparent);
 				color: var(--origam-chart-range-selector__btn--active---color, #ffffff);
 
 				&:hover,
 				&:focus-visible {
-					background-color: var(--origam-chart-range-selector__btn--active--hover---background-color, var(--origam-color-action-primary-bg-hover, #2563eb));
+					background-color: var(--origam-chart-range-selector__btn--active--hover---background-color, var(--origam-color__action--primary---bgHover, #2563eb));
 					color: var(--origam-chart-range-selector__btn--active--hover---color, #ffffff);
 				}
 			}