Merge branch 'dev'

skeletonlabs · May 9, 2023 · b061222 · b061222 · vercel · May 9, 2023
2 parents 1d47f04 + 0165095
commit b061222
Show file tree

Hide file tree

Showing 146 changed files with 5,674 additions and 2,441 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,5 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
-	},
+	}
 };
diff --git a/.prettierignore b/.prettierignore
@@ -9,4 +9,6 @@ node_modules
 /coverage
 pnpm-lock.yaml
 .vscode
-.github
+.github
+/static/font-awesome
+/static/fonts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@skeletonlabs/skeleton",
-	"version": "v1.2.5",
+	"version": "v1.5.0",
 	"description": "A SvelteKit component library.",
 	"author": "endigo9740 <[email protected]>",
 	"scripts": {
@@ -41,11 +41,13 @@
 	"license": "MIT",
 	"homepage": "https://skeleton.dev/",
 	"devDependencies": {
+		"@faker-js/faker": "^7.6.0",
 		"@floating-ui/dom": "^1.2.5",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.15.0",
 		"@sveltejs/package": "^2.0.2",
 		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/typography": "^0.5.9",
 		"@testing-library/dom": "^9.2.0",
 		"@testing-library/svelte": "^3.2.2",
 		"@typescript-eslint/eslint-plugin": "^5.57.0",
@@ -79,6 +81,7 @@
 	"type": "module",
 	"types": "index.d.ts",
 	"dependencies": {
+		"esm-env": "^1.0.0",
 		"svelte": "^3.58.0"
 	},
 	"exports": {

diff --git a/scripts/compile-css-to-js.cjs b/scripts/compile-css-to-js.cjs
@@ -6,12 +6,12 @@ const tailwindcss = require('tailwindcss');
 
 // Transpiles all of our library's CSS to JS
 async function transpileCssToJs() {
-	const cssEntryPath = './src/lib/styles/all.css';
+	const cssEntryPath = './src/lib/styles/skeleton.css';
 	// Custom tailwind config so that we only use the necessities
 	const twConfig = {
 		darkMode: 'class',
 		content: ['./src/**/*.{html,js,svelte,ts}'],
-		plugins: [require('../src/lib/tailwind/core.cjs')]
+		plugins: [require('@tailwindcss/typography'), require('../src/lib/tailwind/core.cjs')]
 	};
 
 	const css = fs.readFileSync(cssEntryPath, 'utf8');
@@ -25,7 +25,7 @@ async function transpileCssToJs() {
 // Takes ~8 seconds to run.
 async function generateAllTWClasses() {
 	console.log("First time running, generating all tailwind classes... this may take a while... (it's only once though!)");
-	const cssEntryPath = './src/lib/styles/tailwind.css';
+	const cssEntryPath = './src/lib/styles/partials/tailwind.css';
 
 	// Special tailwind config so that all TW classes are included
 	const twConfig = {

diff --git a/scripts/post-build.js b/scripts/post-build.js
@@ -122,7 +122,10 @@ function generateKeyWordsFromProps() {
 	}
 	let finalProps = Array.from(propSet).sort();
 	finalProps.unshift('class');
-	writeFileSync('scripts/tw-settings.json', JSON.stringify({ "prettier.documentSelectors": ["**/*.svelte"], 'tailwindCSS.classAttributes': [...finalProps] }, null, '\t'));
+	writeFileSync(
+		'scripts/tw-settings.json',
+		JSON.stringify({ 'prettier.documentSelectors': ['**/*.svelte'], 'tailwindCSS.classAttributes': [...finalProps] }, null, '\t')
+	);
 }
 
 extractScriptsFromComponents('src/lib/components');

diff --git a/scripts/tw-settings.json b/scripts/tw-settings.json
@@ -1,7 +1,5 @@
 {
-	"prettier.documentSelectors": [
-		"**/*.svelte"
-	],
+	"prettier.documentSelectors": ["**/*.svelte"],
 	"tailwindCSS.classAttributes": [
 		"class",
 		"accent",
@@ -96,4 +94,4 @@
 		"track",
 		"width"
 	]
-}
+}
diff --git a/src/app.html b/src/app.html
@@ -1,24 +1,22 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
 
-<head>
-	<meta charset="utf-8" />
+		<!-- NOTE: SEO handled in root page layout: /src/+layout.svelte -->
 
-	<!-- NOTE: SEO handled in root page layout: /src/+layout.svelte -->
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
 
-	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	%sveltekit.head%
+		<!-- Font Awesome -->
+		<!-- https://fontawesome.com/docs/web/setup/host-yourself/webfonts -->
+		<link href="/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
+		<link href="/font-awesome/css/brands.min.css" rel="stylesheet" />
+		<link href="/font-awesome/css/solid.min.css" rel="stylesheet" />
+	</head>
 
-	<!-- Font Awesome -->
-	<!-- https://fontawesome.com/docs/web/setup/host-yourself/webfonts -->
-	<link href="/font-awesome/css/fontawesome.min.css" rel="stylesheet">
-	<link href="/font-awesome/css/brands.min.css" rel="stylesheet">
-	<link href="/font-awesome/css/solid.min.css" rel="stylesheet">
-</head>
-
-<body data-theme="skeleton">
-	<div class="h-full overflow-hidden contents">%sveltekit.body%</div>
-</body>
-
-</html>
+	<body data-theme="skeleton">
+		<div class="h-full overflow-hidden contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -48,11 +48,6 @@ body {
 	@apply space-y-4;
 }
 
-/* Label Text Override */
-label:not(.unstyled) span:first-of-type:not(.unstyled):is(:not(.input-chip *)) {
-	@apply text-surface-700-200-token text-sm;
-}
-
 /* Heading Permalinks */
 .permalink {
 	@apply w-0 invisible inline-block text-base pl-2 -translate-y-1;

diff --git a/src/docs/components/DocsAppBar/DocsAppBar.svelte b/src/docs/components/DocsAppBar/DocsAppBar.svelte
@@ -38,12 +38,12 @@
 
 	// Search
 	function triggerSearch(): void {
-		const d: ModalSettings = {
+		const modal: ModalSettings = {
 			type: 'component',
 			component: 'modalSearch',
 			position: 'item-start'
 		};
-		modalStore.trigger(d);
+		modalStore.trigger(modal);
 	}
 
 	// Keyboard Shortcut (CTRL/⌘+K) to Focus Search
@@ -106,7 +106,6 @@
 				<i class="fa-solid fa-caret-down opacity-50" />
 			</button>
 			<!-- popup -->
-			<!-- prettier-ignore -->
 			<div class="card p-4 w-60 shadow-xl" data-popup="features">
 				<nav class="list-nav">
 					<ul>
@@ -115,31 +114,40 @@
 								<span class="w-6 text-center"><i class="fa-solid fa-home" /></span>
 								<span>Homepage</span>
 							</a>
+						</li>
+						<li>
 							<a href="/docs/get-started">
 								<span class="w-6 text-center"><i class="fa-solid fa-book" /></span>
 								<span>Documentation</span>
 							</a>
+						</li>
+						<li>
 							<a href="/blog">
 								<span class="w-6 text-center"><i class="fa-solid fa-bullhorn" /></span>
 								<span>Blog</span>
 							</a>
-							<hr class="my-4">
+						</li>
+						<hr class="!my-4" />
+						<li>
 							<a href="/elements/core">
 								<span class="w-6 text-center"><DocsIcon name="tailwind" width="w-5" height="h-5" /></span>
 								<span>Tailwind</span>
 							</a>
+						</li>
+						<li>
 							<a href="/actions/clipboard">
 								<span class="w-6 text-center"><DocsIcon name="svelte" width="w-6" height="h-6" /></span>
 								<span>Svelte</span>
 							</a>
+						</li>
+						<li>
 							<a href="/utilities/codeblocks">
 								<span class="w-6 text-center"><i class="fa-solid fa-screwdriver-wrench" /></span>
 								<span>Utilities</span>
 							</a>
 						</li>
 					</ul>
 				</nav>
-				<!-- Arrow -->
 				<div class="arrow bg-surface-100-800-token" />
 			</div>
 		</div>
@@ -148,15 +156,15 @@
 		<div>
 			<!-- trigger -->
 			<button class="btn hover:variant-soft-primary" use:popup={{ event: 'click', target: 'theme' }}>
-				<i class="fa-solid fa-palette text-lg md:hidden" />
+				<i class="fa-solid fa-palette text-lg md:!hidden" />
 				<span class="hidden md:inline-block">Theme</span>
 				<i class="fa-solid fa-caret-down opacity-50" />
 			</button>
 			<!-- popup -->
 			<div class="card p-4 w-60 shadow-xl" data-popup="theme">
 				<div class="space-y-4">
 					<section class="flex justify-between items-center">
-						<h6>Mode</h6>
+						<h6 class="h6">Mode</h6>
 						<LightSwitch />
 					</section>
 					<nav class="list-nav p-4 -m-4 max-h-64 lg:max-h-[500px] overflow-y-auto">
@@ -183,7 +191,6 @@
 						<a class="btn variant-ghost-surface w-full" href="/docs/generator">Create a Theme</a>
 					</div>
 				</div>
-				<!-- Arrow -->
 				<div class="arrow bg-surface-100-800-token" />
 			</div>
 		</div>
@@ -241,7 +248,6 @@
 						</li>
 					</ul>
 				</nav>
-				<!-- Arrow -->
 				<div class="arrow bg-surface-100-800-token" />
 			</div>
 		</div>

diff --git a/src/docs/components/DocsDrawer/DocsDrawer.svelte b/src/docs/components/DocsDrawer/DocsDrawer.svelte
@@ -14,16 +14,16 @@
 		<!-- Drawer Doc Demos -->
 		<div class="w-full h-full flex justify-center items-center">
 			<div class="text-center space-y-2">
-				{#if $drawerStore.meta}<h2>{$drawerStore.meta}</h2>{/if}
-				<h4>Drawer: <span class="capitalize">{$drawerStore.position}</span></h4>
+				{#if $drawerStore.meta}<h2 class="h2">{$drawerStore.meta}</h2>{/if}
+				<h4 class="h4">Drawer: <span class="capitalize">{$drawerStore.position}</span></h4>
 				<span class="block">Tap outside the drawer to close.</span>
 			</div>
 		</div>
 	{:else}
 		<!-- Fallback Error -->
 		<div class="w-full h-full flex justify-center items-center">
 			<div class="text-center space-y-2">
-				<p>Invalid <code>$drawerStore.id</code> provided.</p>
+				<p>Invalid <code class="code">$drawerStore.id</code> provided.</p>
 			</div>
 		</div>
 	{/if}

diff --git a/src/docs/components/DocsFooter/DocsFooter.svelte b/src/docs/components/DocsFooter/DocsFooter.svelte
@@ -23,32 +23,32 @@
 			</div>
 			<div class="hidden md:grid grid-cols-3 gap-8">
 				<div class="space-y-6">
-					<h6>Explore</h6>
+					<h6 class="h6">Explore</h6>
 					<ul class="space-y-3">
-						<li><a href="/docs/introduction">Introduction</a></li>
-						<li><a href="/docs/get-started">Get Started</a></li>
-						<li><a href="/blog">Blog</a></li>
+						<li><a class="anchor" href="/docs/introduction">Introduction</a></li>
+						<li><a class="anchor" href="/docs/get-started">Get Started</a></li>
+						<li><a class="anchor" href="/blog">Blog</a></li>
 					</ul>
 				</div>
 				<div class="space-y-6">
-					<h6>Features</h6>
+					<h6 class="h6">Features</h6>
 					<ul class="space-y-3">
-						<li><a href="/elements/core">Tailwind</a></li>
-						<li><a href="/actions/clipboard">Svelte</a></li>
-						<li><a href="/utilities/codeblocks">Utilities</a></li>
+						<li><a class="anchor" href="/elements/core">Tailwind</a></li>
+						<li><a class="anchor" href="/actions/clipboard">Svelte</a></li>
+						<li><a class="anchor" href="/utilities/codeblocks">Utilities</a></li>
 					</ul>
 				</div>
 				<div class="space-y-6">
-					<h6>Project</h6>
+					<h6 class="h6">Project</h6>
 					<ul class="space-y-3">
 						<li>
-							<a href="https://github.com/skeletonlabs" target="_blank" rel="noreferrer">Github Organization</a>
+							<a class="anchor" href="https://github.com/skeletonlabs" target="_blank" rel="noreferrer">Github Organization</a>
 						</li>
 						<li>
-							<a href="https://www.npmjs.com/org/skeletonlabs" target="_blank" rel="noreferrer">NPM Organization</a>
+							<a class="anchor" href="https://www.npmjs.com/org/skeletonlabs" target="_blank" rel="noreferrer">NPM Organization</a>
 						</li>
 						<li>
-							<a href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer">NPM Package</a>
+							<a class="anchor" href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer">NPM Package</a>
 						</li>
 					</ul>
 				</div>
@@ -59,10 +59,12 @@
 
 		<!-- Row 2 -->
 		<section class={cRowTwo}>
-			<p class="text-xs">
-				<a href="https://github.com/skeletonlabs/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer"> MIT License </a>
+			<p>
+				<a class="anchor" href="https://github.com/skeletonlabs/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer">
+					MIT License
+				</a>
 				<span class="opacity-10 mx-2">|</span>
-				<a href="https://skeletonlabs.co/" target="_blank" rel="noreferrer">Skeleton Labs </a>
+				<a class="anchor" href="https://skeletonlabs.co/" target="_blank" rel="noreferrer">Skeleton Labs </a>
 			</p>
 			<div class="flex space-x-4">
 				<a class="btn variant-soft" href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer">
@@ -85,9 +87,3 @@
 		</section>
 	</div>
 </div>
-
-<style lang="postcss">
-	a {
-		@apply !no-underline;
-	}
-</style>