@glasshome/ui 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",
@@ -78,6 +78,8 @@
 		"clsx": "^2.1.1",
 		"cva": "^1.0.0-beta.4",
 		"embla-carousel": "^8.5.1",
+		"embla-carousel-autoplay": "^8.5.1",
+		"embla-carousel-fade": "^8.5.1",
 		"solid-sonner": "^0.3.1",
 		"tailwind-merge": "^3.4.0"
 	},

package/src/astro/Carousel.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Server-rendered carousel. Slides live in the HTML, so they are indexable and
+ * the first one is the LCP image; the client script only adds behaviour.
+ * Use this on content pages; use the Solid <Carousel> inside an app.
+ *
+ * Slides go in the default slot as <CarouselItem>-shaped elements, or pass
+ * `count` to have dots rendered for you.
+ */
+import {
+	CAROUSEL_DOTS,
+	CAROUSEL_VIEWPORT,
+	type CarouselTransition,
+	carouselDot,
+	carouselTrack,
+} from "../lib/carousel-classes";
+import { cn } from "../lib/utils";
+
+interface Props {
+	transition?: CarouselTransition;
+	/** Advance every N ms. Skipped under prefers-reduced-motion. */
+	autoplay?: number;
+	loop?: boolean;
+	/** Slide count; when set, dots are rendered. */
+	count?: number;
+	class?: string;
+}
+
+const {
+	transition = "slide",
+	autoplay,
+	loop = false,
+	count,
+	class: className,
+	...rest
+} = Astro.props;
+---
+
+<div
+	data-carousel
+	data-carousel-transition={transition}
+	data-carousel-autoplay={autoplay}
+	data-carousel-loop={loop ? "" : undefined}
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...rest}
+>
+	<div data-carousel-viewport class={CAROUSEL_VIEWPORT}>
+		<div class={carouselTrack(transition)}>
+			<slot />
+		</div>
+	</div>
+
+	<slot name="controls" />
+
+	{
+		count && (
+			<div class={CAROUSEL_DOTS} data-carousel-dots>
+				{Array.from({ length: count }, (_, i) => (
+					<button
+						type="button"
+						data-carousel-dot
+						aria-label={`Go to slide ${i + 1}`}
+						aria-current={i === 0}
+						class={carouselDot(i === 0)}
+					/>
+				))}
+			</div>
+		)
+	}
+</div>
+
+<script>
+	import { initCarousels } from "../lib/carousel-init";
+
+	initCarousels();
+	document.addEventListener("astro:page-load", () => initCarousels());
+</script>

package/src/lib/carousel-classes.ts

@@ -0,0 +1,35 @@
+/* Shared by the Solid <Carousel> and astro/Carousel.astro so the two render the
+ * same markup. Astro renders slides server-side (SEO, LCP) and enhances them on
+ * the client with the same embla engine. */
+
+export type CarouselTransition = "slide" | "fade" | "wipe";
+
+export const CAROUSEL_VIEWPORT = "h-full overflow-hidden";
+
+/** Stacked modes put every slide in one grid cell; slide lays out a flex track. */
+export function carouselTrack(
+	transition: CarouselTransition,
+	orientation: "horizontal" | "vertical" = "horizontal",
+) {
+	return transition === "slide"
+		? `flex ${orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col"}`
+		: "carousel-stack";
+}
+
+export function carouselItem(
+	transition: CarouselTransition,
+	orientation: "horizontal" | "vertical" = "horizontal",
+) {
+	// Stacked slides fill their grid cell; only a flex track needs basis/gutter.
+	if (transition === "wipe") return "min-w-0 carousel-wipe";
+	if (transition === "fade") return "min-w-0";
+	return `min-w-0 shrink-0 grow-0 basis-full ${orientation === "horizontal" ? "pl-4" : "pt-4"}`;
+}
+
+export const CAROUSEL_DOTS = "flex items-center justify-center gap-2";
+
+export function carouselDot(active: boolean) {
+	return `h-1.5 rounded-full transition-all hover:bg-foreground/70 ${
+		active ? "w-6 bg-foreground/80" : "w-1.5 bg-foreground/40"
+	}`;
+}

package/src/lib/carousel-init.ts

@@ -0,0 +1,87 @@
+import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
+import { type CarouselTransition, carouselDot } from "./carousel-classes.js";
+
+/**
+ * Client enhancement for astro/Carousel.astro. The markup is already in the
+ * server HTML; this only adds behaviour, so the slides stay visible (and
+ * indexable) if the script never runs.
+ *
+ * Emits `carousel:select` with `{ index }` so a host page can sync its own
+ * chrome (labels, lightboxes) without owning the carousel.
+ */
+export function initCarousels(root: ParentNode = document) {
+	const roots = Array.from(root.querySelectorAll("[data-carousel]")) as HTMLElement[];
+	for (const el of roots) {
+		if (el.dataset.carouselReady) continue;
+		el.dataset.carouselReady = "1";
+
+		const viewport = el.querySelector("[data-carousel-viewport]") as HTMLElement | null;
+		if (!viewport) continue;
+
+		const transition = (el.dataset.carouselTransition ?? "slide") as CarouselTransition;
+		const autoplayMs = Number(el.dataset.carouselAutoplay ?? 0);
+		const loop = el.dataset.carouselLoop === "";
+		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+		const plugins = [];
+		if (transition !== "slide") plugins.push(Fade());
+		if (autoplayMs > 0 && !reduced) {
+			// Manual nav should not kill autoplay for good; hovering pauses it and
+			// leaving resumes, which is what a hero carousel wants.
+			plugins.push(
+				Autoplay({
+					delay: autoplayMs,
+					stopOnInteraction: false,
+					stopOnMouseEnter: true,
+					stopOnFocusIn: true,
+				}),
+			);
+		}
+
+		const embla = EmblaCarousel(viewport, { loop }, plugins);
+		const dots = Array.from(el.querySelectorAll("[data-carousel-dot]")) as HTMLButtonElement[];
+
+		let previous = -1;
+		const onSelect = () => {
+			const index = embla.selectedScrollSnap();
+			embla.slideNodes().forEach((node, i) => {
+				node.toggleAttribute("data-selected", i === index);
+				// The outgoing slide stays visible one layer down until the sweep lands.
+				node.toggleAttribute("data-prev", i === previous && i !== index);
+			});
+			previous = index;
+			dots.forEach((dot, i) => {
+				dot.className = carouselDot(i === index);
+				dot.setAttribute("aria-current", String(i === index));
+			});
+			el.dispatchEvent(new CustomEvent("carousel:select", { detail: { index }, bubbles: true }));
+		};
+
+		el.addEventListener("keydown", (e) => {
+			const key = (e as KeyboardEvent).key;
+			if (key !== "ArrowLeft" && key !== "ArrowRight") return;
+			e.preventDefault();
+			if (key === "ArrowLeft") embla.scrollPrev();
+			else embla.scrollNext();
+		});
+
+		// A host that covers the carousel (a lightbox) pauses it, so the slide
+		// does not change behind the overlay.
+		const autoplay = (embla.plugins() as { autoplay?: { play: () => void; stop: () => void } })
+			.autoplay;
+		el.addEventListener("carousel:pause", () => autoplay?.stop());
+		el.addEventListener("carousel:resume", () => autoplay?.play());
+
+		dots.forEach((dot, i) => {
+			dot.addEventListener("click", () => embla.scrollTo(i));
+		});
+		el.querySelector("[data-carousel-prev]")?.addEventListener("click", () => embla.scrollPrev());
+		el.querySelector("[data-carousel-next]")?.addEventListener("click", () => embla.scrollNext());
+
+		onSelect();
+		embla.on("select", onSelect);
+		embla.on("reInit", onSelect);
+	}
+}

package/src/styles/globals.css

