@symbiote-native/angular 0.6.2 → 0.8.0

package/build/angular/components/touchable/index.js

@@ -6,9 +6,10 @@
 //     to 1 on press-out, driven from Pressable's onPressIn/onPressOut. The opacity Value is held by
 //     IDENTITY as a plain field (an engine object, never an @Input / reactive wrap) and the
 //     <symbiote-animated-view> leaf commits it every frame.
-//   TouchableHighlight: paint underlayColor + lower child opacity while pressed, via Pressable's
-//     style-as-function (Pressable drives the pressed flag through its own responder lifecycle).
-//   TouchableWithoutFeedback: no visual change, just the press wiring forwarded through Pressable.
+//   TouchableHighlight: paint underlayColor + lower child opacity while the underlay is SHOWN.
+//     RN drives that from onPressIn/onPress/onPressOut and holds it past the tap for delayPressOut,
+//     NOT from Pressable's pressed flag — a tap too fast to see is already un-pressed by then.
+//   TouchableWithoutFeedback: no visual change, but RN still runs the full press-timing machine.
 //
 // Every Touchable's own press/hover/accessibility events are now real @Output() EventEmitters too,
 // matching Pressable (which they wrap) — `(press)="handler($event)"`, never `[onPress]="handler"`.
@@ -21,18 +22,35 @@
 // forwards the Angular Pressable surface verbatim; parity is against that surface, exactly as
 // React's Touchable parity is against
 // the React Pressable surface.
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, Output, } from '@angular/core';
-import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, highlightPressedStyle, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, ElementRef, EventEmitter, inject, Input, Output, signal, } from '@angular/core';
+import { createHighlightUnderlayHandlers, createHighlightUnderlayRuntime, createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, hasTouchablePressHandler, resolveHighlightExtraStyles, restingOpacityFromStyle, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
 import {} from '@symbiote-native/engine';
-import { anchorHostStyle, anchorStyleProp } from '../../primitives';
+import { anchorHostStyle, anchorStyleProp, SymbioteStyleInputDirective, } from '../../primitives';
 import { Pressable } from '../pressable';
 import { Animated, AnimatedView } from '../../modules/animated';
 import * as i0 from "@angular/core";
-// The real setTimeout the shared feedback machine schedules its deferred activation/deactivation on
-// (core/components has no timer globals). Returns a canceller so an early release flushes the timer.
-function scheduleTimeout(callback, ms) {
-    const id = setTimeout(callback, ms);
-    return () => clearTimeout(id);
+import * as i1 from "../../primitives/shared";
+function createTimerScheduler() {
+    const pending = new Set();
+    return {
+        schedule(callback, ms) {
+            const id = setTimeout(() => {
+                pending.delete(cancel);
+                callback();
+            }, ms);
+            const cancel = () => {
+                clearTimeout(id);
+                pending.delete(cancel);
+            };
+            pending.add(cancel);
+            return cancel;
+        },
+        cancelAll() {
+            for (const cancel of [...pending])
+                cancel();
+            pending.clear();
+        },
+    };
 }
 export class TouchableOpacity {
     press = new EventEmitter();
@@ -103,13 +121,20 @@ export class TouchableOpacity {
     ariaValueText;
     id;
     role;
-    // One Animated.Value per mount, resting at full opacity. Held by IDENTITY as a plain field (an
-    // engine object, never an @Input / reactive wrap); the <symbiote-animated-view> leaf rasterizes
-    // it for the first paint and drives it through setNativeProps every frame.
+    // One Animated.Value per mount. Held by IDENTITY as a plain field (an engine object, never an
+    // @Input / reactive wrap); the <symbiote-animated-view> leaf rasterizes it for the first paint
+    // and drives it through setNativeProps every frame.
+    //
+    // RN seeds it from _getChildStyleOpacityWithDefault(props.style). Angular writes @Input()s AFTER
+    // the field initializers run, so `style` is still undefined here — the real resting value is
+    // seeded by the first ngOnChanges below, which still precedes the first template pass.
     opacity = new Animated.Value(RESTING_OPACITY);
     // The shared press-scheduling cell (delayPressIn timer + activation clock), persisted on the
     // instance; the machine's handlers are rebuilt per event over live @Input()s.
     runtime = createTouchableFeedbackRuntime();
+    timers = createTimerScheduler();
+    // What the last settle ran for. Undefined until the first ngOnChanges, which is the MOUNT.
+    settled;
     // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
     // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-animated-view> leaf one level down.
     elementRef = inject(ElementRef);
@@ -118,14 +143,57 @@ export class TouchableOpacity {
     // the commit layer flattens). `unknown` because the array mixes a plain style with an
     // AnimatedNode, exactly the bag AnimatedView's `style` input accepts.
     get animatedStyle() {
-        return [anchorHostStyle(this.elementRef), this.style, { opacity: this.opacity }];
+        return [this.anchorStyle(), this.style, { opacity: this.opacity }];
+    }
+    // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+    // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+    // A `class=` present at creation therefore worked, while one toggled later did not: the parent
+    // refreshed, the class landed on the anchor, and this component's own view was never refreshed,
+    // so whatever merged the anchor style in was never re-evaluated. Polling it into a signal from
+    // ngDoCheck fixes both halves: ngDoCheck runs during the PARENT's refresh even when this view is
+    // skipped, and the signal write is what then marks this view for refresh. `signal.set`'s own
+    // Object.is makes an unchanged poll a no-op, so there is no loop.
+    anchorStyle = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorStyle" }] : /* istanbul ignore next */ []));
+    ngDoCheck() {
+        this.anchorStyle.set(anchorHostStyle(this.elementRef));
+    }
+    // RN's componentDidUpdate: a changed `disabled` or a changed style opacity re-settles the view,
+    // so a Touchable disabled mid-press does not stay stuck at its active opacity. The FIRST call is
+    // the mount (ngOnChanges runs before ngOnInit and before the first template pass), so it seeds
+    // the Value instead of animating — RN does this on update only, and a fade at mount would animate
+    // away from the value the leaf is about to paint. A use site with no bindings gets no ngOnChanges
+    // at all, and there the RESTING_OPACITY seed is already the right answer.
+    ngOnChanges() {
+        const settled = { disabled: this.disabled, resting: this.restingOpacity() };
+        if (this.settled === undefined) {
+            this.opacity.setValue(settled.resting);
+        }
+        else if (this.settled.disabled !== settled.disabled ||
+            this.settled.resting !== settled.resting) {
+            this.setOpacityTo(settled.resting, OPACITY_INACTIVE_DURATION_MS);
+        }
+        this.settled = settled;
+    }
+    // RN's componentWillUnmount: stop the animation so a teardown mid-fade leaves no driver running
+    // against a node that is gone, and drop any press-out still deferred behind a timer.
+    ngOnDestroy() {
+        this.timers.cancelAll();
+        this.opacity.resetAnimation();
+    }
+    // RN's _getChildStyleOpacityWithDefault: the fade settles at the opacity the CALLER's style asks
+    // for, not at a hard 1 — a Touchable styled `opacity: 0.6` must come back to 0.6.
+    restingOpacity() {
+        return restingOpacityFromStyle(this.style);
     }
     setOpacityTo(toValue, duration) {
         Animated.timing(this.opacity, {
             toValue,
             duration,
             easing: Animated.Easing.inOut(Animated.Easing.quad),
-            useNativeDriver: false,
+            // RN's own (TouchableOpacity.js:242). opacity is natively drivable, so the fade survives a
+            // busy JS thread — which is the entire point of press feedback.
+            useNativeDriver: true,
         }).start();
     }
     // Built per event so the machine reads live @Input()s (delay/opacity); the runtime persists across
@@ -135,16 +203,18 @@ export class TouchableOpacity {
         return createTouchableFeedbackHandlers({
             delayPressIn: this.delayPressIn ?? 0,
             delayPressOut: this.delayPressOut ?? 0,
-            minPressDuration: this.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION_MS,
-            schedule: scheduleTimeout,
+            // RN's Touchables override Pressability's own 130ms floor with 0; what holds the active
+            // visual there is the fade's own duration, not a press-duration floor.
+            minPressDuration: this.minPressDuration ?? TOUCHABLE_MIN_PRESS_DURATION_MS,
+            schedule: this.timers.schedule,
             now: Date.now,
         }, this.runtime, {
             activate: (event) => {
-                this.setOpacityTo(this.activeOpacity ?? DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_DURATION_MS);
+                this.setOpacityTo(this.activeOpacity ?? DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS);
                 this.pressIn.emit(event);
             },
             deactivate: (event) => {
-                this.setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+                this.setOpacityTo(this.restingOpacity(), OPACITY_INACTIVE_DURATION_MS);
                 this.pressOut.emit(event);
             },
         });
@@ -157,8 +227,8 @@ export class TouchableOpacity {
     handlePressOut = (event) => {
         this.feedbackHandlers().handlePressOut(event);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableOpacity, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: TouchableOpacity, isStandalone: true, selector: "TouchableOpacity", inputs: { activeOpacity: "activeOpacity", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableOpacity, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TouchableOpacity, isStandalone: true, selector: "TouchableOpacity", inputs: { activeOpacity: "activeOpacity", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     <Pressable
       (press)="press.emit($event)"
       (pressIn)="handlePressIn($event)"
@@ -200,8 +270,12 @@ export class TouchableOpacity {
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -230,11 +304,14 @@ export class TouchableOpacity {
     </Pressable>
   `, isInline: true, dependencies: [{ kind: "component", type: Pressable, selector: "Pressable, symbiote-pressable", inputs: ["delayLongPress", "disabled", "cancelable", "hitSlop", "pressRetentionOffset", "unstable_pressDelay", "android_ripple", "android_disableSound", "delayHoverIn", "delayHoverOut", "testID", "nativeID", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp", "style", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "ariaLabel", "ariaBusy", "ariaChecked", "ariaDisabled", "ariaExpanded", "ariaHidden", "ariaLabelledBy", "ariaLive", "ariaSelected", "ariaModal", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "id", "role"], outputs: ["press", "pressIn", "pressOut", "pressMove", "longPress", "hoverIn", "hoverOut", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "component", type: AnimatedView, selector: "AnimatedView, symbiote-animated-view", inputs: ["style", "animatedProps", "passthroughAnimatedPropExplicitValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableOpacity, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableOpacity, decorators: [{
             type: Component,
             args: [{
                     selector: 'TouchableOpacity',
                     standalone: true,
+                    hostDirectives: [
+                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+                    ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [Pressable, AnimatedView],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -280,8 +357,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -459,6 +540,9 @@ export class TouchableHighlight {
     accessibilityTap = new EventEmitter();
     magicTap = new EventEmitter();
     accessibilityEscape = new EventEmitter();
+    // RN's onShowUnderlay / onHideUnderlay — fired on a real transition only, never on a repeat.
+    showUnderlay = new EventEmitter();
+    hideUnderlay = new EventEmitter();
     activeOpacity;
     underlayColor;
     delayPressIn;
@@ -520,23 +604,110 @@ export class TouchableHighlight {
     // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
     // onto (see anchorHostStyle's doc comment) — NOT the Pressable one level down.
     elementRef = inject(ElementRef);
-    // Pressable accepts a style-as-function and calls it with the live pressed state. Arrow field so
-    // `this` stays bound when Pressable invokes it; it reads the inputs LIVE at call time. The
-    // anchor's class-derived style goes first, then the user's explicit style, so an explicit
-    // [style] still beats the ambient class. When pressed, paint the underlay color + lower the
-    // child opacity (RN drives this with setState, not Animated, so we mirror that faithfully
-    // through Pressable's pressed flag, no tween) — the overlay always goes last so it wins.
-    pressedStyle = (state) => {
-        const base = [anchorStyleProp(this.elementRef), this.style];
-        return highlightPressedStyle(state.pressed, base, this.underlayColor ?? DEFAULT_UNDERLAY_COLOR, this.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY);
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: TouchableHighlight, isStandalone: true, selector: "TouchableHighlight", inputs: { activeOpacity: "activeOpacity", underlayColor: "underlayColor", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, ngImport: i0, template: `
+    // `shown` is NOT Pressable's `pressed`. RN holds the underlay for delayPressOut past the tap so a
+    // press too fast to see still flashes, and the pressed flag is already false by then. A SIGNAL,
+    // because the hide fires from a timer — outside any Angular listener, so under zoneless CD
+    // nothing else would mark this view. A signal write both notifies the change-detection scheduler
+    // (markAncestorsForTraversal) and dirties this template's own reactive consumer, which is the one
+    // thing honored in Targeted mode; markForCheck from a plain field would not be reachable here.
+    shown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    underlayRuntime = createHighlightUnderlayRuntime();
+    timers = createTimerScheduler();
+    // The container style Pressable paints.
+    //
+    // POINT-7 DECISION — both halves stay on the CONTAINER, deliberately. RN's _createExtraStyles
+    // keeps them apart: `underlay` (the backgroundColor) on the container, `child` (the lowered
+    // opacity) cloned onto the single child. Angular has no cloneElement and no way to reach a
+    // projected <ng-content> node, so the only path to the child is a permanent wrapper View — which
+    // inserts a node into the flex chain and silently re-parents any `flex` a child declares. The
+    // fake Fabric runs no Yoga, so no headless test can measure that damage, only assert the extra
+    // node exists; shipping an unmeasurable layout change is worse than the visual approximation.
+    // Same call, same reason, as the Solid adapter. resolveHighlightExtraStyles keeps the two styles
+    // SEPARATE regardless, so a layout-safe fix (which needs a device check, not a test) stays open.
+    //
+    // Returns a NEW ARRAY whenever a dependency moves: Pressable's `style` @Input then reports an
+    // ordinary change. A stable reference was the earlier bug — Pressable's view never refreshed, so
+    // a class or [style] toggled after mount never reached the committed view.
+    containerStyle = computed(() => {
+        this.inputsRevision();
+        const base = [this.anchorStyle(), this.style];
+        const extra = resolveHighlightExtraStyles({
+            shown: this.shown(),
+            hasPressHandler: this.hasPressHandler(),
+            underlayColor: this.underlayColor,
+            activeOpacity: this.activeOpacity,
+        });
+        return extra === undefined ? base : [base, extra.underlay, extra.child];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
+    // RN's _hasPressHandler: a Touchable that handles no press paints no underlay. Angular exposes
+    // the press lifecycle as @Output()s, so "a handler is present" is "something is subscribed" — the
+    // same `.observed` test Pressable uses to decide whether to arm its long-press timer at all.
+    hasPressHandler() {
+        return hasTouchablePressHandler({
+            onPress: this.press.observed ? this.press : undefined,
+            onPressIn: this.pressIn.observed ? this.pressIn : undefined,
+            onPressOut: this.pressOut.observed ? this.pressOut : undefined,
+            onLongPress: this.longPress.observed ? this.longPress : undefined,
+        });
+    }
+    // Built per event so the machine reads live @Input()s (delayPressOut, the has-handler gate); the
+    // runtime persists across calls, which is what lets handlePressOut see the timer handlePress set.
+    underlayHandlers() {
+        return createHighlightUnderlayHandlers({
+            delayPressOut: this.delayPressOut ?? 0,
+            hasPressHandler: this.hasPressHandler(),
+            schedule: this.timers.schedule,
+        }, this.underlayRuntime, {
+            setShown: (shown) => this.shown.set(shown),
+            onShowUnderlay: () => this.showUnderlay.emit(),
+            onHideUnderlay: () => this.hideUnderlay.emit(),
+        });
+    }
+    // Visual first, then the caller's own event — RN's order in _createPressabilityConfig.
+    // onLongPress is deliberately NOT intercepted (Pressable emits it straight through); it is only
+    // READ, by the has-press-handler gate above.
+    handlePressIn(event) {
+        this.underlayHandlers().handlePressIn(event);
+        this.pressIn.emit(event);
+    }
+    handlePress(event) {
+        this.underlayHandlers().handlePress(event);
+        this.press.emit(event);
+    }
+    handlePressOut(event) {
+        this.underlayHandlers().handlePressOut(event);
+        this.pressOut.emit(event);
+    }
+    ngOnDestroy() {
+        this.timers.cancelAll();
+    }
+    // `style`, `underlayColor` and `activeOpacity` are read untracked inside containerStyle, so the
+    // bump is what tells it they moved. See the ngDoCheck note below for the anchor half, which
+    // ngOnChanges cannot cover.
+    inputsRevision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputsRevision" }] : /* istanbul ignore next */ []));
+    anchorStyle = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorStyle" }] : /* istanbul ignore next */ []));
+    ngOnChanges() {
+        this.inputsRevision.update(revision => revision + 1);
+    }
+    // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+    // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+    // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+    // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+    // unchanged poll a no-op, so there is no loop.
+    ngDoCheck() {
+        this.anchorStyle.set(anchorStyleProp(this.elementRef));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TouchableHighlight, isStandalone: true, selector: "TouchableHighlight", inputs: { activeOpacity: "activeOpacity", underlayColor: "underlayColor", delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape", showUnderlay: "showUnderlay", hideUnderlay: "hideUnderlay" }, usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     <Pressable
-      [style]="pressedStyle"
-      (press)="press.emit($event)"
-      (pressIn)="pressIn.emit($event)"
-      (pressOut)="pressOut.emit($event)"
+      [style]="containerStyle()"
+      (press)="handlePress($event)"
+      (pressIn)="handlePressIn($event)"
+      (pressOut)="handlePressOut($event)"
       (pressMove)="pressMove.emit($event)"
       (longPress)="longPress.emit($event)"
       (hoverIn)="hoverIn.emit($event)"
@@ -574,8 +745,12 @@ export class TouchableHighlight {
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -602,19 +777,22 @@ export class TouchableHighlight {
     </Pressable>
   `, isInline: true, dependencies: [{ kind: "component", type: Pressable, selector: "Pressable, symbiote-pressable", inputs: ["delayLongPress", "disabled", "cancelable", "hitSlop", "pressRetentionOffset", "unstable_pressDelay", "android_ripple", "android_disableSound", "delayHoverIn", "delayHoverOut", "testID", "nativeID", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp", "style", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "ariaLabel", "ariaBusy", "ariaChecked", "ariaDisabled", "ariaExpanded", "ariaHidden", "ariaLabelledBy", "ariaLive", "ariaSelected", "ariaModal", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "id", "role"], outputs: ["press", "pressIn", "pressOut", "pressMove", "longPress", "hoverIn", "hoverOut", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableHighlight, decorators: [{
             type: Component,
             args: [{
                     selector: 'TouchableHighlight',
                     standalone: true,
+                    hostDirectives: [
+                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+                    ],
                     imports: [Pressable],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <Pressable
-      [style]="pressedStyle"
-      (press)="press.emit($event)"
-      (pressIn)="pressIn.emit($event)"
-      (pressOut)="pressOut.emit($event)"
+      [style]="containerStyle()"
+      (press)="handlePress($event)"
+      (pressIn)="handlePressIn($event)"
+      (pressOut)="handlePressOut($event)"
       (pressMove)="pressMove.emit($event)"
       (longPress)="longPress.emit($event)"
       (hoverIn)="hoverIn.emit($event)"
@@ -652,8 +830,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -702,6 +884,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Output
             }], accessibilityEscape: [{
                 type: Output
+            }], showUnderlay: [{
+                type: Output
+            }], hideUnderlay: [{
+                type: Output
             }], activeOpacity: [{
                 type: Input
             }], underlayColor: [{
@@ -820,9 +1006,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }] } });
 export class TouchableWithoutFeedback {
-    // delayPressIn/delayPressOut/minPressDuration ride the prop type for surface parity with the
-    // other two, but TouchableWithoutFeedback has no visual feedback, so nothing schedules off them
-    // (RN's TouchableWithoutFeedback is the same pure passthrough).
+    // RN's TouchableWithoutFeedback builds a FULL Pressability config with delayPressIn /
+    // delayPressOut / minPressDuration: 0 — "without feedback" means no VISUAL, not no timing. So the
+    // same shared machine TouchableOpacity uses runs here, with the visual half left empty: the
+    // pressIn/pressOut EMIT is what gets deferred and floored.
     press = new EventEmitter();
     pressIn = new EventEmitter();
     pressOut = new EventEmitter();
@@ -893,18 +1080,56 @@ export class TouchableWithoutFeedback {
     // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
     // onto (see anchorHostStyle's doc comment) — NOT the Pressable one level down.
     elementRef = inject(ElementRef);
+    // The shared press-scheduling cell (delayPressIn timer + activation clock), persisted on the
+    // instance; the machine's handlers are rebuilt per event over live @Input()s.
+    runtime = createTouchableFeedbackRuntime();
+    timers = createTimerScheduler();
     // The anchor's class-derived style goes first, then the explicit style, so an explicit [style]
     // still beats the ambient class.
     get mergedStyle() {
-        return [anchorStyleProp(this.elementRef), this.style];
+        return [this.anchorStyle(), this.style];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableWithoutFeedback, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: TouchableWithoutFeedback, isStandalone: true, selector: "TouchableWithoutFeedback", inputs: { delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, ngImport: i0, template: `
+    feedbackHandlers() {
+        return createTouchableFeedbackHandlers({
+            delayPressIn: this.delayPressIn ?? 0,
+            delayPressOut: this.delayPressOut ?? 0,
+            minPressDuration: this.minPressDuration ?? TOUCHABLE_MIN_PRESS_DURATION_MS,
+            schedule: this.timers.schedule,
+            now: Date.now,
+        }, this.runtime, {
+            activate: (event) => this.pressIn.emit(event),
+            deactivate: (event) => this.pressOut.emit(event),
+        });
+    }
+    handlePressIn(event) {
+        this.feedbackHandlers().handlePressIn(event);
+    }
+    handlePressOut(event) {
+        this.feedbackHandlers().handlePressOut(event);
+    }
+    ngOnDestroy() {
+        this.timers.cancelAll();
+    }
+    // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+    // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+    // A `class=` present at creation therefore worked, while one toggled later did not: the parent
+    // refreshed, the class landed on the anchor, and this component's own view was never refreshed,
+    // so whatever merged the anchor style in was never re-evaluated. Polling it into a signal from
+    // ngDoCheck fixes both halves: ngDoCheck runs during the PARENT's refresh even when this view is
+    // skipped, and the signal write is what then marks this view for refresh. `signal.set`'s own
+    // Object.is makes an unchanged poll a no-op, so there is no loop.
+    anchorStyle = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorStyle" }] : /* istanbul ignore next */ []));
+    ngDoCheck() {
+        this.anchorStyle.set(anchorStyleProp(this.elementRef));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableWithoutFeedback, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TouchableWithoutFeedback, isStandalone: true, selector: "TouchableWithoutFeedback", inputs: { delayPressIn: "delayPressIn", delayPressOut: "delayPressOut", minPressDuration: "minPressDuration", style: "style", delayLongPress: "delayLongPress", delayHoverIn: "delayHoverIn", delayHoverOut: "delayHoverOut", disabled: "disabled", cancelable: "cancelable", hitSlop: "hitSlop", pressRetentionOffset: "pressRetentionOffset", unstable_pressDelay: "unstable_pressDelay", android_ripple: "android_ripple", android_disableSound: "android_disableSound", testID: "testID", nativeID: "nativeID", hasTVPreferredFocus: "hasTVPreferredFocus", nextFocusDown: "nextFocusDown", nextFocusForward: "nextFocusForward", nextFocusLeft: "nextFocusLeft", nextFocusRight: "nextFocusRight", nextFocusUp: "nextFocusUp", 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", ariaLabel: "ariaLabel", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaHidden: "ariaHidden", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText", id: "id", role: "role" }, outputs: { press: "press", pressIn: "pressIn", pressOut: "pressOut", pressMove: "pressMove", longPress: "longPress", hoverIn: "hoverIn", hoverOut: "hoverOut", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     <Pressable
       [style]="mergedStyle"
       (press)="press.emit($event)"
-      (pressIn)="pressIn.emit($event)"
-      (pressOut)="pressOut.emit($event)"
+      (pressIn)="handlePressIn($event)"
+      (pressOut)="handlePressOut($event)"
       (pressMove)="pressMove.emit($event)"
       (longPress)="longPress.emit($event)"
       (hoverIn)="hoverIn.emit($event)"
@@ -942,8 +1167,12 @@ export class TouchableWithoutFeedback {
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -970,19 +1199,22 @@ export class TouchableWithoutFeedback {
     </Pressable>
   `, isInline: true, dependencies: [{ kind: "component", type: Pressable, selector: "Pressable, symbiote-pressable", inputs: ["delayLongPress", "disabled", "cancelable", "hitSlop", "pressRetentionOffset", "unstable_pressDelay", "android_ripple", "android_disableSound", "delayHoverIn", "delayHoverOut", "testID", "nativeID", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp", "style", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "ariaLabel", "ariaBusy", "ariaChecked", "ariaDisabled", "ariaExpanded", "ariaHidden", "ariaLabelledBy", "ariaLive", "ariaSelected", "ariaModal", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "id", "role"], outputs: ["press", "pressIn", "pressOut", "pressMove", "longPress", "hoverIn", "hoverOut", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TouchableWithoutFeedback, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TouchableWithoutFeedback, decorators: [{
             type: Component,
             args: [{
                     selector: 'TouchableWithoutFeedback',
                     standalone: true,
+                    hostDirectives: [
+                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+                    ],
                     imports: [Pressable],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <Pressable
       [style]="mergedStyle"
       (press)="press.emit($event)"
-      (pressIn)="pressIn.emit($event)"
-      (pressOut)="pressOut.emit($event)"
+      (pressIn)="handlePressIn($event)"
+      (pressOut)="handlePressOut($event)"
       (pressMove)="pressMove.emit($event)"
       (longPress)="longPress.emit($event)"
       (hoverIn)="hoverIn.emit($event)"
@@ -1020,8 +1252,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"