@xtyle/astro 0.5.0

package/src/Swatch.astro

@@ -0,0 +1,69 @@
+---
+import { formatColor, parseColor, type ColorFormat } from "@xtyle/core";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type SwatchSize = "sm" | "md" | "lg";
+
+interface Props {
+	color: string;
+	label?: string;
+	value?: string;
+	size?: SwatchSize;
+	interactive?: boolean;
+	selected?: boolean;
+	details?: 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 {
+	color,
+	label,
+	value,
+	size = "md",
+	interactive = false,
+	selected = false,
+	details = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const detailsId = `xtyle-swatch-details-${crypto.randomUUID().slice(0, 8)}`;
+
+const DETAIL_FORMATS: ColorFormat[] = ["hex", "rgb", "hsl", "oklch"];
+const rgb = details ? parseColor(color ?? "") : null;
+const showsDetails = !!rgb;
+const detailRows = rgb ? DETAIL_FORMATS.map((format) => ({ model: format, value: formatColor(rgb, format) })) : [];
+
+const bindings = {
+	color,
+	label: label ?? null,
+	value: value ?? null,
+	size,
+	interactive,
+	selected,
+	showsDetails,
+	detailRows,
+	detailsId,
+};
+const light = await renderFragmentLight("swatch", bindings);
+---
+
+<xtyle-swatch
+	color={color}
+	label={label ?? undefined}
+	value={value ?? undefined}
+	size={size}
+	interactive={interactive || undefined}
+	selected={selected || undefined}
+	details={details || undefined}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Switch.astro

@@ -0,0 +1,89 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	checked?: boolean;
+	disabled?: boolean;
+	size?: Size;
+	tone?: Tone;
+	shape?: "pill" | "square";
+	orientation?: "horizontal" | "vertical";
+	reverse?: boolean;
+	labelSide?: "start" | "end";
+	label?: string;
+	labelledby?: string;
+	onLabel?: string;
+	offLabel?: string;
+	name?: string;
+	value?: 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 {
+	checked = false,
+	disabled = false,
+	size = "md",
+	tone = "accent",
+	shape = "pill",
+	orientation = "horizontal",
+	reverse = false,
+	labelSide = "start",
+	label,
+	labelledby,
+	onLabel,
+	offLabel,
+	name,
+	value,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const elementId = `xtyle-switch-${Math.random().toString(36).slice(2, 8)}`;
+
+const bindings = {
+	checked,
+	disabled,
+	size,
+	tone,
+	shape,
+	orientation,
+	reverse,
+	labelSide,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	onLabel: onLabel ?? null,
+	offLabel: offLabel ?? null,
+	elementId,
+};
+const light = await renderFragmentLight("switch", bindings);
+---
+
+<xtyle-switch
+	checked={checked || undefined}
+	disabled={disabled || undefined}
+	size={size}
+	tone={tone}
+	shape={shape !== "pill" ? shape : undefined}
+	orientation={orientation !== "horizontal" ? orientation : undefined}
+	reverse={reverse || undefined}
+	label-side={labelSide !== "start" ? labelSide : undefined}
+	label={label}
+	labelledby={labelledby}
+	on-label={onLabel}
+	off-label={offLabel}
+	name={name}
+	value={value}
+	class={extra}
+	set:html={light}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Table.astro

@@ -0,0 +1,46 @@
+---
+type TableVariant = "default" | "striped" | "bordered";
+type TableSize = "normal" | "compact";
+
+interface Props {
+	variant?: TableVariant;
+	size?: TableSize;
+	hover?: boolean;
+	sticky?: boolean;
+	/** Cap the wrapper's height so it scrolls internally — required for `sticky` to have a scrollport to stick within. Any CSS length. */
+	maxHeight?: string;
+	ariaLabel?: string;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	variant = "default",
+	size = "normal",
+	hover = false,
+	sticky = false,
+	maxHeight,
+	ariaLabel,
+	class: extra,
+	...rest
+} = Astro.props;
+---
+
+<xtyle-table
+	variant={variant}
+	size={size}
+	hover={hover ? "" : undefined}
+	sticky={sticky ? "" : undefined}
+	max-height={maxHeight || undefined}
+	style={maxHeight ? `--xtyle-table-max-height: ${maxHeight}` : undefined}
+	aria-label={ariaLabel || undefined}
+	class:list={["xtyle-table-wrap", extra]}
+	{...rest}
+>
+	<slot />
+</xtyle-table>
+
+<script>
+	import "@xtyle/core/elements";
+</script>

package/src/Tabs.astro

@@ -0,0 +1,94 @@
+---
+import { type TabItemData } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+type TabsVariant = "underline" | "pill" | "enclosed";
+type TabsActivation = "automatic" | "manual";
+
+interface Props {
+	items?: TabItemData[];
+	variant?: TabsVariant;
+	size?: Size;
+	activation?: TabsActivation;
+	value?: string;
+	label?: string;
+	labelledby?: string;
+	/** Pin the tablist while the active panel scrolls beneath it (app-surface tabs); off for inline tabs. */
+	sticky?: boolean;
+	/** Render only the tab strip (no panel region) so the consumer owns the content; the element still
+	 * drives selection, roving focus, and a11y, and tabs omit `aria-controls` since they own no panels. */
+	tablist?: 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 {
+	items,
+	variant = "underline",
+	size = "md",
+	activation = "automatic",
+	value,
+	label,
+	labelledby,
+	sticky = false,
+	tablist = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const tabItems = items ?? [];
+const uid = `xtyle-tabs-${Math.random().toString(36).slice(2, 9)}`;
+
+const bindings = {
+	tabs: tabItems.map((item, i) => ({
+		key: item.value ?? String(i),
+		label: item.label,
+		panel: item.panel ?? "",
+		disabled: item.disabled,
+	})),
+	activeId: value ?? null,
+	variant,
+	size,
+	sticky,
+	tablist,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	uid,
+};
+// Two authoring modes. items-mode (the common case) renders the whole chrome light from `bindings`
+// and ships no children. The advanced slotted mode pairs the consumer's `slot="tab"`/`slot="panel"`
+// children by order, so they must survive *individually* (with their slot attributes) — Astro's
+// `<slot name>` passthrough keeps them intact, and the element maps them on connect.
+const useItems = tabItems.length > 0;
+const light = useItems ? await renderFragmentLight("tabs", bindings) : "";
+---
+
+{useItems ? (
+	<xtyle-tabs
+		variant={variant}
+		size={size}
+		activation={activation}
+		value={value}
+		label={label}
+		labelledby={labelledby}
+		sticky={sticky}
+		tablist={tablist || undefined}
+		items={JSON.stringify(items)}
+		class={extra}
+		set:html={light}
+		{...rest}
+	/>
+) : (
+	<xtyle-tabs variant={variant} size={size} activation={activation} value={value} label={label} labelledby={labelledby} sticky={sticky} tablist={tablist || undefined} class={extra} {...rest}>
+		<slot name="tab" />
+		<slot name="panel" />
+		<slot />
+	</xtyle-tabs>
+)}
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Text.astro

@@ -0,0 +1,54 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type TextAs = "p" | "span";
+type TextSize = "xs" | "sm" | "body" | "lg";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextLeading = "tight" | "snug" | "loose";
+type TextTone = "default" | "muted" | "subtle" | "accent";
+
+interface Props {
+	as?: TextAs;
+	size?: TextSize;
+	weight?: TextWeight;
+	leading?: TextLeading;
+	tone?: TextTone;
+	mono?: 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 {
+	as = "p",
+	size = "body",
+	weight = "normal",
+	leading = "snug",
+	tone = "default",
+	mono = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = { as, size, weight, leading, tone, mono };
+const chrome = await renderFragmentLight("text", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-text
+	as={as}
+	size={size}
+	weight={weight}
+	leading={leading}
+	tone={tone}
+	mono={mono || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Textarea.astro

@@ -0,0 +1,81 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+
+interface Props {
+	label?: string;
+	value?: string;
+	rows?: number;
+	resize?: TextareaResize;
+	placeholder?: string;
+	size?: Size;
+	name?: string;
+	invalid?: boolean;
+	error?: string;
+	disabled?: boolean;
+	required?: boolean;
+	/** Render the control in the monospace stack for code-shaped text. */
+	mono?: 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,
+	value,
+	rows = 3,
+	resize = "vertical",
+	placeholder,
+	size = "md",
+	name,
+	invalid = false,
+	error,
+	disabled = false,
+	required = false,
+	mono = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const seed = Math.random().toString(36).slice(2, 9);
+const fieldId = `xtyle-textarea-${seed}`;
+const errorId = `xtyle-textarea-error-${seed}`;
+
+const bindings = {
+	fieldId,
+	errorId,
+	label: label ?? null,
+	error: error ?? null,
+	size,
+	resize,
+	invalid,
+	mono,
+};
+const light = await renderFragmentLight("textarea", bindings);
+---
+
+<xtyle-textarea
+	label={label}
+	value={value}
+	rows={rows}
+	resize={resize}
+	placeholder={placeholder}
+	size={size}
+	name={name}
+	invalid={invalid || undefined}
+	error={error}
+	disabled={disabled || undefined}
+	required={required || undefined}
+	mono={mono || undefined}
+	class={extra}
+	set:html={light}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Toast.astro

@@ -0,0 +1,62 @@
+---
+import { renderFragmentLight, composeFallbackSlot } from "@xtyle/core/elements/ssr";
+import type { FullTone } from "@xtyle/core";
+
+type ToastSeverity = "success" | "warn" | "danger" | "info";
+type ToastVariant = "soft" | "solid";
+
+interface Props {
+	/** Color — any semantic role, accent variant, or named hue. Defaults to the severity color. */
+	tone?: FullTone;
+	/** Meaning — drives the glyph + politeness, independent of color. Omit for a color-only toast. */
+	severity?: ToastSeverity;
+	variant?: ToastVariant;
+	closable?: boolean;
+	closeLabel?: string;
+	actionLabel?: 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,
+	severity,
+	variant = "soft",
+	closable = true,
+	closeLabel,
+	actionLabel,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	tone,
+	severity,
+	variant,
+	closable,
+	closeLabel: closeLabel ?? "Dismiss",
+	actionLabel: actionLabel ?? null,
+};
+const light = await renderFragmentLight("toast", bindings);
+const iconHtml = Astro.slots.has("icon") ? await Astro.slots.render("icon") : null;
+const messageHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = composeFallbackSlot(light, "icon", iconHtml).replace("<slot></slot>", () => messageHtml);
+---
+
+<xtyle-toast
+	tone={tone}
+	severity={severity}
+	variant={variant}
+	closable={closable || undefined}
+	close-label={closeLabel}
+	action-label={actionLabel}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/ToastRegion.astro

@@ -0,0 +1,39 @@
+---
+import { toastRegionMarkup, toastRegionHostCss } from "@xtyle/core/markup";
+import { toastCss } from "@xtyle/core/css";
+
+interface Props {
+	placement?: string;
+	max?: number;
+	label?: 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 {
+	placement = "bottom-right",
+	max,
+	label,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const shadow = `<style>${toastRegionHostCss}${toastCss}</style>${toastRegionMarkup({ placement, label })}`;
+---
+
+<xtyle-toast-region
+	placement={placement}
+	max={max}
+	label={label}
+	class={extra}
+	{...rest}
+>
+	<template shadowrootmode="open" set:html={shadow}></template>
+	<slot />
+</xtyle-toast-region>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Toc.astro

@@ -0,0 +1,35 @@
+---
+import { type TocItem } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+interface Props {
+	items: TocItem[];
+	label?: string;
+	sticky?: 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 { items, label = "On this page", sticky = false, static: isStatic = false, class: extra, ...rest } = Astro.props;
+
+const bindings = {
+	items: items ?? [],
+	label,
+	sticky,
+};
+const light = await renderFragmentLight("toc", bindings);
+---
+
+<xtyle-toc
+	items={items ? JSON.stringify(items) : undefined}
+	label={label}
+	sticky={sticky || undefined}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Toolbar.astro

@@ -0,0 +1,68 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	heading?: string;
+	href?: string;
+	size?: Size;
+	landmark?: boolean;
+	sticky?: boolean;
+	bare?: 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 {
+	heading,
+	href,
+	size = "md",
+	landmark = false,
+	sticky = false,
+	bare = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const hasStart = Astro.slots.has("start");
+const hasCenter = Astro.slots.has("center");
+const hasEnd = Astro.slots.has("end");
+
+const bindings = {
+	heading: heading ?? null,
+	href: href ?? null,
+	size,
+	landmark,
+	sticky,
+	bare,
+};
+const light = await renderFragmentLight("toolbar", bindings);
+const startHtml = hasStart ? await Astro.slots.render("start") : "";
+const centerHtml = hasCenter ? await Astro.slots.render("center") : "";
+const endHtml = hasEnd ? await Astro.slots.render("end") : "";
+const defaultHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = light
+	.replace('<slot name="start"></slot>', () => startHtml)
+	.replace('<slot name="center"></slot>', () => centerHtml)
+	.replace('<slot name="end"></slot>', () => endHtml)
+	.replace("<slot></slot>", () => defaultHtml);
+---
+
+<xtyle-toolbar
+	heading={heading}
+	href={href}
+	size={size}
+	landmark={landmark || undefined}
+	sticky={sticky || undefined}
+	bare={bare || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}