@vit-foundation/ui 0.32.1 → 0.33.0

package/README.md

@@ -27,7 +27,7 @@ Everything exports flat from the root, and again grouped by role:
 
 | Entry point                                                     | What lives there                                                                                                                                                                                                                                                                  |
 | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`/primitives`](./docs/components/primitives.md)                | Button, GhostButton, Link, CardMedia, CardTitle, CopyIntro, DateText, DecorShapes, FilterChips, Pagination, RichText, SearchInput, ShareRow                                                                                                                                       |
+| [`/primitives`](./docs/components/primitives.md)                | Button, GhostButton, Link, CardMedia, CardTitle, CopyIntro, DateText, DecorShapes, FigureBody, FigureHead, FilterChips, Pagination, PersonFigure, RichText, SearchInput, ShareRow                                                                                                 |
 | [`/forms`](./docs/forms.md)                                     | Field, SelectField, TextField, FormFeedback, FormErrorFeedback, FormResultSlot, Honeypot, LocaleField, NewsletterIntentField — plus the remote-form seam: structural types, transport constants, field bounds                                                                     |
 | [`/chrome`](./docs/components/chrome.md)                        | PageShell, Nav, Footer                                                                                                                                                                                                                                                            |
 | [`/content`](./docs/components/content.md)                      | WeeklieCard, ProjectCard, Timeline, TimelineMilestone, TeamMemberCard, CollaboratorList, JobList, SortSelect, the nine page modules (HomePage … WeeklyPage) — plus the data shapes, the page-copy vocabulary, helpers and the two list rules (createWeeklyList, createUrlFilters) |

package/dist/components/madlib/InlineSelect.svelte

