fluent-svelte-extra 1.0.0

package/src/site/lib/Navbar/Navbar.scss

@@ -0,0 +1,92 @@
+@use "src/lib/mixins" as *;
+
+.navbar {
+	@include flex($align: center, $justify: center);
+	position: fixed;
+	transform: translateY(0.001px);
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	z-index: 1000;
+	inline-size: 100%;
+	min-block-size: 56px;
+	box-sizing: border-box;
+	border-bottom: 1px solid var(--surface-stroke-flyout);
+	background-color: var(--layer-background-default);
+	background-clip: padding-box;
+	backdrop-filter: blur(60px);
+	&-inner {
+		@include flex($align: center);
+		inline-size: 100%;
+		max-inline-size: 1440px;
+		padding-inline: 18px 12px;
+		margin: 0 auto;
+	}
+	a:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-stroke);
+	}
+	nav {
+		@include flex($align: center, $justify: end, $gap: 12px);
+		flex: 1 1 auto;
+		padding: 0 16px;
+		a {
+			@include flex($align: center, $justify: center);
+			border-radius: var(--control-corner-radius);
+			position: relative;
+			text-decoration: none;
+			color: var(--text-primary);
+			transition: var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
+			padding: 5px 11px;
+			&:hover,
+			&.selected {
+				background-color: var(--subtle-fill-secondary);
+			}
+			&:active {
+				background-color: var(--subtle-fill-tertiary);
+			}
+			&.selected {
+				color: var(--accent-text-primary);
+			}
+			> :global(svg) {
+				@include icon($size: calc(var(--body-font-size) + 2px));
+				margin-right: 8px;
+			}
+		}
+	}
+}
+
+.logo,
+.buttons {
+	flex: 0 0 auto;
+}
+
+.logo {
+	@include flex($justify: center, $align: center);
+	text-decoration: none;
+	position: relative;
+	color: var(--text-primary);
+	transition: var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
+	font: {
+		family: var(--fds-font-family-display);
+		size: 20px;
+		weight: 600;
+	}
+	&:hover {
+		color: var(--text-secondary);
+	}
+	> img {
+		margin-inline-end: 14px;
+		width: auto;
+		height: 32px;
+	}
+	:global(.text-block) {
+		color: var(--text-secondary);
+		margin-inline-start: 6px;
+		position: relative;
+		top: 1px;
+	}
+}
+
+.buttons {
+	@include flex($align: center, $gap: 8px);
+}

