@symbiote-native/angular 2.0.1 → 3.0.0

package/build/angular/elements.js

@@ -32,10 +32,13 @@
 // (`[onPressMove]="fn"`, where `fn` keeps its `ISymbioteEvent` parameter).
 //
 // `valueChange` is the ONE exception, and it is forced rather than chosen: see ValueChangeElement.
-import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, Output, Renderer2, forwardRef, inject, } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, ErrorHandler, EventEmitter, Input, Output, Renderer2, forwardRef, inject, } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { VALUE_CHANGE_EVENT } from './renderer/value-change';
-import { createCallbackWrapper, registerViewFlush, unregisterViewFlush, } from './change-detection-flush';
+import { registerViewFlush, unregisterViewFlush, } from './change-detection-flush';
+import { SymbioteCallbackHost } from './callback-host';
+import { withholdFromRuntimeMatching } from './runtime-matching';
+import { SymbioteStyleHost } from './style-host';
 import * as i0 from "@angular/core";
 /**
  * The shared half of every element directive: the prop surface all tags accept, and the ONE
@@ -46,117 +49,23 @@ import * as i0 from "@angular/core";
  * — so without this loop a bare tag commits nothing at all. It stays generic on purpose: per-prop
  * forwarding code is a component wrapper by another name, which is what this migration removes.
  * `renderer.setProperty` lands in the adapter's own renderer, which routes the value through the
- * engine's `routeProp` and applies the `id` -> `nativeID` and `symbioteStyle` -> `style` aliases.
+ * engine's `routeProp` and applies the `id` -> `nativeID` alias.
  */
 export class SymbioteElement {
-    renderer = inject(Renderer2);
-    host = inject(ElementRef);
-    detector = inject(ChangeDetectorRef);
-    // An `onX` PROP is called by the engine, so Angular is never told it fired. Shared with the
-    // component path's `SymbioteHostPropsDirective`, which has the identical deficit — see
-    // `createCallbackWrapper`.
-    wrapCallback = createCallbackWrapper(this.detector, this.host.nativeElement);
-    testID;
-    nativeID;
-    id;
-    accessible;
-    accessibilityLabel;
-    accessibilityHint;
-    accessibilityRole;
-    accessibilityState;
-    accessibilityValue;
-    accessibilityActions;
-    accessibilityLabelledBy;
-    importantForAccessibility;
-    accessibilityLiveRegion;
-    screenReaderFocusable;
-    accessibilityViewIsModal;
-    accessibilityElementsHidden;
-    accessibilityIgnoresInvertColors;
-    accessibilityLanguage;
-    accessibilityRespondsToUserInteraction;
-    accessibilityShowsLargeContentViewer;
-    accessibilityLargeContentTitle;
-    onAccessibilityAction;
-    onAccessibilityTap;
-    onMagicTap;
-    onAccessibilityEscape;
-    // The web aliases. Native reads only `accessibility*`; the engine folds these on the way in.
-    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';
-    // The responder gates return a boolean, which an Angular `(event)` binding cannot carry back to
-    // the caller — so the whole family is inputs, never outputs.
-    onStartShouldSetResponder;
-    onStartShouldSetResponderCapture;
-    onMoveShouldSetResponder;
-    onMoveShouldSetResponderCapture;
-    onResponderGrant;
-    onResponderReject;
-    onResponderStart;
-    onResponderMove;
-    onResponderEnd;
-    onResponderRelease;
-    onResponderTerminate;
-    onResponderTerminationRequest;
-    pointerEvents;
-    hitSlop;
-    focusable;
-    collapsable;
-    removeClippedSubviews;
-    renderToHardwareTextureAndroid;
-    shouldRasterizeIOS;
-    needsOffscreenAlphaCompositing;
-    symbioteStyle;
-    // Declared, and the reason is the one `element-props.ts` used to give for NOT declaring it —
-    // reversed by measurement. `[style]` on an element with no directive input reaches Angular's own
-    // CSS styling engine (`ɵɵstyleMap`), which cannot represent an RN StyleProp: an ARRAY decomposes
-    // into numeric-index keys and a FUNCTION — the press-state callback this ecosystem writes — dies
-    // in `toStylingKeyValueArray` as "ASSERTION ERROR: Unsupported styling type: function", taking
-    // the whole enclosing template update with it. Device-reported 2026-09-11: every `ActionButton`
-    // in examples/angular painted as an empty bordered box, because the throw aborted the update
-    // before its `<text>` child was ever reached.
-    //
-    // A declared input CLAIMS the binding at compile time, so it never reaches the styling engine —
-    // the same mechanism the primitive host COMPONENTS have always relied on
-    // (`primitives/shared.ts`), which is why `<Pressable [style]>` worked and its replacement tag did
-    // not. `[style.borderWidth.px]` is a different instruction (`ɵɵstyleProp`) and is untouched: it
-    // still reaches `Renderer2.setStyle`, which merges per key.
-    //
-    // The press-state callback rides the BASE type rather than `PressableElement` alone: a subclass
-    // cannot widen an inherited property, and only the pressables have a `pressed` to read — so on
-    // any other tag the engine resolves it at `pressed: false` and the looseness is in the type, not
-    // in what commits.
-    style;
-    // The flat-bag spelling of the events below. `(press)` and `[onPress]` are both supported and
-    // land in the same place; an app that already holds a handler bag binds the props.
-    onPress;
-    onPressIn;
-    onPressOut;
-    onPressMove;
-    onLongPress;
-    onLayout;
-    onFocus;
-    onBlur;
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.host = inject(ElementRef);
+    }
     ngOnChanges(changes) {
         for (const name of Object.keys(changes)) {
-            this.renderer.setProperty(this.host.nativeElement, name, this.wrapCallback(name, changes[name]?.currentValue));
+            this.renderer.setProperty(this.host.nativeElement, name, 
+            // Unwrapped on purpose: `SymbioteRenderer.setProperty` is where an `on*` value is wrapped
+            // now, and it is the call this line makes.
+            changes[name]?.currentValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteElement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteElement, isStandalone: true, inputs: { testID: "testID", nativeID: "nativeID", id: "id", 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", onAccessibilityAction: "onAccessibilityAction", onAccessibilityTap: "onAccessibilityTap", onMagicTap: "onMagicTap", onAccessibilityEscape: "onAccessibilityEscape", role: "role", "aria-label": "aria-label", "aria-labelledby": "aria-labelledby", "aria-live": "aria-live", "aria-hidden": "aria-hidden", "aria-busy": "aria-busy", "aria-checked": "aria-checked", "aria-disabled": "aria-disabled", "aria-expanded": "aria-expanded", "aria-selected": "aria-selected", "aria-modal": "aria-modal", "aria-valuemax": "aria-valuemax", "aria-valuemin": "aria-valuemin", "aria-valuenow": "aria-valuenow", "aria-valuetext": "aria-valuetext", onStartShouldSetResponder: "onStartShouldSetResponder", onStartShouldSetResponderCapture: "onStartShouldSetResponderCapture", onMoveShouldSetResponder: "onMoveShouldSetResponder", onMoveShouldSetResponderCapture: "onMoveShouldSetResponderCapture", onResponderGrant: "onResponderGrant", onResponderReject: "onResponderReject", onResponderStart: "onResponderStart", onResponderMove: "onResponderMove", onResponderEnd: "onResponderEnd", onResponderRelease: "onResponderRelease", onResponderTerminate: "onResponderTerminate", onResponderTerminationRequest: "onResponderTerminationRequest", pointerEvents: "pointerEvents", hitSlop: "hitSlop", focusable: "focusable", collapsable: "collapsable", removeClippedSubviews: "removeClippedSubviews", renderToHardwareTextureAndroid: "renderToHardwareTextureAndroid", shouldRasterizeIOS: "shouldRasterizeIOS", needsOffscreenAlphaCompositing: "needsOffscreenAlphaCompositing", symbioteStyle: "symbioteStyle", style: "style", onPress: "onPress", onPressIn: "onPressIn", onPressOut: "onPressOut", onPressMove: "onPressMove", onLongPress: "onLongPress", onLayout: "onLayout", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteElement, isStandalone: true, inputs: { testID: "testID", nativeID: "nativeID", id: "id", 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", onAccessibilityAction: "onAccessibilityAction", onAccessibilityTap: "onAccessibilityTap", onMagicTap: "onMagicTap", onAccessibilityEscape: "onAccessibilityEscape", role: "role", "aria-label": "aria-label", "aria-labelledby": "aria-labelledby", "aria-live": "aria-live", "aria-hidden": "aria-hidden", "aria-busy": "aria-busy", "aria-checked": "aria-checked", "aria-disabled": "aria-disabled", "aria-expanded": "aria-expanded", "aria-selected": "aria-selected", "aria-modal": "aria-modal", "aria-valuemax": "aria-valuemax", "aria-valuemin": "aria-valuemin", "aria-valuenow": "aria-valuenow", "aria-valuetext": "aria-valuetext", onStartShouldSetResponder: "onStartShouldSetResponder", onStartShouldSetResponderCapture: "onStartShouldSetResponderCapture", onMoveShouldSetResponder: "onMoveShouldSetResponder", onMoveShouldSetResponderCapture: "onMoveShouldSetResponderCapture", onResponderGrant: "onResponderGrant", onResponderReject: "onResponderReject", onResponderStart: "onResponderStart", onResponderMove: "onResponderMove", onResponderEnd: "onResponderEnd", onResponderRelease: "onResponderRelease", onResponderTerminate: "onResponderTerminate", onResponderTerminationRequest: "onResponderTerminationRequest", pointerEvents: "pointerEvents", hitSlop: "hitSlop", focusable: "focusable", collapsable: "collapsable", removeClippedSubviews: "removeClippedSubviews", renderToHardwareTextureAndroid: "renderToHardwareTextureAndroid", shouldRasterizeIOS: "shouldRasterizeIOS", needsOffscreenAlphaCompositing: "needsOffscreenAlphaCompositing", style: "style", class: "class", onPress: "onPress", onPressIn: "onPressIn", onPressOut: "onPressOut", onPressMove: "onPressMove", onLongPress: "onLongPress", onLayout: "onLayout", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteElement, decorators: [{
             type: Directive
@@ -280,10 +189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], needsOffscreenAlphaCompositing: [{
                 type: Input
-            }], symbioteStyle: [{
-                type: Input
             }], style: [{
                 type: Input
+            }], class: [{
+                type: Input
             }], onPress: [{
                 type: Input
             }], onPressIn: [{
@@ -314,9 +223,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class ReadBackElement extends SymbioteElement {
     constructor() {
         super();
+        // ITS OWN, now that the base has none. Three tags reach this class, so the injection is paid where
+        // it is read instead of on every element of a screen.
+        this.detector = inject(ChangeDetectorRef);
+        this.errorHandler = inject(ErrorHandler);
         const node = this.host.nativeElement;
         if (typeof node === 'object' && node !== null) {
-            registerViewFlush(node, () => this.detector.detectChanges());
+            registerViewFlush(node, () => this.flush());
+        }
+    }
+    // REPORTED, NOT RETHROWN, and it is Angular's own contract rather than a swallow. Every other
+    // change detection in an app runs inside `ApplicationRef.tick()`, which catches and hands the
+    // error to `ErrorHandler` — `render/index.ts` provides `SymbioteErrorHandler` for exactly that,
+    // after an unprovided token once turned every async tick exception into a hard crash. This flush
+    // is the ONE change detection that runs outside that boundary: the engine calls it from inside a
+    // native event dispatch, where a throw has nowhere to go but `RCTFatal`.
+    //
+    // Device-diagnosed 2026-09-20 on ApiPlaygroundScreen. `PlaygroundLifecycleLogger` emits from
+    // `ngDoCheck`/`ngAfterContentChecked`/`ngAfterViewChecked` and the screen's handler writes a
+    // signal its own template reads, so the view re-dirties itself on every pass and
+    // `detectChangesInViewWhileDirty` throws NG0103 after MAXIMUM_REFRESH_RERUNS. The scheduler's own
+    // ticks were already hitting it and reporting it quietly; the first KEYSTROKE took the same throw
+    // through here and killed the app — `Terminating app due to uncaught exception
+    // 'RCTFatalException: Unhandled JS Exception: Error: NG0103'`, with no redbox because Release has
+    // none. So the app bug is the app's, and a flush that turns a reported error into a fatal one is
+    // ours: a keystroke must not be stricter than a tick.
+    flush() {
+        try {
+            this.detector.detectChanges();
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
         }
     }
     ngOnDestroy() {
@@ -324,48 +261,49 @@ class ReadBackElement extends SymbioteElement {
         if (typeof node === 'object' && node !== null)
             unregisterViewFlush(node);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ReadBackElement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ReadBackElement, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ReadBackElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ReadBackElement, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ReadBackElement, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
+// BOTH SPELLINGS ON THE SEVEN DASHLESS TAGS, and it is a correctness fix rather than a convenience.
+//
+// The renderer has always mapped `symbiote-view` onto `view` (`PRIMITIVE_SELECTOR_ALIAS`), because
+// `CUSTOM_ELEMENTS_SCHEMA` admits an unknown element only when the name carries a hyphen — so the
+// hyphenated form is the spelling an app WITHOUT these directives has to use. It is the same tag and
+// commits the same node.
+//
+// It was not the same tag HERE. A selector of `view` alone meant an app that imports
+// `SYMBIOTE_ELEMENTS` and writes `<symbiote-view>` matched nothing: no type check on its props, no
+// declared inputs, none of `SymbioteElement`'s forwarding or callback wrapping — silently, with the
+// tree still looking right. Measured, that shape also ran ~8.6 us per element FASTER, which is what
+// made it look like an optimization instead of a hole (`angular-directive-cost.itest.ts`).
+//
+// Only the seven dashless tags need it: `hyphenatedIntrinsicAliases` skips any tag that already
+// carries a dash, so `symbiote-scroll-view` resolves nowhere on either side and the two halves agree
+// already.
 export class ViewElement extends SymbioteElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ViewElement, isStandalone: true, selector: "view", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ViewElement, isStandalone: true, selector: "view, symbiote-view", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ViewElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'view', standalone: true }]
+            args: [{ selector: 'view, symbiote-view', standalone: true }]
         }] });
 export class PressableElement extends SymbioteElement {
-    disabled;
-    cancelable;
-    delayLongPress;
-    delayHoverIn;
-    delayHoverOut;
-    onHoverIn;
-    onHoverOut;
-    pressRetentionOffset;
-    unstable_pressDelay;
-    android_ripple;
-    android_disableSound;
-    hasTVPreferredFocus;
-    nextFocusDown;
-    nextFocusForward;
-    nextFocusLeft;
-    nextFocusRight;
-    nextFocusUp;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PressableElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: PressableElement, isStandalone: true, selector: "pressable", inputs: { disabled: "disabled", cancelable: "cancelable", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", onHoverIn: "onHoverIn", onHoverOut: "onHoverOut", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PressableElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: PressableElement, isStandalone: true, selector: "pressable, symbiote-pressable", inputs: { disabled: "disabled", cancelable: "cancelable", blockNativeResponder: "blockNativeResponder", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", onHoverIn: "onHoverIn", onHoverOut: "onHoverOut", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", testOnly_pressed: "testOnly_pressed", android_disableSound: "android_disableSound", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PressableElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'pressable', standalone: true }]
+            args: [{ selector: 'pressable, symbiote-pressable', standalone: true }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], cancelable: [{
                 type: Input
+            }], blockNativeResponder: [{
+                type: Input
             }], delayLongPress: [{
                 type: Input
             }], delayHoverIn: [{
@@ -382,6 +320,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], android_ripple: [{
                 type: Input
+            }], testOnly_pressed: [{
+                type: Input
             }], android_disableSound: [{
                 type: Input
             }], hasTVPreferredFocus: [{
@@ -400,12 +340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 // RN's TouchableOpacity is a Pressable that also fades, and both halves are on the engine node —
 // so it takes the same inputs and adds only the fade's own knob.
 export class TouchableOpacityElement extends PressableElement {
-    activeOpacity;
-    delayPressIn;
-    delayPressOut;
-    minPressDuration;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableOpacityElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableOpacityElement, isStandalone: true, selector: "touchable-opacity", inputs: { activeOpacity: "activeOpacity", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableOpacityElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableOpacityElement, isStandalone: true, selector: "touchable-opacity", inputs: { activeOpacity: "activeOpacity", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableOpacityElement, decorators: [{
             type: Directive,
@@ -424,13 +360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 // press surface plus the two knobs that describe the underlay. `onShowUnderlay`/`onHideUnderlay`
 // need no @Input: they are events, bound as `(showUnderlay)` through the renderer's own listen.
 export class TouchableHighlightElement extends PressableElement {
-    activeOpacity;
-    underlayColor;
-    delayPressIn;
-    delayPressOut;
-    minPressDuration;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableHighlightElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableHighlightElement, isStandalone: true, selector: "touchable-highlight", inputs: { activeOpacity: "activeOpacity", underlayColor: "underlayColor", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableHighlightElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableHighlightElement, isStandalone: true, selector: "touchable-highlight", inputs: { activeOpacity: "activeOpacity", underlayColor: "underlayColor", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", touchSoundDisabled: "touchSoundDisabled" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableHighlightElement, decorators: [{
             type: Directive,
@@ -445,16 +376,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], minPressDuration: [{
                 type: Input
+            }], touchSoundDisabled: [{
+                type: Input
             }] } });
 // RN's TouchableNativeFeedback is a Pressable that CLONES onto its single child instead of
 // rendering anything (TouchableNativeFeedback.js:339) — so the tag takes the press surface plus the
 // two props that pick the Android ripple drawable. The tag itself commits no native view; the
 // behavior configures the child, which is why `elements.test.ts` reads it as an anchor.
 export class TouchableNativeFeedbackElement extends PressableElement {
-    background;
-    useForeground;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableNativeFeedbackElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableNativeFeedbackElement, isStandalone: true, selector: "touchable-native-feedback", inputs: { background: "background", useForeground: "useForeground" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableNativeFeedbackElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableNativeFeedbackElement, isStandalone: true, selector: "touchable-native-feedback", inputs: { background: "background", useForeground: "useForeground", touchSoundDisabled: "touchSoundDisabled" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableNativeFeedbackElement, decorators: [{
             type: Directive,
@@ -463,17 +394,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], useForeground: [{
                 type: Input
+            }], touchSoundDisabled: [{
+                type: Input
             }] } });
 // RN's TouchableWithoutFeedback clones onto its single child the same way
 // (TouchableWithoutFeedback.js:286) and installs no drawable, so it takes the press surface plus the
 // three timing knobs it forwards to Pressability (:186-190) and nothing else. Like the tag above it
 // commits no native view; `elements.test.ts` reads it as an anchor.
 export class TouchableWithoutFeedbackElement extends PressableElement {
-    delayPressIn;
-    delayPressOut;
-    minPressDuration;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableWithoutFeedbackElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableWithoutFeedbackElement, isStandalone: true, selector: "touchable-without-feedback", inputs: { delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableWithoutFeedbackElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TouchableWithoutFeedbackElement, isStandalone: true, selector: "touchable-without-feedback", inputs: { delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", touchSoundDisabled: "touchSoundDisabled" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableWithoutFeedbackElement, decorators: [{
             type: Directive,
@@ -484,20 +414,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], minPressDuration: [{
                 type: Input
+            }], touchSoundDisabled: [{
+                type: Input
             }] } });
 // RN's Button IS a TouchableOpacity (Button.js:384), and the behavior builds the view and the
 // label under it — so the tag takes the touchable's surface plus the four props Button owns. There
 // is no `style`: RN's Button has no such prop, and the label/background come from `color`.
 export class ButtonElement extends TouchableOpacityElement {
-    title;
-    color;
-    touchSoundDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ButtonElement, isStandalone: true, selector: "button", inputs: { title: "title", color: "color", touchSoundDisabled: "touchSoundDisabled" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ButtonElement, isStandalone: true, selector: "button, symbiote-button", inputs: { title: "title", color: "color", touchSoundDisabled: "touchSoundDisabled" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'button', standalone: true }]
+            args: [{ selector: 'button, symbiote-button', standalone: true }]
         }], propDecorators: { title: [{
                 type: Input
             }], color: [{
@@ -506,25 +435,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class TextElement extends SymbioteElement {
-    // Narrows the inherited input to a TEXT style so `fontSize`/`fontWeight` type-check here. The
-    // initializer is what TS2612 asks for to accept a redeclaration as deliberate; `declare` would
-    // be the other answer and cannot carry a decorator.
-    style = undefined;
-    numberOfLines;
-    ellipsizeMode;
-    selectable;
-    adjustsFontSizeToFit;
-    minimumFontScale;
-    allowFontScaling;
-    maxFontSizeMultiplier;
-    selectionColor;
-    disabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextElement, isStandalone: true, selector: "text", inputs: { style: "style", numberOfLines: "numberOfLines", ellipsizeMode: "ellipsizeMode", selectable: "selectable", adjustsFontSizeToFit: "adjustsFontSizeToFit", minimumFontScale: "minimumFontScale", allowFontScaling: "allowFontScaling", maxFontSizeMultiplier: "maxFontSizeMultiplier", selectionColor: "selectionColor", disabled: "disabled" }, usesInheritance: true, ngImport: i0 });
+    constructor() {
+        super(...arguments);
+        // Narrows the inherited input to a TEXT style so `fontSize`/`fontWeight` type-check here. The
+        // initializer is what TS2612 asks for to accept a redeclaration as deliberate; `declare` would
+        // be the other answer and cannot carry a decorator.
+        this.style = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextElement, isStandalone: true, selector: "text, symbiote-text", inputs: { style: "style", numberOfLines: "numberOfLines", ellipsizeMode: "ellipsizeMode", selectable: "selectable", adjustsFontSizeToFit: "adjustsFontSizeToFit", minimumFontScale: "minimumFontScale", allowFontScaling: "allowFontScaling", maxFontSizeMultiplier: "maxFontSizeMultiplier", selectionColor: "selectionColor", disabled: "disabled" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'text', standalone: true }]
+            args: [{ selector: 'text, symbiote-text', standalone: true }]
         }], propDecorators: { style: [{
                 type: Input
             }], numberOfLines: [{
@@ -547,35 +470,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class ImageElement extends SymbioteElement {
-    source;
-    src;
-    srcSet;
-    alt;
-    width;
-    height;
-    resizeMode;
-    resizeMethod;
-    defaultSource;
-    loadingIndicatorSource;
-    blurRadius;
-    capInsets;
-    crossOrigin;
-    referrerPolicy;
-    fadeDuration;
-    progressiveRenderingEnabled;
-    tintColor;
-    onLoad;
-    onLoadStart;
-    onLoadEnd;
-    onError;
-    onProgress;
-    onPartialLoad;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ImageElement, isStandalone: true, selector: "image", inputs: { source: "source", src: "src", srcSet: "srcSet", alt: "alt", width: "width", height: "height", resizeMode: "resizeMode", resizeMethod: "resizeMethod", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", blurRadius: "blurRadius", capInsets: "capInsets", crossOrigin: "crossOrigin", referrerPolicy: "referrerPolicy", fadeDuration: "fadeDuration", progressiveRenderingEnabled: "progressiveRenderingEnabled", tintColor: "tintColor", onLoad: "onLoad", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", onError: "onError", onProgress: "onProgress", onPartialLoad: "onPartialLoad" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ImageElement, isStandalone: true, selector: "image, symbiote-image", inputs: { source: "source", src: "src", srcSet: "srcSet", alt: "alt", width: "width", height: "height", resizeMode: "resizeMode", resizeMethod: "resizeMethod", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", blurRadius: "blurRadius", capInsets: "capInsets", crossOrigin: "crossOrigin", referrerPolicy: "referrerPolicy", fadeDuration: "fadeDuration", progressiveRenderingEnabled: "progressiveRenderingEnabled", tintColor: "tintColor", onLoad: "onLoad", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", onError: "onError", onProgress: "onProgress", onPartialLoad: "onPartialLoad" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'image', standalone: true }]
+            args: [{ selector: 'image, symbiote-image', standalone: true }]
         }], propDecorators: { source: [{
                 type: Input
             }], src: [{
@@ -628,32 +528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 // (ImageBackground.js:81) — so this directive declares them to make the BINDING legal, and the
 // engine decides which node each lands on.
 export class ImageBackgroundElement extends SymbioteElement {
-    imageStyle;
-    source;
-    src;
-    srcSet;
-    alt;
-    width;
-    height;
-    resizeMode;
-    resizeMethod;
-    defaultSource;
-    loadingIndicatorSource;
-    blurRadius;
-    capInsets;
-    crossOrigin;
-    referrerPolicy;
-    fadeDuration;
-    progressiveRenderingEnabled;
-    tintColor;
-    onLoad;
-    onLoadStart;
-    onLoadEnd;
-    onError;
-    onProgress;
-    onPartialLoad;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageBackgroundElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ImageBackgroundElement, isStandalone: true, selector: "image-background", inputs: { imageStyle: "imageStyle", source: "source", src: "src", srcSet: "srcSet", alt: "alt", width: "width", height: "height", resizeMode: "resizeMode", resizeMethod: "resizeMethod", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", blurRadius: "blurRadius", capInsets: "capInsets", crossOrigin: "crossOrigin", referrerPolicy: "referrerPolicy", fadeDuration: "fadeDuration", progressiveRenderingEnabled: "progressiveRenderingEnabled", tintColor: "tintColor", onLoad: "onLoad", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", onError: "onError", onProgress: "onProgress", onPartialLoad: "onPartialLoad" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageBackgroundElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ImageBackgroundElement, isStandalone: true, selector: "image-background", inputs: { imageStyle: "imageStyle", source: "source", src: "src", srcSet: "srcSet", alt: "alt", width: "width", height: "height", resizeMode: "resizeMode", resizeMethod: "resizeMethod", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", blurRadius: "blurRadius", capInsets: "capInsets", crossOrigin: "crossOrigin", referrerPolicy: "referrerPolicy", fadeDuration: "fadeDuration", progressiveRenderingEnabled: "progressiveRenderingEnabled", tintColor: "tintColor", onLoad: "onLoad", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", onError: "onError", onProgress: "onProgress", onPartialLoad: "onPartialLoad" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageBackgroundElement, decorators: [{
             type: Directive,
@@ -708,57 +584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class ScrollViewElement extends SymbioteElement {
-    // No `horizontal` @Input: the axis is the TAG you write, never a prop — see
-    // `../components/scroll-view-props.ts`'s header. `HorizontalScrollViewElement` below is the
-    // other spelling, not a variant of this one.
-    scrollEnabled;
-    scrollEventThrottle;
-    contentContainerStyle;
-    contentInset;
-    contentInsetAdjustmentBehavior;
-    contentOffset;
-    scrollIndicatorInsets;
-    showsHorizontalScrollIndicator;
-    showsVerticalScrollIndicator;
-    alwaysBounceHorizontal;
-    alwaysBounceVertical;
-    bounces;
-    bouncesZoom;
-    centerContent;
-    decelerationRate;
-    directionalLockEnabled;
-    disableIntervalMomentum;
-    endFillColor;
-    fadingEdgeLength;
-    indicatorStyle;
-    invertStickyHeaders;
-    keyboardDismissMode;
-    keyboardShouldPersistTaps;
-    automaticallyAdjustKeyboardInsets;
-    maintainVisibleContentPosition;
-    maximumZoomScale;
-    minimumZoomScale;
-    zoomScale;
-    nestedScrollEnabled;
-    overScrollMode;
-    pagingEnabled;
-    persistentScrollbar;
-    pinchGestureEnabled;
-    snapToAlignment;
-    snapToEnd;
-    snapToInterval;
-    snapToOffsets;
-    snapToStart;
-    stickyHeaderIndices;
-    onScroll;
-    onScrollBeginDrag;
-    onScrollEndDrag;
-    onMomentumScrollBegin;
-    onMomentumScrollEnd;
-    onScrollToTop;
-    onContentSizeChange;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ScrollViewElement, isStandalone: true, selector: "scroll-view", inputs: { scrollEnabled: "scrollEnabled", scrollEventThrottle: "scrollEventThrottle", contentContainerStyle: "contentContainerStyle", contentInset: "contentInset", contentInsetAdjustmentBehavior: "contentInsetAdjustmentBehavior", contentOffset: "contentOffset", scrollIndicatorInsets: "scrollIndicatorInsets", showsHorizontalScrollIndicator: "showsHorizontalScrollIndicator", showsVerticalScrollIndicator: "showsVerticalScrollIndicator", alwaysBounceHorizontal: "alwaysBounceHorizontal", alwaysBounceVertical: "alwaysBounceVertical", bounces: "bounces", bouncesZoom: "bouncesZoom", centerContent: "centerContent", decelerationRate: "decelerationRate", directionalLockEnabled: "directionalLockEnabled", disableIntervalMomentum: "disableIntervalMomentum", endFillColor: "endFillColor", fadingEdgeLength: "fadingEdgeLength", indicatorStyle: "indicatorStyle", invertStickyHeaders: "invertStickyHeaders", keyboardDismissMode: "keyboardDismissMode", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", automaticallyAdjustKeyboardInsets: "automaticallyAdjustKeyboardInsets", maintainVisibleContentPosition: "maintainVisibleContentPosition", maximumZoomScale: "maximumZoomScale", minimumZoomScale: "minimumZoomScale", zoomScale: "zoomScale", nestedScrollEnabled: "nestedScrollEnabled", overScrollMode: "overScrollMode", pagingEnabled: "pagingEnabled", persistentScrollbar: "persistentScrollbar", pinchGestureEnabled: "pinchGestureEnabled", snapToAlignment: "snapToAlignment", snapToEnd: "snapToEnd", snapToInterval: "snapToInterval", snapToOffsets: "snapToOffsets", snapToStart: "snapToStart", stickyHeaderIndices: "stickyHeaderIndices", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", onScrollToTop: "onScrollToTop", onContentSizeChange: "onContentSizeChange" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ScrollViewElement, isStandalone: true, selector: "scroll-view", inputs: { scrollEnabled: "scrollEnabled", scrollEventThrottle: "scrollEventThrottle", contentContainerStyle: "contentContainerStyle", contentInset: "contentInset", contentInsetAdjustmentBehavior: "contentInsetAdjustmentBehavior", contentOffset: "contentOffset", scrollIndicatorInsets: "scrollIndicatorInsets", showsHorizontalScrollIndicator: "showsHorizontalScrollIndicator", showsVerticalScrollIndicator: "showsVerticalScrollIndicator", alwaysBounceHorizontal: "alwaysBounceHorizontal", alwaysBounceVertical: "alwaysBounceVertical", bounces: "bounces", bouncesZoom: "bouncesZoom", centerContent: "centerContent", decelerationRate: "decelerationRate", directionalLockEnabled: "directionalLockEnabled", disableIntervalMomentum: "disableIntervalMomentum", endFillColor: "endFillColor", fadingEdgeLength: "fadingEdgeLength", indicatorStyle: "indicatorStyle", invertStickyHeaders: "invertStickyHeaders", keyboardDismissMode: "keyboardDismissMode", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", automaticallyAdjustKeyboardInsets: "automaticallyAdjustKeyboardInsets", maintainVisibleContentPosition: "maintainVisibleContentPosition", maximumZoomScale: "maximumZoomScale", minimumZoomScale: "minimumZoomScale", zoomScale: "zoomScale", nestedScrollEnabled: "nestedScrollEnabled", overScrollMode: "overScrollMode", pagingEnabled: "pagingEnabled", persistentScrollbar: "persistentScrollbar", pinchGestureEnabled: "pinchGestureEnabled", snapToAlignment: "snapToAlignment", snapToEnd: "snapToEnd", snapToInterval: "snapToInterval", snapToOffsets: "snapToOffsets", snapToStart: "snapToStart", stickyHeaderIndices: "stickyHeaderIndices", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", onScrollToTop: "onScrollToTop", onContentSizeChange: "onContentSizeChange" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollViewElement, decorators: [{
             type: Directive,
@@ -857,24 +684,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class HorizontalScrollViewElement extends ScrollViewElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HorizontalScrollViewElement, isStandalone: true, selector: "horizontal-scroll-view", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HorizontalScrollViewElement, isStandalone: true, selector: "horizontal-scroll-view", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollViewElement, decorators: [{
             type: Directive,
             args: [{ selector: 'horizontal-scroll-view', standalone: true }]
         }] });
 export class ScrollContentElement extends SymbioteElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollContentElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ScrollContentElement, isStandalone: true, selector: "scroll-content", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollContentElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ScrollContentElement, isStandalone: true, selector: "scroll-content", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollContentElement, decorators: [{
             type: Directive,
             args: [{ selector: 'scroll-content', standalone: true }]
         }] });
 export class HorizontalScrollContentElement extends SymbioteElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollContentElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HorizontalScrollContentElement, isStandalone: true, selector: "horizontal-scroll-content", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollContentElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HorizontalScrollContentElement, isStandalone: true, selector: "horizontal-scroll-content", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HorizontalScrollContentElement, decorators: [{
             type: Directive,
@@ -893,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * obvious reading is wrong: the file header's "an `@Output` CONSUMES the binding" holds for a
  * COMPONENT, and an element is the other case — Angular attaches the renderer listener for the
  * event as well, so `Renderer2.listen` still runs and the engine still hears the change. Measured
- * under JIT by deleting this whole hook: every case in `lowered-two-way-value.test.ts` stayed
+ * under JIT by deleting this whole hook: every case in `renderer/two-way-value.test.ts` stayed
  * green, delivery included, and exactly ONCE (nothing double-fires when both paths exist).
  *
  * It is kept because the measurement is JIT-only and this adapter has a recorded case of JIT and
@@ -909,9 +736,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * an unbound one), not assumed.
  */
 class ValueChangeElement extends ReadBackElement {
-    valueRenderer = inject(Renderer2);
-    valueHost = inject(ElementRef);
-    unlistenValue;
+    constructor() {
+        super(...arguments);
+        this.valueRenderer = inject(Renderer2);
+        this.valueHost = inject(ElementRef);
+    }
     ngOnInit() {
         if (!this.hasValueSubscriber())
             return;
@@ -923,53 +752,19 @@ class ValueChangeElement extends ReadBackElement {
         super.ngOnDestroy();
         this.unlistenValue?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValueChangeElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ValueChangeElement, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValueChangeElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ValueChangeElement, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValueChangeElement, decorators: [{
             type: Directive
         }] });
 export class TextInputElement extends ValueChangeElement {
-    value;
-    defaultValue;
-    placeholder;
-    placeholderTextColor;
-    multiline;
-    numberOfLines;
-    maxLength;
-    editable;
-    readOnly;
-    autoFocus;
-    autoCapitalize;
-    autoComplete;
-    autoCorrect;
-    blurOnSubmit;
-    submitBehavior;
-    cursorColor;
-    enterKeyHint;
-    returnKeyType;
-    inputMode;
-    keyboardType;
-    inputAccessoryViewID;
-    scrollEnabled;
-    secureTextEntry;
-    selectTextOnFocus;
-    selection;
-    selectionColor;
-    selectionHandleColor;
-    showSoftInputOnFocus;
-    textAlign;
-    textContentType;
-    underlineColorAndroid;
-    onValueChange;
-    onContentSizeChange;
-    onEndEditing;
-    onKeyPress;
-    onSelectionChange;
-    onSubmitEditing;
-    // NonNullable, not the prop type: `[(value)]="name"` binds a `string`, and an emitter that can
-    // also emit `undefined` fails the two-way assignability check ngtsc runs on the event half.
-    valueChange = new EventEmitter();
+    constructor() {
+        super(...arguments);
+        // NonNullable, not the prop type: `[(value)]="name"` binds a `string`, and an emitter that can
+        // also emit `undefined` fails the two-way assignability check ngtsc runs on the event half.
+        this.valueChange = new EventEmitter();
+    }
     hasValueSubscriber() {
         return this.valueChange.observed;
     }
@@ -977,8 +772,8 @@ export class TextInputElement extends ValueChangeElement {
         if (typeof value === 'string')
             this.valueChange.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextInputElement, isStandalone: true, selector: "text-input", inputs: { value: "value", defaultValue: "defaultValue", placeholder: "placeholder", placeholderTextColor: "placeholderTextColor", multiline: "multiline", numberOfLines: "numberOfLines", maxLength: "maxLength", editable: "editable", readOnly: "readOnly", autoFocus: "autoFocus", autoCapitalize: "autoCapitalize", autoComplete: "autoComplete", autoCorrect: "autoCorrect", blurOnSubmit: "blurOnSubmit", submitBehavior: "submitBehavior", cursorColor: "cursorColor", enterKeyHint: "enterKeyHint", returnKeyType: "returnKeyType", inputMode: "inputMode", keyboardType: "keyboardType", inputAccessoryViewID: "inputAccessoryViewID", scrollEnabled: "scrollEnabled", secureTextEntry: "secureTextEntry", selectTextOnFocus: "selectTextOnFocus", selection: "selection", selectionColor: "selectionColor", selectionHandleColor: "selectionHandleColor", showSoftInputOnFocus: "showSoftInputOnFocus", textAlign: "textAlign", textContentType: "textContentType", underlineColorAndroid: "underlineColorAndroid", onValueChange: "onValueChange", onContentSizeChange: "onContentSizeChange", onEndEditing: "onEndEditing", onKeyPress: "onKeyPress", onSelectionChange: "onSelectionChange", onSubmitEditing: "onSubmitEditing" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextInputElement, isStandalone: true, selector: "text-input", inputs: { value: "value", defaultValue: "defaultValue", placeholder: "placeholder", placeholderTextColor: "placeholderTextColor", multiline: "multiline", numberOfLines: "numberOfLines", maxLength: "maxLength", editable: "editable", readOnly: "readOnly", autoFocus: "autoFocus", autoCapitalize: "autoCapitalize", autoComplete: "autoComplete", autoCorrect: "autoCorrect", blurOnSubmit: "blurOnSubmit", submitBehavior: "submitBehavior", cursorColor: "cursorColor", enterKeyHint: "enterKeyHint", returnKeyType: "returnKeyType", inputMode: "inputMode", keyboardType: "keyboardType", inputAccessoryViewID: "inputAccessoryViewID", scrollEnabled: "scrollEnabled", secureTextEntry: "secureTextEntry", selectTextOnFocus: "selectTextOnFocus", selection: "selection", selectionColor: "selectionColor", selectionHandleColor: "selectionHandleColor", showSoftInputOnFocus: "showSoftInputOnFocus", textAlign: "textAlign", textContentType: "textContentType", underlineColorAndroid: "underlineColorAndroid", onValueChange: "onValueChange", onChangeText: "onChangeText", onContentSizeChange: "onContentSizeChange", onEndEditing: "onEndEditing", onKeyPress: "onKeyPress", onSelectionChange: "onSelectionChange", onSubmitEditing: "onSubmitEditing" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputElement, decorators: [{
             type: Directive,
@@ -1047,6 +842,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], onValueChange: [{
                 type: Input
+            }], onChangeText: [{
+                type: Input
             }], onContentSizeChange: [{
                 type: Input
             }], onEndEditing: [{
@@ -1061,40 +858,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Output
             }] } });
 export class MultilineTextInputElement extends TextInputElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultilineTextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: MultilineTextInputElement, isStandalone: true, selector: "text-input-multiline", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultilineTextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: MultilineTextInputElement, isStandalone: true, selector: "text-input-multiline", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultilineTextInputElement, decorators: [{
             type: Directive,
             args: [{ selector: 'text-input-multiline', standalone: true }]
         }] });
-// The COMPONENT path's spelling of the pair above — same native views, a tag the behavior registry
-// deliberately does not carry (`component-names/shared.ts`). Declared so the tag alphabet is
-// complete; an app writes the plain name.
-export class ManagedTextInputElement extends TextInputElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedTextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ManagedTextInputElement, isStandalone: true, selector: "text-input-managed", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedTextInputElement, decorators: [{
-            type: Directive,
-            args: [{ selector: 'text-input-managed', standalone: true }]
-        }] });
-export class ManagedMultilineTextInputElement extends TextInputElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedMultilineTextInputElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ManagedMultilineTextInputElement, isStandalone: true, selector: "text-input-multiline-managed", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedMultilineTextInputElement, decorators: [{
-            type: Directive,
-            args: [{ selector: 'text-input-multiline-managed', standalone: true }]
-        }] });
 export class SwitchElement extends ValueChangeElement {
-    value;
-    disabled;
-    trackColor;
-    thumbColor;
-    ios_backgroundColor;
-    onValueChange;
-    valueChange = new EventEmitter();
+    constructor() {
+        super(...arguments);
+        this.valueChange = new EventEmitter();
+    }
     hasValueSubscriber() {
         return this.valueChange.observed;
     }
@@ -1102,12 +877,12 @@ export class SwitchElement extends ValueChangeElement {
         if (typeof value === 'boolean')
             this.valueChange.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SwitchElement, isStandalone: true, selector: "switch", inputs: { value: "value", disabled: "disabled", trackColor: "trackColor", thumbColor: "thumbColor", ios_backgroundColor: "ios_backgroundColor", onValueChange: "onValueChange" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SwitchElement, isStandalone: true, selector: "switch, symbiote-switch", inputs: { value: "value", disabled: "disabled", trackColor: "trackColor", thumbColor: "thumbColor", ios_backgroundColor: "ios_backgroundColor", onValueChange: "onValueChange" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'switch', standalone: true }]
+            args: [{ selector: 'switch, symbiote-switch', standalone: true }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -1123,14 +898,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }], valueChange: [{
                 type: Output
             }] } });
-export class ManagedSwitchElement extends SwitchElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedSwitchElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ManagedSwitchElement, isStandalone: true, selector: "switch-managed", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ManagedSwitchElement, decorators: [{
-            type: Directive,
-            args: [{ selector: 'switch-managed', standalone: true }]
-        }] });
 /**
  * `[(ngModel)]` / `formControlName` on a `<text-input>` or a `<switch>`.
  *
@@ -1145,9 +912,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * directive holds no fold of its own.
  */
 class SymbioteValueAccessor {
-    renderer = inject(Renderer2);
-    host = inject(ElementRef);
-    unlisten;
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.host = inject(ElementRef);
+    }
     setProp(name, value) {
         this.renderer.setProperty(this.host.nativeElement, name, value);
     }
@@ -1157,6 +925,21 @@ class SymbioteValueAccessor {
     registerOnChange(fn) {
         this.unlisten?.();
         this.unlisten = this.renderer.listen(this.host.nativeElement, VALUE_CHANGE_EVENT, (value) => {
+            // THE HALF THE DOM DOES FOR FREE, and without it a controlled input undoes every
+            // keystroke. `<text-input>`'s behavior re-commands the native text whenever `props.value`
+            // disagrees with what native last reported — that is what makes it controlled — and the
+            // read-back flush exists so the app's new value is on the node by the time the commit runs.
+            // @angular/forms does not reach the node in that window: `NgModel.ngOnChanges` defers
+            // `_updateValue` through `resolvedPromise.then`, so `writeValue` lands a MICROTASK after
+            // the flush, and the commit in between still reads the value from before the keystroke.
+            //
+            // In a browser there is nothing to do here: `input.value` already holds what the user
+            // typed. `node.props.value` is the same slot, and nothing else writes it — so the accessor
+            // mirrors it, which is the shape rather than a workaround. A later `writeValue` still wins,
+            // so an app that transforms or refuses the value keeps doing so, one microtask on.
+            //
+            // Device-reported 2026-09-20: every character snapped the field back to its mounted text.
+            this.setProp('value', value);
             fn(value);
         });
     }
@@ -1171,8 +954,8 @@ class SymbioteValueAccessor {
     ngOnDestroy() {
         this.unlisten?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteValueAccessor, isStandalone: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteValueAccessor, isStandalone: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteValueAccessor, decorators: [{
             type: Directive
@@ -1181,14 +964,14 @@ export class TextInputValueAccessor extends SymbioteValueAccessor {
     writeDisabled(isDisabled) {
         this.setProp('editable', !isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextInputValueAccessor, isStandalone: true, selector: "text-input[ngModel], text-input[formControl], text-input[formControlName], text-input-multiline[ngModel], text-input-multiline[formControl], text-input-multiline[formControlName]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TextInputValueAccessor, isStandalone: true, selector: "text-input[ngModel], text-input[formControl], text-input[formControlName], text-input-multiline[ngModel], text-input-multiline[formControl], text-input-multiline[formControlName]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextInputValueAccessor),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0 });
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInputValueAccessor, decorators: [{
             type: Directive,
@@ -1208,19 +991,19 @@ export class SwitchValueAccessor extends SymbioteValueAccessor {
     writeDisabled(isDisabled) {
         this.setProp('disabled', isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SwitchValueAccessor, isStandalone: true, selector: "switch[ngModel], switch[formControl], switch[formControlName], switch-managed[ngModel], switch-managed[formControl], switch-managed[formControlName]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SwitchValueAccessor, isStandalone: true, selector: "switch[ngModel], switch[formControl], switch[formControlName]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SwitchValueAccessor),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0 });
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchValueAccessor, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'switch[ngModel], switch[formControl], switch[formControlName], switch-managed[ngModel], switch-managed[formControl], switch-managed[formControlName]',
+                    selector: 'switch[ngModel], switch[formControl], switch[formControlName]',
                     standalone: true,
                     providers: [
                         {
@@ -1235,12 +1018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 // The four spinner props are declared here because that is where the app writes them; the engine's
 // behavior redirects them onto the spinner it builds underneath (`slotProps`).
 export class ActivityIndicatorElement extends SymbioteElement {
-    animating;
-    color;
-    size;
-    hidesWhenStopped;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ActivityIndicatorElement, isStandalone: true, selector: "activity-indicator", inputs: { animating: "animating", color: "color", size: "size", hidesWhenStopped: "hidesWhenStopped" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ActivityIndicatorElement, isStandalone: true, selector: "activity-indicator", inputs: { animating: "animating", color: "color", size: "size", hidesWhenStopped: "hidesWhenStopped" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorElement, decorators: [{
             type: Directive,
@@ -1258,38 +1037,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 // written in an app template — declared only so the tag alphabet stays covered, the same as
 // `scroll-content`.
 export class ActivityIndicatorSpinnerElement extends ActivityIndicatorElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorSpinnerElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ActivityIndicatorSpinnerElement, isStandalone: true, selector: "activity-indicator-spinner", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorSpinnerElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ActivityIndicatorSpinnerElement, isStandalone: true, selector: "activity-indicator-spinner", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicatorSpinnerElement, decorators: [{
             type: Directive,
             args: [{ selector: 'activity-indicator-spinner', standalone: true }]
         }] });
 export class SafeAreaViewElement extends SymbioteElement {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SafeAreaViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SafeAreaViewElement, isStandalone: true, selector: "safe-area-view", usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SafeAreaViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SafeAreaViewElement, isStandalone: true, selector: "safe-area-view", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SafeAreaViewElement, decorators: [{
             type: Directive,
             args: [{ selector: 'safe-area-view', standalone: true }]
         }] });
 export class ModalElement extends SymbioteElement {
-    visible;
-    transparent;
-    animationType;
-    presentationStyle;
-    supportedOrientations;
-    hardwareAccelerated;
-    statusBarTranslucent;
-    navigationBarTranslucent;
-    allowSwipeDismissal;
-    backdropColor;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ModalElement, isStandalone: true, selector: "modal", inputs: { visible: "visible", transparent: "transparent", animationType: "animationType", presentationStyle: "presentationStyle", supportedOrientations: "supportedOrientations", hardwareAccelerated: "hardwareAccelerated", statusBarTranslucent: "statusBarTranslucent", navigationBarTranslucent: "navigationBarTranslucent", allowSwipeDismissal: "allowSwipeDismissal", backdropColor: "backdropColor" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ModalElement, isStandalone: true, selector: "modal, symbiote-modal", inputs: { visible: "visible", transparent: "transparent", animationType: "animationType", presentationStyle: "presentationStyle", supportedOrientations: "supportedOrientations", hardwareAccelerated: "hardwareAccelerated", statusBarTranslucent: "statusBarTranslucent", navigationBarTranslucent: "navigationBarTranslucent", allowSwipeDismissal: "allowSwipeDismissal", backdropColor: "backdropColor" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalElement, decorators: [{
             type: Directive,
-            args: [{ selector: 'modal', standalone: true }]
+            args: [{ selector: 'modal, symbiote-modal', standalone: true }]
         }], propDecorators: { visible: [{
                 type: Input
             }], transparent: [{
@@ -1312,18 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class RefreshControlElement extends ReadBackElement {
-    refreshing;
-    enabled;
-    colors;
-    tintColor;
-    title;
-    titleColor;
-    size;
-    progressBackgroundColor;
-    progressViewOffset;
-    onRefresh;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RefreshControlElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: RefreshControlElement, isStandalone: true, selector: "refresh-control", inputs: { refreshing: "refreshing", enabled: "enabled", colors: "colors", tintColor: "tintColor", title: "title", titleColor: "titleColor", size: "size", progressBackgroundColor: "progressBackgroundColor", progressViewOffset: "progressViewOffset", onRefresh: "onRefresh" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RefreshControlElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: RefreshControlElement, isStandalone: true, selector: "refresh-control", inputs: { refreshing: "refreshing", enabled: "enabled", colors: "colors", tintColor: "tintColor", title: "title", titleColor: "titleColor", size: "size", progressBackgroundColor: "progressBackgroundColor", progressViewOffset: "progressViewOffset", onRefresh: "onRefresh" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RefreshControlElement, decorators: [{
             type: Directive,
@@ -1350,12 +1109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class StickyHeaderElement extends SymbioteElement {
-    inverted;
-    nextHeaderLayoutY;
-    scrollAnimatedValue;
-    scrollViewHeight;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StickyHeaderElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: StickyHeaderElement, isStandalone: true, selector: "sticky-header", inputs: { inverted: "inverted", nextHeaderLayoutY: "nextHeaderLayoutY", scrollAnimatedValue: "scrollAnimatedValue", scrollViewHeight: "scrollViewHeight" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StickyHeaderElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: StickyHeaderElement, isStandalone: true, selector: "sticky-header", inputs: { inverted: "inverted", nextHeaderLayoutY: "nextHeaderLayoutY", scrollAnimatedValue: "scrollAnimatedValue", scrollViewHeight: "scrollViewHeight" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StickyHeaderElement, decorators: [{
             type: Directive,
@@ -1370,9 +1125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 export class InputAccessoryViewElement extends SymbioteElement {
-    backgroundColor;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputAccessoryViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: InputAccessoryViewElement, isStandalone: true, selector: "input-accessory-view", inputs: { backgroundColor: "backgroundColor" }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputAccessoryViewElement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: InputAccessoryViewElement, isStandalone: true, selector: "input-accessory-view", inputs: { backgroundColor: "backgroundColor" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputAccessoryViewElement, decorators: [{
             type: Directive,
@@ -1406,10 +1160,7 @@ export const SYMBIOTE_ELEMENTS = [
     HorizontalScrollContentElement,
     TextInputElement,
     MultilineTextInputElement,
-    ManagedTextInputElement,
-    ManagedMultilineTextInputElement,
     SwitchElement,
-    ManagedSwitchElement,
     ActivityIndicatorElement,
     ActivityIndicatorSpinnerElement,
     SafeAreaViewElement,
@@ -1422,7 +1173,39 @@ export const SYMBIOTE_ELEMENTS = [
     // provided, and `elements.test.ts` subtracts them from its tag-coverage check by name.
     TextInputValueAccessor,
     SwitchValueAccessor,
+    // Also not a tag: it matches on the callback ATTRIBUTES, so it lands only on the elements that
+    // bind one and carries the `ChangeDetectorRef` their wrapper needs. It rides this list for the same
+    // reason the accessors do, and `elements.test.ts` subtracts it from the tag-coverage check by name.
+    SymbioteCallbackHost,
+    // The other attribute-matched one: it claims `[style]` and `[class]` so an RN style ARRAY never
+    // reaches Angular's styling engine, which cannot represent one and throws. See `style-host.ts`.
+    SymbioteStyleHost,
 ];
+// THE DIRECTIVES THAT GO ON MATCHING, and the list is the exceptions rather than the rule.
+//
+// A tag directive here is, with four exceptions, nothing but `@Input()` declarations over one
+// inherited `ngOnChanges` that forwards each of them to the renderer — which is the call
+// `ɵɵproperty` makes directly on an element nothing claimed. So the instance buys a compile-time
+// check at ~8.5-9.4 us of run time per element, and `./runtime-matching` keeps the check while
+// dropping the instance.
+//
+// These four cannot go, because they DO something when they are built:
+//
+//   text-input, text-input-multiline, switch   `ValueChangeElement` — listens for the engine's value
+//                                              event and registers a view flush, which is what stops
+//                                              a controlled value being undone inside one microtask
+//   refresh-control                            `ReadBackElement`, the same flush for the same reason
+//
+// The two form accessors and `SymbioteCallbackHost` are absent from both lists deliberately: they
+// match on an ATTRIBUTE rather than a tag, so they already land only where they are needed.
+withholdFromRuntimeMatching(SYMBIOTE_ELEMENTS.filter(directive => directive !== TextInputElement &&
+    directive !== MultilineTextInputElement &&
+    directive !== SwitchElement &&
+    directive !== RefreshControlElement &&
+    directive !== TextInputValueAccessor &&
+    directive !== SwitchValueAccessor &&
+    directive !== SymbioteCallbackHost &&
+    directive !== SymbioteStyleHost));
 const DECLARES_EVERY_PROP = {
     view: true,
     pressable: true,