@sentropic/design-system-vue 0.36.24 → 0.36.26

package/dist/styles.css

@@ -312,6 +312,28 @@
     font-weight: 600;
   }
 
+  /* Data labels — per-point value, drawn on top. Token-only colour. */
+  .st-areaChart__dataLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed vertical line at the active (hovered/controlled) key,
+     plus an emphasised marker on the point. Decorative (aria-hidden). */
+  .st-areaChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+  .st-areaChart__crosshairMarker {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 2;
+  }
+
 .st-aspectRatio {
     display: block;
     overflow: hidden;
@@ -655,6 +677,23 @@
     font-weight: 600;
   }
 
+  /* Data labels — per-bar value, drawn on top. Token-only colour. */
+  .st-barChart__dataLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed line on the CATEGORY axis at the active (hovered/
+     controlled) bar. Decorative (aria-hidden). */
+  .st-barChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .st-barChart__bar,
     .st-barChart__filterChip { transition: none; }
@@ -2060,6 +2099,13 @@
     font-weight: 650;
   }
 
+  /* Data labels — per-slice value, centred in the arc. Token-only colour. */
+  .st-donutChart__dataLabel {
+    fill: var(--st-semantic-text-inverse);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
   .st-donutChart__tooltip {
     background: var(--st-semantic-surface-inverse);
     border-radius: var(--st-radius-sm, 0.25rem);
@@ -3667,6 +3713,28 @@
     font-weight: 600;
   }
 
+  /* Data labels — per-point value, drawn on top. Token-only colour. */
+  .st-lineChart__dataLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed vertical line at the active (hovered/controlled) key,
+     plus an emphasised marker on the point. Decorative (aria-hidden). */
+  .st-lineChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+  .st-lineChart__crosshairMarker {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 2;
+  }
+
 .st-link {
     color: var(--st-component-link-text, var(--st-semantic-text-link));
     cursor: var(--st-cursor-interactive, pointer);
@@ -6003,6 +6071,8 @@
   .st-stackedBar__seg--category6 { fill: var(--st-semantic-data-category6); }
   .st-stackedBar__seg--category7 { fill: var(--st-semantic-data-category7); }
   .st-stackedBar__seg--category8 { fill: var(--st-semantic-data-category8); }
+  /* Data labels — per-segment value, centred. Token-only colour. */
+  .st-stackedBar__dataLabel { fill: var(--st-semantic-text-inverse); font-size: 0.6875rem; font-weight: 600; }
   .st-stackedBar__tooltip {
     background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
     color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column; font-size: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.36.24",
+  "version": "0.36.26",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {