chore: carbon

sites/docs/src/lib/components/docs/carbon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+</script>
+
+{#if $page.url.pathname}
+	<script
+		async
+		type="text/javascript"
+		src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=classic"
+		id="_carbonads_js"
+	></script>
+{/if}

sites/docs/src/lib/components/docs/table-of-contents.svelte

@@ -102,6 +102,6 @@
 </script>
 
 <div class="space-y-2">
-	<p class="font-medium">On This Page</p>
+	<p class="inline-flex font-medium">On This Page</p>
 	<Tree tree={filteredHeadingsList} activeItem={$activeItem} />
 </div>

sites/docs/src/routes/(app)/docs/+page.svelte

@@ -42,6 +42,15 @@
 			{#key $page.url.pathname}
 				<TableOfContents />
 			{/key}
+			<div class="z-10 pt-4">
+				<script
+					async
+					type="text/javascript"
+					src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=cover"
+					id="_carbonads_js"
+					data-id="carbon-ads"
+				></script>
+			</div>
 		</div>
 	</div>
 </main>

sites/docs/src/routes/(app)/docs/[...slug]/+page.svelte

@@ -2,18 +2,38 @@
 	import ChevronRight from "svelte-radix/ChevronRight.svelte";
 	import Code from "svelte-radix/Code.svelte";
 	import ExternalLink from "svelte-radix/ExternalLink.svelte";
+	import { onMount } from "svelte";
 	import type { PageData } from "./$types.js";
 	import { ScrollArea } from "$lib/registry/new-york/ui/scroll-area/index.js";
 	import { config } from "$lib/stores/index.js";
 	import { page } from "$app/stores";
 	import { DocsPager, TableOfContents } from "$lib/components/docs/index.js";
 	import { badgeVariants } from "$lib/registry/new-york/ui/badge/index.js";
 	import { cn } from "$lib/utils.js";
+	import { afterNavigate, beforeNavigate } from "$app/navigation";
 
 	export let data: PageData;
 	$: markdown = data.component;
 	$: doc = data.metadata;
 	$: componentSource = data.metadata.source?.replace("default", $config.style ?? "default");
+
+	let mounted = false;
+
+	beforeNavigate(() => {
+		mounted = false;
+	});
+
+	afterNavigate(() => {
+		mounted = true;
+	});
+
+	onMount(() => {
+		mounted = true;
+
+		return () => {
+			mounted = false;
+		};
+	});
 </script>
 
 <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
@@ -69,6 +89,17 @@
 			{#key $page.url.pathname}
 				<ScrollArea class="h-full">
 					<TableOfContents />
+					{#if mounted}
+						<div class="z-10 pt-4">
+							<script
+								async
+								type="text/javascript"
+								src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=cover"
+								id="_carbonads_js"
+								data-id="carbon-ads"
+							></script>
+						</div>
+					{/if}
 				</ScrollArea>
 			{/key}
 		</div>

sites/docs/src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import { Metadata } from "$lib/components/docs/index.js";
 	import { updateTheme } from "$lib/utils.js";
 	import "../styles/globals.css";
+	import "../styles/carbon.pcss";
 	import { config } from "$lib/stores/index.js";
 	import { Toaster as DefaultSonner } from "$lib/registry/default/ui/sonner/index.js";
 	import { Toaster as NYSonner } from "$lib/registry/new-york/ui/sonner/index.js";

sites/docs/src/styles/carbon.pcss

@@ -0,0 +1,37 @@
+/* Carbon Ad Styles */
+
+.carbon-responsive-wrap {
+	@apply bg-background;
+}
+
+#carbon-responsive .carbon-responsive-wrap {
+	@apply bg-background grid grid-cols-[auto_1fr] items-center gap-4 border-0 p-0 !important;
+}
+
+#carbon-responsive {
+	@apply gap-1 !important;
+}
+
+#carbonads .carbon-poweredby {
+	@apply bg-background text-muted-foreground block text-right text-[0.5em] uppercase no-underline !important;
+}
+
+#carbonads .carbon-text {
+	@apply text-muted-foreground text-sm !important;
+}
+
+/* #carbonads {
+	@apply bg-surface-50-900-token border border-surface-500/30 w-72;
+}
+#carbonads .carbon-wrap {
+	@apply grid grid-cols-[auto_1fr] gap-4;
+}
+#carbonads .carbon-text {
+	@apply text-token text-[0.775em] leading-[1.4em] opacity-75 no-underline;
+	@apply p-1;
+}
+#carbonads .carbon-poweredby {
+	@apply bg-surface-100-800-token;
+	@apply text-token text-[0.5em] opacity-50 no-underline uppercase;
+	@apply block text-right p-1;
+} */

