Drive TagGroup root attrs from Soma runtime

src/uix/morfo/components/tag-group.ts

@@ -19,20 +19,24 @@ export const tagGroupMorfo = {
 			role: 'grid',
 			optional: false,
 			data: [
-				{ attr: 'data-disabled', severity: 'optional' },
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
-				{ attr: 'data-empty', severity: 'optional' },
+				{ attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' },
-				{ attr: 'data-selection-mode', values: ['none', 'single', 'multiple'] }
+				{
+					attr: 'data-selection-mode',
+					values: ['none', 'single', 'multiple'],
+					value: v.propRef('selectionMode')
+				}
 			],
 			aria: [
 				{
 					attr: 'aria-label',
-					value: v.translationRef('#?components.tag-group.label|Tags'),
+					value: v.propRef('ariaLabel'),
 					severity: 'recommended'
 				},
 				{
 					attr: 'aria-labelledby',
-					value: v.partRef('label'),
+					value: v.propRef('ariaLabelledby'),
-					condition: { when: 'part-present', part: 'label' },
+					condition: { when: 'prop-truthy', prop: 'ariaLabelledby' },
 					severity: 'optional'
 				},
 				{

src/uix/soma/components/tag-group/tag-group-provider.svelte.ts

@@ -58,12 +58,22 @@ export class TagGroupProvider {
 	private constructor(opts: TagGroupOpts) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(tagGroupMorfo, {});
+		this.runtime = this.soma.runtime(tagGroupMorfo, {
+			props: {
+				ariaLabel: () => this.resolvedAriaLabel.current,
+				ariaLabelledby: () => this.resolvedAriaLabelledby,
+				multiple: () => this.opts.selectionMode.current === 'multiple',
+				disabled: () => this.opts.disabled.current,
+				empty: () => this.isEmpty,
+				selectionMode: () => this.opts.selectionMode.current
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: TagGroupProvider.ctx
+			context: TagGroupProvider.ctx,
+			syncAttrs: true
 		});
 	}
 
@@ -221,15 +231,7 @@ export class TagGroupProvider {
 
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
-			...this.runtimePart.props,
+			...this.runtimePart.props
-			role: 'grid' as const,
-			'aria-label': this.resolvedAriaLabel.current,
-			'aria-labelledby': this.resolvedAriaLabelledby,
-			'aria-multiselectable': this.opts.selectionMode.current === 'multiple' ? true : undefined,
-			'aria-disabled': this.opts.disabled.current ? true : undefined,
-			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-			'data-empty': boolToEmptyStrOrUndef(this.isEmpty),
-			'data-selection-mode': this.opts.selectionMode.current
 		} as const)
 	);
 }