package/src/site/lib/Navbar/Navbar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { TextBlock } from "$lib";
+
+	interface Item {
+		href: string;
+		name: string;
+		icon?: string;
+	}
+
+	export let items: Item[];
+</script>
+
+<header class="navbar">
+	<div class="navbar-inner">
+		<a class="logo" href="/">
+			<img src="/logo.svg" width="32" height="32" alt="Fluent Svelte logo" />
+			Fluent Svelte <TextBlock variant="caption">ALPHA</TextBlock>
+		</a>
+		<nav>
+			{#each items as { href, name, icon }}
+				<a
+					{href}
+					sveltekit:prefetch
+					class:selected={$page.url.pathname === href ||
+						($page.url.pathname.split("/").length > 1 &&
+							href.split("/").length > 1 &&
+							$page.url.pathname.startsWith(href) &&
+							!(href === "" || href === "/")) ||
+						(href === "/" && $page.url.pathname === "")}
+				>
+					{#if icon}
+						{@html icon}
+					{/if}
+					<TextBlock>{name}</TextBlock>
+				</a>
+			{/each}
+		</nav>
+		<div class="buttons">
+			<slot name="buttons" />
+		</div>
+	</div>
+</header>
+
+<style lang="scss">
+	@use "./Navbar";
+</style>

package/src/site/lib/PageSection/PageSection.scss

@@ -0,0 +1,57 @@
+@use "src/lib/mixins" as *;
+
+.page-section {
+	&-inner {
+		margin: 0 auto;
+		width: 100%;
+		max-width: 1440px;
+		padding: 72px;
+	}
+	:global {
+		h1,
+		h2,
+		h3 {
+			margin: 0;
+			font-family: var(--font-family-display);
+			color: var(--text-primary);
+			font-weight: 600;
+			line-height: normal;
+		}
+
+		h1 {
+			font-size: 7.2rem;
+		}
+
+		h2 {
+			font-size: 4.8rem;
+		}
+
+		h3 {
+			font-size: 3.2rem;
+		}
+
+		p:not([class]) {
+			max-width: 65ch;
+			margin-block: 12px 24px;
+			color: var(--text-secondary);
+			font: {
+				size: 1.6rem;
+				weight: 400;
+			}
+			line-height: 1.65;
+			@media (prefers-color-scheme: dark) {
+				color: var(--text-tertiary);
+			}
+		}
+
+		hr:not([class]) {
+			margin: 0 0 24px;
+			border: none;
+			border-block-start: 1px solid var(--divider-default);
+		}
+
+		.buttons-spacer {
+			@include flex($inline: true, $wrap: true, $gap: 8px);
+		}
+	}
+}

package/src/site/lib/PageSection/PageSection.svelte

@@ -0,0 +1,10 @@
+<section class="page-section" {...$$restProps}>
+	<div class="page-section-inner">
+		<slot />
+	</div>
+	<slot name="outer" />
+</section>
+
+<style lang="scss">
+	@use "./PageSection";
+</style>

package/src/site/lib/Showcase/Showcase.scss

@@ -0,0 +1,53 @@
+@use "src/lib/mixins" as *;
+
+.component-showcase {
+	position: relative;
+	overflow: hidden;
+	outline: none;
+	contain: layout;
+	min-block-size: 240px;
+	inline-size: 100%;
+	border-radius: var(--overlay-corner-radius);
+	background-clip: padding-box;
+	background-color: var(--card-background-default);
+	border: 1px solid var(--card-stroke-default);
+	box-shadow: var(--card-shadow);
+	padding: 24px;
+	z-index: 1;
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+	&-grid {
+		margin: 24px;
+		position: relative;
+		display: grid;
+		place-items: center;
+		grid-gap: 12px;
+	}
+	&-backdrop,
+	&-inner {
+		@include flex($align: center, $justify: center);
+		position: absolute;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+	&-backdrop {
+		z-index: -1;
+		transform: translate(-50%, -50%);
+		block-size: 600%;
+		inline-size: 600%;
+	}
+	&-buttons {
+		position: absolute;
+		inset-inline-end: 12px;
+		inset-block-end: 12px;
+	}
+	:global {
+		.info-bar {
+			inline-size: 100%;
+			margin-block-end: 0;
+		}
+	}
+}

package/src/site/lib/Showcase/Showcase.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { IconButton, Tooltip } from "$lib";
+
+	import _panzoom from "panzoom";
+	import type { PanZoomOptions } from "panzoom";
+
+	import Edit from "@fluentui/svg-icons/icons/edit_16_regular.svg?raw";
+
+	export let columns = 1;
+
+	export let columnWidth = "1fr";
+
+	export let repl = "";
+
+	let className = "";
+	export { className as class };
+
+	function panzoom(node: HTMLElement, options?: PanZoomOptions) {
+		_panzoom(node, options);
+	}
+</script>
+
+<div class="component-showcase {className}" {...$$restProps}>
+	<div use:panzoom={{ minZoom: 0.5, maxZoom: 10, bounds: true }} class="component-showcase-inner">
+		<div
+			class="component-showcase-grid"
+			style="grid-template-columns: {`${columnWidth} `.repeat(columns)}"
+		>
+			<slot />
+		</div>
+		<svg class="component-showcase-backdrop">
+			<pattern
+				id="pattern-14333"
+				x="5.800038310074086"
+				y="6.229276141719765"
+				width="11.17258097342026"
+				height="11.17258097342026"
+				patternUnits="userSpaceOnUse"
+			>
+				<circle
+					cx="0.2979354926245403"
+					cy="0.2979354926245403"
+					r="0.2979354926245403"
+					fill="var(--fds-text-disabled)"
+				/>
+			</pattern>
+			<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-14333)" />
+		</svg>
+	</div>
+	<div class="component-showcase-buttons">
+		{#if repl}
+			<Tooltip text="Edit in Svelte REPL" offset={8} placement="left">
+				<IconButton
+					href="https://svelte.dev/repl/{repl}"
+					target="blank"
+					rel="noreferrer noopener"
+				>
+					{@html Edit}
+				</IconButton>
+			</Tooltip>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@use "./Showcase";
+</style>

package/src/site/lib/Toc/Toc.scss

@@ -0,0 +1,18 @@
+.table-of-contents {
+	li {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		margin-left: calc(12px * var(--depth));
+	}
+	:global(.list-item) {
+		margin-inline: 0;
+		inline-size: 100%;
+		block-size: 28px;
+		:global(.text-block) {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}

package/src/site/lib/Toc/Toc.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	import { ListItem } from "$lib";
+	import { page } from "$app/stores";
+
+	export let target: HTMLElement;
+
+	let headings: HTMLHeadingElement[] = [];
+	let activeHeading: HTMLHeadingElement;
+
+	$: $page,
+		(headings =
+			target &&
+			Array.from(target.querySelectorAll("h1, h2, h3")).filter(
+				node => !node.closest(".component-showcase-grid, .markdown-body > table")
+			));
+
+	function handleScroll() {
+		if (headings)
+			activeHeading = [...headings]
+				.reverse()
+				.find(heading => heading.offsetTop <= window.scrollY);
+	}
+
+	function handleClick(event, index: number, id: string) {
+		if (id) history.pushState({}, "", `#${id}`);
+
+		window.scrollTo({
+			top: headings[index].offsetTop + 1,
+			behavior: "smooth"
+		});
+	}
+
+	onMount(() => {
+		window.addEventListener("scroll", handleScroll);
+	});
+</script>
+
+{#if target}
+	{#key $page}
+		<nav class="table-of-contents">
+			{#each headings as { tagName, innerText, id }, i}
+				<li style="--fds-depth: {+tagName[1] - 1};">
+					<ListItem
+						on:click={e => handleClick(e, i, id)}
+						selected={activeHeading === headings[i]}
+					>
+						{innerText}
+					</ListItem>
+				</li>
+			{/each}
+		</nav>
+	{/key}
+{/if}
+
+<style lang="scss">
+	@use "./Toc";
+</style>

package/src/site/lib/TreeView/TreeView.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { page } from "$app/stores";
+
+	import { ListItem, TextBlock } from "$lib";
+
+	export let tree = [];
+	export let __depth = 0;
+
+	let treeViewState: any;
+
+	onMount(() => {
+		// Check localStorage for an existing treeViewState
+		// If none exists, use a blank object string
+		treeViewState = JSON.parse(localStorage.getItem("treeViewState") ?? "{}");
+	});
+
+	// Utility function for converting regular names to kebab case
+	const id = (s: string) => s.toLowerCase().split(" ").join("-");
+
+	// Function for expanding/collapsing docs categories
+	function toggleExpansion(event: MouseEvent, name: string) {
+		event.stopPropagation();
+
+		// Modify treeViewState to have the opposite of the previous entry for the category
+		treeViewState[id(name)] = !treeViewState[id(name)];
+
+		// Update value in localStorage for persistence
+		localStorage.setItem("treeViewState", JSON.stringify(treeViewState));
+	}
+</script>
+
+<div class="tree-view">
+	{#each tree as { name, path, type, pages, icon }}
+		{#if type === "category"}
+			{#if __depth > 0}
+				<div class="subtree" class:expanded={treeViewState?.[id(name)]}>
+					<ListItem
+						type="expander"
+						expanded={treeViewState?.[id(name)]}
+						on:click={e => toggleExpansion(e, name)}
+					>
+						<svelte:fragment slot="icon">
+							{@html icon || ""}
+						</svelte:fragment>
+						{name}
+					</ListItem>
+					{#if treeViewState?.[id(name)]}
+						<div class="subtree-items">
+							<svelte:self __depth={__depth + 1} tree={pages} />
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<TextBlock class="category-header" variant="bodyStrong">{name}</TextBlock>
+				<svelte:self __depth={__depth + 1} tree={pages} />
+			{/if}
+		{:else}
+			<ListItem
+				on:click
+				type="navigation"
+				selected={`/docs${path}` === $page.url.pathname}
+				href="/docs{path}"
+			>
+				<svelte:fragment slot="icon">
+					{@html icon || ""}
+				</svelte:fragment>
+				{name}
+			</ListItem>
+		{/if}
+	{/each}
+</div>
+
+<style lang="scss">
+	// Add padding to subtrees for the nesting effect
+	.subtree-items {
+		padding-inline-start: 24px;
+	}
+
+	.tree-view {
+		max-block-size: 100%;
+		min-block-size: 0;
+		:global(.category-header) {
+			inline-size: 100%;
+			padding-inline: 16px;
+			padding-block: 10px;
+		}
+	}
+</style>

package/src/site/lib/index.ts

@@ -0,0 +1,9 @@
+export { default as CopyBox } from "./CopyBox/CopyBox.svelte";
+export { default as HeroCard } from "./HeroCard/HeroCard.svelte";
+export { default as Metadata } from "./Metadata/Metadata.svelte";
+export { default as PageSection } from "./PageSection/PageSection.svelte";
+export { default as Navbar } from "./Navbar/Navbar.svelte";
+export { default as TreeView } from "./TreeView/TreeView.svelte";
+export { default as Showcase } from "./Showcase/Showcase.svelte";
+export { default as Toc } from "./Toc/Toc.svelte";
+export { default as APIDocs } from "./APIDocs/APIDocs.svelte";