@humanforest/charts 0.1.0

package/src/FChartFrame.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts" generic="Datum extends Record<string, unknown>">
+// The XY frame. Doctrine: wrap by rot-risk, not chart type — never wrap mark props; wrap only
+// ceremony (container, axes, legend, tooltip/crosshair, repaint). The mark arrives through the
+// #mark slot as real @unovis/vue components, so mark props are Unovis' own ConfigInterface,
+// never re-enumerated here. Every library-shaped surface passes through as a typed
+// Partial<…ConfigInterface> object prop whose runtime is a blind spread over the house preset.
+import { computed, ref } from 'vue';
+import { VisXYContainer, VisAxis, VisCrosshair, VisTooltip, VisBulletLegend } from '@unovis/vue';
+import { Position } from '@unovis/ts';
+import type {
+  AxisConfigInterface,
+  BulletLegendItemInterface,
+  TooltipConfigInterface,
+  XYContainerConfigInterface,
+} from '@unovis/ts';
+// Relative file imports (not the package barrel): the barrel exports this component, and a
+// self-import through it would create a module cycle.
+import { fromCategories } from './fromCategories';
+import { forestTooltip, type ForestTooltipOptions } from './forestTooltip';
+import { motionDuration } from './motionDuration';
+import {
+  axisX as axisXPreset,
+  axisY as axisYPreset,
+  tooltipDefaults,
+  tooltipContainer,
+} from './presets';
+import { useThemeVersion } from './useThemeVersion';
+import { useTooltipSnap, nextTipId } from './snapTooltip';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    data: Datum[];
+    /** Palette categories (from useChartPalette) — series order, names, colours. */
+    categories: Record<string, BulletLegendItemInterface>;
+    height?: number;
+    /** Numeric field to plot on x (e.g. a timestamp). Default: the row index. */
+    xKey?: keyof Datum & string;
+    /** Blind spread onto VisXYContainer — any XYContainerConfigInterface key, presets last-wins. */
+    container?: Partial<XYContainerConfigInterface<Datum>>;
+    /** Merged over the house x-axis preset. `false` removes the axis. */
+    axisX?: Partial<AxisConfigInterface<Datum>> | false;
+    axisY?: Partial<AxisConfigInterface<Datum>> | false;
+    /** Merged over the house tooltip preset. `false` removes tooltip AND crosshair. */
+    tooltip?: Partial<TooltipConfigInterface> | false;
+    /** Let the panel track the pointer instead of snapping to the datum. Off by default: on a
+     *  crosshair chart the panel locks to the crosshair's x at the top of the plot, so it steps
+     *  between rows and holds still in between; without a crosshair it anchors to the hovered
+     *  mark. Turn it on for a free-floating panel. */
+    followCursor?: boolean;
+    /* The `| false` unions above compile to runtime type [Object, Boolean], and Vue casts an
+       ABSENT Boolean-typed prop to `false` unless it has a default — so each carries an empty
+       object default below; without it an unpassed axis or tooltip suppresses itself. */
+    /** `false` keeps the tooltip and drops the crosshair. For marks with no continuous value at
+     *  an x — a timeline row carries a span and a scatter is a cloud, so there is nothing to snap
+     *  to and the tooltip fires from the mark's own `triggers` instead. */
+    crosshair?: boolean;
+    /** Title/value formatting for the house crosshair template. */
+    format?: ForestTooltipOptions<Datum>;
+    /** The mark runs horizontally (set `orientation` on the mark itself). The frame's index
+     *  machinery — tick pinning, the edge gutter, grid-line defaults — follows the category
+     *  dimension onto y; formatters stay yours to place per axis. */
+    horizontal?: boolean;
+    legend?: boolean;
+    /** Where the legend sits. `bottom` (default) renders centred under the chart, caption-style;
+     *  `top` renders start-aligned above it, editorial-style. */
+    legendPosition?: 'top' | 'bottom';
+    /** Animation ms for the whole container (marks + axes). Default: motionDuration('slow'). */
+    duration?: number;
+    /** Extra signals that must remount the chart (theme flips and palette identity are automatic). */
+    repaintOn?: unknown[];
+  }>(),
+  {
+    height: 280,
+    horizontal: false,
+    crosshair: true,
+    followCursor: false,
+    legend: true,
+    legendPosition: 'bottom',
+    repaintOn: () => [],
+    axisX: () => ({}),
+    axisY: () => ({}),
+    tooltip: () => ({}),
+  },
+);
+
+defineSlots<{
+  mark(p: {
+    data: Datum[];
+    x: (d: Datum, i: number) => number;
+    y: Array<(d: Datum) => number | null | undefined>;
+    colors: string[];
+  }): unknown;
+}>();
+
+const acc = computed(() => fromCategories<Datum>(props.categories, props.data, props.xKey));
+
+// Index charts get tick positions at the row indices — without this the axis invents fractional
+// ticks between rows. The pin sits on the category axis: x normally, y when `horizontal` (Unovis
+// swaps which scale carries the index). Grid lines follow the value axis the same way. An xKey
+// chart scales its own axis.
+const indexTicks = computed(() =>
+  props.xKey ? undefined : { tickValues: props.data.map((_, i) => i) },
+);
+const xAxisConfig = computed<Partial<AxisConfigInterface<Datum>>>(() => ({
+  ...axisXPreset,
+  ...(props.horizontal ? { gridLine: true } : indexTicks.value),
+  ...(props.axisX || {}),
+}));
+const yAxisConfig = computed<Partial<AxisConfigInterface<Datum>>>(() => ({
+  ...axisYPreset,
+  ...(props.horizontal ? { gridLine: false, ...indexTicks.value } : {}),
+  ...(props.axisY || {}),
+}));
+
+// Index charts also get half a row of outer gutter: the category domain extends past the first
+// and last rows so edge marks (bars especially) stop sitting flush against the plot edges. Ticks
+// stay on the row indices, and the gutter follows the category dimension under `horizontal`. An
+// xKey chart plots a real field and keeps the library's exact-extent default; an explicit
+// `container` domain overrides this like any other container key.
+const containerConfig = computed<Partial<XYContainerConfigInterface<Datum>>>(() => {
+  const gutter: [number, number] = [-0.5, props.data.length - 0.5];
+  return {
+    ...(props.xKey || props.data.length === 0
+      ? {}
+      : props.horizontal
+        ? { yDomain: gutter }
+        : { xDomain: gutter }),
+    ...(props.container || {}),
+  };
+});
+
+const tipFn = computed(() => forestTooltip<Datum>(props.categories, props.format));
+
+// The panel is snapped to the datum by useTooltipSnap below, which rewrites its position after
+// Unovis places it. What Unovis is configured to do here is therefore only what shows when the
+// snap stands down (`followCursor`), plus the show/hide and content it always owns: pointer
+// tracking as the base, and Auto placement so Crosshair's own left/right flip is free to run.
+// The `data-forest-tip` attribute is how the snap finds this frame's panel among body's children,
+// so it is merged last — a call site's own attributes are kept, but cannot displace the hook.
+const tipId = nextTipId();
+const tooltipConfig = computed<Partial<TooltipConfigInterface>>(() => ({
+  ...tooltipDefaults,
+  container: tooltipContainer(),
+  followCursor: true,
+  ...(props.crosshair ? { horizontalPlacement: Position.Auto } : {}),
+  ...(props.tooltip || {}),
+  attributes: { ...(props.tooltip || {}).attributes, 'data-forest-tip': tipId },
+}));
+
+const rootEl = ref<HTMLElement>();
+useTooltipSnap(rootEl, tipId, props.crosshair ? 'crosshair' : 'mark', () => !props.followCursor);
+
+// Charts animate on the motion tokens (reduced motion resolves to 0); container duration
+// propagates to marks and axes. Override via the prop or container.duration.
+const resolvedDuration = computed(() => props.duration ?? motionDuration());
+
+// Theme flips and palette identity changes both remount: Unovis caches resolved colours on mount.
+const themeVersion = useThemeVersion();
+const repaintKey = computed(() =>
+  [themeVersion.value, acc.value.colors.join('|'), ...props.repaintOn].map(String).join('-'),
+);
+</script>
+
+<template>
+  <div ref="rootEl" style="display: flex; flex-direction: column; gap: 0.75rem">
+    <VisXYContainer
+      :key="repaintKey"
+      :data="data"
+      :height="height"
+      :duration="resolvedDuration"
+      v-bind="{ ...containerConfig, ...$attrs }"
+    >
+      <slot name="mark" :data="data" :x="acc.xAccessor" :y="acc.yAccessors" :colors="acc.colors" />
+      <VisAxis v-if="axisX !== false" v-bind="xAxisConfig" />
+      <VisAxis v-if="axisY !== false" v-bind="yAxisConfig" />
+      <template v-if="tooltip !== false">
+        <!-- duration 0 is deliberate, and load-bearing twice over. Unovis animates the crosshair
+             line's x through a transition, so it eases toward the row the pointer just snapped to
+             — which reads as lag on the one element that should track the pointer exactly, and
+             leaves the line's real position mid-flight while the snap is reading it as the
+             tooltip's anchor. Easing it would put the panel on the wrong side of the plot. -->
+        <VisCrosshair
+          v-if="crosshair"
+          :x="acc.xAccessor"
+          :y="acc.yAccessors"
+          :color="acc.colors"
+          :template="tipFn"
+          :duration="0"
+        />
+        <VisTooltip v-bind="tooltipConfig" />
+      </template>
+    </VisXYContainer>
+    <VisBulletLegend
+      v-if="legend"
+      :items="acc.legendItems"
+      :style="legendPosition === 'top' ? { order: -1, alignSelf: 'flex-start' } : { alignSelf: 'center' }"
+    />
+  </div>
+</template>

