@placeholderco/placeholder-ui 2.5.4 → 2.6.0

package/dist/display/Avatar.svelte

@@ -88,7 +88,7 @@
 
 <div class="avatar-container {classes}">
 	{#if onClick}
-		<button onclick={onClick}>
+		<button type="button" onclick={onClick}>
 			{@render img()}
 		</button>
 	{:else if href}

package/dist/editors/tiptap/toolbar/ColorButton.svelte

@@ -84,6 +84,7 @@
 			<div class="color-preset-grid">
 				{#each brandColors as swatch}
 					<button
+						type="button"
 						class="color-preset"
 						style="background: {swatch.value}"
 						onclick={() => applyColor(swatch.value)}
@@ -97,6 +98,7 @@
 			<div class="color-section-title">Common Colors</div>
 			<div class="color-preset-grid">
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #000000"
 					onclick={() => applyColor('#000000')}
@@ -104,6 +106,7 @@
 					aria-label="Black"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #495057"
 					onclick={() => applyColor('#495057')}
@@ -111,6 +114,7 @@
 					aria-label="Gray"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #fa5252"
 					onclick={() => applyColor('#fa5252')}
@@ -118,6 +122,7 @@
 					aria-label="Red"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #ff922b"
 					onclick={() => applyColor('#ff922b')}
@@ -125,6 +130,7 @@
 					aria-label="Orange"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #fcc419"
 					onclick={() => applyColor('#fcc419')}
@@ -132,6 +138,7 @@
 					aria-label="Yellow"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #51cf66"
 					onclick={() => applyColor('#51cf66')}
@@ -139,6 +146,7 @@
 					aria-label="Green"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #22b8cf"
 					onclick={() => applyColor('#22b8cf')}
@@ -146,6 +154,7 @@
 					aria-label="Cyan"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #228be6"
 					onclick={() => applyColor('#228be6')}
@@ -153,6 +162,7 @@
 					aria-label="Blue"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #9775fa"
 					onclick={() => applyColor('#9775fa')}
@@ -160,6 +170,7 @@
 					aria-label="Purple"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #f06595"
 					onclick={() => applyColor('#f06595')}
@@ -175,7 +186,12 @@
 					class="color-input"
 					title="Custom Color"
 				/>
-				<button onclick={removeColor} class="color-remove-button" title="Remove Color">
+				<button
+					type="button"
+					onclick={removeColor}
+					class="color-remove-button"
+					title="Remove Color"
+				>
 					Clear
 				</button>
 			</div>

package/dist/editors/tiptap/toolbar/LinkButton.svelte

@@ -99,9 +99,11 @@
 					placeholder="Enter URL"
 					class="link-input"
 				/>
-				<button onclick={setLink} class="link-submit-button" title="Apply">✓</button>
+				<button type="button" onclick={setLink} class="link-submit-button" title="Apply">✓</button>
 				{#if editor.isActive('link')}
-					<button onclick={removeLink} class="link-remove-button" title="Remove Link">✕</button>
+					<button type="button" onclick={removeLink} class="link-remove-button" title="Remove Link"
+						>✕</button
+					>
 				{/if}
 			</div>
 			<label class="link-checkbox-label">

package/dist/form/ComboBox.svelte

@@ -80,6 +80,7 @@
 				{#each options as option, index}
 					{@const localClasses = [selectedIndex === index ? 'selected p-2' : 'p-2']}
 					<button
+						type="button"
 						class="combobox-item {localClasses} {option.class}"
 						class:selected={selectedIndex === index}
 						onclick={() => {

package/dist/form/ComboBoxMulti.svelte

@@ -108,6 +108,7 @@
 							localIndex}
 						{@const localClasses = [selectedIndex === globalIndex ? 'selected p-2' : 'p-2']}
 						<button
+							type="button"
 							class="combobox-item {localClasses.join(' ')} {option.class}"
 							role="option"
 							aria-selected={selectedIndex === globalIndex}

package/dist/form/DatePicker.svelte

@@ -336,7 +336,7 @@
 								size="1.5rem"
 								onclick={() => incrementYearRange(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{yearRangeStart} - {yearRangeStart + yearRangeSize - 1}
 							</button>
 							<ActionIcon
@@ -350,7 +350,7 @@
 								size="1.5rem"
 								onclick={() => incrementFocusedMonth(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{focusedMonth.format('MMMM YYYY')}
 							</button>
 							<ActionIcon
@@ -365,6 +365,7 @@
 						<div class="year-grid">
 							{#each getYearRange() as year}
 								<button
+									type="button"
 									class="year-button"
 									class:selected={focusedMonth.year() === year}
 									class:current-year={todayDate.year() === year}
@@ -387,6 +388,7 @@
 						<div class="days-grid">
 							{#each calculateDays(selectedDate, focusedMonth) as day, i (i)}
 								<button
+									type="button"
 									class="day-button {buildDayClasses(day)}"
 									disabled={day.isDisabled}
 									onclick={(e) => handleDateChangeClick(e, day.date, day.isDisabled)}

package/dist/form/DateRangePicker.svelte

@@ -342,7 +342,7 @@
 									size="1.5rem"
 									onclick={() => incrementYearRange(-1)}
 								/>
-								<button class="month-label clickable" onclick={toggleYearPicker}>
+								<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 									{yearRangeStart} – {yearRangeStart + yearRangeSize - 1}
 								</button>
 								<ActionIcon
@@ -356,7 +356,7 @@
 									size="1.5rem"
 									onclick={() => incrementFocusedMonth(-1)}
 								/>
-								<button class="month-label clickable" onclick={toggleYearPicker}>
+								<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 									{focusedMonth.format('MMMM YYYY')}
 								</button>
 								<ActionIcon
@@ -375,6 +375,7 @@
 							<div class="year-grid">
 								{#each getYearRange() as year}
 									<button
+										type="button"
 										class="year-button"
 										class:selected={focusedMonth.year() === year}
 										class:current-year={todayDate.year() === year}
@@ -408,6 +409,7 @@
 										}}
 									>
 										<button
+											type="button"
 											class={buildButtonClasses(d)}
 											disabled={d.isDisabled}
 											onclick={(e) => handleDayClick(d, e)}

package/dist/form/DateTimePicker.svelte

@@ -331,7 +331,7 @@
 								size="1.5rem"
 								onclick={() => incrementYearRange(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{yearRangeStart} - {yearRangeStart + yearRangeSize - 1}
 							</button>
 							<ActionIcon
@@ -345,7 +345,7 @@
 								size="1.5rem"
 								onclick={() => incrementFocusedMonth(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{focusedMonth.format('MMMM YYYY')}
 							</button>
 							<ActionIcon
@@ -360,6 +360,7 @@
 						<div class="year-grid">
 							{#each getYearRange() as year}
 								<button
+									type="button"
 									class="year-button"
 									class:selected={focusedMonth.year() === year}
 									class:current-year={todayDate.year() === year}
@@ -382,6 +383,7 @@
 						<div class="days-grid">
 							{#each calculateDays(selectedDate, focusedMonth) as day, i (i)}
 								<button
+									type="button"
 									class="day-button {buildDayClasses(day)}"
 									disabled={day.isDisabled}
 									onclick={(e) => handleDateChangeClick(e, day.date, day.isDisabled)}

package/dist/form/SegmentedControl.svelte

@@ -93,6 +93,7 @@
 			{@const isSelected = option.value === value}
 
 			<button
+				type="button"
 				bind:this={buttonElements[index]}
 				class="segmented-control-item {isSelected ? 'selected' : ''}"
 				onclick={() => setValue(option.value)}

package/dist/form/Select.svelte

@@ -314,6 +314,7 @@
 			</div>
 		{:else}
 			<button
+				type="button"
 				bind:this={buttonElement}
 				onclick={() => {
 					open = !open;

package/dist/form/SelectMulti.svelte

@@ -289,6 +289,7 @@
 >
 	<FormGroup {label} {required} {tooltipContent} {tooltipLocation}>
 		<button
+			type="button"
 			bind:this={buttonElement}
 			onclick={() => {
 				open = !open;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { default as Badge } from './ui/Badge.svelte';
 export type { BadgeProps } from './ui/Badge.svelte';
 export { default as Dialog } from './ui/Dialog.svelte';
 export type { DialogProps, DialogContext } from './ui/Dialog.svelte';
+export { default as ConfirmDialog } from './ui/ConfirmDialog.svelte';
+export type { ConfirmDialogProps } from './ui/ConfirmDialog.svelte';
 export { default as Drawer } from './ui/Drawer.svelte';
 export type { DrawerProps } from './ui/Drawer.svelte';
 export { default as Dropdown } from './ui/Dropdown.svelte';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Button } from './ui/Button.svelte';
 export { default as ActionIcon } from './ui/ActionIcon.svelte';
 export { default as Badge } from './ui/Badge.svelte';
 export { default as Dialog } from './ui/Dialog.svelte';
+export { default as ConfirmDialog } from './ui/ConfirmDialog.svelte';
 export { default as Drawer } from './ui/Drawer.svelte';
 export { default as Dropdown } from './ui/Dropdown.svelte';
 export { default as Dropzone } from './ui/Dropzone.svelte';

package/dist/ui/Badge.svelte

@@ -52,14 +52,16 @@
 	{#if type == 'a' && !disabled}
 		<a class={elClass} {href} {target}> {@render children?.()}</a>
 	{:else if type == 'button'}
-		<button class={elClass} disabled={isDisabled} onclick={onClick}> {@render children?.()}</button>
+		<button type="button" class={elClass} disabled={isDisabled} onclick={onClick}>
+			{@render children?.()}</button
+		>
 	{:else}
 		<div class={elClass}>
 			{@render children?.()}
 		</div>
 	{/if}
 	{#if onDelete}
-		<button class="badge-button {variant}" disabled={isDisabled} onclick={onDelete}>
+		<button type="button" class="badge-button {variant}" disabled={isDisabled} onclick={onDelete}>
 			<Icon size={size === 'sm' ? '12px' : size === 'lg' ? '16px' : '14px'} svg={iconX} />
 		</button>
 	{/if}

package/dist/ui/ConfirmDialog.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Dialog from './Dialog.svelte';
+	import type { ButtonVariant } from './ButtonVariant.js';
+
+	export interface ConfirmDialogProps {
+		/** Whether the dialog is visible (bindable) */
+		show: boolean;
+		/** Dialog title displayed in the header */
+		title?: string | undefined;
+		/**
+		 * Plain-text body. Ignored when `children` is provided, so pass a snippet
+		 * for richer content.
+		 */
+		message?: string | undefined;
+		/** Label for the confirming button */
+		okText?: string;
+		/** Label for the dismissing button */
+		cancelText?: string;
+		/** Visual variant of the confirming button (use `danger` for destructive actions) */
+		okVariant?: ButtonVariant;
+		/** Visual variant of the dismissing button */
+		cancelVariant?: ButtonVariant;
+		/** Icon shown on the left of the confirming button */
+		okSvg?: string;
+		/** Disable the confirming button (e.g. while a form is invalid) */
+		okDisabled?: boolean;
+		/** Hide the Cancel button entirely, leaving an acknowledgement-style dialog */
+		hideCancel?: boolean;
+		/**
+		 * Which button receives focus when the dialog opens. Defaults to the
+		 * confirming button, or to Cancel when `okVariant` is a danger variant so
+		 * a stray Enter cannot trigger a destructive action.
+		 */
+		initialFocus?: 'ok' | 'cancel' | 'none';
+		/**
+		 * Called when OK is pressed. Returning a promise puts the OK button into a
+		 * loading state and keeps the dialog open until it settles. Return `false`
+		 * (or resolve to `false`) to keep the dialog open.
+		 */
+		onConfirm?: () => void | boolean | Promise<void | boolean>;
+		/** Called when the dialog is dismissed via Cancel, the close icon, Escape or the backdrop */
+		onCancel?: () => void;
+		/** Allow closing by clicking backdrop or pressing Escape */
+		allowImplicitClose?: boolean;
+		/** Size preset for the dialog width */
+		size?: 'md' | 'lg' | 'xl' | 'full';
+		/** Additional CSS classes passed through to the dialog */
+		class?: string;
+		/** Custom body content; overrides `message` */
+		children?: Snippet;
+	}
+
+	let {
+		show = $bindable(false),
+		title = undefined,
+		message = undefined,
+		okText = 'Save',
+		cancelText = 'Cancel',
+		okVariant = 'primary',
+		cancelVariant = 'secondary',
+		okSvg = undefined,
+		okDisabled = false,
+		hideCancel = false,
+		initialFocus = undefined,
+		onConfirm = undefined,
+		onCancel = undefined,
+		allowImplicitClose = true,
+		size = 'md',
+		class: classes = '',
+		children
+	}: ConfirmDialogProps = $props();
+
+	let loading = $state(false);
+	let footerElement: HTMLDivElement | undefined = $state(undefined);
+
+	// Track whether the close was the result of OK so the cancel callback only
+	// fires for genuine dismissals (Cancel button, close icon, Escape, backdrop)
+	let confirmed = false;
+	let wasOpen = false;
+
+	const resolvedFocus = $derived(
+		initialFocus ?? (okVariant.startsWith('danger') && !hideCancel ? 'cancel' : 'ok')
+	);
+
+	$effect(() => {
+		if (show && !wasOpen) {
+			wasOpen = true;
+			confirmed = false;
+			loading = false;
+			focusInitialButton();
+		} else if (!show && wasOpen) {
+			wasOpen = false;
+			loading = false;
+			if (!confirmed) onCancel?.();
+		}
+	});
+
+	function focusInitialButton() {
+		if (resolvedFocus === 'none') return;
+		// showModal() runs in the parent Dialog's effect and moves focus to the
+		// first focusable element; wait a frame so this focus call lands after it
+		requestAnimationFrame(() => {
+			const target = footerElement?.querySelector<HTMLButtonElement>(
+				`.confirm-dialog-${resolvedFocus} button`
+			);
+			target?.focus();
+		});
+	}
+
+	async function handleConfirm() {
+		if (loading) return;
+		let result: void | boolean;
+		try {
+			const pending = onConfirm?.();
+			if (pending instanceof Promise) {
+				loading = true;
+				result = await pending;
+			} else {
+				result = pending;
+			}
+		} finally {
+			loading = false;
+		}
+		if (result === false) return;
+		confirmed = true;
+		show = false;
+	}
+
+	function handleCancel() {
+		if (loading) return;
+		show = false;
+	}
+</script>
+
+<Dialog
+	bind:show
+	{title}
+	{size}
+	class={classes}
+	allowImplicitClose={allowImplicitClose && !loading}
+>
+	{#if children}
+		{@render children()}
+	{:else if message}
+		<p class="confirm-dialog-message">{message}</p>
+	{/if}
+	{#snippet footer()}
+		<div class="confirm-dialog-actions" bind:this={footerElement}>
+			{#if !hideCancel}
+				<span class="confirm-dialog-cancel">
+					<Button variant={cancelVariant} disabled={loading} onclick={handleCancel}>
+						{cancelText}
+					</Button>
+				</span>
+			{/if}
+			<span class="confirm-dialog-ok">
+				<Button
+					variant={okVariant}
+					svg={okSvg}
+					{loading}
+					disabled={okDisabled}
+					onclick={handleConfirm}
+				>
+					{okText}
+				</Button>
+			</span>
+		</div>
+	{/snippet}
+</Dialog>
+
+<style>
+	.confirm-dialog-message {
+		margin: 0;
+		white-space: pre-line;
+		overflow-wrap: anywhere;
+	}
+
+	.confirm-dialog-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+
+	.confirm-dialog-cancel,
+	.confirm-dialog-ok {
+		display: contents;
+	}
+</style>

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

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariant } from './ButtonVariant.js';
+export interface ConfirmDialogProps {
+    /** Whether the dialog is visible (bindable) */
+    show: boolean;
+    /** Dialog title displayed in the header */
+    title?: string | undefined;
+    /**
+     * Plain-text body. Ignored when `children` is provided, so pass a snippet
+     * for richer content.
+     */
+    message?: string | undefined;
+    /** Label for the confirming button */
+    okText?: string;
+    /** Label for the dismissing button */
+    cancelText?: string;
+    /** Visual variant of the confirming button (use `danger` for destructive actions) */
+    okVariant?: ButtonVariant;
+    /** Visual variant of the dismissing button */
+    cancelVariant?: ButtonVariant;
+    /** Icon shown on the left of the confirming button */
+    okSvg?: string;
+    /** Disable the confirming button (e.g. while a form is invalid) */
+    okDisabled?: boolean;
+    /** Hide the Cancel button entirely, leaving an acknowledgement-style dialog */
+    hideCancel?: boolean;
+    /**
+     * Which button receives focus when the dialog opens. Defaults to the
+     * confirming button, or to Cancel when `okVariant` is a danger variant so
+     * a stray Enter cannot trigger a destructive action.
+     */
+    initialFocus?: 'ok' | 'cancel' | 'none';
+    /**
+     * Called when OK is pressed. Returning a promise puts the OK button into a
+     * loading state and keeps the dialog open until it settles. Return `false`
+     * (or resolve to `false`) to keep the dialog open.
+     */
+    onConfirm?: () => void | boolean | Promise<void | boolean>;
+    /** Called when the dialog is dismissed via Cancel, the close icon, Escape or the backdrop */
+    onCancel?: () => void;
+    /** Allow closing by clicking backdrop or pressing Escape */
+    allowImplicitClose?: boolean;
+    /** Size preset for the dialog width */
+    size?: 'md' | 'lg' | 'xl' | 'full';
+    /** Additional CSS classes passed through to the dialog */
+    class?: string;
+    /** Custom body content; overrides `message` */
+    children?: Snippet;
+}
+declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {}, "show">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/ui/Popover.svelte

@@ -102,6 +102,7 @@
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 			<button
+				type="button"
 				bind:this={triggerElement}
 				onclick={handleClick}
 				onmouseenter={handleMouseEnter}

package/dist/ui/Tabs.svelte

@@ -70,6 +70,7 @@
 		{@const isSelected = option.value === activeTab}
 
 		<button
+			type="button"
 			bind:this={buttonElements[index]}
 			class="tab-item {isSelected ? 'selected' : ''} {solidBg ? 'solid' : ''}"
 			onclick={() => setValue(option.value)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",
@@ -56,7 +56,7 @@
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/node": "^26.4.1",
+    "@types/node": "^26.5.1",
     "globals": "^17.12.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
@@ -65,7 +65,7 @@
     "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.2.2"
+    "vite": "^8.3.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",