Merge fore release 10/10 (#2130)

Co-authored-by: Mahmoud Zino <74062808+Mahmoud-zino@users.noreply.github.com>
Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com>
Co-authored-by: Edrich Hans Chua <edrich@xendit.co>
Co-authored-by: A̴m̴r̴ ع̲مِےـرۅ <akkk33@protonmail.com>
Co-authored-by: Jordan Watts <91865823+jwatts777@users.noreply.github.com>
Co-authored-by: Hugo Korte <63101006+Hugos68@users.noreply.github.com>
Co-authored-by: Aaron Crockett <aaron.crockett.00@gmail.com>

.changeset/angry-fishes-study.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+bugfix: Separated light/dark classes for input validation variants

.changeset/empty-trees-fetch.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Resolved an issue that allowed focusTrap to escape hidden inputs

.changeset/fast-camels-sort.md

@@ -0,0 +1,6 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+- feat: File Dropzone and File Button now include a `fileInput` prop to reference to the input element.
+- feat: File Dropzone now forwards the `on:focus`, `on:focusin`, and `on:focusout` events.

.changeset/funny-cows-cry.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+bugfix: Resolved an issue where the Ring design token would generate invalid CSS when using the important modifier `!`

.changeset/late-cherries-admire.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added `input-chip-interface` and `input-chip-wrapper` region classes to Input Chips.

.changeset/little-dingos-repeat.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+feat: Added a `strokeLinecap` property to to Progress Radials, enabling rounded styling

.changeset/modern-bags-join.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Accordion now has RTL compatibility via the use of the `text-start` class

.changeset/nine-worms-cheat.md

@@ -0,0 +1,15 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Multiple revisions to the Tree View component:
+
+- Enhanced and properly named non-recursive Tree View events.
+- Separated the recursive Tree View under the new component RecursiveTreeView.
+- RecursiveTreeView now utilizes the `relational` prop to enable relational checking.
+- RecursiveTreeView is now using ID arrays with 2-way binding to control the Tree View state, including:
+  - `expandedNodes`
+  - `disabledNodes`
+  - `checkedNodes`
+  - `indeterminateNodes` (affects only multiple relational mode)
+- TreeViewNode now requires a unique ID to support the new checking system.

.changeset/quick-rats-doubt.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Added `title` prop to Lightswitch component for better i18n support

packages/create-skeleton-app/src/creator.js

@@ -222,9 +222,21 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), purgeCss()]
-});
-`;
+	plugins: [sveltekit(), purgeCss(`;
+
+	if (opts.codeblocks) {
+		contents += `{
+			safelist: {
+				// any selectors that begin with "hljs-" will not be purged
+				greedy: [/^hljs-/],
+			},
+		}),
+	],
+});`;
+	} else {
+		contents += `)]
+});`;
+	}
 	writeFileSync(filename, contents);
 }
 
@@ -475,9 +487,18 @@ function copyTemplate(opts) {
 			scriptEndReg,
 			`
 	// Highlight JS
-	import hljs from 'highlight.js';
+	import hljs from 'highlight.js/lib/core';
 	import 'highlight.js/styles/github-dark.css';
 	import { storeHighlightJs } from '@skeletonlabs/skeleton';
+	import xml from 'highlight.js/lib/languages/xml'; // for HTML
+	import css from 'highlight.js/lib/languages/css';
+	import javascript from 'highlight.js/lib/languages/javascript';
+	import typescript from 'highlight.js/lib/languages/typescript';
+
+	hljs.registerLanguage('xml', xml); // for HTML
+	hljs.registerLanguage('css', css);
+	hljs.registerLanguage('javascript', javascript);
+	hljs.registerLanguage('typescript', typescript);
 	storeHighlightJs.set(hljs);
 </script>`,
 		);

packages/create-skeleton-app/src/index.js

