@xtyle/astro 0.5.0

package/src/Segmented.astro

@@ -0,0 +1,95 @@
+---
+import { normalizeSegments } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	value?: string;
+	options?: string | ReadonlyArray<string | { value: string; label?: string; disabled?: boolean; badge?: string }>;
+	disabled?: boolean;
+	size?: Size;
+	tone?: Tone;
+	label?: string;
+	labelledby?: string;
+	name?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	value,
+	options,
+	disabled = false,
+	size = "md",
+	tone = "accent",
+	label,
+	labelledby,
+	"aria-label": ariaLabel,
+	name,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const elementId = `xtyle-segmented-${Math.random().toString(36).slice(2, 8)}`;
+const segments = normalizeSegments(options);
+const optionsAttr = typeof options === "string" ? options : options ? JSON.stringify(options) : undefined;
+
+// Two authoring modes, mirroring Tabs. The `options` bar renders its whole chrome light from `bindings`
+// and ships no children (the zero-JS SSR path). The rich-content mode pairs `<Segment>` children by
+// order — live framework markup that can't be snapshotted — so it passes them through untouched and the
+// element projects them on connect (shadow `<slot>`, client-hydrated).
+const useSlotted = Astro.slots.has("default");
+
+const bindings = {
+	segments,
+	value: value ?? null,
+	disabled,
+	size,
+	tone,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	ariaLabel: ariaLabel ?? null,
+	elementId,
+};
+const light = useSlotted ? "" : await renderFragmentLight("segmented", bindings);
+---
+
+{useSlotted ? (
+	<xtyle-segmented
+		value={value}
+		disabled={disabled || undefined}
+		size={size}
+		tone={tone}
+		label={label}
+		labelledby={labelledby}
+		aria-label={ariaLabel}
+		name={name}
+		class={extra}
+		{...rest}
+	>
+		<slot />
+	</xtyle-segmented>
+) : (
+	<xtyle-segmented
+		value={value}
+		options={optionsAttr}
+		disabled={disabled || undefined}
+		size={size}
+		tone={tone}
+		label={label}
+		labelledby={labelledby}
+		aria-label={ariaLabel}
+		name={name}
+		class={extra}
+		{...rest}
+		set:html={light}
+	/>
+)}
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Select.astro

@@ -0,0 +1,79 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	label?: string;
+	name?: string;
+	value?: string;
+	size?: Size;
+	invalid?: boolean;
+	error?: string;
+	disabled?: boolean;
+	required?: boolean;
+	ariaLabel?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	label,
+	name,
+	value,
+	size = "md",
+	invalid = false,
+	error,
+	disabled = false,
+	required = false,
+	ariaLabel,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const fieldId = `xtyle-select-${Math.random().toString(36).slice(2, 9)}`;
+const errorId = `${fieldId}-error`;
+
+// The consumer's `<option>`/`<optgroup>` children populate the rendered `<select>` (via
+// `bindings.optionsHtml`) AND ride along as hidden light-DOM children after the chrome, so the
+// element can re-read them on a rebuild. `xtyle-select > option` is `display:none` (see
+// `hostDisplayCss`), so the bare copies never show.
+const optionsHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+
+const bindings = {
+	label: label ?? null,
+	value: value ?? null,
+	size,
+	disabled,
+	invalid,
+	required,
+	error: error ?? null,
+	name: name ?? null,
+	fieldId,
+	errorId,
+	optionsHtml,
+};
+const light = await renderFragmentLight("select", bindings);
+const composed = light + optionsHtml;
+---
+
+<xtyle-select
+	label={label}
+	value={value}
+	size={size}
+	name={name}
+	disabled={disabled || undefined}
+	invalid={invalid || undefined}
+	required={required || undefined}
+	error={error}
+	aria-label={ariaLabel}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Separator.astro

