@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/ui/Button.svelte

@@ -4,21 +4,40 @@
 	import type { ButtonVariant } from './ButtonVariant.js';
 	import type { ButtonSize } from './ButtonSize.js';
 	import Loader from './Loader.svelte';
+	import { resolve } from '$app/paths';
+	import { interceptLinkClick } from '../util/interceptLinkClick.js';
 
-	interface Props {
+	export interface ButtonProps {
+		/** Visual style variant of the button */
 		variant?: ButtonVariant;
+		/** Size of the button */
 		size?: ButtonSize;
+		/** URL to navigate to (renders as anchor tag) */
 		href?: string;
+		/** Show loading spinner and disable interactions */
 		loading?: boolean;
+		/** Disable the button */
 		disabled?: boolean;
+		/** Disable hover/click visual effects */
 		effectsDisabled?: boolean;
+		/** SVG icon to display on the left side */
 		svg?: string;
+		/** SVG icon to display on the right side */
 		rightSvg?: string;
+		/** Size of the icon(s) */
 		iconSize?: string;
+		/** Link target attribute (when href is provided) */
 		target?: undefined | '_self' | '_blank';
+		/** Button type attribute (when rendered as a button, not a link) */
+		type?: 'button' | 'submit' | 'reset';
+		/** Additional CSS classes */
 		class?: string;
+		/** Button content */
 		children: Snippet;
+		/** Click event handler */
 		onclick?: (event: MouseEvent) => void;
+		/** Accessible label (use when the button has no visible text) */
+		ariaLabel?: string;
 	}
 
 	let {
@@ -32,25 +51,26 @@
 		rightSvg = undefined,
 		iconSize = '18px',
 		target = undefined,
+		type = 'button',
 		class: buttonClass = '',
 		children,
-		onclick = () => {}
-	}: Props = $props();
+		onclick = undefined,
+		ariaLabel = undefined
+	}: ButtonProps = $props();
 
 	let isDisabled = $derived(loading || disabled);
 	let isLink = $derived(!!href);
 
