@placeholderco/placeholder-ui 2.7.1 → 2.7.2

package/dist/form/ComboBoxMulti.svelte

@@ -38,24 +38,33 @@
 
 	$effect(() => {
 		if (open && flattenedOptions.length > 0) {
-			selectedIndex = 0;
+			selectedIndex = flattenedOptions.findIndex((x) => !x.disabled);
 		}
 	});
 
 	function performSelection(item: ComboBoxItem) {
+		if (item.disabled) return;
 		onSelection(item);
 	}
 
+	/** Next enabled index in the given direction, or the current index if there is none */
+	function nextEnabledIndex(step: 1 | -1) {
+		for (let i = selectedIndex + step; i >= 0 && i < flattenedOptions.length; i += step) {
+			if (!flattenedOptions[i].disabled) return i;
+		}
+		return selectedIndex;
+	}
+
 	export function handleKeyDown(e: KeyboardEvent) {
 		error = '';
 		if (e.key == 'ArrowUp') {
 			e.preventDefault();
 			selecting = true;
-			selectedIndex = Math.max(0, selectedIndex - 1);
+			selectedIndex = nextEnabledIndex(-1);
 		} else if (e.key == 'ArrowDown') {
 			e.preventDefault();
 			selecting = true;
-			selectedIndex = Math.min(flattenedOptions.length - 1, selectedIndex + 1);
+			selectedIndex = nextEnabledIndex(1);
 		} else if (e.key == 'Enter') {
 			e.preventDefault();
 			if (selectedIndex >= 0 && selectedIndex < flattenedOptions.length) {
@@ -112,6 +121,8 @@
 							class="combobox-item {localClasses.join(' ')} {option.class}"
 							role="option"
 							aria-selected={selectedIndex === globalIndex}
+							aria-disabled={option.disabled || undefined}
+							disabled={option.disabled}
 							onclick={() => {
 								performSelection(option);
 								selectedIndex = globalIndex;
@@ -184,11 +195,16 @@
 	}
 
 	.combobox-item.selected,
-	.combobox-item:hover {
+	.combobox-item:hover:not(:disabled) {
 		background-color: var(--border-color);
 		color: rgb(var(--accent-color-rgb));
 	}
 
+	.combobox-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
 	.seperator {
 		height: 1px;
 		background-color: var(--border-color);

package/dist/form/RadioGroup.svelte

@@ -55,7 +55,7 @@
 	const resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
 	function handleChange(option: ComboBoxItem) {
-		if (option.value === value) return;
+		if (option.value === value || option.disabled) return;
 
 		if (!controlled) {
 			value = option.value;
@@ -79,7 +79,7 @@
 					id={resolvedName + i}
 					name={resolvedName}
 					label={option.label}
-					{disabled}
+					disabled={disabled || option.disabled}
 					checked={option.value === value}
 					controlled={true}
 					onchange={() => handleChange(option)}

package/dist/models/ComboBoxItem.d.ts

@@ -17,6 +17,8 @@ export interface ComboBoxItem {
     groupName?: string;
     imageSrc?: string;
     description?: string;
+    /** Shows the option but prevents it from being selected */
+    disabled?: boolean;
     /** Marks a synthetic "add new value" suggestion (see Autocomplete) */
     isAddNew?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "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",
@@ -55,17 +55,17 @@
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/node": "^26.6.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@types/node": "^26.6.3",
     "globals": "^17.12.0",
-    "prettier": "^3.9.8",
+    "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.3.0"
+    "vite": "^8.3.1"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -80,30 +80,30 @@
     "@codemirror/legacy-modes": "^6.5.4",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/search": "^6.7.2",
-    "@codemirror/state": "^6.7.5",
+    "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.12",
-    "@lezer/highlight": "^1.2.3",
-    "@tiptap/core": "^3.31.3",
-    "@tiptap/extension-bubble-menu": "^3.31.3",
-    "@tiptap/extension-code-block": "^3.31.3",
-    "@tiptap/extension-collaboration": "^3.31.3",
-    "@tiptap/extension-collaboration-caret": "^3.31.3",
-    "@tiptap/extension-color": "^3.31.3",
-    "@tiptap/extension-image": "^3.31.3",
-    "@tiptap/extension-link": "^3.31.3",
-    "@tiptap/extension-placeholder": "^3.31.3",
-    "@tiptap/extension-subscript": "^3.31.3",
-    "@tiptap/extension-superscript": "^3.31.3",
-    "@tiptap/extension-table": "^3.31.3",
-    "@tiptap/extension-text-align": "^3.31.3",
-    "@tiptap/extension-text-style": "^3.31.3",
-    "@tiptap/extension-underline": "^3.31.3",
-    "@tiptap/pm": "^3.31.3",
-    "@tiptap/starter-kit": "^3.31.3",
+    "@codemirror/view": "^6.43.13",
+    "@lezer/highlight": "^1.2.5",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/extension-bubble-menu": "^3.31.4",
+    "@tiptap/extension-code-block": "^3.31.4",
+    "@tiptap/extension-collaboration": "^3.31.4",
+    "@tiptap/extension-collaboration-caret": "^3.31.4",
+    "@tiptap/extension-color": "^3.31.4",
+    "@tiptap/extension-image": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-placeholder": "^3.31.4",
+    "@tiptap/extension-subscript": "^3.31.4",
+    "@tiptap/extension-superscript": "^3.31.4",
+    "@tiptap/extension-table": "^3.31.4",
+    "@tiptap/extension-text-align": "^3.31.4",
+    "@tiptap/extension-text-style": "^3.31.4",
+    "@tiptap/extension-underline": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
     "dayjs": "^1.11.23",
     "svelte-sonner": "^1.2.1",
-    "yjs": "^13.6.32"
+    "yjs": "^13.6.33"
   },
   "publishConfig": {
     "access": "public"