@sjsf/skeleton-theme 2.0.0-next.6 → 2.0.0-next.8

package/dist/components/button.svelte

@@ -10,7 +10,9 @@
 		defineDisabled(ctx, {
 			disabled,
 			...config.uiOptions?.button,
-			...config.uiOptions?.buttons?.[type]
+			...config.uiOptions?.buttons?.[type],
+			...ctx.extraUiOptions?.('button', config),
+			...ctx.extraUiOptions?.('buttons', config)?.[type]
 		})
 	);
 </script>

package/dist/components/description.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/description.svelte';
 
 	const { description, config }: ComponentProps['description'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<div class="opacity-60" {...config.uiOptions?.descriptionAttributes}>{description}</div>
+<div
+	class="opacity-60"
+	{...config.uiOptions?.descriptionAttributes}
+	{...ctx.extraUiOptions?.('descriptionAttributes', config)}
+>
+	{description}
+</div>

package/dist/components/errors-list.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/errors-list.svelte';
 
-	const { errors, forId, config }: ComponentProps['errorsList'] = $props();
+	const { errors, config }: ComponentProps['errorsList'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<ui class="text-error-500" data-errors-for={forId} {...config.uiOptions?.errorsList}>
+<ui
+	class="text-error-500"
+	data-errors-for={config.id}
+	{...config.uiOptions?.errorsList}
+	{...ctx.extraUiOptions?.('errorsList', config)}
+>
 	{#each errors as err}
 		<li>{err.message}</li>
 	{/each}

package/dist/components/errors-list.svelte.d.ts

@@ -1,6 +1,4 @@
 import '@sjsf/basic-theme/components/errors-list.svelte';
-declare const ErrorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-    forId: string;
-}, {}, "">;
+declare const ErrorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps, {}, "">;
 type ErrorsList = ReturnType<typeof ErrorsList>;
 export default ErrorsList;

package/dist/components/exports.d.ts

@@ -3,6 +3,7 @@ export { default as submitButton } from './submit-button.svelte';
 export { default as button } from './button.svelte';
 export { default as layout } from './layout.svelte';
 export { default as title } from './title.svelte';
+export { default as label } from "./label.svelte";
 export { default as description } from './description.svelte';
 export { default as help } from './help.svelte';
 export { default as errorsList } from './errors-list.svelte';

package/dist/components/exports.js

@@ -3,6 +3,7 @@ export { default as submitButton } from './submit-button.svelte';
 export { default as button } from './button.svelte';
 export { default as layout } from './layout.svelte';
 export { default as title } from './title.svelte';
+export { default as label } from "./label.svelte";
 export { default as description } from './description.svelte';
 export { default as help } from './help.svelte';
 export { default as errorsList } from './errors-list.svelte';

package/dist/components/form.svelte

@@ -12,6 +12,7 @@
 	use:enhance={ctx}
 	class="flex flex-col gap-4"
 	{...config.uiOptions?.form}
+	{...ctx.extraUiOptions?.('form', config)}
 	{...attributes}
 >
 	{@render children?.()}

package/dist/components/help.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/help.svelte';
 
 	const { help, config }: ComponentProps['help'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<div class="opacity-60" {...config.uiOptions?.helpAttributes}>{help}</div>
+<div
+	class="opacity-60"
+	{...config.uiOptions?.helpAttributes}
+	{...ctx.extraUiOptions?.('helpAttributes', config)}
+>
+	{help}
+</div>

package/dist/components/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/label.svelte';
+
+	const { title, config }: ComponentProps['label'] = $props();
+
+	const ctx = getFormContext();
+</script>
+
+<label
+	class="label-text"
+	for={config.id}
+	{...config.uiOptions?.labelAttributes}
+	{...ctx.extraUiOptions?.('labelAttributes', config)}
+>
+	{title}
+	{#if config.required}
+		<span>*</span>
+	{/if}
+</label>

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

@@ -0,0 +1,6 @@
+import '@sjsf/basic-theme/components/label.svelte';
+declare const Label: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    title: string;
+}, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/layout.svelte';
 
 	const { type, children, config }: ComponentProps['layout'] = $props();
@@ -23,9 +23,13 @@
 			type === 'object-properties'
 	);
 
+	const ctx = getFormContext();
+
 	const attributes = $derived({
 		...config.uiOptions?.layout,
-		...config.uiOptions?.layouts?.[type]
+		...config.uiOptions?.layouts?.[type],
+		...ctx.extraUiOptions?.('layout', config),
+		...ctx.extraUiOptions?.('layouts', config)?.[type]
 	});
 </script>
 

package/dist/components/submit-button.svelte

@@ -6,7 +6,12 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(defineDisabled(ctx, config.uiOptions?.submitButton ?? {}));
+	const attributes = $derived(
+		defineDisabled(ctx, {
+			...config.uiOptions?.submitButton,
+			...ctx.extraUiOptions?.('submitButton', config)
+		})
+	);
 </script>
 
 <button class="btn preset-filled preset-filled-primary-500 w-full" type="submit" {...attributes}>

package/dist/components/title.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/title.svelte';
 
-	const { title, type, forId, required, config }: ComponentProps['title'] = $props();
+	const { title, type, config }: ComponentProps['title'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-{#if type === 'field'}
-	<label class="label-text" for={forId} {...config.uiOptions?.labelAttributes}>
-		{title}
-		{#if required}
-			<span>*</span>
-		{/if}
-	</label>
-{:else}
-	<div class="font-bold text-xl" {...config.uiOptions?.titleAttributes}>{title}</div>
-{/if}
+<div
+	class={type === 'field' ? 'label-text' : 'font-bold text-xl'}
+	{...config.uiOptions?.titleAttributes}
+	{...ctx.extraUiOptions?.('titleAttributes', config)}
+>
+	{title}
+</div>

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

@@ -2,8 +2,6 @@ import '@sjsf/basic-theme/components/title.svelte';
 declare const Title: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
     type: import("@sjsf/form/templates/components").ParentTemplateType;
     title: string;
-    forId: string;
-    required: boolean;
 }, {}, "">;
 type Title = ReturnType<typeof Title>;
 export default Title;

package/dist/extra-widgets/checkboxes.svelte

@@ -18,7 +18,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.checkboxes));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.checkboxes,
+			ctx.extraUiOptions?.('checkbox', config)
+		)
+	);
 </script>
 
 {#each options as option, index (option.id)}

package/dist/extra-widgets/date-picker.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.datePicker));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.datePicker,
+			ctx.extraUiOptions?.('datePicker', config)
+		)
+	);
 </script>
 
 <input type="date" bind:value class="input" {...attributes} />

