@xtyle/core 0.5.0

package/dist/manifest/pie.manifest.js

@@ -0,0 +1,284 @@
+import { SERIES_SCHEMES } from "../series.js";
+const htmlExample = `<xtyle-pie label="Traffic by source"></xtyle-pie>
+<script>
+	document.querySelector("xtyle-pie").data = [
+		{ label: "Direct", value: 42 },
+		{ label: "Search", value: 30 },
+		{ label: "Social", value: 18 },
+		{ label: "Referral", value: 10 },
+	];
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { Pie } from "@xtyle/svelte";
+
+	const data = [
+		{ label: "Direct", value: 42 },
+		{ label: "Search", value: 30 },
+		{ label: "Social", value: 18 },
+		{ label: "Referral", value: 10 },
+	];
+</script>
+
+<Pie {data} label="Traffic by source" />`;
+const astroExample = `---
+import { Pie } from "@xtyle/astro";
+const data = [
+	{ label: "Direct", value: 42 },
+	{ label: "Search", value: 30 },
+	{ label: "Social", value: 18 },
+	{ label: "Referral", value: 10 },
+];
+---
+
+<Pie data={data} label="Traffic by source" />`;
+const donutHtmlExample = `<xtyle-pie variant="donut" scheme="accents" label="Budget"></xtyle-pie>
+<script>
+	document.querySelector("xtyle-pie").data = [
+		{ label: "Rent", value: 1200 },
+		{ label: "Food", value: 600 },
+		{ label: "Transit", value: 300 },
+		{ label: "Fun", value: 400 },
+	];
+</script>`;
+const donutSvelteExample = `<script lang="ts">
+	import { Pie } from "@xtyle/svelte";
+
+	const data = [
+		{ label: "Rent", value: 1200 },
+		{ label: "Food", value: 600 },
+		{ label: "Transit", value: 300 },
+		{ label: "Fun", value: 400 },
+	];
+</script>
+
+<Pie {data} variant="donut" scheme="accents" label="Budget" />`;
+const donutAstroExample = `---
+import { Pie } from "@xtyle/astro";
+const data = [
+	{ label: "Rent", value: 1200 },
+	{ label: "Food", value: 600 },
+	{ label: "Transit", value: 300 },
+	{ label: "Fun", value: 400 },
+];
+---
+
+<Pie data={data} variant="donut" scheme="accents" label="Budget" />`;
+const outcomeHtmlExample = `<xtyle-pie variant="donut" scheme="statuses" label="Runs"></xtyle-pie>
+<script>
+	// Give each slice a semantic \`tone\` so it colors by meaning: a run where nothing
+	// failed drops the failed slice without shifting the others' colors.
+	document.querySelector("xtyle-pie").data = [
+		{ label: "Passed", value: 128, tone: "success" },
+		{ label: "Failed", value: 14, tone: "failed" },
+		{ label: "Flaky", value: 9, tone: "warn" },
+		{ label: "Skipped", value: 21, tone: "skipped" },
+		{ label: "Running", value: 6, tone: "live" },
+		{ label: "Queued", value: 11, tone: "info" },
+	];
+</script>`;
+const outcomeSvelteExample = `<script lang="ts">
+	import { Pie } from "@xtyle/svelte";
+
+	// A semantic \`tone\` per slice colors by meaning, stable even if a category is absent.
+	const data = [
+		{ label: "Passed", value: 128, tone: "success" },
+		{ label: "Failed", value: 14, tone: "failed" },
+		{ label: "Flaky", value: 9, tone: "warn" },
+		{ label: "Skipped", value: 21, tone: "skipped" },
+		{ label: "Running", value: 6, tone: "live" },
+		{ label: "Queued", value: 11, tone: "info" },
+	];
+</script>
+
+<Pie {data} variant="donut" scheme="statuses" label="Runs" />`;
+const outcomeAstroExample = `---
+import { Pie } from "@xtyle/astro";
+// A semantic \`tone\` per slice colors by meaning, stable even if a category is absent.
+const data = [
+	{ label: "Passed", value: 128, tone: "success" },
+	{ label: "Failed", value: 14, tone: "failed" },
+	{ label: "Flaky", value: 9, tone: "warn" },
+	{ label: "Skipped", value: 21, tone: "skipped" },
+	{ label: "Running", value: 6, tone: "live" },
+	{ label: "Queued", value: 11, tone: "info" },
+];
+---
+
+<Pie data={data} variant="donut" scheme="statuses" label="Runs" />`;
+export const pieManifest = {
+    id: "pie",
+    name: "Pie",
+    since: "0.3.0",
+    category: "metrics",
+    summary: "A pie or donut chart of parts against a whole, colored from a theme-derived palette, with an interactive readout.",
+    description: "Pie plots a set of labelled values as wedges of a circle, each a share of the whole. Each slice takes its color from a `scheme` resolved off the live theme (`skittles` by default, so the parts read as distinct), or pass explicit colors and `reverse`. Set `variant=\"donut\"` for a ring with the total in its center. It's interactive: hovering or focusing a slice dims the rest and floats its value and share, and the chart is mirrored into a visually-hidden table so assistive tech reads the numbers. A legend names each slice; optional `showValues` prints the percentage on each wedge. Size it with `size`; zero and negative values drop out, and a chart with nothing left to plot shows a muted `No data` message in place of the wedges.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "chart",
+            description: "The `<figure>` root holding the SVG, legend, tooltip, and the accessible data table.",
+            selector: ".xtyle-pie",
+            tokens: ["--font-sans"],
+        },
+        {
+            name: "slice",
+            description: "One wedge, filled with its palette color and separated by a hairline; the focus/hover target.",
+            selector: ".xtyle-pie__slice",
+            tokens: ["--bg-1", "--ring", "--border-thick", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "center",
+            description: "The donut's center total.",
+            selector: ".xtyle-pie__center",
+            tokens: ["--fg-0", "--text-lg", "--weight-bold"],
+        },
+        {
+            name: "legend",
+            description: "The slice key; each item pairs a color dot with the slice label.",
+            selector: ".xtyle-pie__legend",
+            tokens: ["--fg-1", "--text-sm", "--space-1", "--space-3", "--radius-sm"],
+        },
+        {
+            name: "tooltip",
+            description: "The floating value/share readout shown on hover or focus of a slice.",
+            selector: ".xtyle-pie__tooltip",
+            tokens: ["--surface-overlay", "--surface-overlay-border", "--elevation-3", "--radius-md", "--fg-0"],
+        },
+    ],
+    props: [
+        {
+            name: "data",
+            type: "{ label: string; value: number; tone?: StatusTone }[]",
+            description: "The slices: a label and a value each. JS property in html/svelte, JSON attribute or prop in astro. Zero and negative values drop out. Under `scheme=\"statuses\"`, an optional `tone` (`success` / `failed` / `warn` / `info` / `skipped` / `live`) colors a slice by meaning, so a dropped zero-value category never shifts the rest.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "variant",
+            type: "\"pie\" | \"donut\"",
+            default: "pie",
+            description: "A full pie, or a `donut` ring with the total in its center.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["pie", "donut"],
+        },
+        {
+            name: "scheme",
+            type: "SeriesScheme | string[]",
+            default: "skittles",
+            description: "How slices are colored: a built-in scheme resolved off the theme, or an explicit color array.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...SERIES_SCHEMES],
+        },
+        {
+            name: "reverse",
+            type: "boolean",
+            default: "false",
+            description: "Flips the scheme end for end.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "showValues",
+            type: "boolean",
+            default: "false",
+            description: "Prints each slice's percentage on the wedge (slices under 5% are skipped for legibility). Kebab `show-values`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "legend",
+            type: "boolean",
+            default: "true",
+            description: "Shows the slice legend; set false to hide it.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "number",
+            default: "200",
+            description: "The chart diameter in pixels.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An accessible name for the chart, used as the data table's caption.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        { name: "pie", description: "A full pie of solid wedges.", className: "xtyle-pie" },
+        { name: "donut", description: "A ring with the total in its center.", className: "xtyle-pie--donut" },
+    ],
+    sizes: [],
+    states: [
+        {
+            name: "slice-hover",
+            description: "Pointer over or keyboard focus on a slice: the rest dim and a value/share readout floats above it.",
+            selector: ".xtyle-pie--hovering .xtyle-pie__slice:not(.is-active)",
+            tokens: ["--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "slice-focus",
+            description: "Keyboard focus on a slice draws a token ring; each slice is a tab stop announcing its label, value, and share.",
+            selector: ".xtyle-pie__slice:focus-visible",
+            tokens: ["--ring", "--border-thick"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--font-sans",
+        "--bg-0",
+        "--bg-1",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--text-xs",
+        "--text-sm",
+        "--text-lg",
+        "--weight-semibold",
+        "--weight-bold",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--border-thick",
+        "--border-thin",
+        "--leading-normal",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--radius-sm",
+        "--radius-md",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--elevation-3",
+    ],
+    composition: [
+        "Colors come from the theme register, so the slices match the surrounding UI. `skittles` (the default) keeps the parts distinct; `statuses` pins each slice to a semantic tone (success, failed, warn, info, skipped, live) for discrete-outcome charts, distinct from the sequential `status` severity ramp; pass an explicit array to pin brand colors, and a `var(--token)` string in that array lands straight in the fill and resolves against the theme.",
+        "Under `statuses`, give each slice an explicit `tone` when a category can be absent: without one, colors are assigned by position, so a run where nothing failed drops the failed slice and shifts every survivor to the wrong tone. A `tone` pins each slice to its meaning regardless of which categories are present.",
+        "Reach for a `donut` when you want a headline total in the middle; a full `pie` when the parts are the whole story.",
+        "Pair with a `Stat` or a `Bar` in the Metrics family for a composition-plus-trend view.",
+    ],
+    a11y: [
+        "Each slice carries `role=\"img\"` and an `aria-label` naming its label, value, and share, and is a focusable tab stop, so the chart is navigable by keyboard.",
+        "The full breakdown is mirrored into a visually-hidden `<table>` (label, value, share), and the legend names every slice in text, so meaning never rides on color alone.",
+    ],
+    examples: [
+        {
+            id: "pie",
+            title: "Pie",
+            description: "Four sources as shares of the whole, colored from the `skittles` scheme.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "donut",
+            title: "Donut",
+            description: "`variant=\"donut\"` opens the center for the total; here on the `accents` scheme.",
+            source: { html: donutHtmlExample, svelte: donutSvelteExample, astro: donutAstroExample },
+        },
+        {
+            id: "statuses",
+            title: "Discrete outcomes",
+            description: "`scheme=\"statuses\"` colors each slice by a semantic `tone` (success, failed, warn, info, skipped, live) so a run-outcome chart reads by meaning, and stays right even when a category is absent.",
+            source: { html: outcomeHtmlExample, svelte: outcomeSvelteExample, astro: outcomeAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=pie.manifest.js.map

package/dist/manifest/pie.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie.manifest.js","sourceRoot":"","sources":["../../src/manifest/pie.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/progress.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const progressManifest: ComponentManifest;
+//# sourceMappingURL=progress.manifest.d.ts.map

package/dist/manifest/progress.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/progress.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAuDpD,eAAO,MAAM,gBAAgB,EAAE,iBAgP9B,CAAC"}

package/dist/manifest/progress.manifest.js

@@ -0,0 +1,288 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-progress value="42" aria-label="Upload progress"></xtyle-progress>
+
+<xtyle-progress value="80" tone="success" show-value aria-label="Storage used"></xtyle-progress>
+
+<xtyle-progress variant="circular" value="65" tone="info" show-value aria-label="Sync"></xtyle-progress>
+
+<xtyle-progress variant="circular" indeterminate aria-label="Loading"></xtyle-progress>`;
+const svelteExample = `<script lang="ts">
+	import { Progress } from "@xtyle/svelte";
+
+	let value = $state(42);
+</script>
+
+<Progress {value} ariaLabel="Upload progress" />
+
+<Progress value={80} tone="success" showValue ariaLabel="Storage used" />
+
+<Progress variant="circular" value={65} tone="info" showValue ariaLabel="Sync" />
+
+<Progress variant="circular" indeterminate ariaLabel="Loading" />`;
+const astroExample = `---
+import { Progress } from "@xtyle/astro";
+---
+
+<Progress value={42} aria-label="Upload progress" />
+
+<Progress value={80} tone="success" showValue aria-label="Storage used" />
+
+<Progress variant="circular" value={65} tone="info" showValue aria-label="Sync" />
+
+<Progress variant="circular" indeterminate aria-label="Loading" />`;
+const meterHtmlExample = `<xtyle-progress meter value="910" max="1000" show-value colorize-value aria-label="System capacity">
+	<threshold below="75" tone="success"></threshold>
+	<threshold below="90" tone="warn"></threshold>
+	<threshold below="101" tone="danger" pulse="fast"></threshold>
+</xtyle-progress>`;
+const meterSvelteExample = `<Progress meter value={910} max={1000} showValue colorizeValue ariaLabel="System capacity">
+	<threshold below="75" tone="success" />
+	<threshold below="90" tone="warn" />
+	<threshold below="101" tone="danger" pulse="fast" />
+</Progress>`;
+const meterAstroExample = `<Progress meter value={910} max={1000} showValue colorizeValue aria-label="System capacity">
+	<threshold below="75" tone="success" />
+	<threshold below="90" tone="warn" />
+	<threshold below="101" tone="danger" pulse="fast" />
+</Progress>`;
+export const progressManifest = {
+    id: "progress",
+    name: "Progress",
+    category: "feedback",
+    summary: "A progress bar or capacity meter: a linear bar or circular ring with value thresholds that recolor and pulse.",
+    description: "Progress shows how far along a task is, or how full a capacity is. The `variant` axis picks the shape (a horizontal `linear` bar or a circular `svg` ring) and the `tone` axis picks the color from the full roster (the six semantic roles, the accent variants, the twelve named hues). A determinate bar fills to `value` between `min` and `max`; an `indeterminate` mode animates a moving sweep when the amount of work is unknown. Declarative `<threshold below tone pulse>` children turn it into a self-coloring meter: each band names a percentage ceiling, and the active band (the first the current value falls under) overrides the tone and can `pulse` the fill (`slow` or `fast`) to flag a critical level, the pulse routed through motion tokens so the reduced-motion base rule stills it. Set `meter` to report `role=\"meter\"` (a measurement against a capacity, like disk used) instead of the default `role=\"progressbar\"` (a task advancing); either way it carries `aria-valuenow`/`aria-valuemin`/`aria-valuemax`. An optional inline readout (`show-value`) shows the percentage, the raw value, or `value/max` (`value-format`), sits at the end or inset over the bar (`value-position`), and can take the active tone (`colorize-value`).",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "progress",
+            description: "The root element carrying the variant, tone, and size classes and the progressbar (or meter) role.",
+            selector: ".xtyle-progress",
+            tokens: ["--font-sans", "--fg-1", "--space-2"],
+        },
+        {
+            name: "track",
+            description: "The unfilled groove (a bar rail or an SVG ring) the indicator runs along.",
+            selector: ".xtyle-progress__track",
+            tokens: ["--neutral-bg", "--radius-full", "--space-1", "--space-2"],
+        },
+        {
+            name: "indicator",
+            description: "The filled portion, colored by tone: a bar segment or a stroked arc.",
+            selector: ".xtyle-progress__indicator",
+            tokens: ["--accent", "--duration-base", "--ease-emphasized"],
+        },
+        {
+            name: "value",
+            description: "The optional inline readout shown when `show-value` is set.",
+            selector: ".xtyle-progress__value",
+            tokens: ["--text-sm", "--text-xs", "--fg-2", "--fg-1"],
+        },
+    ],
+    props: [
+        {
+            name: "variant",
+            type: "ProgressVariant",
+            default: "linear",
+            description: "Shape of the meter: a horizontal bar or a circular ring.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["linear", "circular"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Semantic color of the filled indicator.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "ProgressSize",
+            default: "md",
+            description: "Meter size; `sm` thins the bar or shrinks the ring.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md"],
+        },
+        {
+            name: "value",
+            type: "number",
+            default: "0",
+            description: "Current amount of work done, clamped between `min` and `max`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "min",
+            type: "number",
+            default: "0",
+            description: "Lower bound of the range.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "max",
+            type: "number",
+            default: "100",
+            description: "Upper bound of the range.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "indeterminate",
+            type: "boolean",
+            default: "false",
+            description: "Animates a moving sweep instead of a fixed fill when progress is unknown; drops `aria-valuenow`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "showValue",
+            type: "boolean",
+            default: "false",
+            description: "Renders an inline readout beside (or inside) the bar.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "valueFormat",
+            type: "ProgressValueFormat",
+            default: "percent",
+            description: "How `show-value` reads: `percent` (`80%`), `value` (the raw number), or `value-max` (`80/100`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["percent", "value", "value-max"],
+        },
+        {
+            name: "valuePosition",
+            type: "\"end\" | \"inset\"",
+            default: "end",
+            description: "Where the `show-value` readout sits: after the bar (`end`) or laid over the fill (`inset`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["end", "inset"],
+        },
+        {
+            name: "colorizeValue",
+            type: "boolean",
+            default: "false",
+            description: "Tints the `show-value` readout with the active tone (the threshold tone when a band is active).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "meter",
+            type: "boolean",
+            default: "false",
+            description: "Reports `role=\"meter\"` (a measurement against a capacity, e.g. disk used) instead of `role=\"progressbar\"` (a task advancing); the visual treatment is unchanged.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "threshold",
+            type: "<threshold below tone pulse>",
+            description: "Declarative config children, not a prop: each `<threshold below=\"<pct>\" tone=\"<tone>\" pulse=\"slow|fast\">` names a percentage ceiling; the active band (the first the current value falls under, bands sorted ascending) overrides `tone` and may `pulse` the fill; place them as direct children of the element.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "ariaLabel",
+            type: "string",
+            description: "Accessible name for the meter. Required. A progressbar with no name is not announced.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "linear",
+            description: "A horizontal bar that fills left-to-right.",
+            className: "xtyle-progress--linear",
+            tokens: ["--neutral-bg", "--radius-full", "--accent"],
+        },
+        {
+            name: "circular",
+            description: "An SVG ring whose stroked arc sweeps clockwise from the top.",
+            className: "xtyle-progress--circular",
+            tokens: ["--space-8", "--space-6", "--neutral-bg", "--accent"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Thin bar / small ring.", className: "xtyle-progress--sm" },
+        { name: "md", description: "Default.", className: "xtyle-progress", isDefault: true },
+    ],
+    states: [
+        {
+            name: "indeterminate",
+            description: "Work of unknown duration; the indicator animates a continuous sweep.",
+            selector: ".xtyle-progress--indeterminate",
+            tokens: ["--ease-standard"],
+        },
+        {
+            name: "pulse",
+            description: "An active `<threshold pulse>` band; the fill breathes (`slow` or `fast`) to flag a critical level, stilled under reduced-motion.",
+            selector: ".xtyle-progress--pulse-slow, .xtyle-progress--pulse-fast",
+            tokens: ["--ease-standard"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-progress:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring", "--radius-sm"],
+        },
+    ],
+    slots: [
+        {
+            name: "value",
+            description: "Optional custom content for the readout, in place of the built-in `show-value` text (e.g. a formatted label).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "default",
+            description: "The `<threshold below tone pulse>` config children (hidden from view); the bar reads them to recolor and pulse by value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--bg-0",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--text-body",
+        "--text-sm",
+        "--text-xs",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-6",
+        "--space-8",
+        "--neutral-bg",
+        "--radius-full",
+        "--radius-sm",
+        "--duration-base",
+        "--ease-emphasized",
+        "--ease-standard",
+        "--border-normal",
+        "--border-thick",
+        "--ring",
+        ...FULL_TONES.map((t) => `--${t}`),
+    ],
+    composition: [
+        "Pair with a status Badge or text label to spell out the percentage in words when `show-value` alone is not enough.",
+        "Drive `value` from an upload/download stream; flip to `indeterminate` for the indefinite handshake phase.",
+        "Use the `success` tone on completion and `danger` on a stalled or failed transfer to reinforce state with color.",
+    ],
+    a11y: [
+        "Exposes `role=\"progressbar\"` (or `role=\"meter\"` with the `meter` attribute) carrying `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` so assistive tech announces the current amount; pick `meter` for a capacity reading and `progressbar` for a task in motion.",
+        "Threshold recoloring and the `pulse` animation are presentational; the value the screen reader announces is the same `aria-valuenow` either way, so a critical level never rides on color or motion alone (pair it with a `danger` tone word or a label if the level itself must be announced).",
+        "`indeterminate` drops `aria-valuenow` (the value is unknown) while keeping the min/max bounds.",
+        "Requires an accessible name via `aria-label`; the binding warns at runtime when one is missing.",
+        "The visual fill is presentational; progress state lives in the ARIA value attributes, not the geometry.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "Motion (the indeterminate sweep) is routed through duration/easing tokens, so the reduced-motion base rule neutralizes it.",
+    ],
+    examples: [
+        {
+            id: "linear-and-circular",
+            title: "Linear and circular",
+            description: "Both shapes carry any tone; add `show-value` for a readout or `indeterminate` for unknown work.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "capacity-meter",
+            title: "A capacity meter with thresholds",
+            description: "Set `meter` for the measurement role and add `<threshold below tone pulse>` children: the bar greens under 75%, ambers past it, and reds and pulses once it crosses 90% full.",
+            source: { html: meterHtmlExample, svelte: meterSvelteExample, astro: meterAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=progress.manifest.js.map

package/dist/manifest/progress.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.manifest.js","sourceRoot":"","sources":["../../src/manifest/progress.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/radio.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const radioManifest: ComponentManifest;
+//# sourceMappingURL=radio.manifest.d.ts.map

package/dist/manifest/radio.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/radio.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAsCpD,eAAO,MAAM,aAAa,EAAE,iBAsQ3B,CAAC"}