origam 2.15.0 → 2.17.0

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

@@ -422,12 +422,10 @@ import OrigamChartVariwide from "./OrigamChartVariwide.vue";
 import OrigamChartSunburst from "./OrigamChartSunburst.vue";
 import OrigamChartTreemap from "./OrigamChartTreemap.vue";
 import OrigamChartWordCloud from "./OrigamChartWordCloud.vue";
-import {
-  CHART_CARTESIAN_KIND,
-  CHART_POLAR_KIND,
-  CHART_PYRAMID_KIND,
-  CHART_TYPE
-} from "../../enums";
+import { CHART_CARTESIAN_KIND } from "../../enums/Chart/chart-cartesian.enum";
+import { CHART_POLAR_KIND } from "../../enums/Chart/chart-polar.enum";
+import { CHART_PYRAMID_KIND } from "../../enums/Chart/chart-pyramid.enum";
+import { CHART_TYPE } from "../../enums/Chart/chart.enum";
 defineOptions({
   name: "OrigamChart"
 });
@@ -438,7 +436,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   showGrid: { type: Boolean, required: false, default: true },
   showAxis: { type: Boolean, required: false, default: true },
@@ -451,7 +449,7 @@ const props = defineProps({
   xAxisFormat: { type: Function, required: false, default: void 0 },
   yAxisFormat: { type: Function, required: false, default: void 0 },
   aspectRatio: { type: String, required: false, default: void 0 },
-  smoothing: { type: String, required: false, default: "none" },
+  smoothing: { type: null, required: false, default: "none" },
   yMin: { type: Number, required: false, default: void 0 },
   yMax: { type: Number, required: false, default: void 0 },
   gaugeMin: { type: Number, required: false, default: 0 },
@@ -494,6 +492,7 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const CARTESIAN_TYPES = Object.values(CHART_CARTESIAN_KIND);
 const POLAR_TYPES = Object.values(CHART_POLAR_KIND);
 const PYRAMID_TYPES = Object.values(CHART_PYRAMID_KIND);
@@ -519,7 +518,39 @@ const isParetoType = computed(() => props.type === CHART_TYPE.PARETO);
 const isMapType = computed(() => props.type === CHART_TYPE.MAP);
 const isSparklineType = computed(() => props.type === CHART_TYPE.SPARKLINE);
 const dataCyAttr = computed(() => `origam-chart origam-chart--${props.type}`);
+const surfaceProps = computed(() => ({
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  width: props.width,
+  maxHeight: props.maxHeight,
+  maxWidth: props.maxWidth,
+  minHeight: props.minHeight,
+  minWidth: props.minWidth,
+  bgColor: props.bgColor,
+  elevation: props.elevation,
+  padding: props.padding,
+  paddingTop: props.paddingTop,
+  paddingRight: props.paddingRight,
+  paddingBottom: props.paddingBottom,
+  paddingLeft: props.paddingLeft,
+  paddingBlock: props.paddingBlock,
+  paddingInline: props.paddingInline,
+  margin: props.margin,
+  marginTop: props.marginTop,
+  marginRight: props.marginRight,
+  marginBottom: props.marginBottom,
+  marginLeft: props.marginLeft,
+  marginBlock: props.marginBlock,
+  marginInline: props.marginInline,
+  rounded: props.rounded,
+  roundedTopLeft: props.roundedTopLeft,
+  roundedTopRight: props.roundedTopRight,
+  roundedBottomLeft: props.roundedBottomLeft,
+  roundedBottomRight: props.roundedBottomRight
+}));
 const cartesianProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -549,6 +580,7 @@ const cartesianProps = computed(() => ({
   drilldown: props.drilldown
 }));
 const polarProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -568,6 +600,7 @@ const polarProps = computed(() => ({
   drilldown: props.drilldown
 }));
 const radarProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -581,6 +614,7 @@ const radarProps = computed(() => ({
   aspectRatio: props.aspectRatio
 }));
 const gaugeProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -598,6 +632,7 @@ const gaugeProps = computed(() => ({
   gaugeUnit: props.gaugeUnit
 }));
 const pyramidProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -615,6 +650,7 @@ const pyramidProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const honeycombProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -630,6 +666,7 @@ const honeycombProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const treemapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -644,6 +681,7 @@ const treemapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sankeyProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -659,6 +697,7 @@ const sankeyProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const wordCloudProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -673,6 +712,7 @@ const wordCloudProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const heatmapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -689,6 +729,7 @@ const heatmapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sunburstProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -703,6 +744,7 @@ const sunburstProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const boxPlotProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -723,6 +765,7 @@ const boxPlotProps = computed(() => ({
   yMax: props.yMax
 }));
 const pictorialProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -740,6 +783,7 @@ const pictorialProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const candlestickProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -758,6 +802,7 @@ const candlestickProps = computed(() => ({
   yMax: props.yMax
 }));
 const streamgraphProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -776,6 +821,7 @@ const streamgraphProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const variwideProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -795,6 +841,7 @@ const variwideProps = computed(() => ({
   yMax: props.yMax
 }));
 const polarBarProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -811,6 +858,7 @@ const polarBarProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const bulletProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -827,6 +875,7 @@ const bulletProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const paretoProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -843,6 +892,7 @@ const paretoProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const mapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -856,6 +906,7 @@ const mapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sparklineProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   width: props.width,

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({
@@ -285,7 +285,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -321,11 +321,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 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"
 });
@@ -248,7 +249,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -284,18 +285,20 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 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) {