@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

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

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

package/dist/components/sidebar/SidebarMenuItem.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { slide } from 'svelte/transition';
-	import type { LucideIcon } from '@lucide/svelte';
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import type { IconComponent } from '../../icon.js';
+	import ChevronRight from '../../internal/icons/ChevronRight.svelte';
+	import Ellipsis from '../../internal/icons/Ellipsis.svelte';
 	import Button from '../button/Button.svelte';
 	import ContextMenu from '../context-menu/ContextMenu.svelte';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'onclick'> & {
 		/** Links the item. Ignored when the item has `items`. */
 		href?: string;
-		/** Any Lucide icon (import from `svelte-ui/icons`). Stays visible when the sidebar is collapsed to icons. */
-		icon?: LucideIcon;
+		/** Any icon component, e.g. from `@lucide/svelte`. Stays visible when the sidebar is collapsed to icons. */
+		icon?: IconComponent;
 		/** Marks the item as the current page. */
 		active?: boolean;
 		/** Short count or status at the end of the item, e.g. unread messages. */
@@ -24,6 +25,9 @@
 		menu?: Snippet;
 		onclick?: () => void;
 		children: Snippet;
+		/** Accessible name of the menu trigger. */
+		labels?: { more?: string };
+		ref?: HTMLLIElement | null;
 	};
 
 	let {
@@ -35,12 +39,20 @@
 		expanded = $bindable(false),
 		menu,
 		onclick,
-		children
+		children,
+		labels,
+		ref = $bindable(null),
+		class: className,
+		...rest
 	}: Props = $props();
 
 	const id = $props.id();
 	let classes = $derived(['sidebar-menu-button', { 'sidebar-menu-button--active': active }]);
 