@@ -0,0 +1,36 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Orientation = "horizontal" | "vertical";
+type SeparatorVariant = "default" | "with-label";
+type SeparatorSize = "thin" | "normal";
+
+interface Props {
+	orientation?: Orientation;
+	variant?: SeparatorVariant;
+	size?: SeparatorSize;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	orientation = "horizontal",
+	variant = "default",
+	size = "normal",
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = { orientation, variant, size };
+const chrome = await renderFragmentLight("separator", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-separator orientation={orientation} variant={variant} size={size} class={extra} set:html={composed} {...rest} />
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Skeleton.astro

@@ -0,0 +1,25 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type SkeletonShape = "text" | "line" | "block" | "circle";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	shape?: SkeletonShape;
+	size?: Size;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { shape = "text", size = "md", static: isStatic = false, class: extra, ...rest } = Astro.props;
+
+const bindings = { shape, size };
+const composed = await renderFragmentLight("skeleton", bindings);
+---
+
+<xtyle-skeleton shape={shape} size={size} class={extra} set:html={composed} {...rest} />
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Slider.astro

@@ -0,0 +1,93 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	value?: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	disabled?: boolean;
+	size?: Size;
+	tone?: Tone;
+	label?: string;
+	labelledby?: string;
+	name?: string;
+	showValue?: boolean;
+	hideLabel?: boolean;
+	/** Reset value for a double-click on the thumb. Defaults to the initial `value`. */
+	default?: number;
+	/** Disable click-to-edit on the shown value (it is on by default when `showValue` is set). */
+	staticValue?: boolean;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	value = 0,
+	min = 0,
+	max = 100,
+	step = 1,
+	disabled = false,
+	size = "md",
+	tone = "accent",
+	label,
+	labelledby,
+	name,
+	showValue = false,
+	hideLabel = false,
+	default: defaultValue,
+	staticValue = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const elementId = `xtyle-slider-${Math.random().toString(36).slice(2, 8)}`;
+const editableValue = showValue && !staticValue;
+
+const bindings = {
+	value,
+	min,
+	max,
+	step,
+	disabled,
+	size,
+	tone,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	showValue,
+	hideLabel,
+	valueText: String(value),
+	elementId,
+	editableValue,
+};
+const light = await renderFragmentLight("slider", bindings);
+---
+
+<xtyle-slider
+	value={value}
+	min={min}
+	max={max}
+	step={step}
+	disabled={disabled || undefined}
+	size={size}
+	tone={tone}
+	label={label}
+	labelledby={labelledby}
+	name={name}
+	show-value={showValue || undefined}
+	hide-label={hideLabel || undefined}
+	default={defaultValue}
+	static-value={staticValue || undefined}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Sparkline.astro

@@ -0,0 +1,79 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+import { windowedPlot } from "@xtyle/core";
+import type { SparklineVariant, SparklineTone, TimeSample } from "@xtyle/core";
+
+interface Props {
+	values?: number[];
+	/** Time-windowed mode: timestamped points (`at` is epoch ms or a date string) placed on a real
+	 * time axis instead of even spacing. Pass alongside `window` or `domain`. */
+	points?: TimeSample[];
+	/** The sliding window width in ms (default 5m), ending at now; ignored when `domain` is set. */
+	window?: number;
+	/** An explicit `[start, end]` x-axis span (epoch ms or date strings), instead of a sliding window. */
+	domain?: [number | string, number | string];
+	/** Render the line as a sample-and-hold step (for on/off or discrete series). */
+	step?: boolean;
+	variant?: SparklineVariant;
+	tone?: SparklineTone;
+	showEnd?: boolean;
+	min?: number;
+	max?: number;
+	label?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `style`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	values = [],
+	points,
+	window: windowMs,
+	domain,
+	step = false,
+	variant = "line",
+	tone = "accent",
+	showEnd = true,
+	min,
+	max,
+	label,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const plot =
+	points && points.length > 0 ? windowedPlot(points, { window: windowMs, domain, now: Date.now() }) : null;
+const bindings = {
+	...(plot ? { plot } : { values }),
+	variant,
+	tone,
+	showEnd,
+	step,
+	min,
+	max,
+	label: label ?? null,
+};
+const chrome = await renderFragmentLight("sparkline", bindings);
+---
+
+<xtyle-sparkline
+	values={JSON.stringify(values)}
+	points={points ? JSON.stringify(points) : undefined}
+	window={windowMs ?? undefined}
+	domain={domain ? JSON.stringify(domain) : undefined}
+	variant={variant}
+	tone={tone}
+	show-end={showEnd ? undefined : "false"}
+	step={step || undefined}
+	min={min ?? undefined}
+	max={max ?? undefined}
+	label={label}
+	class={extra}
+	set:html={chrome}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Spinner.astro

@@ -0,0 +1,37 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	tone?: Tone;
+	size?: Size;
+	"aria-label"?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	tone = "accent",
+	size = "md",
+	"aria-label": ariaLabel = "Loading",
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	tone,
+	size,
+	label: ariaLabel,
+};
+const composed = await renderFragmentLight("spinner", bindings);
+---
+
+<xtyle-spinner tone={tone} size={size} aria-label={ariaLabel} class={extra} set:html={composed} {...rest} />
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Splitter.astro

@@ -0,0 +1,87 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type SplitterOrientation = "vertical" | "horizontal";
+type SplitterSize = "sm" | "md" | "lg";
+
+interface Props {
+	orientation?: SplitterOrientation;
+	size?: SplitterSize;
+	line?: boolean;
+	min?: number;
+	max?: number;
+	step?: number;
+	value: number;
+	default?: number;
+	disabled?: boolean;
+	reversed?: boolean;
+	/** The CSS custom property the splitter writes the pane size into. */
+	var?: string;
+	/** The id of the element the var is set on; defaults to the splitter's parent. */
+	for?: string;
+	label?: string;
+	labelledby?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	orientation = "vertical",
+	size = "md",
+	line = false,
+	min = 0,
+	max,
+	step = 1,
+	value,
+	default: defaultValue,
+	disabled = false,
+	reversed = false,
+	var: varName,
+	for: forId,
+	label,
+	labelledby,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const ariaMax = max ?? value;
+
+const bindings = {
+	orientation,
+	size,
+	line,
+	value,
+	min,
+	max: ariaMax,
+	disabled,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+};
+const light = await renderFragmentLight("splitter", bindings);
+---
+
+<xtyle-splitter
+	orientation={orientation}
+	size={size}
+	line={line || undefined}
+	min={min}
+	max={max ?? undefined}
+	step={step}
+	value={value}
+	default={defaultValue ?? undefined}
+	disabled={disabled || undefined}
+	reversed={reversed || undefined}
+	var={varName}
+	for={forId}
+	label={label}
+	labelledby={labelledby}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Stack.astro

@@ -0,0 +1,42 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+interface Props {
+	gap?: number;
+	align?: StackAlign;
+	justify?: StackJustify;
+	inline?: boolean;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { gap = 4, align, justify, inline = false, static: isStatic = false, class: extra, ...rest } = Astro.props;
+
+const bindings = {
+	gap,
+	align: align ?? null,
+	justify: justify ?? null,
+	inline,
+};
+const chrome = await renderFragmentLight("stack", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-stack
+	gap={gap}
+	align={align}
+	justify={justify}
+	inline={inline || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Stat.astro

@@ -0,0 +1,70 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type StatTrend = "up" | "down" | "flat";
+type StatSentiment = "positive" | "negative" | "neutral";
+type StatAlign = "start" | "center";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	label?: string;
+	delta?: string;
+	trend?: StatTrend;
+	/** The delta's color reading. Omit to derive it from `trend` (up→positive, down→negative, flat→neutral). */
+	sentiment?: StatSentiment;
+	caption?: string;
+	size?: Size;
+	align?: StatAlign;
+	/** Lay the stat out horizontally: value, label, and trend delta on one line, like a ticker. */
+	inline?: boolean;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	label,
+	delta,
+	trend = "flat",
+	sentiment,
+	caption,
+	size = "md",
+	align = "start",
+	inline = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	label: label ?? null,
+	delta: delta ?? null,
+	trend,
+	sentiment,
+	caption: caption ?? null,
+	size,
+	align,
+	inline,
+};
+const chrome = await renderFragmentLight("stat", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-stat
+	label={label}
+	delta={delta}
+	trend={trend}
+	sentiment={sentiment}
+	caption={caption}
+	size={size}
+	align={align}
+	inline={inline || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Statusbar.astro

@@ -0,0 +1,56 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+interface Props {
+	live?: boolean;
+	label?: string;
+	overflow?: "clip" | "wrap" | "scroll" | "collapse";
+	manualOverflow?: boolean;
+	/** Draw a divider between adjacent items at the bar's own spacing — so items stay
+	 * individual (and collapse counts them independently) instead of carrying their own separators. */
+	separated?: boolean;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	live = false,
+	label,
+	overflow = "clip",
+	manualOverflow = false,
+	separated = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const elementId = `xtyle-statusbar-${Math.random().toString(36).slice(2, 8)}`;
+
+const bindings = {
+	live,
+	label: label ?? null,
+	overflow,
+	manualOverflow,
+	separated,
+	elementId,
+};
+const light = await renderFragmentLight("statusbar", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = light.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-statusbar
+	live={live || undefined}
+	label={label}
+	overflow={overflow}
+	manual-overflow={manualOverflow || undefined}
+	separated={separated || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}