@xtyle/core 0.5.0

package/dist/manifest/slider.manifest.js

@@ -0,0 +1,294 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-slider label="Volume" value="60"></xtyle-slider>
+
+<xtyle-slider label="Brightness" min="0" max="100" step="5" value="40"></xtyle-slider>
+
+<xtyle-slider size="sm" label="Compact" value="25"></xtyle-slider>
+
+<xtyle-slider label="Opacity" name="opacity" value="80"></xtyle-slider>
+
+<xtyle-slider label="Volume" value="60" show-value></xtyle-slider>
+
+<xtyle-slider id="pct" label="Opacity" value="80" show-value></xtyle-slider>
+<script>
+	document.getElementById("pct").format = (v) => v + "%";
+</script>
+
+<xtyle-slider label="Volume" value="60" hide-label></xtyle-slider>
+
+<xtyle-slider label="Locked" value="50" disabled></xtyle-slider>`;
+const svelteExample = `<script lang="ts">
+	import { Slider } from "@xtyle/svelte";
+
+	let volume = $state(60);
+</script>
+
+<Slider label="Volume" bind:value={volume} />
+
+<Slider label="Brightness" min={0} max={100} step={5} value={40} />
+
+<Slider size="sm" label="Compact" value={25} />
+
+<Slider label="Opacity" name="opacity" value={80} />
+
+<Slider label="Volume" value={60} showValue />
+
+<Slider label="Opacity" value={80} showValue format={(v) => \`\${v}%\`} />
+
+<Slider label="Volume" value={60} hideLabel />
+
+<Slider label="Locked" value={50} disabled />`;
+const astroExample = `---
+import { Slider } from "@xtyle/astro";
+---
+
+<Slider label="Volume" value={60} />
+
+<Slider label="Brightness" min={0} max={100} step={5} value={40} />
+
+<Slider size="sm" label="Compact" value={25} />
+
+<Slider label="Opacity" name="opacity" value={80} />
+
+<Slider label="Volume" value={60} showValue />
+
+<Slider label="Volume" value={60} hideLabel />
+
+<Slider label="Locked" value={50} disabled />`;
+export const sliderManifest = {
+    id: "slider",
+    name: "Slider",
+    category: "control",
+    summary: "A draggable range control for choosing a single value between a min and max, with full keyboard support.",
+    description: "Slider picks one number across a range. It renders a rail with a fill showing the chosen portion and a `role=\"slider\"` thumb carrying `aria-valuemin`/`aria-valuemax`/`aria-valuenow`, so pointer drag, click-to-position, and the full arrow/Page/Home/End keyboard set all move it. Values snap to `step` and clamp to `[min, max]`. It is form-associated: give it a `name` and it contributes its current value to form data. Three sizes (`sm`, the default `md`, and `lg`) vary the thumb and rail thickness. It is the primitive the hue and alpha tracks of a color picker compose from.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "slider",
+            description: "The column wrapper carrying the size and disabled classes and stacking the optional label above the rail.",
+            selector: ".xtyle-slider",
+            tokens: ["--font-sans", "--text-body", "--leading-tight", "--fg-0", "--space-2"],
+        },
+        {
+            name: "rail",
+            description: "The interactive track the thumb travels along; its `::before` paints the unfilled groove.",
+            selector: ".xtyle-slider__rail",
+            tokens: ["--space-5", "--space-2", "--radius-full", "--neutral-bg", "--border-thin", "--line-2"],
+        },
+        {
+            name: "fill",
+            description: "The accent-colored portion of the rail from the minimum to the current value.",
+            selector: ".xtyle-slider__fill",
+            tokens: ["--accent", "--radius-full"],
+        },
+        {
+            name: "thumb",
+            description: "The draggable `role=\"slider\"` knob positioned at the current value.",
+            selector: ".xtyle-slider__thumb",
+            tokens: ["--space-5", "--radius-full", "--bg-0", "--border-normal", "--accent", "--elevation-1"],
+        },
+        {
+            name: "header",
+            description: "The row above the rail that lays out the label and value readout on opposite ends when either is shown.",
+            selector: ".xtyle-slider__header",
+            tokens: ["--space-2"],
+        },
+        {
+            name: "label",
+            description: "The optional visible label that names the slider and is referenced as its accessible name.",
+            selector: ".xtyle-slider__label",
+            tokens: ["--fg-1", "--text-sm"],
+        },
+        {
+            name: "value",
+            description: "The optional inline readout of the current value, shown when `show-value` is set and formatted by the `format` property.",
+            selector: ".xtyle-slider__value",
+            tokens: ["--fg-1", "--text-sm"],
+        },
+        {
+            name: "overlay",
+            description: "The pseudo-element on the thumb that paints hover and active state tints.",
+            selector: ".xtyle-slider__thumb::after",
+            tokens: ["--state-hover", "--state-press"],
+        },
+    ],
+    props: [
+        {
+            name: "value",
+            type: "number",
+            default: "min",
+            description: "The current value, snapped to `step` and clamped to `[min, max]`. Two-way bindable in Svelte; reflected to `aria-valuenow`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "min",
+            type: "number",
+            default: "0",
+            description: "The lower bound of the range.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "max",
+            type: "number",
+            default: "100",
+            description: "The upper bound of the range.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "step",
+            type: "number",
+            default: "1",
+            description: "The granularity values snap to; arrow keys move by one step, Page keys by ten.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables interaction; mutes the fill and thumb, drops the thumb out of the tab order, and sets `aria-disabled`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control size (`sm`, `md`, or `lg`) varying the thumb and rail thickness.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color of the rail fill and thumb. Any of the semantic roles, accent variants, or named hues.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Visible label, also wired as the accessible name via `aria-labelledby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelledby",
+            type: "string",
+            description: "ID of an external element that names the slider. Takes precedence over `label`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Form field name; the slider contributes its current value to submitted form data.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "show-value",
+            type: "boolean",
+            default: "false",
+            description: "Renders the current value inline beside the label. The readout is `aria-hidden` since the thumb's `aria-valuenow` already announces it. Format it with the `format` property.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "hide-label",
+            type: "boolean",
+            default: "false",
+            description: "Visually hides the `label` text while still using it to name the control for assistive tech. Use it when the host already renders its own visible label but the slider still needs an accessible name.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "format",
+            type: "(value: number) => string",
+            description: "A JS property (not an attribute) on the element: a function that formats the `show-value` readout. Defaults to the raw number. Settable in the HTML binding and via `bind:format` in Svelte; not available in the static Astro binding.",
+            bindings: ["html", "svelte"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact: thin rail, small thumb.", className: "xtyle-slider--sm" },
+        { name: "md", description: "Default.", className: "xtyle-slider", isDefault: true },
+        { name: "lg", description: "Large: thicker rail, bigger thumb for touch.", className: "xtyle-slider--lg" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over the thumb. Overlay paints the hover tint.",
+            selector: ".xtyle-slider__thumb:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Thumb pressed or dragging. Overlay paints the press tint.",
+            selector: ".xtyle-slider__thumb:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on the thumb: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-slider__thumb:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: muted fill and thumb, thumb removed from the tab order.",
+            selector: ".xtyle-slider--disabled",
+            tokens: ["--state-disabled", "--fg-disabled", "--line-2"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--leading-tight",
+        "--fg-0",
+        "--fg-1",
+        "--fg-disabled",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-full",
+        "--radius-sm",
+        "--space-1",
+        "--space-2",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--neutral-bg",
+        "--field-bg",
+        "--field-border",
+        "--line-2",
+        "--bg-0",
+        ...FULL_TONES.map((t) => `--${t}`),
+        "--elevation-1",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--state-disabled",
+    ],
+    composition: [
+        "Pair with Field or a form to capture the value; give it a `name` so it contributes to submitted data.",
+        "Use a tight `step` for coarse adjustments (a 0–10 rating) or `step=\"1\"` over a wide range for fine ones.",
+        "It is the building block for a color picker's hue and alpha tracks: same rail, fill, and thumb mechanics with a gradient rail.",
+    ],
+    a11y: [
+        "The thumb is `role=\"slider\"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` kept in sync, never conveying value by position alone.",
+        "Full keyboard support: arrows move by `step`, PageUp/PageDown by ten steps, Home/End jump to min/max; the keys' default scroll is prevented.",
+        "Requires an accessible name: `labelledby` wins, then `label`; the binding warns at runtime when neither is present. `hide-label` keeps the `label` as the accessible name while visually hiding its text, so a host that renders its own label avoids announcing the name twice.",
+        "The `show-value` readout is `aria-hidden` so screen readers hear the value once via the thumb's `aria-valuenow`, not twice.",
+        "Pointer drag uses pointer capture so the thumb keeps tracking even when the cursor leaves the rail.",
+        "Focus is shown with a token ring and a transparent outline the forced-colors base rule promotes to a real system outline.",
+        "`disabled` blocks interaction, mutes the visuals, and pulls the thumb out of the tab order with `aria-disabled`.",
+    ],
+    examples: [
+        {
+            id: "ranges-sizes-and-form",
+            title: "Ranges, sizes, and form association",
+            description: "A labeled slider, a stepped range, the compact size, a form-bound slider, and a disabled one.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=slider.manifest.js.map

package/dist/manifest/slider.manifest.js.map

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

package/dist/manifest/sparkline.manifest.d.ts

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

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

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

package/dist/manifest/sparkline.manifest.js

@@ -0,0 +1,227 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-sparkline values="4,6,5,8,7,9,12,10,13" label="Weekly signups"></xtyle-sparkline>
+
+<xtyle-sparkline values="4,6,5,8,7,9,12,10,13" variant="area" tone="success"></xtyle-sparkline>
+
+<xtyle-sparkline values="4,6,5,8,7,9,12,10,13" variant="bar" tone="purple"></xtyle-sparkline>`;
+const svelteExample = `<script lang="ts">
+	import { Sparkline } from "@xtyle/svelte";
+
+	const trend = [4, 6, 5, 8, 7, 9, 12, 10, 13];
+</script>
+
+<Sparkline values={trend} label="Weekly signups" />
+<Sparkline values={trend} variant="area" tone="success" />`;
+const astroExample = `---
+import { Sparkline } from "@xtyle/astro";
+const trend = [4, 6, 5, 8, 7, 9, 12, 10, 13];
+---
+
+<Sparkline values={trend} label="Weekly signups" />
+<Sparkline values={trend} variant="area" tone="success" />`;
+const inlineHtmlExample = `<p>
+	Signups this week
+	<xtyle-sparkline values="4,6,5,8,7,9,12,10,13" tone="accent" style="--spark-width: 5rem; --spark-height: 1.2rem;"></xtyle-sparkline>
+	up 34%.
+</p>`;
+const inlineSvelteExample = `<p>
+	Signups this week
+	<Sparkline values={trend} style="--spark-width: 5rem; --spark-height: 1.2rem;" />
+	up 34%.
+</p>`;
+const inlineAstroExample = `<p>
+	Signups this week
+	<Sparkline values={trend} style="--spark-width: 5rem; --spark-height: 1.2rem;" />
+	up 34%.
+</p>`;
+const timeHtmlExample = `<xtyle-sparkline window="300000" variant="area" tone="info" label="Signal, last 5m"></xtyle-sparkline>
+<script>
+	const spark = document.querySelector("xtyle-sparkline");
+	// irregular samples over real time: { at: epoch ms | ISO string, value }
+	spark.points = history;
+</script>`;
+const timeSvelteExample = `<script lang="ts">
+	import { Sparkline } from "@xtyle/svelte";
+	// { at: epoch ms | ISO string, value }[]
+	const history = readSignalHistory();
+</script>
+
+<Sparkline points={history} window={300000} variant="area" tone="info" label="Signal, last 5m" />`;
+const timeAstroExample = `---
+import { Sparkline } from "@xtyle/astro";
+const history = readSignalHistory(); // { at: epoch ms | ISO string, value }[]
+---
+
+<Sparkline points={history} window={300000} variant="area" tone="info" label="Signal, last 5m" />`;
+export const sparklineManifest = {
+    id: "sparkline",
+    name: "Sparkline",
+    since: "0.3.0",
+    category: "metrics",
+    summary: "A tiny, word-sized trend line, area, or bar chart, single-tone and axis-free, for inline use or a live time-series.",
+    description: "Sparkline draws a single series of numbers as a small, axis-free SVG that reads as a trend at a glance, sized to sit inline in a sentence, a table cell, or beside a `Stat`. Three shapes: a `line`, a filled `area`, or a mini `bar` run. Feed it evenly-spaced `values`, or switch to `points` (timestamped samples) for a real time-series: they map onto a sliding `window` (or an explicit `domain`), so irregular samples sit at their true position and slide left over real time. Add `step` to hold each value for an on/off signal. It takes one `tone` from the theme roster (any semantic role or named hue) and marks the latest point with an end dot. It's interactive: sweeping across it floats a marker and the value at the nearest point. Size it with the `--spark-width` and `--spark-height` custom properties; give it a `label` for an accessible name. Auto-ranged from the data, or pin `min` / `max` to share a baseline across a column of sparklines. An empty series shows a muted `No data` label instead of a blank box.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "sparkline",
+            description: "The inline-block root sized by `--spark-width` / `--spark-height`, tinted by `--spark-color`.",
+            selector: ".xtyle-sparkline",
+            tokens: ["--accent"],
+        },
+        {
+            name: "line",
+            description: "The trend polyline (or the area's outline), stroked in the tone.",
+            selector: ".xtyle-sparkline__line",
+        },
+        {
+            name: "end",
+            description: "The dot marking the most recent value.",
+            selector: ".xtyle-sparkline__end",
+            tokens: ["--bg-0"],
+        },
+        {
+            name: "marker",
+            description: "The hover guide, dot, and value tooltip shown while sweeping across the chart.",
+            selector: ".xtyle-sparkline__marker",
+            tokens: ["--line-2", "--surface-overlay", "--surface-overlay-border", "--elevation-3", "--fg-0"],
+        },
+    ],
+    props: [
+        {
+            name: "values",
+            type: "number[]",
+            description: "The data series, evenly spaced. JS property in html/svelte, a JSON or comma list attribute, or a prop in astro.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "points",
+            type: "{ at: number | string; value: number }[]",
+            description: "Time-windowed mode: timestamped samples (`at` is epoch ms or a date string) placed on a real time axis instead of even spacing, so irregular samples read at their true position and slide left over time. JS property in html/svelte, JSON attribute or prop in astro. Pair with `window` or `domain`; overrides `values` when set.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "window",
+            type: "number",
+            default: "300000",
+            description: "The sliding time window in ms (default 5 minutes), ending at now; samples older than it drop off the left. Used only in `points` mode, and ignored when `domain` is set.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "domain",
+            type: "[number | string, number | string]",
+            description: "An explicit `[start, end]` time span (epoch ms or date strings) for the x-axis, instead of the sliding `window`. JSON attribute or prop.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "step",
+            type: "boolean",
+            default: "false",
+            description: "Draws the line as a sample-and-hold step, so an on/off or discrete series reads as held levels rather than diagonal ramps.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "variant",
+            type: "\"line\" | \"area\" | \"bar\"",
+            default: "line",
+            description: "The shape: a stroked line, a filled area under it, or a mini bar run.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["line", "area", "bar"],
+        },
+        {
+            name: "tone",
+            type: "SparklineTone",
+            default: "accent",
+            description: "The single color, any semantic role (accent, success, danger, …) or named hue (red … black).",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "showEnd",
+            type: "boolean",
+            default: "true",
+            description: "Marks the latest point with a dot (line and area only). Kebab `show-end` on the element.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "min",
+            type: "number",
+            description: "Pin the low end of the range; omit to auto-range from the data. Share across a column for a common baseline.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "max",
+            type: "number",
+            description: "Pin the high end of the range; omit to auto-range from the data.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An accessible name for the chart.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        { name: "line", description: "A stroked trend line, the default.", className: "xtyle-sparkline--line" },
+        { name: "area", description: "The line with a soft fill down to the baseline.", className: "xtyle-sparkline--area" },
+        { name: "bar", description: "A run of tiny bars, one per value.", className: "xtyle-sparkline--bar" },
+    ],
+    sizes: [],
+    states: [
+        {
+            name: "hover",
+            description: "Sweeping across the chart floats a guide, a dot at the nearest point, and its value.",
+            selector: ".xtyle-sparkline__marker",
+            tokens: ["--line-2"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--accent",
+        "--bg-0",
+        "--line-2",
+        "--font-sans",
+        "--text-xs",
+        "--leading-normal",
+        "--fg-0",
+        "--fg-2",
+        "--space-1",
+        "--space-2",
+        "--radius-md",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--elevation-3",
+        "--border-thin",
+        ...FULL_TONES.map((t) => `--${t}`),
+    ],
+    composition: [
+        "Drop one beside a `Stat` value for a headline number with its recent trend, both in the Metrics family.",
+        "Set `--spark-width` / `--spark-height` small to sit a sparkline inline in running text or a table cell.",
+        "Pin the same `min` / `max` across a column of sparklines so their heights compare honestly.",
+    ],
+    a11y: [
+        "The SVG carries `role=\"img\"` and an `aria-label` (your `label`, or a value-count fallback), so it announces as a single image rather than a pile of shapes.",
+        "Tone is chosen from the theme roster; pair a sparkline with a nearby number or `label` so meaning never rides on the trend shape or color alone.",
+    ],
+    examples: [
+        {
+            id: "shapes",
+            title: "Line, area, and bar",
+            description: "The same series as a stroked line, a filled area, and a mini bar run, each in a different tone.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "inline",
+            title: "Inline in text",
+            description: "Sized down with `--spark-width` / `--spark-height` to sit word-height in a sentence.",
+            source: { html: inlineHtmlExample, svelte: inlineSvelteExample, astro: inlineAstroExample },
+        },
+        {
+            id: "timeseries",
+            title: "Time-windowed series",
+            description: "`points` with timestamps on a sliding `window` place irregular samples at their true position over real time, so a live signal reads honestly instead of assuming even spacing. Add `step` for a held on/off series.",
+            source: { html: timeHtmlExample, svelte: timeSvelteExample, astro: timeAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=sparkline.manifest.js.map

package/dist/manifest/sparkline.manifest.js.map

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

package/dist/manifest/spinner.manifest.d.ts

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

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

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