+	function reducedMotion() {
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
 	function toggle() {
 		expanded = !expanded;
 		onclick?.();
@@ -54,7 +66,11 @@
 	{#if items}<ChevronRight class="sidebar-menu-item-chevron" aria-hidden="true" />{/if}
 {/snippet}
 
-<li class={['sidebar-menu-item', { 'sidebar-menu-item--has-menu': menu }]}>
+<li
+	{...rest}
+	bind:this={ref}
+	class={['sidebar-menu-item', { 'sidebar-menu-item--has-menu': menu }, className]}
+>
 	{#if items}
 		<button
 			type="button"
@@ -81,7 +97,13 @@
 		<div class="sidebar-menu-item-menu">
 			<ContextMenu align="end">
 				{#snippet trigger(props)}
-					<Button {...props} variant="ghost" size="sm" icon={Ellipsis} label="More" />
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						icon={Ellipsis}
+						label={labels?.more ?? 'More'}
+					/>
 				{/snippet}
 				{@render menu()}
 			</ContextMenu>
@@ -89,133 +111,192 @@
 	{/if}
 
 	{#if items && expanded}
-		<ul id="{id}-items" class="sidebar-menu-sub" transition:slide={{ duration: 200 }}>
+		<ul
+			id="{id}-items"
+			class="sidebar-menu-sub"
+			transition:slide={{ duration: reducedMotion() ? 0 : 200 }}
+		>
 			{@render items()}
 		</ul>
 	{/if}
 </li>
 
 <style>
-	.sidebar-menu-item {
-		position: relative;
-		min-width: 0;
-	}
-
-	.sidebar-menu-button {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		height: 32px;
-		padding: 0 8px;
-		box-sizing: border-box;
-		overflow: hidden;
-		background-color: transparent;
-		border: none;
-		border-radius: 8px;
-		font: inherit;
-		font-size: 13px;
-		color: var(--color-text-secondary);
-		text-align: left;
-		text-decoration: none;
-		outline: none;
-		cursor: pointer;
-		transition:
-			background-color 150ms ease,
-			color 150ms ease,
-			width 200ms ease;
-	}
-
-	.sidebar-menu-button:hover {
-		background-color: var(--color-surface);
-		color: var(--color-text);
-	}
+	@layer svelte-ui {
+		.sidebar-menu-item {
+			position: relative;
+			min-width: 0;
+		}
 
-	.sidebar-menu-button:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: -2px;
-	}
+		.sidebar-menu-button {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 100%;
+			height: 32px;
+			padding: 0 8px;
+			box-sizing: border-box;
+			overflow: hidden;
+			background-color: transparent;
+			border: none;
+			border-radius: 8px;
+			font: inherit;
+			font-size: 13px;
+			color: var(--color-text-secondary);
+			text-align: left;
+			text-decoration: none;
+			outline: none;
+			cursor: pointer;
+			transition:
+				background-color 150ms ease,
+				color 150ms ease,
+				width 200ms ease;
+		}
 
-	.sidebar-menu-button--active {
-		background-color: var(--color-surface);
-		color: var(--color-text);
-		font-weight: 500;
-	}
+		.sidebar-menu-button:hover {
+			background-color: var(--color-surface);
+			color: var(--color-text);
+		}
 
-	.sidebar-menu-item--has-menu > .sidebar-menu-button {
-		padding-right: 36px;
-	}
+		.sidebar-menu-button:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: -2px;
+		}
 
-	.sidebar-menu-item :global(.sidebar-menu-item-icon) {
-		width: 16px;
-		height: 16px;
-		flex-shrink: 0;
-	}
+		.sidebar-menu-button--active {
+			background-color: var(--color-surface);
+			color: var(--color-text);
+			font-weight: 500;
+		}
 
-	.sidebar-menu-item-label {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+		.sidebar-menu-item--has-menu > .sidebar-menu-button {
+			padding-right: 36px;
+		}
 
-	.sidebar-menu-item-badge {
-		font-size: 12px;
-		font-variant-numeric: tabular-nums;
-		color: var(--color-text-muted);
-	}
+		.sidebar-menu-item :global(.sidebar-menu-item-icon) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
 
-	.sidebar-menu-item :global(.sidebar-menu-item-chevron) {
-		width: 14px;
-		height: 14px;
-		flex-shrink: 0;
-		color: var(--color-text-muted);
-		transition: rotate 200ms ease;
-	}
+		.sidebar-menu-item-label {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
 
-	.sidebar-menu-button[aria-expanded='true'] :global(.sidebar-menu-item-chevron) {
-		rotate: 90deg;
-	}
+		.sidebar-menu-item-badge {
+			font-size: 12px;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text-muted);
+		}
 
-	/* Menu trigger, shown while the item is hovered or the menu has focus */
-	.sidebar-menu-item-menu {
-		position: absolute;
-		top: 2px;
-		right: 2px;
-		opacity: 0;
-		transition: opacity 150ms ease;
-	}
+		.sidebar-menu-item :global(.sidebar-menu-item-chevron) {
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+			color: var(--color-text-muted);
+			transition: rotate 200ms ease;
+		}
 
-	.sidebar-menu-item:hover > .sidebar-menu-item-menu,
-	.sidebar-menu-item-menu:focus-within {
-		opacity: 1;
-	}
+		.sidebar-menu-button[aria-expanded='true'] :global(.sidebar-menu-item-chevron) {
+			rotate: 90deg;
+		}
 
-	@media (hover: none) {
+		/* Menu trigger, shown while the item is hovered or the menu has focus */
 		.sidebar-menu-item-menu {
+			position: absolute;
+			top: 2px;
+			right: 2px;
+			opacity: 0;
+			transition: opacity 150ms ease;
+		}
+
+		.sidebar-menu-item:hover > .sidebar-menu-item-menu,
+		.sidebar-menu-item-menu:focus-within {
 			opacity: 1;
 		}
-	}
 
-	.sidebar-menu-sub {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin: 2px 0 2px 15px;
-		padding: 0 0 0 8px;
-		list-style: none;
-		border-left: 1px solid var(--color-border);
-	}
+		@media (hover: none) {
+			.sidebar-menu-item-menu {
+				opacity: 1;
+			}
+		}
 
-	/* Collapsed to icons: a square button with the label clipped (it stays the accessible name) */
-	:global(.sidebar--collapsed-icon) .sidebar-menu-item .sidebar-menu-button {
-		width: 32px;
-		padding: 0 8px;
-	}
+		.sidebar-menu-sub {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			margin: 2px 0 2px 15px;
+			padding: 0 0 0 8px;
+			list-style: none;
+			border-left: 1px solid var(--color-border);
+		}
+
+		/* Collapsed to icons: a square button with the label clipped (it stays the accessible name) */
+		:global(.sidebar--collapsed-icon) .sidebar-menu-item .sidebar-menu-button {
+			width: 32px;
+			padding: 0 8px;
+		}
+
+		@media (pointer: coarse) {
+			.sidebar-menu-button {
+				min-height: 44px;
+			}
 
-	:global(.sidebar--collapsed-icon) .sidebar-menu-item-menu,
-	:global(.sidebar--collapsed-icon) .sidebar-menu-sub {
-		display: none;
+			.sidebar-menu-item-menu {
+				top: 0;
+				right: 0;
+			}
+
+			.sidebar-menu-item-menu :global(.button) {
+				min-width: 44px;
+				min-height: 44px;
+			}
+
+			.sidebar-menu-item--has-menu > .sidebar-menu-button {
+				padding-right: 48px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.sidebar-menu-button {
+				color: ButtonText;
+			}
+
+			.sidebar-menu-button:hover {
+				outline: 1px solid Highlight;
+				outline-offset: -1px;
+			}
+
+			.sidebar-menu-button--active {
+				background-color: Highlight;
+				color: HighlightText;
+			}
+
+			.sidebar-menu-button:focus-visible {
+				outline: 2px solid CanvasText;
+				outline-offset: -2px;
+			}
+
+			.sidebar-menu-sub {
+				border-left-color: CanvasText;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.sidebar-menu-button,
+			.sidebar-menu-item :global(.sidebar-menu-item-chevron),
+			.sidebar-menu-item-menu {
+				transition: none;
+			}
+		}
+
+		:global(.sidebar--collapsed-icon) .sidebar-menu-item-menu,
+		:global(.sidebar--collapsed-icon) .sidebar-menu-sub {
+			display: none;
+		}
 	}
 </style>

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

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { LucideIcon } from '@lucide/svelte';
-type Props = {
+import type { HTMLAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'onclick'> & {
     /** Links the item. Ignored when the item has `items`. */
     href?: string;
-    /** Any Lucide icon (import from `svelte-ui/icons`). Stays visible when the sidebar is collapsed to icons. */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. Stays visible when the sidebar is collapsed to icons. */
+    icon?: IconComponent;
     /** Marks the item as the current page. */
     active?: boolean;
     /** Short count or status at the end of the item, e.g. unread messages. */
@@ -17,7 +18,12 @@ type Props = {
     menu?: Snippet;
     onclick?: () => void;
     children: Snippet;
+    /** Accessible name of the menu trigger. */
+    labels?: {
+        more?: string;
+    };
+    ref?: HTMLLIElement | null;
 };
-declare const SidebarMenuItem: import("svelte").Component<Props, {}, "expanded">;
+declare const SidebarMenuItem: import("svelte").Component<Props, {}, "ref" | "expanded">;
 type SidebarMenuItem = ReturnType<typeof SidebarMenuItem>;
 export default SidebarMenuItem;

package/dist/components/sidebar/SidebarProvider.svelte

@@ -8,9 +8,16 @@
 		open?: boolean;
 		/** A `Sidebar` and a `SidebarInset`. Size them with the `--sidebar-width`, `--sidebar-width-icon` and `--sidebar-height` custom properties. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { open = $bindable(true), class: className, children, ...rest }: Props = $props();
+	let {
+		open = $bindable(true),
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 
 	const id = $props.id();
 	let mobile = $state(false);
@@ -46,17 +53,19 @@
 	});
 </script>
 
-<div {...rest} class={['sidebar-provider', className]}>
+<div {...rest} bind:this={ref} class={['sidebar-provider', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.sidebar-provider {
-		--sidebar-width: 256px;
-		--sidebar-width-icon: 48px;
-		--sidebar-height: 100svh;
-		display: flex;
-		width: 100%;
-		min-height: var(--sidebar-height);
+	@layer svelte-ui {
+		.sidebar-provider {
+			--sidebar-width: 256px;
+			--sidebar-width-icon: 48px;
+			--sidebar-height: 100svh;
+			display: flex;
+			width: 100%;
+			min-height: var(--sidebar-height);
+		}
 	}
 </style>

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

@@ -5,7 +5,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     open?: boolean;
     /** A `Sidebar` and a `SidebarInset`. Size them with the `--sidebar-width`, `--sidebar-width-icon` and `--sidebar-height` custom properties. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const SidebarProvider: import("svelte").Component<Props, {}, "open">;
+declare const SidebarProvider: import("svelte").Component<Props, {}, "ref" | "open">;
 type SidebarProvider = ReturnType<typeof SidebarProvider>;
 export default SidebarProvider;

package/dist/components/sidebar/SidebarSeparator.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
+	import type { ComponentProps } from 'svelte';
 	import Separator from '../separator/Separator.svelte';
+
+	type Props = ComponentProps<typeof Separator>;
+
+	let { ref = $bindable(null), style, ...rest }: Props = $props();
 </script>
 
-<Separator decorative={false} style="margin: 0 8px;" />
+<Separator {...rest} bind:ref decorative={false} style="margin: 0 8px;{style ? ` ${style}` : ''}" />

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

@@ -1,18 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SidebarSeparator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SidebarSeparator = InstanceType<typeof SidebarSeparator>;
+declare const SidebarSeparator: import("svelte").Component<Omit<import("svelte/elements").HTMLAttributes<HTMLDivElement>, "children"> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+    ref?: HTMLDivElement | null;
+}, {}, "ref">;
+type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
 export default SidebarSeparator;

package/dist/components/sidebar/SidebarTrigger.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
-	import PanelLeft from '@lucide/svelte/icons/panel-left';
+	import type { ComponentProps } from 'svelte';
+	import PanelLeft from '../../internal/icons/PanelLeft.svelte';
 	import Button from '../button/Button.svelte';
 	import { getSidebarContext } from './context.js';
 
-	type Props = {
+	type Props = Omit<ComponentProps<typeof Button>, 'href' | 'target' | 'rel' | 'type'> & {
 		/** Accessible name of the button. */
 		label?: string;
 	};
 
-	let { label = 'Toggle sidebar' }: Props = $props();
+	let {
+		label = 'Toggle sidebar',
+		icon = PanelLeft,
+		ref = $bindable(null),
+		onclick,
+		...rest
+	}: Props = $props();
 
 	const sidebar = getSidebarContext();
 </script>
@@ -16,9 +23,14 @@
 <Button
 	variant="ghost"
 	size="sm"
-	icon={PanelLeft}
+	{icon}
 	{label}
+	{...rest}
+	bind:ref
 	aria-controls={sidebar.id}
 	aria-expanded={sidebar.mobile ? sidebar.openMobile : sidebar.open}
-	onclick={sidebar.toggle}
+	onclick={(event) => {
+		sidebar.toggle();
+		onclick?.(event);
+	}}
 />

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

@@ -1,7 +1,9 @@
-type Props = {
+import type { ComponentProps } from 'svelte';
+import Button from '../button/Button.svelte';
+type Props = Omit<ComponentProps<typeof Button>, 'href' | 'target' | 'rel' | 'type'> & {
     /** Accessible name of the button. */
     label?: string;
 };
-declare const SidebarTrigger: import("svelte").Component<Props, {}, "">;
+declare const SidebarTrigger: import("svelte").Component<Props, {}, "ref">;
 type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
 export default SidebarTrigger;

package/dist/components/skeleton/Skeleton.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		ref?: HTMLDivElement | null;
+	};
 
-	let { class: className, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, ...rest }: Props = $props();
 </script>
 
-<div {...rest} aria-hidden="true" class={['skeleton', className]}></div>
+<div {...rest} bind:this={ref} aria-hidden="true" class={['skeleton', className]}></div>
 
 <style>
-	.skeleton {
-		flex-shrink: 0;
-		border-radius: 6px;
-		background-color: var(--color-surface);
-		animation: skeleton-pulse 2s ease-in-out infinite;
-	}
+	@layer svelte-ui {
+		.skeleton {
+			flex-shrink: 0;
+			border-radius: 6px;
+			background-color: var(--color-surface);
+			animation: skeleton-pulse 2s ease-in-out infinite;
+		}
 
-	@keyframes skeleton-pulse {
-		50% {
-			opacity: 0.5;
+		@keyframes skeleton-pulse {
+			50% {
+				opacity: 0.5;
+			}
 		}
-	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.skeleton {
-			animation: none;
+		@media (forced-colors: active) {
+			.skeleton {
+				border: 1px solid GrayText;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.skeleton {
+				animation: none;
+			}
 		}
 	}
 </style>

package/dist/components/skeleton/Skeleton.svelte.d.ts

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