@@ -145,7 +145,7 @@
 
 	.vit-inline-select__trigger {
 		display: inline;
-		padding: 0 0 0.1em;
+		padding: 0;
 		margin: 0;
 		border: 0;
 		border-bottom: 2px solid currentColor;
@@ -183,8 +183,10 @@
 		position: absolute;
 		left: 0;
 		z-index: var(--vit-madlib-menu-z, 40);
-		margin: 0.25em 0 0;
-		padding: 0.25em 0;
+		/* Pixel spacing, not em: the menu sits beside sentence text that can be
+		   24px, and em-scaled rows read as a different, roomier control there. */
+		margin: 4px 0 0;
+		padding: 4px 0;
 		list-style: none;
 		width: max-content;
 		max-width: 42rem;
@@ -197,7 +199,7 @@
 	}
 
 	.vit-inline-select__option {
-		padding: 0.375em 1em;
+		padding: 6px 16px;
 		font-weight: var(--vit-madlib-control-weight, 700);
 		color: var(--vit-madlib-muted-color, color-mix(in srgb, currentColor 35%, transparent));
 		cursor: pointer;

package/dist/components/madlib/Madlib.svelte

@@ -233,12 +233,12 @@
 	}
 
 	.vit-madlib__separator {
-		padding: 0 0.375em;
+		padding: 0 6px;
 		color: var(--vit-madlib-muted-color, color-mix(in srgb, currentColor 35%, transparent));
 	}
 
 	.vit-madlib__toggle {
-		padding: 0 0 0.125em;
+		padding: 0 0 2px;
 		margin: 0;
 		border: 0;
 		border-bottom: 2px solid transparent;

package/dist/components/ui/figure/FigureBody.svelte

@@ -0,0 +1,63 @@
+<!--
+  @component FigureBody
+
+  The line body: a shoulder line with two hanging arms and a pair of legs in
+  a pose, drawn in the composed figure box (`FIGURE_VIEWBOX` in `./paths`).
+  No head — a `FigureHead`, a marker or a callout goes in as `children`, which
+  render INSIDE the svg and so share its coordinates (neck at `NECK`, shoulder
+  line at `SHOULDER`).
+
+  Decorative: `aria-hidden`, and it never names itself — whatever composes it
+  carries the text. Sized by `--vit-figure-width`; the strokes scale with it
+  because `--vit-figure-stroke` is in viewBox units.
+
+  @property arms - Arm pose
+  @property legs - Leg pose
+  @property class - Extra classes on the svg
+  @property children - Drawn inside the svg, after the body
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ARMS, ARMS_AT, FIGURE_VIEWBOX, LEGS, LEGS_AT } from './paths.js';
+	import type { ArmsPose, LegsPose } from './paths.js';
+
+	interface Props {
+		arms?: ArmsPose;
+		legs?: LegsPose;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { arms = 'down', legs = 'standing', class: className = '', children }: Props = $props();
+</script>
+
+<svg
+	class="vit-figure-body {className}"
+	viewBox={FIGURE_VIEWBOX}
+	aria-hidden="true"
+	focusable="false"
+>
+	<g class="vit-figure-body__strokes">
+		<path d={ARMS[arms]} transform={ARMS_AT} />
+		<path d={LEGS[legs]} transform={LEGS_AT} />
+	</g>
+	{@render children?.()}
+</svg>
+
+<style>
+	.vit-figure-body {
+		display: block;
+		width: var(--vit-figure-width, 10rem);
+		height: auto;
+		/* A callout, or a raised arm at a small width, may leave the box. */
+		overflow: visible;
+	}
+
+	.vit-figure-body__strokes {
+		fill: none;
+		stroke: var(--vit-figure-ink, var(--color-ink));
+		stroke-width: var(--vit-figure-stroke, 4);
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+</style>

package/dist/components/ui/figure/FigureBody.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { ArmsPose, LegsPose } from './paths.js';
+interface Props {
+    arms?: ArmsPose;
+    legs?: LegsPose;
+    class?: string;
+    children?: Snippet;
+}
+/**
+ * FigureBody
+ *
+ * The line body: a shoulder line with two hanging arms and a pair of legs in
+ * a pose, drawn in the composed figure box (`FIGURE_VIEWBOX` in `./paths`).
+ * No head — a `FigureHead`, a marker or a callout goes in as `children`, which
+ * render INSIDE the svg and so share its coordinates (neck at `NECK`, shoulder
+ * line at `SHOULDER`).
+ *
+ * Decorative: `aria-hidden`, and it never names itself — whatever composes it
+ * carries the text. Sized by `--vit-figure-width`; the strokes scale with it
+ * because `--vit-figure-stroke` is in viewBox units.
+ *
+ * @property arms - Arm pose
+ * @property legs - Leg pose
+ * @property class - Extra classes on the svg
+ * @property children - Drawn inside the svg, after the body
+ */
+declare const FigureBody: import("svelte").Component<Props, {}, "">;
+type FigureBody = ReturnType<typeof FigureBody>;
+export default FigureBody;

package/dist/components/ui/figure/FigureHead.svelte

@@ -0,0 +1,93 @@
+<!--
+  @component FigureHead
+
+  The head, three ways: a cut-out photo with a transparent background sat on
+  the neck, a portrait masked into a circle, or — with no photo, or one that
+  fails to load — the survey's drawn outline. An svg FRAGMENT: it renders
+  inside a `FigureBody` (or any svg in the figure box) and places itself on
+  `NECK`.
+
+  The photo carries no alt and the outline no title: the head is part of a
+  decorative drawing, and the name belongs to whatever composes it.
+
+  @property photo - The photo; absent or failing to load, the head is drawn
+  @property photoShape - `cutout` sits a transparent cut-out on the neck; `circle` masks a portrait
+  @property head - The drawn outline, used when there is no photo
+  @property headScale - Scales the photo about the neck point, so the chin stays put
+-->
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+	import { HEAD_AT, HEADS, NECK } from './paths.js';
+	import type { HeadShape } from './paths.js';
+
+	interface Props {
+		photo?: string | null;
+		photoShape?: 'cutout' | 'circle';
+		head?: HeadShape;
+		headScale?: number;
+	}
+
+	let { photo, photoShape = 'cutout', head = 'round', headScale = 1 }: Props = $props();
+
+	/**
+	 * The photo that failed to load, so a broken URL degrades to the drawn head
+	 * rather than an empty neck. Keyed by value, not a boolean (the CardMedia
+	 * rule): a new URL gets a fresh attempt.
+	 */
+	let failedSrc = $state<string | null>(null);
+	const showPhoto = $derived(Boolean(photo) && photo !== failedSrc);
+
+	// A clipPath is referenced by id, and a team page renders many heads.
+	const uid = $props.id();
+	const clipId = `${uid}-head`;
+	const transform = $derived(
+		headScale === 1
+			? undefined
+			: `translate(${NECK.x} ${NECK.y}) scale(${headScale}) translate(${-NECK.x} ${-NECK.y})`
+	);
+</script>
+
+{#if !showPhoto}
+	<path class="vit-figure-head" d={HEADS[head]} transform={HEAD_AT} />
+{:else if photoShape === 'circle'}
+	<clipPath id={clipId}>
+		<circle cx={NECK.x} cy="48" r="34" />
+	</clipPath>
+	<image
+		class="vit-figure-head__photo"
+		href={photo}
+		x={NECK.x - 34}
+		y="14"
+		width="68"
+		height="68"
+		preserveAspectRatio="xMidYMid slice"
+		clip-path="url(#{clipId})"
+		{transform}
+		onerror={() => (failedSrc = photo ?? null)}
+	/>
+{:else}
+	<!-- Bottom-anchored (`xMidYMax`): whatever the cut-out's proportions, its
+	     chin lands on the neck, 8 over the shoulder line. The box is the
+	     shoulders' width — a head that wide is the mockup's proportion. -->
+	<image
+		class="vit-figure-head__photo"
+		href={photo}
+		x={NECK.x - 38}
+		y="0"
+		width="76"
+		height="84"
+		preserveAspectRatio="xMidYMax meet"
+		{transform}
+		onerror={() => (failedSrc = photo ?? null)}
+	/>
+{/if}
+
+<style>
+	.vit-figure-head {
+		fill: var(--color-surface);
+		stroke: var(--vit-figure-ink, var(--color-ink));
+		stroke-width: var(--vit-figure-stroke, 4);
+		stroke-linejoin: round;
+	}
+</style>

package/dist/components/ui/figure/FigureHead.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HeadShape } from './paths.js';
+interface Props {
+    photo?: string | null;
+    photoShape?: 'cutout' | 'circle';
+    head?: HeadShape;
+    headScale?: number;
+}
+/**
+ * FigureHead
+ *
+ * The head, three ways: a cut-out photo with a transparent background sat on
+ * the neck, a portrait masked into a circle, or — with no photo, or one that
+ * fails to load — the survey's drawn outline. An svg FRAGMENT: it renders
+ * inside a `FigureBody` (or any svg in the figure box) and places itself on
+ * `NECK`.
+ *
+ * The photo carries no alt and the outline no title: the head is part of a
+ * decorative drawing, and the name belongs to whatever composes it.
+ *
+ * @property photo - The photo; absent or failing to load, the head is drawn
+ * @property photoShape - `cutout` sits a transparent cut-out on the neck; `circle` masks a portrait
+ * @property head - The drawn outline, used when there is no photo
+ * @property headScale - Scales the photo about the neck point, so the chin stays put
+ */
+declare const FigureHead: import("svelte").Component<Props, {}, "">;
+type FigureHead = ReturnType<typeof FigureHead>;
+export default FigureHead;

package/dist/components/ui/figure/PersonFigure.svelte

@@ -0,0 +1,253 @@
+<!--
+  @component PersonFigure
+
+  A person: a `FigureBody` in a pose, a `FigureHead` on its neck, and beside
+  them the name and role over a short rule, joined to the shoulder by a
+  diagonal callout line. A bio, when there is one, reveals under the rule on
+  hover, keyboard focus or tap.
+
+  This is the composition; the parts stand alone. `./paths` holds the drawing
+  and the callout arithmetic, `FigureBody` the strokes, `FigureHead` the head's
+  three modes. What is here is what only the whole needs: the grid that pins
+  the caption's baseline to the rule, and the reveal.
+
+  ## Accessibility
+  The drawing is decorative — the svg is `aria-hidden`, the photo has no alt —
+  and the name in the caption is the only text: the `Logo` rule, a mark never
+  names itself. The bio is hidden by opacity, not removed, so a screen reader
+  reads it without hovering; the figure takes `tabindex="0"` only when there
+  is a bio to reveal.
+
+  ## Sizing
+  Set `--vit-figure-width` on the figure or an ancestor. The art, the callout
+  run and the height of the rule above the baseline all derive from it; the
+  text is in rem. Below about 8rem the two label lines outgrow the room above
+  a top-aligned rule — lower `--vit-figure-name-size`/`--vit-figure-role-size`
+  or align the label `bottom`. The callout leaves the art's box on purpose
+  (`overflow: visible`), so an ancestor clipping its overflow hides it.
+
+  | property                    | default             |
+  |-----------------------------|---------------------|
+  | `--vit-figure-width`        | `10rem`             |
+  | `--vit-figure-ink`          | `var(--color-ink)`  |
+  | `--vit-figure-stroke`       | `4` (viewBox units) |
+  | `--vit-figure-callout-ink`  | `var(--color-ink)`  |
+  | `--vit-figure-name-size`    | `var(--text-base)`  |
+  | `--vit-figure-role-size`    | `var(--text-sm)`    |
+  | `--vit-figure-bio-width`    | `14rem`             |
+
+  @property name - The person's name; the figure's accessible text
+  @property role - The line under the name
+  @property bio - Revealed under the rule on hover, focus or tap
+  @property photo - The head photo; absent or failing to load, the head is drawn
+  @property photoShape - `cutout` sits a transparent cut-out on the neck; `circle` masks a portrait
+  @property head - Drawn head outline used when there is no photo
+  @property arms - Arm pose
+  @property legs - Leg pose
+  @property headScale - Scales the photo head about the neck point
+  @property labelSide - Which side of the figure the label sits on
+  @property labelAlign - `top` puts the rule beside the head, `bottom` beside the legs
+  @property class - Extra classes on the figure
+  @property children - An extra marker laid over the body (position it absolutely)
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FigureBody from './FigureBody.svelte';
+	import FigureHead from './FigureHead.svelte';
+	import { calloutPath } from './paths.js';
+	import type { ArmsPose, HeadShape, LabelAlign, LabelSide, LegsPose } from './paths.js';
+
+	interface Props {
+		/** The figure's only accessible text — the drawing never names itself. */
+		name: string;
+		role?: string;
+		/** Revealed under the rule on hover, focus or tap. Absent: nothing to reveal, no tabindex. */
+		bio?: string | null;
+		/** Absent, or failing to load, the head is drawn instead. */
+		photo?: string | null;
+		/** `cutout` = a transparent-background cut-out sat on the neck; `circle` = a portrait masked into a circle. */
+		photoShape?: 'cutout' | 'circle';
+		/** The drawn head, used when there is no photo. */
+		head?: HeadShape;
+		arms?: ArmsPose;
+		legs?: LegsPose;
+		/** Scales the photo head about the neck point, so the chin stays put. */
+		headScale?: number;
+		labelSide?: LabelSide;
+		/** `top` puts the rule beside the head, `bottom` beside the legs. */
+		labelAlign?: LabelAlign;
+		class?: string;
+		/** An extra marker over the body; position it absolutely inside the art's box. */
+		children?: Snippet;
+	}
+
+	let {
+		name,
+		role,
+		bio,
+		photo,
+		photoShape = 'cutout',
+		head = 'round',
+		arms = 'down',
+		legs = 'standing',
+		headScale = 1,
+		labelSide = 'right',
+		labelAlign = 'top',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const callout = $derived(calloutPath(labelSide, labelAlign));
+</script>
+
+<!-- Focusable only when there is a bio to reveal; `figure` is not interactive
+     otherwise, and a focus stop with nothing behind it is noise. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<figure
+	class="vit-figure {className}"
+	data-side={labelSide}
+	data-align={labelAlign}
+	tabindex={bio ? 0 : undefined}
+>
+	<FigureBody {arms} {legs} class="vit-figure__art">
+		<!-- After the body, so the head covers the middle of the shoulder line. -->
+		<FigureHead {photo} {photoShape} {head} {headScale} />
+		<path class="vit-figure__callout" d={callout} vector-effect="non-scaling-stroke" />
+	</FigureBody>
+	{#if children}
+		<div class="vit-figure__extra">{@render children()}</div>
+	{/if}
+	<figcaption class="vit-figure__label">
+		<strong class="vit-figure__name">{name}</strong>
+		{#if role}<span class="vit-figure__role">{role}</span>{/if}
+		{#if bio}<p class="vit-figure__bio">{bio}</p>{/if}
+	</figcaption>
+</figure>
+
+<style>
+	.vit-figure {
+		/* One viewBox unit, so the run and the rule's row follow the width.
+		   The 24 and 90 are `CALLOUT_RUN` and `CALLOUT_RULE` in paths.ts. */
+		--_w: var(--vit-figure-width, 10rem);
+		--_u: calc(var(--_w) / 153);
+		--_run: calc(var(--_u) * 24);
+		--_rule-y: 50;
+		position: relative;
+		display: inline-grid;
+		align-items: start;
+		/* The first row ends exactly where the callout's rule is drawn, and the
+		   caption sits on that edge — so the rule underlines the role whatever
+		   the font size, and the text grows upward from it. */
+		grid-template-rows: calc(var(--_u) * var(--_rule-y)) auto;
+		margin: 0;
+		color: var(--color-ink);
+	}
+
+	.vit-figure[data-align='bottom'] {
+		--_rule-y: 200;
+	}
+
+	.vit-figure[data-side='right'] {
+		grid-template-columns: var(--_w) var(--_run) auto;
+		grid-template-areas:
+			'art run label'
+			'art run .';
+	}
+
+	.vit-figure[data-side='left'] {
+		grid-template-columns: auto var(--_run) var(--_w);
+		grid-template-areas:
+			'label run art'
+			'. run art';
+	}
+
+	/* The body's svg is another component's element, hence the :global. */
+	.vit-figure > :global(.vit-figure__art) {
+		grid-area: art;
+	}
+
+	.vit-figure__callout {
+		fill: none;
+		stroke: var(--vit-figure-callout-ink, var(--color-ink));
+		stroke-width: 1;
+	}
+
+	.vit-figure__label {
+		grid-area: label;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-self: end;
+		min-width: calc(var(--_u) * 90);
+		padding-bottom: var(--space-1);
+		line-height: var(--leading-tight);
+	}
+
+	.vit-figure[data-side='left'] .vit-figure__label {
+		align-items: flex-end;
+		text-align: right;
+	}
+
+	.vit-figure__name {
+		font-size: var(--vit-figure-name-size, var(--text-base));
+		font-weight: 700;
+	}
+
+	.vit-figure__role {
+		font-size: var(--vit-figure-role-size, var(--text-sm));
+		color: var(--color-ink-secondary);
+	}
+
+	.vit-figure__bio {
+		position: absolute;
+		top: 100%;
+		inset-inline-start: 0;
+		width: var(--vit-figure-bio-width, 14rem);
+		margin: var(--space-1) 0 0;
+		font-size: var(--text-sm);
+		line-height: var(--leading-body);
+		color: var(--color-ink-secondary);
+		opacity: 0;
+		transform: translateY(-0.25rem);
+		pointer-events: none;
+		transition:
+			opacity var(--transition-fast),
+			transform var(--transition-fast);
+	}
+
+	.vit-figure[data-side='left'] .vit-figure__bio {
+		inset-inline-start: auto;
+		inset-inline-end: 0;
+	}
+
+	.vit-figure:hover .vit-figure__bio,
+	.vit-figure:focus-within .vit-figure__bio {
+		opacity: 1;
+		transform: none;
+		pointer-events: auto;
+	}
+
+	.vit-figure:focus-visible {
+		outline: 2px solid var(--color-brand);
+		outline-offset: 4px;
+	}
+
+	.vit-figure__extra {
+		grid-area: art;
+		position: relative;
+		width: var(--_w);
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.vit-figure__extra > :global(*) {
+		pointer-events: auto;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.vit-figure__bio {
+			transition: none;
+			transform: none;
+		}
+	}
+</style>

package/dist/components/ui/figure/PersonFigure.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { ArmsPose, HeadShape, LabelAlign, LabelSide, LegsPose } from './paths.js';
+interface Props {
+    /** The figure's only accessible text — the drawing never names itself. */
+    name: string;
+    role?: string;
+    /** Revealed under the rule on hover, focus or tap. Absent: nothing to reveal, no tabindex. */
+    bio?: string | null;
+    /** Absent, or failing to load, the head is drawn instead. */
+    photo?: string | null;
+    /** `cutout` = a transparent-background cut-out sat on the neck; `circle` = a portrait masked into a circle. */
+    photoShape?: 'cutout' | 'circle';
+    /** The drawn head, used when there is no photo. */
+    head?: HeadShape;
+    arms?: ArmsPose;
+    legs?: LegsPose;
+    /** Scales the photo head about the neck point, so the chin stays put. */
+    headScale?: number;
+    labelSide?: LabelSide;
+    /** `top` puts the rule beside the head, `bottom` beside the legs. */
+    labelAlign?: LabelAlign;
+    class?: string;
+    /** An extra marker over the body; position it absolutely inside the art's box. */
+    children?: Snippet;
+}
+/**
+ * PersonFigure
+ *
+ * A person: a `FigureBody` in a pose, a `FigureHead` on its neck, and beside
+ * them the name and role over a short rule, joined to the shoulder by a
+ * diagonal callout line. A bio, when there is one, reveals under the rule on
+ * hover, keyboard focus or tap.
+ *
+ * This is the composition; the parts stand alone. `./paths` holds the drawing
+ * and the callout arithmetic, `FigureBody` the strokes, `FigureHead` the head's
+ * three modes. What is here is what only the whole needs: the grid that pins
+ * the caption's baseline to the rule, and the reveal.
+ *
+ * ## Accessibility
+ * The drawing is decorative — the svg is `aria-hidden`, the photo has no alt —
+ * and the name in the caption is the only text: the `Logo` rule, a mark never
+ * names itself. The bio is hidden by opacity, not removed, so a screen reader
+ * reads it without hovering; the figure takes `tabindex="0"` only when there
+ * is a bio to reveal.
+ *
+ * ## Sizing
+ * Set `--vit-figure-width` on the figure or an ancestor. The art, the callout
+ * run and the height of the rule above the baseline all derive from it; the
+ * text is in rem. Below about 8rem the two label lines outgrow the room above
+ * a top-aligned rule — lower `--vit-figure-name-size`/`--vit-figure-role-size`
+ * or align the label `bottom`. The callout leaves the art's box on purpose
+ * (`overflow: visible`), so an ancestor clipping its overflow hides it.
+ *
+ * | property                    | default             |
+ * |-----------------------------|---------------------|
+ * | `--vit-figure-width`        | `10rem`             |
+ * | `--vit-figure-ink`          | `var(--color-ink)`  |
+ * | `--vit-figure-stroke`       | `4` (viewBox units) |
+ * | `--vit-figure-callout-ink`  | `var(--color-ink)`  |
+ * | `--vit-figure-name-size`    | `var(--text-base)`  |
+ * | `--vit-figure-role-size`    | `var(--text-sm)`    |
+ * | `--vit-figure-bio-width`    | `14rem`             |
+ *
+ * @property name - The person's name; the figure's accessible text
+ * @property role - The line under the name
+ * @property bio - Revealed under the rule on hover, focus or tap
+ * @property photo - The head photo; absent or failing to load, the head is drawn
+ * @property photoShape - `cutout` sits a transparent cut-out on the neck; `circle` masks a portrait
+ * @property head - Drawn head outline used when there is no photo
+ * @property arms - Arm pose
+ * @property legs - Leg pose
+ * @property headScale - Scales the photo head about the neck point
+ * @property labelSide - Which side of the figure the label sits on
+ * @property labelAlign - `top` puts the rule beside the head, `bottom` beside the legs
+ * @property class - Extra classes on the figure
+ * @property children - An extra marker laid over the body (position it absolutely)
+ */
+declare const PersonFigure: import("svelte").Component<Props, {}, "">;
+type PersonFigure = ReturnType<typeof PersonFigure>;
+export default PersonFigure;

package/dist/components/ui/figure/paths.d.ts

@@ -0,0 +1,80 @@
+/**
+ * The drawing behind `FigureBody`, `FigureHead` and `PersonFigure`: the
+ * survey's stroke paths, where each part sits in the composed box, and the
+ * arithmetic of the label's callout. Data and arithmetic only, so it tests in
+ * node and a host that wants line people without heads or labels — a chart, a
+ * decorative band — can draw from the same set.
+ *
+ * The paths are the ones `mwc-enquesta-bretxa-digital` built its survey
+ * avatars from (`paths.json`). They are closed sets: extending one is a
+ * package change, so every consumer's `ArmsPose` stays honest (the `Icon`
+ * rule).
+ */
+/** Shoulder line and two hanging arms, in the survey's 153×111 torso box. */
+export declare const ARMS: {
+    readonly down: "M27 107L39.375 8H113.625L126 107";
+    readonly raised: "M7 25L32.9376 57.5L39.125 8H113.375L119.563 57.5L145.5 25";
+    readonly 'one-bent': "M51.899 91.3976L19 53.7671L38.9562 8H113.565L126 107";
+};
+/** Two legs in the survey's 91×187 box (its adult set). */
+export declare const LEGS: {
+    readonly standing: "M21 7V179H8M70 7V179H82";
+    readonly walking: "M69 7L85 129.857L69 179H81.4218M21 7L36 129.857L21 179H32.6453";
+    readonly stride: "M21 7V80.7143L38 179H25.0024M71 7V80.7143L54 179H65.3333";
+    readonly step: "M21 7V179H8M70 7L85 129.857L70 179H81.6545";
+    readonly kneel: "M21 7V179H9M71 7V130.087L46 168.589V182";
+    readonly sit: "M21 7V130.087L45 168.589V182M69 7L54 129.857L69 179H57.3546";
+};
+/** Drawn head outlines in the survey's 49×48 box, for a figure with no photo. */
+export declare const HEADS: {
+    readonly round: "M25 41C33.8366 41 41 33.6127 41 24.5C41 15.3873 33.8366 8 25 8C16.1634 8 9 15.3873 9 24.5C9 33.6127 16.1634 41 25 41Z";
+    readonly cup: "M8 8V24.4952C7.99874 26.6662 8.4255 28.8161 9.25592 30.8216C10.0863 32.8271 11.3042 34.6488 12.8393 36.1822C14.3745 37.7155 16.1968 38.9304 18.2019 39.7571C20.207 40.5839 22.3554 41.0062 24.5239 40.9999C28.8936 40.9999 33.0843 39.262 36.1742 36.1686C39.2641 33.0751 41 28.8795 41 24.5047V8.00955L8 8Z";
+    readonly d: "M27.571 8H38V41H27.571C23.1726 40.9949 18.9563 39.2535 15.8489 36.1585C12.7415 33.0636 10.9975 28.8684 11 24.4952C11 20.1237 12.7453 15.931 15.8524 12.8381C18.9595 9.74519 23.1743 8.00507 27.571 8V8Z";
+};
+export type ArmsPose = keyof typeof ARMS;
+export type LegsPose = keyof typeof LEGS;
+export type HeadShape = keyof typeof HEADS;
+/**
+ * The composed box. The survey stacked three svgs on a grid (rows 48 / 111 /
+ * 100, the legs' 187 hanging out of the last row); this is that stack
+ * flattened into one viewBox, plus 20 of headroom so a photo can rise above
+ * where the drawn head would be. Landmarks: shoulder line y 76 from x 39 to
+ * 114, legs from y 99, feet at y 271.
+ */
+export declare const FIGURE_WIDTH = 153;
+export declare const FIGURE_HEIGHT = 280;
+export declare const FIGURE_VIEWBOX = "0 0 153 280";
+export declare const HEAD_AT = "translate(52 20)";
+export declare const ARMS_AT = "translate(0 68)";
+export declare const LEGS_AT = "translate(31 92)";
+/** The neck: a photo's chin lands here, and `headScale` scales about it. */
+export declare const NECK: {
+    readonly x: 76.5;
+    readonly y: 84;
+};
+/** Where the callout leaves the body — the ends of the shoulder line. */
+export declare const SHOULDER: {
+    readonly y: 76;
+    readonly left: 39.5;
+    readonly right: 113.5;
+};
+export type LabelSide = 'left' | 'right';
+export type LabelAlign = 'top' | 'bottom';
+/**
+ * The height of the label's rule: beside the head, or beside the legs.
+ * `PersonFigure` sizes the caption's grid row to it, so the caption's
+ * baseline meets the rule whatever the font size.
+ */
+export declare const RULE_Y: {
+    readonly top: 50;
+    readonly bottom: 200;
+};
+/** How far the callout runs out of the art before the rule, and the rule's length. */
+export declare const CALLOUT_RUN = 24;
+export declare const CALLOUT_RULE = 90;
+/**
+ * Shoulder → the rule's inner end → along the rule. Mirrored for a label on
+ * the left, where it runs into negative x — the art's svg draws with
+ * `overflow: visible` for exactly this.
+ */
+export declare function calloutPath(side: LabelSide, align: LabelAlign): string;

package/dist/components/ui/figure/paths.js

@@ -0,0 +1,73 @@
+/**
+ * The drawing behind `FigureBody`, `FigureHead` and `PersonFigure`: the
+ * survey's stroke paths, where each part sits in the composed box, and the
+ * arithmetic of the label's callout. Data and arithmetic only, so it tests in
+ * node and a host that wants line people without heads or labels — a chart, a
+ * decorative band — can draw from the same set.
+ *
+ * The paths are the ones `mwc-enquesta-bretxa-digital` built its survey
+ * avatars from (`paths.json`). They are closed sets: extending one is a
+ * package change, so every consumer's `ArmsPose` stays honest (the `Icon`
+ * rule).
+ */
+/** Shoulder line and two hanging arms, in the survey's 153×111 torso box. */
+export const ARMS = {
+    down: 'M27 107L39.375 8H113.625L126 107',
+    raised: 'M7 25L32.9376 57.5L39.125 8H113.375L119.563 57.5L145.5 25',
+    'one-bent': 'M51.899 91.3976L19 53.7671L38.9562 8H113.565L126 107'
+};
+/** Two legs in the survey's 91×187 box (its adult set). */
+export const LEGS = {
+    standing: 'M21 7V179H8M70 7V179H82',
+    walking: 'M69 7L85 129.857L69 179H81.4218M21 7L36 129.857L21 179H32.6453',
+    stride: 'M21 7V80.7143L38 179H25.0024M71 7V80.7143L54 179H65.3333',
+    step: 'M21 7V179H8M70 7L85 129.857L70 179H81.6545',
+    kneel: 'M21 7V179H9M71 7V130.087L46 168.589V182',
+    sit: 'M21 7V130.087L45 168.589V182M69 7L54 129.857L69 179H57.3546'
+};
+/** Drawn head outlines in the survey's 49×48 box, for a figure with no photo. */
+export const HEADS = {
+    round: 'M25 41C33.8366 41 41 33.6127 41 24.5C41 15.3873 33.8366 8 25 8C16.1634 8 9 15.3873 9 24.5C9 33.6127 16.1634 41 25 41Z',
+    cup: 'M8 8V24.4952C7.99874 26.6662 8.4255 28.8161 9.25592 30.8216C10.0863 32.8271 11.3042 34.6488 12.8393 36.1822C14.3745 37.7155 16.1968 38.9304 18.2019 39.7571C20.207 40.5839 22.3554 41.0062 24.5239 40.9999C28.8936 40.9999 33.0843 39.262 36.1742 36.1686C39.2641 33.0751 41 28.8795 41 24.5047V8.00955L8 8Z',
+    d: 'M27.571 8H38V41H27.571C23.1726 40.9949 18.9563 39.2535 15.8489 36.1585C12.7415 33.0636 10.9975 28.8684 11 24.4952C11 20.1237 12.7453 15.931 15.8524 12.8381C18.9595 9.74519 23.1743 8.00507 27.571 8V8Z'
+};
+/**
+ * The composed box. The survey stacked three svgs on a grid (rows 48 / 111 /
+ * 100, the legs' 187 hanging out of the last row); this is that stack
+ * flattened into one viewBox, plus 20 of headroom so a photo can rise above
+ * where the drawn head would be. Landmarks: shoulder line y 76 from x 39 to
+ * 114, legs from y 99, feet at y 271.
+ */
+export const FIGURE_WIDTH = 153;
+export const FIGURE_HEIGHT = 280;
+export const FIGURE_VIEWBOX = `0 0 ${FIGURE_WIDTH} ${FIGURE_HEIGHT}`;
+export const HEAD_AT = 'translate(52 20)';
+export const ARMS_AT = 'translate(0 68)';
+export const LEGS_AT = 'translate(31 92)';
+/** The neck: a photo's chin lands here, and `headScale` scales about it. */
+export const NECK = { x: 76.5, y: 84 };
+/** Where the callout leaves the body — the ends of the shoulder line. */
+export const SHOULDER = { y: 76, left: 39.5, right: 113.5 };
+/**
+ * The height of the label's rule: beside the head, or beside the legs.
+ * `PersonFigure` sizes the caption's grid row to it, so the caption's
+ * baseline meets the rule whatever the font size.
+ */
+export const RULE_Y = { top: 50, bottom: 200 };
+/** How far the callout runs out of the art before the rule, and the rule's length. */
+export const CALLOUT_RUN = 24;
+export const CALLOUT_RULE = 90;
+/**
+ * Shoulder → the rule's inner end → along the rule. Mirrored for a label on
+ * the left, where it runs into negative x — the art's svg draws with
+ * `overflow: visible` for exactly this.
+ */
+export function calloutPath(side, align) {
+    const y = RULE_Y[align];
+    if (side === 'right') {
+        const inner = FIGURE_WIDTH + CALLOUT_RUN;
+        return `M${SHOULDER.right} ${SHOULDER.y}L${inner} ${y}H${inner + CALLOUT_RULE}`;
+    }
+    const inner = -CALLOUT_RUN;
+    return `M${SHOULDER.left} ${SHOULDER.y}L${inner} ${y}H${inner - CALLOUT_RULE}`;
+}

package/dist/primitives.d.ts

@@ -15,6 +15,11 @@ export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
 export { default as Logo } from './components/ui/Logo.svelte';
 export { default as Modal } from './components/ui/Modal.svelte';
+export { default as FigureBody } from './components/ui/figure/FigureBody.svelte';
+export { default as FigureHead } from './components/ui/figure/FigureHead.svelte';
+export { default as PersonFigure } from './components/ui/figure/PersonFigure.svelte';
+export { ARMS, LEGS, HEADS, NECK, SHOULDER, FIGURE_VIEWBOX, calloutPath } from './components/ui/figure/paths.js';
+export type { ArmsPose, HeadShape, LabelAlign, LabelSide, LegsPose } from './components/ui/figure/paths.js';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/primitives.js

@@ -15,6 +15,12 @@ export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
 export { default as Logo } from './components/ui/Logo.svelte';
 export { default as Modal } from './components/ui/Modal.svelte';
+// The figure, in parts: the drawing and the callout arithmetic, the line
+// body, the head's three modes, and the person that composes them.
+export { default as FigureBody } from './components/ui/figure/FigureBody.svelte';
+export { default as FigureHead } from './components/ui/figure/FigureHead.svelte';
+export { default as PersonFigure } from './components/ui/figure/PersonFigure.svelte';
+export { ARMS, LEGS, HEADS, NECK, SHOULDER, FIGURE_VIEWBOX, calloutPath } from './components/ui/figure/paths.js';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/styles/tokens.css

@@ -115,4 +115,16 @@
 	--vit-madlib-menu-shadow: none;
 	--vit-madlib-menu-max-height: 15rem;
 	--vit-madlib-menu-z: 40;
+
+	/* Person figure (`PersonFigure`, on `./primitives`) */
+	/* The drawing's width; everything in the figure — body, callout run, the
+	   rule's height above the baseline — derives from it. Text stays in rem. */
+	--vit-figure-width: 10rem;
+	--vit-figure-ink: var(--color-ink);
+	/* Body stroke in viewBox units (153 across), so it scales with the width. */
+	--vit-figure-stroke: 4;
+	--vit-figure-callout-ink: var(--color-ink);
+	--vit-figure-name-size: var(--text-base);
+	--vit-figure-role-size: var(--text-sm);
+	--vit-figure-bio-width: 14rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.32.1",
+	"version": "0.33.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",