fluent-svelte-extra 1.0.0

package/src/lib/theme.css

@@ -0,0 +1,414 @@
+/* Global Variables */
+:root {
+	/* Accent Colors */
+	--fds-accent-light-3: 191, 98%, 80%;
+	--fds-accent-light-2: 199, 99%, 69%;
+	--fds-accent-light-1: 205, 100%, 49%;
+	--fds-accent-base: 206, 100%, 42%;
+	--fds-accent-dark-1: 209, 100%, 36%;
+	--fds-accent-dark-2: 215, 100%, 29%;
+	--fds-accent-dark-3: 226, 100%, 20%;
+
+	/* Font Families */
+	--fds-font-family-fallback: "Segoe UI", -apple-system, ui-sans-serif, system-ui,
+		BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+	--fds-font-family-text: "Segoe UI Variable Text", "Seoge UI Variable Static Text",
+		var(--fds-font-family-fallback);
+	--fds-font-family-small: "Segoe UI Variable Small", "Seoge UI Variable Static Small",
+		var(--fds-font-family-fallback);
+	--fds-font-family-display: "Segoe UI Variable Display", "Seoge UI Variable Static Display",
+		var(--fds-font-family-fallback);
+
+	/* Font Size */
+	--fds-caption-font-size: 12px;
+	--fds-body-font-size: 14px;
+	--fds-body-large-font-size: 18px;
+	--fds-subtitle-font-size: 20px;
+	--fds-title-font-size: 28px;
+	--fds-title-large-font-size: 40px;
+	--fds-display-font-size: 68px;
+
+	/* Roundness */
+	--fds-control-corner-radius: 4px;
+	--fds-overlay-corner-radius: 8px;
+
+	/* Duration */
+	--fds-control-slow-duration: 333ms;
+	--fds-control-normal-duration: 250ms;
+	--fds-control-fast-duration: 167ms;
+	/* --fds-control-fast-after-duration: 168ms; */
+	--fds-control-faster-duration: 83ms;
+
+	/* Easing */
+	--fds-control-fast-out-slow-in-easing: cubic-bezier(0, 0, 0, 1);
+
+	/* Focus Stroke */
+	--fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner),
+		0 0 0 3px var(--fds-focus-stroke-outer);
+
+	/* Acrylic */
+	--fds-acrylic-noise-asset: url("data:image/png;base64,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");
+	--fds-acrylic-blur-factor: blur(60px);
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--fds-control-slow-duration: 0ms;
+		--fds-control-normal-duration: 0ms;
+		--fds-control-fast-duration: 0ms;
+		/* --fds-control-fast-after-duration: 0ms; */
+		--fds-control-faster-duration: 0ms;
+	}
+}
+
+/* Dark Theme Colors */
+@media (prefers-color-scheme: light) {
+	:root {
+		/* Text */
+		--fds-text-primary: hsla(0, 0%, 100%, 100%);
+		--fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
+		--fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
+		--fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+		/* Accent */
+		--fds-accent-default: hsla(var(--fds-accent-light-2));
+		--fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
+		--fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
+		--fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
+
+		/* Accent Text */
+		--fds-accent-text-primary: hsl(var(--fds-accent-light-3));
+		--fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
+		--fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
+		--fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+		/* Text on Accent */
+		--fds-text-on-accent-primary: hsl(0, 0%, 0%);
+		--fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
+		--fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
+		--fds-text-on-accent-selected: hsl(0, 0%, 100%);
+
+		/* Control Fill */
+		--fds-control-fill-transparent: transparent;
+		--fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
+		--fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
+		--fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
+		--fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
+		--fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
+
+		/* Control Strong Fill */
+		--fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
+		--fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
+
+		/* Control Solid Fill */
+		--fds-control-solid-fill-default: hsl(0, 0%, 27%);
+
+		/* Control Alt Fill */
+		--fds-control-alt-fill-transparent: transparent;
+		--fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
+		--fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
+		--fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
+		--fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
+
+		/* Control on Image Fill */
+		--fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
+		--fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
+		--fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
+		--fds-control-on-image-fill-disabled: transparent;
+
+		/* Subtle Fill */
+		--fds-subtle-fill-transparent: transparent;
+		--fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
+		--fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
+		--fds-subtle-fill-disabled: transparent;
+
+		/* Control Stroke */
+		--fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
+		--fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
+
+		/* Control Strong Stroke */
+		--fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
+		--fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
+
+		/* Control Stroke on Accent */
+		--fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
+		--fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
+		--fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
+		--fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
+
+		/* Control Strong Stroke on Image */
+		--fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
+
+		/* Card Stroke */
+		--fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
+		--fds-card-stroke-default-solid: hsl(0, 0%, 11%);
+
+		/* Surface Stroke */
+		--fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
+		--fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
+
+		/* Divider Stroke */
+		--fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
+
+		/* Focus Stroke */
+		--fds-focus-stroke-outer: hsl(0, 0%, 100%);
+		--fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
+
+		/* Card Background */
+		--fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
+		--fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
+		/* --fds-card-background-tertiary: unset; */
+
+		/* Smoke Background */
+		--fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
+
+		/* Layer */
+		--fds-layer-background-default: hsla(0, 0%, 23%, 30%);
+		--fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
+
+		/* Layer on Acrylic */
+		--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
+		--fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
+
+		/* Solid Background */
+		--fds-solid-background-base: hsl(0, 0%, 13%);
+		--fds-solid-background-secondary: hsl(0, 0%, 11%);
+		--fds-solid-background-tertiary: hsl(0, 0%, 16%);
+		--fds-solid-background-quarternary: hsl(0, 0%, 17%);
+
+		/* Mica Background */
+		/* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
+
+		/* Acrylic Background */
+		--fds-acrylic-background-default: linear-gradient(
+				0deg,
+				rgb(44, 44, 44, 15%),
+				rgb(44, 44, 44, 15%)
+			),
+			rgba(44, 44, 44, 96%);
+		--fds-acrylic-background-base: linear-gradient(
+				0deg,
+				rgb(32, 32, 32, 50%),
+				rgb(32, 32, 32, 50%)
+			),
+			rgba(32, 32, 32, 96%);
+
+		/* Accent Acrylic Background */
+		/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
+		/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */
+
+		/* System */
+		--fds-system-attention: hsl(199, 100%, 69%);
+		--fds-system-success: hsl(113, 51%, 58%);
+		--fds-system-caution: hsl(54, 100%, 49%);
+		--fds-system-critical: hsl(354, 100%, 80%);
+		--fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
+
+		/* System Solid */
+		--fds-system-solid-neutral: hsl(0, 0%, 62%);
+
+		/* System Background */
+		--fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
+		--fds-system-background-success: hsl(67, 39%, 17%);
+		--fds-system-background-caution: hsl(40, 46%, 18%);
+		--fds-system-background-critical: hsl(2, 28%, 21%);
+
+		/* System Background Solid */
+		--fds-system-background-solid-attention: hsl(0, 0%, 18%);
+		--fds-system-background-solid-neutral: hsl(0, 0%, 62%);
+
+		/* Borders */
+		--fds-control-border-default: var(--fds-control-stroke-secondary)
+			var(--fds-control-stroke-default) var(--fds-control-stroke-default)
+			var(--fds-control-stroke-default);
+
+		/* Shadows */
+		--fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
+		--fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
+		--fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
+		--fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
+
+		/* Shell Shadows */
+		--fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
+			0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
+		--fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
+			0px 2px 21px hsla(0, 0%, 0%, 0.55);
+	}
+}
+
+
+/* Dark Theme Colors */
+@media (prefers-color-scheme: dark) {
+	:root {
+		/* Text */
+		--fds-text-primary: hsla(0, 0%, 100%, 100%);
+		--fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
+		--fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
+		--fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+		/* Accent */
+		--fds-accent-default: hsla(var(--fds-accent-light-2));
+		--fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
+		--fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
+		--fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
+
+		/* Accent Text */
+		--fds-accent-text-primary: hsl(var(--fds-accent-light-3));
+		--fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
+		--fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
+		--fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+		/* Text on Accent */
+		--fds-text-on-accent-primary: hsl(0, 0%, 0%);
+		--fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
+		--fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
+		--fds-text-on-accent-selected: hsl(0, 0%, 100%);
+
+		/* Control Fill */
+		--fds-control-fill-transparent: transparent;
+		--fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
+		--fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
+		--fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
+		--fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
+		--fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
+
+		/* Control Strong Fill */
+		--fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
+		--fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
+
+		/* Control Solid Fill */
+		--fds-control-solid-fill-default: hsl(0, 0%, 27%);
+
+		/* Control Alt Fill */
+		--fds-control-alt-fill-transparent: transparent;
+		--fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
+		--fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
+		--fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
+		--fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
+
+		/* Control on Image Fill */
+		--fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
+		--fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
+		--fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
+		--fds-control-on-image-fill-disabled: transparent;
+
+		/* Subtle Fill */
+		--fds-subtle-fill-transparent: transparent;
+		--fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
+		--fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
+		--fds-subtle-fill-disabled: transparent;
+
+		/* Control Stroke */
+		--fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
+		--fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
+
+		/* Control Strong Stroke */
+		--fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
+		--fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
+
+		/* Control Stroke on Accent */
+		--fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
+		--fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
+		--fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
+		--fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
+
+		/* Control Strong Stroke on Image */
+		--fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
+
+		/* Card Stroke */
+		--fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
+		--fds-card-stroke-default-solid: hsl(0, 0%, 11%);
+
+		/* Surface Stroke */
+		--fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
+		--fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
+
+		/* Divider Stroke */
+		--fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
+
+		/* Focus Stroke */
+		--fds-focus-stroke-outer: hsl(0, 0%, 100%);
+		--fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
+
+		/* Card Background */
+		--fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
+		--fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
+		/* --fds-card-background-tertiary: unset; */
+
+		/* Smoke Background */
+		--fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
+
+		/* Layer */
+		--fds-layer-background-default: hsla(0, 0%, 23%, 30%);
+		--fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
+
+		/* Layer on Acrylic */
+		--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
+		--fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
+
+		/* Solid Background */
+		--fds-solid-background-base: hsl(0, 0%, 13%);
+		--fds-solid-background-secondary: hsl(0, 0%, 11%);
+		--fds-solid-background-tertiary: hsl(0, 0%, 16%);
+		--fds-solid-background-quarternary: hsl(0, 0%, 17%);
+
+		/* Mica Background */
+		/* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
+
+		/* Acrylic Background */
+		--fds-acrylic-background-default: linear-gradient(
+				0deg,
+				rgb(44, 44, 44, 15%),
+				rgb(44, 44, 44, 15%)
+			),
+			rgba(44, 44, 44, 96%);
+		--fds-acrylic-background-base: linear-gradient(
+				0deg,
+				rgb(32, 32, 32, 50%),
+				rgb(32, 32, 32, 50%)
+			),
+			rgba(32, 32, 32, 96%);
+
+		/* Accent Acrylic Background */
+		/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
+		/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */
+
+		/* System */
+		--fds-system-attention: hsl(199, 100%, 69%);
+		--fds-system-success: hsl(113, 51%, 58%);
+		--fds-system-caution: hsl(54, 100%, 49%);
+		--fds-system-critical: hsl(354, 100%, 80%);
+		--fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
+
+		/* System Solid */
+		--fds-system-solid-neutral: hsl(0, 0%, 62%);
+
+		/* System Background */
+		--fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
+		--fds-system-background-success: hsl(67, 39%, 17%);
+		--fds-system-background-caution: hsl(40, 46%, 18%);
+		--fds-system-background-critical: hsl(2, 28%, 21%);
+
+		/* System Background Solid */
+		--fds-system-background-solid-attention: hsl(0, 0%, 18%);
+		--fds-system-background-solid-neutral: hsl(0, 0%, 62%);
+
+		/* Borders */
+		--fds-control-border-default: var(--fds-control-stroke-secondary)
+			var(--fds-control-stroke-default) var(--fds-control-stroke-default)
+			var(--fds-control-stroke-default);
+
+		/* Shadows */
+		--fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
+		--fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
+		--fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
+		--fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
+
+		/* Shell Shadows */
+		--fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
+			0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
+		--fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
+			0px 2px 21px hsla(0, 0%, 0%, 0.55);
+	}
+}

