@marianmeres/stuic 3.66.1 → 3.68.0

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}
 >

package/dist/components/Input/FieldObject.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> {
     value: string;
     name: string;
     label?: SnippetWithId | THC;
@@ -21,12 +22,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;
     style?: string;
     onChange?: (value: string) => void;
 }

package/dist/components/Input/FieldOptions.svelte

@@ -24,6 +24,7 @@
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import FieldLikeButton from "./FieldLikeButton.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	export interface Option {
 		label: string;
@@ -32,7 +33,7 @@
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		trigger?: Snippet<[{ value: string; modal: ModalDialog }]>;
 		modal?: ModalDialog;
 		input?: HTMLInputElement;
@@ -53,13 +54,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the inner FieldLikeButton element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classOption?: string;
 		classOptionActive?: string;
 		classOptgroup?: string;
@@ -154,8 +150,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		//
 		classOption,
 		classOptionActive,
@@ -524,8 +523,11 @@
 			{classLabelBox}
 			{classInputBox}
 			{classInputBoxWrap}
+			{classInputBoxWrapInvalid}
 			{classDescBox}
+			{classDescBoxToggle}
 			{classBelowBox}
+			{classValidationBox}
 			{style}
 			validate={wrappedValidate}
 			{required}

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

@@ -5,6 +5,7 @@ import type { TranslateFn } from "../../types.js";
 import { ModalDialog } from "../ModalDialog/index.js";
 import { NotificationsStack } from "../Notifications/index.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 export interface Option {
     label: string;
     value: any;
@@ -12,7 +13,7 @@ export interface Option {
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     trigger?: Snippet<[{
         value: string;
         modal: ModalDialog;
@@ -36,13 +37,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the inner FieldLikeButton 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/FieldPhoneNumber.svelte

@@ -3,10 +3,11 @@
 	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> {
 		input?: HTMLInputElement;
 		/** Full phone number string, e.g. "+421905123456". Bindable. */
 		value?: string;
@@ -46,14 +47,8 @@
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
 		//
+		/** Classes for the tel <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classInputBoxWrapInvalid?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classPrefixTrigger?: string;
 		classPrefixDropdown?: string;
 		style?: string;
@@ -121,7 +116,9 @@
 		classInputBoxWrap,
 		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		classPrefixTrigger,
 		classPrefixDropdown,
 		style,
@@ -283,7 +280,9 @@
 	{classInputBoxWrap}
 	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldPhoneNumber.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> {
     input?: HTMLInputElement;
     /** Full phone number string, e.g. "+421905123456". Bindable. */
     value?: string;
@@ -43,14 +44,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the tel <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classInputBoxWrapInvalid?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classPrefixTrigger?: string;
     classPrefixDropdown?: string;
     style?: string;