sites/docs/static/registry/styles/default-js/card.json

@@ -5,7 +5,7 @@
 	"files": [
 		{
 			"name": "card-content.svelte",
-			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6 pt-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-description.svelte",
@@ -17,7 +17,7 @@
 		},
 		{
 			"name": "card-header.svelte",
-			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6 pb-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-title.svelte",

sites/docs/static/registry/styles/default-js/carousel.json

@@ -26,7 +26,7 @@
 		},
 		{
 			"name": "carousel.svelte",
-			"content": "<script>\n\timport { writable } from \"svelte/store\";\n\timport { onDestroy } from \"svelte\";\n\timport { setEmblaContext } from \"./context.js\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let opts = {};\n\texport let plugins = [];\n\texport let api = undefined;\n\texport let orientation = \"horizontal\";\n\tlet className = undefined;\n\texport { className as class };\n\tconst apiStore = writable(undefined);\n\tconst orientationStore = writable(orientation);\n\tconst canScrollPrev = writable(false);\n\tconst canScrollNext = writable(false);\n\tconst optionsStore = writable(opts);\n\tconst pluginStore = writable(plugins);\n\tconst scrollSnapsStore = writable([]);\n\tconst selectedIndexStore = writable(0);\n\t$: orientationStore.set(orientation);\n\t$: pluginStore.set(plugins);\n\t$: optionsStore.set(opts);\n\tfunction scrollPrev() {\n\t\tapi?.scrollPrev();\n\t}\n\tfunction scrollNext() {\n\t\tapi?.scrollNext();\n\t}\n\tfunction scrollTo(index, jump) {\n\t\tapi?.scrollTo(index, jump);\n\t}\n\tfunction onSelect(api2) {\n\t\tif (!api2) return;\n\t\tcanScrollPrev.set(api2.canScrollPrev());\n\t\tcanScrollNext.set(api2.canScrollNext());\n\t}\n\t$: if (api) {\n\t\tonSelect(api);\n\t\tapi.on(\"select\", onSelect);\n\t\tapi.on(\"reInit\", onSelect);\n\t}\n\tfunction handleKeyDown(e) {\n\t\tif (e.key === \"ArrowLeft\") {\n\t\t\te.preventDefault();\n\t\t\tscrollPrev();\n\t\t} else if (e.key === \"ArrowRight\") {\n\t\t\te.preventDefault();\n\t\t\tscrollNext();\n\t\t}\n\t}\n\tsetEmblaContext({\n\t\tapi: apiStore,\n\t\tscrollPrev,\n\t\tscrollNext,\n\t\torientation: orientationStore,\n\t\tcanScrollNext,\n\t\tcanScrollPrev,\n\t\thandleKeyDown,\n\t\toptions: optionsStore,\n\t\tplugins: pluginStore,\n\t\tonInit,\n\t\tscrollSnaps: scrollSnapsStore,\n\t\tselectedIndex: selectedIndexStore,\n\t\tscrollTo,\n\t});\n\tfunction onInit(event) {\n\t\tapi = event.detail;\n\t\tapiStore.set(api);\n\t\tscrollSnapsStore.set(api.scrollSnapList());\n\t}\n\tonDestroy(() => {\n\t\tapi?.off(\"select\", onSelect);\n\t});\n</script>\n\n<div\n\tclass={cn(\"relative\", className)}\n\ton:mouseenter\n\ton:mouseleave\n\trole=\"region\"\n\taria-roledescription=\"carousel\"\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
+			"content": "<script>\n\timport { writable } from \"svelte/store\";\n\timport { onDestroy } from \"svelte\";\n\timport { setEmblaContext } from \"./context.js\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let opts = {};\n\texport let plugins = [];\n\texport let api = undefined;\n\texport let orientation = \"horizontal\";\n\tlet className = undefined;\n\texport { className as class };\n\tconst apiStore = writable(undefined);\n\tconst orientationStore = writable(orientation);\n\tconst canScrollPrev = writable(false);\n\tconst canScrollNext = writable(false);\n\tconst optionsStore = writable(opts);\n\tconst pluginStore = writable(plugins);\n\tconst scrollSnapsStore = writable([]);\n\tconst selectedIndexStore = writable(0);\n\t$: orientationStore.set(orientation);\n\t$: pluginStore.set(plugins);\n\t$: optionsStore.set(opts);\n\tfunction scrollPrev() {\n\t\tapi?.scrollPrev();\n\t}\n\tfunction scrollNext() {\n\t\tapi?.scrollNext();\n\t}\n\tfunction scrollTo(index, jump) {\n\t\tapi?.scrollTo(index, jump);\n\t}\n\tfunction onSelect(api2) {\n\t\tif (!api2) return;\n\t\tcanScrollPrev.set(api2.canScrollPrev());\n\t\tcanScrollNext.set(api2.canScrollNext());\n\t\tselectedIndexStore.set(api2.selectedScrollSnap());\n\t}\n\t$: if (api) {\n\t\tonSelect(api);\n\t\tapi.on(\"select\", onSelect);\n\t\tapi.on(\"reInit\", onSelect);\n\t}\n\tfunction handleKeyDown(e) {\n\t\tif (e.key === \"ArrowLeft\") {\n\t\t\te.preventDefault();\n\t\t\tscrollPrev();\n\t\t} else if (e.key === \"ArrowRight\") {\n\t\t\te.preventDefault();\n\t\t\tscrollNext();\n\t\t}\n\t}\n\tsetEmblaContext({\n\t\tapi: apiStore,\n\t\tscrollPrev,\n\t\tscrollNext,\n\t\torientation: orientationStore,\n\t\tcanScrollNext,\n\t\tcanScrollPrev,\n\t\thandleKeyDown,\n\t\toptions: optionsStore,\n\t\tplugins: pluginStore,\n\t\tonInit,\n\t\tscrollSnaps: scrollSnapsStore,\n\t\tselectedIndex: selectedIndexStore,\n\t\tscrollTo,\n\t});\n\tfunction onInit(event) {\n\t\tapi = event.detail;\n\t\tapiStore.set(api);\n\t\tscrollSnapsStore.set(api.scrollSnapList());\n\t}\n\tonDestroy(() => {\n\t\tapi?.off(\"select\", onSelect);\n\t});\n</script>\n\n<div\n\tclass={cn(\"relative\", className)}\n\ton:mouseenter\n\ton:mouseleave\n\trole=\"region\"\n\taria-roledescription=\"carousel\"\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "context.js",

sites/docs/static/registry/styles/default/card.json

@@ -5,7 +5,7 @@
 	"files": [
 		{
 			"name": "card-content.svelte",
-			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6 pt-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-description.svelte",
@@ -17,7 +17,7 @@
 		},
 		{
 			"name": "card-header.svelte",
-			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLDivElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6 pb-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-title.svelte",

sites/docs/static/registry/styles/default/carousel.json

@@ -26,7 +26,7 @@
 		},
 		{
 			"name": "carousel.svelte",
-			"content": "<script lang=\"ts\">\n\timport { writable } from \"svelte/store\";\n\timport { onDestroy } from \"svelte\";\n\timport { type CarouselAPI, type CarouselProps, setEmblaContext } from \"./context.js\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = CarouselProps;\n\n\texport let opts = {};\n\texport let plugins: NonNullable<$$Props[\"plugins\"]> = [];\n\texport let api: $$Props[\"api\"] = undefined;\n\texport let orientation: NonNullable<$$Props[\"orientation\"]> = \"horizontal\";\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n\n\tconst apiStore = writable<CarouselAPI | undefined>(undefined);\n\tconst orientationStore = writable(orientation);\n\tconst canScrollPrev = writable(false);\n\tconst canScrollNext = writable(false);\n\tconst optionsStore = writable(opts);\n\tconst pluginStore = writable(plugins);\n\tconst scrollSnapsStore = writable<number[]>([]);\n\tconst selectedIndexStore = writable(0);\n\n\t$: orientationStore.set(orientation);\n\t$: pluginStore.set(plugins);\n\t$: optionsStore.set(opts);\n\n\tfunction scrollPrev() {\n\t\tapi?.scrollPrev();\n\t}\n\tfunction scrollNext() {\n\t\tapi?.scrollNext();\n\t}\n\tfunction scrollTo(index: number, jump?: boolean) {\n\t\tapi?.scrollTo(index, jump);\n\t}\n\n\tfunction onSelect(api: CarouselAPI) {\n\t\tif (!api) return;\n\t\tcanScrollPrev.set(api.canScrollPrev());\n\t\tcanScrollNext.set(api.canScrollNext());\n\t}\n\n\t$: if (api) {\n\t\tonSelect(api);\n\t\tapi.on(\"select\", onSelect);\n\t\tapi.on(\"reInit\", onSelect);\n\t}\n\n\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\tif (e.key === \"ArrowLeft\") {\n\t\t\te.preventDefault();\n\t\t\tscrollPrev();\n\t\t} else if (e.key === \"ArrowRight\") {\n\t\t\te.preventDefault();\n\t\t\tscrollNext();\n\t\t}\n\t}\n\n\tsetEmblaContext({\n\t\tapi: apiStore,\n\t\tscrollPrev,\n\t\tscrollNext,\n\t\torientation: orientationStore,\n\t\tcanScrollNext,\n\t\tcanScrollPrev,\n\t\thandleKeyDown,\n\t\toptions: optionsStore,\n\t\tplugins: pluginStore,\n\t\tonInit,\n\t\tscrollSnaps: scrollSnapsStore,\n\t\tselectedIndex: selectedIndexStore,\n\t\tscrollTo,\n\t});\n\n\tfunction onInit(event: CustomEvent<CarouselAPI>) {\n\t\tapi = event.detail;\n\t\tapiStore.set(api);\n\t\tscrollSnapsStore.set(api.scrollSnapList());\n\t}\n\n\tonDestroy(() => {\n\t\tapi?.off(\"select\", onSelect);\n\t});\n</script>\n\n<div\n\tclass={cn(\"relative\", className)}\n\ton:mouseenter\n\ton:mouseleave\n\trole=\"region\"\n\taria-roledescription=\"carousel\"\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
+			"content": "<script lang=\"ts\">\n\timport { writable } from \"svelte/store\";\n\timport { onDestroy } from \"svelte\";\n\timport { type CarouselAPI, type CarouselProps, setEmblaContext } from \"./context.js\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = CarouselProps;\n\n\texport let opts = {};\n\texport let plugins: NonNullable<$$Props[\"plugins\"]> = [];\n\texport let api: $$Props[\"api\"] = undefined;\n\texport let orientation: NonNullable<$$Props[\"orientation\"]> = \"horizontal\";\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n\n\tconst apiStore = writable<CarouselAPI | undefined>(undefined);\n\tconst orientationStore = writable(orientation);\n\tconst canScrollPrev = writable(false);\n\tconst canScrollNext = writable(false);\n\tconst optionsStore = writable(opts);\n\tconst pluginStore = writable(plugins);\n\tconst scrollSnapsStore = writable<number[]>([]);\n\tconst selectedIndexStore = writable(0);\n\n\t$: orientationStore.set(orientation);\n\t$: pluginStore.set(plugins);\n\t$: optionsStore.set(opts);\n\n\tfunction scrollPrev() {\n\t\tapi?.scrollPrev();\n\t}\n\tfunction scrollNext() {\n\t\tapi?.scrollNext();\n\t}\n\tfunction scrollTo(index: number, jump?: boolean) {\n\t\tapi?.scrollTo(index, jump);\n\t}\n\n\tfunction onSelect(api: CarouselAPI) {\n\t\tif (!api) return;\n\t\tcanScrollPrev.set(api.canScrollPrev());\n\t\tcanScrollNext.set(api.canScrollNext());\n\t\tselectedIndexStore.set(api.selectedScrollSnap());\n\t}\n\n\t$: if (api) {\n\t\tonSelect(api);\n\t\tapi.on(\"select\", onSelect);\n\t\tapi.on(\"reInit\", onSelect);\n\t}\n\n\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\tif (e.key === \"ArrowLeft\") {\n\t\t\te.preventDefault();\n\t\t\tscrollPrev();\n\t\t} else if (e.key === \"ArrowRight\") {\n\t\t\te.preventDefault();\n\t\t\tscrollNext();\n\t\t}\n\t}\n\n\tsetEmblaContext({\n\t\tapi: apiStore,\n\t\tscrollPrev,\n\t\tscrollNext,\n\t\torientation: orientationStore,\n\t\tcanScrollNext,\n\t\tcanScrollPrev,\n\t\thandleKeyDown,\n\t\toptions: optionsStore,\n\t\tplugins: pluginStore,\n\t\tonInit,\n\t\tscrollSnaps: scrollSnapsStore,\n\t\tselectedIndex: selectedIndexStore,\n\t\tscrollTo,\n\t});\n\n\tfunction onInit(event: CustomEvent<CarouselAPI>) {\n\t\tapi = event.detail;\n\t\tapiStore.set(api);\n\t\tscrollSnapsStore.set(api.scrollSnapList());\n\t}\n\n\tonDestroy(() => {\n\t\tapi?.off(\"select\", onSelect);\n\t});\n</script>\n\n<div\n\tclass={cn(\"relative\", className)}\n\ton:mouseenter\n\ton:mouseleave\n\trole=\"region\"\n\taria-roledescription=\"carousel\"\n\t{...$$restProps}\n>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "context.ts",

sites/docs/static/registry/styles/new-york-js/card.json

@@ -5,7 +5,7 @@
 	"files": [
 		{
 			"name": "card-content.svelte",
-			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6 pt-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-description.svelte",
@@ -17,7 +17,7 @@
 		},
 		{
 			"name": "card-header.svelte",
-			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<div class={cn(\"flex flex-col space-y-1.5 p-6 pb-0\", className)} {...$$restProps}>\n\t<slot />\n</div>\n"
 		},
 		{
 			"name": "card-title.svelte",