@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/breadcrumb/BreadcrumbItem.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LucideIcon } from '@lucide/svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
 	import BreadcrumbSeparator from './BreadcrumbSeparator.svelte';
 
-	type Props = {
+	type Props = Omit<HTMLLiAttributes, 'children'> & {
+		/** The li element. Bindable. */
+		ref?: HTMLLIElement | null;
 		/** Links the item. Without it, the item is the current page. */
 		href?: string;
-		/** Any Lucide icon (import from `svelte-ui/icons`). */
-		icon?: LucideIcon;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
 		children: Snippet;
 	};
 
-	let { href, icon: Icon, children }: Props = $props();
+	let {
+		ref = $bindable(null),
+		href,
+		icon: Icon,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
 {#snippet content()}
@@ -19,7 +29,7 @@
 	{@render children()}
 {/snippet}
 
-<li class="breadcrumb-item">
+<li {...rest} bind:this={ref} class={['breadcrumb-item', className]}>
 	{#if href}
 		<!-- href comes from the consumer, who resolves it; this library has no routes -->
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
@@ -31,41 +41,70 @@
 <BreadcrumbSeparator />
 
 <style>
-	.breadcrumb-item {
-		display: inline-flex;
-	}
+	@layer svelte-ui {
+		.breadcrumb-item {
+			display: inline-flex;
+		}
 
-	.breadcrumb-link,
-	.breadcrumb-page {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-	}
+		.breadcrumb-link,
+		.breadcrumb-page {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+		}
 
-	.breadcrumb-link {
-		color: inherit;
-		text-decoration: none;
-		outline: none;
-		border-radius: 4px;
-		transition: color 200ms ease;
-	}
+		.breadcrumb-link {
+			color: inherit;
+			text-decoration: none;
+			outline: none;
+			border-radius: 4px;
+			transition: color 200ms ease;
+		}
 
-	.breadcrumb-link:hover {
-		color: var(--color-text);
-	}
+		.breadcrumb-link:hover {
+			color: var(--color-text);
+		}
 
-	.breadcrumb-link:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
+		.breadcrumb-link:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
 
-	.breadcrumb-page {
-		color: var(--color-text);
-	}
+		.breadcrumb-page {
+			color: var(--color-text);
+		}
+
+		@media (pointer: coarse) {
+			.breadcrumb-link {
+				min-height: 44px;
+				min-width: 44px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.breadcrumb-link {
+				color: LinkText;
+			}
+
+			.breadcrumb-link:focus-visible {
+				outline-color: Highlight;
+			}
+
+			.breadcrumb-page {
+				font-weight: 700;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.breadcrumb-link {
+				transition: none;
+			}
+		}
 
-	.breadcrumb-item :global(.breadcrumb-item-icon) {
-		width: 14px;
-		height: 14px;
-		flex-shrink: 0;
+		.breadcrumb-item :global(.breadcrumb-item-icon) {
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+		}
 	}
 </style>

package/dist/components/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -1,12 +1,15 @@
 import type { Snippet } from 'svelte';
-import type { LucideIcon } from '@lucide/svelte';
-type Props = {
+import type { HTMLLiAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLLiAttributes, 'children'> & {
+    /** The li element. Bindable. */
+    ref?: HTMLLIElement | null;
     /** Links the item. Without it, the item is the current page. */
     href?: string;
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     children: Snippet;
 };
-declare const BreadcrumbItem: import("svelte").Component<Props, {}, "">;
+declare const BreadcrumbItem: import("svelte").Component<Props, {}, "ref">;
 type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
 export default BreadcrumbItem;

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte

@@ -1,18 +1,41 @@
 <script lang="ts">
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import ChevronRight from '../../internal/icons/ChevronRight.svelte';
+
+	type Props = Omit<HTMLLiAttributes, 'children'> & {
+		/** The li element. Bindable. */
+		ref?: HTMLLIElement | null;
+		/** Replaces the chevron. */
+		children?: Snippet;
+	};
+
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<li role="presentation" aria-hidden="true" class="breadcrumb-separator">
-	<ChevronRight />
+<li
+	{...rest}
+	bind:this={ref}
+	role="presentation"
+	aria-hidden="true"
+	class={['breadcrumb-separator', className]}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<ChevronRight />
+	{/if}
 </li>
 
 <style>
-	.breadcrumb-separator {
-		display: flex;
-	}
+	@layer svelte-ui {
+		.breadcrumb-separator {
+			display: flex;
+		}
 
-	.breadcrumb-separator :global(svg) {
-		width: 14px;
-		height: 14px;
+		.breadcrumb-separator :global(svg) {
+			width: 14px;
+			height: 14px;
+		}
 	}
 </style>

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte.d.ts

@@ -1,18 +1,11 @@
-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 BreadcrumbSeparator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BreadcrumbSeparator = InstanceType<typeof BreadcrumbSeparator>;
+import type { Snippet } from 'svelte';
+import type { HTMLLiAttributes } from 'svelte/elements';
+type Props = Omit<HTMLLiAttributes, 'children'> & {
+    /** The li element. Bindable. */
+    ref?: HTMLLIElement | null;
+    /** Replaces the chevron. */
+    children?: Snippet;
+};
+declare const BreadcrumbSeparator: import("svelte").Component<Props, {}, "ref">;
+type BreadcrumbSeparator = ReturnType<typeof BreadcrumbSeparator>;
 export default BreadcrumbSeparator;