Drive SearchField root attrs from Soma runtime

src/uix/morfo/components/search-field.ts

@@ -18,12 +18,12 @@ export const searchFieldMorfo = {
 			defaultElement: 'div',
 			optional: false,
 			data: [
-				{ attr: 'data-disabled', severity: 'optional' },
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
-				{ attr: 'data-readonly', severity: 'optional' },
+				{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
-				{ attr: 'data-invalid', severity: 'optional' },
+				{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
-				{ attr: 'data-required', severity: 'optional' },
+				{ attr: 'data-required', value: v.propRef('required'), severity: 'optional' },
-				{ attr: 'data-focused', severity: 'optional' },
+				{ attr: 'data-focused', value: v.propRef('focused'), severity: 'optional' },
-				{ attr: 'data-empty', severity: 'optional' }
+				{ attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' }
 			],
 			aria: []
 		},
@@ -36,8 +36,8 @@ export const searchFieldMorfo = {
 			role: 'searchbox',
 			optional: false,
 			data: [
-				{ attr: 'data-disabled', severity: 'optional' },
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
-				{ attr: 'data-readonly', severity: 'optional' }
+				{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }
 			],
 			aria: [
 				{ attr: 'type', value: v.literal('search') },
@@ -70,7 +70,7 @@ export const searchFieldMorfo = {
 			defaultElement: 'button',
 			role: 'button',
 			optional: true,
-			data: [{ attr: 'data-disabled', severity: 'optional' }],
+			data: [{ attr: 'data-disabled', value: v.propRef('clearDisabled'), severity: 'optional' }],
 			aria: [
 				{ attr: 'type', value: v.literal('button') },
 				{

src/uix/soma/components/search-field/search-field-provider.svelte.ts

@@ -68,12 +68,24 @@ export class SearchFieldProvider {
 	private constructor(opts: SearchFieldOpts) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(searchFieldMorfo, {});
+		this.runtime = this.soma.runtime(searchFieldMorfo, {
+			props: {
+				disabled: () => this.isDisabled,
+				readonly: () => this.isReadonly,
+				invalid: () => this.isInvalid,
+				required: () => this.isRequired,
+				focused: () => this.focused,
+				empty: () => this.isEmpty,
+				clearDisabled: () => this.isDisabled || this.isReadonly || this.isEmpty,
+				clearOnEscape: () => this.opts.clearOnEscape.current
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: SearchFieldProvider.ctx
+			context: SearchFieldProvider.ctx,
+			syncAttrs: true
 		});
 		// Register the Input's id with the parent Field so `Field.Label`'s
 		// `for` attribute lands on the interactive element. Direct assign —
@@ -177,13 +189,7 @@ export class SearchFieldProvider {
 
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
-			...this.runtimePart.props,
+			...this.runtimePart.props
-			'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
-			'data-readonly': boolToEmptyStrOrUndef(this.isReadonly),
-			'data-invalid': boolToEmptyStrOrUndef(this.isInvalid),
-			'data-required': boolToEmptyStrOrUndef(this.isRequired),
-			'data-focused': boolToEmptyStrOrUndef(this.focused),
-			'data-empty': boolToEmptyStrOrUndef(this.isEmpty)
 		} as const)
 	);
 }