-	let elClass = $derived(`pui-button ${buttonClass} ${variant} size-${size}${effectsDisabled ? ' effects-disabled' : ''}`);
+	let elClass = $derived(
+		`pui-button ${buttonClass} ${variant} size-${size}${effectsDisabled ? ' effects-disabled' : ''}`
+	);
 </script>
 
 {#snippet buttonContent()}
 	<div class="button">
 		{#if loading}
 			<div class="button-loader" style="height: {iconSize}">
-				<Loader
-					class={variant === 'secondary' ? 'text-primary' : 'text-secondary'}
-					sizeOverride={iconSize}
-				/>
+				<Loader sizeOverride={iconSize} />
 			</div>
 		{:else if svg}
 			<div class="button-icon">
@@ -67,269 +87,230 @@
 {/snippet}
 
 {#if isLink && href && !disabled}
-	<a {target} class={elClass} {href} {onclick}>
+	<a {target} class={elClass} aria-label={ariaLabel} href={href?.startsWith('/') ? resolve(href as any) : href} onclick={(e) => interceptLinkClick(e, { href, target, onclick })}>
 		{@render buttonContent?.()}
 	</a>
 {:else}
-	<button class={elClass} disabled={isDisabled} {onclick}>
+	<button {type} class={elClass} disabled={isDisabled} aria-label={ariaLabel} {onclick}>
 		{@render buttonContent()}
 	</button>
 {/if}
 
 <style>
 	.pui-button {
-		padding: var(--pui-spacing-2) var(--pui-spacing-4);
-		border-radius: var(--pui-radius-lg);
+		padding: 0.5rem 1rem;
+		border-radius: 6px;
 		cursor: pointer;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: all 0.2s ease-in-out;
 	}
 
 	.size-xs {
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-		line-height: var(--pui-line-height-none);
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1rem;
 	}
 
 	.size-sm {
-		padding: var(--pui-spacing-1_5) var(--pui-spacing-3);
-		font-size: var(--pui-font-size-sm);
-		line-height: var(--pui-line-height-none);
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		line-height: 1.0625rem;
 	}
 
 	.size-md {
-		padding: var(--pui-spacing-2) var(--pui-spacing-4);
-		font-size: var(--pui-font-size-base);
-		line-height: var(--pui-line-height-tight);
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		line-height: 1.125rem;
 	}
 
 	.size-lg {
-		padding: var(--pui-spacing-2_5) var(--pui-spacing-5);
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-tight);
+		padding: 0.625rem 1.25rem;
+		font-size: 1rem;
+		line-height: 1.25rem;
 	}
 
 	.size-xl {
-		padding: var(--pui-spacing-3) var(--pui-spacing-6);
-		font-size: var(--pui-font-size-lg);
-		line-height: var(--pui-line-height-snug);
+		padding: 0.75rem 1.5rem;
+		font-size: 1.125rem;
+		line-height: 1.375rem;
 	}
 
 	:global(.paper-title) .pui-button {
-		padding: var(--pui-spacing-1_5) var(--pui-spacing-2);
+		padding: 0.35rem 0.5rem;
 	}
 
 	.white {
-		--button-text-color: var(--pui-color-primary);
-		--button-bg-color: var(--pui-color-white);
+		--button-text-color: var(--ui-primary);
+		--button-bg-color: white;
 		--button-border: 0;
-		--button-hover-bg-color: var(--pui-color-accent);
-		--button-active-bg-color: var(--pui-color-accent-light);
-		--button-outline-color: var(--pui-color-accent);
+		--button-hover-bg-color: var(--ui-tertiary);
+		--button-active-bg-color: var(--ui-tertiary-light);
+		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.muted {
-		font-weight: var(--pui-font-weight-normal);
+	.secondary {
+		font-weight: normal;
 		box-sizing: border-box;
-		--button-bg-color: var(--pui-input-bg);
-		--button-border: 1px solid var(--pui-border-default);
-		--button-hover-bg-color: var(--pui-color-primary-light);
-		--button-active-bg-color: var(--pui-color-gray-500);
-		--button-outline-color: var(--pui-text-primary);
+		--button-bg-color: var(--input-bg);
+		--button-border: 1px solid var(--border-color);
+		--button-hover-bg-color: var(--border-color);
+		--button-active-bg-color: #aaaaaa;
+		--button-outline-color: var(--text-color);
 	}
 
-	.muted-subtle {
-		font-weight: var(--pui-font-weight-normal);
+	.secondary-subtle {
+		font-weight: normal;
 		box-sizing: border-box;
 		--button-bg-color: transparent;
-		--button-hover-bg-color: var(--pui-color-primary-light);
-		--button-active-bg-color: var(--pui-color-gray-500);
-		--button-outline-color: var(--pui-text-primary);
+		--button-hover-bg-color: #aaaaaa66;
+		--button-active-bg-color: #aaaaaa;
+		--button-outline-color: var(--text-color);
 	}
 
-	.muted-selected {
-		--button-bg-color: var(--pui-accent-color);
-		--button-border: 1px solid var(--pui-accent-color);
-		--button-text-color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-normal);
+	.secondary-selected {
+		--button-bg-color: var(--accent-color);
+		--button-border: 1px solid var(--accent-color);
+		--button-text-color: white;
+		font-weight: normal;
 	}
 
 	.auto-subtle {
-		--button-text-color: var(--pui-color-primary);
+		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
-		--button-hover-bg-color: var(--pui-color-primary-light);
-		--button-hover-text-color: var(--pui-color-primary);
-		--button-active-bg-color: var(--pui-color-primary);
-		--button-active-text-color: var(--pui-color-secondary);
-		--button-outline-color: var(--pui-color-accent);
+		--button-hover-bg-color: var(--ui-accent);
+		--button-hover-text-color: var(--ui-primary);
+		--button-active-bg-color: var(--ui-primary);
+		--button-active-text-color: var(--ui-accent);
+		--button-outline-color: var(--ui-tertiary);
 	}
 
 	.danger {
-		--button-text-color: var(--pui-color-white);
-		--button-bg-color: var(--pui-color-danger);
-		--button-hover-bg-color: var(--pui-color-danger-hover);
-		--button-active-bg-color: var(--pui-color-danger-active);
-		--button-outline-color: var(--pui-color-accent);
+		--button-text-color: white;
+		--button-bg-color: var(--danger-bg);
+
+		--button-hover-bg-color: var(--danger-bg-hover);
+
+		--button-active-bg-color: #b02a37;
+
+		--button-outline-color: var(--ui-tertiary);
 
 		:global(.loader) {
-			color: var(--pui-color-white);
+			color: white;
 		}
 	}
 
 	.danger-subtle {
 		background-color: initial;
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 
 		&:hover:not(:disabled) {
-			background-color: var(--pui-color-danger-subtle);
+			background-color: var(--danger-bg-subtle);
 		}
 
 		:global(.loader) {
-			color: var(--pui-text-danger);
+			color: var(--danger-text);
 		}
 	}
 
-	.secondary {
-		--button-text-color: var(--pui-color-primary);
-		--button-bg-color: var(--pui-color-secondary);
-		--button-hover-bg-color: var(--pui-color-accent);
-		--button-active-bg-color: var(--pui-color-accent-light);
-		--button-outline-color: var(--pui-color-accent);
+	.accent,
+	.pistachio {
+		--button-text-color: var(--ui-primary);
+		--button-bg-color: var(--ui-accent);
+		--button-hover-bg-color: var(--ui-tertiary);
+		--button-active-bg-color: var(--ui-tertiary-light);
+		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.secondary-outline {
-		--button-text-color: var(--pui-color-secondary);
+	.accent-outline,
+	.pistachio-outline {
+		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
-		--button-border: 1px solid var(--pui-color-secondary);
-		--button-hover-text-color: var(--pui-color-accent);
-		--button-hover-border: 1px solid var(--pui-color-accent);
-		--button-active-text-color: var(--pui-color-accent-light);
-		--button-active-border: 1px solid var(--pui-color-accent-light);
-		--button-outline-color: var(--pui-color-accent);
+		--button-border: 1px solid var(--ui-accent);
+		--button-hover-text-color: var(--ui-tertiary);
+		--button-hover-border: 1px solid var(--ui-tertiary);
+		--button-active-text-color: var(--ui-tertiary-light);
+		--button-active-border: 1px solid var(--ui-tertiary-light);
+		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.secondary-subtle {
-		--button-text-color: var(--pui-color-secondary);
+	.accent-subtle,
+	.pistachio-subtle {
+		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
-		--button-hover-text-color: var(--pui-color-primary);
-		--button-hover-bg-color: var(--pui-color-primary-light);
-		--button-active-text-color: var(--pui-color-white);
-		--button-active-bg-color: var(--pui-color-secondary-dark);
-		--button-outline-color: var(--pui-color-accent);
+		--button-hover-text-color: var(--ui-primary);
+		--button-hover-bg-color: var(--ui-accent);
+		--button-active-text-color: white;
+		--button-active-bg-color: var(--ui-accent-dark);
+		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.primary {
-		--button-bg-color: var(--pui-color-primary);
-		--button-text-color: var(--pui-color-white);
-		--button-hover-bg-color: var(--pui-color-primary-light);
-		--button-active-bg-color: var(--pui-color-primary-dark);
+	.primary,
+	.midnight {
+		--button-bg-color: var(--ui-primary);
+		--button-text-color: white;
+		--button-hover-bg-color: var(--ui-accent-dark);
+		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.primary-outline {
-		--button-text-color: var(--pui-color-primary);
+	.primary-outline,
+	.midnight-outline {
+		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
-		--button-border: 1px solid var(--pui-color-primary);
-		--button-hover-text-color: var(--pui-color-primary-light);
-		--button-hover-border: 1px solid var(--pui-color-primary-light);
-		--button-active-text-color: var(--pui-color-primary-dark);
-		--button-active-border: 1px solid var(--pui-color-primary-dark);
+		--button-border: 1px solid var(--ui-primary);
+		--button-hover-text-color: var(--ui-accent-dark);
+		--button-hover-border: 1px solid var(--ui-accent-dark);
+		--button-active-text-color: var(--ui-primary-dark);
+		--button-active-border: 1px solid var(--ui-primary-dark);
 	}
 
-	.primary-subtle {
-		--button-text-color: var(--pui-color-primary);
+	.primary-subtle,
+	.midnight-subtle {
+		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
-		--button-hover-text-color: var(--pui-color-white);
-		--button-hover-bg-color: var(--pui-color-primary);
-		--button-active-text-color: var(--pui-color-white);
-		--button-active-bg-color: var(--pui-color-primary-dark);
+		--button-hover-text-color: white;
+		--button-hover-bg-color: var(--ui-primary);
+		--button-active-text-color: white;
+		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.accent {
-		--button-text-color: var(--pui-color-black);
-		--button-bg-color: var(--pui-color-accent);
-		--button-hover-bg-color: var(--pui-color-accent-dark);
-		--button-active-bg-color: var(--pui-color-accent-light);
-		--button-outline-color: var(--pui-color-accent);
+	.tertiary,
+	.turquoise {
+		--button-text-color: var(--ui-primary);
+		--button-bg-color: var(--ui-tertiary);
+		--button-hover-bg-color: var(--ui-accent);
+		--button-active-bg-color: var(--ui-tertiary-light);
+		--button-outline-color: var(--ui-accent);
 	}
 
-	.accent-subtle {
+	.tertiary-subtle,
+	.turquoise-subtle {
 		background-color: initial;
-		color: var(--pui-color-accent-dark);
+		color: var(--ui-tertiary-dark);
 
 		&:hover:not(:disabled) {
-			background-color: rgba(var(--pui-color-accent-rgb), 0.25);
+			background-color: rgba(var(--ui-tertiary-dark-rgbc), 0.25);
 		}
 
 		&:focus-visible {
-			outline-color: var(--pui-color-accent);
-		}
-
-		:global(.loader) {
-			color: var(--pui-color-accent-dark);
+			outline-color: var(--ui-tertiary);
 		}
-	}
-
-	.success {
-		--button-text-color: var(--pui-color-white);
-		--button-bg-color: var(--pui-color-success);
-		--button-hover-bg-color: var(--pui-color-success-hover);
-		--button-active-bg-color: var(--pui-color-success-active);
-		--button-outline-color: var(--pui-color-success);
 
 		:global(.loader) {
-			color: var(--pui-color-white);
-		}
-	}
-
-	.success-subtle {
-		background-color: initial;
-		color: var(--pui-color-success);
-
-		&:hover:not(:disabled) {
-			background-color: var(--pui-color-success-subtle);
-		}
-
-		:global(.loader) {
-			color: var(--pui-color-success);
-		}
-	}
-
-	.warning {
-		--button-text-color: var(--pui-color-black);
-		--button-bg-color: var(--pui-color-warning);
-		--button-hover-bg-color: var(--pui-color-warning-hover);
-		--button-active-bg-color: var(--pui-color-warning-active);
-		--button-outline-color: var(--pui-color-warning);
-
-		:global(.loader) {
-			color: var(--pui-color-black);
-		}
-	}
-
-	.warning-subtle {
-		background-color: initial;
-		color: var(--pui-color-warning-dark);
-
-		&:hover:not(:disabled) {
-			background-color: var(--pui-color-warning-subtle);
-		}
-
-		:global(.loader) {
-			color: var(--pui-color-warning-dark);
+			color: var(--ui-tertiary-dark);
 		}
 	}
 
 	button,
 	a {
-		border-color: var(--pui-color-primary);
-		font-size: var(--pui-font-size-base);
-		font-weight: var(--pui-font-weight-semibold);
-		line-height: var(--pui-line-height-tight);
-		letter-spacing: var(--pui-letter-spacing-wide);
+		border-color: var(--ui-primary);
+		font-size: 0.875rem;
+		font-weight: 600;
+		line-height: 1.125rem;
+		letter-spacing: 0.05rem;
 		transition:
-			color var(--pui-transition-fast) var(--pui-ease-in-out),
-			background-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			border-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			box-shadow var(--pui-transition-fast) var(--pui-ease-in-out);
+			color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
 
 		color: var(--button-text-color);
 		background-color: var(--button-bg-color);
@@ -348,8 +329,8 @@
 		}
 
 		&:focus-visible {
-			outline: solid var(--pui-focus-ring-width) var(--button-outline-color, var(--pui-color-secondary-dark));
-			outline-offset: var(--pui-focus-ring-offset);
+			outline: solid 0.125rem var(--button-outline-color, var(--ui-accent-dark));
+			outline-offset: 0.125rem;
 		}
 
 		&:disabled {
@@ -358,43 +339,33 @@
 	}
 
 	:global(.dark) {
-		.muted {
-			--button-text-color: var(--pui-color-white);
-			--button-active-bg-color: var(--pui-color-dark-300);
+		.secondary {
+			--button-text-color: white;
+			--button-active-bg-color: #333333;
 		}
 
-		.muted-subtle {
-			--button-active-bg-color: var(--pui-color-dark-300);
+		.secondary-subtle {
+			--button-active-bg-color: background-color: #333333;
 		}
 
-		.muted-selected {
-			--button-text-color: var(--pui-color-white);
+		.secondary-selected {
+			--button-text-color: black;
 		}
 
 		.auto-subtle {
-			--button-text-color: var(--pui-color-white);
-			--button-hover-text-color: var(--pui-color-white);
-			--button-hover-bg-color: var(--pui-color-primary-light);
-			--button-active-text-color: var(--pui-color-secondary);
-			--button-active-bg-color: var(--pui-color-primary);
-			--button-outline-color: var(--pui-color-secondary);
-		}
-
-		.success-subtle {
-			&:hover:not(:disabled) {
-				background-color: var(--pui-color-success-subtle-dark);
-			}
-		}
-
-		.warning-subtle {
-			&:hover:not(:disabled) {
-				background-color: var(--pui-color-warning-subtle-dark);
-			}
+			--button-text-color: white;
+			--button-hover-text-color: white;
+			--button-hover-bg-color: var(--ui-primary);
+			--button-active-text-color: var(--ui-accent);
+			--button-active-bg-color: var(--ui-primary);
+			--button-outline-color: var(--ui-accent);
 		}
 	}
 
+	/* .action-icon and .input-button are applied by ActionIcon.svelte via the class prop;
+	   they must live here because the button element belongs to this component's scope */
 	.action-icon {
-		padding: var(--pui-spacing-1);
+		padding: 0.25rem;
 	}
 
 	.action-icon > div {
@@ -406,8 +377,9 @@
 	.input-button {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
-		padding: 0 var(--pui-spacing-2);
+		padding: 0 0.5rem;
 		height: 100%;
+		/* rounded-l-none py-0 !px-2 min-h-[33.6px] h-full */
 	}
 
 	.button-icon {
@@ -417,9 +389,10 @@
 	}
 
 	.button {
+		/* flex justify-center gap-x-2 */
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 		width: auto;
 		justify-content: center;
 		user-select: none;

package/dist/ui/Button.svelte.d.ts

@@ -1,21 +1,38 @@
 import type { Snippet } from 'svelte';
 import type { ButtonVariant } from './ButtonVariant.js';
 import type { ButtonSize } from './ButtonSize.js';
-interface Props {
+export interface ButtonProps {
+    /** Visual style variant of the button */
     variant?: ButtonVariant;
+    /** Size of the button */
     size?: ButtonSize;
+    /** URL to navigate to (renders as anchor tag) */
     href?: string;
+    /** Show loading spinner and disable interactions */
     loading?: boolean;
+    /** Disable the button */
     disabled?: boolean;
+    /** Disable hover/click visual effects */
     effectsDisabled?: boolean;
+    /** SVG icon to display on the left side */
     svg?: string;
+    /** SVG icon to display on the right side */
     rightSvg?: string;
+    /** Size of the icon(s) */
     iconSize?: string;
+    /** Link target attribute (when href is provided) */
     target?: undefined | '_self' | '_blank';
+    /** Button type attribute (when rendered as a button, not a link) */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
     class?: string;
+    /** Button content */
     children: Snippet;
+    /** Click event handler */
     onclick?: (event: MouseEvent) => void;
+    /** Accessible label (use when the button has no visible text) */
+    ariaLabel?: string;
 }
-declare const Button: import("svelte").Component<Props, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ui/ButtonVariant.d.ts

@@ -1 +1,15 @@
-export type ButtonVariant = 'white' | 'muted' | 'muted-subtle' | 'muted-selected' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'secondary' | 'secondary-outline' | 'secondary-subtle' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-subtle' | 'success' | 'success-subtle' | 'warning' | 'warning-subtle';
+/**
+ * Visual variants shared by Button, Badge, ActionIcon, Dropdown and Accordion.
+ *
+ * Brand variants map onto the semantic colour tokens:
+ *   - `primary`   → `--ui-primary`   (dark brand colour)
+ *   - `accent`    → `--ui-accent`    (light brand colour)
+ *   - `tertiary`  → `--ui-tertiary`  (supporting colour)
+ *
+ * The `midnight`, `pistachio` and `turquoise` names are legacy aliases for
+ * `primary`, `accent` and `tertiary` respectively. They keep working but new code
+ * should use the semantic names.
+ */
+export type ButtonVariant = 'white' | 'secondary' | 'secondary-subtle' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-outline' | 'accent-subtle' | 'tertiary' | 'tertiary-subtle' | 'shaded' | LegacyButtonVariant;
+/** @deprecated Use `primary`, `accent` and `tertiary` instead. */
+export type LegacyButtonVariant = 'pistachio' | 'pistachio-outline' | 'pistachio-subtle' | 'midnight' | 'midnight-outline' | 'midnight-subtle' | 'turquoise' | 'turquoise-subtle';