@symbiote-native/angular 0.8.0 → 2.0.0

package/build/angular/components/virtualized-list/index.js

@@ -9,8 +9,8 @@
 // in ngAfterViewChecked. OnPush + ChangeDetectorRef.markForCheck() drives re-render off the native
 // scroll/layout/measure callbacks (they fire outside Angular's own event bindings, so they must
 // mark the view dirty). This is the Angular twin of the React useReducer/useEffect and Vue
-// ref/computed/watch over the same shared functions. It composes the Angular ScrollView, exactly
-// as the React/Vue lists drive their ScrollView.
+// ref/computed/watch over the same shared functions. It writes the `scroll-view`/
+// `horizontal-scroll-view` TAG directly, exactly as the React/Vue lists drive their scroll tag.
 //
 // Per-item rendering is TEMPLATES, not a callback: React/Vue `renderItem: (info) => element` does
 // not translate to Angular. The app supplies the cell via `<ng-template vListItem>` (and the
@@ -22,22 +22,27 @@
 // shape differs, since a callback prop returning an element has no Angular equivalent.
 //
 // Lists have no Descriptor render fn — the cell content is the framework's own children.
-// Cells/spacers are plain symbiote-view host elements.
+// Cells/spacers are plain view host elements.
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, computed, inject, signal, } from '@angular/core';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, computeWindow, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, } from '@symbiote-native/components';
-import { dlog, flattenStyle, } from '@symbiote-native/engine';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, computeWindow, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, buildScrollViewHandle, } from '@symbiote-native/components';
+import { dlog, flattenStyle, isSymbioteNode, } from '@symbiote-native/engine';
 import { countAngular } from '../../diagnostics';
