origam 2.16.0 → 2.17.0

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-streamgraph"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-streamgraph"
 	>
@@ -151,7 +151,7 @@
 					data-cy="origam-chart-streamgraph-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -173,7 +173,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -183,15 +183,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: "OrigamChartStreamgraph"
@@ -249,6 +249,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);
@@ -256,6 +257,7 @@ 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 = 700;
 const SVG_HEIGHT = 420;
 const PADDING = { top: 24, right: 24, bottom: 40, left: 40 };
@@ -341,7 +343,7 @@ const computeOffsets = computed(() => {
     return Array(n).fill(0);
   }
   if (props.offsetMode === "silhouette") {
-    return totals.map((t) => -t / 2);
+    return totals.map((t2) => -t2 / 2);
   }
   const offsets = Array(n).fill(0);
   offsets[0] = -totals[0] / 2;
@@ -516,8 +518,8 @@ const rootStyles = computed(() => {
   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-streamgraph__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -526,13 +528,15 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "streamgraph chart");
-const svgAriaLabel = computed(() => props.title ?? "streamgraph chart");
-const svgTitle = computed(() => props.title ?? "streamgraph chart");
-const svgDesc = computed(() => {
-  const n = visibleRibbons.value.length;
-  return `Streamgraph with ${n} series and ${columnCount.value} time points.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.streamgraph.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.streamgraph.desc", {
+  chart: defaultAriaLabel.value,
+  series: t("origam.chart.streamgraph.desc_series", visibleRibbons.value.length),
+  points: t("origam.chart.streamgraph.desc_points", columnCount.value)
+}));
 const ribbonAriaLabel = (ribbon) => `${ribbon.name}: ${ribbon.values.map((v) => formatValue(v)).join(", ")}`;
 const svgRef = ref(null);
 const mousePos = ref({ x: 0, y: 0 });
@@ -611,9 +615,15 @@ const onSvgMouseLeave = () => {
 };
 const onRibbonActivate = (ribbon, event) => {
   hoveredSeriesIndex.value = ribbon.seriesIndex;
-  if (hoveredPoint.value) {
-    emit("point-click", hoveredPoint.value, event);
-  }
+  const dataIndex = hoveredXIndex.value ?? 0;
+  emit("point-click", {
+    seriesIndex: ribbon.seriesIndex,
+    seriesName: ribbon.name,
+    dataIndex,
+    x: props.categories[dataIndex] ?? dataIndex,
+    y: ribbon.values[dataIndex] ?? 0,
+    color: ribbon.color
+  }, event);
 };
 const onLegendClick = (series, index) => {
   emit("legend-click", series, index);
@@ -631,7 +641,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%;
@@ -690,7 +710,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 {
@@ -716,19 +736,19 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		&__grid-line {
-			stroke: var(--origam-chart-streamgraph__grid---stroke, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart-streamgraph__grid---stroke, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 			stroke-dasharray: 4 4;
 		}
 
 		&__axis-x {
-			stroke: var(--origam-chart-streamgraph__axis---stroke, var(--origam-color-border-default, #d1d5db));
+			stroke: var(--origam-chart-streamgraph__axis---stroke, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		&__axis-label {
 			font-size: var(--origam-chart-streamgraph__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart-streamgraph__axis-label---fill, var(--origam-color-text-secondary, #6b7280));
+			fill: var(--origam-chart-streamgraph__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
 			user-select: none;
 		}
 
@@ -747,7 +767,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		&__crosshair {
-			stroke: var(--origam-chart-streamgraph__crosshair---stroke, var(--origam-color-text-secondary, #6b7280));
+			stroke: var(--origam-chart-streamgraph__crosshair---stroke, var(--origam-color__text---secondary, #6b7280));
 			stroke-width: 1;
 			stroke-dasharray: 3 3;
 			pointer-events: none;
@@ -760,7 +780,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);
@@ -798,7 +818,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/OrigamChartSunburst.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-sunburst"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-sunburst"
 	>
@@ -136,7 +136,7 @@
 					data-cy="origam-chart-sunburst-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -158,7 +158,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -168,15 +168,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: "OrigamChartSunburst"
@@ -231,6 +231,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);
@@ -238,6 +239,7 @@ 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_SIZE = 400;
 const CENTER = SVG_SIZE / 2;
 const MAX_DEPTH_CAP = 4;
@@ -558,15 +560,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-sunburst__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -575,13 +578,17 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "Sunburst chart");
-const svgAriaLabel = computed(() => props.title ?? "Sunburst chart");
-const svgTitle = computed(() => props.title ?? "Sunburst chart");
-const svgDesc = computed(() => {
-  const n = visibleNodes.value.filter((nd) => nd.depth === 0).length;
-  return `Sunburst chart with ${n} root ${n === 1 ? "node" : "nodes"}.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.sunburst.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.sunburst.desc",
+    visibleNodes.value.filter((nd) => nd.depth === 0).length,
+    { chart: defaultAriaLabel.value }
+  )
+);
 const nodeAriaLabel = (node) => {
   const formatted = props.yAxisFormat ? props.yAxisFormat(node.value) : String(node.value);
   return `${node.path}: ${formatted}`;
@@ -624,7 +631,17 @@ const onSeriesToggle = (series, nextVisible) => {
 	.origam-chart-sunburst {
 		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%;
@@ -683,7 +700,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 {
@@ -709,7 +726,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__sunburst-arc {
-			stroke: var(--origam-chart__sunburst---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart__sunburst---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart__sunburst---stroke-width, 1.5);
 			cursor: pointer;
 			transition: opacity 150ms ease, filter 150ms ease;
@@ -730,7 +747,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			user-select: none;
 
 			&--leader {
-				fill: var(--origam-chart__sunburst-label--leader---color, var(--origam-color-text-primary, #111827));
+				fill: var(--origam-chart__sunburst-label--leader---color, var(--origam-color__text---primary, #111827));
 				font-size: var(--origam-chart__sunburst-label---font-size, 0.625rem);
 			}
 		}
@@ -739,7 +756,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			pointer-events: none;
 
 			.origam-chart__sunburst-leader-line {
-				stroke: var(--origam-chart__sunburst-leader-line---color, var(--origam-color-text-secondary, #6b7280));
+				stroke: var(--origam-chart__sunburst-leader-line---color, var(--origam-color__text---secondary, #6b7280));
 				stroke-width: var(--origam-chart__sunburst-leader-line---width, 1);
 				stroke-linecap: round;
 				stroke-linejoin: round;
@@ -753,7 +770,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);
@@ -791,7 +808,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/OrigamChartTooltip.vue

@@ -2,7 +2,7 @@
 	<div
 			v-if="point && series"
 			class="origam-chart__tooltip"
-			role="tooltip"
+			aria-hidden="true"
 			:style="tooltipStyle"
 			data-cy="origam-chart-tooltip"
 	>
@@ -40,6 +40,7 @@ const props = defineProps({
   xAxisFormat: { type: Function, required: false, default: void 0 },
   yAxisFormat: { type: Function, required: false, default: void 0 }
 });
+defineEmits([]);
 defineSlots();
 const formatX = (value) => {
   if (props.xAxisFormat) return props.xAxisFormat(value);

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-treemap"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-treemap"
 	>
@@ -132,7 +132,7 @@
 					data-cy="origam-chart-treemap-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -154,7 +154,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -164,15 +164,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: "OrigamChartTreemap"
@@ -227,13 +228,21 @@ 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);
+useUnsupportedProp(
+  "OrigamChartTreemap",
+  "categories",
+  "a treemap labels each tile from its own datum \u2014 there is no category axis.",
+  () => (props.categories?.length ?? 0) > 0
+);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 8, right: 8, bottom: 8, left: 8 };
@@ -392,7 +401,7 @@ const tiles = computed(() => {
     };
   });
 });
-const visibleTiles = computed(() => tiles.value.filter((t) => t.visible));
+const visibleTiles = computed(() => tiles.value.filter((t2) => t2.visible));
 const legendItems = computed(() => {
   const series = props.series?.[0];
   if (!series) return [];
@@ -413,18 +422,18 @@ const mousePos = ref({ x: 0, y: 0 });
 const hoveredIndex = ref(null);
 const hoveredTile = computed(() => {
   if (hoveredIndex.value === null) return null;
-  return visibleTiles.value.find((t) => t.index === hoveredIndex.value) ?? null;
+  return visibleTiles.value.find((t2) => t2.index === hoveredIndex.value) ?? null;
 });
 const hoveredPoint = computed(() => {
-  const t = hoveredTile.value;
-  if (!t || !props.series?.[0]) return null;
+  const t2 = hoveredTile.value;
+  if (!t2 || !props.series?.[0]) return null;
   return {
     seriesIndex: 0,
     seriesName: props.series[0].name,
-    dataIndex: t.index,
-    x: t.name,
-    y: t.value,
-    color: t.color
+    dataIndex: t2.index,
+    x: t2.name,
+    y: t2.value,
+    color: t2.color
   };
 });
 const hoveredSeries = computed(() => {
@@ -448,15 +457,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-treemap__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -465,13 +477,13 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "treemap chart");
-const svgAriaLabel = computed(() => props.title ?? "treemap chart");
-const svgTitle = computed(() => props.title ?? "treemap chart");
-const svgDesc = computed(() => {
-  const n = visibleTiles.value.length;
-  return `Treemap chart with ${n} ${n === 1 ? "tile" : "tiles"}.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.treemap.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.treemap.desc", visibleTiles.value.length, { chart: defaultAriaLabel.value })
+);
 const tileAriaLabel = (tile) => `${tile.name}: ${tile.formatted}`;
 const onTileEnter = (tile) => {
   hoveredIndex.value = tile.index;
@@ -513,7 +525,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%;
@@ -572,7 +594,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 {
@@ -598,7 +620,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__treemap-tile {
-			stroke: var(--origam-chart__treemap---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart__treemap---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart__treemap---stroke-width, 2);
 			cursor: pointer;
 			transition: opacity 150ms ease, filter 150ms ease;
@@ -632,7 +654,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);
@@ -670,7 +692,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) {