@@ -256,7 +256,7 @@ Problems? Open an issue on ${cyan('https://github.com/skeletonlabs/skeleton/issu
 	let packages = [
 		{ value: 'forms', label: 'Add Tailwind forms?', package: '@tailwindcss/forms', force: false },
 		{ value: 'typography', label: 'Add Tailwind typography?', package: '@tailwindcss/typography', force: false },
-		// { value: 'codeblocks', label: 'Add CodeBlock (installs highlight.js)?', package: 'highlight.js', force: false },
+		{ value: 'codeblocks', label: 'Add CodeBlock (installs highlight.js)?', package: 'highlight.js', force: false },
 		{ value: 'popups', label: 'Add Popups (installs floating-ui)?', package: '@floating-ui/dom', force: false },
 		// { value: 'mdsvex', label: 'Add Markdown support (installs mdsvex)?', package: 'mdsvex', force: false },
 	];

packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
 
-<div class="container h-full mx-auto flex justify-center items-center">
+<div class="container h-screen mx-auto flex justify-center items-center">
 	<div class="space-y-5">
 		<h1 class="h1">Let's get cracking bones!</h1>
 		<p>Start by exploring:</p>

packages/plugin/src/styles/components/forms.css

@@ -162,7 +162,7 @@
 
 	/* success */
 	.input-success {
-		@apply !bg-success-200 !border-success-500 !text-success-700;
+		@apply bg-success-200 dark:bg-success-200 border-success-500 dark:border-success-500 text-success-700 dark:text-success-700;
 	}
 	.input-success::-moz-placeholder {
 		@apply text-success-700;
@@ -176,7 +176,7 @@
 
 	/* warning */
 	.input-warning {
-		@apply !bg-warning-200 !border-warning-500 !text-warning-700;
+		@apply bg-warning-200 dark:bg-warning-200 border-warning-500 dark:border-warning-500 text-warning-700 dark:text-warning-700;
 	}
 	.input-warning::-moz-placeholder {
 		@apply text-warning-700;
@@ -190,7 +190,7 @@
 
 	/* error */
 	.input-error {
-		@apply !bg-error-200 !border-error-500 !text-error-500;
+		@apply bg-error-200 dark:bg-error-200 border-error-500 dark:border-error-500 text-error-500 dark:text-error-500;
 	}
 	.input-error::-moz-placeholder {
 		@apply text-error-500;

packages/plugin/src/tailwind/tokens/rings.ts

@@ -27,7 +27,7 @@ export const rings = (): CssClasses => {
 		// Example: .ring-outline-token
 		'.ring-outline-token': {
 			...ringOutlineShared,
-			'--tw-ring-color': 'rgb(23 23 23 / 0.05);' // neutral-900, 5% opacity
+			'--tw-ring-color': 'rgb(23 23 23 / 0.05)' // neutral-900, 5% opacity
 		},
 		'.dark .ring-outline-token': {
 			...ringOutlineShared,

packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts

@@ -1,6 +1,7 @@
 // Action: Focus Trap
 export function focusTrap(node: HTMLElement, enabled: boolean) {
-	const elemWhitelist = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+	const elemWhitelist =
+		'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
 	let elemFirst: HTMLElement;
 	let elemLast: HTMLElement;
 

packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte

@@ -37,7 +37,7 @@
 
 	// Classes
 	const cBase = '';
-	const cControl = 'text-left w-full flex items-center space-x-4';
+	const cControl = 'text-start w-full flex items-center space-x-4';
 	const cControlCaret = 'fill-current w-3 transition-transform duration-[200ms]';
 	const cPanel = '';
 

packages/skeleton/src/lib/components/FileButton/FileButton.svelte

@@ -8,6 +8,10 @@
 	 * @type {FileList}
 	 */
 	export let files: FileList | undefined = undefined;
+	/**
+	 * File input reference.
+	 */
+	export let fileInput: HTMLInputElement | undefined = undefined;
 	/**
 	 * Required. Set a unique name for the file input.
 	 * @type {string}
@@ -18,11 +22,8 @@
 	/** Provide a button variant or other class styles. */
 	export let button: CssClasses = 'btn variant-filled';
 
-	// Local
-	let elemFileInput: HTMLElement;
-
 	function onButtonClick(): void {
-		elemFileInput.click();
+		if (fileInput) fileInput.click();
 	}
 
 	function prunedRestProps() {
@@ -38,7 +39,7 @@
 <div class="file-button {classesBase}" data-testid="file-button">
 	<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 	<div class="w-0 h-0 overflow-hidden">
-		<input type="file" bind:this={elemFileInput} bind:files {name} {...prunedRestProps()} on:change />
+		<input type="file" bind:this={fileInput} bind:files {name} {...prunedRestProps()} on:change />
 	</div>
 	<!-- Button -->
 	<button

packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte

@@ -8,6 +8,10 @@
 	 * @type {FileList}
 	 */
 	export let files: FileList | undefined = undefined;
+	/**
+	 * File input reference.
+	 */
+	export let fileInput: HTMLInputElement | undefined = undefined;
 	/**
 	 * Required. Set a unique name for the file input.
 	 * @type {string}
@@ -55,6 +59,7 @@
 	<!-- NOTE: keep `bind:files` here, unlike FileButton -->
 	<input
 		bind:files
+		bind:this={fileInput}
 		type="file"
 		{name}
 		class="dropzone-input {classesInput}"
@@ -68,6 +73,9 @@
 		on:keydown
 		on:keyup
 		on:keypress
+		on:focus
+		on:focusin
+		on:focusout
 	/>
 	<!-- Interface -->
 	<div class="dropzone-interface {classesInterface} {regionInterface}">

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -78,6 +78,14 @@
 	/** Provide classes to set border radius styles. */
 	export let rounded: CssClasses = 'rounded-container-token';
 
+	// Props (regions)
+	/** Provide arbitrary classes to style the chip wrapper region. */
+	export let regionChipWrapper: CssClasses = '';
+	/** Provide arbitrary classes to style the chip list region. */
+	export let regionChipList: CssClasses = '';
+	/** Provide arbitrary classes to style the input field region. */
+	export let regionInput: CssClasses = '';
+
 	// Props (transition)
 	/**
 	 * Enable/Disable transitions
@@ -127,7 +135,7 @@
 
 	// Classes
 	const cBase = 'textarea cursor-pointer';
-	const cInterface = 'space-y-4';
+	const cChipWrapper = 'space-y-4';
 	const cChipList = 'flex flex-wrap gap-2';
 	const cInputField = 'unstyled bg-transparent border-0 !ring-0 p-0 w-full';
 
@@ -220,9 +228,9 @@
 	$: classesInvalid = inputValid === false ? invalid : '';
 	// Reactive
 	$: classesBase = `${cBase} ${padding} ${rounded} ${$$props.class ?? ''} ${classesInvalid}`;
-	$: classesInterface = `${cInterface}`;
-	$: classesChipList = `${cChipList}`;
-	$: classesInputField = `${cInputField}`;
+	$: classesChipWrapper = `${cChipWrapper} ${regionChipWrapper}`;
+	$: classesChipList = `${cChipList} ${regionChipList}`;
+	$: classesInput = `${cInputField} ${regionInput}`;
 	$: chipValues =
 		value?.map((val, i) => {
 			if (chipValues[i]?.val === val) return chipValues[i];
@@ -238,15 +246,15 @@
 			{#each value as option}<option value={option}>{option}</option>{/each}
 		</select>
 	</div>
-	<!-- Interface -->
-	<div class="input-chip-interface {classesInterface}">
+	<!-- Chip Wrapper -->
+	<div class="input-chip-wrapper {classesChipWrapper}">
 		<!-- Input Field -->
 		<form on:submit={addChip}>
 			<input
 				type="text"
 				bind:value={input}
 				placeholder={$$restProps.placeholder ?? 'Enter values...'}
-				class="input-chip-field {classesInputField}"
+				class="input-chip-field {classesInput}"
 				on:input={onInputHandler}
 				on:input
 				on:focus

packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte

@@ -15,6 +15,8 @@
 	export let stroke = 40; // px
 	/** Sets the base font size. Scales responsively. */
 	export let font = 56; // px
+	/** Sets the stoke-linecap value */
+	export let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';
 
 	// Props (styles)
 	/** Provide classes to set the width. */
@@ -37,7 +39,7 @@
 
 	// Calculated Values
 	const baseSize = 512; // px
-	const radius: number = baseSize / 2;
+	const radius: number = baseSize / 2 - stroke / 2;
 	let circumference: number = radius;
 	let dashoffset: number;
 
@@ -73,18 +75,19 @@
 	<!-- Draw SVG -->
 	<svg viewBox="0 0 {baseSize} {baseSize}" class="rounded-full" class:animate-spin={value === undefined}>
 		<!-- Track -->
-		<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={baseSize / 2} cx="50%" cy="50%" />
+		<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={radius} cx="50%" cy="50%" />
 
 		<!-- Meter -->
 		<circle
 			class="progress-radial-meter {cBaseMeter} {meter}"
 			stroke-width={stroke}
-			r={baseSize / 2}
+			r={radius}
 			cx="50%"
 			cy="50%"
 			style:stroke-dasharray="{circumference}
 			{circumference}"
 			style:stroke-dashoffset={dashoffset}
+			stroke-linecap={strokeLinecap}
 		/>
 
 		<!-- Center Text -->

packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts

@@ -18,7 +18,8 @@ describe('ProgressRadial.svelte', () => {
 				meter: 'stroke-black dark:stroke-white',
 				color: 'fill-black dark:fill-white',
 				font: 56,
-				label: 'testProgressRadial1'
+				label: 'testProgressRadial1',
+				roundedLineCap: true
 			}
 		});
 		expect(getByTestId('progress-radial')).toBeTruthy();