@marianmeres/stuic 3.66.0 → 3.67.0

package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts

@@ -170,6 +170,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     triggerEl?: HTMLButtonElement;
     /** Reference to dropdown element */
     dropdownEl?: HTMLDivElement;
+    /** Reference to the wrapper element */
+    el?: HTMLDivElement;
+    /** Opt out of stuic base classes for full styling control */
+    unstyled?: boolean;
     /** Optional, used only when css positioning not supported (iPhone)*/
     noScrollLock?: boolean;
 }
@@ -179,6 +183,6 @@ export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropd
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "stuic-dropdown-menu-divider";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "stuic-dropdown-menu-header";
 export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "stuic-dropdown-menu-backdrop";
-declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
+declare const DropdownMenu: import("svelte").Component<Props, {}, "el" | "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/README.md

@@ -8,13 +8,15 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 | ------------------------ | ---------------------- | -------------------- | ---------------------------------------- |
 | `items`                  | `DropdownMenuItem[]`   | -                    | Menu items to display                    |
 | `isOpen`                 | `boolean`              | `false`              | Controlled open state (bindable)         |
-| `position`               | `DropdownMenuPosition` | `"bottom-span-left"` | Popover position relative to trigger     |
+| `position`               | `DropdownMenuPosition` | `"bottom-span-right"` | Popover position relative to trigger    |
 | `offset`                 | `string`               | `"0.25rem"`          | Offset from trigger element (CSS value)  |
 | `maxHeight`              | `string`               | `"300px"`            | Max height of dropdown                   |
 | `closeOnSelect`          | `boolean`              | `true`               | Close menu when action item is selected  |
 | `closeOnClickOutside`    | `boolean`              | `true`               | Close on click outside                   |
 | `closeOnEscape`          | `boolean`              | `true`               | Close on Escape key                      |
 | `forceFallback`          | `boolean`              | `false`              | Force fallback positioning (for testing) |
+| `search`                 | `boolean \| DropdownMenuSearchConfig` | -     | Enable search/filter input (see [Search](#search)) |
+| `unstyled`               | `boolean`              | `false`              | Opt out of stuic base classes            |
 | `class`                  | `string`               | -                    | Classes for wrapper element              |
 | `classTrigger`           | `string`               | -                    | Classes for trigger button               |
 | `classDropdown`          | `string`               | -                    | Classes for dropdown container           |
@@ -25,6 +27,7 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 | `classHeader`            | `string`               | -                    | Classes for header items                 |
 | `classExpandable`        | `string`               | -                    | Classes for expandable section header    |
 | `classExpandableContent` | `string`               | -                    | Classes for expandable section content   |
+| `el`                     | `HTMLDivElement`       | -                    | Wrapper element reference (bindable)     |
 | `triggerEl`              | `HTMLButtonElement`    | -                    | Trigger element reference (bindable)     |
 | `dropdownEl`             | `HTMLDivElement`       | -                    | Dropdown element reference (bindable)    |
 
@@ -39,15 +42,15 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 
 ### Action Item
 
-Clickable menu item with optional icon and shortcut.
+Clickable menu item with optional leading/trailing content.
 
 ```typescript
 interface DropdownMenuActionItem {
 	type: "action";
 	id: string | number;
 	label: THC; // Text, HTML, or component
-	icon?: THC; // Optional leading icon
-	shortcut?: string; // Keyboard shortcut hint
+	contentBefore?: THC; // Optional leading content (icon, etc.)
+	contentAfter?: THC; // Optional trailing content (shortcut hint, etc.)
 	disabled?: boolean;
 	onSelect?: () => void | boolean;
 	href?: string; // Render as <a> link instead of <button>
@@ -104,7 +107,7 @@ interface DropdownMenuExpandableItem {
 	type: "expandable";
 	id: string | number;
 	label: THC;
-	icon?: THC;
+	contentBefore?: THC;
 	items: DropdownMenuFlatItem[]; // Nested items (no nested expandables)
 	defaultExpanded?: boolean;
 	disabled?: boolean;
@@ -131,6 +134,29 @@ interface DropdownMenuExpandableItem {
 | `onClose`  | -                                | Called when menu closes                     |
 | `onSelect` | `(item: DropdownMenuActionItem)` | Called when action item selected (fallback) |
 
+## Search
+
+Pass `search` to enable an in-menu filter input. Use `true` for defaults or a config object:
+
+```typescript
+interface DropdownMenuSearchConfig {
+	placeholder?: string;
+	/** Match algorithm */
+	strategy?: "prefix" | "exact" | "fuzzy";
+	/** Custom function to extract searchable text from an item */
+	getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+	/** Auto-focus search input when menu opens */
+	autoFocus?: boolean;
+	/** Message shown when no results found */
+	noResultsMessage?: string;
+}
+```
+
+```svelte
+<DropdownMenu {items} search />
+<DropdownMenu {items} search={{ placeholder: "Filter…", strategy: "fuzzy" }} />
+```
+
 ## Keyboard Navigation
 
 | Key                | Action                           |
@@ -186,6 +212,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 
 ### With Icons and Shortcuts
 
+Use `contentBefore` for leading content (icons) and `contentAfter` for trailing content (shortcut hints). Both accept any `THC` value — string, HTML, or component.
+
 ```svelte
 <script lang="ts">
 	import { DropdownMenu } from "stuic";
@@ -197,8 +225,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 			type: "action",
 			id: "edit",
 			label: "Edit",
-			icon: iconLucideEdit({ size: 16 }),
-			shortcut: "Cmd+E",
+			contentBefore: { html: iconLucideEdit({ size: 16 }) },
+			contentAfter: "Cmd+E",
 			onSelect: () => handleEdit(),
 		},
 		{ type: "divider" },
@@ -206,8 +234,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 			type: "action",
 			id: "delete",
 			label: "Delete",
-			icon: iconLucideTrash({ size: 16 }),
-			shortcut: "Cmd+D",
+			contentBefore: { html: iconLucideTrash({ size: 16 }) },
+			contentAfter: "Cmd+D",
 			onSelect: () => handleDelete(),
 		},
 	];