@@ -101,6 +101,14 @@
  * mixed toward transparent-black down to mud on light surfaces. Deliberately
  * unlayered so the material owns border/background/box-shadow; tune via knobs. */
 :where(.glass) {
+	/* Descendant-readable mirror of this surface's tone. The --glass-* knobs are
+	 * @property inherits:false so a nested glass element never picks up an
+	 * ancestor's tint — correct for surfaces, but it also means a plain child
+	 * (an icon, a label) reading var(--glass-tone) silently gets `transparent`
+	 * and paints nothing. --surface-tone is an ordinary inheriting property, so
+	 * children can read it; a nested .glass re-declares it from its own knob,
+	 * which resets the chain and keeps the no-leak guarantee. */
+	--surface-tone: var(--glass-tone);
 	border: 1px solid var(--glass-edge);
 	/* Base is a gradient layer (not background-color) so the frost slice can sit
 	 * BELOW it — background-color always paints under every image layer, which
@@ -162,3 +170,54 @@
 		background: var(--muted-foreground);
 	}
 }
+
+/* Stacked carousel modes (fade, wipe) put every slide in one grid cell. This is
+ * structural, so it ships as real CSS: a Tailwind arbitrary variant written in
+ * package source never reaches a consumer, because Tailwind skips node_modules
+ * when scanning for class names. */
+.carousel-stack {
+	display: grid;
+}
+.carousel-stack > * {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+/* Carousel `wipe`: the incoming slide sweeps in diagonally over the previous
+ * one, which stays fully visible beneath until the sweep lands. Only the
+ * incoming slide animates: giving the outgoing one a matching transition makes
+ * it collapse at the same time, which reads as two wipes from opposite corners.
+ * Slides are opaque here; embla's fade plugin only stops the track translating,
+ * and its opacity would wash out the sweep. */
+.carousel-wipe {
+	/* Content choreography, not a state change: the motion scale's rungs are for
+	 * micro-interactions and are far too quick to read as a sweep. Override per
+	 * instance by setting --carousel-wipe on the carousel. */
+	--carousel-wipe: 1600ms;
+	clip-path: polygon(0 0, 300% 0, 0 300%, 0 0);
+	/* The fade plugin fades AND parks inactive slides off-screen
+	 * (transform: translate(containerWidth + 2)), on embla's own short scroll
+	 * duration. Both have to be neutralised or the sweep reveals empty space
+	 * once the outgoing slide leaves: in wipe mode clip-path is the only reveal,
+	 * and z-index alone decides what shows through. Inline styles, hence
+	 * !important. */
+	opacity: 1 !important;
+	transform: none !important;
+}
+.carousel-wipe[data-prev] {
+	z-index: 1;
+}
+.carousel-wipe[data-selected] {
+	z-index: 2;
+	animation: carousel-wipe-in var(--carousel-wipe) ease-in-out;
+}
+@keyframes carousel-wipe-in {
+	from {
+		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.carousel-wipe[data-selected] {
+		animation: none;
+	}
+}

package/src/styles/theme.css

@@ -160,6 +160,14 @@
 	--shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
 	--tracking-normal: 0em;
 	--spacing: 0.27rem;
+
+	/* Motion. Durations name the gesture, not the number: micro is a hover or
+	 * border change, state a tone or chip swap, expand an open/close. Theme
+	 * independent, so declared once; zeroed under prefers-reduced-motion. */
+	--ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
+	--duration-micro: 120ms;
+	--duration-state: 160ms;
+	--duration-expand: 200ms;
 }
 
 .dark {
@@ -418,6 +426,13 @@
 	::view-transition-new(area-title) {
 		animation: none !important;
 	}
+
+	/* Anything timed off the motion scale stops moving, no per-component opt-in. */
+	:root {
+		--duration-micro: 0ms;
+		--duration-state: 0ms;
+		--duration-expand: 0ms;
+	}
 }
 
 /* Performance: disable all backdrop-filter when reduce-blur is active */