packages/skeleton/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @skeletonlabs/skeleton
 
+## 1.11.0
+
+### Minor Changes
+
+- chore: Added `separatorText` prop to Paginator to allow localization ([#1791](https://github.com/skeletonlabs/skeleton/pull/1791))
+
+- feat: Added region props in `ListBox` and `ListBoxItem`. ([#1771](https://github.com/skeletonlabs/skeleton/pull/1771))
+
+### Patch Changes
+
+- bugfix: Removed `backdrop-blur` from `variant-form-material` because of high CPU usage on some browsers. ([#1807](https://github.com/skeletonlabs/skeleton/pull/1807))
+
+- bugfix: fixed a minor typo in the Logo Cloud stylesheet ([#1769](https://github.com/skeletonlabs/skeleton/pull/1769))
+
+- bugfix: resolved a scrolling issue when Modals exceeds the visible screen size ([#1695](https://github.com/skeletonlabs/skeleton/pull/1695))
+
 ## 1.10.0
 
 ### Minor Changes

packages/skeleton/package.json

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

packages/skeleton/scripts/tw-settings.json

@@ -6,6 +6,7 @@
 		"class",
 		"accent",
 		"active",
+		"aspectRatio",
 		"background",
 		"badge",
 		"bgBackdrop",
@@ -47,6 +48,7 @@
 		"gridColumns",
 		"height",
 		"hover",
+		"indent",
 		"justify",
 		"meter",
 		"padding",
@@ -56,6 +58,7 @@
 		"regionCaption",
 		"regionCaret",
 		"regionCell",
+		"regionChildren",
 		"regionCone",
 		"regionContent",
 		"regionControl",
@@ -79,6 +82,8 @@
 		"regionPanel",
 		"regionRowHeadline",
 		"regionRowMain",
+		"regionSummary",
+		"regionSymbol",
 		"regionTab",
 		"regionTrail",
 		"ring",

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

@@ -22,6 +22,14 @@
 	/** Provide classes to set the listbox item padding styles. */
 	export let padding: CssClasses = 'px-4 py-2';
 
+	// Props (regions)
+	/** Provide arbitrary classes to style the lead region. */
+	export let regionLead: CssClasses = '';
+	/** Provide arbitrary classes to the default region. */
+	export let regionDefault: CssClasses = '';
+	/** Provide arbitrary classes to the trail region. */
+	export let regionTrail: CssClasses = '';
+
 	// Props (a11y)
 	/** Provide the ARIA labelledby value. */
 	export let labelledby = '';
@@ -32,6 +40,9 @@
 	setContext('active', active);
 	setContext('hover', hover);
 	setContext('padding', padding);
+	setContext('regionLead', regionLead);
+	setContext('regionDefault', regionDefault);
+	setContext('regionTrail', regionTrail);
 
 	// Classes
 	const cBase = '';

packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte

@@ -24,6 +24,9 @@
 	export let active: CssClasses = getContext('active');
 	export let hover: CssClasses = getContext('hover');
 	export let padding: CssClasses = getContext('padding');
+	export let regionLead: CssClasses = getContext('regionLead');
+	export let regionDefault: CssClasses = getContext('regionDefault');
+	export let regionTrail: CssClasses = getContext('regionTrail');
 
 	// Classes
 	const cBase = 'cursor-pointer -outline-offset-[3px]';
@@ -85,11 +88,19 @@
 		}
 	}
 
+	// Base Classes
+	const cRegionLead = '';
+	const cRegionDefault = 'flex-1';
+	const cRegionTrail = '';
+
 	// Reactive
 	$: selected = multiple ? group.some((groupVal: unknown) => areDeeplyEqual(value, groupVal)) : areDeeplyEqual(group, value);
 	$: classesActive = selected ? active : hover;
 	$: classesBase = `${cBase} ${rounded} ${padding} ${classesActive} ${$$props.class ?? ''}`;
 	$: classesLabel = `${cLabel}`;
+	$: classesRegionLead = `${cRegionLead} ${regionLead}`;
+	$: classesRegionDefault = `${cRegionDefault} ${regionDefault}`;
+	$: classesRegionTrail = `${cRegionTrail} ${regionTrail}`;
 </script>
 
 <label>
@@ -116,11 +127,11 @@
 		<!-- <slot /> -->
 		<div class="listbox-label {classesLabel}">
 			<!-- Slot: Lead -->
-			{#if $$slots.lead}<div class="listbox-label-lead"><slot name="lead" /></div>{/if}
+			{#if $$slots.lead}<div class="listbox-label-lead {classesRegionLead}"><slot name="lead" /></div>{/if}
 			<!-- Slot: Default -->
-			<div class="listbox-label-content flex-1"><slot /></div>
+			<div class="listbox-label-content {classesRegionDefault}"><slot /></div>
 			<!-- Slot: Trail -->
-			{#if $$slots.trail}<div class="listbox-label-trail"><slot name="trail" /></div>{/if}
+			{#if $$slots.trail}<div class="listbox-label-trail {classesRegionTrail}"><slot name="trail" /></div>{/if}
 		</div>
 	</div>
 </label>

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

@@ -69,6 +69,8 @@
 	 * @type {string}
 	 */
 	export let buttonTextLast: CssClasses = rightAngles;
+	/** Set the label for the pages separator. */
+	export let separatorText = 'of';
 
 	// Props (A11y)
 	/** Provide the ARIA label for the First page button. */
@@ -213,7 +215,7 @@
 			<!-- Details -->
 			<button type="button" class="{buttonClasses} pointer-events-none !text-sm">
 				{settings.offset * settings.limit + 1}-{Math.min(settings.offset * settings.limit + settings.limit, settings.size)}&nbsp;<span
-					class="opacity-50">of {settings.size}</span
+					class="opacity-50">{separatorText} {settings.size}</span
 				>
 			</button>
 		{:else}

packages/skeleton/src/lib/styles/elements/forms.css

@@ -274,8 +274,8 @@
 		@apply bg-surface-500/10 dark:bg-surface-500/20;
 		/* Border */
 		@apply border-0 border-b-2;
-		/* Blur */
-		@apply backdrop-blur;
+		/* Blur / high CPU usage on some browsers, see https://github.com/skeletonlabs/skeleton/issues/1805 */
+		/* @apply backdrop-blur; */
 	}
 	.variant-form-material[type='file'] {
 		@apply !py-1.5;

packages/skeleton/src/lib/styles/elements/logo-clouds.css

@@ -10,7 +10,7 @@
 	/* === Logo Item (Child) === */
 
 	.logo-item {
-		@apply: flex-auto text-center space-x-4 shadow;
+		@apply flex-auto text-center space-x-4 shadow;
 		/* Center Contents */
 		@apply flex justify-center items-center space-x-4;
 		/* Background */

packages/skeleton/src/lib/utilities/Modal/Modal.svelte

@@ -74,9 +74,9 @@
 	export let regionFooter: CssClasses = 'flex justify-end space-x-2';
 
 	// Base Styles
-	const cBackdrop = 'fixed top-0 left-0 right-0 bottom-0';
-	const cTransitionLayer = 'w-full h-full p-4 overflow-y-auto flex justify-center';
-	const cModal = 'block'; // max-h-full overflow-y-auto overflow-x-hidden
+	const cBackdrop = 'fixed top-0 left-0 right-0 bottom-0 overflow-y-auto';
+	const cTransitionLayer = 'w-full h-fit min-h-full p-4 overflow-y-auto flex justify-center';
+	const cModal = 'block overflow-y-auto'; // max-h-full overflow-y-auto overflow-x-hidden
 	const cModalImage = 'w-full h-auto';
 
 	// Local
@@ -201,8 +201,8 @@
 			data-testid="modal-backdrop"
 			on:mousedown={onBackdropInteractionBegin}
 			on:mouseup={onBackdropInteractionEnd}
-			on:touchstart
-			on:touchend
+			on:touchstart|passive
+			on:touchend|passive
 			transition:fade|global={{ duration }}
 			use:focusTrap={true}
 		>

sites/skeleton.dev/src/routes/(inner)/components/accordions/+page.svelte

@@ -32,11 +32,6 @@
 			['<kbd class="kbd">Space</kbd> or <kbd class="kbd">Enter</kbd>', 'Toggles the item panel open or closed.']
 		]
 	};
-
-	// Local
-	const loremIpsum =
-		// cspell:disable-next-line
-		'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eligendi quibusdam odit, temporibus ullam ab enim expedita eum officia ipsum, laboriosam, nobis quasi laborum aspernatur reiciendis dignissimos optio sunt distinctio.';
 </script>
 
 <DocsShell {settings}>

sites/skeleton.dev/src/routes/(inner)/components/steppers/+page.svelte

@@ -180,8 +180,8 @@
 			<CodeBlock
 				language="html"
 				code={`
-<!-- French: Marcher 1, Marcher 2, ... -->
-<Step stepTerm='Marcher'>...</Step>\n
+<!-- French: Étape 1, Étape 2, ... -->
+<Step stepTerm='Étape'>...</Step>\n
 <!-- Spanish: Paso 1, Paso 2, ... -->
 <Step stepTerm='Paso'>...</Step>
 			`}

sites/skeleton.dev/src/routes/(inner)/elements/image-layouts/+page.svelte

@@ -81,7 +81,7 @@
 	<div>
 		<img class="h-auto max-w-full rounded-lg" src="${getImageLink({ id: 'YOErFW8AfkI', w: 128, h: 128 })}" alt="">
 	</div>
-<section>
+</section>
 `}
 				/>
 			</svelte:fragment>

sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte

@@ -78,8 +78,34 @@
 					</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<p>Implement a single instance of the drawer component in your app's root layout above the App Shell (if present).</p>
-				<CodeBlock language="html" code={`<Drawer />\n\n<!-- <AppShell>...</AppShell> -->`} />
+				<p>Implement a single instance of the drawer component your app's root layout, above the App Shell (if present).</p>
+				<CodeBlock
+					language="html"
+					code={`
+<Drawer>
+	<p>Hello Skeleton</p>
+</Drawer>\n
+<!-- <AppShell>...</AppShell> -->
+				`}
+				/>
+				<p>
+					When you wish to trigger a toast message, import <code class="code">drawerStore</code>, then follow the example below.
+				</p>
+				<CodeBlock
+					language="ts"
+					code={`
+import { drawerStore } from '@skeletonlabs/skeleton';\n
+// Open the drawer:
+function drawerOpen(): void {
+	drawerStore.open();
+}\n
+// Close the drawer:
+function drawerOpen(): void {
+	drawerStore.close();
+}
+				`}
+				/>
+				<p>For more examples and configuration options, see the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -93,6 +119,19 @@
 				and reusable via a Svelte writable store. Do not reimplement this component for each route page.
 			</p>
 		</aside>
+		<!-- Drawer Component -->
+		<section class="space-y-4">
+			<h2 class="h2">Drawer Component</h2>
+			<p>Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).</p>
+			<CodeBlock
+				language="html"
+				code={`
+<Drawer>(contents)</Drawer>
+
+<!-- <AppShell>...</AppShell> -->
+				`}
+			/>
+		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Drawer Store</h2>
 			<p>Import this anywhere you wish to control the Drawer. Provides an interface to control the drawer component.</p>

sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte

@@ -145,8 +145,34 @@
 				<button class="btn variant-filled" on:click={modalDemo}>Show Modal</button>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<p>Implement a single instance of the modal component in your app's root layout above the App Shell (if present).</p>
-				<CodeBlock language="html" code={`<Modal />\n\n<!-- <AppShell>...</AppShell> -->`} />
+				<p>Implement a single instance of the modal component your app's root layout, above the App Shell (if present).</p>
+				<CodeBlock
+					language="html"
+					code={`
+<Modal />\n
+<!-- <AppShell>...</AppShell> -->
+				`}
+				/>
+				<p>
+					When you wish to trigger a modal, import <code class="code">modalStore</code> and
+					<code class="code">ModalSettings</code>, then follow the example below.
+				</p>
+				<CodeBlock
+					language="ts"
+					code={`
+import { modalStore, type ModalSettings } from '@skeletonlabs/skeleton';\n
+// Provide the modal settings
+const modal: ModalSettings = {
+	type: 'alert',
+	title: 'Example Alert',
+	body: 'This is an example modal.',
+	image: 'https://i.imgur.com/WOgTG96.gif',
+};\n
+// Trigger the modal:
+modalStore.trigger(modal);
+				`}
+				/>
+				<p>For more examples and configuration options, see the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -162,6 +188,18 @@
 				and reusable via a Svelte writable store. Do not reimplement this component for each route page.
 			</p>
 		</aside>
+		<section class="space-y-4">
+			<h2 class="h2">Modal Component</h2>
+			<p>Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).</p>
+			<CodeBlock
+				language="html"
+				code={`
+<Modal />
+
+<!-- <AppShell>...</AppShell> -->
+				`}
+			/>
+		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Modal Store</h2>
 			<p>When you wish to trigger a modal, import the <code class="code">modalStore</code>, which acts as the modal queue.</p>

sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte

@@ -136,11 +136,31 @@
 				</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
+				<p>Implement a single instance of the toast component your app's root layout, above the App Shell (if present).</p>
+				<CodeBlock
+					language="html"
+					code={`
+<Toast />\n
+<!-- <AppShell>...</AppShell> -->
+				`}
+				/>
 				<p>
-					Import and add a single instance of the Toast component in your app's root layout. Since this is in global scope it will be
-					possible to reuse this feature throughout your entire application.
+					When you wish to trigger a toast message, import <code class="code">toastStore</code> and
+					<code class="code">ToastSettings</code>, then follow the example below.
 				</p>
-				<CodeBlock language="html" code={`<Toast />`} />
+				<CodeBlock
+					language="ts"
+					code={`
+import { toastStore, type ToastSettings } from '@skeletonlabs/skeleton';\n
+// Provide the toast settings
+const t: ToastSettings = {
+	message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit...',
+};\n
+// Trigger the toast:
+toastStore.trigger(t);
+				`}
+				/>
+				<p>For more examples and configuration options, see the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -154,6 +174,19 @@
 				and reusable via a Svelte writable store. Do not reimplement this component for each route page.
 			</p>
 		</aside>
+		<!-- Toast Component -->
+		<section class="space-y-4">
+			<h2 class="h2">Toast Component</h2>
+			<p>Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).</p>
+			<CodeBlock
+				language="html"
+				code={`
+<Toast />
+
+<!-- <AppShell>...</AppShell> -->
+				`}
+			/>
+		</section>
 		<!-- Toast Store -->
 		<section class="space-y-4">
 			<h2 class="h2">Toast Store</h2>