skip link

apps/docs/src/pages/docs/elements/intersect/index.html

@@ -11,6 +11,6 @@
 	</div>
 	<div
 		data-content
-		class="bg-primary data-intersect:bg-destructive size-48 rounded-full transition duration-1000"
+		class="bg-primary data-intersect:bg-destructive size-48 rounded-full"
 	></div>
 </drab-intersect>

apps/docs/src/pages/docs/index.tsx

@@ -1,6 +1,12 @@
 import { markdownProcessor } from "@/lib/md";
 
-const docMd = import.meta.glob("./generated/classes/*", {
+const elementDoc = import.meta.glob("./generated/classes/*", {
+	query: "?raw",
+	import: "default",
+	eager: true,
+}) as Record<string, string>;
+
+const styleDoc = import.meta.glob("./styles/**/*.md", {
 	query: "?raw",
 	import: "default",
 	eager: true,
@@ -9,10 +15,11 @@ const docMd = import.meta.glob("./generated/classes/*", {
 export const Docs = async (props: { name: string; demo: string }) => {
 	const { name, demo } = props;
 
-	const md = docMd[`./generated/classes/${name}.md`];
+	const elementMd = elementDoc[`./generated/classes/${name}.md`];
+	const styleMd = styleDoc[`./styles/${name}/index.md`];
 
 	const { html } = await markdownProcessor.process(
-		`\`\`\`html\n${demo}\`\`\`\n\n${md ? "## Overview\n\n" + md : ""}`,
+		`\`\`\`html\n${demo}\`\`\`\n\n## Overview\n\n${elementMd ? elementMd : styleMd}`,
 	);
 
 	return (

apps/docs/src/pages/docs/styles/details/index.html

@@ -49,9 +49,10 @@
 </details>
 
 <style>
-	/* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Ccode%3E%3Cdetails%3E%3C/code%3E */
 	details {
-		interpolate-size: allow-keywords;
+		@media (prefers-reduced-motion: no-preference) {
+			interpolate-size: allow-keywords;
+		}
 
 		/* for safari */
 		summary::-webkit-details-marker {
@@ -60,8 +61,8 @@
 
 		&::details-content {
 			transition:
-				content-visibility 500ms allow-discrete,
-				block-size 500ms;
+				content-visibility 300ms allow-discrete,
+				block-size 300ms;
 			block-size: 0;
 			overflow-y: clip;
 		}

apps/docs/src/pages/docs/styles/details/index.md

@@ -0,0 +1,3 @@
+You can animate the `<details>` element with discrete transitions the [`interpolate-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size) property. This example was adapted from [this article](https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Ccode%3E%3Cdetails%3E%3C/code%3E) from Adam Argyle.
+
+Add the same `name` attribute to each details element if you would like to have only one open at a time. Here, `name="accordion"` is applied to each element creating an accordion component. If you are making an accordion component using a UI framework, be sure to generate a unique `name` for each component mounted on the page.

apps/docs/src/pages/docs/styles/popover/index.html

@@ -3,7 +3,7 @@
 <div
 	id="popover"
 	popover
-	class="bg-background mx-5 my-auto rounded-md border p-6 opacity-0 shadow transition-[display,opacity] transition-discrete duration-300 open:opacity-100 sm:mx-auto sm:max-w-96 starting:open:opacity-0"
+	class="bg-background mx-5 my-auto rounded-md border p-6 opacity-0 shadow transition-[display,opacity] transition-discrete duration-300 open:opacity-100 motion-reduce:duration-0 sm:mx-auto sm:max-w-96 starting:open:opacity-0"
 >
 	<div class="mb-4 flex items-center justify-between">
 		<div class="font-antique">popover</div>

apps/docs/src/pages/docs/styles/popover/index.md

@@ -0,0 +1 @@
+With [`transition behavior: allow-discrete`](https://tailwindcss.com/docs/transition-behavior#basic-example) in CSS, you can create an animated popover without JavaScript.

apps/docs/src/pages/docs/styles/skiplink/index.html

@@ -0,0 +1,10 @@
+Press
+<kbd>tab</kbd>
+to view the skip link.
+
+<a
+	class="button absolute -top-12 left-56 z-20 focus-visible:translate-y-16 motion-safe:transition-transform"
+	href="#content"
+>
+	Skip to Content
+</a>

apps/docs/src/pages/docs/styles/skiplink/index.md

@@ -0,0 +1,3 @@
+Insert a skip link after the opening `body` tag to allow keyboard users to skip directly to the main content on the page. This is useful if you have a long navigation or other elements on the page before the content starts, otherwise keyboard users have to tab through all of theses items before reading the main content.
+
+In this example, the `<a href="#content">` tag links to the `<article id="content">` element on the page.

apps/docs/src/pages/layout.tsx

@@ -1,4 +1,5 @@
 import { Nav } from "@/ui/nav";
+import { SkipLink } from "@/ui/skip-link";
 import type { Children } from "@robino/jsx";
 
 export const RootLayout = async (props: {
@@ -10,6 +11,7 @@ export const RootLayout = async (props: {
 
 	return (
 		<drab-prefetch class="contents" prerender trigger="a[href^='/']">
+			<SkipLink />
 			<header class="bg-background/50 sticky top-0 z-10 flex items-center gap-5 p-5 backdrop-blur-xs lg:hidden">
 				<Nav examples={examples} pathname={pathname} dialog />
 			</header>
@@ -21,7 +23,7 @@ export const RootLayout = async (props: {
 					</div>
 				</div>
 				<div class="w-full justify-center lg:flex">
-					<article class="max-w-[80ch] p-5">
+					<article id="content" class="max-w-[80ch] p-5">
 						{children}
 						<hr class="my-8" />
 					</article>

apps/docs/src/ui/skip-link.tsx

@@ -0,0 +1,10 @@
+export const SkipLink = () => {
+	return (
+		<a
+			class="button absolute -top-12 left-56 z-20 focus-visible:translate-y-16 motion-safe:transition-transform"
+			href="#content"
+		>
+			Skip to Content
+		</a>
+	);
+};