Drive TagsInput root attrs from Soma runtime

src/uix/morfo/components/tags-input.ts

@@ -19,10 +19,10 @@ export const tagsInputMorfo = {
 			role: 'listbox',
 			optional: false,
 			data: [
-				{ attr: 'data-empty', severity: 'optional' },
-				{ attr: 'data-disabled', severity: 'optional' },
-				{ attr: 'data-readonly', severity: 'optional' },
-				{ attr: 'data-invalid', severity: 'optional' }
+				{ attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' },
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
+				{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
+				{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }
 			],
 			aria: [{ attr: 'aria-orientation', value: v.literal('horizontal') }]
 		},
@@ -31,14 +31,15 @@ export const tagsInputMorfo = {
 			kebab: 'control',
 			kind: 'public',
 			defaultElement: 'div',
+			role: 'listbox',
 			optional: false,
 			data: [
-				{ attr: 'data-disabled', severity: 'optional' },
-				{ attr: 'data-readonly', severity: 'optional' },
-				{ attr: 'data-invalid', severity: 'optional' },
-				{ attr: 'data-focus', severity: 'optional' }
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
+				{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
+				{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
+				{ attr: 'data-focus', value: v.propRef('focus'), severity: 'optional' }
 			],
-			aria: []
+			aria: [{ attr: 'aria-orientation', value: v.literal('horizontal') }]
 		},
 		{
 			name: 'Input',

src/uix/soma/components/tags-input/tags-input-provider.svelte.ts

@@ -61,12 +61,21 @@ export class TagsInputProvider {
 	private constructor(opts: TagsInputOpts) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(tagsInputMorfo, {});
+		this.runtime = this.soma.runtime(tagsInputMorfo, {
+			props: {
+				empty: () => this.isEmpty,
+				disabled: () => this.opts.disabled.current,
+				readonly: () => this.opts.readonly.current,
+				invalid: () => this.opts.invalid.current,
+				focus: () => this.highlightedIndex === -1
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: TagsInputProvider.ctx
+			context: TagsInputProvider.ctx,
+			syncAttrs: true
 		});
 	}
 
@@ -200,11 +209,7 @@ export class TagsInputProvider {
 
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
-			...this.runtimePart.props,
-			'data-empty': boolToEmptyStrOrUndef(this.isEmpty),
-			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-			'data-readonly': boolToEmptyStrOrUndef(this.opts.readonly.current),
-			'data-invalid': boolToEmptyStrOrUndef(this.opts.invalid.current)
+			...this.runtimePart.props
 		} as const)
 	);
 }
@@ -228,7 +233,8 @@ export class TagsInputControlProvider {
 		this.runtimePart = this.provider.runtime.part('control', {
 			id: opts.id,
 			ref: opts.ref,
-			owner: this
+			owner: this,
+			syncAttrs: true
 		});
 	}
 
@@ -240,12 +246,6 @@ export class TagsInputControlProvider {
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
 			...this.runtimePart.props,
-			role: 'listbox' as const,
-			'aria-orientation': 'horizontal' as const,
-			'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
-			'data-readonly': boolToEmptyStrOrUndef(this.provider.opts.readonly.current),
-			'data-invalid': boolToEmptyStrOrUndef(this.provider.opts.invalid.current),
-			'data-focus': boolToEmptyStrOrUndef(this.provider.highlightedIndex === -1),
 			onclick: this.onclick
 		} as const)
 	);