@xtyle/core 0.5.0

package/dist/manifest/badge.manifest.js

@@ -0,0 +1,284 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-badge variant="soft" tone="accent">New</xtyle-badge>
+
+<xtyle-badge variant="solid" tone="success" dot>Online</xtyle-badge>
+
+<xtyle-badge variant="outline" tone="danger">Failed</xtyle-badge>
+
+<xtyle-badge tone="info" count="12">Notifications</xtyle-badge>
+
+<xtyle-badge variant="soft" tone="purple" removable remove-label="Remove tag">design</xtyle-badge>
+
+<span class="xtyle-dot xtyle-dot--success" role="img" aria-label="Online"></span>`;
+const svelteExample = `<script lang="ts">
+	import { Badge } from "@xtyle/svelte";
+</script>
+
+<Badge variant="soft" tone="accent">New</Badge>
+
+<Badge variant="solid" tone="success" dot>Online</Badge>
+
+<Badge variant="outline" tone="danger">Failed</Badge>
+
+<Badge tone="info" count={12}>Notifications</Badge>
+
+<Badge variant="soft" tone="purple" removable removeLabel="Remove tag" onremove={() => drop("design")}>design</Badge>`;
+const astroExample = `---
+import { Badge } from "@xtyle/astro";
+---
+
+<Badge variant="soft" tone="accent">New</Badge>
+
+<Badge variant="solid" tone="success" dot>Online</Badge>
+
+<Badge variant="outline" tone="danger">Failed</Badge>
+
+<Badge tone="info" count={12}>Notifications</Badge>
+
+<Badge variant="soft" tone="purple" removable removeLabel="Remove tag">design</Badge>
+
+<span class="xtyle-dot xtyle-dot--success" role="img" aria-label="Online"></span>`;
+const pulseHtmlExample = `<xtyle-badge variant="soft" tone="success" dot pulse>Live</xtyle-badge>
+<xtyle-badge variant="soft" tone="danger" dot pulse="fast">Alert</xtyle-badge>`;
+const pulseSvelteExample = `<script lang="ts">
+	import { Badge } from "@xtyle/svelte";
+</script>
+
+<Badge variant="soft" tone="success" dot pulse>Live</Badge>
+<Badge variant="soft" tone="danger" dot pulse="fast">Alert</Badge>`;
+const pulseAstroExample = `---
+import { Badge } from "@xtyle/astro";
+---
+
+<Badge variant="soft" tone="success" dot pulse>Live</Badge>
+<Badge variant="soft" tone="danger" dot pulse="fast">Alert</Badge>`;
+export const badgeManifest = {
+    id: "badge",
+    name: "Badge",
+    category: "media",
+    summary: "A compact label, tag, or status chip: three fills across six semantic tones and twelve named hues, optionally removable.",
+    description: "Badge labels, tags, counts, and statuses inline. Fill treatment (`variant`) and color (`tone`) are independent axes: each of the three fills (solid, soft, outline) can carry any of the six semantic tones (accent, neutral, danger, success, warn, info) or any of the twelve named hues (red … black). It adds a leading status dot (which can `pulse` to read as live), a tabular count affordance, and a `removable` form whose `×` is a real focusable `<button>` that emits a `remove` event. That's the removable tag you build a filter row or token input from. A standalone `.xtyle-dot` indicator covers the bare-dot case. Status tones (success, warn, danger, info) emit a screen-reader-only tone word so meaning never rides on color alone.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "badge",
+            description: "The chip root carrying the variant, tone, and size classes.",
+            selector: ".xtyle-badge",
+            tokens: [
+                "--font-sans",
+                "--text-xs",
+                "--weight-medium",
+                "--leading-tight",
+                "--neutral-bg",
+                "--neutral-text",
+                "--border-thin",
+                "--radius-full",
+                "--space-0",
+                "--space-2",
+            ],
+        },
+        {
+            name: "dot",
+            description: "The optional leading status dot, painted in the badge's current text color; breathes on a soft opacity loop when `pulse` is set.",
+            selector: ".xtyle-badge__dot",
+            tokens: ["--space-2", "--space-3", "--radius-full", "--ease-standard"],
+        },
+        {
+            name: "label",
+            description: "The text content wrapper.",
+            selector: ".xtyle-badge__label",
+        },
+        {
+            name: "count",
+            description: "A tabular-numeric count affordance rendered after the label.",
+            selector: ".xtyle-badge__count",
+            tokens: ["--weight-semibold"],
+        },
+        {
+            name: "remove",
+            description: "A real `<button>` dismiss control with an accessible name, its own focus ring, and a state overlay.",
+            selector: ".xtyle-badge__remove",
+            tokens: ["--space-1", "--radius-full", "--duration-fast", "--ease-standard", "--state-hover", "--state-press", "--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "indicator",
+            description: "A standalone dot indicator independent of any chip, tonable and sizable on its own, and pulsable (`.xtyle-dot--pulse-slow` / `--pulse-fast`) to read as live without a chip around it.",
+            selector: ".xtyle-dot",
+            tokens: ["--space-1", "--space-2", "--space-3", "--radius-full", "--neutral", "--ease-standard"],
+        },
+    ],
+    props: [
+        {
+            name: "variant",
+            type: "BadgeVariant",
+            default: "soft",
+            description: "Fill treatment. Independent of tone.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["solid", "soft", "outline"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "neutral",
+            description: "Any color tone: a semantic role, an accent variant (accent-2/3/4), or a named hue (red … black).",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Chip size; the scale tops out smaller than the controls (no `xl`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "dot",
+            type: "boolean",
+            default: "false",
+            description: "Shows a leading status dot in the current text color.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "pulse",
+            type: `boolean | "slow" | "fast"`,
+            description: "Breathes the `dot` on a soft opacity loop so the chip reads as live (streaming, connected, active), reusing Progress's pulse cadence: a bare `pulse` (or `slow`) runs at 1.8s, `fast` at 0.9s. No-op without `dot`, and held still under `prefers-reduced-motion`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["slow", "fast"],
+        },
+        {
+            name: "count",
+            type: "string | number",
+            description: "A numeric count rendered after the label in tabular figures.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "removable",
+            type: "boolean",
+            default: "false",
+            description: "Adds a dismiss `×` button. html/svelte wire it to fire `onremove`; Astro emits static markup you wire yourself.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "removeLabel",
+            type: "string",
+            default: "Remove",
+            description: "Accessible name for the dismiss button (kebab `remove-label` on the custom element).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "onremove",
+            type: "(event: MouseEvent) => void",
+            description: "Handler invoked when the dismiss button is activated.",
+            bindings: ["svelte"],
+        },
+    ],
+    variants: [
+        {
+            name: "solid",
+            description: "Filled with the tone color. The highest-emphasis treatment.",
+            className: "xtyle-badge--solid",
+            tokens: ["--accent", "--accent-fg", "--color-blue-base", "--color-blue-contrast"],
+        },
+        {
+            name: "soft",
+            description: "A soft tone-tinted background with tone-colored text. The default.",
+            className: "xtyle-badge--soft",
+            tokens: ["--accent-bg", "--accent-text", "--color-blue-subtle", "--color-blue-contrast", "--color-blue-muted"],
+        },
+        {
+            name: "outline",
+            description: "Transparent fill with a tone-colored border and text.",
+            className: "xtyle-badge--outline",
+            tokens: ["--accent", "--accent-text", "--color-blue-strong", "--color-blue-muted"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-badge--sm" },
+        { name: "md", description: "Default.", className: "xtyle-badge", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-badge--lg" },
+    ],
+    states: [
+        {
+            name: "pulse",
+            description: "With `pulse` and a `dot`, the dot breathes on a soft opacity loop at Progress's own two speeds (`slow` 1.8s, `fast` 0.9s); held still under `prefers-reduced-motion`.",
+            selector: ".xtyle-badge--pulse-slow .xtyle-badge__dot, .xtyle-badge--pulse-fast .xtyle-badge__dot",
+            tokens: ["--ease-standard"],
+        },
+        {
+            name: "remove-hover",
+            description: "Pointer over the dismiss button. Its overlay paints the hover tint.",
+            selector: ".xtyle-badge__remove:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "remove-active",
+            description: "Dismiss button pressed. Its overlay paints the press tint.",
+            selector: ".xtyle-badge__remove:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "remove-focus-visible",
+            description: "Keyboard focus on the dismiss button: a token ring plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-badge__remove:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The badge label.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-xs",
+        "--text-sm",
+        "--weight-medium",
+        "--weight-semibold",
+        "--leading-tight",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-full",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`, `--${t}-fg`, `--${t}-text`]),
+    ],
+    composition: [
+        "Pair with a list or tag input as removable chips; wire `onremove` (svelte) or the `.xtyle-badge__remove` click (html/astro) to drop the item.",
+        "Use the standalone `.xtyle-dot` indicator next to avatars or rows for presence without a full chip; add `.xtyle-dot--pulse-slow` or `--pulse-fast` to make a chip-less dot read as live (a connection light, a per-row streaming pip), the same breathe the badge dot uses and equally held still under reduced-motion.",
+        "The `count` affordance pairs with nav items and tabs for unread counts.",
+    ],
+    a11y: [
+        "Status tones (success, warn, danger, info) emit a screen-reader-only tone word, so meaning is conveyed without relying on color (WCAG 1.4.1).",
+        "The leading dot is decorative (`aria-hidden`); the standalone `.xtyle-dot` should carry `role=\"img\"` and an `aria-label` when it conveys meaning on its own.",
+        "The `pulse` animation is purely decorative and is disabled under `prefers-reduced-motion`; the live meaning should also be carried by the label text, never by the motion alone.",
+        "The dismiss control is a native `<button>` with an `aria-label`; the html/svelte bindings warn at runtime when you omit `remove-label`.",
+        "The dismiss button shows focus with a token ring plus a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "The `×` glyph is drawn as a decorative `aria-hidden` SVG; the button's accessible name comes from its label, not the icon.",
+    ],
+    examples: [
+        {
+            id: "fills-tones-and-affordances",
+            title: "Fills, tones, and affordances",
+            description: "The three fills cross all tones and hues; dot, count, and the removable form layer on top, with a standalone dot for the bare case.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "live-pulse",
+            title: "Live status",
+            description: "`pulse` breathes the dot so a chip reads as live, streaming, or connected, at Progress's two speeds (`slow` and `fast`); it holds still under reduced-motion.",
+            source: { html: pulseHtmlExample, svelte: pulseSvelteExample, astro: pulseAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=badge.manifest.js.map

package/dist/manifest/badge.manifest.js.map

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

package/dist/manifest/bar.manifest.d.ts

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

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

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

package/dist/manifest/bar.manifest.js

@@ -0,0 +1,342 @@
+import { SERIES_SCHEMES } from "../series.js";
+const htmlExample = `<xtyle-bar
+	categories='["Q1","Q2","Q3","Q4"]'
+	scheme="accents"
+	label="Revenue by quarter"
+	height="280"></xtyle-bar>
+<script>
+	document.querySelector("xtyle-bar").series = [
+		{ name: "Web", values: [12, 19, 15, 22] },
+		{ name: "Mobile", values: [8, 14, 18, 25] },
+	];
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { Bar } from "@xtyle/svelte";
+
+	const categories = ["Q1", "Q2", "Q3", "Q4"];
+	const series = [
+		{ name: "Web", values: [12, 19, 15, 22] },
+		{ name: "Mobile", values: [8, 14, 18, 25] },
+	];
+</script>
+
+<Bar {categories} {series} scheme="accents" label="Revenue by quarter" height={280} />`;
+const astroExample = `---
+import { Bar } from "@xtyle/astro";
+const categories = ["Q1", "Q2", "Q3", "Q4"];
+const series = [
+	{ name: "Web", values: [12, 19, 15, 22] },
+	{ name: "Mobile", values: [8, 14, 18, 25] },
+];
+---
+
+<Bar categories={categories} series={series} scheme="accents" label="Revenue by quarter" height={280} />`;
+const stackedHtmlExample = `<xtyle-bar
+	categories='["Mon","Tue","Wed","Thu","Fri"]'
+	scheme="thermal"
+	stacked
+	label="Load by tier"></xtyle-bar>
+<script>
+	document.querySelector("xtyle-bar").series = [
+		{ name: "CPU", values: [30, 45, 28, 52, 40] },
+		{ name: "IO", values: [20, 18, 34, 22, 30] },
+		{ name: "Net", values: [12, 22, 16, 28, 18] },
+	];
+</script>`;
+const stackedSvelteExample = `<script lang="ts">
+	import { Bar } from "@xtyle/svelte";
+
+	const categories = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+	const series = [
+		{ name: "CPU", values: [30, 45, 28, 52, 40] },
+		{ name: "IO", values: [20, 18, 34, 22, 30] },
+		{ name: "Net", values: [12, 22, 16, 28, 18] },
+	];
+</script>
+
+<Bar {categories} {series} scheme="thermal" stacked label="Load by tier" />`;
+const stackedAstroExample = `---
+import { Bar } from "@xtyle/astro";
+const categories = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+const series = [
+	{ name: "CPU", values: [30, 45, 28, 52, 40] },
+	{ name: "IO", values: [20, 18, 34, 22, 30] },
+	{ name: "Net", values: [12, 22, 16, 28, 18] },
+];
+---
+
+<Bar categories={categories} series={series} scheme="thermal" stacked label="Load by tier" />`;
+const horizontalHtmlExample = `<xtyle-bar
+	categories='["Rust","TypeScript","Svelte","Astro","CSS"]'
+	orientation="horizontal"
+	scheme="skittles"
+	label="Lines by language"
+	height="240"></xtyle-bar>
+<script>
+	document.querySelector("xtyle-bar").series = [
+		{ name: "Lines", values: [4200, 3800, 1500, 900, 2100] },
+	];
+</script>`;
+const horizontalSvelteExample = `<script lang="ts">
+	import { Bar } from "@xtyle/svelte";
+
+	const categories = ["Rust", "TypeScript", "Svelte", "Astro", "CSS"];
+	const series = [{ name: "Lines", values: [4200, 3800, 1500, 900, 2100] }];
+</script>
+
+<Bar {categories} {series} orientation="horizontal" scheme="skittles" label="Lines by language" height={240} />`;
+const horizontalAstroExample = `---
+import { Bar } from "@xtyle/astro";
+const categories = ["Rust", "TypeScript", "Svelte", "Astro", "CSS"];
+const series = [{ name: "Lines", values: [4200, 3800, 1500, 900, 2100] }];
+---
+
+<Bar categories={categories} series={series} orientation="horizontal" scheme="skittles" label="Lines by language" height={240} />`;
+const actionableHtmlExample = `<xtyle-bar
+	categories='["Alpha","Bravo","Charlie","Delta"]'
+	label="Runs by workflow"
+	selectable
+	height="240"></xtyle-bar>
+<script>
+	const bar = document.querySelector("xtyle-bar");
+	bar.series = [{ name: "Runs", values: [42, 30, 18, 9] }];
+	bar.addEventListener("select", (e) => {
+		openWorkflow(e.detail.category);
+	});
+</script>`;
+const actionableSvelteExample = `<script lang="ts">
+	import { Bar } from "@xtyle/svelte";
+
+	const categories = ["Alpha", "Bravo", "Charlie", "Delta"];
+	const series = [{ name: "Runs", values: [42, 30, 18, 9] }];
+</script>
+
+<Bar
+	{categories}
+	{series}
+	label="Runs by workflow"
+	selectable
+	height={240}
+	onselect={(e) => openWorkflow(e.detail.category)}
+/>`;
+const actionableAstroExample = `---
+import { Bar } from "@xtyle/astro";
+const categories = ["Alpha", "Bravo", "Charlie", "Delta"];
+const series = [{ name: "Runs", values: [42, 30, 18, 9] }];
+---
+
+<Bar categories={categories} series={series} label="Runs by workflow" selectable height={240} />
+<script>
+	document.querySelector("xtyle-bar").addEventListener("select", (e) => {
+		openWorkflow(e.detail.category);
+	});
+</script>`;
+export const barManifest = {
+    id: "bar",
+    name: "Bar",
+    since: "0.3.0",
+    category: "metrics",
+    summary: "A grouped or stacked bar chart, colored from a theme-derived series palette, with an interactive value readout and opt-in clickable bars.",
+    description: "Bar plots one or more numeric series across a set of categories as an SVG chart that renders from data alone. Each series takes its color from a `scheme` resolved off the live theme (the `accents` fan, the `skittles` hue ring, a `thermal` cold-to-hot scale, or the `status` roster), so a chart is coherent with the rest of the UI out of the box; pass an explicit color array for full control, and `reverse` to flip any scheme. Bars sit side by side by default or stack with `stacked`, and run vertically or horizontally (`orientation`) for long category labels. It's interactive: hovering or focusing a bar dims the rest and floats a value readout, and the whole chart is mirrored into a visually-hidden data table so assistive tech reads the numbers, not the pixels. Set `selectable` to make it a drill-in surface: each bar becomes a button that fires a `select` event with its series, category, and value, so a click filters, navigates, or drills into that data. A value axis with gridlines and category labels come derived; a legend appears for multi-series data. Set `height` for the plot area; the chart fills its container's width. With no categories or series to plot, it shows a muted `No data` message in place of the axes.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "chart",
+            description: "The `<figure>` root holding the SVG plot, legend, tooltip, and the accessible data table.",
+            selector: ".xtyle-bar",
+            tokens: ["--font-sans"],
+        },
+        {
+            name: "bar",
+            description: "A single value bar, filled with its series color; the focus/hover target.",
+            selector: ".xtyle-bar__bar",
+            tokens: ["--ring", "--border-thick", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "grid",
+            description: "The value gridlines, axis baseline, and tick labels.",
+            selector: ".xtyle-bar__grid",
+            tokens: ["--line", "--line-2", "--fg-3", "--text-xs"],
+        },
+        {
+            name: "legend",
+            description: "The series key, shown for multi-series charts; each item pairs a color dot with the series name.",
+            selector: ".xtyle-bar__legend",
+            tokens: ["--fg-1", "--text-sm", "--space-1", "--space-3", "--radius-sm"],
+        },
+        {
+            name: "tooltip",
+            description: "The floating value readout shown on hover or focus of a bar.",
+            selector: ".xtyle-bar__tooltip",
+            tokens: ["--surface-overlay", "--surface-overlay-border", "--elevation-3", "--radius-md", "--fg-0"],
+        },
+    ],
+    props: [
+        {
+            name: "series",
+            type: "{ name: string; values: number[] }[]",
+            description: "The data: one entry per series, each a name and a value per category. JS property in html/svelte, JSON attribute or prop in astro.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "categories",
+            type: "string[]",
+            description: "The category labels along the axis; one per index in each series' `values`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "scheme",
+            type: "SeriesScheme | string[]",
+            default: "accents",
+            description: "How series 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 (a sequential scale runs the other way; a categorical set reverses order).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "colorBy",
+            type: `"series" | "category"`,
+            default: "auto",
+            description: "Which axis drives the palette. Defaults to coloring by category for a single series (so the scheme still varies bar to bar) and by series once there's more than one; set explicitly to override. Kebab `color-by` on the element.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["series", "category"],
+        },
+        {
+            name: "orientation",
+            type: `"vertical" | "horizontal"`,
+            default: "vertical",
+            description: "Bars grow up from a category axis (`vertical`) or rightward from the categories down the side (`horizontal`, better for long labels or many categories).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["vertical", "horizontal"],
+        },
+        {
+            name: "stacked",
+            type: "boolean",
+            default: "false",
+            description: "Stacks each category's series into one bar instead of placing them side by side.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "showValues",
+            type: "boolean",
+            default: "false",
+            description: "Draws each bar's value above it (grouped mode). Kebab `show-values` on the element.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "legend",
+            type: "boolean",
+            default: "true",
+            description: "Shows the series legend for multi-series charts; set false to hide it.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "height",
+            type: "number",
+            default: "320",
+            description: "The plot height in pixels; the chart fills its container's width.",
+            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"],
+        },
+        {
+            name: "selectable",
+            type: "boolean",
+            default: "false",
+            description: "Makes bars actionable: each bar becomes a `role=\"button\"` with a pointer cursor, and clicking one (or pressing Enter/Space while it's focused) fires a `select` `CustomEvent` whose `detail` carries `{ series, category, value, seriesIndex, categoryIndex }`. `@xtyle/svelte` surfaces it as an `onselect` callback. Leave it off for a read-only chart.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [
+        {
+            name: "bar-hover",
+            description: "Pointer over or keyboard focus on a bar: the rest dim and a value readout floats above it.",
+            selector: ".xtyle-bar--hovering .xtyle-bar__bar:not(.is-active)",
+            tokens: ["--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "bar-focus",
+            description: "Keyboard focus on a bar draws a token ring; each bar is a tab stop that announces its series, category, and value.",
+            selector: ".xtyle-bar__bar:focus-visible",
+            tokens: ["--ring", "--border-thick"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--font-sans",
+        "--text-xs",
+        "--text-sm",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--fg-3",
+        "--line",
+        "--line-2",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--radius-sm",
+        "--radius-md",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--elevation-3",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--border-thin",
+        "--border-thick",
+        "--weight-semibold",
+        "--leading-normal",
+    ],
+    composition: [
+        "Colors come from the same register the rest of the UI does, so a chart matches its surrounding chrome without hand-picking colors. Pick a `scheme` that fits the data: `accents` for a branded set, `skittles` for many distinct categories, `thermal` or `status` for a scale.",
+        "Pair a Bar with `Stat` cards in the Metrics family for a headline number beside its breakdown.",
+        "For a single-series chart, drop the legend (`legend={false}`) and let the category labels carry the meaning.",
+        "Make a dashboard chart a drill-in with `selectable` and a `select` listener: click a bar to filter the table beside it, open that category's detail, or route to a filtered view. The event's `detail` names the exact `series` / `category` / `value` clicked, so the handler needs no lookup.",
+    ],
+    a11y: [
+        "The SVG is decorative (`aria-hidden`); the chart's data is mirrored into a visually-hidden `<table>` so assistive tech reads the actual numbers. `label` becomes the table's caption.",
+        "Each bar is a focusable tab stop with an `aria-label` naming its series, category, and value, so the chart is navigable by keyboard, and the value readout appears on focus as well as hover.",
+        "With `selectable`, each bar becomes a `role=\"button\"` (announced as actionable) and activates on Enter/Space as well as click, so a keyboard user can drill in; a read-only chart keeps its bars as `role=\"img\"` data points.",
+        "Color is never the only channel: the legend names each series in text, and the table repeats every value.",
+    ],
+    examples: [
+        {
+            id: "grouped",
+            title: "Grouped series",
+            description: "Two series across four categories, colored from the `accents` scheme, with an interactive readout.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "stacked",
+            title: "Stacked",
+            description: "`stacked` folds each category's series into one bar; here on the `thermal` scale.",
+            source: { html: stackedHtmlExample, svelte: stackedSvelteExample, astro: stackedAstroExample },
+        },
+        {
+            id: "horizontal",
+            title: "Horizontal",
+            description: "`orientation=\"horizontal\"` runs bars rightward with the categories down the side. A single series colors by category, so each bar takes its own `skittles` hue.",
+            source: { html: horizontalHtmlExample, svelte: horizontalSvelteExample, astro: horizontalAstroExample },
+        },
+        {
+            id: "actionable",
+            title: "Actionable bars",
+            description: "`selectable` makes each bar a button that fires `select` on click or Enter/Space, so a chart can drive a drill-in. The `detail` carries the series, category, value, and both indices.",
+            source: { html: actionableHtmlExample, svelte: actionableSvelteExample, astro: actionableAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=bar.manifest.js.map

package/dist/manifest/bar.manifest.js.map

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