Merge pull request skeletonlabs#2227 from skeletonlabs/dev

Merge for release 11/7/2023

.changeset/gold-ads-flash.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Fixed Tree View component bug that prevented clicking Tree elements.

.changeset/ninety-dingos-search.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+chore: Tailwind Element list styles should now support text wrapping by default

.changeset/plenty-drinks-tan.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Autocomplete now accepts custom filter function using the prop `filter`

.changeset/rich-squids-decide.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Table cells are only focusable when the `interactive` prop is enabled

.changeset/seven-rockets-add.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Improved keyboard interaction and accessability for the AppRailTile

.changeset/sharp-suns-wash.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Drawers now have a smoother close animation by default

.changeset/tender-jobs-allow.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Drawer touch events are now passive

.changeset/warm-mirrors-kneel.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Progress Bar and Progress Radial now include dedicated `transition` props

.github/pull_request_template.md

@@ -8,7 +8,7 @@ Closes #{issueNumber}
 
 ## Changsets
 
-Instructions: Changesets automate our changelog. If you modify files in `/packages/skeleton`, run `pnpm changeset` in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be `minor` while chores and bugfixes should be `patch`. Please prefix the changeset message with `feat:`, `bugfix:` or `chore:`.
+Instructions: Changesets automate our changelog. If you modify files in `/packages`, run `pnpm changeset` in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be `minor` while chores and bugfixes should be `patch`. Please prefix the changeset message with `feat:`, `bugfix:` or `chore:`.
 
 ## Checklist
 
@@ -17,7 +17,7 @@ Please read and apply all [contribution requirements](https://www.skeleton.dev/d
 - [ ] This PR targets the `dev` branch (NEVER `master`)
 - [ ] Documentation reflects all relevant changes
 - [ ] Branch is prefixed with: `docs/`, `feat/`, `chore/`, `bugfix/`
-- [ ] Ensure Svelte and Typescript linting is current - run `pnpm check`
+- [ ] Ensure Svelte and Typescript linting is current - run `pnpm ci:check`
 - [ ] Ensure Prettier linting is current - run `pnpm format`
 - [ ] All test cases are passing - run `pnpm test`
 - [ ] Includes a changeset (if relevant; see above)

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

@@ -9,12 +9,16 @@
 		@apply rounded;
 		/* Flex Columns */
 		@apply inline-flex justify-center items-center space-x-2;
-		/* States */
-		@apply hover:brightness-[1.15];
 		/* Transitions */
 		@apply transition-all;
 	}
 
