packages/skeleton/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @skeletonlabs/skeleton
 
+## 1.10.0
+
+### Minor Changes
+
+- feat: AppRail has better support for padding, Tile and Anchors now include an `aspectRatio` property. ([#1727](https://github.com/skeletonlabs/skeleton/pull/1727))
+
+- feat: A new `Tree View` component has been added. ([#1691](https://github.com/skeletonlabs/skeleton/pull/1691))
+
+### Patch Changes
+
+- bugfix: Fix accessibility warning in Ratings component due to applied `on:click` for non-interactive elements. ([#1739](https://github.com/skeletonlabs/skeleton/pull/1739))
+
+- bugfix: Resolved an issue with Popups that caused them to be interactive when closed. ([#1721](https://github.com/skeletonlabs/skeleton/pull/1721))
+
+- bugfix: Resolved an issue that prevented the Autocomplete `allowedlist` feature from working as expected. ([#1736](https://github.com/skeletonlabs/skeleton/pull/1736))
+
 ## 1.9.0
 
 ### Minor Changes

packages/skeleton/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@skeletonlabs/skeleton",
-	"version": "1.9.0",
+	"version": "1.10.0",
 	"description": "A SvelteKit component library.",
 	"author": "endigo9740 <chris@skeletonlabs.dev>",
 	"scripts": {

packages/skeleton/postcss.config.cjs

@@ -1,11 +1,12 @@
+const path = require('path');
 const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
 const config = {
 	plugins: [
 		require('postcss-import'),
 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-		tailwindcss(),
+		tailwindcss(path.resolve(__dirname, './tailwind.config.cjs')),
 		//But others, like autoprefixer, need to run after,
 		autoprefixer
 	]

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

@@ -31,32 +31,41 @@
 	export let regionTrail: CssClasses = '';
 
 	// Props (tiles/anchors)
-	/** Tile: Provide classes to set the tile hover background color. */
+	/** Provide classes to set the tile/anchor hover background color. */
 	export let hover: CssClasses = 'bg-primary-hover-token';
-	/** Tile: Provide classes to set the tile active tile background. */
+	/** Provide classes to set the tile/anchor active tile background. */
 	export let active: CssClasses = 'bg-primary-active-token';
-	/** Tile: Provide classes to set the tile vertical spacing. */
+	/** Provide classes to set the tile/anchor vertical spacing. */
 	export let spacing: CssClasses = 'space-y-1';
+	/** Provide classes to set the tile/anchor aspect ratio. */
+	export let aspectRatio: CssClasses = 'aspect-square';
 
 	// Context
 	setContext('active', active);
 	setContext('hover', hover);
 	setContext('spacing', spacing);
+	setContext('aspectRatio', aspectRatio);
 
 	// Base Classes
 	const cBase = 'grid grid-rows-[auto_1fr_auto] overflow-y-auto';
+	const cRegionLead = 'box-border';
+	const cRegionDefault = 'box-border';
+	const cRegionTrail = 'box-border';
 
 	// Reactive
 	$: classesBase = `${cBase} ${background} ${border} ${width} ${height} ${gap} ${$$props.class || ''}`;
+	$: classesRegionLead = `${cRegionLead} ${regionLead}`;
+	$: classesRegionDefault = `${cRegionDefault} ${regionDefault}`;
+	$: classesRegionTrail = `${cRegionTrail} ${regionTrail}`;
 </script>
 
 <!-- @component A vertical navigation rail component. -->
 
 <div class="app-rail {classesBase}" data-testid="app-rail">
 	<!-- Slot: lead -->
-	<div class="app-bar-lead {regionLead}"><slot name="lead" /></div>
+	<div class="app-bar-lead {classesRegionLead}"><slot name="lead" /></div>
 	<!-- Slot: Default -->
-	<div class="app-bar-default {regionDefault}"><slot /></div>
+	<div class="app-bar-default {classesRegionDefault}"><slot /></div>
 	<!-- Slot: lead -->
-	<div class="app-bar-trail {regionTrail}"><slot name="trail" /></div>
+	<div class="app-bar-trail {classesRegionTrail}"><slot name="trail" /></div>
 </div>

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

@@ -23,17 +23,18 @@
 	export let hover: CssClasses = getContext('hover');
 	export let active: CssClasses = getContext('active');
 	export let spacing: CssClasses = getContext('spacing');
+	export let aspectRatio: CssClasses = getContext('aspectRatio');
 
 	// Classes
 	const cBase = 'unstyled';
-	const cWrapper = 'w-full aspect-square flex flex-col justify-center items-stretch text-center space-y-1';
+	const cWrapper = 'w-full flex flex-col justify-center items-stretch text-center space-y-1'; // CHRIS: keep `w-full` here please
 	const cLabel = 'font-bold text-xs';
 
 	// State
 	$: classActive = selected ? active : '';
 	// Reactive
-	$: classesBase = `${cBase}  ${$$props.class || ''}`;
-	$: classesWrapper = `${cWrapper} ${hover} ${spacing} ${classActive}`;
+	$: classesBase = `${cBase} ${$$props.class || ''}`;
+	$: classesWrapper = `${cWrapper} ${aspectRatio} ${hover} ${spacing} ${classActive}`;
 	$: classesLead = `${regionLead}`;
 	$: classesLabel = `${cLabel} ${regionLabel}`;
 

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

@@ -38,10 +38,12 @@
 	export let hover: CssClasses = getContext('hover');
 	export let active: CssClasses = getContext('active');
 	export let spacing: CssClasses = getContext('spacing');
+	export let width: CssClasses = getContext('width');
+	export let aspectRatio: CssClasses = getContext('aspectRatio');
 
 	// Classes
 	const cBase = 'cursor-pointer';
-	const cWrapper = 'w-full aspect-square flex flex-col justify-center items-stretch';
+	const cWrapper = 'flex flex-col justify-center items-stretch';
 	const cInterface = 'text-center';
 	const cLabel = 'font-bold text-xs';
 
@@ -51,8 +53,8 @@
 	// State
 	$: classActive = group === value ? active : '';
 	// Reactive
-	$: classesBase = `${cBase}  ${$$props.class || ''}`;
-	$: classesWrapper = `${cWrapper} ${hover} ${classActive}`;
+	$: classesBase = `${cBase} ${$$props.class || ''}`;
+	$: classesWrapper = `${cWrapper} ${aspectRatio} ${width} ${hover} ${classActive}`;
 	$: classesInterface = `${cInterface} ${spacing}`;
 	$: classesLead = `${regionLead}`;
 	$: classesLabel = `${cLabel} ${regionLabel}`;

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

@@ -61,32 +61,31 @@
 	// Local
 	$: listedOptions = options;
 
-	// Allowed Options
-	function filterByAllowed(): void {
+	function filterByAllowDeny() {
+		let _options = [...options];
+		// Allowed Options
 		if (allowlist.length) {
-			listedOptions = [...options].filter((option: AutocompleteOption) => allowlist.includes(option.value));
-		} else {
-			// IMPORTANT: required if the list goes from populated -> empty
-			listedOptions = [...options];
+			_options = _options.filter((option) => allowlist.includes(option.value));
 		}
-	}
 
-	// Denied Options
-	function filterByDenied(): void {
+		// Denied Options
 		if (denylist.length) {
-			const denySet = new Set(denylist);
-			listedOptions = [...options].filter((option: AutocompleteOption) => !denySet.has(option.value));
-		} else {
-			// IMPORTANT: required if the list goes from populated -> empty
-			listedOptions = [...options];
+			_options = _options.filter((option) => !denylist.includes(option.value));
+		}
+
+		// Reset options
+		if (!allowlist.length && !denylist.length) {
+			_options = options;
 		}
+
+		listedOptions = _options;
 	}
 
 	function filterOptions(): AutocompleteOption[] {
 		// Create a local copy of options
 		let _options = [...listedOptions];
 		// Filter options
-		_options = _options.filter((option: AutocompleteOption) => {
+		_options = _options.filter((option) => {
 			// Format the input search value
 			const inputFormatted = String(input).toLowerCase().trim();
 			// Format the option
@@ -103,8 +102,7 @@
 	}
 
 	// State
-	$: if (allowlist) filterByAllowed();
-	$: if (denylist) filterByDenied();
+	$: if (allowlist.length || denylist.length) filterByAllowDeny();
 	$: optionsFiltered = input ? filterOptions() : listedOptions;
 	$: sliceLimit = limit !== undefined ? limit : optionsFiltered.length;
 	// Reactive

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

@@ -85,15 +85,15 @@
 	const cLabel = 'w-full md:w-auto';
 
 	// Local
-	let lastPage = Math.ceil(settings.size / settings.limit - 1);
+	let lastPage = Math.max(0, Math.ceil(settings.size / settings.limit - 1));
 	let controlPages: number[] = getNumerals();
 
 	function onChangeLength(): void {
 		settings.offset = 0;
 		/** @event {{ length: number }} amount - Fires when the amount selection input changes.  */
 		dispatch('amount', settings.limit);
 
-		lastPage = Math.ceil(settings.size / settings.limit - 1);
+		lastPage = Math.max(0, Math.ceil(settings.size / settings.limit - 1));
 		controlPages = getNumerals();
 	}
 
@@ -145,11 +145,17 @@
 		return pages;
 	}
 
+	function updateSize(size: number) {
+		lastPage = Math.max(0, Math.ceil(size / settings.limit - 1));
+		controlPages = getNumerals();
+	}
+
 	// State
 	$: classesButtonActive = (page: number) => {
 		return page === settings.offset ? `${active} pointer-events-none` : '';
 	};
 	$: maxNumerals, onChangeLength();
+	$: updateSize(settings.size);
 	// Reactive Classes
 	$: classesBase = `${cBase} ${justify} ${$$props.class ?? ''}`;
 	$: classesLabel = `${cLabel}`;

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

@@ -46,30 +46,44 @@
 		});
 	}
 
+	function isFull(value: number, index: number) {
+		return Math.floor(value) >= index + 1;
+	}
+
+	function isHalf(value: number, index: number) {
+		return value === index + 0.5;
+	}
+
 	// Classes
 	const cBase = 'w-full flex';
 
 	// Reactive
-	$: elemInteractive = interactive ? 'button' : 'span';
-	$: attrInteractive = interactive ? { type: 'button' } : {};
 	$: classesBase = `${cBase} ${text} ${fill} ${justify} ${spacing} ${$$props.class ?? ''}`;
 </script>
 
 <div class="ratings {classesBase}" data-testid="rating-bar">
 	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 	{#each Array(max) as _, i}
-		{#if Math.floor(value) >= i + 1}
-			<svelte:element this={elemInteractive} {...attrInteractive} class="rating-icon {regionIcon}" on:click={() => iconClick(i)}>
-				<slot name="full" />
-			</svelte:element>
-		{:else if value === i + 0.5}
-			<svelte:element this={elemInteractive} {...attrInteractive} class="rating-icon {regionIcon}" on:click={() => iconClick(i)}>
-				<slot name="half" />
-			</svelte:element>
+		{#if interactive}
+			<button class="rating-icon {regionIcon}" type="button" on:click={() => iconClick(i)}>
+				{#if isFull(value, i)}
+					<slot name="full" />
+				{:else if isHalf(value, i)}
+					<slot name="half" />
+				{:else}
+					<slot name="empty" />
+				{/if}
+			</button>
 		{:else}
-			<svelte:element this={elemInteractive} {...attrInteractive} class="rating-icon {regionIcon}" on:click={() => iconClick(i)}>
-				<slot name="empty" />
-			</svelte:element>
+			<span class="rating-icon {regionIcon}">
+				{#if isFull(value, i)}
+					<slot name="full" />
+				{:else if isHalf(value, i)}
+					<slot name="half" />
+				{:else}
+					<slot name="empty" />
+				{/if}
+			</span>
 		{/if}
 	{/each}
 </div>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	// Types
+	import type { CssClasses } from '../../index.js';
+
+	// Props (parent)
+	/** Provide classes to set the tree width. */
+	export let width: CssClasses = 'w-full';
+	/** Provide classes to set the vertical spacing between items. */
+	export let spacing: CssClasses = 'space-y-1';
+
+	// Props (children)
+	/** Provide classes to set the tree item padding styles. */
+	export let padding: CssClasses = 'py-4 px-4';
+	/** Provide classes to set the tree children indentation */
+	export let indent: CssClasses = 'ml-4';
+	/** Provide classes to set the tree item hover styles. */
+	export let hover: CssClasses = 'hover:variant-soft';
+	/** Provide classes to set the tree item rounded styles. */
+	export let rounded: CssClasses = 'rounded-container-token';
+
+	// Props (symbols)
+	/** Set the rotation of the item caret in the open state. */
+	export let caretOpen: CssClasses = 'rotate-180';
+	/** Set the rotation of the item caret in the closed state. */
+	export let caretClosed: CssClasses = '';
+	/* Set the hyphen symbol opacity for non-expandable rows. */
+	export let hyphenOpacity: CssClasses = 'opacity-10';
+
+	// Props (regions)
+	/** Provide arbitrary classes to the tree item summary region. */
+	export let regionSummary: CssClasses = '';
+	/** Provide arbitrary classes to the symbol icon region. */
+	export let regionSymbol: CssClasses = '';
+	/** Provide arbitrary classes to the children region. */
+	export let regionChildren: CssClasses = '';
+
+	// Props A11y
+	/** Provide the ARIA labelledby value. */
+	export let labelledby = '';
+
+	// Context API
+	setContext('padding', padding);
+	setContext('indent', indent);
+	setContext('hover', hover);
+	setContext('rounded', rounded);
+	setContext('caretOpen', caretOpen);
+	setContext('caretClosed', caretClosed);
+	setContext('hyphenOpacity', hyphenOpacity);
+	setContext('regionSummary', regionSummary);
+	setContext('regionSymbol', regionSymbol);
+	setContext('regionChildren', regionChildren);
+
+	// Reactive
+	$: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
+</script>
+
+<div class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable="true" aria-label={labelledby}>
+	<slot />
+</div>

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

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+
+import Tree from '$lib/components/TreeView/TreeView.svelte';
+
+describe('Tree.svelte', () => {
+	it('Renders with minimal props', async () => {
+		const { getByTestId } = render(Tree);
+		expect(getByTestId('tree')).toBeTruthy();
+	});
+
+	it('Renders with all props', async () => {
+		const { getByTestId } = render(Tree, {
+			props: {
+				width: 'w-full',
+				spacing: 'space-y-1',
+				padding: 'py-4',
+				indent: 'ml-4',
+				hover: 'hover:variant-soft',
+				rounded: 'rounded-container-token',
+				caretOpen: 'rotate-180',
+				caretClosed: 'rotate-90',
+				regionSummary: 'bg-red-600',
+				regionCaret: 'bg-red-600',
+				regionChildren: 'bg-red-600',
+				labelledby: 'tree label'
+			}
+		});
+		expect(getByTestId('tree')).toBeTruthy();
+	});
+});