package/dist/extra-widgets/file.svelte

@@ -13,7 +13,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.file));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.file,
+			ctx.extraUiOptions?.('file', config)
+		)
+	);
 </script>
 
 <input

package/dist/extra-widgets/multi-select.svelte

@@ -13,7 +13,13 @@
 	const ctx = getFormContext();
 
 	const attributes = $derived(
-		selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.multiSelect,
+			ctx.extraUiOptions?.('multiSelect', config)
+		)
 	);
 
 	const mapped = $derived(

package/dist/extra-widgets/radio.svelte

@@ -13,7 +13,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.radio));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.radio,
+			ctx.extraUiOptions?.('radio', config)
+		)
+	);
 </script>
 
 {#each options as option, index (option.id)}

package/dist/extra-widgets/range.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.range));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.range,
+			ctx.extraUiOptions?.('range', config)
+		)
+	);
 </script>
 
 <input

package/dist/extra-widgets/textarea.svelte

@@ -7,7 +7,13 @@
 	const ctx = getFormContext();
 
 	const attributes = $derived(
-		textareaAttributes(ctx, config, handlers, config.uiOptions?.textarea)
+		textareaAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.textarea,
+			ctx.extraUiOptions?.('textarea', config)
+		)
 	);
 </script>
 

package/dist/index.d.ts

