@xtyle/astro 0.5.0

package/src/Button.astro

@@ -0,0 +1,91 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone, ButtonAlign } from "@xtyle/core";
+
+type ButtonVariant = "solid" | "outline" | "ghost" | "subtle" | "link";
+type Size = "xs" | "sm" | "md" | "lg";
+
+interface Props {
+	variant?: ButtonVariant;
+	tone?: FullTone;
+	size?: Size;
+	align?: ButtonAlign;
+	type?: "button" | "submit" | "reset";
+	href?: string;
+	disabled?: boolean;
+	loading?: boolean;
+	block?: boolean;
+	iconOnly?: boolean;
+	pressed?: boolean;
+	selected?: 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 {
+	variant = "solid",
+	tone = "accent",
+	size = "md",
+	align = "center",
+	type = "button",
+	href,
+	disabled = false,
+	loading = false,
+	block = false,
+	iconOnly = false,
+	pressed,
+	selected,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	variant,
+	tone,
+	size,
+	align,
+	type,
+	href: href ?? null,
+	disabled,
+	loading,
+	block,
+	iconOnly,
+	pressed: pressed ?? null,
+	selected: selected ?? null,
+	ariaLabel: (rest as Record<string, unknown>)["aria-label"] ?? null,
+	ariaLabelledby: (rest as Record<string, unknown>)["aria-labelledby"] ?? null,
+};
+const chrome = await renderFragmentLight("button", bindings);
+const iconStartHtml = Astro.slots.has("icon-start") ? await Astro.slots.render("icon-start") : "";
+const labelHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const iconEndHtml = Astro.slots.has("icon-end") ? await Astro.slots.render("icon-end") : "";
+const composed = chrome
+	.replace('<slot name="icon-start"></slot>', () => iconStartHtml)
+	.replace('<slot name="icon-end"></slot>', () => iconEndHtml)
+	.replace("<slot></slot>", () => labelHtml);
+---
+
+<xtyle-button
+	variant={variant}
+	tone={tone}
+	size={size}
+	align={align}
+	type={type}
+	href={href}
+	disabled={disabled || undefined}
+	loading={loading || undefined}
+	block={block || undefined}
+	icon-only={iconOnly || undefined}
+	pressed={pressed === undefined ? undefined : String(pressed)}
+	selected={selected === undefined ? undefined : String(selected)}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Card.astro

@@ -0,0 +1,44 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+
+interface Props {
+	overlay?: boolean;
+	interactive?: boolean;
+	action?: boolean;
+	compact?: boolean;
+	tone?: Tone;
+	/** 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 { overlay = false, interactive = false, action = false, compact = false, tone, static: isStatic = false, class: extra, ...rest } =
+	Astro.props;
+
+const bindings = { overlay, interactive, action, compact, tone: tone ?? null };
+const chrome = await renderFragmentLight("card", bindings);
+const headerHtml = Astro.slots.has("header") ? await Astro.slots.render("header") : "";
+const bodyHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const footerHtml = Astro.slots.has("footer") ? await Astro.slots.render("footer") : "";
+const composed = chrome
+	.replace('<slot name="header"></slot>', () => headerHtml)
+	.replace('<slot name="footer"></slot>', () => footerHtml)
+	.replace("<slot></slot>", () => bodyHtml);
+---
+
+<xtyle-card
+	overlay={overlay || undefined}
+	interactive={interactive || undefined}
+	action={action || undefined}
+	compact={compact || undefined}
+	tone={tone}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/CardLink.astro

@@ -0,0 +1,60 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+interface Props {
+	href: string;
+	target?: string;
+	rel?: string;
+	interactive?: boolean;
+	overlay?: boolean;
+	compact?: 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 {
+	href,
+	target,
+	rel,
+	interactive = true,
+	overlay = false,
+	compact = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	href,
+	target: target ?? null,
+	rel: rel ?? null,
+	interactive,
+	overlay,
+	compact,
+};
+const chrome = await renderFragmentLight("card-link", bindings);
+const headerHtml = Astro.slots.has("header") ? await Astro.slots.render("header") : "";
+const bodyHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const footerHtml = Astro.slots.has("footer") ? await Astro.slots.render("footer") : "";
+const composed = chrome
+	.replace('<slot name="header"></slot>', () => headerHtml)
+	.replace('<slot name="footer"></slot>', () => footerHtml)
+	.replace("<slot></slot>", () => bodyHtml);
+---
+
+<xtyle-card-link
+	href={href}
+	target={target}
+	rel={rel}
+	interactive={interactive ? undefined : "false"}
+	overlay={overlay || undefined}
+	compact={compact || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Carousel.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+	label?: string;
+	autoplay?: boolean;
+	interval?: number;
+	loop?: boolean;
+	controls?: boolean;
+	dots?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	label,
+	autoplay = false,
+	interval,
+	loop = false,
+	controls = true,
+	dots = true,
+	class: extra,
+	...rest
+} = Astro.props;
+---
+
+<xtyle-carousel
+	label={label}
+	interval={interval}
+	autoplay={autoplay ? "" : undefined}
+	loop={loop ? "" : undefined}
+	controls={controls ? undefined : "false"}
+	dots={dots ? undefined : "false"}
+	class={extra}
+	{...rest}
+>
+	<slot />
+</xtyle-carousel>
+
+<script>import "@xtyle/core/elements";</script>

package/src/Checkbox.astro

@@ -0,0 +1,68 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	checked?: boolean;
+	indeterminate?: boolean;
+	disabled?: boolean;
+	size?: Size;
+	tone?: Tone;
+	name?: string;
+	value?: string;
+	label?: string;
+	labelledby?: string;
+	/** Render zero-JS: emit the declarative shadow 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 {
+	checked = false,
+	indeterminate = false,
+	disabled = false,
+	size = "md",
+	tone = "accent",
+	name,
+	value,
+	label,
+	labelledby,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	checked,
+	indeterminate,
+	disabled,
+	size,
+	tone,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+};
+const light = await renderFragmentLight("checkbox", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = light.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-checkbox
+	checked={checked || undefined}
+	indeterminate={indeterminate || undefined}
+	disabled={disabled || undefined}
+	size={size}
+	tone={tone}
+	name={name}
+	value={value}
+	label={label}
+	labelledby={labelledby}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/CheckboxGroup.astro

@@ -0,0 +1,54 @@
+---
+import { checkboxGroupMarkup, checkboxGroupHostCss } from "@xtyle/core/markup";
+import { checkboxCss } from "@xtyle/core/css";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	label?: string;
+	labelledby?: string;
+	tone?: Tone;
+	size?: Size;
+	disabled?: boolean;
+	/** Keep the heading checkbox but stop the automatic all/some/none roll-up. */
+	manual?: boolean;
+	/** Render zero-JS: emit the declarative shadow 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,
+	labelledby,
+	tone = "accent",
+	size = "md",
+	disabled = false,
+	manual = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const labelId = `xtyle-checkbox-group-${Math.random().toString(36).slice(2, 8)}-label`;
+
+const shadow = `<style>${checkboxGroupHostCss}${checkboxCss}</style>${checkboxGroupMarkup({ label, labelledby, tone, size, disabled, labelId })}`;
+---
+
+<xtyle-checkbox-group
+	label={label}
+	labelledby={labelledby}
+	tone={tone}
+	size={size}
+	disabled={disabled || undefined}
+	manual={manual || undefined}
+	class={extra}
+	{...rest}
+>
+	<template shadowrootmode="open" set:html={shadow}></template>
+	<slot />
+</xtyle-checkbox-group>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Cluster.astro

@@ -0,0 +1,46 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type ClusterAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type ClusterJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+interface Props {
+	gap?: number;
+	align?: ClusterAlign;
+	justify?: ClusterJustify;
+	nowrap?: boolean;
+	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 = 2, align, justify, nowrap = false, inline = false, static: isStatic = false, class: extra, ...rest } =
+	Astro.props;
+
+const bindings = {
+	gap,
+	align: align ?? null,
+	justify: justify ?? null,
+	nowrap,
+	inline,
+};
+const chrome = await renderFragmentLight("cluster", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-cluster
+	gap={gap}
+	align={align}
+	justify={justify}
+	nowrap={nowrap || undefined}
+	inline={inline || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Code.astro

@@ -0,0 +1,42 @@
+---
+import { plainCodeHtml, splitCodeLines, codeGutterWidth, parseLineSpec } from "@xtyle/core/markup";
+import { highlight } from "@xtyle/core/elements/code-highlight";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+interface Props {
+	lang?: string;
+	code?: string;
+	/** Warm this block's grammar eagerly in the browser and emit a `modulepreload` hint. */
+	preload?: boolean;
+	/** Render zero-JS: emit the pre-colored light-DOM markup but never load the runtime. */
+	static?: boolean;
+	/** The copy-to-clipboard button; on by default, set `false` to drop it. Inert on the `static` (zero-JS) path. */
+	copy?: boolean;
+	/** Soft-wrap long lines instead of scrolling them horizontally. Works on the zero-JS path. */
+	wrap?: boolean;
+	/** Number each line in a counter gutter. Works on the zero-JS path. */
+	lineNumbers?: boolean;
+	/** Tint chosen lines; a 1-based spec like `2`, `2,4`, or `4-6`. Works on the zero-JS path. */
+	highlight?: string;
+	/** A caption header above the block, e.g. a filename. Works on the zero-JS path. */
+	caption?: string;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { lang, code = "", preload = false, static: isStatic = false, copy = true, wrap = false, lineNumbers = false, highlight: highlightSpec, caption, class: extra, ...rest } = Astro.props;
+
+const result = await highlight(code, lang ?? null);
+const base = result.language === null ? plainCodeHtml(code) : result.html;
+const litSet = highlightSpec ? parseLineSpec(highlightSpec) : undefined;
+const split = lineNumbers || litSet ? splitCodeLines(base, litSet) : null;
+const inner = split ? split.html : base;
+const gutter = split && lineNumbers ? `--xtyle-code-gutter: ${codeGutterWidth(split.lines)}` : undefined;
+const bindings = { html: inner, language: result.language, caption: caption ?? null };
+const light = await renderFragmentLight("code", bindings);
+---
+
+<xtyle-code language={lang ?? undefined} code={code} preload={preload || undefined} copy={copy ? undefined : "false"} wrap={wrap || undefined} line-numbers={lineNumbers || undefined} highlight={highlightSpec || undefined} caption={caption || undefined} style={gutter} class={extra} set:html={light} {...rest} />
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/ColorPicker.astro

@@ -0,0 +1,184 @@
+---
+import { formatChannelValue, namedSnapLabel, PLANE_H, PLANE_W } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+import {
+	channelModels,
+	channelsOf,
+	colorFormats,
+	colorToChannels,
+	formatColor,
+	harmonySchemes,
+	hsvToRgb,
+	nearestNamedColor,
+	parseColor,
+	rgbToHsv,
+	type ChannelModel,
+	type ColorFormat,
+	type HarmonyScheme,
+} from "@xtyle/core";
+
+interface Props {
+	value?: string;
+	format?: ColorFormat;
+	modes?: string;
+	channels?: string;
+	snap?: string;
+	plane?: boolean;
+	trigger?: boolean;
+	swatches?: string;
+	harmony?: string;
+	contrastAgainst?: string;
+	alpha?: boolean;
+	disabled?: boolean;
+	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 = "#5b8cff",
+	format,
+	modes,
+	channels,
+	snap,
+	plane = false,
+	trigger = false,
+	swatches,
+	harmony,
+	contrastAgainst,
+	alpha = false,
+	disabled = false,
+	label,
+	labelledby,
+	name,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const elementId = `xtyle-color-picker-${Math.random().toString(36).slice(2, 8)}`;
+
+// Resolve the markup props exactly as the custom element's getters do, so the SSR
+// declarative shadow is byte-identical to the post-hydration client re-render.
+const resolvedModes: ColorFormat[] = modes
+	? (() => {
+			const picked = modes
+				.split(",")
+				.map((entry) => entry.trim())
+				.filter((entry): entry is ColorFormat => (colorFormats as string[]).includes(entry));
+			return picked.length ? picked : colorFormats;
+		})()
+	: colorFormats;
+const resolvedFormat: ColorFormat = format && resolvedModes.includes(format) ? format : (resolvedModes[0] ?? "hex");
+
+const channelModel: ChannelModel | null =
+	channels === undefined ? null : channels.trim() && (channelModels as string[]).includes(channels.trim()) ? (channels.trim() as ChannelModel) : "rgb";
+
+const SNAP_TARGETS = ["web-safe", "named"] as const;
+const snapTargets: string[] =
+	snap === undefined
+		? []
+		: (() => {
+				const raw = snap.trim();
+				if (!raw) return [...SNAP_TARGETS];
+				const picked = raw
+					.split(",")
+					.map((entry) => entry.trim())
+					.filter((entry) => (SNAP_TARGETS as readonly string[]).includes(entry));
+				return picked.length ? picked : [...SNAP_TARGETS];
+			})();
+
+const swatchList = swatches ? swatches.split(",").map((entry) => entry.trim()).filter(Boolean) : [];
+
+const harmonyScheme: HarmonyScheme | null = harmony && (harmonySchemes as string[]).includes(harmony) ? (harmony as HarmonyScheme) : null;
+
+const parsed = parseColor(value);
+const baseHsv = parsed ? rgbToHsv(parsed) : { h: 217, s: 0.64, v: 1 };
+const hsv = { h: baseHsv.h, s: baseHsv.s, v: baseHsv.v };
+const alphaValue = parsed && alpha ? parsed.alpha : 1;
+const currentAlpha = alpha ? alphaValue : 1;
+
+const currentHex = formatColor(hsvToRgb({ ...hsv, alpha: alphaValue }), "hex");
+const resolvedSwatches = swatchList
+	.map((entry) => {
+		const swatchColor = parseColor(entry);
+		if (!swatchColor) return null;
+		const hex = formatColor(swatchColor, "hex");
+		return { entry, hex, pressed: hex.toLowerCase() === currentHex.toLowerCase() };
+	})
+	.filter((s): s is { entry: string; hex: string; pressed: boolean } => s !== null);
+
+const resolvedChannels = channelModel
+	? (() => {
+			const defs = channelsOf(channelModel);
+			const values = colorToChannels(hsvToRgb({ ...hsv, alpha: currentAlpha }), channelModel);
+			return defs.map((def, i) => {
+				const channelValue = values[i] ?? def.min;
+				return {
+					label: def.label,
+					name: `${def.label}${def.unit ? ` (${def.unit})` : ""}`,
+					min: def.min,
+					max: def.max,
+					step: def.step,
+					value: channelValue,
+					formatted: formatChannelValue(channelValue, def),
+				};
+			});
+		})()
+	: [];
+
+const namedSnap = snapTargets.includes("named")
+	? namedSnapLabel(nearestNamedColor(hsvToRgb({ ...hsv, alpha: currentAlpha })).name)
+	: null;
+
+const bindings = {
+	disabled,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	elementId,
+	formatLabel: resolvedFormat.toUpperCase(),
+	planeEnabled: plane,
+	triggerEnabled: trigger,
+	alphaEnabled: alpha,
+	channelModelLabel: channelModel ? channelModel.toUpperCase() : null,
+	harmonyScheme,
+	hasContrast: !!(contrastAgainst && parseColor(contrastAgainst)),
+	hasEyeDropper: false,
+	planeWidth: PLANE_W,
+	planeHeight: PLANE_H,
+	swatches: resolvedSwatches,
+	channels: resolvedChannels,
+	snapTargets,
+	namedSnap,
+};
+
+const light = await renderFragmentLight("color-picker", bindings);
+---
+
+<xtyle-color-picker
+	value={value}
+	format={format}
+	modes={modes}
+	channels={channels}
+	snap={snap}
+	plane={plane || undefined}
+	trigger={trigger || undefined}
+	swatches={swatches}
+	harmony={harmony}
+	contrast-against={contrastAgainst}
+	alpha={alpha || undefined}
+	disabled={disabled || undefined}
+	label={label}
+	labelledby={labelledby}
+	name={name}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Dialog.astro

@@ -0,0 +1,69 @@
+---
+import { renderFragmentLight, composeFallbackSlot } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	open?: boolean;
+	size?: Size;
+	heading?: string;
+	label?: string;
+	labelledby?: string;
+	closeLabel?: string;
+	noCloseButton?: 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 {
+	open = false,
+	size = "md",
+	heading,
+	label,
+	labelledby,
+	closeLabel,
+	noCloseButton = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const hasHeader = Astro.slots.has("header");
+const hasFooter = Astro.slots.has("footer");
+const elementId = `xtyle-dialog-${Math.random().toString(36).slice(2, 8)}`;
+
+const bindings = {
+	size,
+	heading: heading ?? null,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	closeLabel: closeLabel ?? null,
+	noCloseButton,
+	elementId,
+};
+const light = await renderFragmentLight("dialog", bindings);
+const headerHtml = hasHeader ? await Astro.slots.render("header") : null;
+const bodyHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const footerHtml = hasFooter ? await Astro.slots.render("footer") : "";
+const composed = composeFallbackSlot(light, "header", headerHtml)
+	.replace("<slot></slot>", () => bodyHtml)
+	.replace('<slot name="footer"></slot>', () => footerHtml);
+---
+
+<xtyle-dialog
+	open={open || undefined}
+	size={size}
+	heading={heading}
+	label={label}
+	labelledby={labelledby}
+	close-label={closeLabel}
+	no-close-button={noCloseButton || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}