origam 2.16.0 → 2.17.0

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

@@ -97,6 +97,8 @@ const props = defineProps({
   yAxisFormat: { type: Function, required: false, default: void 0 },
   secondaryYAxisFormat: { type: Function, required: false, default: void 0 }
 });
+defineEmits([]);
+defineSlots();
 const formatX = (value) => {
   if (props.xAxisFormat) return props.xAxisFormat(value);
   return String(value);
@@ -125,17 +127,17 @@ const formatSecondaryY = (value) => {
 	 * via the `--origam-chart__{grid,axis}---*` CSS variables.
 	 */
 	.origam-chart__grid-line {
-		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: var(--origam-chart__grid---stroke-width, 1);
 	}
 
 	.origam-chart__axis-line {
-		stroke: var(--origam-chart__axis---color, var(--origam-color-border-default, #d1d5db));
+		stroke: var(--origam-chart__axis---color, var(--origam-color__border---default, #d1d5db));
 		stroke-width: var(--origam-chart__axis---stroke-width, 1);
 	}
 
 	.origam-chart__axis-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);
 	}
 </style>

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-box-plot"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-box-plot"
 	>
@@ -224,7 +224,7 @@
 					data-cy="origam-chart-box-plot-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -246,7 +246,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -256,15 +256,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";
 import { computeQuartiles, isRawDatum } from "../../utils/Chart/box-plot.util";
 defineOptions({
@@ -326,6 +326,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);
@@ -333,6 +334,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 = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 20, bottom: 40, left: 52 };
@@ -560,15 +562,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-box-plot__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -577,12 +580,12 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "box plot chart");
-const svgAriaLabel = computed(() => props.title ?? "box plot chart");
-const svgTitle = computed(() => props.title ?? "box plot chart");
+const ariaLabel = computed(() => props.title ?? t("origam.chart.box_plot.aria_label"));
+const svgAriaLabel = computed(() => props.title ?? t("origam.chart.box_plot.aria_label"));
+const svgTitle = computed(() => props.title ?? t("origam.chart.box_plot.aria_label"));
 const svgDesc = computed(() => {
   const n = visibleBoxes.value.length;
-  return `Box plot with ${n} ${n === 1 ? "category" : "categories"}.`;
+  return t("origam.chart.box_plot.desc", n);
 });
 const boxAriaLabel = (box) => {
   const { min, q1, median, q3, max } = box.rawStats;
@@ -628,7 +631,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%;
@@ -687,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 {
@@ -713,19 +726,19 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 			stroke-dasharray: 4 4;
 		}
 
 		.origam-chart__axis-line {
-			stroke: var(--origam-chart__axis---stroke-color, var(--origam-color-border-default, #d1d5db));
+			stroke: var(--origam-chart__axis---stroke-color, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		.origam-chart__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color-text-secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		.origam-chart__box-rect {
@@ -744,7 +757,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__box-median {
-			stroke: var(--origam-chart__box-median---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart__box-median---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart__box-median---stroke-width, 2);
 		}
 
@@ -769,7 +782,7 @@ const onSeriesToggle = (series, nextVisible) => {
 
 			&:focus-visible {
 				.origam-chart__box-rect {
-					outline: 2px solid var(--origam-color-action-primary-border, currentColor);
+					outline: 2px solid var(--origam-color__border---focus, currentColor);
 					outline-offset: 2px;
 				}
 			}
@@ -782,7 +795,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);
@@ -820,7 +833,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/OrigamChartBullet.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-bullet"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-bullet"
 	>
@@ -188,7 +188,7 @@
 					data-cy="origam-chart-bullet-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -210,7 +210,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -220,17 +220,18 @@ 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 { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.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";
-import { DIRECTION } from "../../enums";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
 defineOptions({
   name: "OrigamChartBullet"
 });
@@ -289,13 +290,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 AXIS_TICK_COUNT = 5;
@@ -322,6 +325,12 @@ const resolveRangeColor = (raw, bandIndex) => {
   const palette = props.rangeColors?.length ? props.rangeColors : ["danger", "warning", "success"];
   return resolveColor(palette[bandIndex % palette.length]);
 };
+useUnsupportedProp(
+  "OrigamChartBullet",
+  "colorScheme",
+  "the value bar uses a single uniform fill (barColor) and range bands use their own palette (rangeColors) \u2014 there is no per-series identity for a rotating palette to drive.",
+  () => !!props.colorScheme?.length
+);
 const bulletCount = computed(() => props.series?.length ?? 0);
 const bullets = computed(() => {
   if (!bulletCount.value) return [];
@@ -525,6 +534,8 @@ const rootClasses = computed(() => [
   },
   backgroundColorClasses.value,
   elevationClasses.value,
+  marginClasses.value,
+  paddingClasses.value,
   roundedClasses.value
 ]);
 const rootStyles = computed(() => {
@@ -532,8 +543,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-bullet__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -542,12 +553,12 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "bullet chart");
-const svgAriaLabel = computed(() => props.title ?? "bullet chart");
-const svgTitle = computed(() => props.title ?? "bullet chart");
+const ariaLabel = computed(() => props.title ?? t("origam.chart.bullet.aria_label"));
+const svgAriaLabel = computed(() => props.title ?? t("origam.chart.bullet.aria_label"));
+const svgTitle = computed(() => props.title ?? t("origam.chart.bullet.aria_label"));
 const svgDesc = computed(() => {
   const n = visibleBullets.value.length;
-  return `Bullet chart with ${n} ${n === 1 ? "indicator" : "indicators"}.`;
+  return t("origam.chart.bullet.desc", n);
 });
 const bulletAriaLabel = (bullet) => {
   const pct = bullet.datum.target ? Math.round(bullet.datum.value / bullet.datum.target * 100) : 0;
@@ -593,7 +604,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%;
@@ -652,7 +673,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 {
@@ -700,19 +721,19 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__bullet-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);
 			pointer-events: none;
 			user-select: none;
 		}
 
 		.origam-chart__bullet-axis-line {
-			stroke: var(--origam-chart__axis-line---color, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart__axis-line---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 		}
 
 		.origam-chart__bullet-axis-tick {
-			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.6875rem);
 			pointer-events: none;
 			user-select: none;
@@ -725,7 +746,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);
@@ -763,7 +784,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/OrigamChartCandlestick.vue

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-candlestick"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-candlestick"
 	>
@@ -163,7 +163,7 @@
 					data-cy="origam-chart-candlestick-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -185,7 +185,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -195,15 +195,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 { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.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: "OrigamChartCandlestick"
@@ -264,6 +265,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);
@@ -271,6 +273,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 = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 20, bottom: 36, left: 56 };
@@ -289,6 +292,12 @@ const resolveColor = (raw) => {
 };
 const bullishColorResolved = computed(() => resolveColor(props.bullishColor));
 const bearishColorResolved = computed(() => resolveColor(props.bearishColor));
+useUnsupportedProp(
+  "OrigamChartCandlestick",
+  "colorScheme",
+  "candle colour is binary (bullishColor / bearishColor) \u2014 there is no per-series identity for a rotating palette to drive.",
+  () => !!props.colorScheme?.length
+);
 const rawData = computed(() => {
   const series = props.series?.[0];
   if (!series?.data?.length) return [];
@@ -439,15 +448,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-candlestick__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -456,12 +466,12 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "candlestick chart");
-const svgAriaLabel = computed(() => props.title ?? "candlestick chart");
-const svgTitle = computed(() => props.title ?? "candlestick chart");
+const ariaLabel = computed(() => props.title ?? t("origam.chart.candlestick.aria_label"));
+const svgAriaLabel = computed(() => props.title ?? t("origam.chart.candlestick.aria_label"));
+const svgTitle = computed(() => props.title ?? t("origam.chart.candlestick.aria_label"));
 const svgDesc = computed(() => {
   const n = candles.value.length;
-  return `Candlestick chart with ${n} ${n === 1 ? "candle" : "candles"}.`;
+  return t("origam.chart.candlestick.desc", n);
 });
 const candleAriaLabel = (candle) => {
   const d = candle.datum;
@@ -506,7 +516,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%;
@@ -565,7 +585,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 {
@@ -591,14 +611,14 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		&__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: var(--origam-chart__grid---stroke-width, 1);
 			fill: none;
 		}
 
 		&__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color-text-secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
 			user-select: none;
 			pointer-events: none;
 		}
@@ -608,7 +628,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			outline: none;
 
 			&:focus-visible {
-				outline: 2px solid var(--origam-color-action--primary---bg, #3b82f6);
+				outline: 2px solid var(--origam-color__action--primary---bg, #3b82f6);
 				outline-offset: 2px;
 			}
 
@@ -633,7 +653,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);
@@ -671,7 +691,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) {