@xtyle/astro 0.5.0

package/src/Link.astro

@@ -0,0 +1,56 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type LinkVariant = "default" | "muted" | "quiet";
+
+interface Props {
+	variant?: LinkVariant;
+	href?: string;
+	target?: string;
+	rel?: string;
+	externalIcon?: 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 = "default",
+	href,
+	target,
+	rel,
+	externalIcon,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const isExternal = target === "_blank";
+const showExternalIcon = externalIcon ?? isExternal;
+
+const bindings = {
+	variant,
+	href: href ?? null,
+	target: target ?? null,
+	rel: rel ?? null,
+	showExternalIcon,
+};
+const chrome = await renderFragmentLight("link", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-link
+	variant={variant}
+	href={href ?? undefined}
+	target={target ?? undefined}
+	rel={rel ?? undefined}
+	external-icon={String(showExternalIcon)}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Menu.astro

@@ -0,0 +1,38 @@
+---
+import { type MenuItem } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+interface Props {
+	items?: MenuItem[];
+	label?: string;
+	open?: 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, open = false, static: isStatic = false, class: extra, ...rest } = Astro.props;
+
+const popupId = `xtyle-menu-${Math.random().toString(36).slice(2, 9)}-popup`;
+
+const bindings = {
+	items,
+	label: label ?? null,
+	open,
+	popupId,
+};
+const light = await renderFragmentLight("menu", bindings);
+---
+
+<xtyle-menu
+	items={items && items.length > 0 ? JSON.stringify(items) : undefined}
+	label={label}
+	open={open || undefined}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/NumberInput.astro

@@ -0,0 +1,86 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+	value?: number | string;
+	min?: number;
+	max?: number;
+	/** A positive number, or `"any"` for unstepped free-form entry (no snapping, no precision cap). */
+	step?: number | "any";
+	altStep?: number;
+	altDefault?: boolean;
+	modifier?: "shift" | "alt" | "ctrl" | "meta";
+	disabled?: boolean;
+	size?: Size;
+	label?: string;
+	labelledby?: string;
+	name?: string;
+	placeholder?: 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,
+	min,
+	max,
+	step,
+	altStep,
+	altDefault = false,
+	modifier,
+	disabled = false,
+	size = "md",
+	label,
+	labelledby,
+	name,
+	placeholder,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const valueStr = value === undefined || value === "" ? undefined : String(value);
+const elementId = `xtyle-number-${Math.random().toString(36).slice(2, 8)}`;
+
+const numeric = valueStr !== undefined && !Number.isNaN(Number(valueStr)) ? Number(valueStr) : (min ?? 0);
+const bindings = {
+	value: valueStr ?? "",
+	min,
+	max,
+	disabled,
+	size,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	placeholder: placeholder ?? null,
+	elementId,
+	canDec: !(disabled || (min !== undefined && numeric <= min)),
+	canInc: !(disabled || (max !== undefined && numeric >= max)),
+};
+const light = await renderFragmentLight("number-input", bindings);
+---
+
+<xtyle-number-input
+	value={valueStr}
+	min={min}
+	max={max}
+	step={step}
+	alt-step={altStep}
+	alt-default={altDefault || undefined}
+	modifier={modifier}
+	disabled={disabled || undefined}
+	size={size}
+	label={label}
+	labelledby={labelledby}
+	name={name}
+	placeholder={placeholder}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Pagination.astro

@@ -0,0 +1,53 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+import type { FullTone, Size } from "@xtyle/core";
+
+interface Props {
+	page?: number;
+	total?: number;
+	siblings?: number;
+	boundaries?: number;
+	href?: string;
+	tone?: FullTone;
+	size?: Size;
+	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 {
+	page = 1,
+	total = 1,
+	siblings = 1,
+	boundaries = 1,
+	href,
+	tone = "accent",
+	size = "md",
+	label = "Pagination",
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = { page, total, siblings, boundaries, href, tone, size, label };
+const light = await renderFragmentLight("pagination", bindings);
+---
+
+<xtyle-pagination
+	page={page}
+	total={total}
+	siblings={siblings}
+	boundaries={boundaries}
+	href={href}
+	tone={tone}
+	size={size}
+	label={label}
+	class={extra}
+	set:html={light}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Panel.astro

@@ -0,0 +1,68 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type PanelVariant = "default" | "collapsible";
+
+interface Props {
+	title?: string;
+	/** Accessible name for a panel with no visible `title` — names the region without rendering a heading. */
+	label?: string;
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+	variant?: PanelVariant;
+	open?: boolean;
+	scroll?: 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 {
+	title,
+	label,
+	level = 2,
+	variant = "default",
+	open = false,
+	scroll = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const hasActions = Astro.slots.has("actions");
+const titleId = `xtyle-panel-${Math.random().toString(36).slice(2, 9)}`;
+
+const bindings = {
+	title: title ?? null,
+	level,
+	variant,
+	open,
+	scrollable: scroll,
+	hasActions,
+	titleId,
+	label: label ?? null,
+};
+const chrome = await renderFragmentLight("panel", bindings);
+const actionsHtml = hasActions ? await Astro.slots.render("actions") : "";
+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="actions"></slot>', () => actionsHtml)
+	.replace('<slot name="footer"></slot>', () => footerHtml)
+	.replace("<slot></slot>", () => bodyHtml);
+---
+
+<xtyle-panel
+	title={title}
+	label={label}
+	level={level}
+	variant={variant}
+	open={open || undefined}
+	scroll={scroll || undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Parallax.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+	minHeight?: string;
+	amplitude?: number;
+	mode?: "scroll" | "cursor";
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { minHeight, amplitude, mode, class: extra, ...rest } = Astro.props;
+---
+
+<xtyle-parallax min-height={minHeight} amplitude={amplitude} mode={mode} class={extra} {...rest}>
+	<slot />
+</xtyle-parallax>
+
+<script>import "@xtyle/core/elements";</script>

package/src/Pie.astro

@@ -0,0 +1,65 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+import { resolveSeriesColorsFor } from "./internal/palette.ts";
+import type { PieDatum, PieScheme } from "@xtyle/core";
+
+interface Props {
+	data?: PieDatum[];
+	scheme?: PieScheme;
+	reverse?: boolean;
+	variant?: "pie" | "donut";
+	showValues?: boolean;
+	legend?: boolean;
+	size?: 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 {
+	data = [],
+	scheme = "skittles",
+	reverse = false,
+	variant = "pie",
+	showValues = false,
+	legend = true,
+	size = 200,
+	label,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const slices = data.filter((d) => Number(d.value) > 0);
+const colors = await resolveSeriesColorsFor(scheme, slices, reverse);
+const bindings = {
+	data: slices,
+	colors,
+	variant,
+	showValues,
+	legend,
+	size,
+	title: label ?? null,
+	ariaLabel: label ?? null,
+};
+const chrome = await renderFragmentLight("pie", bindings);
+---
+
+<xtyle-pie
+	data={JSON.stringify(data)}
+	scheme={Array.isArray(scheme) ? JSON.stringify(scheme) : scheme}
+	variant={variant}
+	reverse={reverse || undefined}
+	show-values={showValues || undefined}
+	legend={legend ? undefined : "false"}
+	size={size}
+	label={label}
+	class={extra}
+	set:html={chrome}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Progress.astro

@@ -0,0 +1,96 @@
+---
+import { renderFragmentLight, composeFallbackSlot } from "@xtyle/core/elements/ssr";
+
+import type { FullTone as Tone } from "@xtyle/core";
+type ProgressVariant = "linear" | "circular";
+type ProgressSize = "sm" | "md" | "lg";
+
+interface Props {
+	variant?: ProgressVariant;
+	tone?: Tone;
+	size?: ProgressSize;
+	value?: number;
+	min?: number;
+	max?: number;
+	indeterminate?: boolean;
+	showValue?: boolean;
+	/** How `showValue` renders the readout: `percent` (33%), `value` (123), or `value-max` (123/456). */
+	valueFormat?: "percent" | "value" | "value-max";
+	/** Tint the readout with the active tone instead of the muted default. */
+	colorizeValue?: boolean;
+	/** `end` (after the bar) or `inset` (centered in the track, contrast-flipping as the fill crosses). */
+	valuePosition?: "end" | "inset";
+	/** Report `role="meter"` (a capacity measurement) instead of `role="progressbar"` (a task). */
+	meter?: boolean;
+	"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 {
+	variant = "linear",
+	tone = "accent",
+	size = "md",
+	value = 0,
+	min = 0,
+	max = 100,
+	indeterminate = false,
+	showValue = false,
+	valueFormat = "percent",
+	colorizeValue = false,
+	valuePosition = "end",
+	meter = false,
+	"aria-label": ariaLabel,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	variant,
+	tone,
+	size,
+	value,
+	min,
+	max,
+	indeterminate,
+	showValue,
+	valueFormat,
+	colorizeValue,
+	valuePosition,
+	pulse: null,
+	role: meter ? "meter" : "progressbar",
+	ariaLabel: ariaLabel ?? null,
+	ariaLabelledby: null,
+};
+const light = await renderFragmentLight("progress", bindings);
+const valueHtml = Astro.slots.has("value") ? await Astro.slots.render("value") : null;
+// the default slot carries `<threshold>` config elements — re-emit them as hidden direct children
+// so the hydrating element can read `:scope > threshold` (the global sheet hides them from view)
+const thresholdHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = composeFallbackSlot(light, "value", valueHtml) + thresholdHtml;
+---
+
+<xtyle-progress
+	variant={variant}
+	tone={tone}
+	size={size}
+	value={value}
+	min={min}
+	max={max}
+	indeterminate={indeterminate || undefined}
+	show-value={showValue || undefined}
+	value-format={valueFormat !== "percent" ? valueFormat : undefined}
+	colorize-value={colorizeValue || undefined}
+	value-position={valuePosition !== "end" ? valuePosition : undefined}
+	meter={meter || undefined}
+	aria-label={ariaLabel}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Radio.astro

@@ -0,0 +1,71 @@
+---
+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;
+	name?: string;
+	value?: string;
+	checked?: boolean;
+	disabled?: boolean;
+	invalid?: boolean;
+	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 {
+	tone = "accent",
+	size = "md",
+	name,
+	value,
+	checked = false,
+	disabled = false,
+	invalid = false,
+	label,
+	labelledby,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	tone,
+	size,
+	name: name ?? null,
+	value,
+	checked,
+	disabled,
+	invalid,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+};
+const light = await renderFragmentLight("radio", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : null;
+// the label slot carries the `label` text as its fallback; a consumer's slotted label replaces it
+const composed = slotHtml !== null ? light.replace(/<slot>[\s\S]*?<\/slot>/, () => slotHtml) : light.replace(/<slot>([\s\S]*?)<\/slot>/, "$1");
+---
+
+<xtyle-radio
+	tone={tone}
+	size={size}
+	name={name}
+	value={value}
+	checked={checked || undefined}
+	disabled={disabled || undefined}
+	invalid={invalid || undefined}
+	label={label}
+	labelledby={labelledby}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/RadioGroup.astro

@@ -0,0 +1,44 @@
+---
+import { radioGroupMarkup, radioGroupHostCss } from "@xtyle/core/markup";
+import { radioCss } from "@xtyle/core/css";
+
+interface Props {
+	orientation?: "vertical" | "horizontal";
+	label?: string;
+	labelledby?: string;
+	disabled?: 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 {
+	orientation = "vertical",
+	label,
+	labelledby,
+	disabled = false,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const labelId = `xtyle-radio-group-${Math.random().toString(36).slice(2, 8)}-label`;
+
+const shadow = `<style>${radioGroupHostCss}${radioCss}</style>${radioGroupMarkup({ orientation, label, labelledby, disabled, labelId })}`;
+---
+
+<xtyle-radio-group
+	orientation={orientation}
+	label={label}
+	labelledby={labelledby}
+	disabled={disabled || undefined}
+	class={extra}
+	{...rest}
+>
+	<template shadowrootmode="open" set:html={shadow}></template>
+	<slot />
+</xtyle-radio-group>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Section.astro

@@ -0,0 +1,61 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+import type { FullTone } from "@xtyle/core";
+
+type SectionTag = "section" | "div" | "header" | "footer";
+type SectionVariant = "band" | "stage";
+type SectionTone = "plain" | "quiet" | FullTone;
+type SectionPadding = "none" | "sm" | "md" | "lg";
+
+interface Props {
+	as?: SectionTag;
+	variant?: SectionVariant;
+	tone?: SectionTone;
+	bordered?: boolean;
+	padding?: SectionPadding;
+	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 {
+	as = "section",
+	variant = "band",
+	tone = "plain",
+	bordered = false,
+	padding = "lg",
+	label,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const bindings = {
+	as,
+	variant,
+	tone,
+	bordered,
+	padding,
+	label: label ?? null,
+};
+const chrome = await renderFragmentLight("section", bindings);
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const composed = chrome.replace("<slot></slot>", () => slotHtml);
+---
+
+<xtyle-section
+	as={as}
+	variant={variant}
+	tone={tone}
+	bordered={bordered || undefined}
+	padding={padding}
+	label={label ?? undefined}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Segment.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+	/** The value this segment selects; emitted on `change` and submitted with the form. */
+	value: string;
+	/** Accessible name for the segment, since its content is markup (an icon) rather than text. */
+	label?: string;
+	disabled?: boolean;
+	/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the segment. */
+	[key: string]: unknown;
+}
+
+const { value, label, disabled = false, ...rest } = Astro.props;
+---
+
+<span slot="segment" value={value} label={label} disabled={disabled || undefined} {...rest}><slot /></span>