@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/button/Button.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import type { LucideIcon } from '@lucide/svelte';
+	import type { IconComponent } from '../../icon.js';
 	import Spinner from '../spinner/Spinner.svelte';
 
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		/** Renders an <a> instead of a <button>. External (http) links open in a new tab. */
+		/** The button or anchor element. Bindable. */
+		ref?: HTMLButtonElement | HTMLAnchorElement | null;
 		href?: string;
 		target?: string;
 		rel?: string;
@@ -14,16 +16,19 @@
 		/** Replaces the icon with a Spinner and blocks clicks. */
 		loading?: boolean;
 		/** `overlay` is a translucent, blurred, fully rounded button for use on top of images or media. */
-		variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'overlay';
+		variant?: 'primary' | 'secondary' | 'ghost' | 'overlay';
 		size?: 'sm' | 'md' | 'lg';
-		/** Any Lucide icon (import from `svelte-ui/icons`). */
-		icon?: LucideIcon;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
 		/** Accessible name. Required when the button has no label (icon-only). */
 		label?: string;
+		/** Replaces the icon, e.g. for a custom SVG or an Avatar. */
+		leading?: Snippet;
 		children?: Snippet;
 	};
 
 	let {
+		ref = $bindable(null),
 		href,
 		target,
 		rel,
@@ -34,6 +39,7 @@
 		size = 'md',
 		icon: Icon,
 		label,
+		leading,
 		class: className,
 		children,
 		...rest
@@ -42,13 +48,15 @@
 	let iconOnly = $derived(!children);
 	let resolvedTarget = $derived(target ?? (href?.startsWith('http') ? '_blank' : undefined));
 	let resolvedRel = $derived(rel ?? (resolvedTarget === '_blank' ? 'noopener' : undefined));
+	/* href comes from the consumer, who resolves it; this library has no routes */
+	let linkProps = $derived({ href, target: resolvedTarget, rel: resolvedRel });
 	let classes = $derived([
 		'button',
 		`button--${variant}`,
 		`button--${size}`,
 		{
 			'button--icon-only': iconOnly,
-			'button--no-icon': !Icon && !loading,
+			'button--no-icon': !Icon && !leading && !loading,
 			'button--loading': loading
 		},
 		className
@@ -58,19 +66,21 @@
 {#snippet content()}
 	{#if loading}
 		<Spinner class="button-spinner" aria-hidden="true" />
+	{:else if leading}
+		{@render leading()}
 	{:else if Icon}<Icon class="button-icon" aria-hidden="true" />{/if}
 	{#if children}<span class="button-label">{@render children()}</span>{/if}
 {/snippet}
 
 {#if href && !disabled && !loading}
 	<!-- href comes from the consumer, who resolves it; this library has no routes -->
-	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-	<a {...rest} {href} target={resolvedTarget} rel={resolvedRel} aria-label={label} class={classes}>
+	<a {...rest} {...linkProps} bind:this={ref} aria-label={label} class={classes}>
 		{@render content()}
 	</a>
 {:else}
 	<button
 		{...rest}
+		bind:this={ref}
 		{type}
 		disabled={disabled || loading}
 		aria-busy={loading || undefined}
@@ -82,166 +92,194 @@
 {/if}
 
 <style>
-	.button {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 6px;
-		min-width: 0;
-		box-sizing: border-box;
-		border: none;
-		border-radius: 10px;
-		font-family: inherit;
-		font-size: 13px;
-		text-decoration: none;
-		outline: none;
-		cursor: pointer;
-		user-select: none;
-		transition:
-			background-color 200ms ease,
-			color 200ms ease,
-			opacity 200ms ease;
-	}
-
-	.button:disabled {
-		cursor: not-allowed;
-		opacity: 0.7;
-	}
-
-	.button--loading:disabled {
-		cursor: progress;
-		opacity: 1;
-	}
-
-	.button-label {
-		overflow: hidden;
-		min-width: 0;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.button:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
-
-	.button :global(.button-icon) {
-		width: 16px;
-		height: 16px;
-		flex-shrink: 0;
-	}
-
-	/* 2px smaller than the icon it replaces */
-	.button :global(.button-spinner) {
-		--spinner-size: 14px;
-	}
-
-	.button--sm :global(.button-spinner) {
-		--spinner-size: 12px;
-	}
-
-	/* Sizes */
-
-	.button--lg {
-		height: 36px;
-		padding: 0 20px 0 16px;
-	}
-
-	.button--md {
-		height: 32px;
-		padding: 0 15px 0 11px;
-	}
-
-	.button--sm {
-		height: 28px;
-		padding: 0 12px 0 9px;
-		gap: 5px;
-		border-radius: 8px;
-		font-size: 12px;
-	}
-
-	.button--sm :global(.button-icon) {
-		width: 14px;
-		height: 14px;
-	}
-
-	.button--no-icon.button--sm {
-		padding: 0 12px;
-	}
-
-	.button--no-icon.button--lg {
-		padding: 0 20px;
-	}
-
-	.button--no-icon.button--md {
-		padding: 0 16px;
-	}
-
-	/* Icon-only is square */
-	.button--icon-only.button--lg {
-		width: 36px;
-		padding: 0;
-	}
-
-	.button--icon-only.button--md {
-		width: 32px;
-		padding: 0;
-	}
-
-	.button--icon-only.button--sm {
-		width: 28px;
-		padding: 0;
-	}
-
-	/* Variants */
-
-	.button--primary {
-		background-color: var(--color-accent);
-		color: var(--color-accent-foreground);
-	}
-
-	.button--primary:hover:not(:disabled) {
-		background-color: var(--color-accent-hover);
-	}
-
-	.button--secondary {
-		background-color: var(--color-surface);
-		color: var(--color-text);
-	}
-
-	.button--secondary:hover:not(:disabled) {
-		background-color: var(--color-surface-hover);
-	}
-
-	.button--outline {
-		border: 1px solid var(--color-border-strong);
-		background-color: transparent;
-		color: var(--color-text);
-	}
-
-	.button--outline:hover:not(:disabled) {
-		background-color: var(--color-surface);
-	}
-
-	.button--ghost {
-		background-color: transparent;
-		color: var(--color-text);
-	}
-
-	.button--ghost:hover:not(:disabled) {
-		background-color: var(--color-surface);
-	}
-
-	/* Pill with a label, circle when icon-only */
-	.button--overlay {
-		border-radius: 999px;
-		background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
-		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
-		color: var(--color-text);
-	}
-
-	.button--overlay:hover:not(:disabled) {
-		background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
+	@layer svelte-ui {
+		.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			gap: 6px;
+			min-width: 0;
+			box-sizing: border-box;
+			border: none;
+			border-radius: 10px;
+			font-family: inherit;
+			font-size: 13px;
+			text-decoration: none;
+			outline: none;
+			cursor: pointer;
+			user-select: none;
+			transition:
+				background-color 200ms ease,
+				color 200ms ease,
+				opacity 200ms ease;
+		}
+
+		.button:disabled {
+			cursor: not-allowed;
+			opacity: 0.7;
+		}
+
+		.button--loading:disabled {
+			cursor: progress;
+			opacity: 1;
+		}
+
+		.button-label {
+			overflow: hidden;
+			min-width: 0;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.button:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
+
+		.button :global(.button-icon) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
+
+		/* 2px smaller than the icon it replaces */
+		.button :global(.button-spinner) {
+			--spinner-size: 14px;
+		}
+
+		.button--sm :global(.button-spinner) {
+			--spinner-size: 12px;
+		}
+
+		/* Sizes */
+
+		.button--lg {
+			height: 36px;
+			padding: 0 20px 0 16px;
+		}
+
+		.button--md {
+			height: 32px;
+			padding: 0 15px 0 11px;
+		}
+
+		.button--sm {
+			height: 28px;
+			padding: 0 12px 0 9px;
+			gap: 5px;
+			border-radius: 8px;
+			font-size: 12px;
+		}
+
+		.button--sm :global(.button-icon) {
+			width: 14px;
+			height: 14px;
+		}
+
+		.button--no-icon.button--sm {
+			padding: 0 12px;
+		}
+
+		.button--no-icon.button--lg {
+			padding: 0 20px;
+		}
+
+		.button--no-icon.button--md {
+			padding: 0 16px;
+		}
+
+		/* Icon-only is square */
+		.button--icon-only.button--lg {
+			width: 36px;
+			padding: 0;
+		}
+
+		.button--icon-only.button--md {
+			width: 32px;
+			padding: 0;
+		}
+
+		.button--icon-only.button--sm {
+			width: 28px;
+			padding: 0;
+		}
+
+		/* Variants */
+
+		.button--primary {
+			background-color: var(--color-accent);
+			color: var(--color-accent-foreground);
+		}
+
+		.button--primary:hover:not(:disabled) {
+			background-color: var(--color-accent-hover);
+		}
+
+		.button--secondary {
+			background-color: var(--color-surface);
+			color: var(--color-text);
+		}
+
+		.button--secondary:hover:not(:disabled) {
+			background-color: var(--color-surface-hover);
+		}
+
+		.button--ghost {
+			background-color: transparent;
+			color: var(--color-text);
+		}
+
+		.button--ghost:hover:not(:disabled) {
+			background-color: var(--color-surface);
+		}
+
+		/* Pill with a label, circle when icon-only */
+		.button--overlay {
+			border-radius: 999px;
+			background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
+			backdrop-filter: blur(8px);
+			-webkit-backdrop-filter: blur(8px);
+			color: var(--color-text);
+		}
+
+		.button--overlay:hover:not(:disabled) {
+			background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
+		}
+
+		@media (pointer: coarse) {
+			.button {
+				min-height: 44px;
+			}
+
+			.button--icon-only {
+				min-width: 44px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.button {
+				border: 1px solid ButtonText;
+			}
+
+			.button:focus-visible {
+				outline-color: Highlight;
+			}
+
+			.button--primary {
+				border-width: 2px;
+			}
+
+			.button:disabled:not(.button--loading) {
+				color: GrayText;
+				border-color: GrayText;
+				opacity: 1;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.button {
+				transition: none;
+			}
+		}
 	}
 </style>

package/dist/components/button/Button.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { LucideIcon } from '@lucide/svelte';
+import type { IconComponent } from '../../icon.js';
 type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** Renders an <a> instead of a <button>. External (http) links open in a new tab. */
+    /** The button or anchor element. Bindable. */
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
     href?: string;
     target?: string;
     rel?: string;
@@ -11,14 +13,16 @@ type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** Replaces the icon with a Spinner and blocks clicks. */
     loading?: boolean;
     /** `overlay` is a translucent, blurred, fully rounded button for use on top of images or media. */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'overlay';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'overlay';
     size?: 'sm' | 'md' | 'lg';
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     /** Accessible name. Required when the button has no label (icon-only). */
     label?: string;
+    /** Replaces the icon, e.g. for a custom SVG or an Avatar. */
+    leading?: Snippet;
     children?: Snippet;
 };
-declare const Button: import("svelte").Component<Props, {}, "">;
+declare const Button: import("svelte").Component<Props, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/button-group/ButtonGroup.svelte

@@ -3,6 +3,8 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		orientation?: 'horizontal' | 'vertical';
 		/** Accessible name for the group. */
 		label?: string;
@@ -10,11 +12,19 @@
 		children: Snippet;
 	};
 
-	let { orientation = 'horizontal', label, class: className, children, ...rest }: Props = $props();
+	let {
+		ref = $bindable(null),
+		orientation = 'horizontal',
+		label,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
 <div
 	{...rest}
+	bind:this={ref}
 	role="group"
 	aria-label={label}
 	class={['button-group', `button-group--${orientation}`, className]}
@@ -23,67 +33,54 @@
 </div>
 
 <style>
-	.button-group {
-		display: inline-flex;
-		gap: 1px;
-		width: fit-content;
-	}
-
-	.button-group--vertical {
-		flex-direction: column;
-	}
-
-	/* Keep the focus ring above neighbouring buttons */
-	.button-group > :global(*) {
-		position: relative;
-	}
-
-	.button-group > :global(:is(:focus-visible, :has(:focus-visible))) {
-		z-index: 1;
-	}
+	@layer svelte-ui {
+		.button-group {
+			display: inline-flex;
+			gap: 1px;
+			width: fit-content;
+		}
 
-	.button-group--vertical > :global(*),
-	.button-group--vertical > :global(* > .button) {
-		width: 100%;
-	}
+		.button-group--vertical {
+			flex-direction: column;
+		}
 
-	/* Outline buttons share their borders instead of sitting 1px apart */
-	.button-group:has(> :global(.button--outline), > :global(* > .button--outline)) {
-		gap: 0;
-	}
+		/* Keep the focus ring above neighbouring buttons */
+		.button-group > :global(*) {
+			position: relative;
+		}
 
-	.button-group--horizontal > :global(.button--outline:not(:first-child)),
-	.button-group--horizontal > :global(:not(:first-child):has(> .button--outline)) {
-		margin-inline-start: -1px;
-	}
+		.button-group > :global(:is(:focus-visible, :has(:focus-visible))) {
+			z-index: 1;
+		}
 
-	.button-group--vertical > :global(.button--outline:not(:first-child)),
-	.button-group--vertical > :global(:not(:first-child):has(> .button--outline)) {
-		margin-block-start: -1px;
-	}
+		.button-group--vertical > :global(*),
+		.button-group--vertical > :global(* > .button) {
+			width: 100%;
+		}
 
-	/* Square the inner corners; `* > .button` reaches a ContextMenu's trigger */
-	.button-group--horizontal > :global(:not(:first-child)),
-	.button-group--horizontal > :global(:not(:first-child) > .button) {
-		border-start-start-radius: 0;
-		border-end-start-radius: 0;
-	}
+		/* Square the inner corners; `* > .button` reaches a ContextMenu's trigger */
+		.button-group--horizontal > :global(:not(:first-child)),
+		.button-group--horizontal > :global(:not(:first-child) > .button) {
+			border-start-start-radius: 0;
+			border-end-start-radius: 0;
+		}
 
-	.button-group--horizontal > :global(:not(:last-child)),
-	.button-group--horizontal > :global(:not(:last-child) > .button) {
-		border-start-end-radius: 0;
-		border-end-end-radius: 0;
-	}
+		.button-group--horizontal > :global(:not(:last-child)),
+		.button-group--horizontal > :global(:not(:last-child) > .button) {
+			border-start-end-radius: 0;
+			border-end-end-radius: 0;
+		}
 
-	.button-group--vertical > :global(:not(:first-child)),
-	.button-group--vertical > :global(:not(:first-child) > .button) {
-		border-start-start-radius: 0;
-		border-start-end-radius: 0;
-	}
+		.button-group--vertical > :global(:not(:first-child)),
+		.button-group--vertical > :global(:not(:first-child) > .button) {
+			border-start-start-radius: 0;
+			border-start-end-radius: 0;
+		}
 
-	.button-group--vertical > :global(:not(:last-child)),
-	.button-group--vertical > :global(:not(:last-child) > .button) {
-		border-end-start-radius: 0;
-		border-end-end-radius: 0;
+		.button-group--vertical > :global(:not(:last-child)),
+		.button-group--vertical > :global(:not(:last-child) > .button) {
+			border-end-start-radius: 0;
+			border-end-end-radius: 0;
+		}
 	}
 </style>

package/dist/components/button-group/ButtonGroup.svelte.d.ts

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     orientation?: 'horizontal' | 'vertical';
     /** Accessible name for the group. */
     label?: string;
     /** Buttons, or ContextMenus with a Button trigger (split button). */
     children: Snippet;
 };
-declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+declare const ButtonGroup: import("svelte").Component<Props, {}, "ref">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;