package/src/routes/__layout.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Navbar } from "$site/lib";
+	import { IconButton, Tooltip } from "$lib";
+
+	import { dev } from "$app/env";
+
+	import "$lib/theme.css";
+
+	import News from "@fluentui/svg-icons/icons/news_24_regular.svg?raw";
+	import Wrench from "@fluentui/svg-icons/icons/wrench_24_regular.svg?raw";
+
+	let items = [
+		{
+			name: "Docs",
+			href: "/docs",
+			icon: News
+		}
+	];
+
+	if (dev) {
+		items.push({
+			name: "test",
+			href: "/test",
+			icon: Wrench
+		});
+		items = items;
+	}
+</script>
+
+<Navbar {items}>
+	<Tooltip slot="buttons" placement="left" offset={8} text="View GitHub">
+		<IconButton href="https://github.com/tropix126/fluent-svelte/" rel="noreferrer noopener">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+				<path
+					fill-rule="evenodd"
+					d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+				/>
+			</svg>
+		</IconButton>
+	</Tooltip>
+</Navbar>
+<main>
+	<slot />
+</main>
+
+<style lang="scss">
+	@use "src/site/styles/global";
+</style>

package/src/routes/docs/__layout.svelte

@@ -0,0 +1,122 @@
+<script context="module" lang="ts">
+	import type { Load } from "@sveltejs/kit";
+	import { docsPages } from "$site/data/docs";
+
+	export const prerender = true;
+
+	export const load: Load = async ({ url }) => {
+		const path = url.pathname
+			.replace(/\/$/gi, "") // remove trailing slash
+			.replace("/docs", ""); // remove /docs
+
+		const currentPage = docsPages.find(p => p.path === path);
+
+		return {
+			props: {
+				currentPage
+			}
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { goto } from "$app/navigation";
+
+	import { Metadata, TreeView, Toc } from "$site/lib";
+	import { docsMap } from "$site/data/docs";
+
+	import { Button, TextBlock, AutoSuggestBox, ListItem } from "$lib";
+
+	export let currentPage: DocsMap;
+
+	let article;
+	let searchMatches = [];
+	let searchValue = "";
+	let searchSelection = 0;
+	let searchFlyoutOpen = false;
+	let searchItems = docsPages.map(page => page.name);
+
+	function handleKeyDown({ key }: KeyboardEvent) {
+		if (key === "Enter") {
+			searchValue = "";
+			goto(
+				`/docs${
+					docsPages.filter(page => searchMatches.some(match => page.name === match))[
+						searchSelection
+					].path
+				}`
+			);
+		}
+	}
+
+	function handleSelection(index) {
+		searchValue = searchItems[index];
+		searchSelection = index;
+		searchFlyoutOpen = false;
+	}
+</script>
+
+<Metadata title="Fluent Svelte - Docs - {currentPage?.name}" description="" />
+
+<main class="docs-container">
+	<div class="docs-container-inner">
+		<aside>
+			<div class="docs-search">
+				<AutoSuggestBox
+					placeholder="Search Docs"
+					on:keydown={handleKeyDown}
+					bind:open={searchFlyoutOpen}
+					bind:value={searchValue}
+					bind:selection={searchSelection}
+					bind:matches={searchMatches}
+					bind:items={searchItems}
+				>
+					<svelte:fragment slot="item-template" let:matches let:index let:id let:item>
+						<ListItem
+							on:click={() => handleSelection(index)}
+							tabindex={-1}
+							selected={searchSelection === index}
+							href="/docs{docsPages.filter(page =>
+								matches.some(match => page.name === match)
+							)[index].path}"
+							{id}
+						>
+							{item}
+							<svelte:fragment slot="icon">
+								{#if docsPages.filter( page => matches.some(match => page.name === match) )[index].name}
+									{@html docsPages.filter(page =>
+										matches.some(match => page.name === match)
+									)[index].icon}
+								{/if}
+							</svelte:fragment>
+						</ListItem>
+					</svelte:fragment>
+				</AutoSuggestBox>
+			</div>
+			<TreeView tree={docsMap} />
+		</aside>
+
+		<article class="markdown-body" bind:this={article}>
+			<header>
+				<h1 id={currentPage?.name}>{currentPage?.name}</h1>
+				<Button
+					href="https://github.com/tropix126/fluent-svelte/edit/main/src/routes/docs{currentPage?.path ||
+						'/index'}.md"
+					rel="noreferrer noopener"
+					target="_blank"
+					variant="hyperlink">Edit This Page</Button
+				>
+			</header>
+			<slot />
+		</article>
+
+		<aside>
+			<TextBlock variant="bodyStrong">On This Page</TextBlock>
+			<Toc target={article} />
+		</aside>
+	</div>
+</main>
+
+<style global lang="scss">
+	@use "src/site/styles/pages/docs";
+</style>

