Drive Slider attrs from Soma runtime

src/uix/morfo/components/slider.ts

@@ -16,8 +16,12 @@ export const sliderMorfo = {
 			role: 'group',
 			optional: false,
 			data: [
-				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
-				{ attr: 'data-disabled', severity: 'optional' }
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				},
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
 			],
 			aria: []
 		},
@@ -28,8 +32,12 @@ export const sliderMorfo = {
 			defaultElement: 'div',
 			optional: true,
 			data: [
-				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
-				{ attr: 'data-disabled', severity: 'optional' }
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				},
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
 			],
 			aria: []
 		},
@@ -82,9 +90,13 @@ export const sliderMorfo = {
 			defaultElement: 'div',
 			optional: true,
 			data: [
-				{ attr: 'data-value' },
-				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
-				{ attr: 'data-active', severity: 'optional' }
+				{ attr: 'data-value', value: v.propRef('value'), emit: 'value' },
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				},
+				{ attr: 'data-active', value: v.propRef('active'), severity: 'optional' }
 			],
 			aria: []
 		}

src/uix/soma/components/slider/slider-provider.svelte.ts

@@ -72,12 +72,18 @@ export class SliderProvider {
 	private constructor(opts: SliderOpts) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(sliderMorfo, {});
+		this.runtime = this.soma.runtime(sliderMorfo, {
+			props: {
+				orientation: () => this.opts.orientation.current,
+				disabled: () => this.opts.disabled.current
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: SliderProvider.ctx
+			context: SliderProvider.ctx,
+			syncAttrs: true
 		});
 	}
 
@@ -214,9 +220,6 @@ export class SliderProvider {
 		this.runtimePart.assert({
 			...this.runtimePart.props,
 			dir: this.opts.dir.current,
-			role: 'group' as const,
-			'data-orientation': this.opts.orientation.current,
-			'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
 			style: {
 				position: 'relative',
 				'touch-action': this.opts.orientation.current === 'horizontal' ? 'pan-y' : 'pan-x'
@@ -248,7 +251,8 @@ export class SliderRangeProvider {
 		this.runtimePart = this.provider.runtime.part('range', {
 			id: opts.id,
 			ref: opts.ref,
-			owner: this
+			owner: this,
+			syncAttrs: true
 		});
 	}
 
@@ -273,8 +277,6 @@ export class SliderRangeProvider {
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-orientation': this.provider.opts.orientation.current,
-			'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
 			style: {
 				position: 'absolute',
 				...this.rangeStyle
@@ -416,7 +418,13 @@ export class SliderTickProvider {
 		this.runtimePart = this.provider.runtime.part('tick', {
 			id: opts.id,
 			ref: opts.ref,
-			owner: this
+			owner: this,
+			props: {
+				value: () => this.opts.value.current,
+				orientation: () => this.provider.opts.orientation.current,
+				active: () => this.isActive
+			},
+			syncAttrs: true
 		});
 	}
 
@@ -436,9 +444,6 @@ export class SliderTickProvider {
 		const tx = isHorizontal && isRtl ? '50%' : '-50%';
 		return this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-orientation': this.provider.opts.orientation.current,
-			'data-active': this.isActive ? '' : undefined,
-			'data-value': this.opts.value.current,
 			style: {
 				position: 'absolute',
 				...(isHorizontal