@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/sidebar/Sidebar.svelte

@@ -2,6 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { fade } from 'svelte/transition';
+	import X from '../../internal/icons/X.svelte';
+	import Button from '../button/Button.svelte';
 	import { getSidebarContext } from './context.js';
 
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
@@ -12,24 +14,34 @@
 		collapsible?: 'offcanvas' | 'icon' | 'none';
 		/** `SidebarHeader`, `SidebarContent` and `SidebarFooter`. */
 		children: Snippet;
+		/** Accessible names of the close buttons shown on mobile. */
+		labels?: { close?: string };
+		ref?: HTMLElement | null;
 	};
 
 	let {
 		side = 'left',
 		variant = 'sidebar',
 		collapsible = 'offcanvas',
+		ref = $bindable(null),
+		labels,
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
 	const sidebar = getSidebarContext();
+	const closeLabel = $derived(labels?.close ?? 'Close sidebar');
 
 	let collapsed = $derived(!sidebar.mobile && !sidebar.open && collapsible !== 'none');
 	let hidden = $derived(
 		sidebar.mobile ? !sidebar.openMobile : collapsed && collapsible === 'offcanvas'
 	);
 
+	function reducedMotion() {
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
 	$effect(() => {
 		if (!sidebar.openMobile) return;
 
@@ -46,15 +58,16 @@
 	<button
 		type="button"
 		tabindex="-1"
-		aria-label="Close sidebar"
+		aria-label={closeLabel}
 		class="sidebar-backdrop"
 		onclick={sidebar.closeMobile}
-		transition:fade={{ duration: 200 }}
+		transition:fade={{ duration: reducedMotion() ? 0 : 200 }}
 	></button>
 {/if}
 
 <aside
 	{...rest}
+	bind:this={ref}
 	id={sidebar.id}
 	inert={hidden}
 	data-state={collapsed ? 'collapsed' : 'expanded'}
@@ -70,111 +83,169 @@
 	]}
 >
 	<div class="sidebar-inner">
+		{#if sidebar.mobile}
+			<div class="sidebar-close">
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={X}
+					label={closeLabel}
+					onclick={sidebar.closeMobile}
+				/>
+			</div>
+		{/if}
 		{@render children()}
 	</div>
 </aside>
 
 <style>
-	.sidebar {
-		position: sticky;
-		top: 0;
-		display: flex;
-		flex-shrink: 0;
-		width: var(--sidebar-width);
-		height: var(--sidebar-height);
-		overflow: hidden;
-		transition: width 200ms ease;
-	}
+	@layer svelte-ui {
+		.sidebar {
+			position: sticky;
+			top: 0;
+			display: flex;
+			flex-shrink: 0;
+			width: var(--sidebar-width);
+			height: var(--sidebar-height);
+			overflow: hidden;
+			transition: width 200ms ease;
+		}
 
-	/* The inner panel keeps its width while the outer one shrinks, so it slides out instead of squashing */
-	.sidebar--left {
-		justify-content: flex-end;
-	}
+		/* The inner panel keeps its width while the outer one shrinks, so it slides out instead of squashing */
+		.sidebar--left {
+			justify-content: flex-end;
+		}
 
-	.sidebar--right {
-		order: 1;
-		justify-content: flex-start;
-	}
+		.sidebar--right {
+			order: 1;
+			justify-content: flex-start;
+		}
 
-	.sidebar--collapsed-offcanvas {
-		width: 0;
-	}
+		.sidebar--collapsed-offcanvas {
+			width: 0;
+		}
 
-	.sidebar--collapsed-icon {
-		width: var(--sidebar-width-icon);
-	}
+		.sidebar--collapsed-icon {
+			width: var(--sidebar-width-icon);
+		}
 
-	.sidebar-inner {
-		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
-		box-sizing: border-box;
-		width: var(--sidebar-width);
-		height: 100%;
-		background-color: var(--color-bg);
-		color: var(--color-text);
-	}
+		.sidebar-inner {
+			display: flex;
+			flex-direction: column;
+			flex-shrink: 0;
+			box-sizing: border-box;
+			width: var(--sidebar-width);
+			height: 100%;
+			background-color: var(--color-bg);
+			color: var(--color-text);
+		}
 
-	.sidebar--collapsible-icon .sidebar-inner {
-		width: 100%;
-	}
+		.sidebar--collapsible-icon .sidebar-inner {
+			width: 100%;
+		}
 
-	/* Variants */
+		/* Variants */
 
-	.sidebar--sidebar.sidebar--left .sidebar-inner {
-		border-right: 1px solid var(--color-border);
-	}
+		.sidebar--sidebar.sidebar--left .sidebar-inner {
+			border-right: 1px solid var(--color-border);
+		}
 
-	.sidebar--sidebar.sidebar--right .sidebar-inner {
-		border-left: 1px solid var(--color-border);
-	}
+		.sidebar--sidebar.sidebar--right .sidebar-inner {
+			border-left: 1px solid var(--color-border);
+		}
 
-	.sidebar--floating .sidebar-inner {
-		width: calc(var(--sidebar-width) - 16px);
-		height: calc(100% - 16px);
-		margin: 8px;
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-	}
+		.sidebar--floating .sidebar-inner {
+			width: calc(var(--sidebar-width) - 16px);
+			height: calc(100% - 16px);
+			margin: 8px;
+			border: 1px solid var(--color-border);
+			border-radius: 12px;
+			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+		}
 
-	.sidebar--floating.sidebar--collapsible-icon .sidebar-inner {
-		width: calc(100% - 16px);
-	}
+		.sidebar--floating.sidebar--collapsible-icon .sidebar-inner {
+			width: calc(100% - 16px);
+		}
 
-	.sidebar--floating.sidebar--collapsed-icon {
-		width: calc(var(--sidebar-width-icon) + 16px);
-	}
+		.sidebar--floating.sidebar--collapsed-icon {
+			width: calc(var(--sidebar-width-icon) + 16px);
+		}
 
-	/* Mobile drawer */
-
-	.sidebar--mobile {
-		position: fixed;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 50;
-		height: auto;
-		transform: translateX(-100%);
-		transition: transform 200ms ease;
-	}
+		/* Mobile drawer */
+
+		.sidebar--mobile {
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 50;
+			width: 100%;
+			height: auto;
+			transform: translateX(-100%);
+			transition: transform 200ms ease;
+		}
 
-	.sidebar--mobile.sidebar--right {
-		left: auto;
-		right: 0;
-		transform: translateX(100%);
-	}
+		.sidebar--mobile .sidebar-inner {
+			width: 100%;
+		}
 
-	.sidebar--mobile.sidebar--open-mobile {
-		transform: none;
-	}
+		.sidebar--mobile.sidebar--sidebar .sidebar-inner {
+			border-inline: none;
+		}
+
+		.sidebar--mobile.sidebar--floating .sidebar-inner {
+			width: calc(100% - 16px);
+		}
+
+		.sidebar--mobile.sidebar--right {
+			left: auto;
+			right: 0;
+			transform: translateX(100%);
+		}
+
+		.sidebar--mobile.sidebar--open-mobile {
+			transform: none;
+		}
+
+		/* Fallback for sidebars without a `SidebarHeader`, which otherwise holds the close button */
+		.sidebar-close {
+			display: flex;
+			justify-content: flex-end;
+			padding: 8px 8px 0;
+		}
+
+		.sidebar-inner:has(:global(.sidebar-header)) .sidebar-close {
+			display: none;
+		}
+
+		.sidebar-backdrop {
+			position: fixed;
+			inset: 0;
+			z-index: 49;
+			padding: 0;
+			background-color: rgba(0, 0, 0, 0.4);
+			border: none;
+		}
+
+		@media (forced-colors: active) {
+			.sidebar--floating .sidebar-inner {
+				border-color: CanvasText;
+			}
+
+			.sidebar--mobile .sidebar-inner {
+				border: 1px solid CanvasText;
+			}
 
-	.sidebar-backdrop {
-		position: fixed;
-		inset: 0;
-		z-index: 49;
-		padding: 0;
-		background-color: rgba(0, 0, 0, 0.4);
-		border: none;
+			.sidebar-backdrop {
+				background-color: transparent;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.sidebar,
+			.sidebar--mobile {
+				transition: none;
+			}
+		}
 	}
 </style>

package/dist/components/sidebar/Sidebar.svelte.d.ts

@@ -8,7 +8,12 @@ type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     collapsible?: 'offcanvas' | 'icon' | 'none';
     /** `SidebarHeader`, `SidebarContent` and `SidebarFooter`. */
     children: Snippet;
+    /** Accessible names of the close buttons shown on mobile. */
+    labels?: {
+        close?: string;
+    };
+    ref?: HTMLElement | null;
 };
-declare const Sidebar: import("svelte").Component<Props, {}, "">;
+declare const Sidebar: import("svelte").Component<Props, {}, "ref">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/components/sidebar/SidebarContent.svelte

@@ -5,26 +5,29 @@
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** `SidebarGroup`s. Scrolls when it overflows. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['sidebar-content', className]}>
+<div {...rest} bind:this={ref} class={['sidebar-content', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.sidebar-content {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
+	@layer svelte-ui {
+		.sidebar-content {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-height: 0;
+			overflow-x: hidden;
+			overflow-y: auto;
+		}
 
-	:global(.sidebar--collapsed-icon) .sidebar-content {
-		overflow: hidden;
+		:global(.sidebar--collapsed-icon) .sidebar-content {
+			overflow: hidden;
+		}
 	}
 </style>

package/dist/components/sidebar/SidebarContent.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** `SidebarGroup`s. Scrolls when it overflows. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const SidebarContent: import("svelte").Component<Props, {}, "">;
+declare const SidebarContent: import("svelte").Component<Props, {}, "ref">;
 type SidebarContent = ReturnType<typeof SidebarContent>;
 export default SidebarContent;

package/dist/components/sidebar/SidebarFooter.svelte

@@ -4,20 +4,23 @@
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['sidebar-footer', className]}>
+<div {...rest} bind:this={ref} class={['sidebar-footer', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.sidebar-footer {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px;
+	@layer svelte-ui {
+		.sidebar-footer {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			padding: 8px;
+		}
 	}
 </style>

package/dist/components/sidebar/SidebarFooter.svelte.d.ts

@@ -2,7 +2,8 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const SidebarFooter: import("svelte").Component<Props, {}, "">;
+declare const SidebarFooter: import("svelte").Component<Props, {}, "ref">;
 type SidebarFooter = ReturnType<typeof SidebarFooter>;
 export default SidebarFooter;

package/dist/components/sidebar/SidebarGroup.svelte

@@ -7,15 +7,17 @@
 		label?: string;
 		/** Usually a `SidebarMenu`. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { label, class: className, children, ...rest }: Props = $props();
+	let { label, ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 
 	const id = $props.id();
 </script>
 
 <div
 	{...rest}
+	bind:this={ref}
 	role="group"
 	aria-labelledby={label ? `${id}-label` : undefined}
 	class={['sidebar-group', className]}
@@ -25,31 +27,39 @@
 </div>
 
 <style>
-	.sidebar-group {
-		display: flex;
-		flex-direction: column;
-		min-width: 0;
-		padding: 8px;
-	}
+	@layer svelte-ui {
+		.sidebar-group {
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+			padding: 8px;
+		}
 
-	.sidebar-group-label {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		height: 32px;
-		padding: 0 8px;
-		overflow: hidden;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--color-text-muted);
-		white-space: nowrap;
-		transition:
-			margin-top 200ms ease,
-			opacity 200ms ease;
-	}
+		.sidebar-group-label {
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+			height: 32px;
+			padding: 0 8px;
+			overflow: hidden;
+			font-size: 12px;
+			font-weight: 500;
+			color: var(--color-text-muted);
+			white-space: nowrap;
+			transition:
+				margin-top 200ms ease,
+				opacity 200ms ease;
+		}
+
+		:global(.sidebar--collapsed-icon) .sidebar-group-label {
+			margin-top: -32px;
+			opacity: 0;
+		}
 
-	:global(.sidebar--collapsed-icon) .sidebar-group-label {
-		margin-top: -32px;
-		opacity: 0;
+		@media (prefers-reduced-motion: reduce) {
+			.sidebar-group-label {
+				transition: none;
+			}
+		}
 	}
 </style>

package/dist/components/sidebar/SidebarGroup.svelte.d.ts

@@ -5,7 +5,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     label?: string;
     /** Usually a `SidebarMenu`. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
+declare const SidebarGroup: import("svelte").Component<Props, {}, "ref">;
 type SidebarGroup = ReturnType<typeof SidebarGroup>;
 export default SidebarGroup;

package/dist/components/sidebar/SidebarHeader.svelte

@@ -1,23 +1,52 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import X from '../../internal/icons/X.svelte';
+	import Button from '../button/Button.svelte';
+	import { getSidebarContext } from './context.js';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		children: Snippet;
+		ref?: HTMLDivElement | null;
+		/** Accessible name of the close button shown on mobile. */
+		labels?: { close?: string };
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), labels, class: className, children, ...rest }: Props = $props();
+
+	const sidebar = getSidebarContext();
 </script>
 
-<div {...rest} class={['sidebar-header', className]}>
-	{@render children()}
+<div {...rest} bind:this={ref} class={['sidebar-header', className]}>
+	<div class="sidebar-header-content">
+		{@render children()}
+	</div>
+	{#if sidebar.mobile}
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={X}
+			label={labels?.close ?? 'Close sidebar'}
+			onclick={sidebar.closeMobile}
+		/>
+	{/if}
 </div>
 
 <style>
-	.sidebar-header {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px;
+	@layer svelte-ui {
+		.sidebar-header {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 8px;
+		}
+
+		.sidebar-header-content {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			gap: 8px;
+			min-width: 0;
+		}
 	}
 </style>

package/dist/components/sidebar/SidebarHeader.svelte.d.ts

@@ -2,7 +2,12 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     children: Snippet;
+    ref?: HTMLDivElement | null;
+    /** Accessible name of the close button shown on mobile. */
+    labels?: {
+        close?: string;
+    };
 };
-declare const SidebarHeader: import("svelte").Component<Props, {}, "">;
+declare const SidebarHeader: import("svelte").Component<Props, {}, "ref">;
 type SidebarHeader = ReturnType<typeof SidebarHeader>;
 export default SidebarHeader;

package/dist/components/sidebar/SidebarInset.svelte

@@ -5,21 +5,24 @@
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		/** The page content next to the sidebar. */
 		children: Snippet;
+		ref?: HTMLElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<main {...rest} class={['sidebar-inset', className]}>
+<main {...rest} bind:this={ref} class={['sidebar-inset', className]}>
 	{@render children()}
 </main>
 
 <style>
-	.sidebar-inset {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-width: 0;
-		background-color: var(--color-bg);
+	@layer svelte-ui {
+		.sidebar-inset {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-width: 0;
+			background-color: var(--color-bg);
+		}
 	}
 </style>

package/dist/components/sidebar/SidebarInset.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** The page content next to the sidebar. */
     children: Snippet;
+    ref?: HTMLElement | null;
 };
-declare const SidebarInset: import("svelte").Component<Props, {}, "">;
+declare const SidebarInset: import("svelte").Component<Props, {}, "ref">;
 type SidebarInset = ReturnType<typeof SidebarInset>;
 export default SidebarInset;

package/dist/components/sidebar/SidebarMenu.svelte

@@ -5,23 +5,26 @@
 	type Props = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
 		/** `SidebarMenuItem`s. */
 		children: Snippet;
+		ref?: HTMLUListElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<ul {...rest} class={['sidebar-menu', className]}>
+<ul {...rest} bind:this={ref} class={['sidebar-menu', className]}>
 	{@render children()}
 </ul>
 
 <style>
-	.sidebar-menu {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-		margin: 0;
-		padding: 0;
-		list-style: none;
+	@layer svelte-ui {
+		.sidebar-menu {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			min-width: 0;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
 	}
 </style>