+	/* Interactive chips should have a hover state */
+	a.chip,
+	button.chip {
+		@apply hover:brightness-[1.15];
+	}
+
 	.chip-disabled,
 	.chip:disabled {
 		@apply !opacity-50 !cursor-not-allowed active:scale-100;

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

@@ -21,12 +21,10 @@
 		/* @apply p-2; */
 		/* Theme: Rounded */
 		@apply rounded-token;
-		/* Wrapping */
-		@apply whitespace-normal break-words;
 	}
 	.list-dl div {
 		/* @apply bg-blue-500; */
-		@apply flex items-center space-x-4 whitespace-nowrap;
+		@apply flex items-center space-x-4;
 		/* Padding */
 		@apply p-2;
 		/* Theme: Rounded */
@@ -36,7 +34,7 @@
 	.list-nav a,
 	.list-nav button,
 	.list-option {
-		@apply flex items-center space-x-4 whitespace-nowrap;
+		@apply flex items-center space-x-4;
 		/* Padding */
 		@apply px-4 py-2;
 		/* Hover */

packages/skeleton/src/lib/components/AppRail/AppRailTile.svelte

@@ -7,7 +7,7 @@
 	import { getContext } from 'svelte';
 
 	// Types
-	import type { CssClasses } from '../../index.js';
+	import type { CssClasses, SvelteEvent } from '../../index.js';
 
 	// Props
 	/**
@@ -43,7 +43,7 @@
 
 	// Classes
 	const cBase = 'cursor-pointer';
-	const cWrapper = 'flex flex-col justify-center items-stretch';
+	const cWrapper = 'flex flex-col justify-center items-stretch w-full';
 	const cInterface = 'text-center';
 	const cLabel = 'font-bold text-xs';
 
@@ -59,6 +59,18 @@
 	$: classesLead = `${regionLead}`;
 	$: classesLabel = `${cLabel} ${regionLabel}`;
 
+	// A11y Key Down Handler
+	function onKeyDown(event: SvelteEvent<KeyboardEvent, HTMLButtonElement>): void {
+		if (['Enter', 'Space'].includes(event.code)) {
+			event.preventDefault();
+			selectElemInput();
+		}
+	}
+
+	function selectElemInput(): void {
+		elemInput.click();
+	}
+
 	// RestProps
 	function prunedRestProps() {
 		delete $$restProps.class;
@@ -70,7 +82,7 @@
 	<!-- A11y attributes are not allowed on <label> -->
 	<!-- FIXME: resolve a11y warnings -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="app-rail-wrapper {classesWrapper}" on:keydown on:keyup on:keypress>
+	<button class="app-rail-wrapper {classesWrapper}" tabindex="0" on:click={selectElemInput} on:keydown={onKeyDown} on:keyup on:keypress>
 		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 		<div class="h-0 w-0 overflow-hidden">
 			<input bind:this={elemInput} type="radio" bind:group {name} {value} {...prunedRestProps()} tabindex="-1" on:click on:change />
@@ -80,5 +92,5 @@
 			{#if $$slots.lead}<div class="app-rail-lead {classesLead}"><slot name="lead" /></div>{/if}
 			<div class="app-rail-label {classesLabel}"><slot /></div>
 		</div>
-	</div>
+	</button>
 </label>

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

@@ -66,6 +66,11 @@
 	export let regionButton = 'w-full';
 	/** Provide arbitrary classes to empty message. */
 	export let regionEmpty = 'text-center';
+	/**
+	 * Provide a custom filter function.
+	 * @type {() => AutocompleteOption[]}
+	 */
+	export let filter: () => Option[] = filterOptions;
 
 	// Props (transition)
 	/**
@@ -139,7 +144,7 @@
 
 	// State
 	$: filterByAllowDeny(allowlist, denylist);
-	$: optionsFiltered = input ? filterOptions() : listedOptions;
+	$: optionsFiltered = input ? filter() : listedOptions;
 	$: sliceLimit = limit ?? optionsFiltered.length;
 	// Reactive
 	$: classesBase = `${$$props.class ?? ''}`;

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

@@ -16,11 +16,13 @@
 	export let height: CssClasses = 'h-2';
 	/** Provide classes to set rounded styles. */
 	export let rounded: CssClasses = 'rounded-token';
+	/** Provide classes to set the meter transition styles. */
+	export let transition: CssClasses = 'transition-[width]';
 
 	// Props (elements)
-	/** Provide arbitrary classes to style the meter element. */
+	/** Sets the base classes of the meter element. */
 	export let meter: CssClasses = 'bg-surface-900-50-token';
-	/** Provide arbitrary classes to style the track element. */
+	/** Sets the base classes of the track element. */
 	export let track: CssClasses = 'bg-surface-200-700-token';
 
 	// Props A11y
@@ -38,8 +40,8 @@
 	$: indeterminate = value === undefined || value < 0;
 	$: classesIndeterminate = indeterminate ? 'animIndeterminate' : '';
 	// Reactive Classes
-	$: classesTrack = `${cTrack} ${height} ${rounded} ${track} ${$$props.class ?? ''}`;
-	$: classesMeter = `${cMeter} ${rounded} ${classesIndeterminate} ${meter}`;
+	$: classesTrack = `${cTrack} ${track} ${height} ${rounded} ${$$props.class ?? ''}`;
+	$: classesMeter = `${cMeter} ${meter} ${rounded} ${classesIndeterminate} ${transition}`;
 </script>
 
 <!-- Track -->

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

@@ -17,6 +17,8 @@
 	export let font = 56; // px
 	/** Sets the stoke-linecap value */
 	export let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';
+	/** Provide classes to set the meter transition styles. */
+	export let transition: CssClasses = 'transition-[stroke-dashoffset]';
 
 	// Props (styles)
 	/** Provide classes to set the width. */
@@ -35,7 +37,7 @@
 	// Base Classes
 	const cBase = 'progress-radial relative overflow-hidden';
 	const cBaseTrack = 'fill-transparent';
-	const cBaseMeter = 'fill-transparent transition-[stroke-dashoffset] duration-200 -rotate-90 origin-[50%_50%]';
+	const cBaseMeter = 'fill-transparent -rotate-90 origin-[50%_50%]';
 
 	// Calculated Values
 	const baseSize = 512; // px
@@ -79,7 +81,7 @@
 
 		<!-- Meter -->
 		<circle
-			class="progress-radial-meter {cBaseMeter} {meter}"
+			class="progress-radial-meter {cBaseMeter} {meter} {transition}"
 			stroke-width={stroke}
 			r={radius}
 			cx="50%"

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

@@ -68,15 +68,15 @@
 	<table
 		class="{classesTable}"
 		class:table-interactive={interactive}
-		role="grid"
+		role={interactive ? "grid" : "table"}
 		use:tableA11y
 	>
 		<!-- on:keydown={(e) => onTableKeydown(elemTable, e)} -->
 		<!-- Head -->
 		<thead class="table-head {regionHead}">
 			<tr>
 				{#each source.head as heading }
-					<th class="{regionHeadCell}">{@html heading}</th>
+					<th class="{regionHeadCell}" role="columnheader">{@html heading}</th>
 				{/each}
 			</tr>
 		</thead>
@@ -92,12 +92,11 @@
 				>
 					{#each row as cell, cellIndex}
 						<!-- Cell -->
-						<!-- prettier-ignore -->
 						<td
 							class="{regionCell}"
 							role="gridcell"
 							aria-colindex={cellIndex + 1}
-							tabindex={cellIndex === 0 ? 0 : -1}
+							tabindex={cellIndex === 0 && interactive ? 0 : -1}
 						>
 							{@html Number(cell) === 0 ? cell : (cell ? cell : '-')}
 						</td>

packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte

@@ -2,7 +2,7 @@
 	import TreeViewItem from './TreeViewItem.svelte';
 	import RecursiveTreeViewItem from './RecursiveTreeViewItem.svelte';
 	import type { TreeViewNode } from './types.js';
-	import { createEventDispatcher, getContext, onMount, tick } from 'svelte';
+	import { createEventDispatcher, getContext, onMount } from 'svelte';
 
 	// this can't be passed using context, since we have to pass it to recursive children.
 	/** Provide data-driven nodes. */
@@ -34,10 +34,8 @@
 	let multiple: boolean = getContext('multiple');
 	let relational: boolean = getContext('relational');
 
-	let tempCheckedNodes: string[] = [];
-
 	// Locals
-	let group: unknown;
+	let group: unknown = multiple ? [] : '';
 	let name = '';
 
 	// events
@@ -93,33 +91,31 @@
 		}
 	}
 
-	// init check flow will messup the checked nodes, so we save it to reassign it onMount.
-	tempCheckedNodes = [...checkedNodes];
+	if (selection) {
+		if (multiple) {
+			nodes.forEach((node) => {
+				if (!Array.isArray(group)) return;
+				if (checkedNodes.includes(node.id) && !group.includes(node.id)) {
+					group.push(node.id);
+				}
+			});
+			group = group;
+		} else {
+			nodes.forEach((node) => {
+				if (checkedNodes.includes(node.id) && group !== node.id) {
+					group = node.id;
+				}
+			});
+		}
+	}
+
 	onMount(async () => {
 		if (selection) {
 			// random number as name
 			name = String(Math.random());
 
-			// init groups if not initialized yet
-			if (group === undefined) {
-				if (multiple) {
-					group = [];
-					nodes.forEach((node) => {
-						if (checkedNodes.includes(node.id) && Array.isArray(group)) group.push(node.id);
-					});
-					group = group;
-				} else if (!nodes.some((node) => checkedNodes.includes(node.id))) {
-					group = '';
-				}
-			}
-
 			// remove relational links
 			if (!relational) treeItems = [];
-
-			// reassign checkNodes to ensure component starting with the correct check values.
-			checkedNodes = [];
-			await tick();
-			checkedNodes = [...tempCheckedNodes];
 		}
 	});
 

packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte

@@ -93,20 +93,12 @@
 	// REPL: https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
 	$: if (multiple) updateCheckbox(group, indeterminate);
 	$: if (multiple) updateGroup(checked, indeterminate);
-	$: if (!multiple) updateRadio(group);
-	$: if (!multiple) updateRadioGroup(checked);
-	let initUpdate = true;
 	function updateCheckbox(group: unknown, indeterminate: boolean) {
 		if (!Array.isArray(group)) return;
 		checked = group.indexOf(value) >= 0;
 		/** @event {{checked: boolean, indeterminate: boolean}} groupChange - Fires when the group changes */
 		dispatch('groupChange', { checked: checked, indeterminate: indeterminate });
 		dispatch('childChange');
-		// called only once when initializing to apply default checks
-		if (initUpdate) {
-			onParentChange();
-			initUpdate = false;
-		}
 	}
 	function updateGroup(checked: boolean, indeterminate: boolean) {
 		if (!Array.isArray(group)) return;
@@ -115,19 +107,20 @@
 			if (index < 0) {
 				group.push(value);
 				group = group;
-				// called only when the group changes
-				onParentChange();
 			}
 		} else {
 			if (index >= 0) {
 				group.splice(index, 1);
 				group = group;
-				// called only when the group changes
-				onParentChange();
 			}
 		}
+		if (!indeterminate) {
+			onParentChange();
+		}
 	}
 
+	$: if (!multiple) updateRadio(group);
+	$: if (!multiple) updateRadioGroup(checked);
 	function updateRadio(group: unknown) {
 		checked = group === value;
 		/** @event {{checked: boolean, indeterminate: boolean}} groupChange - Fires when the group changes */