package/src/FChartFrameSingle.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts" generic="Data">
+// The single-container frame, for the non-XY charts (Donut, Sankey, Graph, Treemap). Same
+// doctrine as FChartFrame: wrap only ceremony — container, legend, tooltip wiring, repaint —
+// never mark props. `data` is whatever the mark's container expects (number[] for a donut,
+// { nodes, links } for a sankey) and passes through untyped by the frame, typed by the mark.
+import { computed, ref } from 'vue';
+import { VisSingleContainer, VisTooltip, VisBulletLegend } from '@unovis/vue';
+import type { BulletLegendItemInterface, TooltipConfigInterface } from '@unovis/ts';
+// Relative file imports (not the package barrel): the barrel exports this component, and a
+// self-import through it would create a module cycle.
+import { fromCategories } from './fromCategories';
+import { motionDuration } from './motionDuration';
+import { tooltipDefaults, tooltipContainer } from './presets';
+import { useThemeVersion } from './useThemeVersion';
+import { useTooltipSnap, nextTipId } from './snapTooltip';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    data: Data;
+    /** Optional: series colours + legend. Omit for charts that label directly (Sankey, Graph). */
+    categories?: Record<string, BulletLegendItemInterface>;
+    height?: number;
+    /** Rendered only when given — single-container tooltips need `triggers` to show anything. */
+    tooltip?: Partial<TooltipConfigInterface>;
+    /** Let the panel track the pointer instead of snapping to the hovered mark. Off by default:
+     *  the panel anchors to the centre of the shape under the cursor and holds there, so it moves
+     *  when the reading changes rather than with every pixel. Turn it on for a free-floating panel.
+     */
+    followCursor?: boolean;
+    legend?: boolean;
+    /** Where the legend sits. `bottom` (default) renders centred under the chart, caption-style;
+     *  `top` renders start-aligned above it, editorial-style. */
+    legendPosition?: 'top' | 'bottom';
+    /** Animation ms for the container's components. Default: motionDuration('slow'). */
+    duration?: number;
+    /** Extra signals that must remount the chart (theme flips and palette identity are automatic). */
+    repaintOn?: unknown[];
+  }>(),
+  { height: 260, legend: true, legendPosition: 'bottom', followCursor: false, repaintOn: () => [] },
+);
+
+defineSlots<{
+  mark(p: { data: Data; colors: string[] }): unknown;
+}>();
+
+const acc = computed(() => fromCategories(props.categories ?? {}));
+
+// As in FChartFrame: the panel is snapped to the hovered mark by useTooltipSnap, so what Unovis is
+// configured to do is the fallback for when the snap stands down. Pointer tracking is that
+// fallback — never the library's element pinning, which anchors to a bounding box that for these
+// marks (arcs, groups, links) is nothing like the shape under the cursor.
+const tipId = nextTipId();
+const tooltipConfig = computed<Partial<TooltipConfigInterface>>(() => ({
+  ...tooltipDefaults,
+  container: tooltipContainer(),
+  followCursor: true,
+  ...(props.tooltip || {}),
+  attributes: { ...(props.tooltip || {}).attributes, 'data-forest-tip': tipId },
+}));
+
+const rootEl = ref<HTMLElement>();
+useTooltipSnap(rootEl, tipId, 'mark', () => !props.followCursor);
+const resolvedDuration = computed(() => props.duration ?? motionDuration());
+
+const themeVersion = useThemeVersion();
+const repaintKey = computed(() =>
+  [themeVersion.value, acc.value.colors.join('|'), ...props.repaintOn].map(String).join('-'),
+);
+</script>
+
+<template>
+  <div ref="rootEl" style="display: flex; flex-direction: column; gap: 0.75rem">
+    <VisSingleContainer
+      :key="repaintKey"
+      :data="data"
+      :height="height"
+      :duration="resolvedDuration"
+      v-bind="$attrs"
+    >
+      <slot name="mark" :data="data" :colors="acc.colors" />
+      <VisTooltip v-if="tooltip" v-bind="tooltipConfig" />
+    </VisSingleContainer>
+    <VisBulletLegend
+      v-if="legend && acc.legendItems.length"
+      :items="acc.legendItems"
+      :style="legendPosition === 'top' ? { order: -1, alignSelf: 'flex-start' } : { alignSelf: 'center' }"
+    />
+  </div>
+</template>

