Merge branch 'dev'

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -11,20 +11,25 @@ body:
     required: false
 - type: textarea
   attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
+    label: Reproduction / Steps To Reproduce
+    description: Stackblitz/Link to a repository with steps to reproduce the behavior.
     placeholder: |
+      As you can see in this code example/Stackblitz link/repostitory
       1. Using this component...
       2. With these properties...
       3. Click '...'
       4. See error...
   validations:
     required: false
+- type: markdown
+  attributes:
+    value: |
+      Bug Reports with a repository with a full reproduction or a Stackblitz can be anwswered far quicker, so please consider including as much information as possible to let us help you quicker!
 - type: textarea
   attributes:
     label: Anything else?
     description: |
       Links? References? Anything that will give us more context about the issue you are encountering!
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
   validations:
-    required: false
+    required: false

.gitignore

@@ -8,7 +8,6 @@ dist
 !.env.example
 coverage
 pnpm-lock.yaml
-.vscode
 .temp
 src/lib/tailwind/generated
 *.tgz

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"streetsidesoftware.code-spell-checker"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "cSpell.language": "en"
+}

cspell.json

@@ -0,0 +1,123 @@
+{
+	"language": "en",
+	"ignorePaths": ["src/lib/tailwind/generated/**", "static/**", "pnpm-lock.yaml", "package-lock.json", "yarn.lock", "package/**"],
+	"dictionaries": ["html", "typescript", "softwareTerms", "companies"],
+	"allowCompoundWords": true,
+	"words": [
+		"Abril",
+		"autocollapse",
+		"autohide",
+		"Barebones",
+		"Benzara",
+		"Berganza",
+		"blockquote",
+		"bluenight",
+		"callout",
+		"carbonads",
+		"Chicunamictlán",
+		"Codepen",
+		"colindex",
+		"colormatrix",
+		"combobox",
+		"Consolas",
+		"contenteditable",
+		"cpath",
+		"Cruisin",
+		"csvg",
+		"datetime",
+		"delisted",
+		"describedby",
+		"destring",
+		"Destrings",
+		"doctag",
+		"dropzone",
+		"Elems",
+		"endigo",
+		"Fatface",
+		"Felte",
+		"fieldset",
+		"filesize",
+		"flexbox",
+		"Flowbite",
+		"fontawesome",
+		"Fonticons",
+		"FOSS",
+		"Gekko",
+		"gravesites",
+		"Grotesk",
+		"hamlindigo",
+		"hljs",
+		"hovera",
+		"hoverable",
+		"iframe",
+		"incidunt",
+		"ipsum",
+		"iste",
+		"Javis",
+		"JSDocced",
+		"labelledby",
+		"laborum",
+		"Lightswitch",
+		"lightswitches",
+		"listbox",
+		"maiores",
+		"Menlo",
+		"minima",
+		"mininal",
+		"Muertos",
+		"Nahua",
+		"Neue",
+		"noirlight",
+		"Noto",
+		"nowrap",
+		"Nussbaum",
+		"officia",
+		"ofrendas",
+		"Paginators",
+		"Pérez",
+		"Playfair",
+		"PNPM",
+		"postcss",
+		"poweredby",
+		"preconfigured",
+		"Prefs",
+		"premade",
+		"Quense",
+		"Quickstart",
+		"rcgy",
+		"rgba",
+		"roadmap",
+		"Roboto",
+		"rowindex",
+		"Sarenor",
+		"Schennink",
+		"Scrollbars",
+		"seafoam",
+		"Segoe",
+		"skeletonlabs",
+		"slnt",
+		"stylesheet",
+		"sveld",
+		"svelte",
+		"sveltejs",
+		"sveltekit",
+		"Tahar",
+		"tailwindcolorshades",
+		"tailwindcss",
+		"testid",
+		"textareas",
+		"Themeable",
+		"Themer",
+		"tickmarks",
+		"Transpiles",
+		"unsub",
+		"Unsubscriber",
+		"Vercel",
+		"Vitest",
+		"vite",
+		"wght",
+		"Wonka",
+		"xmark",
+		"xpro"
+	]
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@skeletonlabs/skeleton",
-	"version": "v1.2.0",
+	"version": "v1.2.5",
 	"description": "A SvelteKit component library.",
 	"author": "endigo9740 <chris@skeletonlabs.dev>",
 	"scripts": {
@@ -53,6 +53,7 @@
 		"@vercel/analytics": "^0.1.11",
 		"autoprefixer": "^10.4.14",
 		"c8": "^7.13.0",
+		"cspell": "^6.31.1",
 		"eslint": "^8.37.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
@@ -99,7 +100,6 @@
 		"./src/lib/themes/*",
 		"!./dist/**/*.test.*"
 	],
-	"svelte": "./dist/index.js",
 	"typesVersions": {
 		">4.0": {
 			"index": [

scripts/compile-css-to-js.cjs

@@ -41,7 +41,7 @@ async function generateAllTWClasses() {
 	const result = await postcss().use(tailwindcss(twConfig)).process(css, { from: cssEntryPath });
 	const cssInJs = postcssJs.objectify(result.root);
 
-	// Caches the TW classes so we don't have to generate them again after the intial run
+	// Caches the TW classes so we don't have to generate them again after the initial run
 	fs.writeFileSync('./.temp/twClasses.cjs', `module.exports = ${JSON.stringify(cssInJs)}`);
 
 	return structuredClone(cssInJs); // return as a POJO

scripts/post-build.js

@@ -42,7 +42,7 @@ function extractJSDocBlocks() {
 	}
 }
 
-//Rescursive function for traversing node hierarchy to get JSDocs blocks, different node types have the information we want in different places
+// Recursive function for traversing node hierarchy to get JSDocs blocks, different node types have the information we want in different places
 function _extractJSDocBlocks(srcFile, propsObj) {
 	ts.forEachChild(srcFile, (node) => {
 		if (node?.jsDoc) {

src/docs/components/DocsAppBar/DocsAppBar.svelte

@@ -24,7 +24,7 @@
 	// Local
 	let isOsMac = false;
 
-	// Set Search Shortkey Keys
+	// Set Search Keyboard Shortcut
 	if (browser) {
 		let os = navigator.userAgent;
 		isOsMac = os.search('Mac') !== -1;

src/docs/layouts/DocsShell/DocsShell.svelte

@@ -11,13 +11,13 @@
 	// Partials
 	import Header from '$docs/layouts/DocsShell/partials/Header.svelte';
 	import PanelProps from '$docs/layouts/DocsShell/partials/PanelProps.svelte';
-	import PanelParams from './partials/PanelParams.svelte';
-	import PanelSlots from './partials/PanelSlots.svelte';
 	import PanelClasses from './partials/PanelClasses.svelte';
 	import PanelEvents from './partials/PanelEvents.svelte';
 	import PanelKeyboard from './partials/PanelKeyboard.svelte';
+	import PanelParams from './partials/PanelParams.svelte';
+	import PanelSlots from './partials/PanelSlots.svelte';
 	// Utilities
-	import { docSellDefaults } from '$docs/layouts/DocsShell/defaults';
+	import { docShellDefaults } from '$docs/layouts/DocsShell/defaults';
 
 	// Props
 	export let settings: DocsShellSettings;
@@ -34,7 +34,7 @@
 	// Page Data
 	const pageData: DocsShellSettings = {
 		// Define defaults first
-		...docSellDefaults,
+		...docShellDefaults,
 		// Local Overrides
 		...{ docsPath: $page.url.pathname },
 		// Prop Settings Values

src/docs/layouts/DocsShell/defaults.ts

@@ -1,6 +1,6 @@
 import { DocsFeature, type DocsShellSettings } from '$docs/layouts/DocsShell/types';
 
-export let docSellDefaults: DocsShellSettings = {
+export let docShellDefaults: DocsShellSettings = {
 	// Heading
 	feature: DocsFeature.Component,
 	name: '(name)',

src/docs/layouts/DocsShell/partials/Header.svelte

@@ -79,7 +79,7 @@
 		<!-- Dependencies -->
 		{#if pageData.dependencies?.length}
 			{#each pageData.dependencies as d}
-				<a class={cChip} href={d.url} target="_blank" rel="noreferrer" title="Required Depedency">
+				<a class={cChip} href={d.url} target="_blank" rel="noreferrer" title="Required Dependency">
 					<i class="fa-solid fa-down-left-and-up-right-to-center text-[16px]" />
 					<span>{d.label}</span>
 				</a>

src/docs/layouts/DocsShell/partials/PanelEvents.svelte

@@ -2,7 +2,7 @@
 	// Types
 	import type { DocsShellSettings } from '$docs/layouts/DocsShell/types';
 	// Sveld Mapper
-	import { sveldeMapperEvents } from '$docs/layouts/DocsShell/sveldMapper';
+	import { sveldMapperEvents } from '$docs/layouts/DocsShell/sveldMapper';
 	// Components
 	import Table from '$lib/components/Table/Table.svelte';
 
@@ -20,7 +20,7 @@
 	{#if pageData.components}
 		{#each pageData.components as comp}
 			{#if comp.sveld.events.length > 0}
-				{@const tableSource = sveldeMapperEvents(comp)}
+				{@const tableSource = sveldMapperEvents(comp)}
 				<section class="space-y-4">
 					{#if comp.label}<h2>{comp.label}</h2>{/if}
 					{#if comp.descEvents}<div>{@html comp.descEvents}</div>{/if}

src/docs/layouts/DocsShell/sveldMapper.ts

@@ -41,7 +41,7 @@ export function sveldMapperSlots(component: Component): TableSource {
 }
 
 // Mapper: Events
-export function sveldeMapperEvents(component: Component): TableSource {
+export function sveldMapperEvents(component: Component): TableSource {
 	const { events } = component.sveld;
 	const eventsHeadings = ['Name', 'Type', 'Element', 'Response', 'Description'];
 	return {

src/docs/layouts/DocsShell/types.ts

@@ -46,7 +46,7 @@ export interface DocsShellSettings {
 	name: string;
 	/** The feature description */
 	description: string;
-	/** Specifiy the GitHub source path for the feature (partial) */
+	/** Specify the GitHub source path for the feature (partial) */
 	source?: string;
 	/** List of import alias names. */
 	imports?: string[];
@@ -63,9 +63,9 @@ export interface DocsShellSettings {
 		/** Package URL */
 		url: string;
 	};
-	/** Specifify the GitHub documentation source for the feature (partial) */
+	/** Specify the GitHub documentation source for the feature (partial) */
 	docsPath?: string;
-	/** Provide list of depedency links.  */
+	/** Provide list of dependency links.  */
 	dependencies?: Link[];
 	/** WAI-ARIA APG reference page URL. */
 	aria?: string;

src/docs/layouts/DocsThemer/DocsThemer.svelte

@@ -297,10 +297,10 @@
 			<hr class="opacity-50" />
 			<!-- Slide Toggles -->
 			<div class="grid grid-cols-4 gap-4 place-items-center">
-				<SlideToggle name="exampeSliderThree" checked />
-				<SlideToggle name="exampeSliderOne" active="bg-primary-500" checked />
-				<SlideToggle name="exampeSliderTwo" active="bg-secondary-500" checked />
-				<SlideToggle name="exampeSliderFour" active="bg-tertiary-500" checked />
+				<SlideToggle name="exampleSliderThree" checked />
+				<SlideToggle name="exampleSliderOne" active="bg-primary-500" checked />
+				<SlideToggle name="exampleSliderTwo" active="bg-secondary-500" checked />
+				<SlideToggle name="exampleSliderFour" active="bg-tertiary-500" checked />
 			</div>
 		</section>
 

src/docs/layouts/LayoutPage/LayoutPage.svelte

@@ -28,12 +28,14 @@
 			<!-- Ad Position -->
 			{#if $storeVercelProductionMode === true}
 				<!-- Production Ad -->
+				<!-- cspell:disable -->
 				<script
 					async
 					type="text/javascript"
 					src="//cdn.carbonads.com/carbon.js?serve=CWYD627U&placement=carbonadsnet"
 					id="_carbonads_js"
 				></script>
+				<!-- cspell:enable -->
 			{:else}
 				<!-- Staging Placeholder -->
 				<!-- <div class="bg-surface-50-900-token ring-[1px] ring-surface-500/10 w-[286px] h-[120px] flex justify-center items-center">

src/docs/links.ts

@@ -41,7 +41,7 @@ export const menuNavLinks: any = [
 		id: 'base',
 		title: 'Globals',
 		list: [
-			{ href: '/elements/core', label: 'Core', keywords: 'body, scroll, scrollbar, hr, horizontal, rule' },
+			{ href: '/elements/core', label: 'Core', keywords: 'body, scroll, scrollbar, hr, horizontal, rule, divider' },
 			{
 				href: '/elements/typography',
 				label: 'Typography',
@@ -60,7 +60,7 @@ export const menuNavLinks: any = [
 		list: [
 			{ href: '/elements/alerts', label: 'Alerts', keywords: 'message, notification' },
 			{ href: '/elements/badges', label: 'Badges', keywords: 'sup, sub, overlay, favorite, icon' },
-			{ href: '/elements/breadcrumbs', label: 'Breadcrumbs', keywords: 'nav, navigation, seperator, hierarchy' },
+			{ href: '/elements/breadcrumbs', label: 'Breadcrumbs', keywords: 'nav, navigation, separator, hierarchy' },
 			{ href: '/elements/buttons', label: 'Buttons', keywords: 'click, anchor, icon, preload' },
 			{ href: '/elements/cards', label: 'Cards', keywords: 'header, footer, background, cell, region' },
 			{ href: '/elements/chips', label: 'Chips', keywords: 'action, select, selection, filter, filtering, interactive' },