package/dist/components/Input/FieldAssets.svelte

@@ -37,6 +37,7 @@
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 	import Button from "../Button/Button.svelte";
 
 	const clog = createClog("FieldAssets");
@@ -126,7 +127,7 @@
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		value: string;
 		label?: SnippetWithId | THC;
 		type?: string;
@@ -145,13 +146,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the hidden <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classOption?: string;
 		classOptionActive?: string;
 		classOptgroup?: string;
@@ -205,8 +201,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		//
 		classOption,
 		classOptionActive,
@@ -503,8 +502,11 @@
 		{classLabelBox}
 		{classInputBox}
 		{classInputBoxWrap}
+		{classInputBoxWrapInvalid}
 		{classDescBox}
+		{classDescBoxToggle}
 		{classBelowBox}
+		{classValidationBox}
 		{validation}
 		{style}
 	>

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -3,6 +3,7 @@ import { type ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 import { type THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 export type FieldAssetUrlObj = {
     thumb: string;
     full: string;
@@ -23,7 +24,7 @@ export declare function getAssetIcon(ext?: string): CallableFunction;
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     value: string;
     label?: SnippetWithId | THC;
     type?: string;
@@ -42,13 +43,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the hidden <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classOption?: string;
     classOptionActive?: string;
     classOptgroup?: string;

package/dist/components/Input/FieldFile.svelte

@@ -3,10 +3,14 @@
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends HTMLInputAttributes, Record<string, any> {
+	export interface Props
+		extends HTMLInputAttributes,
+			InputWrapClassProps,
+			Record<string, any> {
 		input?: HTMLInputElement;
 		files?: FileList;
 		multiple?: boolean;
@@ -27,13 +31,9 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
+		/** Classes for the rendered file list (when multiple files selected) */
 		classFileList?: string;
 		style?: string;
 	}
@@ -81,8 +81,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		classFileList,
 		style,
 		//
@@ -114,8 +117,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldFile.svelte.d.ts

@@ -2,10 +2,11 @@ import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends HTMLInputAttributes, Record<string, any> {
+export interface Props extends HTMLInputAttributes, InputWrapClassProps, Record<string, any> {
     input?: HTMLInputElement;
     files?: FileList;
     multiple?: boolean;
@@ -26,13 +27,9 @@ export interface Props extends HTMLInputAttributes, Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
+    /** Classes for the rendered file list (when multiple files selected) */
     classFileList?: string;
     style?: string;
 }

package/dist/components/Input/FieldInput.svelte

@@ -4,10 +4,14 @@
 	import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends HTMLInputAttributes, Record<string, any> {
+	export interface Props
+		extends HTMLInputAttributes,
+			InputWrapClassProps,
+			Record<string, any> {
 		input?: HTMLInputElement;
 		value?: string | number;
 		label?: SnippetWithId | THC;
@@ -30,14 +34,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classInputBoxWrapInvalid?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 	}
 </script>
@@ -88,7 +86,9 @@
 		classInputBoxWrap,
 		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style,
 		//
 		...rest
@@ -121,7 +121,9 @@
 	{classInputBoxWrap}
 	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldInput.svelte.d.ts

@@ -3,10 +3,11 @@ import type { HTMLInputAttributes } from "svelte/elements";
 import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends HTMLInputAttributes, Record<string, any> {
+export interface Props extends HTMLInputAttributes, InputWrapClassProps, Record<string, any> {
     input?: HTMLInputElement;
     value?: string | number;
     label?: SnippetWithId | THC;
@@ -29,14 +30,8 @@ export interface Props extends HTMLInputAttributes, Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classInputBoxWrapInvalid?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
 }
 declare const FieldInput: import("svelte").Component<Props, {}, "value" | "input">;

package/dist/components/Input/FieldInputLocalized.svelte

@@ -6,10 +6,11 @@
 	} from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		value?: string;
 		name: string;
 		label?: SnippetWithId | THC;
@@ -26,12 +27,6 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classEntry?: string;
 		classLanguageLabel?: string;
 		classLanguageInput?: string;
@@ -107,8 +102,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		classEntry,
 		classLanguageLabel,
 		classLanguageInput,
@@ -270,8 +268,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldInputLocalized.svelte.d.ts

@@ -2,10 +2,11 @@ import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     value?: string;
     name: string;
     label?: SnippetWithId | THC;
@@ -22,12 +23,6 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classEntry?: string;
     classLanguageLabel?: string;
     classLanguageInput?: string;

package/dist/components/Input/FieldKeyValues.svelte

@@ -6,6 +6,7 @@
 	} from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
@@ -15,7 +16,7 @@
 		parsedValue: unknown; // Parsed JSON value
 	}
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		value: string;
 		name: string;
 		label?: SnippetWithId | THC;
@@ -32,12 +33,6 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classEntry?: string;
 		classKeyInput?: string;
 		classValueInput?: string;
@@ -108,6 +103,9 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBoxToggle,
+		classValidationBox,
 		classDescBox,
 		classBelowBox,
 		classEntry,
@@ -306,8 +304,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldKeyValues.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 import { type ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
@@ -10,7 +11,7 @@ export interface KeyValueEntry {
     value: string;
     parsedValue: unknown;
 }
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     value: string;
     name: string;
     label?: SnippetWithId | THC;
@@ -27,12 +28,6 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classEntry?: string;
     classKeyInput?: string;
     classValueInput?: string;

package/dist/components/Input/FieldLikeButton.svelte

@@ -2,10 +2,11 @@
 	import type { Snippet } from "svelte";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		input?: HTMLInputElement;
 		value: string;
 		label?: SnippetWithId | THC;
@@ -27,13 +28,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the underlying <Button> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 		renderValue?: (rawValue: any) => string;
 	}
@@ -82,8 +78,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style = "",
 		//
 		renderValue,
@@ -147,8 +146,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldLikeButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     input?: HTMLInputElement;
     value: string;
     label?: SnippetWithId | THC;
@@ -26,13 +27,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the underlying <Button> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
     renderValue?: (rawValue: any) => string;
 }

package/dist/components/Input/FieldObject.svelte

@@ -5,10 +5,11 @@
 		ValidationResult,
 	} from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		value: string;
 		name: string;
 		label?: SnippetWithId | THC;
@@ -25,12 +26,6 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 		onChange?: (value: string) => void;
 	}
@@ -66,8 +61,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style,
 		onChange,
 	}: Props = $props();
@@ -252,8 +250,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >