Hover service list

Install kit: "Hover service list"
Library page: https://astro.baysixmedia.com/components/hover-service-list/
Files: 2 required, 1 supporting

Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.

===== FILE (required): src/components/HoverServiceList.astro =====
---
/**
 * HoverServiceList
 *
 * A services section: outlined eyebrow, a big uppercase heading and an intro
 * paragraph across the top; below, a tall photo carrying a frosted caption
 * with an orange rule, beside a stack of service rows. Each row has a navy
 * icon tile, an uppercase title, small tag pills and a round arrow button.
 * Hovering a row floods it orange, turns the icon tile white and the title
 * white, and tilts the arrow.
 *
 * Each row is one link (its title, stretched over the row).
 *
 * Heading syntax: wrap the orange words in asterisks.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export type HoverServiceIcon = "ship" | "truck" | "box" | "send" | "plane" | "warehouse";

export interface HoverService {
	title: string;
	href: string;
	tags?: string[];
	icon?: HoverServiceIcon;
}

export interface HoverServiceListProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	intro?: string;
	/** `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string };
	/** The frosted caption on the photo. `""` drops it. */
	caption?: string;
	services?: HoverService[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends HoverServiceListProps {}

const {
	eyebrow = "Our Services",
	heading = "",
	headingLevel = "h2",
	intro = "",
	image: imageProp,
	caption = "",
	services = [],
	background = "#ffffff",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
	class: className,
	id,
} = Astro.props;

/* No photo by default: without a `src` the design's own labelled placeholder
   stands in. Alt is decorative ("") unless supplied. */
const image = { src: imageProp?.src ?? "", alt: imageProp?.alt ?? "" };

/* Each row is one link: it needs a title and an href, or it is dropped rather
   than drawn half-empty. No rows, no section: the heading, intro and photo
   alone never render. */
const list = services
	.filter((s) => s?.title && s?.href)
	.map((s) => ({ ...s, tags: s.tags?.filter(Boolean) }));

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));

const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");

const ICONS: Record<HoverServiceIcon, string> = {
	ship: "M4 15h16l-2 5H6Z M7 15V9h10v6 M10 9V5h4v4 M3 21c1.5 0 1.5-1 3-1s1.5 1 3 1 1.5-1 3-1 1.5 1 3 1 1.5-1 3-1",
	truck: "M2 7h12v9H2Z M14 10h4l3 3v3h-7 M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
	box: "M12 3 20 7v10l-8 4-8-4V7Z M4 7l8 4 8-4 M12 11v10",
	send: "M4 4l17 8-17 8 4-8Z M8 12h13",
	plane: "M2 13l20-8-6 16-4-7Z M12 14l4-4",
	warehouse: "M3 9l9-5 9 5v11H3Z M7 20v-7h10v7 M7 16h10",
};
---

{list.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{list.length > 0 && (
<section class:list={["hsl", className]} id={id} style={`--hsl-band:${background}`} data-hsl-root>
	<div class="hsl-inner">
		<div class="hsl-head">
			{eyebrow && <p class="hsl-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="hsl-heading" data-hsl-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["hsl-w", { "hsl-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
			{intro && <p class="hsl-intro">{intro}</p>}
		</div>

		<div class="hsl-body" data-hsl-reveal="up">
			<div class="hsl-media">
				{
					image.src ? (
						<img src={image.src} alt={image.alt} width="1290" height="1116" loading="lazy" decoding="async" />
					) : (
						<div class="hsl-ph" role="img" aria-label="Image placeholder">
							<span>Image · 1290 × 1116</span>
						</div>
					)
				}
				{caption && <p class="hsl-caption">{caption}</p>}
			</div>

			<ul class="hsl-list">
				{
					list.map((s) => (
						<li class="hsl-row">
							<span class="hsl-ic" aria-hidden="true">
								<svg viewBox="0 0 24 24">
									<path d={ICONS[s.icon ?? "box"]} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
								</svg>
							</span>
							<div class="hsl-row-copy">
								<Title class="hsl-title">
									<a href={safeHref(s.href)}>{s.title}</a>
								</Title>
								{s.tags && s.tags.length > 0 && (
									<ul class="hsl-tags" aria-label="Tags">
										{s.tags.map((tag) => (
											<li>{tag}</li>
										))}
									</ul>
								)}
							</div>
							<span class="hsl-arrow" aria-hidden="true">
								<svg viewBox="0 0 24 24">
									<path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
								</svg>
							</span>
						</li>
					))
				}
			</ul>
		</div>
	</div>
</section>
)}

<style>
	.hsl {
		--hsl-navy: var(--tw-navy, #0b4654);
		--hsl-accent: var(--tw-accent, #ff6d45);
		--hsl-surface: var(--tw-surface, #f0f8fa);
		--hsl-muted: var(--tw-muted, #616161);
		--hsl-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--hsl-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--hsl-ease: cubic-bezier(0.44, 0, 0.56, 1);

		background: var(--hsl-band);
		color: var(--hsl-navy);
		font-family: var(--hsl-body);
	}

	.hsl *,
	.hsl *::before,
	.hsl *::after {
		box-sizing: border-box;
	}

	.hsl-inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.hsl-head {
		display: grid;
		gap: 18px;
		justify-items: start;
	}

	.hsl-eyebrow {
		margin: 0;
		padding: 4px 14px;
		border: 1px solid var(--hsl-accent);
		border-radius: 999px;
		color: var(--hsl-accent);
		font: 500 15px/24px var(--hsl-body);
		letter-spacing: -0.3px;
		text-transform: uppercase;
	}

	.hsl-heading {
		margin: 0;
		font: 700 28px/1.2 var(--hsl-display);
		letter-spacing: -0.56px;
		text-transform: uppercase;
	}

	.hsl-w {
		display: inline-block;
	}

	.hsl-accent {
		color: var(--hsl-accent);
	}

	.hsl-intro {
		max-width: 450px;
		margin: 0;
		font: 400 16px/25.6px var(--hsl-body);
		letter-spacing: -0.32px;
	}

	.hsl-body {
		display: grid;
		gap: 16px;
		margin-top: 40px;
	}

	.hsl-media {
		position: relative;
		min-height: 360px;
		overflow: hidden;
		border-radius: 15px;
	}

	.hsl-media img,
	.hsl-ph {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hsl-ph {
		display: grid;
		place-items: center;
		background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
		font: 500 13px/1.4 var(--hsl-body);
	}

	.hsl-caption {
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 16px;
		margin: 0;
		padding: 14px 18px 14px 36px;
		border-radius: 10px;
		background: rgb(255 255 255 / 0.1);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		color: #fff;
		font: 500 14px/1.6 var(--hsl-body);
	}

	.hsl-caption::before {
		content: "";
		position: absolute;
		left: 16px;
		top: 14px;
		bottom: 14px;
		width: 5px;
		border-radius: 3px;
		background: var(--hsl-accent);
	}

	.hsl-list {
		display: grid;
		gap: 15px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hsl-row {
		position: relative;
		display: grid;
		gap: 18px;
		padding: 24px;
		border-radius: 10px;
		background: var(--hsl-surface);
		transition: background-color 0.35s var(--hsl-ease);
	}

	.hsl-ic {
		display: grid;
		place-items: center;
		width: 58px;
		height: 58px;
		border-radius: 10px;
		background: var(--hsl-navy);
		color: var(--hsl-surface);
		transition:
			background-color 0.35s var(--hsl-ease),
			color 0.35s var(--hsl-ease);
	}

	.hsl-ic svg {
		width: 28px;
		height: 28px;
	}

	.hsl-title {
		margin: 0;
		font: 600 20px/32px var(--hsl-body);
		letter-spacing: -0.4px;
		text-transform: uppercase;
		transition: color 0.35s var(--hsl-ease);
	}

	.hsl-title a {
		color: inherit;
		text-decoration: none;
	}

	/* The title link covers the whole row. */
	.hsl-title a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: 10px;
	}

	.hsl-title a:focus-visible {
		outline: none;
	}

	.hsl-row:has(a:focus-visible) {
		outline: 2px solid var(--hsl-navy);
		outline-offset: 3px;
	}

	.hsl-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 6px 0 0;
		padding: 0;
		list-style: none;
	}

	.hsl-tags li {
		padding: 6px 10px;
		border-radius: 16px;
		background: #fff;
		color: var(--hsl-muted);
		font: 400 12px/19.2px var(--hsl-body);
		letter-spacing: -0.24px;
		text-transform: uppercase;
	}

	.hsl-arrow {
		display: grid;
		place-items: center;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #fff;
		color: var(--hsl-navy);
		transition: transform 0.35s var(--hsl-ease);
	}

	.hsl-arrow svg {
		width: 22px;
		height: 22px;
	}

	.hsl-row:hover,
	.hsl-row:has(a:focus-visible) {
		background: var(--hsl-accent);
	}

	.hsl-row:hover .hsl-ic,
	.hsl-row:has(a:focus-visible) .hsl-ic {
		background: #fff;
		color: var(--hsl-navy);
	}

	.hsl-row:hover .hsl-title,
	.hsl-row:has(a:focus-visible) .hsl-title {
		color: #fff;
	}

	.hsl-row:hover .hsl-arrow,
	.hsl-row:has(a:focus-visible) .hsl-arrow {
		transform: rotate(-45deg);
	}

	[data-hsl-reveal="up"] {
		transition:
			opacity 0.8s var(--hsl-ease),
			transform 0.8s var(--hsl-ease);
	}

	.hsl[data-hsl-ready] [data-hsl-reveal="up"]:not([data-in]) {
		opacity: 0;
		transform: translateY(80px);
	}

	.hsl-w {
		transition:
			opacity 0.6s var(--hsl-ease) calc(var(--i) * 0.06s),
			transform 0.6s var(--hsl-ease) calc(var(--i) * 0.06s);
	}

	.hsl[data-hsl-ready] [data-hsl-reveal="words"]:not([data-in]) .hsl-w {
		opacity: 0;
		transform: translateY(10px);
	}

	@media (min-width: 810px) {
		.hsl-inner {
			padding: 90px 40px;
		}

		.hsl-head {
			grid-template-columns: auto minmax(0, 1fr);
			column-gap: 40px;
		}

		.hsl-eyebrow {
			margin-top: 40px;
		}

		.hsl-heading {
			font-size: 38px;
			letter-spacing: -0.76px;
		}

		.hsl-intro {
			grid-column: 2;
		}

		.hsl-row {
			grid-template-columns: 58px minmax(0, 1fr) 50px;
			align-items: center;
			gap: 20px;
			padding: 35px 30px;
		}

		.hsl-caption {
			left: 50px;
			right: auto;
			bottom: 50px;
			max-width: 495px;
			padding: 16px 24px 16px 37px;
			font-size: 16px;
		}
	}

	@media (min-width: 1200px) {
		.hsl-inner {
			padding: 100px 65px;
		}

		.hsl-head {
			grid-template-columns: 195px 610px minmax(0, 1fr);
			column-gap: 0;
			align-items: start;
		}

		.hsl-eyebrow {
			margin: 48px 0 0 15px;
		}

		.hsl-heading {
			font-size: 50px;
			line-height: 60px;
			letter-spacing: -1px;
		}

		.hsl-intro {
			grid-column: 3;
			justify-self: end;
			margin-top: 22px;
		}

		.hsl-body {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
			margin-top: 70px;
		}

		.hsl-media {
			min-height: 558px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-hsl-reveal="up"],
		.hsl-w,
		.hsl-row,
		.hsl-ic,
		.hsl-title,
		.hsl-arrow {
			transition: none;
		}

		.hsl-row:hover .hsl-arrow,
		.hsl-row:has(a:focus-visible) .hsl-arrow {
			transform: none;
		}
	}
</style>

<script>
	/* Appear-on-scroll; one observer per instance, torn down on astro:before-swap. */
	function initHoverServiceList(root: HTMLElement) {
		if (root.dataset.hslReady === "") return;
		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
		const controller = new AbortController();
		root.dataset.hslReady = "";
		const io = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (!entry.isIntersecting) continue;
					(entry.target as HTMLElement).dataset.in = "";
					io.unobserve(entry.target);
				}
			},
			{ threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
		);
		root.querySelectorAll<HTMLElement>("[data-hsl-reveal]").forEach((t) => io.observe(t));
		controller.signal.addEventListener("abort", () => io.disconnect());
		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.hslReady;
			},
			{ once: true, signal: controller.signal },
		);
	}

	const boot = () => document.querySelectorAll<HTMLElement>("[data-hsl-root]").forEach(initHoverServiceList);

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", boot, { once: true });
	} else {
		boot();
	}

	document.addEventListener("astro:page-load", boot);
</script>

===== END src/components/HoverServiceList.astro =====

===== FILE (supporting): src/components/HoverServiceList.md =====
# Hover service list

A services section: outlined eyebrow, big uppercase heading and an intro
paragraph across the top; below, a tall photo with a frosted caption and an
orange rule, beside a stack of service rows (navy icon tile, uppercase title,
tag pills, round arrow).

Catalog page: `/components/hover-service-list`

## Files required

- **`HoverServiceList.astro`** — the component, with one small appear script.
- **`public/hover-service-list/highway-semi.webp`** — the catalog demo's photo,
  passed as a prop (not a default).
- `HoverServiceList.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow`, `heading`, `headingLevel`, `intro` | | `"Our Services"`, `""`, `"h2"`, `""` | Orange heading words in `*asterisks*`. An empty heading or intro is left out. |
| `image` | `{ src?, alt? }?` | none | No `src` → a neutral "Image · 1290 × 1116" placeholder. `alt` is `""` unless given. |
| `caption` | `string?` | `""` | Frosted caption. `""` drops it. |
| `services` | `{ title, href, tags?, icon? }[]` | `[]` | `icon`: ship, truck, box, send, plane, warehouse. A row without a `title` or `href` is dropped. With no rows the component renders nothing. The catalog demo passes its heading, intro, photo, caption and four rows as props. |
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- **Row hover (and keyboard focus):** row `#f0f8fa` → `#ff6d45`; icon tile
  `#0b4654` → `#fff` with the glyph turning navy; title → white; arrow disc
  rotates −45°. 0.35s.
- The body lifts in from 80px on first view; heading words rise from 10px.

## Accessibility

Each row is one link — the title anchor is stretched over the row — and the
row shows a navy outline when that link has keyboard focus.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `highway-semi.webp` | 1290 × 1116 | Unsplash VlAHPXYF9ok, Unsplash License |

## Approximations

- Icon glyphs are drawn, not the reference's artwork.
- The caption blur (10px) is estimated from the screenshot.

===== END src/components/HoverServiceList.md =====

===== FILE (required): public/hover-service-list/highway-semi.webp =====
[binary asset — download https://astro.baysixmedia.com/hover-service-list/highway-semi.webp and save it to public/hover-service-list/highway-semi.webp]

--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.

--- NOT PROVEN ---
- ClientRouter: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.

--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.

--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.

“Hover service list” from my Astro Component Library:
https://astro.baysixmedia.com/components/hover-service-list/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.