package/src/FChartLegend.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// The house-positioned legend, for charts assembled without a frame. FChartFrame and
+// FChartFrameSingle place their own legend; a bare VisBulletLegend has no opinion about where it
+// sits, so direct charts would otherwise each hand-roll the same wrapper. Same items prop and the
+// same two positions the frames take, so a chart reads identically whichever way it is built.
+import { VisBulletLegend } from '@unovis/vue';
+import type { BulletLegendItemInterface } from '@unovis/ts';
+
+withDefaults(
+  defineProps<{
+    items: BulletLegendItemInterface[];
+    /** `bottom` (default) centres it under the chart; `top` sits it start-aligned above. */
+    position?: 'top' | 'bottom';
+  }>(),
+  { position: 'bottom' },
+);
+</script>
+
+<template>
+  <div
+    style="display: flex"
+    :style="{ justifyContent: position === 'top' ? 'flex-start' : 'center' }"
+  >
+    <VisBulletLegend :items="items" />
+  </div>
+</template>

package/src/FDistributionBar.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+// One bar split into its parts: what a figure is made of, at the size of a figure. Sits in an FKpi
+// `visual` slot beside the number it decomposes, where a donut would need a legend, a centre label
+// and more height than a tile has.
+//
+// Plain DOM on a grid rather than SVG. Grid takes the gaps out of the track widths itself, so the
+// segments still sum to the bar — the same layout in flex needs percentages that the gaps then
+// overflow.
+//
+// Deliberately not a stacked bar chart: one bar, one moment. A composition that moves over time is
+// a chart, and FChartFrame is the component for that.
+//
+// Two looks. Split (default) gives each part its own pill, which says "these are separate things,
+// here is their relative size". `joined` closes the gaps and rounds only the bar's outside corners,
+// which says "this is one quantity, here is what it is made of". The corner shaping is what does
+// the work: pills at gap 0 pinch at every seam.
+//
+// Joined is NOT the component for a plain progress or capacity bar — one value against a maximum,
+// no parts, is UProgress, which owns the semantics (role, value text, step labels) and the intent
+// colours. This is for the case UProgress cannot draw: the filled length itself split by what made
+// it up.
+//
+// In an FKpi `visual` slot, pass `visual-fit="inset"` on the tile. The slot's default fit bleeds to
+// the card's side and bottom edges, which is right for a sparkline — it holds no text and its
+// baseline is the card's. This holds a legend, so it wants the padding back and top alignment.
+import { computed, ref } from 'vue';
+import { categoricalVar, type CategoricalPalette } from './useChartPalette';
+import {
+  distributionShares,
+  formatShare,
+  segmentRadius,
+  type DistributionSegment,
+} from './distribution';
+
+const props = withDefaults(
+  defineProps<{
+    /** The parts. Order is the drawing order, left to right, and fixes each part's palette slot. */
+    data: DistributionSegment[];
+    /**
+     * The whole the parts are measured against. Defaults to their sum, which makes the bar a pure
+     * composition. Pass a larger number to leave a remainder — "78% of capacity, and here is what
+     * used it" is one bar, not two.
+     */
+    total?: number;
+    /** Bar thickness. */
+    height?: number;
+    /** Space between segments. Ignored when `joined` — a joined bar has no space to give. */
+    gap?: number;
+    /**
+     * Draws the parts as ONE continuous bar: no gaps, and only the outside corners rounded, so the
+     * seams are square. For a quantity read as one thing that happens to be made of parts, where
+     * separate pills would read as separate objects. One value and no parts is UProgress, not this.
+     */
+    joined?: boolean;
+    palette?: CategoricalPalette;
+    legend?: boolean;
+    /** Adds each part's percentage to its legend entry. The bar states shares by length either way. */
+    showShare?: boolean;
+    locale?: string;
+    /**
+     * Hover and focus text on the segments. `true` uses "<label> — <value> (<share>)"; a function
+     * writes its own. Given either, the segments become real buttons so a keyboard reaches them —
+     * which is also why it is opt-in: three tiles of three parts is nine extra tab stops for a
+     * figure the legend already states.
+     */
+    tooltip?: boolean | ((segment: DistributionSegment, share: number) => string);
+    /** Overrides the generated sentence for assistive tech. */
+    ariaLabel?: string;
+  }>(),
+  {
+    height: 8,
+    gap: 2,
+    joined: false,
+    palette: 'cvdSafe',
+    legend: true,
+    showShare: false,
+    locale: 'en-GB',
+    total: undefined,
+    /* Vue casts an ABSENT Boolean-typed prop to false, which is the intended default here — but it
+       is spelled out so the union with the formatter function keeps a declared default either way. */
+    tooltip: false,
+    ariaLabel: undefined,
+  },
+);
+
+const shares = computed(() => distributionShares(props.data, props.total));
+
+const colorOf = (part: { segment: DistributionSegment; index: number }) =>
+  part.segment.color ?? categoricalVar(props.palette, part.index);
+
+// A zero-width track would still take its share of the gap, leaving a stray notch where nothing is.
+const drawn = computed(() => shares.value.parts.filter((p) => p.share > 0));
+
+// Grid tracks in fr, so the gaps come out of the tracks rather than pushing the last one out.
+const columns = computed(() => {
+  const tracks = drawn.value.map((p) => `${p.share}fr`);
+  if (shares.value.remainder > 0) tracks.push(`${shares.value.remainder}fr`);
+  return tracks.join(' ');
+});
+
+// How many tracks actually render — the drawn segments plus the remainder when there is one. The
+// corner shaping needs this, and it is NOT `data.length`: zero-share parts are filtered out, so the
+// last DRAWN segment is what carries the bar's right-hand corners.
+const trackCount = computed(() => drawn.value.length + (shares.value.remainder > 0 ? 1 : 0));
+const radiusAt = (index: number) =>
+  segmentRadius(index, trackCount.value, props.height / 2, props.joined);
+
+// The bar's lengths are the only place the shares are stated unless `showShare` is on, so the
+// sentence carries them regardless.
+const label = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
+  const parts = shares.value.parts.map(
+    (p) => `${p.segment.label} ${formatShare(p.share, props.locale)}`,
+  );
+  if (shares.value.remainder > 0)
+    parts.push(`unaccounted ${formatShare(shares.value.remainder, props.locale)}`);
+  return parts.join(', ');
+});
+
+const interactive = computed(() => props.tooltip !== false);
+
+const num = (n: number) => n.toLocaleString(props.locale);
+
+const tipFor = (segment: DistributionSegment, share: number) =>
+  typeof props.tooltip === 'function'
+    ? props.tooltip(segment, share)
+    : `${segment.label} — ${num(segment.value)} (${formatShare(share, props.locale)})`;
+
+// The remainder is not one of `data`, so it has no segment to hand a formatter. It gets the same
+// sentence shape from the numbers the shares already carry.
+const remainderTip = computed(
+  () =>
+    `Unaccounted — ${num(Math.round(shares.value.remainder * shares.value.total))} (${formatShare(shares.value.remainder, props.locale)})`,
+);
+
+// One UTooltip for the whole bar, re-anchored to the segment under the pointer, rather than one
+// per segment: `reference` moves the popper's anchor while the trigger stays the bar itself, so a
+// bar of any width costs a single tooltip root.
+//
+// `tipOpen` owns visibility; the text and the anchor are left alone on close. Clearing them
+// together with the flag emptied the bubble mid-exit-animation and dropped the anchor back to the
+// trigger, so leaving a segment flashed a blank pill at the container's centre for ~80ms.
+//
+// Anchored to the segment, not the pointer, so a keyboard focus places it too.
+const tip = ref<{ text: string; el: HTMLElement | null }>({ text: '', el: null });
+const tipOpen = ref(false);
+const showTip = (event: Event, text: string) => {
+  tip.value = { text, el: event.currentTarget as HTMLElement };
+  tipOpen.value = true;
+};
+const hideTip = () => {
+  tipOpen.value = false;
+};
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-2">
+    <!-- `img` makes its contents presentational, which is right while the bar is a graphic and
+         wrong the moment the segments are buttons — the buttons would be hidden from the very
+         readers the role is for. Interactive, it becomes a labelled group whose children stay
+         reachable, and each segment states itself. -->
+    <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+      <div
+        class="grid w-full"
+        :role="interactive ? 'group' : 'img'"
+        :aria-label="label"
+        :style="{
+          gridTemplateColumns: columns,
+          gap: `${joined ? 0 : gap}px`,
+          height: `${height}px`,
+        }"
+      >
+      <component
+        :is="interactive ? 'button' : 'span'"
+        v-for="(p, i) in drawn"
+        :key="p.index"
+        :type="interactive ? 'button' : undefined"
+        :class="
+          interactive
+            ? 'cursor-pointer transition-[filter] duration-150 hover:brightness-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]'
+            : ''
+        "
+        :style="{ background: colorOf(p), borderRadius: radiusAt(i) }"
+        :aria-label="interactive ? tipFor(p.segment, p.share) : undefined"
+        @mouseenter="interactive && showTip($event, tipFor(p.segment, p.share))"
+        @mouseleave="hideTip"
+        @focus="interactive && showTip($event, tipFor(p.segment, p.share))"
+        @blur="hideTip"
+      />
+      <!-- The remainder is the track colour, not a palette slot: it is the absence of a category,
+           and giving it a colour would make it read as one more. -->
+      <component
+        :is="interactive ? 'button' : 'span'"
+        v-if="shares.remainder > 0"
+        :type="interactive ? 'button' : undefined"
+        class="bg-[var(--ui-bg-accented)]"
+        :class="
+          interactive
+            ? 'cursor-pointer transition-[filter] duration-150 hover:brightness-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]'
+            : ''
+        "
+        :style="{ borderRadius: radiusAt(trackCount - 1) }"
+        :aria-label="interactive ? remainderTip : undefined"
+        @mouseenter="interactive && showTip($event, remainderTip)"
+        @mouseleave="hideTip"
+        @focus="interactive && showTip($event, remainderTip)"
+        @blur="hideTip"
+        />
+      </div>
+    </UTooltip>
+
+    <!-- Centred: the entries are a caption for the bar rather than a column of their own, and a
+         wrapped second row reads as ragged against a left edge the bar does not share. -->
+    <div v-if="legend" class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+      <span v-for="p in shares.parts" :key="p.index" class="flex items-center gap-1.5">
+        <span class="size-2 rounded-full" :style="{ background: colorOf(p) }" aria-hidden="true" />
+        <span class="type-caption text-muted">{{ p.segment.label }}</span>
+        <span v-if="showShare" class="type-caption text-dimmed">
+          {{ formatShare(p.share, locale) }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>