Update DocShell and feature doc source links (#1960)

sites/skeleton.dev/src/lib/layouts/DocsShell/partials/Header.svelte

@@ -10,8 +10,9 @@
 	const cChip = 'chip variant-soft hover:variant-filled';
 
 	// Local
-	const githubSourcePath = 'https://github.com/skeletonlabs/skeleton/tree/master/packages/skeleton/src';
+	const githubBranch = 'master'; // IMPORTANT: for testing only, keep as 'master'
-	const githubDocSourcePath = 'https://github.com/skeletonlabs/skeleton/blob/master/sites/skeleton.dev/src';
+	const githubFeatureSourcePath = `https://github.com/skeletonlabs/skeleton/blob/${githubBranch}`;
+	const githubPageSourcePath = `https://github.com/skeletonlabs/skeleton/blob/${githubBranch}/sites/skeleton.dev/src`;
 
 	function formatImportSnippet(): string {
 		let snippet = ``;
@@ -53,14 +54,14 @@
 		{/if} -->
 		<!-- Source -->
 		{#if pageData.source}
-			<a class={cChip} href={`${githubSourcePath}/lib/${pageData.source}`} target="_blank" rel="noreferrer">
+			<a class={cChip} href={`${githubFeatureSourcePath}/${pageData.source}`} target="_blank" rel="noreferrer">
 				<i class="fa-brands fa-github text-[16px]" />
 				<span>Source</span>
 			</a>
 		{/if}
 		<!-- Doc Source -->
 		{#if pageData.docsPath}
-			<a class={cChip} href={`${githubDocSourcePath}/routes/(inner)${pageData.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">
+			<a class={cChip} href={`${githubPageSourcePath}/routes/(inner)${pageData.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">
 				<i class="fa-solid fa-code" />
 				<span>Page Source</span>
 			</a>

sites/skeleton.dev/src/routes/(inner)/actions/clipboard/+page.svelte

@@ -11,7 +11,7 @@
 		name: 'Clipboard',
 		description: 'Allows you to quickly copy data to the clipboard.',
 		imports: ['clipboard'],
-		source: 'actions/Clipboard',
+		source: 'packages/skeleton/src/lib/actions/Clipboard',
 		parameters: [
 			['<code class="code">element</code>', 'string', '-', '-', `HTML element's <em>data-clipboard</em> ID value.`],
 			['<code class="code">input</code>', 'string', '-', '-', `Input element's <em>data-clipboard</em> ID value.`]

sites/skeleton.dev/src/routes/(inner)/actions/filters/+page.svelte

@@ -16,7 +16,7 @@
 		name: 'Filters',
 		description: 'Apply Instagram-like filter effects to images.',
 		imports: ['filter'],
-		source: 'actions/Filters',
+		source: 'packages/skeleton/src/lib/actions/Filters',
 		parameters: [['<code class="code">(default)</code>', 'string', '-', '-', 'The name of the filter, such as "Apollo".']]
 	};
 

sites/skeleton.dev/src/routes/(inner)/actions/focus-trap/+page.svelte

@@ -11,7 +11,7 @@
 		name: 'Focus Trap',
 		description: 'Allows you to contain tab focus within a target element on-demand.',
 		imports: ['focusTrap'],
-		source: 'actions/FocusTrap',
+		source: 'packages/skeleton/src/lib/actions/FocusTrap',
 		parameters: [['<code class="code">(default)</code>', 'boolean', '-', '-', `When TRUE, enables focus capture.`]]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/accordions/+page.svelte

@@ -16,7 +16,7 @@
 		name: 'Accordions',
 		description: 'Divide content into collapsible sections.',
 		imports: ['Accordion', 'AccordionItem'],
-		source: 'components/Accordion',
+		source: 'packages/skeleton/src/lib/components/Accordion',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/accordion/',
 		components: [
 			{ label: 'Accordion', sveld: sveldAccordion },

sites/skeleton.dev/src/routes/(inner)/components/app-bar/+page.svelte

@@ -15,7 +15,7 @@
 		description:
 			'A header element for the top of your page layout. Pairs well with the <a class="anchor" href="/components/app-shell">App Shell</a>.',
 		imports: ['AppBar'],
-		source: 'components/AppBar',
+		source: 'packages/skeleton/src/lib/components/AppBar',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/',
 		components: [{ sveld: sveldAppBar }]
 	};

sites/skeleton.dev/src/routes/(inner)/components/app-rail/+page.svelte

@@ -19,7 +19,7 @@
 		name: 'App Rail',
 		description: 'A side navigation rail component',
 		imports: ['AppRail', 'AppRailTile', 'AppRailAnchor'],
-		source: 'components/AppRail',
+		source: 'packages/skeleton/src/lib/components/AppRail',
 		// aria: 'https://www.w3.org/WAI/ARIA/apg/',
 		components: [
 			{ label: 'AppRail', sveld: sveldAppRail },

sites/skeleton.dev/src/routes/(inner)/components/app-shell/+page.svelte

@@ -14,7 +14,7 @@
 		name: 'App Shell',
 		description: 'Responsive shell for controlling application layout.',
 		imports: ['AppShell'],
-		source: 'components/AppShell',
+		source: 'packages/skeleton/src/lib/components/AppShell',
 		components: [{ sveld: sveldAppShell }]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte

@@ -17,7 +17,7 @@
 		description: 'Displays a list of suggested options.',
 		imports: ['Autocomplete'],
 		types: ['AutocompleteOption'],
-		source: 'components/Autocomplete',
+		source: 'packages/skeleton/src/lib/components/Autocomplete',
 		// aria: 'https://www.w3.org/WAI/ARIA/apg/',
 		components: [{ sveld: sveldAutocomplete }],
 		keyboard: [

sites/skeleton.dev/src/routes/(inner)/components/avatars/+page.svelte

@@ -17,7 +17,7 @@
 		name: 'Avatars',
 		description: 'Display user avatars with an image or initials.',
 		imports: ['Avatar'],
-		source: 'components/Avatar',
+		source: 'packages/skeleton/src/lib/components/Avatar',
 		components: [{ sveld: sveldAvatar }]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/conic-gradients/+page.svelte

@@ -14,7 +14,7 @@
 		description: 'Create conic gradient data visualizations for pie charts, loading spinners, and more.',
 		imports: ['ConicGradient'],
 		types: ['ConicStop'],
-		source: 'components/ConicGradient',
+		source: 'packages/skeleton/src/lib/components/ConicGradient',
 		components: [{ sveld: sveldConicGradient }]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/file-buttons/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'File Buttons',
 		description: 'Allows you to select files with a single click.',
 		imports: ['FileButton'],
-		source: 'components/FileButton',
+		source: 'packages/skeleton/src/lib/components/FileButton',
 		components: [{ sveld: sveldFileButton }],
 		restProps: 'input'
 	};

sites/skeleton.dev/src/routes/(inner)/components/file-dropzone/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'File Dropzone',
 		description: 'Allow upload of files with drag and drop.',
 		imports: ['FileDropzone'],
-		source: 'components/FileDropzone',
+		source: 'packages/skeleton/src/lib/components/FileDropzone',
 		components: [{ sveld: sveldFileDropzone }],
 		restProps: 'input'
 	};

sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte

@@ -15,7 +15,7 @@
 		imports: ['InputChip'],
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/forms', 'elements/chips'],
-		source: 'components/InputChip',
+		source: 'packages/skeleton/src/lib/components/InputChip',
 		components: [{ sveld: sveldInputChip }],
 		// aria: 'https://www.w3.org/WAI/ARIA/apg/',
 		restProps: 'input',

sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte

@@ -14,7 +14,7 @@
 		name: 'Listboxes',
 		description: 'Interactive listboxes that maintain selection state.',
 		imports: ['ListBox', 'ListBoxItem'],
-		source: 'components/ListBox',
+		source: 'packages/skeleton/src/lib/components/ListBox',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/',
 		components: [
 			{ label: 'ListBox', sveld: sveldListBox },

sites/skeleton.dev/src/routes/(inner)/components/paginators/+page.svelte

@@ -15,7 +15,7 @@
 		name: 'Paginators',
 		description: 'Navigate between multiple pages of content.',
 		imports: ['Paginator'],
-		source: 'components/Paginator',
+		source: 'packages/skeleton/src/lib/components/Paginator',
 		components: [{ sveld: sveldPaginator }]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/progress-bars/+page.svelte

@@ -18,7 +18,7 @@
 		name: 'Progress Bars',
 		description: 'An indicator showing the progress or completion of a task.',
 		imports: ['ProgressBar'],
-		source: 'components/ProgressBar',
+		source: 'packages/skeleton/src/lib/components/ProgressBar',
 		aria: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role',
 		components: [{ sveld: sveldProgressBar }]
 	};

sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Progress Radials',
 		description: 'Displays a radial indicator showing the progress or completion of a task.',
 		imports: ['ProgressRadial'],
-		source: 'components/ProgressRadial',
+		source: 'packages/skeleton/src/lib/components/ProgressRadial',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/meter/',
 		components: [{ sveld: sveldProgressRadial }]
 	};

sites/skeleton.dev/src/routes/(inner)/components/radio-groups/+page.svelte

@@ -14,7 +14,7 @@
 		name: 'Radio Groups',
 		description: 'Capture feedback limited to a small set of options.',
 		imports: ['RadioGroup', 'RadioItem'],
-		source: 'components/Radio',
+		source: 'packages/skeleton/src/lib/components/Radio',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/',
 		restProps: 'RadioItem input',
 		components: [

sites/skeleton.dev/src/routes/(inner)/components/range-sliders/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Range Sliders',
 		description: 'Capture input from a range of values, including optional ticks.',
 		imports: ['RangeSlider'],
-		source: 'components/RangeSlider',
+		source: 'packages/skeleton/src/lib/components/RangeSlider',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/',
 		components: [{ sveld: sveldRangeSlider }],
 		restProps: 'input',

sites/skeleton.dev/src/routes/(inner)/components/ratings/+page.svelte

@@ -14,7 +14,7 @@
 		name: 'Ratings',
 		description: 'Create an visual representation of a numeric range.',
 		imports: ['Ratings'],
-		source: 'components/Ratings',
+		source: 'packages/skeleton/src/lib/components/Ratings',
 		components: [{ label: 'Ratings', sveld: sveldRatings }]
 	};
 

sites/skeleton.dev/src/routes/(inner)/components/slide-toggles/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Slide Toggles',
 		description: 'A sliding toggle element that can capture input from a user.',
 		imports: ['SlideToggle'],
-		source: 'components/SlideToggle',
+		source: 'packages/skeleton/src/lib/components/SlideToggle',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/',
 		components: [{ sveld: sveldSlideToggle }],
 		restProps: 'input'

sites/skeleton.dev/src/routes/(inner)/components/steppers/+page.svelte

@@ -14,7 +14,7 @@
 		name: 'Steppers',
 		description: 'Divide and present content in sequenced steps.',
 		imports: ['Stepper', 'Step'],
-		source: 'components/Stepper',
+		source: 'packages/skeleton/src/lib/components/Stepper',
 		components: [
 			{ label: 'Stepper', sveld: sveldStepper },
 			{

sites/skeleton.dev/src/routes/(inner)/components/tables/+page.svelte

@@ -22,7 +22,7 @@
 		description: 'Utilize a data-driven model to create simple presentational tables.',
 		imports: ['Table'],
 		types: ['TableSource'],
-		source: 'components/Table',
+		source: 'packages/skeleton/src/lib/components/Table',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/',
 		components: [{ sveld: sveldTable }],
 		keyboard: [

sites/skeleton.dev/src/routes/(inner)/components/tabs/+page.svelte

@@ -15,7 +15,7 @@
 		name: 'Tabs',
 		description: 'Use tabs to quickly switch between different views and pages.',
 		imports: ['TabGroup', 'Tab', 'TabAnchor'],
-		source: 'components/Tab',
+		source: 'packages/skeleton/src/lib/components/Tab',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/',
 		components: [
 			{ label: 'TabGroup', sveld: sveldTabGroup },

sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte

@@ -16,7 +16,7 @@
 		name: 'Tree Views',
 		description: 'Display information in a hierarchical structure using collapsible nodes.',
 		imports: ['TreeView', 'TreeViewItem', 'type TreeViewNode'],
-		source: 'components/TreeView',
+		source: 'packages/skeleton/src/lib/components/TreeView',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/treeview/',
 		components: [
 			{ label: 'TreeView', sveld: sveldTreeView },

sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte

@@ -10,7 +10,7 @@
 		name: 'Design Tokens',
 		description: 'The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.',
 		// stylesheetIncludes: ['all', 'tokens'],
-		source: 'tailwind/tokens'
+		source: 'packages/plugin/src/tailwind/tokens'
 	};
 
 	// Local

sites/skeleton.dev/src/routes/(inner)/docs/variants/+page.svelte

@@ -10,7 +10,7 @@
 		feature: DocsFeature.Element,
 		name: 'Variants',
 		description: 'Canned styles available to easily customize elements, components, and more.',
-		source: 'tailwind/tokens'
+		source: 'packages/plugin/src/styles/components/variants.css'
 	};
 </script>
 

sites/skeleton.dev/src/routes/(inner)/elements/alerts/+page.svelte

@@ -16,7 +16,7 @@
 		description: 'Displays customizable alerts to attract attention and provide critical actions.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/alerts'],
-		source: 'styles/elements/alerts.css',
+		source: 'packages/plugin/src/styles/components/alerts.css',
 		classes: [
 			['<code class="code">alert</code>', '', 'Provide basic alert styles to a block element.'],
 			['<code class="code">alert-message</code>', '', 'The message body styles. Contains a title and message.'],

sites/skeleton.dev/src/routes/(inner)/elements/badges/+page.svelte

@@ -13,7 +13,7 @@
 		description: 'Provides a robust set of non-interactive badge styles.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/badges'],
-		source: 'styles/elements/badges.css',
+		source: 'packages/plugin/src/styles/components/badges.css',
 		classes: [
 			['<code class="code">badge</code>', '-', 'Provides the standard Badge style.'],
 			['<code class="code">badge-icon</code>', '-', 'Provides the Icon Badge style.']

sites/skeleton.dev/src/routes/(inner)/elements/breadcrumbs/+page.svelte

@@ -13,7 +13,7 @@
 		description: 'Displays the current navigation hierarchy.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/breadcrumbs'],
-		source: 'styles/elements/breadcrumbs.css',
+		source: 'packages/plugin/src/styles/components/breadcrumbs.css',
 		classes: [
 			['<code class="code">breadcrumb</code>', '-', 'Add to an <em>ol</em> tag element.'],
 			['<code class="code">breadcrumb-nonresponsive</code>', '-', 'Shows all crumbs on small mobile breakpoints.'],

sites/skeleton.dev/src/routes/(inner)/elements/buttons/+page.svelte

@@ -14,7 +14,7 @@
 		description: 'Provides a robust set of button styles, including preset variants.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/buttons'],
-		source: 'styles/elements/buttons.css',
+		source: 'packages/plugin/src/styles/components/buttons.css',
 		classes: [
 			['<code class="code">.btn</code>', '-', 'Creates a text button using a button or anchor.'],
 			['<code class="code">.btn-icon</code>', '-', 'Creates a text icon button using a button or anchor.'],

sites/skeleton.dev/src/routes/(inner)/elements/cards/+page.svelte

@@ -14,7 +14,7 @@
 		description: 'Provides container elements that wrap and separate content',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/cards'],
-		source: 'styles/elements/cards.css',
+		source: 'packages/plugin/src/styles/components/cards.css',
 		classes: [
 			['<code class="code">.card</code>', '-', 'Adds basic card styling to any block element.'],
 			['<code class="code">.card-header</code>', '-', 'The header region of the card.'],

sites/skeleton.dev/src/routes/(inner)/elements/chips/+page.svelte

@@ -13,7 +13,7 @@
 		description: 'Interactive elements for actions, selection, or filtering.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/chips'],
-		source: 'styles/elements/chips.css',
+		source: 'packages/plugin/src/styles/components/chips.css',
 		classes: [
 			['<code class="code">chip</code>', '', 'Provides the standard chip style.'],
 			['<code class="code">chip-[color]</code>', '<a class="anchor" href="/docs/colors">Any theme color.</a>', 'Applies a variant style.'],

sites/skeleton.dev/src/routes/(inner)/elements/core/+page.svelte

@@ -12,7 +12,7 @@
 		name: 'Core',
 		description: 'Provides a variety of globally scoped styles.',
 		stylesheetIncludes: ['skeleton', 'core'],
-		source: 'styles/partials/core.css'
+		source: 'packages/plugin/src/styles/base/core.css'
 	};
 </script>
 

sites/skeleton.dev/src/routes/(inner)/elements/forms/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Forms',
 		description: 'Pair with the Tailwind Forms plugin to style various input fields.',
 		stylesheetIncludes: ['all', 'forms'],
-		source: 'styles/elements/forms.css',
+		source: 'packages/plugin/src/styles/base/forms.css',
 		dependencies: [{ label: 'Tailwind Forms Plugin', url: 'https://github.com/tailwindlabs/tailwindcss-forms' }],
 		classes: [
 			['<code class="code">.legend</code>', '', 'Provides theme styles to legend elements.'],

sites/skeleton.dev/src/routes/(inner)/elements/gradient-headings/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Gradient Headings',
 		description: 'Create gradient-colored heading styles.',
 		// imports: ['GradientHeading'],
-		// source: 'components/GradientHeading'
+		// source: 'packages/skeleton/src/lib/components/GradientHeading'
 		dependencies: [{ label: 'Tailwind Gradients', url: 'https://tailwindcss.com/docs/gradient-color-stops' }]
 	};
 </script>

sites/skeleton.dev/src/routes/(inner)/elements/image-layouts/+page.svelte

@@ -17,7 +17,7 @@
 		// types: ['Template'],
 		// stylesheetIncludes: ['all', 'elements'],
 		// stylesheets: ['elements/template'],
-		// source: 'components/Template',
+		// source: 'packages/skeleton/src/lib/components/Template',
 		// aria: 'https://www.w3.org/WAI/ARIA/apg/'
 		// dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }],
 		// components: [{sveld: sveldComp}],

sites/skeleton.dev/src/routes/(inner)/elements/lists/+page.svelte

@@ -15,7 +15,7 @@
 		description: 'Provides styles for static list elements.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/lists'],
-		source: 'styles/elements/lists.css',
+		source: 'packages/plugin/src/styles/components/lists.css',
 		classes: [
 			['<code class="code">.list</code>', '-', 'Class for defining an unordered or ordered list.'],
 			['<code class="code">.list-dl</code>', '-', 'Class for defining a description list.'],

sites/skeleton.dev/src/routes/(inner)/elements/logo-clouds/+page.svelte

@@ -15,7 +15,7 @@
 		description: 'Provides a grid for presenting a set of logos, brands, or sponsors.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/logo-clouds'],
-		source: 'styles/elements/logo-clouds.css',
+		source: 'packages/plugin/src/styles/components/logo-clouds.css',
 		classes: [
 			['<code class="code">.logo-cloud</code>', '-', 'Apply to a wrapping block element around a set of logos.'],
 			['<code class="code">.logo-item</code>', '-', 'Apply to each logo child element.']

sites/skeleton.dev/src/routes/(inner)/elements/placeholders/+page.svelte

@@ -12,7 +12,7 @@
 		description: 'Provides "skeleton" placeholders that can display while content loads.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/placeholders'],
-		source: 'styles/elements/placeholders.css',
+		source: 'packages/plugin/src/styles/components/placeholders.css',
 		classes: [
 			['<code class="code">placeholder</code>', '-', 'Applies the default placeholder style.'],
 			['<code class="code">placeholder-circle</code>', '-', 'Applies the circular placeholder style.']

sites/skeleton.dev/src/routes/(inner)/elements/tables/+page.svelte

@@ -14,7 +14,7 @@
 		description: 'Provides a set of styles for native HTML table elements.',
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/tables'],
-		source: 'styles/elements/tables.css',
+		source: 'packages/plugin/src/styles/components/tables.css',
 		classes: [
 			['<code class="code">.table-container</code>', '-', 'Apply to a wrapping parent element to enable responsive scrolling.'],
 			['<code class="code">.table</code>', '-', 'Apply to a native HTML table element to add table styles.'],

sites/skeleton.dev/src/routes/(inner)/elements/typography/+page.svelte

@@ -11,7 +11,7 @@
 		name: 'Typography',
 		description: 'Provides a variety of globally scoped typographic styles. Keeps common tags styled consistently throughout an app.',
 		stylesheetIncludes: ['skeleton', 'typography'],
-		source: 'styles/partials/typography.css'
+		source: 'packages/plugin/src/styles/components/typography.css'
 	};
 </script>
 

sites/skeleton.dev/src/routes/(inner)/template/+page.svelte

@@ -17,7 +17,7 @@
 		types: ['Template'],
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/template'],
-		source: 'components/Template',
+		source: 'packages/skeleton/src/lib/components/Template',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/'
 		// dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }],
 		// components: [{sveld: sveldComp}],

sites/skeleton.dev/src/routes/(inner)/utilities/codeblocks/+page.svelte

@@ -15,7 +15,7 @@
 			'Displays pre-formatted source code, with optional support for <a href="https://highlightjs.org/" target="_blank" rel="noreferrer">Highlight.js</a> syntax highlighting.',
 		imports: ['CodeBlock'],
 		stylesheets: ['highlight-js'],
-		source: 'utilities/CodeBlock',
+		source: 'packages/skeleton/src/lib/utilities/CodeBlock',
 		components: [{ sveld: sveldCodeBlock }],
 		dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }]
 	};

sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte

@@ -18,7 +18,7 @@
 		description: 'Displays an overlay panel that attaches to any side of the screen.',
 		imports: ['Drawer', 'getDrawerStore'],
 		types: ['DrawerSettings', 'DrawerStore'],
-		source: 'utilities/Drawer',
+		source: 'packages/skeleton/src/lib/utilities/Drawer',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/',
 		components: [{ sveld: sveldDrawer }],
 		keyboard: [['<kbd class="kbd">Esc</kbd>', ' Closes the drawer.']]

sites/skeleton.dev/src/routes/(inner)/utilities/lightswitches/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Lightswitch',
 		description: `Components and utilities to toggle <a class="anchor" href="https://tailwindcss.com/docs/dark-mode" target="_blank" rel="noreferrer">Tailwind's dark mode</a>.`,
 		imports: ['LightSwitch'],
-		source: 'utilities/LightSwitch',
+		source: 'packages/skeleton/src/lib/utilities/LightSwitch',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/',
 		components: [{ sveld: sveldLightSwitch }],
 		keyboard: [['<kbd class="kbd">Space</kbd> or <kbd class="kbd">Enter</kbd>', 'Toggle the switch state.']]

sites/skeleton.dev/src/routes/(inner)/utilities/local-storage-stores/+page.svelte

@@ -11,7 +11,7 @@
 		description:
 			'An extended version of the <a class="anchor" href="https://svelte.dev/tutorial/writable-stores" target="_blank" rel="noreferrer">Svelte writable store</a> that includes pub/sub to local storage.',
 		imports: ['localStorageStore'],
-		source: 'utilities/LocalStorageStore'
+		source: 'packages/skeleton/src/lib/utilities/LocalStorageStore'
 	};
 </script>
 

sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte

@@ -27,7 +27,7 @@
 		description: 'High priority dialogs and modals using a dynamic queue system.',
 		imports: ['Modal', 'getModalStore'],
 		types: ['ModalSettings', 'ModalComponent', 'ModalStore'],
-		source: 'utilities/Modal',
+		source: 'packages/skeleton/src/lib/utilities/Modal',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/',
 		components: [{ sveld: sveldModal }],
 		keyboard: [['<kbd class="kbd">Esc</kbd>', ' Dismisses the foremost modal.']],

sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte

@@ -17,7 +17,7 @@
 		types: ['PopupSettings'],
 		stylesheetIncludes: ['all', 'elements'],
 		stylesheets: ['elements/popups'],
-		source: 'utilities/Popup',
+		source: 'packages/skeleton/src/lib/utilities/Popup',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu/',
 		classes: [
 			['<code class="code">[data-popup]</code>', '', `Follows Floating UI's best practices. Sets hidden by default.`],

sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte

@@ -13,7 +13,7 @@
 		name: 'Table of Contents',
 		description: 'Allows you to quickly navigate the hierarchy of headings for the current page.',
 		imports: ['TableOfContents', 'tocCrawler'],
-		source: 'components/TableOfContents',
+		source: 'packages/skeleton/src/lib/utilities/TableOfContents',
 		components: [{ sveld: sveldTableOfContents }]
 	};
 </script>

sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte

@@ -18,7 +18,7 @@
 		description: 'Simple notifications utilizing a dynamic queue system.',
 		imports: ['Toast', 'getToastStore'],
 		types: ['ToastSettings', 'ToastStore'],
-		source: 'utilities/Toast',
+		source: 'packages/skeleton/src/lib/utilities/Toast',
 		components: [{ sveld: sveldToast }],
 		transitionIn: 'fly',
 		transitionOut: 'fly'