@@ -1 +1 @@
-export declare const theme: import("@sjsf/form/lib/resolver").Resolver<import("@sjsf/form/lib/resolver").Chain<Record<"stringField" | "numberField" | "integerField" | "booleanField" | "objectField" | "arrayField" | "tupleField" | "nullField" | "oneOfField" | "anyOfField" | "arrayItemField" | "objectPropertyField" | keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields, any>, Record<"form" | "button" | "submitButton" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "title" | "description" | "help" | "errorsList" | keyof import("./definitions").ExtraWidgets, any>>, import("@sjsf/form/lib/resolver").Chain<typeof import("@sjsf/form/fields/exports") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields>, typeof import("@sjsf/form/templates/exports") & typeof import("./components/exports.js") & typeof import("./widgets/exports.js") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("./definitions").ExtraWidgets>>>;
+export declare const theme: import("@sjsf/form/lib/resolver").Resolver<import("@sjsf/form/lib/resolver").Chain<Record<"stringField" | "numberField" | "integerField" | "booleanField" | "objectField" | "arrayField" | "tupleField" | "nullField" | "oneOfField" | "anyOfField" | "arrayItemField" | "objectPropertyField" | keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields, any>, Record<"form" | "button" | "title" | "description" | "help" | "submitButton" | "layout" | "errorsList" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "label" | keyof import("./definitions").ExtraWidgets, any>>, import("@sjsf/form/lib/resolver").Chain<typeof import("@sjsf/form/fields/exports") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields>, typeof import("@sjsf/form/templates/exports") & typeof import("./components/exports.js") & typeof import("./widgets/exports.js") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("./definitions").ExtraWidgets>>>;

package/dist/specs.d.ts

@@ -7,3 +7,4 @@ import './extra-widgets/radio-include';
 import './extra-widgets/range-include';
 import './extra-widgets/textarea-include';
 export declare const specs: s.Specs;
+export declare const extraWidgets: string[];

package/dist/specs.js

@@ -13,3 +13,4 @@ export const specs = {
     range: [s.number, { 'ui:components': { numberWidget: 'rangeWidget' } }],
     textarea: [s.text, { 'ui:components': { textWidget: 'textareaWidget' } }]
 };
+export const extraWidgets = Object.keys(import.meta.glob('./extra-widgets/*.svelte')).map((widget) => widget.substring(16, widget.length - 7));

package/dist/widgets/checkbox.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.checkbox));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.checkbox,
+			ctx.extraUiOptions?.('checkbox', config)
+		)
+	);
 </script>
 
 <label class="flex items-center space-x-2 cursor-pointer">

package/dist/widgets/number.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.number));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.number,
+			ctx.extraUiOptions?.('number', config)
+		)
+	);
 </script>
 
 <input

package/dist/widgets/select.svelte

@@ -15,7 +15,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(selectAttributes(ctx, config, handlers, config.uiOptions?.select));
+	const attributes = $derived(
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.select,
+			ctx.extraUiOptions?.('select', config)
+		)
+	);
 </script>
 
 <select class="select" bind:value={mapped.value} {...attributes}>

package/dist/widgets/text.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.text));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.text,
+			ctx.extraUiOptions?.('text', config)
+		)
+	);
 </script>
 
 <input type="text" bind:value class="input" {...attributes} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjsf/skeleton-theme",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.8",
   "description": "The skeleton based theme for svelte-jsonschema-form",
   "license": "MIT",
   "keywords": [
@@ -52,40 +52,40 @@
     }
   },
   "peerDependencies": {
-    "@sjsf/form": "^2.0.0-next.6",
-    "@sjsf/basic-theme": "^2.0.0-next.6",
+    "@sjsf/form": "^2.0.0-next.8",
+    "@sjsf/basic-theme": "^2.0.0-next.8",
     "@skeletonlabs/skeleton": ">=3.0.0-next.0 <=3.0.0-next.10",
     "@tailwindcss/forms": "^0.5.0",
     "svelte": "^5.25.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@skeletonlabs/skeleton": "3.0.0-next.10",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/kit": "^2.20.4",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@types/eslint": "^9.6.1",
     "ajv": "^8.17.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.3",
+    "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.25.3",
+    "svelte": "^5.25.9",
     "svelte-check": "^4.1.5",
     "tailwindcss": "^3.4.17",
-    "typescript-eslint": "^8.27.0",
-    "vite": "6.2.2",
-    "vitest": "3.0.9",
-    "@sjsf/ajv8-validator": "2.0.0-next.6",
-    "@sjsf/basic-theme": "2.0.0-next.6",
-    "@sjsf/form": "2.0.0-next.6",
-    "testing": "0.1.0-next.6"
+    "typescript-eslint": "^8.29.1",
+    "vite": "6.2.5",
+    "vitest": "3.1.1",
+    "@sjsf/ajv8-validator": "2.0.0-next.8",
+    "@sjsf/basic-theme": "2.0.0-next.8",
+    "@sjsf/form": "2.0.0-next.8",
+    "testing": "0.1.0-next.8"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",