package/src/routes/docs/components/button.md

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Button, InfoBar } from "$lib";
+    import { Showcase, APIDocs } from "$site/lib";
+
+    import data from "$lib/Button/Button.svelte?sveld&raw";
+</script>
+
+A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.
+
+```ts
+import { Button } from "fluent-svelte";
+```
+
+<Showcase columns={3} repl="0c6ca42e2c5c4868a7a8c1a1a45759eb">
+    <Button variant="standard">Button</Button>
+    <Button variant="accent">Button</Button>
+    <Button variant="hyperlink">Button</Button>
+    <Button variant="standard" disabled>Button</Button>
+    <Button variant="accent" disabled>Button</Button>
+    <Button variant="hyperlink" disabled>Button</Button>
+</Showcase>
+
+## Usage
+
+A button can either be a clickable action or a link. By default, a button will be rendered as a standard HTML `<button>` element. If an `href` property is provided, the button will be converted into an `<a>` tag.
+
+### Styles
+
+Buttons come in three possible _variants_ - `standard`, `accent` and `hyperlink`. Variants can be specified using the `variant` property.
+
+| Variant     | Preview                                               | Usage                                                                        |
+| ----------- | ----------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `standard`  | <Button variant="standard">Standard Button</Button>   | Secondary or alternative actions that are not important to the user.         |
+| `accent`    | <Button variant="accent">Accent Button</Button>       | Actions that are important to the user, or are the primary focus a decision. |
+| `hyperlink` | <Button variant="hyperlink">Hyperlink Button</Button> | Low-emphasis, tertiary actions that link to an external resource.            |
+
+### Disabled Buttons
+
+If the button is not meant to be clicked, you can use the `disabled` property to visually indicate this. If a button is disabled, it will be unclickable and the `href` property will be ignored.
+
+## Component API
+
+<APIDocs {data} />