-import { ScrollView } from '../scroll-view';
-import { RefreshControl } from '../refresh-control';
-import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
+import { anchorHostStyle, SymbioteHostPropsDirective, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
 import { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListOutletDirective, VListSeparatorDirective, } from './directives';
+import { gateWanted, injectGateDemandAbove, } from '../../gate-demand';
 import * as i0 from "@angular/core";
 import * as i1 from "../../primitives/shared";
 export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from './directives';
+// The scroll body is identical on both axes; only the outer tag differs (the axis comes from the
+// TAG, never a prop — `<horizontal-scroll-view>` vs `<scroll-view>`, matching every other adapter,
+// `.claude/rules/host-primitive-tier.md`). No shared-outlet primitive exists to de-duplicate this
+// (this package's own NgTemplateOutlet twin is keyed on a per-cell context, not a static block, and
+// ngc's partial evaluator needs the decorator's `template` to be one literal), so the body is
+// duplicated across the two branches — the same shape Svelte's own `{#if horizontal}` takes.
 export class VirtualizedList {
     // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
     // `[onEndReached]="…"`. See handleRefresh/accessibility*Tick below for how the still-callback-
-    // shaped ScrollView/RefreshControl @Input()s are fed from these.
+    // shaped scroll-view/refresh-control bag keys are fed from these.
     endReached = new EventEmitter();
     startReached = new EventEmitter();
     refresh = new EventEmitter();
@@ -47,6 +52,13 @@ export class VirtualizedList {
     accessibilityTap = new EventEmitter();
     magicTap = new EventEmitter();
     accessibilityEscape = new EventEmitter();
+    // This wrapper binds the four gated accessibility events on the component it renders, which
+    // Angular forces to be unconditional and which would light that component's gates on every
+    // instance. It answers for them instead — see `gate-demand.ts`.
+    gateDemandAbove = injectGateDemandAbove();
+    wantsGate(name) {
+        return gateWanted(this.gateDemandAbove, name, this[name]);
+    }
     data;
     getItem;
     getItemCount;
@@ -129,10 +141,19 @@ export class VirtualizedList {
     footerDir;
     emptyDir;
     separatorDir;
-    // The composed inner scroll view. Its instance IS an IScrollViewHandle (scrollTo / scrollToEnd /
-    // flashScrollIndicators / getScrollNode), so the imperative handle delegates straight to it.
-    // Available from ngAfterViewInit on; the handle reads the node lazily and no-ops before commit.
-    scrollView;
+    // The inner scroll TAG's own engine node — a template ref on a bare intrinsic hands back the
+    // host node directly (`isSymbioteNode(elementRef.nativeElement)`, matching `anchorHostStyle`'s
+    // own reader below), so there is no wrapper component left to read a handle off. Present from
+    // whichever branch (`scroll-view` / `horizontal-scroll-view`) is currently mounted, once the
+    // template has run at least one CD pass.
+    scrollHostRef;
+    get scrollNode() {
+        const node = this.scrollHostRef?.nativeElement;
+        return isSymbioteNode(node) ? node : null;
+    }
+    // `buildScrollViewHandle` reads the node lazily through the getter above and no-ops before
+    // commit — the same function every other adapter feeds from its own host-instance accessor.
+    scrollHandle = buildScrollViewHandle(() => this.scrollNode);
     // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
     itemCount = EMPTY_OFFSET;
     windowCells = [];
@@ -201,12 +222,12 @@ export class VirtualizedList {
     lastRecompute = undefined;
     cdr = inject(ChangeDetectorRef);
     // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-    // onto (see anchorHostStyle's doc comment) — NOT `scrollView` above, which targets the real
-    // inner `<ScrollView>` one level down (itself its own separate anchor host).
+    // onto (see anchorHostStyle's doc comment) — NOT `scrollHostRef` above, which targets the real
+    // inner `<scroll-view>`/`<horizontal-scroll-view>` tag one level down.
     elementRef = inject(ElementRef);
-    // Bridges the non-reactive @Input fields into the reactive graph so the computed below can
-    // memoize a bag derived from them (the same bridge ScrollView's shared.ts uses - read its comment
-    // for why signal inputs are not an option while this package's unit suite runs on JIT).
+    // Bridges the non-reactive @Input fields into the reactive graph so `foldedAccessibility` below
+    // can memoize a bag derived from them (read its own comment for why signal inputs are not an
+    // option while this package's unit suite runs on JIT).
     //
     // ONLY safe for a bag whose every dependency is an @Input. This list's window machinery
     // (listState, renderVersion, windowCells, the measured metrics) is driven from scroll/layout
@@ -215,12 +236,13 @@ export class VirtualizedList {
     // instead of widening this one.
     inputsRevision = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputsRevision" }] : /* istanbul ignore next */ []));
-    // MEASURED: the template feeds 20 separate <ScrollView> inputs off this one bag, and Angular does
-    // not cache a getter across binding expressions - as a getter it rebuilt the object 20 times per
-    // refresh, and every consumer saw a fresh reference, so all 20 reported "changed" and wrote
-    // through to the ScrollView. A computed evaluates once and hands back the SAME object until an
-    // input actually changes. Every dependency below is an @Input, which is what makes
-    // inputsRevision a complete dependency set here.
+    // MEASURED (while ScrollView was still a wrapper): the template fed 20 separate inputs off this
+    // one bag, and Angular does not cache a getter across binding expressions - as a getter it
+    // rebuilt the object 20 times per refresh, and every consumer saw a fresh reference, so all 20
+    // reported "changed" and wrote through. A computed evaluates once and hands back the SAME object
+    // until an input actually changes. Every dependency below is an @Input, which is what makes
+    // inputsRevision a complete dependency set here — `scrollViewBag()` reuses this result rather
+    // than re-running the fold.
     foldedAccessibility = computed(() => {
         this.inputsRevision();
         return resolveAccessibilityProps({
@@ -265,6 +287,54 @@ export class VirtualizedList {
     get shouldRenderRefreshControl() {
         return this.refreshRequested ?? this.refresh.observed;
     }
+    // The flat bag fed to the scroll tag via `[symbioteHostProps]`. A plain method, not `computed()`:
+    // most of these fields (resolvedStyle, renderedStickyIndices, commandedOffset, …) are recomputed
+    // in ngDoCheck/dispatch as ordinary fields, not signals, so a computed() memoized only against
+    // `inputsRevision` would go stale the moment one of them changed outside an @Input() write. The
+    // directive itself diffs per key before writing to the engine (`primitives/shared.ts`), so a
+    // fresh object every CD pass costs nothing beyond the literal allocation.
+    scrollViewBag() {
+        return {
+            ...this.foldedAccessibility(),
+            style: this.resolvedStyle,
+            contentContainerStyle: this.resolvedContentContainerStyle,
+            onScroll: this.onScrollTick,
+            onLayout: this.onLayoutTick,
+            onScrollBeginDrag: this.onScrollBeginDrag,
+            onScrollEndDrag: this.onScrollEndDrag,
+            onMomentumScrollBegin: this.onMomentumScrollBegin,
+            onMomentumScrollEnd: this.onMomentumScrollEnd,
+            scrollEventThrottle: this.scrollEventThrottle,
+            keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
+            keyboardDismissMode: this.keyboardDismissMode,
+            contentOffset: this.commandedOffset,
+            stickyHeaderIndices: this.renderedStickyIndices,
+            maintainVisibleContentPosition: this.resolvedMaintainVisibleContentPosition,
+            // The four boolean-gated Fabric events (`.claude/rules/fabric-boolean-event-gates.md`): the
+            // TAG has no `.observed` of its own, so `wantsGate` (own subscriber, or the demand from
+            // whatever wraps this list) is what decides whether the flag reaches Fabric at all.
+            onAccessibilityAction: this.wantsGate('accessibilityAction')
+                ? this.accessibilityActionTick
+                : undefined,
+            onAccessibilityTap: this.wantsGate('accessibilityTap')
+                ? this.accessibilityTapTick
+                : undefined,
+            onMagicTap: this.wantsGate('magicTap') ? this.magicTapTick : undefined,
+            onAccessibilityEscape: this.wantsGate('accessibilityEscape')
+                ? this.accessibilityEscapeTick
+                : undefined,
+        };
+    }
+    // The `refresh-control` tag's own bag — an ordinary first child, re-parented per platform by the
+    // scroll-view behavior (`../refresh-control-props.ts`). `onRefresh` is a plain listener prop, not
+    // a gated one: RefreshControl's `refresh` is unaffected by `fabric-boolean-event-gates.md`.
+    refreshControlBag() {
+        return {
+            refreshing: this.refreshing ?? false,
+            progressViewOffset: this.progressViewOffset,
+            onRefresh: this.handleRefresh,
+        };
+    }
     get isHorizontal() {
         return this.horizontal === true;
     }
@@ -289,9 +359,10 @@ export class VirtualizedList {
     get onStartReachedThresholdValue() {
         return this.onStartReachedThreshold ?? DEFAULT_START_REACHED_THRESHOLD;
     }
-    // ScrollView's onScroll stays an @Input() callback (an Animated.event(...) target must be able to
-    // flow through it, which an @Output() can't carry), so this is a stable arrow field passed
-    // straight to [onScroll]. onLayout is a real @Output() now, bound via (layout)="onLayoutTick($event)".
+    // onScroll stays a plain callback bag key (an Animated.event(...) target must be able to flow
+    // through it, which an @Output() can't carry), so this is a stable arrow field read straight into
+    // scrollViewBag()'s `onScroll`. onLayout is unconditional too — this list always needs its own
+    // layout for windowing, regardless of whether an app subscribes to anything.
     onScrollTick = (event) => {
         countAngular('scrollTicks');
         const offset = readScrollOffset(event, this.isHorizontal);
@@ -311,9 +382,9 @@ export class VirtualizedList {
         dlog(`Angular VirtualizedList onLayout viewport=${length}`);
         this.dispatch({ kind: 'layout', length });
     };
-    // RefreshControl's refresh and ScrollView's accessibility events are real @Output()s now, bound
-    // via (refresh)="handleRefresh()" / (accessibilityAction)="accessibilityActionTick($event)" etc.
-    // — these fields just adapt VirtualizedList's own @Output() into a plain re-emit callback.
+    // RefreshControl's refresh and the scroll tag's accessibility events reach here as plain
+    // listener-prop values in scrollViewBag()/refreshControlBag() — these fields just adapt
+    // VirtualizedList's own @Output() into a plain re-emit callback.
     handleRefresh = () => {
         this.refresh.emit();
     };
@@ -781,19 +852,19 @@ export class VirtualizedList {
         });
     }
     flashScrollIndicators() {
-        this.scrollView?.flashScrollIndicators();
+        this.scrollHandle.flashScrollIndicators();
     }
     getNativeScrollRef() {
-        return this.scrollView ?? null;
+        return this.scrollNode !== null ? this.scrollHandle : null;
     }
     getScrollableNode() {
-        return this.scrollView ?? null;
+        return this.scrollNode !== null ? this.scrollHandle : null;
     }
     getScrollResponder() {
-        return this.scrollView ?? null;
+        return this.scrollNode !== null ? this.scrollHandle : null;
     }
     getScrollNode() {
-        return this.scrollView?.getScrollNode() ?? null;
+        return this.scrollHandle.getScrollNode();
     }
     recordInteraction() {
         this.dispatch({ kind: 'record-interaction' });
@@ -803,9 +874,9 @@ export class VirtualizedList {
         const target = this.isHorizontal
             ? { x: clamped, y: EMPTY_OFFSET }
             : { x: EMPTY_OFFSET, y: clamped };
-        if (this.scrollView !== undefined) {
+        if (this.scrollNode !== null) {
             dlog(`Angular VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${this.isHorizontal})`);
-            this.scrollView.scrollTo({ x: target.x, y: target.y, animated });
+            this.scrollHandle.scrollTo({ x: target.x, y: target.y, animated });
             return;
         }
         dlog(`Angular VirtualizedList scrollTo offset=${clamped} pending-ref`);
@@ -813,136 +884,148 @@ export class VirtualizedList {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VirtualizedList, isStandalone: true, selector: "VirtualizedList", inputs: { data: "data", getItem: "getItem", getItemCount: "getItemCount", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaHidden: "ariaHidden", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "scrollView", first: true, predicate: ScrollView, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
-    <ScrollView
-      [horizontal]="isHorizontal"
-      [style]="resolvedStyle"
-      [contentContainerStyle]="resolvedContentContainerStyle"
-      [testID]="foldedAccessibility().testID"
-      [nativeID]="foldedAccessibility().nativeID"
-      [accessible]="foldedAccessibility().accessible"
-      [accessibilityLabel]="foldedAccessibility().accessibilityLabel"
-      [accessibilityHint]="foldedAccessibility().accessibilityHint"
-      [accessibilityRole]="foldedAccessibility().accessibilityRole"
-      [accessibilityState]="foldedAccessibility().accessibilityState"
-      [accessibilityValue]="foldedAccessibility().accessibilityValue"
-      [accessibilityActions]="foldedAccessibility().accessibilityActions"
-      [accessibilityLabelledBy]="foldedAccessibility().accessibilityLabelledBy"
-      [importantForAccessibility]="
-        foldedAccessibility().importantForAccessibility
-      "
-      [accessibilityLiveRegion]="foldedAccessibility().accessibilityLiveRegion"
-      [screenReaderFocusable]="foldedAccessibility().screenReaderFocusable"
-      [accessibilityViewIsModal]="
-        foldedAccessibility().accessibilityViewIsModal
-      "
-      [accessibilityElementsHidden]="
-        foldedAccessibility().accessibilityElementsHidden
-      "
-      [accessibilityIgnoresInvertColors]="
-        foldedAccessibility().accessibilityIgnoresInvertColors
-      "
-      [accessibilityLanguage]="foldedAccessibility().accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="
-        foldedAccessibility().accessibilityRespondsToUserInteraction
-      "
-      [accessibilityShowsLargeContentViewer]="
-        foldedAccessibility().accessibilityShowsLargeContentViewer
-      "
-      [accessibilityLargeContentTitle]="
-        foldedAccessibility().accessibilityLargeContentTitle
-      "
-      (accessibilityAction)="accessibilityActionTick($event)"
-      (accessibilityTap)="accessibilityTapTick($event)"
-      (magicTap)="magicTapTick($event)"
-      (accessibilityEscape)="accessibilityEscapeTick($event)"
-      [onScroll]="onScrollTick"
-      (layout)="onLayoutTick($event)"
-      [onScrollBeginDrag]="onScrollBeginDrag"
-      [onScrollEndDrag]="onScrollEndDrag"
-      [onMomentumScrollBegin]="onMomentumScrollBegin"
-      [onMomentumScrollEnd]="onMomentumScrollEnd"
-      [scrollEventThrottle]="scrollEventThrottle"
-      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
-      [keyboardDismissMode]="keyboardDismissMode"
-      [contentOffset]="commandedOffset"
-      [stickyHeaderIndices]="renderedStickyIndices"
-      [maintainVisibleContentPosition]="resolvedMaintainVisibleContentPosition"
-    >
-      @if (shouldRenderRefreshControl) {
-        <RefreshControl
-          [refreshing]="refreshing ?? false"
-          (refresh)="handleRefresh()"
-          [progressViewOffset]="progressViewOffset"
-        />
-      }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VirtualizedList, isStandalone: true, selector: "VirtualizedList", inputs: { data: "data", getItem: "getItem", getItemCount: "getItemCount", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaHidden: "ariaHidden", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "scrollHostRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
+    @if (isHorizontal) {
+      <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
+        }
 
-      @if (headerDir !== undefined) {
-        <symbiote-view>
-          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-        </symbiote-view>
-      }
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
+        }
 
-      @if (itemCount === 0) {
-        @if (emptyDir !== undefined) {
-          <symbiote-view>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </symbiote-view>
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <view
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="forcedStickyCell.context"
+              ></ng-container>
+            </view>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          @for (cell of windowCells; track cell.key) {
+            <view
+              (layout)="handleCellLayout(cell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="cell.context"
+              ></ng-container>
+              @if (cell.separatorContext !== undefined) {
+                <ng-container
+                  [vListOutlet]="separatorDir?.templateRef"
+                  [vListOutletContext]="cell.separatorContext"
+                ></ng-container>
+              }
+            </view>
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
         }
-      } @else {
-        @if (leadingSpacerStyle !== null) {
-          <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
+
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
         }
-        @if (forcedStickyCell !== null) {
-          <symbiote-view
-            (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-            [style]="cellStyle"
-          >
-            <ng-container
-              [vListOutlet]="itemDir?.templateRef"
-              [vListOutletContext]="forcedStickyCell.context"
-            ></ng-container>
-          </symbiote-view>
+      </horizontal-scroll-view>
+    } @else {
+      <scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
         }
-        @if (gapSpacerStyle !== null) {
-          <symbiote-view [style]="gapSpacerStyle"></symbiote-view>
+
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
         }
-        <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
-             (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
-             the chrome between two cells is gap + separator + gap while a spacer collapsing that
-             region replaces it with a single gap — every cell below the leading spacer then lands
-             short by (separator + gap) and the content jumps by that much whenever the window's
-             first index moves. Measured at exactly 17px on device 2026-08-19; see
-             .claude/rules/list-geometry-feedback-loop.md. -->
-        @for (cell of windowCells; track cell.key) {
-          <symbiote-view
-            (layout)="handleCellLayout(cell.measure, $event)"
-            [style]="cellStyle"
-          >
-            <ng-container
-              [vListOutlet]="itemDir?.templateRef"
-              [vListOutletContext]="cell.context"
-            ></ng-container>
-            @if (cell.separatorContext !== undefined) {
+
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <view
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
               <ng-container
-                [vListOutlet]="separatorDir?.templateRef"
-                [vListOutletContext]="cell.separatorContext"
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            }
-          </symbiote-view>
-        }
-        @if (trailingSpacerStyle !== null) {
-          <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>
+            </view>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
+               (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
+               the chrome between two cells is gap + separator + gap while a spacer collapsing that
+               region replaces it with a single gap — every cell below the leading spacer then lands
+               short by (separator + gap) and the content jumps by that much whenever the window's
+               first index moves. Measured at exactly 17px on device 2026-08-19; see
+               .claude/rules/list-geometry-feedback-loop.md. -->
+          @for (cell of windowCells; track cell.key) {
+            <view
+              (layout)="handleCellLayout(cell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="cell.context"
+              ></ng-container>
+              @if (cell.separatorContext !== undefined) {
+                <ng-container
+                  [vListOutlet]="separatorDir?.templateRef"
+                  [vListOutletContext]="cell.separatorContext"
+                ></ng-container>
+              }
+            </view>
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
         }
-      }
 
-      @if (footerDir !== undefined) {
-        <symbiote-view>
-          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-        </symbiote-view>
-      }
-    </ScrollView>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScrollView, selector: "ScrollView", inputs: ["style", "contentContainerStyle", "horizontal", "scrollEnabled", "showsVerticalScrollIndicator", "showsHorizontalScrollIndicator", "pagingEnabled", "bounces", "decelerationRate", "scrollEventThrottle", "contentInset", "contentOffset", "removeClippedSubviews", "snapToInterval", "snapToOffsets", "snapToAlignment", "snapToStart", "snapToEnd", "disableIntervalMomentum", "stickyHeaderIndices", "invertStickyHeaders", "StickyHeaderComponent", "keyboardDismissMode", "keyboardShouldPersistTaps", "maintainVisibleContentPosition", "alwaysBounceHorizontal", "alwaysBounceVertical", "centerContent", "scrollIndicatorInsets", "indicatorStyle", "directionalLockEnabled", "automaticallyAdjustKeyboardInsets", "contentInsetAdjustmentBehavior", "minimumZoomScale", "maximumZoomScale", "zoomScale", "bouncesZoom", "pinchGestureEnabled", "nestedScrollEnabled", "overScrollMode", "fadingEdgeLength", "persistentScrollbar", "endFillColor", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"] }, { kind: "component", type: RefreshControl, selector: "RefreshControl", inputs: ["refreshing", "tintColor", "title", "titleColor", "progressViewOffset", "colors", "progressBackgroundColor", "size", "enabled", "style", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"], outputs: ["refresh", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "symbiote-view, View" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
+        }
+      </scroll-view>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, decorators: [{
             type: Component,
@@ -953,137 +1036,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         { directive: SymbioteStyleInputDirective, inputs: ['style'] },
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [ScrollView, RefreshControl, VListOutletDirective, ViewHost],
+                    imports: [SymbioteHostPropsDirective, VListOutletDirective, ViewHost],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <ScrollView
-      [horizontal]="isHorizontal"
-      [style]="resolvedStyle"
-      [contentContainerStyle]="resolvedContentContainerStyle"
-      [testID]="foldedAccessibility().testID"
-      [nativeID]="foldedAccessibility().nativeID"
-      [accessible]="foldedAccessibility().accessible"
-      [accessibilityLabel]="foldedAccessibility().accessibilityLabel"
-      [accessibilityHint]="foldedAccessibility().accessibilityHint"
-      [accessibilityRole]="foldedAccessibility().accessibilityRole"
-      [accessibilityState]="foldedAccessibility().accessibilityState"
-      [accessibilityValue]="foldedAccessibility().accessibilityValue"
-      [accessibilityActions]="foldedAccessibility().accessibilityActions"
-      [accessibilityLabelledBy]="foldedAccessibility().accessibilityLabelledBy"
-      [importantForAccessibility]="
-        foldedAccessibility().importantForAccessibility
-      "
-      [accessibilityLiveRegion]="foldedAccessibility().accessibilityLiveRegion"
-      [screenReaderFocusable]="foldedAccessibility().screenReaderFocusable"
-      [accessibilityViewIsModal]="
-        foldedAccessibility().accessibilityViewIsModal
-      "
-      [accessibilityElementsHidden]="
-        foldedAccessibility().accessibilityElementsHidden
-      "
-      [accessibilityIgnoresInvertColors]="
-        foldedAccessibility().accessibilityIgnoresInvertColors
-      "
-      [accessibilityLanguage]="foldedAccessibility().accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="
-        foldedAccessibility().accessibilityRespondsToUserInteraction
-      "
-      [accessibilityShowsLargeContentViewer]="
-        foldedAccessibility().accessibilityShowsLargeContentViewer
-      "
-      [accessibilityLargeContentTitle]="
-        foldedAccessibility().accessibilityLargeContentTitle
-      "
-      (accessibilityAction)="accessibilityActionTick($event)"
-      (accessibilityTap)="accessibilityTapTick($event)"
-      (magicTap)="magicTapTick($event)"
-      (accessibilityEscape)="accessibilityEscapeTick($event)"
-      [onScroll]="onScrollTick"
-      (layout)="onLayoutTick($event)"
-      [onScrollBeginDrag]="onScrollBeginDrag"
-      [onScrollEndDrag]="onScrollEndDrag"
-      [onMomentumScrollBegin]="onMomentumScrollBegin"
-      [onMomentumScrollEnd]="onMomentumScrollEnd"
-      [scrollEventThrottle]="scrollEventThrottle"
-      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
-      [keyboardDismissMode]="keyboardDismissMode"
-      [contentOffset]="commandedOffset"
-      [stickyHeaderIndices]="renderedStickyIndices"
-      [maintainVisibleContentPosition]="resolvedMaintainVisibleContentPosition"
-    >
-      @if (shouldRenderRefreshControl) {
-        <RefreshControl
-          [refreshing]="refreshing ?? false"
-          (refresh)="handleRefresh()"
-          [progressViewOffset]="progressViewOffset"
-        />
-      }
+    @if (isHorizontal) {
+      <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
+        }
 
-      @if (headerDir !== undefined) {
-        <symbiote-view>
-          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-        </symbiote-view>
-      }
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
+        }
 
-      @if (itemCount === 0) {
-        @if (emptyDir !== undefined) {
-          <symbiote-view>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </symbiote-view>
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <view
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="forcedStickyCell.context"
+              ></ng-container>
+            </view>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          @for (cell of windowCells; track cell.key) {
+            <view
+              (layout)="handleCellLayout(cell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="cell.context"
+              ></ng-container>
+              @if (cell.separatorContext !== undefined) {
+                <ng-container
+                  [vListOutlet]="separatorDir?.templateRef"
+                  [vListOutletContext]="cell.separatorContext"
+                ></ng-container>
+              }
+            </view>
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
         }
-      } @else {
-        @if (leadingSpacerStyle !== null) {
-          <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
+
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
         }
-        @if (forcedStickyCell !== null) {
-          <symbiote-view
-            (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-            [style]="cellStyle"
-          >
-            <ng-container
-              [vListOutlet]="itemDir?.templateRef"
-              [vListOutletContext]="forcedStickyCell.context"
-            ></ng-container>
-          </symbiote-view>
+      </horizontal-scroll-view>
+    } @else {
+      <scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
         }
-        @if (gapSpacerStyle !== null) {
-          <symbiote-view [style]="gapSpacerStyle"></symbiote-view>
+
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
         }
-        <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
-             (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
-             the chrome between two cells is gap + separator + gap while a spacer collapsing that
-             region replaces it with a single gap — every cell below the leading spacer then lands
-             short by (separator + gap) and the content jumps by that much whenever the window's
-             first index moves. Measured at exactly 17px on device 2026-08-19; see
-             .claude/rules/list-geometry-feedback-loop.md. -->
-        @for (cell of windowCells; track cell.key) {
-          <symbiote-view
-            (layout)="handleCellLayout(cell.measure, $event)"
-            [style]="cellStyle"
-          >
-            <ng-container
-              [vListOutlet]="itemDir?.templateRef"
-              [vListOutletContext]="cell.context"
-            ></ng-container>
-            @if (cell.separatorContext !== undefined) {
+
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <view
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
               <ng-container
-                [vListOutlet]="separatorDir?.templateRef"
-                [vListOutletContext]="cell.separatorContext"
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            }
-          </symbiote-view>
-        }
-        @if (trailingSpacerStyle !== null) {
-          <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>
+            </view>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
+               (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
+               the chrome between two cells is gap + separator + gap while a spacer collapsing that
+               region replaces it with a single gap — every cell below the leading spacer then lands
+               short by (separator + gap) and the content jumps by that much whenever the window's
+               first index moves. Measured at exactly 17px on device 2026-08-19; see
+               .claude/rules/list-geometry-feedback-loop.md. -->
+          @for (cell of windowCells; track cell.key) {
+            <view
+              (layout)="handleCellLayout(cell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="cell.context"
+              ></ng-container>
+              @if (cell.separatorContext !== undefined) {
+                <ng-container
+                  [vListOutlet]="separatorDir?.templateRef"
+                  [vListOutletContext]="cell.separatorContext"
+                ></ng-container>
+              }
+            </view>
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
         }
-      }
 
-      @if (footerDir !== undefined) {
-        <symbiote-view>
-          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-        </symbiote-view>
-      }
-    </ScrollView>
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
+        }
+      </scroll-view>
+    }
   `,
                 }]
         }], propDecorators: { endReached: [{
@@ -1256,8 +1351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }], separatorDir: [{
                 type: ContentChild,
                 args: [VListSeparatorDirective]
-            }], scrollView: [{
+            }], scrollHostRef: [{
                 type: ViewChild,
-                args: [ScrollView]
+                args: ['scrollHost', { read: ElementRef }]
             }] } });
 //# sourceMappingURL=index.js.map