origam 2.16.0 → 2.17.0

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-sankey"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-sankey"
 	>
@@ -66,7 +66,7 @@
 							:data-cy="`origam-chart-sankey-link-${ link.index }`"
 							tabindex="0"
 							role="button"
-							:aria-label="`${ link.from } to ${ link.to }: ${ link.formatted }`"
+							:aria-label="linkAriaLabel(link)"
 							@click="onLinkActivate(link, $event)"
 							@keydown.enter.prevent="onLinkActivate(link, $event)"
 							@keydown.space.prevent="onLinkActivate(link, $event)"
@@ -140,7 +140,7 @@
 					data-cy="origam-chart-sankey-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -162,7 +162,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -172,15 +172,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: "OrigamChartSankey"
@@ -238,13 +239,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(
+  "OrigamChartSankey",
+  "categories",
+  "a sankey draws nodes and links \u2014 there is no category axis.",
+  () => props.categories !== void 0
+);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 100, bottom: 20, left: 100 };
@@ -618,15 +627,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-sankey__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -635,14 +647,16 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "sankey chart");
-const svgAriaLabel = computed(() => props.title ?? "sankey chart");
-const svgTitle = computed(() => props.title ?? "sankey chart");
-const svgDesc = computed(() => {
-  const n = layoutNodes.value.length;
-  const l = layoutLinks.value.length;
-  return `Sankey diagram with ${n} ${n === 1 ? "node" : "nodes"} and ${l} ${l === 1 ? "link" : "links"}.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.sankey.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.sankey.desc", {
+  chart: defaultAriaLabel.value,
+  nodes: t("origam.chart.sankey.desc_nodes", layoutNodes.value.length),
+  links: t("origam.chart.sankey.desc_links", layoutLinks.value.length)
+}));
+const linkAriaLabel = (link) => t("origam.chart.sankey.link_aria_label", link.from, link.to, link.formatted);
 const onNodeEnter = (node) => {
   hoveredNodeName.value = node.name;
   hoveredLinkIndex.value = null;
@@ -705,7 +719,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%;
@@ -764,7 +788,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 {
@@ -814,7 +838,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			pointer-events: none;
 			font-size: var(--origam-chart__sankey-label---font-size, 0.6875rem);
 			font-weight: var(--origam-chart__sankey-label---font-weight, 500);
-			fill: var(--origam-chart__sankey-label---color, var(--origam-color-text-primary, currentColor));
+			fill: var(--origam-chart__sankey-label---color, var(--origam-color__text---primary, currentColor));
 			user-select: none;
 		}
 
@@ -829,7 +853,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);
@@ -867,7 +891,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/OrigamChartSparkline.vue

@@ -1,5 +1,6 @@
 <template>
 	<figure
+			:id="id"
 			class="origam-chart-sparkline"
 			:class="rootClasses"
 			:style="[rootStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
@@ -16,6 +17,7 @@
 				data-cy="origam-chart-sparkline-svg"
 				@mousemove="onSvgMouseMove"
 				@mouseleave="onSvgMouseLeave"
+				@click="onSvgClick"
 		>
 			<title>{{ svgTitle }}</title>
 			<desc>{{ svgDesc }}</desc>
@@ -34,7 +36,13 @@
 						:width="bar.width"
 						:height="bar.height"
 						:style="{ fill: resolvedColor }"
+						tabindex="0"
+						role="button"
+						:aria-label="pointAriaLabel(bar.index)"
 						:data-cy="`origam-chart-sparkline-bar-${ bar.index }`"
+						@click.stop="onPointClick(bar.index, $event)"
+						@keydown.enter.prevent="onPointClick(bar.index, $event)"
+						@keydown.space.prevent="onPointClick(bar.index, $event)"
 				/>
 			</g>
 
@@ -52,7 +60,13 @@
 						:width="bar.width"
 						:height="bar.height"
 						:style="{ fill: resolvedColor }"
+						tabindex="0"
+						role="button"
+						:aria-label="pointAriaLabel(bar.index)"
 						:data-cy="`origam-chart-sparkline-hbar-${ bar.index }`"
+						@click.stop="onPointClick(bar.index, $event)"
+						@keydown.enter.prevent="onPointClick(bar.index, $event)"
+						@keydown.space.prevent="onPointClick(bar.index, $event)"
 				/>
 			</g>
 
@@ -85,7 +99,13 @@
 						:cy="pt.cy"
 						:r="markerSize"
 						:style="{ fill: resolvedColor }"
+						tabindex="0"
+						role="button"
+						:aria-label="pointAriaLabel(pt.index)"
 						:data-cy="`origam-chart-sparkline-marker-${ pt.index }`"
+						@click.stop="onPointClick(pt.index, $event)"
+						@keydown.enter.prevent="onPointClick(pt.index, $event)"
+						@keydown.space.prevent="onPointClick(pt.index, $event)"
 				/>
 			</g>
 
@@ -98,7 +118,13 @@
 					:cy="m.cy"
 					:r="m.r"
 					:style="{ fill: m.fill }"
+					tabindex="0"
+					role="button"
+					:aria-label="pointAriaLabel(m.dataIndex)"
 					:data-cy="`origam-chart-sparkline-special-${ m.role }`"
+					@click.stop="onPointClick(m.dataIndex, $event)"
+					@keydown.enter.prevent="onPointClick(m.dataIndex, $event)"
+					@keydown.space.prevent="onPointClick(m.dataIndex, $event)"
 			/>
 		</svg>
 
@@ -136,13 +162,14 @@ import {
   computed,
   ref
 } from "vue";
-import {
-  useBackgroundColor,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useElevation } from "../../composables/Commons/elevation.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: "OrigamChartSparkline"
@@ -197,12 +224,13 @@ const props = defineProps({
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false }
 });
-defineEmits(["point-click"]);
+const emit = defineEmits(["point-click"]);
+const { t } = useLocale();
 defineSlots();
 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 SVG_WIDTH = 120;
 const SVG_HEIGHT = 30;
@@ -349,39 +377,63 @@ const specialMarkers = computed(() => {
 const svgRef = ref(null);
 const mousePos = ref({ x: 0, y: 0 });
 const hoveredIndex = ref(null);
-const tooltipPoint = computed(() => {
-  if (hoveredIndex.value === null || !activeSeries.value) return null;
-  const v = values.value[hoveredIndex.value];
+const pointAt = (index) => {
+  if (!activeSeries.value) return null;
+  const v = values.value[index];
   if (v === void 0) return null;
   return {
     seriesIndex: 0,
     seriesName: activeSeries.value.name,
-    dataIndex: hoveredIndex.value,
-    x: hoveredIndex.value,
+    dataIndex: index,
+    x: index,
     y: v,
     color: resolvedColor.value
   };
+};
+const tooltipPoint = computed(() => {
+  if (hoveredIndex.value === null) return null;
+  return pointAt(hoveredIndex.value);
 });
 const tooltipStyle = computed(() => ({
   left: `${mousePos.value.x + 8}px`,
   top: `${mousePos.value.y - 28}px`
 }));
+const nearestIndexFromEvent = (event) => {
+  const target = svgRef.value;
+  if (!target) return null;
+  const n = values.value.length;
+  if (!n) return null;
+  const rect = target.getBoundingClientRect();
+  const relX = event.clientX - rect.left;
+  const ratio = relX / rect.width;
+  return Math.min(n - 1, Math.max(0, Math.round(ratio * (n - 1))));
+};
 const onSvgMouseMove = (event) => {
   if (!props.showTooltip) return;
   const target = svgRef.value;
   if (!target) return;
   const rect = target.getBoundingClientRect();
-  const relX = event.clientX - rect.left;
-  mousePos.value = { x: relX, y: event.clientY - rect.top };
-  const n = values.value.length;
-  if (!n) return;
-  const ratio = relX / rect.width;
-  const idx = Math.min(n - 1, Math.max(0, Math.round(ratio * (n - 1))));
-  hoveredIndex.value = idx;
+  mousePos.value = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  hoveredIndex.value = nearestIndexFromEvent(event);
 };
 const onSvgMouseLeave = () => {
   hoveredIndex.value = null;
 };
+const onPointClick = (index, event) => {
+  const point = pointAt(index);
+  if (!point) return;
+  emit("point-click", point, event);
+};
+const onSvgClick = (event) => {
+  const idx = nearestIndexFromEvent(event);
+  if (idx === null) return;
+  onPointClick(idx, event);
+};
+const pointAriaLabel = (index) => {
+  const point = pointAt(index);
+  if (!point) return "";
+  return `${point.seriesName ?? ""}, ${index}: ${point.y}`.trim();
+};
 const rootClasses = computed(() => [
   {
     [`origam-chart-sparkline--${props.type}`]: true,
@@ -389,24 +441,66 @@ const rootClasses = computed(() => [
   },
   backgroundColorClasses.value,
   elevationClasses.value,
-  roundedClasses.value
+  marginClasses.value,
+  paddingClasses.value,
+  roundedClasses.value,
+  props.class
 ]);
-const rootStyles = computed(() => {
-  const w = typeof props.width === "number" ? `${props.width}px` : props.width;
-  const h = typeof props.height === "number" ? `${props.height}px` : props.height;
-  return {
-    width: w,
-    height: h,
-    display: "inline-block"
-  };
-});
-const ariaLabel = computed(() => props.title ?? "sparkline chart");
-const svgAriaLabel = computed(() => props.title ?? `${props.type} sparkline`);
-const svgTitle = computed(() => props.title ?? `${props.type} sparkline`);
-const svgDesc = computed(() => {
-  const n = values.value.length;
-  return `Sparkline with ${n} data ${n === 1 ? "point" : "points"}.`;
-});
+const { dimensionStyles } = useDimension(props);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "categories",
+  "a sparkline is a bare trend line: it draws no axis and no labels.",
+  () => props.categories !== void 0
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "animated",
+  "no animation is ever emitted \u2014 neither a CSS class nor an inline `animation` declaration.",
+  () => props.animated === true
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "animationDuration",
+  "nothing is animated, so there is no duration to apply.",
+  () => props.animationDuration !== void 0 && props.animationDuration !== 600
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "aspectRatio",
+  "the root sizes itself from `width` / `height`; no `aspect-ratio` declaration is emitted.",
+  () => props.aspectRatio !== void 0
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "fontSize",
+  "a sparkline renders no text at all.",
+  () => props.fontSize !== void 0
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "fontWeight",
+  "a sparkline renders no text at all.",
+  () => props.fontWeight !== void 0
+);
+useUnsupportedProp(
+  "OrigamChartSparkline",
+  "subtitle",
+  "a sparkline renders no header \u2014 neither title nor subtitle.",
+  () => props.subtitle !== void 0
+);
+const rootStyles = computed(() => [
+  dimensionStyles.value,
+  { display: "inline-block" },
+  props.style
+]);
+const defaultAriaLabel = computed(() => t(`origam.chart.sparkline.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.sparkline.desc", values.value.length, { chart: defaultAriaLabel.value })
+);
 </script>
 
 <style lang="scss" scoped>
@@ -415,8 +509,18 @@ const svgDesc = computed(() => {
 		display: inline-block;
 		box-sizing: border-box;
 		vertical-align: middle;
-		margin: 0;
-		padding: 0;
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility class
+		// (`.origam--m-4` / `.origam--p-4` from `margin="4"` / `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 `margin` / `padding` props' scale form go silently inert.
+		// See CLAUDE.md "CSS-first" table — `:where(…)` is the documented
+		// zero-specificity default.
+		:where(&) {
+			margin: 0;
+			padding: 0;
+		}
 
 		&__svg {
 			display: block;
@@ -451,7 +555,7 @@ const svgDesc = computed(() => {
 		&__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-sparkline__tooltip---padding, 2px 6px);
 			border-radius: var(--origam-chart-sparkline__tooltip---border-radius, 4px);
@@ -470,7 +574,7 @@ const svgDesc = computed(() => {
 			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));
 			font-size: var(--origam-chart-sparkline__empty---font-size, 0.75rem);
 		}
 	}