@xtyle/astro 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xtyle/astro",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "Zero-JS Astro components that emit semantic HTML against the xtyle component classes; the SSR binding of the component contract.",
 	"type": "module",
 	"license": "MIT",
@@ -12,7 +12,7 @@
 		"README.md"
 	],
 	"dependencies": {
-		"@xtyle/core": "^0.5.0"
+		"@xtyle/core": "^0.6.0"
 	},
 	"peerDependencies": {
 		"astro": "^6.0.0"

package/src/Card.astro

@@ -9,6 +9,8 @@ interface Props {
 	action?: boolean;
 	compact?: boolean;
 	tone?: Tone;
+	/** How far the surface lifts: `sm` a whisper, `md` the eased default, `lg` a pronounced shadow. */
+	depthStrength?: "sm" | "md" | "lg";
 	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
 	static?: boolean;
 	class?: string;
@@ -16,10 +18,10 @@ interface Props {
 	[key: string]: unknown;
 }
 
-const { overlay = false, interactive = false, action = false, compact = false, tone, static: isStatic = false, class: extra, ...rest } =
+const { overlay = false, interactive = false, action = false, compact = false, tone, depthStrength, static: isStatic = false, class: extra, ...rest } =
 	Astro.props;
 
-const bindings = { overlay, interactive, action, compact, tone: tone ?? null };
+const bindings = { overlay, interactive, action, compact, tone: tone ?? null, depthStrength: depthStrength ?? 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") : "";
@@ -36,6 +38,7 @@ const composed = chrome
 	action={action || undefined}
 	compact={compact || undefined}
 	tone={tone}
+	depth-strength={depthStrength}
 	class={extra}
 	set:html={composed}
 	{...rest}

package/src/Empty.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { class: extra, ...rest } = Astro.props;
+---
+
+<xtyle-empty class:list={["xtyle-empty", extra]} {...rest}>
+	<slot />
+</xtyle-empty>
+
+<script>
+	import "@xtyle/core/elements";
+</script>

package/src/Image.astro

@@ -4,6 +4,7 @@ import { renderFragmentLight } from "@xtyle/core/elements/ssr";
 type ImageFit = "cover" | "contain";
 type ImageRadius = "none" | "sm" | "md" | "lg";
 type ImageLoading = "lazy" | "eager";
+type ImageTrigger = "frame" | "button";
 
 interface Props {
 	src?: string;
@@ -13,6 +14,7 @@ interface Props {
 	radius?: ImageRadius;
 	loading?: ImageLoading;
 	lightbox?: boolean;
+	trigger?: ImageTrigger;
 	caption?: string;
 	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
 	static?: boolean;
@@ -29,6 +31,7 @@ const {
 	radius = "md",
 	loading = "lazy",
 	lightbox = false,
+	trigger = "frame",
 	caption,
 	static: isStatic = false,
 	class: extra,
@@ -48,6 +51,7 @@ const composed = await renderFragmentLight("image", bindings);
 	loading={loading}
 	caption={caption}
 	lightbox={lightbox ? "" : undefined}
+	trigger={trigger === "button" ? "button" : undefined}
 	class={extra}
 	set:html={composed}
 	{...rest}

package/src/Progress.astro

@@ -1,9 +1,10 @@
 ---
 import { renderFragmentLight, composeFallbackSlot } from "@xtyle/core/elements/ssr";
 
-import type { FullTone as Tone } from "@xtyle/core";
+import { rampGradientStops, type FullTone as Tone, type RampScheme } from "@xtyle/core";
 type ProgressVariant = "linear" | "circular";
 type ProgressSize = "sm" | "md" | "lg";
+type ProgressRampMode = "solid" | "gradient";
 
 interface Props {
 	variant?: ProgressVariant;
@@ -16,12 +17,22 @@ interface Props {
 	showValue?: boolean;
 	/** How `showValue` renders the readout: `percent` (33%), `value` (123), or `value-max` (123/456). */
 	valueFormat?: "percent" | "value" | "value-max";
+	/** A unit appended to the `value` / `value-max` readout (e.g. `GB`); the `percent` format ignores it. */
+	unit?: string;
 	/** 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;
+	/** Color the fill by its own value along a ramp instead of a flat `tone`: a built-in scheme
+	 * (`accent` / `thermal` / `status`) or an explicit list of stop colors. */
+	ramp?: RampScheme | string[];
+	/** How a `ramp` paints: `solid` (one sampled color, needs the runtime) or `gradient` (a pure-CSS
+	 * sweep, zero-JS, linear only). Defaults to `solid`. */
+	rampMode?: ProgressRampMode;
+	/** Flip the ramp end for end (hot-to-cold). */
+	reverse?: boolean;
 	"aria-label"?: string;
 	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
 	static?: boolean;
@@ -40,15 +51,28 @@ const {
 	indeterminate = false,
 	showValue = false,
 	valueFormat = "percent",
+	unit,
 	colorizeValue = false,
 	valuePosition = "end",
 	meter = false,
+	ramp,
+	rampMode = "solid",
+	reverse = false,
 	"aria-label": ariaLabel,
 	static: isStatic = false,
 	class: extra,
 	...rest
 } = Astro.props;
 
+// Gradient ramps are pure CSS (var()-referenced stops), so they render server-side with zero JS;
+// a solid ramp's color is sampled off the live cascade, so SSR leaves the tone and the runtime paints it.
+const gradientRamp = ramp && rampMode === "gradient" && variant !== "circular";
+const rampBindings = ramp
+	? gradientRamp
+		? { ramp: true, rampMode: "gradient", rampStops: rampGradientStops(ramp, { reverse }) }
+		: { ramp: true, rampMode: "solid" }
+	: {};
+
 const bindings = {
 	variant,
 	tone,
@@ -59,12 +83,14 @@ const bindings = {
 	indeterminate,
 	showValue,
 	valueFormat,
+	unit,
 	colorizeValue,
 	valuePosition,
 	pulse: null,
 	role: meter ? "meter" : "progressbar",
 	ariaLabel: ariaLabel ?? null,
 	ariaLabelledby: null,
+	...rampBindings,
 };
 const light = await renderFragmentLight("progress", bindings);
 const valueHtml = Astro.slots.has("value") ? await Astro.slots.render("value") : null;
@@ -84,9 +110,13 @@ const composed = composeFallbackSlot(light, "value", valueHtml) + thresholdHtml;
 	indeterminate={indeterminate || undefined}
 	show-value={showValue || undefined}
 	value-format={valueFormat !== "percent" ? valueFormat : undefined}
+	unit={unit || undefined}
 	colorize-value={colorizeValue || undefined}
 	value-position={valuePosition !== "end" ? valuePosition : undefined}
 	meter={meter || undefined}
+	ramp={ramp ? (Array.isArray(ramp) ? JSON.stringify(ramp) : ramp) : undefined}
+	ramp-mode={ramp && rampMode !== "solid" ? rampMode : undefined}
+	reverse={reverse || undefined}
 	aria-label={ariaLabel}
 	class={extra}
 	set:html={composed}

package/src/Rating.astro

@@ -0,0 +1,44 @@
+---
+interface Props {
+	value?: number;
+	max?: number;
+	size?: "sm" | "md" | "lg";
+	/** The icon to rate with: `star` (default), any functional glyph, or a mark spec (`taco--…`). */
+	icon?: string;
+	/** Read-only display (fixed, fractional). Omit for an interactive slider (focusable, click / keys). */
+	readonly?: boolean;
+	/** Snap interactive input to half steps. */
+	allowHalf?: boolean;
+	/** The series scheme a colorful mark draws its palette from. */
+	colors?: string;
+	/** Fill tone for a monochrome icon: a register hue (`accent`, `success`, `red`, …). */
+	tone?: string;
+	/** Form field name; when set, the value posts through a hidden input. */
+	name?: string;
+	/** Accessible label (also the no-JS fallback text). */
+	label?: string;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { value = 0, max = 5, size, icon, readonly, allowHalf, colors, tone, name, label, class: extra, ...rest } = Astro.props;
+---
+
+<xtyle-rating
+	value={value}
+	max={max}
+	size={size}
+	icon={icon}
+	colors={colors}
+	tone={tone}
+	name={name}
+	readonly={readonly ? "" : undefined}
+	allowhalf={allowHalf ? "" : undefined}
+	label={label}
+	class:list={["xtyle-rating", extra]}
+	{...rest}>{label ?? `${value} out of ${max} stars`}</xtyle-rating>
+
+<script>
+	import "@xtyle/core/elements";
+</script>

package/src/Steps.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+	/** Zero-based index of the current step. */
+	current?: number;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { current = 0, class: extra, ...rest } = Astro.props;
+---
+
+<xtyle-steps current={current} class:list={["xtyle-steps", extra]} {...rest}>
+	<slot />
+</xtyle-steps>
+
+<script>
+	import "@xtyle/core/elements";
+</script>

package/src/Timeline.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const { class: extra, ...rest } = Astro.props;
+---
+
+<xtyle-timeline class:list={["xtyle-timeline", extra]} {...rest}>
+	<slot />
+</xtyle-timeline>
+
+<script>
+	import "@xtyle/core/elements";
+</script>